/* ============================================================
   Isle Ventures — style.css
   Design tokens sourced directly from Figma file
   cKhyP3C9emrB7JKpQIKgrp  node 1:16
   ============================================================ */

/* ---- DESIGN TOKENS ---------------------------------------- */
:root {
  /* Colors */
  --color-bg:           #0B0B0B;   /* fill_7GD9Z7 — main bg */
  --color-bg-dark:      #09090B;   /* fill_ICYJXR */
  --color-bg-darker:    #0A0A0A;   /* fill_5N3IHT */
  --color-bg-darkest:   #141315;   /* fill_CXUV61 — why isle */
  --color-bg-problem:   #12100C;   /* fill_UPHAQR — buyer logic dark */
  --color-bg-black:     #000000;   /* fill_9HKCAF */
  --color-bg-badge:     #1C1C1B;   /* fill_6V4CDS */
  --color-bg-cream:     #F1ECE4;   /* fill_R1JN4U — buyer logic bg */
  --color-bg-tag:       #E7DED0;   /* fill_IVGMRP — buyer tags */

  --color-text-white:   #FFFFFF;   /* fill_A698TT */
  --color-text-cream:   #FAEAD1;   /* fill_DW1RPA */
  --color-text-light:   #EAE9E9;   /* fill_NPWMW8 */
  --color-text-gray:    #848383;   /* fill_HA1NI2 */
  --color-text-gray2:   #808080;   /* fill_7GFP7K */
  --color-text-gray3:   #B3B3B3;   /* fill_3NEK01 */
  --color-text-muted:   #D3D3D3;   /* fill_ILAEJP */
  --color-text-dim:     #5A5A5A;   /* fill_3YI9X6 */
  --color-text-dimmer:  #262626;   /* fill_5YDDJ6 */

  --color-gold:         #C6A46C;   /* fill_IDVICU — primary gold */
  --color-gold-warm:    #B79C6F;   /* fill_YSOMCI — warm gold */
  --color-gold-dark:    #B98A3B;   /* fill_HM0QXH — circle strokes */
  --color-gold-phase2:  #BE9860;   /* fill_YUDQZI — phase 02 */
  --color-gold-amber:   #E5B058;   /* fill_EQLPIY — amber accent */
  --color-gold-medium:  #A88B5A;   /* fill_RWIXGR — LinkedIn icon */
  --color-gold-tag:     #947E5B;   /* fill_7SARFH — tag text */

  --color-line-subtle:  #1C1A17;   /* fill_8CLP8Y */
  --color-line-warm:    #575248;   /* fill_FT5VKT */
  --color-line-dark:    #221F1C;   /* fill_4ELUHV */
  --color-line-nav:     #29251E;   /* fill_AWS6QB */
  --color-line-phase:   #282116;   /* fill_6SAUKV */
  --color-line-dim:     #272520;   /* fill_5V0VRJ */

  --color-border-nav:   rgba(166,148,186,0.24);   /* fill_K2DSRN */
  --color-btn-glass:    rgba(54,49,60,0.24);       /* fill_PJDLPQ */
  --color-nav-cta-bg:   #A796BA;

  --color-buyer-dark:   #12100C;   /* section bg */
  --color-buyer-text:   #B08234;   /* fill_EXU3T8 — buyer heading */
  --color-buyer-body:   #62553F;   /* fill_40OU0E — buyer body */
  --color-buyer-em:     #4E4028;   /* ts9 */

  --color-tag-bg:       #E7DED0;
  --color-tag-text:     #947E5B;
  --color-career-body:  #898989;   /* fill_J0HOOJ */
  --color-job-text:     #D3D3D3;   /* fill_ILAEJP */

  /* Typography */
  --font-sans:    "Montserrat", sans-serif;
  --font-serif:   "Source Serif 4", serif;

  /* Font sizes (Figma exact values) */
  --fs-nav:       14px;
  --fs-nav-cta:   16px;
  --fs-label:     15px;
  --fs-hero-h1:   clamp(48px, 5.5vw, 64px);
  /* Hero vertical placement — adjusted to match screenshot */
  --hero-top:     34vh;
  --fs-h2:        clamp(32px, 3.5vw, 40px);
  --fs-h3-serif:  clamp(28px, 3vw, 38px);
  --fs-h3-small:  clamp(20px, 2.2vw, 32px);
  --fs-body-xl:   20px;
  --fs-body-lg:   18px;
  --fs-body-md:   16px;
  --fs-body-sm:   14px;
  --fs-tag:       12px;
  --fs-watermark: clamp(80px, 9vw, 99px);
  --fs-price:     clamp(48px, 5.5vw, 64px);
  --fs-next-h2:   clamp(36px, 4.5vw, 48px);
  --fs-phase-h3:  clamp(28px, 3vw, 40px);

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 120px;

  /* Border radius */
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;

  /* Shadows */
  --shadow-gold: 0 0 8px 0 rgba(168,139,90,0.71);
  --shadow-glow: 0 0 5px 0 rgba(229,176,88,1);
  --shadow-card: 0 1px 2px 0 rgba(0,0,0,0.24);
}

