:root {
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-border: #e0e5f2;
  --color-primary: #ff7a30;
  --color-primary-soft: #ffe0cc;
  --color-primary-dark: #e05a0c;
  --color-success: #6ee7c8;
  --color-text-main: #1f2933;
  --color-text-muted: #6b7280;
  --color-text-soft: #9ca3af;
  --radius-lg: 16px;
  --radius-xl: 999px;
  --shadow-soft: 0 20px 45px rgba(15, 23, 42, 0.08);
}

/* Reset-ish */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--color-text-main);
  background: radial-gradient(circle at top left, #fef5ee 0, #f5f7fb 45%, #edf1fb 100%);
}

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

.container {
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
}

/* Banner */
header.banner {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
}

.nav a {
  padding: 8px 10px;
  border-radius: 10px;
}

.nav a:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
/* Make nav links shrink to content width */
.nav a {
  position: relative;
  display: inline-block;   /* important */
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
}

/* Active state */
.nav a.active {
  color: var(--color-primary-dark);
  font-weight: 600;
}

/* Clean underline indicator */
.nav a.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;   /* sits just below the text */
  height: 3px;
  border-radius: 3px;
  background: var(--color-primary);
}


/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-main);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: #d3daee;
}

.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 16px 32px rgba(255, 122, 48, 0.24);
}

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