/* ---- RESET & BASE ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-line-warm) var(--color-bg-black);
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-black); }
::-webkit-scrollbar-thumb { background: var(--color-line-warm); border-radius: 3px; }

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text-white);
  font-family: var(--font-sans);
  font-size: var(--fs-body-md);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
  zoom: 1;
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; }

/* ---- LAYOUT CONTAINER ------------------------------------- */
.isle-container {
  width: 100%;
  max-width: 1440px;
  /* margin: 0 auto; */
  padding: 0 80px;
}


/* ---- UTILITY COLORS --------------------------------------- */
.text-gold          { color: var(--color-gold); }
.text-amber         { color: var(--color-gold-amber); font-style: italic; }
.text-muted-hero    { color: rgba(255,255,255,0.40); }
.text-gray          { color: var(--color-text-gray); }
.text-gray-light    { color: var(--color-text-gray3); }
.text-gray-mid      { color: var(--color-text-dim); }
.text-white         { color: #fff; }
.text-white-soft    { color: rgba(255,255,255,0.90); }

/* ---- SECTION TAG ------------------------------------------ */
.section-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}
.tag-num {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  color: rgba(255,255,255,0.40);
  flex-shrink: 0;
}
.tag-rule {
  display: block;
  width: 98px;
  height: 1px;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}
.tag-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 11%;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
/* Dark variant (buyer logic section on cream bg) */
.section-tag--dark .tag-num  { color: rgba(38,38,38,0.50); }
.section-tag--dark .tag-rule { background: rgba(38,38,38,0.20); }
.section-tag--dark .tag-label{ color: rgba(38,38,38,0.50); }

/* ---- SECTION HEADINGS ------------------------------------- */
.section-heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.15;
  margin: 0 0 var(--sp-5) 0;
  color: var(--color-text-white);
}
.section-subhead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-gray);
  margin: 0;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: background 0.3s ease, backdrop-filter 0.3s ease;
  

}
.site-header.scrolled {
  background: rgba(11,11,11,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-line-subtle);
}
.site-nav {
  position: relative;
  border-bottom: 1px solid #575248;
}
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
}

/* Brand */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-logo   { height: 58px; width: auto; }
.nav-wordmark { height: 12.88px; width: auto; }

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-links .nav-link {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.90);
  white-space: nowrap;
  padding: 4px 0;
  transition: color 0.2s;
}
.nav-links .nav-link:hover,
.nav-links .nav-link:focus-visible {
  color: var(--color-gold);
  outline: none;
}

/* CTA button */
.btn-nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  background: rgba(54, 49, 60, 0.24);
  border: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
  white-space: nowrap;
}
.btn-nav-cta:hover,
.btn-nav-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(167,148,186,0.12);
  opacity: 0.95;
  outline: none;
}

/* Mobile toggle */
.nav-mobile-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: #1b1b1f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;

  padding: 10px;
  cursor: pointer;
}
.hamburger-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--color-text-white);
  transition: transform 0.25s, opacity 0.25s;
}
.nav-mobile-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.nav-mobile-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) { opacity: 0; }
.nav-mobile-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* Header LinkedIn icon */
.header-linkedin {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.header-linkedin-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(54, 49, 60, 0.24);
  color: var(--color-gold-medium);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
}
.header-linkedin:hover { opacity: 1; }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(11,11,11,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--color-line-subtle);
  border-bottom: 1px solid var(--color-line-subtle);
  padding: 24px;
}
.mobile-menu.is-open {
  display: block;
}
.mobile-nav-list { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-link {
  display: block;
  font-size: 16px;
  color: rgba(255,255,255,0.80);
  padding: 10px 0;
  /* border-bottom: 1px solid var(--color-line-subtle); */
  transition: color 0.2s;
}
.mobile-nav-link:hover { color: var(--color-gold); }

/* Primary CTA button (reused across page) */
.btn-primary-isle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--radius-md);
  background: var(--color-text-white);
  border: 1px solid rgba(166,148,186,0.24);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--color-bg);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
  min-height: 44px;
}
.btn-primary-isle:hover,
.btn-primary-isle:focus-visible {
  background: var(--color-text-cream);
  color: var(--color-bg);
  box-shadow: 0 0 0 3px var(--color-gold);
  outline: none;
}

/* ============================================================
   HERO / OVERVIEW
   ============================================================ */
.section-hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    background:#0b0b0b;
}

.hero-bg{
    position:absolute;
    inset:0;
}

.hero-bg-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:right center;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.88) 35%,
            rgba(0,0,0,.50) 60%,
            rgba(0,0,0,.10) 100%
        );
}

.hero-container{
    position:relative;
    z-index:2;
    /* max-width:1440px; */
    margin:auto;
    min-height:100vh;
    display:grid;
    grid-template-columns:57% 43%;
    align-items:center;
    padding:80px;
}

/* .hero-left{
    max-width:740px;
} */

.hero-label{
    font-family: 'Montserrat', sans-serif;
    font-size:15px;
    letter-spacing: 1.2px;
    text-transform:uppercase;
    color: #FFF;
    margin-top:42px;
    margin-bottom:32px;
    font-weight:400;
    opacity:0.4;  
}

.hero-heading{
    margin:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.hero-heading span{
    font-family: 'Source Serif 4', serif;
    font-size:64px;
    line-height:.5;
    font-weight:300;
    color:#fff;
}

.italic-line{
    display:flex;
    align-items:center;
    gap:20px;
}

.italic-line .line{
    width:65px;
    height:1px;
    background:#d4b06a;
}

.italic-line em{
    font-style:italic;
}

.qualification-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 10px;
    margin-top:36px;
    border-radius:8px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    color:#fff;
    font-size:14px;
    letter-spacing:.08em;
}
.qualification-badge-label {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

.qualification-badge-value {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 400;
}

.dot-space{
    width:4px;
    height:4px;
    border-radius:50%;
    background:#777;
}
.founders-sell{
    font-family: 'Montserrat', sans-serif;
    margin-top:40px;
    font-size:20px;
    font-weight:500;
    color:#fff;
}

.price-compare{
    display:flex;
    align-items:center;
    gap:40px;
    margin-top:60px;
}

.price-divider{
    width:1px;
    height:90px;
    background:rgba(255,255,255,.15);
}

.price-label{
    display:block;
    margin-bottom:8px;
    font-size:14px;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.price-item h2{
    margin:0;
    font-size:78px;
    font-weight:300;
    font-family:"Cormorant Garamond",serif;
}

.price-item:first-child{
    color:#caa15c;
}

.price-item.dim{
    opacity:.35;
    color:#fff;
}

.hero-btn{
    margin-top:50px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#fff;
    color:#000;
    padding:18px 28px;
    border-radius:14px;
    text-decoration:none;
    font-weight:500;
    font-size:16px;
}

.hero-right{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    height:100%;
}

.hero-copy{
    max-width:420px;
    margin-bottom:120px;
}

.hero-copy h3{
    font-family: 'Montserrat', sans-serif;
    font-size:20px;
    line-height:1.3;
    color:#fff;
    margin-bottom:20px;
    font-weight:400;
}

.hero-copy .gold{
    color:#caa15c;
}

.hero-copy p{
    font-family: 'Montserrat', sans-serif;
    color:rgba(255,255,255,.70);
    line-height:1.9;
    font-size:14px;
}

/* End imported hero styles */

/* ============================================================
   TRUST / CREDENTIALS
   ============================================================ */
.section-trust {
  background: var(--color-bg);
  padding: 30px;
  border-top: 1px solid var(--color-line-subtle);
  border-bottom: 1px solid var(--color-line-subtle);
}
.trust-row {
  display: flex;
  /* flex-direction: column; */
  gap: var(--sp-10);
}
.trust-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 26px;
}
.eyebrow-gold  { color: #ffff;  }
.eyebrow-plain { color: #808080;  }

.credential-strip {
  display: flex;
  align-items: center;
  gap: 102px;
  flex-wrap: wrap;
}
.credential-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: brightness(0.7);
  transition: filter 0.2s;
}
.credential-img:hover { filter: brightness(1); }
.credential-item--text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cred-brand-name {
  font-family: 'Source Serif 4', serif;
  font-weight: 300;
  font-size: 28px;
  letter-spacing: 0.01em;
  color: var(--color-text-gray);
  margin: 0;
  line-height: 1;
}
.cred-brand-sub {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 8px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text-gray);
  margin: 0;
}

/* ============================================================
   THE PROBLEM
   ============================================================ */
.section-problem {
    background: #050505;
    padding: 140px 80px;
    overflow: hidden;
}

.section-heading {
    max-width: 700px;
    color: #fff;
    margin-bottom: 12px;
}

.section-subhead {
    max-width: 500px;
    color: rgba(255,255,255,.55);
}

/* ==========================
   GRID
========================== */
.the-problem-heading {
    /* text-align: center; */
    /* max-width: 700px; */
    margin: 0 auto;
}

.the-problem-heading h2 {
  font-family: 'Montserrat', sans-serif;
    margin: 0 0 16px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    color: #ffffff;
}

.the-problem-heading h2 span {
  font-family: 'Montserrat', sans-serif;
    color: #5A5A5A; /* ash color */
    font-weight: 500;
}

.the-problem-heading p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #ffff; /* ash color */
    font-weight: 400;
    font-family: 'Montserrat', sans-serif;
}
.mistakes-grid {
    margin-top: 90px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    /* border-top: 1px solid rgba(255,255,255,.08);
    border-left: 1px solid rgba(255,255,255,.08); */
    grid-template-columns: repeat(2, 1fr);
}