.btn-secondary {
  border-color: transparent;
  background: linear-gradient(135deg, #10b981 0%, #065f46 100%);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 18px 36px rgba(6, 95, 70, 0.35);
}

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

/* Main */
main { padding: 0 0 56px; }

/* =========================================================
   HERO (constrained frame inside container)
========================================================= */
.hero-banner {
  margin-top: 18px;
}

.hero-banner-frame {
  position: relative;
  min-height: 520px;
  padding: 96px 72px 80px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(224, 229, 242, 0.9);

  background-image: url("/assets/images/hero-road.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

.hero-banner-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(10,15,25,0.58) 0%, rgba(10,15,25,0.28) 60%, rgba(10,15,25,0.10) 100%);
  z-index: 1;
}

.hero-banner-inner { position: relative; z-index: 2; }

.hero-banner-content { max-width: 720px; }

.hero-banner h1 {
  margin: 0 0 14px;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #000;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

/* Orange box with fade/glow */
.hero-banner-subbox {
  display: inline-block;
  margin: 0 0 24px;
  padding: 26px 28px;
  border-radius: 20px;
  max-width: 60ch;

  /* Softer glass-style gradient */
  background: linear-gradient(
    135deg,
    rgba(255, 122, 48, 0.85) 0%,
    rgba(255, 122, 48, 0.70) 100%
  );

  color: #ffffff;
  font-weight: 500;
  line-height: 1.6;
  font-size: clamp(16px, 2vw, 22px);

  /* Subtle border for glass effect */
  border: 1px solid rgba(255, 255, 255, 0.25);

  /* Softer, more premium shadow */
  box-shadow:
    0 18px 50px rgba(15, 23, 42, 0.25);

  /* Stronger blur for modern glass */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.hero-banner-cta { margin-top: 6px; }

/* Mobile tweaks (hero frame) */
@media (max-width: 820px) {
  .hero-banner-frame {
    min-height: 420px;
    padding: 64px 24px 56px;
    border-radius: 18px;
  }
}

/* Mobile: make hero full width (full-bleed) */
@media (max-width: 820px) {
  .hero-banner .hero-banner-frame {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
}

/* =========================================================
   Section lead (title/subtitle/pills under hero)
========================================================= */
.section-lead {
  margin-top: 18px;
  padding: 18px 18px 6px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}

.section-title {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.section-subtitle {
  margin: 0 0 10px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* =========================================================
   Content grid / cards
========================================================= */
.grid-3 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--color-border);
  background:
    radial-gradient(circle at top left, rgba(255, 224, 204, 0.55) 0%, rgba(255, 255, 255, 0.9) 60%),
    #fff;
}

.card-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.card-head h2 { margin: 0; font-size: 18px; letter-spacing: -0.02em; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: var(--radius-xl);
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 12px;
  border: 1px solid rgba(255, 122, 48, 0.25);
  white-space: nowrap;
}

.card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.lead {
  margin: 0 0 12px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 14px;
}

.list {
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 14px;
}

.list li { margin: 6px 0; }

/* Stack grid on smaller screens */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* =========================================================
   Page hero (used on other pages)
========================================================= */
.page-hero {
  padding: 44px 0 16px;
}

.page-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.page-hero p {
  margin: 0 0 18px;
  color: var(--color-text-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 72ch;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.hero-content { min-width: 0; }

.hero-card {
  background: var(--color-surface);
  /*border: 1px solid rgba(110, 231, 200, 0.55);*/
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}

.hero-card p {
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: none;
}

@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; }
}

/* =========================================================
   Founder block (clean + consistent + mobile-safe)
========================================================= */
.founder-block {
  margin-top: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.founder-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.founder-title {
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.founder-body p {
  margin: 0 0 12px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.founder-body p strong,
.founder-body strong {
  color: var(--color-text-main);
}

.founder-photo img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
  object-fit: cover;
}

.founder-signature-block {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(224, 229, 242, 0.9);
}

.founder-name {
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 8px;
}

.founder-signature {
  display: block;
  width: auto;
  max-width: 180px;
  height: auto;
}

/* TRUE mobile: stack + image on top */
@media (max-width: 640px) {
  .founder-block { padding: 18px; }

  .founder-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .founder-photo { order: -1; }

  .founder-photo img {
    max-width: 100%;
    max-height: 280px;
  }

  .founder-signature { max-width: 150px; }
}

/* =========================================================
   Form
========================================================= */
.form-block {
  margin-top: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.form-block h3 {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.form-block p {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-main);
}

input, textarea, select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: #fff;
  font: inherit;
  color: inherit;
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(255, 122, 48, 0.55);
  box-shadow: 0 0 0 6px rgba(255, 122, 48, 0.12);
}

textarea { min-height: 110px; resize: vertical; }

.full { grid-column: 1 / -1; }

.actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.hint {
  font-size: 12px;
  color: var(--color-text-soft);
  line-height: 1.4;
}

@media (max-width: 900px) {
  form { grid-template-columns: 1fr; }
}

/* =========================================================
   Pills
========================================================= */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: 13px;
}

.pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 5px rgba(255, 122, 48, 0.25);
}

/* Compact pills when inside hero orange subbox */
.hero-banner-subbox .pill-row {
  margin-top: 12px;
  gap: 8px;
}

.hero-banner-subbox .pill {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ff7a30;
  box-shadow: none;
}

.hero-banner-subbox .pill-dot {
  width: 8px;
  height: 8px;
  background: #ff7a30;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
}

@media (max-width: 820px) {
  .hero-banner-subbox .pill-row {
    gap: 6px;
    margin-top: 10px;
  }

  .hero-banner-subbox .pill {
    padding: 5px 9px;
    font-size: 11px;
  }

  .hero-banner-subbox .pill-dot {
    width: 7px;
    height: 7px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
  }
}

/* =========================================================
   Footer
========================================================= */
footer {
  padding: 26px 0 40px;
  color: var(--color-text-soft);
  font-size: 13px;
}

/* =========================================================
   Mobile nav
========================================================= */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.nav-toggle:hover { transform: translateY(-1px); border-color: #d3daee; }

.nav-toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-main);
}

@media (max-width: 820px) {
  .banner-inner { position: relative; }
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: 0;
    padding: 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    flex-direction: column;
    gap: 10px;
    z-index: 20;
  }

  .nav.is-open { display: flex; }
  .nav a { width: 100%; }
  .nav .btn { width: 100%; justify-content: center; }
}

/* Video stacking safety */
.video-wrap { position: relative; z-index: 1; }
.video-wrap video {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: auto;
}
.overlay, .hero-overlay, .video-overlay { pointer-events: none; }
video { position: relative; z-index: 9999 !important; }
.card-title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0; /* prevents flex overflow */
}
.card-title { min-width: 0; }

.pkg-icon { display:inline-flex; }
.subhead { margin: 18px 0 8px; font-size: 1rem; }
html, body { overflow-x: hidden; }

main.container {
  max-width: 1100px;
  margin: 0 auto;
}
.card-title { min-width: 0; }

.card-title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.pkg-icon { display: inline-flex; flex: 0 0 auto; }
.pkg-icon svg { display: block; }

html, body { overflow-x: hidden; }
/* --- Package card: tighter scanning + cadence blocks --- */

.card-title-with-icon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  min-width:0;
}