/* ==========================
   CARD
========================== */

.mistake-card {
    position: relative;

    min-height: 320px;

    padding: 70px 60px 55px;

    /* border-right: 1px solid rgba(255,255,255,.08); */
    /* border-bottom: 1px solid rgba(255,255,255,.08); */

    background: transparent;
}


.mistake-card:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.08);

}
.mistake-card:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mistake-card:nth-child(1) {
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.mistake-card--active {
    background: rgba(120, 85, 30, .16);
}

/* ==========================
   NUMBER
========================== */

.mistake-num-bg {
    position: absolute;
    top: 32px;
    right: 40px;

    font-family: 'Source Serif 4', serif;

    font-size: 98px;
    font-style: italic;
    font-weight: 300;
    line-height: 1;

    color: rgba(255,255,255,.05);

    pointer-events: none;
}

/* ==========================
   GOLD LINE
========================== */

.mistake-rule {
    display: block;

    width: 42px;
    height: 1px;

    background: #BE9860;

    margin-bottom: 45px;
}

/* ==========================
   TYPOGRAPHY
========================== */

.mistake-title {
    /* max-width: 280px; */

    font-family: var(--font-serif);
    font-size: 38px;
    font-weight: 300;
    line-height: 1.2;

    color: #fff;

    margin-bottom: 24px;
}

.mistake-title--gold {
    color: #BE9860;
}

.mistake-body {
    max-width: 420px;
    font-weight: 400;
    line-height: 28px; /* 155.556% */
    letter-spacing: 0.54px;
    font-size: 18px;

    color: rgba(255,255,255,.55);

    margin: 0;
}
/* ============================================================
   BUYER LOGIC — light section
   ============================================================ */
.section-buyer-logic {
    background: black;
    padding: 140px 0 120px;
    position: relative;
    overflow: hidden;
}

/* Arch shape */
.section-buyer-logic::before {
    content: "";
    position: absolute;
    width: 1800px;
    height: 2200px;
    width: 100%;
    height: stretch;
    border-radius: 50%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #F1ECE4;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    z-index: 1;
}

.isle-container {
    position: relative;
    z-index: 2;
}

/* Header */
.section-tag-buyer{
    display: inline-flex; 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;

}
.buyer-header {
    text-align: center;
    margin-bottom: 40px;
    color: black;
}


.buyer-main-heading {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 16px;
}

.buyer-heading-muted {
    color: #5A5A5A;
}

.buyer-sub {
    font-size: 16px;
    opacity: .7;
}

/* Timeline */

.buyer-timeline {
    position: relative;
    max-width: 750px;
    margin: 0 auto;
}

/* .buyer-timeline::before {
    content: "";
    position: absolute;
    left: 82px;
    top: 10px;
    bottom: 40px;
    width: 1px;
    background: #c79b58;
    z-index: 1;
} */
.buyer-row:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 82px; /* Keep your original alignment */
    
    /* Adjust these values so the line starts after the circle 
       and ends right before the next row's circle */
    top: 10px;      
    bottom: 110px;  
    
    width: 2px;
    background: #c79b58;
    z-index: 1;
}
/* Rows */

.buyer-row {
    display: flex;
    gap: 45px;
    align-items: flex-start;
    margin-bottom: 90px;
}

.buyer-row:last-child {
    margin-bottom: 0;
}

/* Left */

.buyer-left {
    width: 165px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

/* Circle */

.buyer-circle {
    width: 166px;
    height: 166px;
    border-radius: 50%;
    border: 2px solid #BE9860;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    background-color: #F1ECE4;
}

.buyer-circle::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid #BE9860;
}

.buyer-circle img {
    max-width: 86px;
    max-height: 86px;
    object-fit: contain;
    
    
}

/* Right */

.buyer-right {
    flex: 1;
    max-width: 520px;
}

.buyer-item-title {
    font-family: var(--font-serif);
    color: #BE9860;
    font-size: 38px;
    line-height: 1.08;
    font-weight: 300;
    margin-bottom: 20px;
}

.buyer-item-body {
    color: #666;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.buyer-item-em strong {
    color: #333;
}

/* Tags */

.buyer-tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.buyer-tag {
    font-family: 'Montserrat', sans-serif;
    background: #E7DED0;
    color: #BE9860;
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ============================================================
   METHODOLOGY
   ============================================================ */
.section-methodology {
    background: #060606;
    padding: 120px 0;
}

/* MAIN BORDER BOX */

.methodology-table {
    border: 1px solid rgba(180, 140, 75, 0.15);
    padding: 32px;
    margin-top: 48px;
   

}

/* ROW */

.phase-row {
    display: flex;
    min-height: 330px;
    margin-bottom: 24px;
}
/* .phase-row + .phase-row {
    margin-top: 24px;
    
} */
.phase-row:not(:last-child) {
    border-bottom: 1px solid rgba(180, 140, 75, 0.12);
   
}
.phase-row:last-child {
    margin-bottom: 0;
  
}

/* IMAGE */

.phase-image {
    width: 31%;
    max-height: 421px;
    /* border-right: 1px solid rgba(180, 140, 75, 0.12); */
    overflow: hidden;
    padding-bottom: 24px;
}
.phase-row:last-child .phase-image {
    padding-bottom: 0;
}
.phase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CONTENT */

.phase-content {
    width: 69%;
    padding: 35px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* LABEL */

.phase-label {
    color: #BE9860;
    font-size: 14px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* TITLE */

.phase-title {
    font-family: "Cormorant Garamond", serif;
    color: #BE9860;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 20px;
}

/* GOLD LINE */

.phase-line {
    width: 82px;
    height: 1.4px;
    background: #c49a5a;
    margin-bottom: 43px;
}

/* BODY */

.phase-body {
    color: #848383;
    font-size: 16px;
    line-height: 2;
    max-width: 720px;
    font-weight: 400;
}

.phase-body strong {
    color: #C9C9C9;
    font-weight: 500;
}

/* MOBILE */



/* ============================================================
   WHY ISLE VENTURES
   ============================================================ */
.section-why-isle {
  background: #141315;
  padding: 82px 0;
  text-align: center;
}
.section-tag-isle{
justify-content: center;

}
/* .section-why-isle .section-heading { text-align: center; } */
.why-section-heading{
    font-size:40px;
    line-height:1.1;
    font-weight:500;
    /* max-width:1100px; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 65px;
}

.text-muted-hero{
    color:#5b5b5b;
}

.why-main-statement {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-gray);
  margin: 0 0 var(--sp-7) 0;
  text-align: center;
}

.why-card {
  display: flex;
  flex-direction: column;
}

.why-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 409 / 601;
  width: 100%;
  min-height:620px;
  height:100%;
}
.why-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display:block;
}
.why-card:hover .why-img { transform: scale(1.03); }

/* .why-img-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(0deg, rgba(176,130,52,1) 0%, rgba(105,77,29,0.81) 40%, rgba(74,54,22,0) 100%);
} */
.why-img-gradient--amber {
  background: linear-gradient(0deg, rgba(229,176,88,0.9) 0%, rgba(229,176,88,0.4) 50%, rgba(255, 199, 109, 0) 100%);
}
.why-content{
    position:absolute;
    /* left:32px;
    right:32px; */
    top:53%;
    z-index:2;
    bottom: 0;
    margin: 0 32px;
}
.why-card-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-h3-small);
  line-height: 44px;
  color: var(--color-text-white);
  margin: var(--sp-5) 0 var(--sp-4) 0;
  text-align: left;
}
.why-card-title--amber { color: black; }

.why-card-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 23px;
  color: var(--color-text-light);
  opacity: 0.80;
  margin: 0;
  text-align: left;
}
.why-card-body--amber { color: black; }

/* Deliverables checklist */
.deliverables-row {
  border-top: none;
  padding-top: var(--sp-7);
  flex-wrap: nowrap !important;
  gap:0;
  margin-top:80px;
}
.deliverable-item {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.4;
  padding: var(--sp-6);
  border: 1px solid #191919;
  margin-left: -1px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  position: relative;
}
.deliverables-row {
  /* make the deliverables horizontally scrollable on small screens */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 16px;
  padding-bottom: 12px;
}
.deliverables-wrapper { position: relative; }
.deliverables-row .col-lg-3, .deliverables-row .col-sm-6 {
  flex: 0 0 auto;
}
.deliverable-item {
  min-width: 260px;
  flex: 0 0 260px;
  aspect-ratio: auto;
  scroll-snap-align: center;
}



/* slider arrows */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(11,11,11,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-cream);
  cursor: pointer;
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.04);
}
.slider-arrow.left { left: 8px; }
.slider-arrow.right { right: 8px; }
.slider-arrow svg { width: 18px; height: 18px; }
.deliverable-item:first-child { margin-left: 0; }
/* Hexagon separators at box borders */
.deliverable-item--1::after,
.deliverable-item--2::before,
.deliverable-item--2::after,
.deliverable-item--3::before,
.deliverable-item--3::after,
.deliverable-item--4::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 9px;
  background: #3D3830;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  z-index: 1;
}
.deliverable-item--1::after,
.deliverable-item--2::after,
.deliverable-item--3::after { right: -5px; }
.deliverable-item--2::before,
.deliverable-item--3::before,
.deliverable-item--4::before { left: -5px; }