.pkg-icon{
  display:inline-flex;
  flex:0 0 auto;
  color: var(--color-primary-dark);
}

.pkg-icon svg{ display:block; }

/* Smaller subheads for cards */
.subhead{
  margin: 14px 0 8px;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--color-text-main);
}

/* Compact list variant */
.list.compact{
  padding-left: 16px;
  line-height: 1.55;
}

.list.compact li{
  margin: 5px 0;
}

/* Cadence container */
.cadence{
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--color-border);
  background: rgba(245, 247, 251, 0.6);
  display: grid;
  gap: 10px;
}

/* Each cadence block */
.cadence-block{
  background: #fff;
  border: 1px solid rgba(224, 229, 242, 0.9);
  border-radius: 12px;
  padding: 10px 10px 8px;
}

.cadence-head{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 6px;
}

.cadence-icon{
  display:inline-flex;
  color: var(--color-primary-dark);
}

.cadence-title{
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text-main);
}

/* Cadence bullet list */
.cadence-list{
  margin: 0;
  padding-left: 16px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.cadence-list li{ margin: 4px 0; }
/* ==============================
   About Page Sections
================================= */

.about-section{
  margin-top: 18px;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.section-title{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.section-lead{
  margin: 0 0 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 14px;
}

/* Known for grid */
.about-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-card{
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 14px;
  padding: 14px;
}

.about-card h3{
  margin: 0 0 6px;
  font-size: 14px;
}

.about-card p{
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* How we work */
.how-grid{
  display: grid;
  gap: 12px;
}

.how-card{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 14px;
  padding: 14px;
}

.how-number{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border: 1px solid rgba(255,122,48,0.25);
}

.how-card h3{
  margin: 0 0 6px;
  font-size: 14px;
}

.how-card p{
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Testimonials */
.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.testimonial-card{
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 14px;
  padding: 14px;
}

.testimonial-card p{
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.testimonial-card span{
  font-size: 12px;
  color: var(--color-text-soft);
}

/* Responsive */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .testimonial-grid{ grid-template-columns: 1fr; }
}
/* Add this to the BOTTOM of assets/css/marketingsite.css */

/* ==============================
   About Page Sections
================================= */

.about-section{
  margin-top: 18px;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px;
}

.section-title{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.section-lead{
  margin: 0 0 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 14px;
  max-width: 72ch;
}

/* Known for grid */
.about-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.about-card{
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 14px;
  padding: 14px;
}

.about-card h3{
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.about-card p{
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* How we work */
.how-grid{
  display: grid;
  gap: 12px;
}

.how-card{
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 14px;
  padding: 14px;
}

.how-number{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border: 1px solid rgba(255,122,48,0.25);
}

.how-card h3{
  margin: 0 0 6px;
  font-size: 14px;
}

.how-card p{
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Testimonials */
.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.testimonial-card{
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 14px;
  padding: 14px;
}

.testimonial-card p{
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.testimonial-card span{
  font-size: 12px;
  color: var(--color-text-soft);
}

/* Responsive */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .testimonial-grid{ grid-template-columns: 1fr; }
}
/* Icon cards - larger, left aligned */

/* Icon cards – clean left alignment */

.about-iconcard{
  display: grid;
  grid-template-columns: 72px 1fr;  /* wider icon column */
  column-gap: 18px;
  align-items: start;
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 14px;
  padding: 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.about-iconcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

/* Bigger icon block */
.about-icon{
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border: 1px solid rgba(255,122,48,0.25);
}

.about-icon svg{
  width: 30px;
  height: 30px;
}

/* Force heading + text into right column */
.about-iconcard h3,
.about-iconcard p{
  grid-column: 2;
}

/* Heading styling */
.about-iconcard h3{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Body text styling */
.about-iconcard p{
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* ==== About: "What we're known for" icon cards - forced layout + mint palette ==== */

/* Force a 2-column grid with explicit areas */
.about-grid.about-grid--iconcards .about-card.about-iconcard{
  display: grid !important;
  grid-template-columns: 76px 1fr !important;
  grid-template-areas:
    "icon title"
    "icon text" !important;
  column-gap: 18px !important;
  row-gap: 6px !important;
  align-items: start !important;
  padding: 22px !important;
}

/* Place elements into the grid areas */
.about-grid.about-grid--iconcards .about-card.about-iconcard > .about-icon{
  grid-area: icon !important;
}

.about-grid.about-grid--iconcards .about-card.about-iconcard > h3{
  grid-area: title !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  font-size: 18px !important;
}

.about-grid.about-grid--iconcards .about-card.about-iconcard > p{
  grid-area: text !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  color: var(--color-text-muted) !important;
}

/* Icon block: slightly bigger + mint palette */
.about-grid.about-grid--iconcards .about-card.about-iconcard .about-icon{
  width: 62px !important;
  height: 62px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;

  /* Mint palette */
  background: rgba(110, 231, 200, 0.25) !important;  /* soft mint fill */
  border: 1px solid rgba(110, 231, 200, 0.65) !important;
  color: #10b981 !important; /* keeps icon readable (mint family) */
}

/* Scale up the SVG inside the icon */
.about-grid.about-grid--iconcards .about-card.about-iconcard .about-icon svg{
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  stroke: currentColor !important;
}
/* Feature links section (between packages and founder) */
.feature-links {
  margin: 24px 0 40px;
}

.feature-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.feature-link-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.feature-link-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}

.feature-link-title {
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.feature-link-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Responsive */
@media (max-width: 720px) {
  .feature-links-grid {
    grid-template-columns: 1fr;
  }
}

/* TESTIMONIAL SECTION */
.testimonials-section {
  margin: 60px 0;
}

.testimonials-title {
  text-align: center;
  margin-bottom: 30px;
}

/* grid */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Testimonials row layout (no outer box) */
.testimonial-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* Individual cards */
.testimonial-card{
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* Name left, stars right (under review) */
.testimonial-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

/* Gold stars */
.testimonial-stars{
  color: #f5b301;
  letter-spacing: 2px;
  white-space: nowrap;
  line-height: 1;
}

/* Responsive */
@media (max-width: 900px){
  .testimonial-grid{
    grid-template-columns: 1fr;
  }
}


/* card */
.testimonial-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* name + stars row */
.testimonial-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.testimonial-name {
  font-weight: 600;
}

.testimonial-stars {
  color: #f5b301;
  letter-spacing: 2px;
  white-space: nowrap;
  font-size: 16px;
}

.testimonial-text {
  margin: 0;
  line-height: 1.5;
  color: #444;
}

/* responsive */
@media (max-width: 900px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

  .testimonial-meta{
    display:flex;
    align-items:center;
    justify-content:space-between; /* name left, stars far right */
    gap:12px;
    margin-top:10px;
  }
  .testimonial-stars{
    color:#f5b301;
    letter-spacing:2px;
    white-space:nowrap;
    line-height:1;
  }
.testimonial-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}

.testimonial-stars{
  letter-spacing:2px;
  white-space:nowrap;
}
/* Name left, stars right under the review */
.testimonial-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  gap:12px;
}

.testimonial-stars{
  letter-spacing:2px;
  white-space:nowrap;
}
/* --- Testimonials: heading NOT in a box --- */
.testimonials-strip{
  margin: 40px 0;
  padding: 0;             /* prevents panel feel */
  background: transparent; /* ensures no box */
  border: 0;
  border-radius: 0;
}

/* One-row horizontal scroller */
.testimonial-scroll{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 2px 12px; /* little breathing room + room for scrollbar */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Each card width: shows ~3 on desktop, scroll for more */
.testimonial-scroll .testimonial-card{
  flex: 0 0 min(340px, 85vw);
  scroll-snap-align: start;
}

/* Name left, stars right */
.testimonial-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}

/* Gold Trustpilot-style stars (SVG) */
.tp-stars{
  display:inline-flex;
  gap:4px;
  white-space: nowrap;
}
.tp-stars svg{
  width: 16px;
  height: 16px;
  fill: #f5b301; /* gold */
}

/* Optional: make the scrollbar subtle (works in modern browsers) */


/* Hide scrollbar but keep horizontal scrolling */
.testimonial-scroll{
  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE/old Edge */
}

.testimonial-scroll::-webkit-scrollbar{
  display: none;              /* Chrome/Safari */
}

.testimonial-scroll{
  display: flex;
  gap: 18px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;

  /* hide scrollbar but keep scrolling */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
.testimonial-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.testimonial-scroll .testimonial-card{
  flex: 0 0 min(340px, 85vw);
  scroll-snap-align: start;
}

/* Testimonials scroller: MUST overflow to scroll */
.testimonial-scroll{
  display: flex;
  gap: 18px;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 2px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar but keep scroll */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonial-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* Cards: fixed basis + max width for mobile */
.testimonial-scroll .testimonial-card{
  flex: 0 0 340px;     /* forces overflow on most screens */
  max-width: 85vw;     /* mobile-friendly */
  scroll-snap-align: start;
}
.testimonials-strip,
.testimonial-scroll,
.testimonial-card {
  position: relative;
  z-index: 1;
}
.testimonial-scroll { overscroll-behavior: contain; }
/* Header row: title left, arrows right */
.testimonials-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

/* Buttons */
.testimonials-controls{
  display:flex;
  gap:10px;
}

.t-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display:grid;
  place-items:center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.t-btn:hover{
  transform: translateY(-1px);
  border-color: #d3daee;
}
.t-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* The scroller (scrollbar hidden, still scrollable) */
.testimonial-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto;
  overflow-y:hidden;
  padding: 6px 2px 12px;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonial-scroll::-webkit-scrollbar{ display:none; }

/* Cards keep same width so arrows scroll predictably */
.testimonial-scroll .testimonial-card{
  flex: 0 0 340px;
  max-width: 85vw;
}
/* ===== Articles carousel + lightbox (drop-in) ===== */

.articles-strip{
  margin: 40px 0;
  background: transparent;
  border: 0;
  padding: 0;
}

.articles-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.articles-controls{
  display:flex;
  gap:10px;
}

.a-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size: 28px;
  line-height: 1;
  transition: transform 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.a-btn:hover{
  transform: translateY(-1px);
  border-color: #d3daee;
}

.a-btn:disabled{
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.article-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding: 6px 2px 12px;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.article-scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

.article-card{
  flex: 0 0 340px;
  max-width: 85vw;
}

.article-card-btn{
  width:100%;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}

.article-card-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.article-card-title{
  padding: 14px 16px;
  font-weight: 700;
  /*letter-spacing: -0.02em;*/
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.article-card-image{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Mobile: arrows below title if needed */
@media (max-width: 640px){
  .articles-head{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* ===== Lightbox modal ===== */

.article-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.article-modal.is-open{
  display: block;
}

.article-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, 0.55);
}

.article-modal-panel{
  position: relative;
  width: min(860px, calc(100% - 32px));
  margin: 6vh auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}

.article-modal-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display:grid;
  place-items:center;
}

.article-modal-hero{
  width:100%;
  max-height: 300px;
  overflow:hidden;
  background: #f5f7fb;
}

.article-modal-image{
  width:100%;
  height: 300px;
  object-fit: cover;
  display:block;
}

.article-modal-body{
  padding: 18px;
}

.article-modal-title{
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.article-modal-content{
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 14px;
}

.article-modal-content h3{
  margin: 14px 0 6px;
  color: var(--color-text-main);
}

.article-modal-content ul,
.article-modal-content ol{
  margin: 8px 0 0;
  padding-left: 18px;
}
/* ===== Articles carousel + lightbox (URL loading) ===== */

.articles-strip{
  margin: 40px 0;
  background: transparent;
  border: 0;
  padding: 0;
}

.articles-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.articles-controls{
  display:flex;
  gap:10px;
}

.a-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-size: 28px;
  line-height: 1;
  transition: transform 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

.a-btn:hover{
  transform: translateY(-1px);
  border-color: #d3daee;
}

.a-btn:disabled{
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

.article-scroll{
  display:flex;
  gap:18px;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding: 6px 2px 12px;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.article-scroll::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
}

.article-card{
  flex: 0 0 340px;
  max-width: 85vw;
}

.article-card-btn{
  width:100%;
  border: 1px solid rgba(224,229,242,0.9);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}

.article-card-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10);
}

.article-card-title{
  padding: 14px 16px;
  font-weight: 700;
  /*letter-spacing: -0.02em;*/
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.article-card-image{
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

@media (max-width: 640px){
  .articles-head{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* ===== Lightbox modal ===== */

.article-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.article-modal.is-open{
  display: block;
}

.article-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, 0.55);
}

.article-modal-panel{
  position: relative;
  width: min(900px, calc(100% - 32px));
  margin: 6vh auto;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(224,229,242,0.9);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
  overflow: hidden;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.article-modal-close{
  position:absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display:grid;
  place-items:center;
  z-index: 2;
}

.article-modal-hero{
  width:100%;
  max-height: 280px;
  overflow:hidden;
  background: #f5f7fb;
  flex: 0 0 auto;
}

.article-modal-image{
  width:100%;
  height: 280px;
  object-fit: cover;
  display:block;
}

.article-modal-body{
  padding: 18px;
  overflow: auto;
}

.article-modal-title{
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.article-modal-loading{
  display:none;
  color: var(--color-text-muted);
  font-size: 14px;
  margin: 8px 0;
}

.article-modal-error{
  display:none;
  color: #b42318;
  font-size: 14px;
  margin: 8px 0;
}

.article-modal-content{
  color: var(--color-text-muted);
  line-height: 1.7;
  font-size: 14px;
}

.article-modal-content h1,
.article-modal-content h2{
  font-size: 28px;
  color: var(--color-text-main);
}

.article-modal-content img{
  max-width: 100%;
  height: auto;
}

.article-modal-footer{
  margin-top: 14px;
  display:flex;
  justify-content:flex-end;
}
/* =========================================
   ARTICLE MODAL — WIDE MINIMAL VERSION
========================================= */

.article-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.article-modal.is-open{
  display: block;
}

.article-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(15, 23, 42, 0.6);
}

/* MAIN PANEL — MUCH WIDER */
.article-modal-panel{
  position: relative;
  width: min(1200px, calc(100% - 40px));   /* ← wider */
  height: min(90vh, 900px);
  margin: 5vh auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 40px 120px rgba(15,23,42,0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* floating close button */
.article-modal-close{
  position:absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.95);
  cursor: pointer;
  font-size: 26px;
  display:grid;
  place-items:center;
  z-index: 10;
}

/* content area */
.article-modal-body{
  padding: 32px;
  overflow-y: auto;
  height: 100%;
}

/* content styling */
.article-modal-content{
  max-width: 760px;        /* readable text width */
  margin: 0 auto;
  line-height: 1.7;
  font-size: 15px;
  color: var(--color-text-muted);
}

/* images inside article */
.article-modal-content img{
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* loading + error */
.article-modal-loading{
  display:none;
  margin-bottom: 10px;
}

.article-modal-error{
  display:none;
  color: #b42318;
  margin-bottom: 10px;
}
.article-card-image{
  aspect-ratio: 16 / 9;
  height: auto;
}
/* ===========================
   HERO V2 (redesign drop-in)
=========================== */

.hero-v2-frame{
  position: relative;
  min-height: 560px;
  padding: 96px 72px 86px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(224, 229, 242, 0.9);

  /* Use your new background image */
  background-image: url("/assets/images/hero-road.png"); /* <-- replace if needed */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);
}

/* Cleaner overlay: darken for readability + subtle light bloom */
.hero-v2-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(10,15,25,0.60) 0%, rgba(10,15,25,0.30) 55%, rgba(10,15,25,0.10) 100%);
}

/* Ensure content sits above overlay */
.hero-v2-inner{ position: relative; z-index: 2; }
.hero-v2-content{ max-width: 760px; }

/* Kicker row */
.hero-v2-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.hero-v2-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-v2-kicker-text{
  color: rgba(255,255,255,0.88);
  font-weight: 600;
  font-size: 14px;
}

/* Hero title */
.hero-v2-title{
  margin: 0 0 18px;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/* Subbox: premium glass panel */
.hero-v2-subbox{
  display: inline-block;
  margin: 0 0 18px;
  padding: 26px 28px;
  border-radius: 22px;
  max-width: 62ch;

  /* glass + orange tint */
  background: linear-gradient(
    135deg,
    rgba(255, 122, 48, 0.86) 0%,
    rgba(255, 122, 48, 0.70) 100%
  );

  border: 1px solid rgba(255, 255, 255, 0.22);

  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-v2-subcopy{
  margin: 0 0 14px;
  color: rgba(255,255,255,0.96);
  font-weight: 500;
  line-height: 1.6;
  font-size: clamp(15px, 2vw, 20px);
}

/* Pills inside subbox */
.hero-v2-pills{
  margin-top: 10px;
  gap: 8px;
}

.hero-v2-subbox .pill{
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.20);
  color: var(--color-primary-dark);
  box-shadow: none;
}

.hero-v2-subbox .pill-dot{
  width: 8px;
  height: 8px;
  background: var(--color-primary-dark);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.22);
}

/* CTA row */
.hero-v2-ctas{
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-v2-primary{
  box-shadow: 0 18px 36px rgba(6, 95, 70, 0.35);
}

/* Secondary link */
.hero-v2-link{
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  text-decoration: none;
  padding: 10px 0;
}

.hero-v2-link:hover{
  text-decoration: underline;
  color: #fff;
}

/* Mobile */
@media (max-width: 820px){
  .hero-v2-frame{
    min-height: 460px;
    padding: 64px 22px 56px;
    border-radius: 18px;
  }

  .hero-v2-subbox{
    padding: 20px 18px;
    border-radius: 18px;
    max-width: 100%;
  }

  .hero-v2-title{
    font-size: clamp(30px, 7vw, 44px);
  }
}

/* Mobile full-bleed (keeps your existing behaviour) */
@media (max-width: 820px){
  .hero-banner .hero-v2-frame{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
}
/* =========================================
   HERO V3 — matches screenshot layout
========================================= */

.hero-v3-frame{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(224, 229, 242, 0.9);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22);

  min-height: 560px;
  padding: 70px 60px;

  /* Background image (replace as needed) */
  background-image: url("/assets/images/hero-road.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* overlay: soft vignette + readability */
.hero-v3-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(90deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.50) 45%, rgba(255,255,255,0.10) 100%);
}

/* grid */
.hero-v3-grid{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 28px;
  align-items: center;
}

/* left column */
.hero-v3-left{
  max-width: 660px;
}

.hero-v3-title{
  margin: 0 0 14px;
  font-size: clamp(38px, 4.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.hero-v3-subtitle{
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.6;
  color: rgba(15, 23, 42, 0.75);
  max-width: 54ch;
}

/* frosted glass panels */
.hero-v3-glass{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.55);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* benefits list */
.hero-v3-benefits{
  padding: 18px 18px;
  margin: 0 0 16px;
}

.hero-v3-benefit{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 6px;
  color: rgba(15, 23, 42, 0.82);
  font-weight: 600;
  line-height: 1.5;
}

.hero-v3-check{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;

  /* orange check bubble */
  background: rgba(255, 122, 48, 0.18);
  color: #ff7a30;
  font-weight: 900;
  margin-top: 1px;
}

/* CTA panel */
.hero-v3-cta{
  padding: 18px 18px 16px;
}

.hero-v3-btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 14px;

  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;

  box-shadow: 0 18px 36px rgba(255, 122, 48, 0.26);
  border: 1px solid rgba(255,255,255,0.14);
}

.hero-v3-btn:hover{
  transform: translateY(-1px);
}

.hero-v3-cta-note{
  margin: 10px 2px 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(15, 23, 42, 0.72);
}

/* right illustration */
.hero-v3-right{
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-v3-illustration{
  width: min(520px, 95%);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 45px rgba(15, 23, 42, 0.20));
}

/* Mobile */
@media (max-width: 980px){
  .hero-v3-frame{
    padding: 56px 22px;
    min-height: unset;
  }

  .hero-v3-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .hero-v3-right{
    order: 2;
  }

  .hero-v3-title{
    font-size: clamp(32px, 8vw, 44px);
  }

  .hero-v3-subtitle{
    font-size: 16px;
  }
}

/* Mobile full-bleed (optional, matches your existing pattern) */
@media (max-width: 820px){
  .hero-v3-frame{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
  }
}
/* =========================================
   GLOBAL FONT CONSISTENCY FIX
   Ensures Inter is used everywhere
   ========================================= */

html,
body {
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Force inheritance for all structural elements */
body *,
section *,
div *,
p,
li,
ul,
ol {
  font-family: inherit !important;
}

/* Specifically fix known sections */
.founder-block,
.founder-body,
.block-body,
.about-section,
.card-body,
.testimonial-card {
  font-family: 'Inter', sans-serif !important;
}

/* Ensure list bullets match body text */
ul,
ol,
li {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
}/* ===== Paul profile font override (force Inter in specific sections) ===== */

/* Force Inter for the Background + Education sections */
.about-section .block-body,
.about-section .block-body * {
  font-family: 'Inter', sans-serif !important;
}

/* Force Inter for the Founder "Work with Paul" section and its bullets */
.founder-block,
.founder-block * ,
.founder-body,
.founder-body * ,
.founder-block .block-body,
.founder-block .block-body * {
  font-family: 'Inter', sans-serif !important;
}

/* Specifically hit lists (in case list styling is overriding) */
.founder-block ul,
.founder-block li,
.about-section ul,
.about-section li {
  font-family: 'Inter', sans-serif !important;
}

.founder-block p,
.founder-block li,
.about-section p,
.about-section li {
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6 !important;
}
/* ===== Force consistent body text colour ===== */

.founder-block p,
.founder-block li,
.about-section .block-body p,
.about-section .block-body li {
  color: var(--text-color, #4a4a4a) !important;
  font-weight: 400 !important;
}