.deliverable-item--1 { color: #F5F1EA; }
.deliverable-item--2 { color: #8F8A83; }
.deliverable-item--3 { color: #5C5853; }
.deliverable-item--4 { color: #BE9860; font-style: italic; }

/* ============================================================
   ABOUT
   ============================================================ */
/* BASE */
.about-main-section-wrapper {
  background: #0A0A0A;
  color: #fff;
  padding: 100px 0 0;
  font-family: "Inter", sans-serif;
}

/* GRID WRAPPER */
.about-grid-layout-container {
  width: 100%;
  /* max-width: 1200px; */
  margin: auto;
  display: flex;
  gap: 130px;
  padding: 0 0px;
}

/* LEFT */
.about-left-image-panel {
  flex: 0 0 42%;
}

.about-image-wrapper-box {
  position: relative;
     display: flex;
    justify-content: flex-end;
  
}

.about-image-wrapper-box img {
  /* width: 100%; */
  display: block;

  max-width: 418px;
  /* height: 640px; */
  object-fit: cover;
}

/* .about-gold-light-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(212,175,55,0.25), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(212,175,55,0.18), transparent 55%);
} */

/* QUOTE */
.about-quote-floating-box {
  position: absolute;
  bottom: 120px;
  left: -20px;
  max-width: 325px;
  max-height:214px;
  padding: 18px;
  border: 1px solid rgba(161, 157, 142, 0.35);
  background: rgba(190, 152, 96, 0.20);
  backdrop-filter: blur(1px);
  font-size: 25px;
  font-weight: 300;
  letter-spacing: 0.001px;
  color: #BE9860;
  /* inset: 0; */
  /* background:
    radial-gradient(circle at 30% 40%, rgba(212,175,55,0.25), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(212,175,55,0.18), transparent 55%); */

}

.about-quote-floating-box span {
  margin-top: 16px ;
  opacity: 0.7;
  font-style: italic;
  font-weight: 100;
}

/* RIGHT */
.about-right-content-panel {
  flex: 0 0 58%;
}

/* TOP TAG */
.about-section-top-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  opacity: 0.6;
  letter-spacing: 2px;
  justify-content: flex-end;
  margin-right:40px;
  
}

.about-section-top-label div {
  width: 45px;
  height: 1px;
  background: #BE9860;
}

/* NAME */
.about-person-name-title {
  font-size: 44px;
  font-weight: 300;
  margin: 18px 0 6px;
  font-family: serif;
}

.about-person-role-text {
  color:#FFF;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.6;
  margin-bottom: 18px;
}

/* STATEMENT */
.about-statement-highlight-box {
  border: 0.5px solid rgba(24, 22, 19, 0.60);
  padding: 20px 40px;
  margin: 47px 0 35px;
  font-style: italic;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  background: rgba(24, 22, 19, 0.60);
  max-width: 569px;
}

/* TIMELINE */
.about-experience-timeline-wrapper {
  position: relative;
}

/* .about-experience-timeline-wrapper::before {
  content: "";
  position: absolute;
  left: 124px;
  top: 10px;
  bottom: 0;
  width: 1px;
  background: #BE9860;
} */

/* ROW */
.about-experience-row-item {
  display: grid;
  grid-template-columns: 120px 40px 1fr;
  align-items: start;
  margin-bottom: 43px;
}

/* LABEL */
.about-experience-label-text {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #BE9860;
  text-align: right;
  padding-right: 20px;
}

/* DOT */
/* .about-experience-center-dot {
  width: 10px;
  height: 10px;
  background: #BE9860;
  border-radius: 50%;
  margin-top: 4px;
} */

/* TEXT */
.about-experience-description-text {
  font-size: 15px;
  line-height: 22px;
  opacity: 0.75;
  max-width: 381px;
}

/* BOTTOM */
.about-bottom-section-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0px auto 0;
  padding: 0 80px;
  /* border-top: 1px solid rgba(190,152,96,0.35);
  padding-top: 60px; */
}

.about-bottom-inner-grid {
  display: grid;
  grid-template-columns: 0.5fr 2fr;
  gap: 5px;
}

.about-bottom-left-title {
  color: #BE9860;
  font-family: Graphik, sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 300;
  line-height: 26px; /* 81.25% */
  max-width: 100px;
}

.about-bottom-right-text {
  margin-top: 12px;
  opacity: 0.75;
  color: #FAEAD1;
  font-family: "Canela Trial";
  font-size: 24px;
  font-weight: 300;
  line-height: 36px; /* 150% */
  letter-spacing: 0.48px;
}

/* SECOND TEXT */
.about-bottom-secondary-text-block {
  margin-top: 37px;
  opacity: 0.55;
  max-width: 900px;
  color: #898989;
  font-family: Graphik;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px; /* 160% */
}
.about-bottom-advise-text-block {
  margin-top: 35px;
  color: #898989;
  font-family: Graphik, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px; /* 162.5% */
  letter-spacing: 0.32px;
}

/* Haize Labs styling */
.about-bottom-advise-text-block .haize-labs {
  color: #FFFFFF;
  font-weight: 500;
  font-family: Graphik, sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.32px;
}

/* UCLA styling */
.about-bottom-advise-text-block .ucla {
  color: #FFFFFF;
  font-weight: 400;
  font-family: Graphik, sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0.32px;
}

/* WAVE */
.about-bottom-wave-decoration {
  margin-top: 40px;
  height: 40px;
  background: url("assets/images/wave.png") repeat-x;
  opacity: 0.35;
}

/* ============================================================
   NEXT STEP
   ============================================================ */
.section-next-step {
  position: relative;
  padding: 60px 0;
  background: #0B0B0B;
  overflow: hidden;
}

.next-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.next-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.next-bg-overlay {
  position: absolute;
  inset: 0;
  background: #0B0B0B;
}

.isle-container {
  position: relative;
  z-index: 1;
}

/* TAG ROW */
.next-tag-row {
  display: flex;
  align-items: flex-end;
  justify-content: right;
  gap: 14px;
  margin-bottom: 60px;
  color: #777;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tag-line {
  width: 60px;
  height: 1px;
  background: #333;
}

/* HEADLINE */
.next-gap-headline {
  /* max-width: 438px; */
  margin: 0 auto 40px;
  margin-top: 120px;
color: #FFF;
text-align: center;
font-family: Graphik;
font-size: 48px;
font-weight: 300;
line-height: normal;
letter-spacing: -0.96px;
}
.next-gap-headline span{
  font-style: italic;
}
.next-gap-headline em {
  font-style: italic;
  color: #BE9860;
}

/* TIMELINE */
.next-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 80px;
  /* max-width: 1100px; */
}

/* CARDS */
.next-step-card {
  width: 302px;
  height: 302px;
  padding: 28px 26px;
  border: 1px solid #191919;
  /* background: rgba(255,255,255,0.02); */
  text-align: center;
    display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */
color: #8F8A83;
text-align: center;
font-family: Graphik;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 26px; /* 144.444% */
}
.next-step-card.normalized-white {
  color: #F5F1EA;
}
.next-step-card.highlight {
  color: #caa86a;
}

/* CONNECTOR */
.next-step-connector {
  display: flex;
  align-items: center;
  width: 20px;
  position: relative;
}

.next-step-connector .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #444;
  position: relative;
  z-index: 2;
}

.next-step-connector .line {
  flex: 1;
  height: 1px;
  background: #2a2a2a;
  margin-left: 0px;
}

/* SUPPORT TEXT */
.next-support {
  text-align: center;
  /* max-width: 650px; */
  margin: 0 auto 40px;
    font-size: 40px;
  font-family: Graphik, sans-serif;
}

.next-support .muted {
  color: #7E7E7E;
  font-size: 24px;
  font-weight: 300;
}

.next-support .big {
  color: #fff;
  line-height: 1.3;
  margin-top: 20px;
}
.next-support .preparation-text {
  color: #BE9860;
  font-style: italic;
  font-size: 40px;
  font-weight: 300;
  font-family: "Canela Trial", serif;
}

/* CTA */
/* wrapper section (IMPORTANT: you already have this in your page somewhere) */
/* MAIN WRAPPER (now acts as section background holder) */
/* FULL WIDTH SECTION */
.next-cta-section {
    position: relative;
    overflow: hidden;
    background: #050505;
    min-height: 520px;
    display: flex;
    align-items: center;
}

/* diagonal pattern */
/* .next-cta-section::after {
    content: "";
    position: absolute;
    top: 0;
    right: -120px;
    width: 55%;
    height: 100%;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            70deg,
            transparent 0 28px,
            rgba(255,255,255,.08) 28px 32px
        );

    mask-image: linear-gradient(
        to left,
        rgba(0,0,0,1),
        rgba(0,0,0,.8),
        rgba(0,0,0,0)
    );
} */
.next-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.next-cta-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.next-cta-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.85) 0%,
            rgba(0,0,0,.65) 40%,
            rgba(0,0,0,.25) 100%
        );
}
.next-cta-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    /* padding: 0 70px; */
    position: relative;
    z-index: 2;
}

.next-cta-content {
    max-width: 492px;
    padding: 0 24px;
}

.next-cta-text {
color: #696969;
font-family: Graphik;
font-size: 40px;
font-weight: 500;
line-height: 54px; /* 135% */
}

.next-cta-highlight {
    color: #FFF;
}

.next-cta-btn {
    margin-top: 42px;
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 24px;

    background: #fff;
    color: #000;

    border-radius: 16px;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition: all .3s ease;
    border: 1px solid rgba(166, 148, 186, 0.24);
    
}

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

.next-cta-btn svg {
    width: 14px;
    height: 14px;
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #000;
}

/* Top row: location | brand image | email */
.footer-top-row {
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 7rem !important;
  padding-bottom: 4.8rem !important;
}
.footer-brand-link {
  display: inline-block;
  flex-shrink: 0;
}
.footer-brand-img {
  display: block;
  height: 142px;
  width: auto;
  max-width: 425px;
}
.footer-location {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255,255,255,0.70);
  margin: 0;
  flex-shrink: 0;
}
.footer-email {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  flex-shrink: 0;
  transition: color 0.2s;
}
.footer-email:hover { color: var(--color-text-white); }

.footer-divider {
  border: none;
  border-top: 1px solid var(--color-line-subtle);
  margin: 0 63px;
  opacity: 1;
}

/* Bottom bar: phone | sep | nav | linkedin | cta */
.footer-bottom-row {
  min-height: 87px;
  flex-wrap: wrap;
}
.footer-phone {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--color-text-white);
  text-decoration: none;
  flex-shrink: 0;
  gap: 8px;
  transition: color 0.2s;
}
.footer-phone:hover { color: var(--color-gold-medium); }
.footer-sep-vert {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--color-line-warm);
  flex-shrink: 0;
}
.footer-nav-list {
  gap: 6px 28px;
}
.footer-nav-link {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-nav-link:hover { color: var(--color-gold); }
.footer-linkedin {
  flex-shrink: 0;
  height: 53px;
  width: 53px;
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.footer-linkedin img {
    width: 53px;
    height: 53px;
}
.footer-linkedin:hover { opacity: 1; }
.btn-footer-cta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #FFF;
  background:rgba(54, 49, 60, 0.24);
  border-radius: 16px;
  padding: 14px 20px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.btn-footer-cta:hover { background: #FFFFFF; color: #0B0B0B; }

/* Hero right column CTA alignment */
/* .hero-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding-left: 24px;
} */
.hero-cta-wrap { display: flex; align-items: flex-start; justify-content: flex-start; margin-top: -6px; }


/* Copyright */
.footer-copyright {
  padding: 3.125rem;
  border-top: 1px solid var(--color-line-subtle);
  margin: 0 63px;
}
.footer-legal {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12px;
  color: rgba(255,255,255,0.50);
  margin: 0;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 30px;
}

/* Footer responsive */


/* ============================================================
   FOCUS STYLES — ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}