/* Self-hosted fonts (previously loaded from Google Fonts). Each
       family below is served by Google as a variable font, so several
       named weights point at the same file — the browser picks the
       correct weight instance from within it based on font-weight. */
    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url('../fonts/cormorant-garamond-normal.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: italic;
      font-weight: 400;
      font-display: swap;
      src: url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Jost';
      font-style: normal;
      font-weight: 300 600;
      font-display: swap;
      src: url('../fonts/jost-normal.woff2') format('woff2');
    }

    :root {
      --bg: #06181a;
      --bg-2: #0a2226;
      --teal-deep: #0d3b3e;
      --teal: #1b8a85;
      --teal-bright: #3fd6c9;
      --gold: #c9a768;
      --ivory: #eef4f2;
      --ivory-dim: rgba(238, 244, 242, 0.62);
      --line: rgba(238, 244, 242, 0.12);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--ivory);
      font-family: 'Jost', sans-serif;
      font-weight: 300;
      overflow-x: hidden;
    }

    ::selection {
      background: var(--teal);
      color: var(--bg);
    }

    .grain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    h1,
    h2,
    h3,
    .serif {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
    }

    .eyebrow {
      font-family: 'Jost', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.35em;
      font-size: 0.72rem;
      color: var(--teal-bright);
      font-weight: 500;
    }

    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 50;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 6vw;
      backdrop-filter: blur(6px);
      background: linear-gradient(to bottom, rgba(6, 24, 26, 0.7), transparent);
    }

    .scroll-progress {
      position: absolute;
      top: 100%;
      left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--teal-bright), var(--gold));
      transition: width 0.12s linear;
      pointer-events: none;
    }

    .brand-mark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem;
      letter-spacing: 0.08em;
      color: var(--ivory);
    }

    .brand-mark span {
      color: var(--teal-bright);
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 44px;
    }

    nav a {
      color: var(--ivory-dim);
      text-decoration: none;
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transition: color .3s;
    }

    nav a:hover,
    nav a:focus-visible {
      color: var(--teal-bright);
    }

    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      padding: 0 6vw;
      isolation: isolate;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: -3;
      background:
        radial-gradient(ellipse 60% 50% at 78% 20%, rgba(63, 214, 201, 0.16), transparent 60%),
        radial-gradient(ellipse 50% 60% at 15% 85%, rgba(201, 167, 104, 0.08), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    }

    .orbit-system {
      position: absolute;
      right: 6vw;
      top: 50%;
      transform: translateY(-50%);
      width: min(46vw, 600px);
      height: min(46vw, 600px);
      z-index: -2;
    }

    .orbit-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      border: 1px solid rgba(63, 214, 201, 0.16);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: orbit-spin linear infinite;
    }

    .orbit-ring.r1 {
      width: 30%;
      height: 30%;
      animation-duration: 12s;
    }

    .orbit-ring.r1b {
      width: 30%;
      height: 30%;
      animation-duration: 12s;
      animation-delay: -6s;
    }

    .orbit-ring.r2 {
      width: 50%;
      height: 50%;
      animation-duration: 20s;
      border-color: rgba(201, 167, 104, 0.2);
    }

    .orbit-ring.r3 {
      width: 70%;
      height: 70%;
      animation-duration: 28s;
    }

    .orbit-ring.r3b {
      width: 70%;
      height: 70%;
      animation-duration: 28s;
      animation-delay: -14s;
      border-color: rgba(201, 167, 104, 0.2);
    }

    .orbit-ring.r4 {
      width: 96%;
      height: 96%;
      animation-duration: 42s;
      animation-direction: reverse;
    }

    @keyframes orbit-spin {
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    .planet {
      position: absolute;
      top: -24px;
      left: 50%;
      width: 48px;
      height: 48px;
      transform: translateX(-50%);
      animation: orbit-spin-rev linear infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 30%, rgba(63, 214, 201, 0.2), rgba(10, 34, 38, 0.95) 70%);
      border: 1px solid rgba(201, 167, 104, 0.4);
      box-shadow: 0 0 26px rgba(63, 214, 201, 0.16);
    }

    .orbit-ring.r1 .planet {
      animation-duration: 12s;
    }

    .orbit-ring.r1b .planet {
      animation-duration: 12s;
      animation-delay: -6s;
    }

    .orbit-ring.r2 .planet {
      animation-duration: 20s;
    }

    .orbit-ring.r3 .planet {
      animation-duration: 28s;
    }

    .orbit-ring.r3b .planet {
      animation-duration: 28s;
      animation-delay: -14s;
    }

    .orbit-ring.r4 .planet {
      animation-duration: 42s;
      animation-direction: reverse;
    }

    @keyframes orbit-spin-rev {
      to {
        transform: translateX(-50%) rotate(-360deg);
      }
    }

    .planet svg {
      width: 20px;
      height: 20px;
      stroke: var(--teal-bright);
    }

    /* Real company logos — a soft light chip behind the mark so any logo
       color/format (light or dark, transparent PNG or SVG) stays visible
       against the dark background. Falls back to the placeholder icon
       automatically if the image file isn't found. */
    .logo-chip {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 35% 30%, rgba(238, 244, 242, 0.96), rgba(238, 244, 242, 0.86) 75%);
      padding: 10%;
    }

    .logo-chip img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .orbit-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 104px;
      height: 104px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 35% 30%, rgba(63, 214, 201, 0.35), rgba(10, 34, 38, 0.92) 70%);
      border: 1px solid rgba(201, 167, 104, 0.5);
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.7rem;
      letter-spacing: 0.08em;
      color: var(--ivory);
      animation: pulse-glow 4s ease-in-out infinite;
    }

    @keyframes pulse-glow {

      0%,
      100% {
        box-shadow: 0 0 30px rgba(63, 214, 201, 0.14);
      }

      50% {
        box-shadow: 0 0 52px rgba(63, 214, 201, 0.32);
      }
    }

    @media (max-width:1024px) {
      .orbit-system {
        display: none;
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .orbit-ring,
      .planet,
      .orbit-center {
        animation: none;
      }
    }

    .hero-portrait {
      position: absolute;
      right: 4vw;
      top: 50%;
      transform: translateY(-50%);
      width: min(30vw, 420px);
      z-index: -1;
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
      opacity: 0.96;
    }

    .hero-portrait img {
      width: 100%;
      display: block;
      mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
    }

    @media (max-width:1024px) {
      .hero-portrait {
        display: none;
      }
    }

    .hero-content {
      max-width: 900px;
    }

    .hero .eyebrow {
      margin-bottom: 22px;
      display: block;
    }

    .hero h1 {
      font-size: clamp(3.2rem, 8vw, 6.4rem);
      line-height: 0.98;
      color: var(--ivory);
      letter-spacing: 0.005em;
    }

    .hero h1 em {
      font-style: italic;
      background: linear-gradient(100deg, var(--teal-bright), var(--gold) 90%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-sub {
      margin-top: 28px;
      max-width: 480px;
      font-size: 1.05rem;
      line-height: 1.7;
      color: var(--ivory-dim);
      font-weight: 300;
    }

    .scroll-cue {
      position: absolute;
      bottom: 40px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      color: var(--ivory-dim);
      font-size: 0.75rem;
      letter-spacing: 0.15em;
      text-transform: uppercase;
    }

    .scroll-cue .line {
      width: 1px;
      height: 36px;
      background: rgba(63, 214, 201, 0.25);
      position: relative;
      overflow: hidden;
    }

    .scroll-cue .line::after {
      content: '';
      position: absolute;
      left: 0;
      top: -100%;
      width: 100%;
      height: 100%;
      background: var(--teal-bright);
      animation: slide-down 2.2s ease-in-out infinite;
    }

    @keyframes slide-down {
      0% {
        top: -100%;
      }

      60% {
        top: 100%;
      }

      100% {
        top: 100%;
      }
    }

    section {
      padding: 150px 6vw;
      position: relative;
    }

    .section-head {
      max-width: 640px;
      margin-bottom: 80px;
    }

    .section-head .eyebrow {
      margin-bottom: 16px;
      display: block;
    }

    .section-head h2 {
      font-size: clamp(2.2rem, 4vw, 3.4rem);
      color: var(--ivory);
      line-height: 1.05;
    }

    .section-head p {
      margin-top: 20px;
      color: var(--ivory-dim);
      font-size: 1.02rem;
      line-height: 1.75;
      max-width: 560px;
    }

    .about {
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding-top: 90px;
      padding-bottom: 90px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 64px;
      align-items: center;
    }

    .portrait-frame {
      aspect-ratio: 4/5;
      width: 100%;
      max-width: 440px;
      margin: 0 auto;
      border: 1px solid var(--line);
      position: relative;
      background:
        linear-gradient(160deg, rgba(27, 138, 133, 0.25), rgba(6, 24, 26, 0.9)),
        repeating-linear-gradient(135deg, rgba(238, 244, 242, 0.03) 0 2px, transparent 2px 14px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .portrait-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .portrait-frame .initials {
      font-family: 'Cormorant Garamond', serif;
      font-size: 6rem;
      color: rgba(238, 244, 242, 0.16);
      letter-spacing: 0.05em;
    }

    .portrait-frame::before {
      content: '';
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(201, 167, 104, 0.35);
    }

    .about-eyebrow {
      display: block;
      margin-bottom: 20px;
    }

    .about-heading {
      font-size: clamp(2rem, 3.6vw, 2.8rem);
      color: var(--ivory);
      margin-bottom: 20px;
    }

    .about-copy p {
      color: var(--ivory-dim);
      font-size: 1.05rem;
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .about-copy strong {
      color: var(--ivory);
      font-weight: 500;
    }

    .stat-row {
      display: flex;
      gap: 56px;
      margin-top: 32px;
      flex-wrap: wrap;
    }

    .stat b {
      display: block;
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.6rem;
      color: var(--teal-bright);
    }

    .stat span {
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ivory-dim);
    }

    .venture-logos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .venture-logos .logo-card:nth-child(4),
    .venture-logos .logo-card:nth-child(5) {
      grid-column: span 1;
    }

    @media (min-width:821px) {
      .venture-logos {
        grid-template-columns: repeat(6, 1fr);
      }

      .venture-logos .logo-card:nth-child(1) {
        grid-column: 1 / 3;
      }

      .venture-logos .logo-card:nth-child(2) {
        grid-column: 3 / 5;
      }

      .venture-logos .logo-card:nth-child(3) {
        grid-column: 5 / 7;
      }

      .venture-logos .logo-card:nth-child(4) {
        grid-column: 1 / 3;
      }

      .venture-logos .logo-card:nth-child(5) {
        grid-column: 3 / 5;
      }

      .venture-logos .logo-card:nth-child(6) {
        grid-column: 5 / 7;
      }
    }

    .logo-card {
      background: transparent;
      border: 1px solid var(--line);
      padding: 56px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 16px;
      cursor: pointer;
      color: inherit;
      font-family: inherit;
      transition: border-color .35s, transform .35s, background .35s, box-shadow .35s;
      position: relative;
      overflow: hidden;
    }

    .logo-card::after {
      content: '';
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translateX(-50%);
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, rgba(63, 214, 201, 0.12), transparent 70%);
      opacity: 0;
      transition: opacity .4s;
      pointer-events: none;
    }

    .logo-card:hover {
      border-color: rgba(63, 214, 201, 0.4);
      transform: translateY(-6px);
      background: rgba(63, 214, 201, 0.02);
    }

    .logo-card:hover::after {
      opacity: 1;
    }

    .logo-card:focus-visible {
      outline: 1px solid var(--teal-bright);
      outline-offset: 4px;
    }

    .logo-card .logo-icon {
      width: 78px;
      height: 78px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(201, 167, 104, 0.4);
      background: radial-gradient(circle at 35% 30%, rgba(63, 214, 201, 0.18), rgba(10, 34, 38, 0.92) 70%);
    }

    .logo-card .logo-icon svg {
      width: 30px;
      height: 30px;
      stroke: var(--teal-bright);
    }

    .logo-card .logo-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.6rem;
      color: var(--ivory);
    }

    .logo-card .logo-role {
      font-size: 0.82rem;
      color: var(--ivory-dim);
      letter-spacing: 0.02em;
    }

    .logo-card .logo-kind {
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
    }

    .logo-card .logo-hint,
    .aff-card .logo-hint {
      font-size: 0.7rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ivory-dim);
      margin-top: 2px;
      display: block;
    }

    .venture-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .35s;
    }

    .venture-modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(3, 12, 13, 0.82);
      backdrop-filter: blur(6px);
    }

    .modal-panel {
      position: relative;
      background: var(--bg-2);
      border: 1px solid var(--line);
      max-width: 640px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding: 48px;
      transform: translateY(16px) scale(0.98);
      transition: transform .35s;
      scrollbar-width: none;
    }

    .modal-panel::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
    }

    /* Beyond Business modal — larger on desktop (scrollbar is already
       hidden for every modal panel via the rule above) */
    @media (min-width:821px) {
      .pursuit-panel {
        max-width: 880px;
        padding: 56px;
      }
    }

    .venture-modal.open .modal-panel {
      transform: translateY(0) scale(1);
    }

    .modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ivory-dim);
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .3s, color .3s;
    }

    .modal-close:hover {
      border-color: var(--teal-bright);
      color: var(--teal-bright);
    }

    .modal-header {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 32px;
    }

    .modal-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(201, 167, 104, 0.4);
      background: radial-gradient(circle at 35% 30%, rgba(63, 214, 201, 0.18), rgba(10, 34, 38, 0.92) 70%);
    }

    .modal-icon svg {
      width: 26px;
      height: 26px;
      stroke: var(--teal-bright);
    }

    .modal-header h3 {
      font-size: 1.9rem;
      color: var(--ivory);
      margin-bottom: 6px;
    }

    .modal-role {
      display: block;
      font-size: 0.85rem;
      color: var(--ivory-dim);
      margin-bottom: 4px;
    }

    .modal-kind {
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
    }

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

    .modal-gallery .g-item {
      aspect-ratio: 1;
      border: 1px solid var(--line);
      background:
        linear-gradient(160deg, rgba(63, 214, 201, 0.14), rgba(6, 24, 26, 0.9)),
        repeating-linear-gradient(135deg, rgba(238, 244, 242, 0.03) 0 2px, transparent 2px 14px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .modal-gallery .g-item svg {
      width: 24px;
      height: 24px;
      stroke: rgba(238, 244, 242, 0.28);
    }

    .modal-gallery .g-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .modal-gallery .g-item.g-empty {
      position: relative;
    }

    .modal-gallery .g-item.g-empty::after {
      content: 'Photo coming soon';
      font-size: 0.6rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: rgba(238, 244, 242, 0.32);
      text-align: center;
      padding: 0 10px;
    }

    .modal-gallery .g-item img {
      cursor: zoom-in;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(4, 12, 13, 0.94);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    .lightbox.open {
      display: flex;
    }

    .lightbox-img {
      max-width: min(92vw, 1100px);
      max-height: 88vh;
      object-fit: contain;
      border: 1px solid var(--line);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
      user-select: none;
    }

    .lightbox-close,
    .lightbox-nav {
      position: absolute;
      background: rgba(6, 24, 26, 0.7);
      border: 1px solid var(--line);
      color: var(--ivory);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, border-color 0.2s ease;
    }

    .lightbox-close:hover,
    .lightbox-nav:hover {
      background: rgba(63, 214, 201, 0.18);
      border-color: var(--teal-bright);
    }

    .lightbox-close {
      top: 20px;
      right: 20px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      font-size: 1.4rem;
      line-height: 1;
    }

    .lightbox-nav {
      top: 50%;
      transform: translateY(-50%);
      width: 46px;
      height: 46px;
      border-radius: 50%;
      font-size: 1.6rem;
      line-height: 1;
    }

    .lightbox-prev {
      left: 16px;
    }

    .lightbox-next {
      right: 16px;
    }

    .lightbox-counter {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 0.72rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ivory-dim);
      background: rgba(6, 24, 26, 0.7);
      border: 1px solid var(--line);
      padding: 6px 14px;
    }

    @media (max-width: 640px) {
      .lightbox-nav {
        width: 38px;
        height: 38px;
        font-size: 1.3rem;
      }

      .lightbox-close {
        width: 36px;
        height: 36px;
        top: 12px;
        right: 12px;
      }
    }

    .modal-desc {
      color: var(--ivory-dim);
      font-size: 0.98rem;
      line-height: 1.8;
      margin-bottom: 24px;
    }

    .modal-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 28px;
    }

    .modal-list li {
      font-size: 0.9rem;
      color: var(--ivory-dim);
      position: relative;
      padding-left: 22px;
    }

    .modal-list li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.6em;
      width: 9px;
      height: 1px;
      background: var(--teal-bright);
    }

    .modal-subhead {
      font-size: 0.7rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ivory-dim);
      margin-bottom: 14px;
      display: block;
    }

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

    .branch-card {
      background: transparent;
      border: 1px solid var(--line);
      padding: 22px 14px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      transition: border-color .3s, transform .3s, background .3s, box-shadow .3s;
    }

    .branch-card:hover {
      border-color: rgba(63, 214, 201, 0.4);
      transform: translateY(-3px);
      background: rgba(63, 214, 201, 0.03);
    }

    .branch-tap {
      background: none;
      border: none;
      padding: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 8px;
      cursor: pointer;
      color: inherit;
      font-family: inherit;
    }

    .branch-card .branch-icon {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(201, 167, 104, 0.35);
      background: radial-gradient(circle at 35% 30%, rgba(63, 214, 201, 0.16), rgba(10, 34, 38, 0.9) 70%);
    }

    .branch-card .branch-icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--teal-bright);
    }

    .branch-card .branch-name {
      font-size: 0.82rem;
      color: var(--ivory);
      letter-spacing: 0.02em;
      line-height: 1.3;
    }

    .branch-fb {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
      padding: 7px 14px;
      border: 1px solid rgba(238, 244, 242, 0.18);
      border-radius: 100px;
      font-size: 0.62rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ivory-dim);
      text-decoration: none;
      transition: border-color .3s, color .3s, background .3s;
    }

    .branch-fb svg {
      width: 11px;
      height: 11px;
      flex-shrink: 0;
    }

    .branch-fb:hover {
      border-color: var(--teal-bright);
      color: var(--teal-bright);
      background: rgba(63, 214, 201, 0.06);
    }

    .modal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 28px;
    }

    .website-btn,
    .fb-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 1px solid var(--teal-bright);
      color: var(--ivory);
      padding: 12px 26px;
      border-radius: 100px;
      text-decoration: none;
      font-size: 0.76rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: all .3s;
    }

    .website-btn {
      margin-bottom: 0;
    }

    .fb-btn svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }

    .website-btn:hover,
    .fb-btn:hover {
      background: var(--teal-bright);
      color: var(--bg);
    }

    .branch-modal {
      z-index: 110;
    }

    body.modal-lock {
      overflow: hidden;
    }

    .affiliations {
      background: var(--bg-2);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

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

    .aff-card {
      border: 1px solid var(--line);
      padding: 44px;
      position: relative;
      overflow: hidden;
      display: block;
      width: 100%;
      text-align: left;
      background: transparent;
      color: inherit;
      font-family: inherit;
      cursor: pointer;
      transition: border-color .35s, transform .35s, background .35s, box-shadow .35s;
    }

    .aff-card:hover {
      border-color: rgba(63, 214, 201, 0.4);
      transform: translateY(-6px);
      background: rgba(63, 214, 201, 0.02);
    }

    .aff-card:focus-visible {
      outline: 1px solid var(--teal-bright);
      outline-offset: 4px;
    }

    .aff-card::after {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 220px;
      height: 220px;
      background: radial-gradient(circle, rgba(63, 214, 201, 0.14), transparent 70%);
      pointer-events: none;
    }

    .aff-card .logo-hint {
      margin-top: 20px;
    }

    .aff-card .eyebrow {
      margin-bottom: 14px;
      display: block;
    }

    .aff-card h3 {
      font-size: 1.7rem;
      color: var(--ivory);
      margin-bottom: 14px;
    }

    .aff-card p {
      color: var(--ivory-dim);
      font-size: 0.95rem;
      line-height: 1.75;
    }

    .contact {
      text-align: center;
      padding-top: 140px;
      padding-bottom: 80px;
    }

    .contact h2 {
      font-size: clamp(2.4rem, 6vw, 4.4rem);
      color: var(--ivory);
      margin-top: 20px;
      margin-bottom: 26px;
    }

    .contact p {
      color: var(--ivory-dim);
      max-width: 480px;
      margin: 0 auto 40px;
      line-height: 1.7;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      border: 1px solid var(--teal-bright);
      color: var(--ivory);
      padding: 18px 38px;
      border-radius: 100px;
      text-decoration: none;
      font-size: 0.85rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      transition: all .35s;
    }

    .cta-btn:hover {
      background: var(--teal-bright);
      color: var(--bg);
    }

    .cta-btn svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .contact-actions {
      display: flex;
      gap: 18px;
      justify-content: center;
      flex-wrap: wrap;
    }


    .cta-btn-outline:hover {
      background: var(--teal-bright);
      color: var(--bg);
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 34px 6vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: var(--ivory-dim);
      font-size: 0.78rem;
      letter-spacing: 0.05em;
    }

    footer .dev-credit {
      color: var(--teal-bright);
      text-decoration: none;
      transition: opacity .3s ease;
    }

    footer .dev-credit:hover,
    footer .dev-credit:focus-visible {
      opacity: 0.78;
      text-decoration: underline;
    }

    /* Mobile only: stack the copyright line and the "Developed by" line
       instead of squeezing them into one row, and center both. */
    @media (max-width:640px) {
      footer {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        text-align: center;
      }
    }

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

    @media (max-width:820px) {
      nav ul {
        display: none;
      }
      .about-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .venture-logos {
        grid-template-columns: 1fr;
      }

      .modal-panel {
        padding: 32px 24px;
      }

      .modal-branches {
        grid-template-columns: 1fr;
      }

      .aff-grid {
        grid-template-columns: 1fr;
      }

      section {
        padding: 100px 6vw;
      }

      /* Hero: fills the full first screen on mobile (min-height: 100dvh),
         so the About section never peeks in underneath it. Content is
         anchored near the top (not centered) — centering a content
         block shorter than the viewport pushes it down and opens up a
         large empty gap between the nav and the avatar. Anchoring to
         the top keeps the avatar close to the nav, and any leftover
         vertical space falls naturally between the hero text and the
         bottom-pinned "Scroll" cue instead, which reads as ordinary
         breathing room rather than an awkward void. padding-top still
         guarantees real clearance under the fixed nav (~62px tall)
         even on the shortest phone screens. */
      .hero {
        min-height: 100vh;
        min-height: 100dvh;
        justify-content: flex-start;
        padding-top: 74px;
        padding-bottom: 20px;
      }

      .hero .eyebrow {
        margin-bottom: 14px;
      }

      /* Keeps "Building Ventures" on a single line on phones — the
         default size wraps it onto two lines at these widths. Scales
         with viewport width up to the original 3.2rem, so it only
         differs from the default on the narrower phones that actually
         need it; by ~400px wide it's already back at the same size
         as before. */
      .hero h1 {
        font-size: clamp(2.4rem, 12.8vw, 3.2rem);
      }

      .hero-sub {
        margin-top: 16px;
      }

      .scroll-cue {
        position: static;
        margin-top: 32px;
        left: auto;
        transform: none;
        gap: 18px;
      }

      .scroll-cue .line {
        height: 22px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      .scroll-cue .line::after {
        animation: none;
      }
    }

    [data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .8s ease, transform .8s ease;
    }

    [data-reveal].in {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================================
       Nav layout wrapper (holds the link list + theme toggle together
       on the right, so justify-content:space-between on <nav> still
       just splits brand-mark vs. everything else)
       ============================================================ */
    .nav-right {
      display: flex;
      align-items: center;
      gap: 36px;
      position: relative;
    }

    /* ============================================================
       Theme toggle switch
       ============================================================ */
    .theme-toggle {
      position: relative;
      width: 52px;
      height: 28px;
      flex-shrink: 0;
      padding: 0;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(238, 244, 242, 0.04);
      cursor: pointer;
      transition: border-color .3s, background .3s;
    }

    .theme-toggle:hover {
      border-color: var(--teal-bright);
    }

    .theme-toggle:focus-visible {
      outline: 1px solid var(--teal-bright);
      outline-offset: 4px;
    }

    .theme-toggle .toggle-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 13px;
      height: 13px;
      z-index: 1;
    }

    .theme-toggle .toggle-icon svg {
      width: 100%;
      height: 100%;
    }

    .theme-toggle .toggle-icon-moon {
      left: 7px;
      color: var(--teal-bright);
    }

    .theme-toggle .toggle-icon-sun {
      right: 7px;
      color: var(--gold);
    }

    .theme-toggle .toggle-knob {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--teal-bright);
      box-shadow: 0 0 10px rgba(63, 214, 201, 0.45);
      z-index: 2;
      transition: transform .35s ease, background .3s, box-shadow .3s;
    }

    .whatsapp-float {
      position: fixed;
      right: 26px;
      bottom: 26px;
      z-index: 60;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #25D366;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 0 0 rgba(37, 211, 102, 0.5);
      transition: transform .25s ease, box-shadow .25s ease, bottom .3s ease;
    }

    .whatsapp-float svg {
      width: 28px;
      height: 28px;
      color: #fff;
    }

    .whatsapp-float:hover,
    .whatsapp-float:focus-visible {
      transform: scale(1.08);
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 0 6px rgba(37, 211, 102, 0.18);
    }

    .whatsapp-float:focus-visible {
      outline: 2px solid var(--teal-bright);
      outline-offset: 3px;
    }

    /* Pushed up out of the way once the Back to top button appears,
       so the two floating buttons never overlap. */
    .whatsapp-float.shift-up {
      bottom: 96px;
    }

    @media (max-width: 640px) {
      .whatsapp-float {
        right: 18px;
        bottom: 18px;
        width: 52px;
        height: 52px;
      }

      .whatsapp-float svg {
        width: 26px;
        height: 26px;
      }

      .whatsapp-float.shift-up {
        bottom: 84px;
      }
    }

    /* ============================================================
       Back to top button — hidden until the person scrolls down,
       then fades in at the same spot the WhatsApp button occupies,
       while the WhatsApp button slides up to make room above it.
       ============================================================ */
    .back-to-top {
      position: fixed;
      right: 26px;
      bottom: 26px;
      z-index: 59;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg-2);
      border: 1px solid var(--line);
      color: var(--ivory);
      cursor: pointer;
      opacity: 0;
      transform: translateY(10px) scale(0.92);
      pointer-events: none;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
      transition: opacity .3s ease, transform .3s ease, border-color .3s ease, color .3s ease;
    }

    .back-to-top svg {
      width: 22px;
      height: 22px;
    }

    .back-to-top.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .back-to-top:hover,
    .back-to-top:focus-visible {
      border-color: var(--teal-bright);
      color: var(--teal-bright);
    }

    .back-to-top:focus-visible {
      outline: 2px solid var(--teal-bright);
      outline-offset: 3px;
    }

    @media (max-width: 640px) {
      .back-to-top {
        right: 18px;
        bottom: 18px;
        width: 52px;
        height: 52px;
      }

      .back-to-top svg {
        width: 20px;
        height: 20px;
      }
    }

    html[data-theme="light"] .theme-toggle .toggle-knob {
      transform: translateX(24px);
      background: var(--gold);
      box-shadow: 0 0 10px rgba(201, 167, 104, 0.45);
    }

    /* ============================================================
       Mobile menu — three-line hamburger button, sits side by side
       with the theme toggle. Hidden on desktop (the inline nav ul
       is used there instead); shown only under the 820px breakpoint,
       where it opens a small dropdown with the same nav links.
       ============================================================ */
    .nav-toggle {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      padding: 0;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: rgba(238, 244, 242, 0.04);
      cursor: pointer;
      transition: border-color .3s, background .3s;
    }

    .nav-toggle:hover,
    .nav-toggle:focus-visible {
      border-color: var(--teal-bright);
    }

    .nav-toggle:focus-visible {
      outline: none;
    }

    .nav-toggle .bar {
      display: block;
      width: 15px;
      height: 1px;
      background: var(--ivory-dim);
      transition: transform .3s ease, opacity .2s ease, background .3s;
    }

    .nav-toggle[aria-expanded="true"] .bar-1 {
      transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .bar-2 {
      opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] .bar-3 {
      transform: translateY(-6px) rotate(-45deg);
    }

    .nav-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 14px);
      right: 0;
      min-width: 200px;
      flex-direction: column;
      background: var(--bg-2);
      border: 1px solid var(--line);
      padding: 8px;
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity .3s ease, transform .3s ease;
    }

    .nav-dropdown.open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .nav-dropdown a {
      color: var(--ivory-dim);
      text-decoration: none;
      font-size: 0.8rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 13px 16px;
      transition: color .3s, background .3s;
    }

    .nav-dropdown a:hover,
    .nav-dropdown a:focus-visible {
      color: var(--teal-bright);
      background: rgba(63, 214, 201, 0.05);
    }

    @media (max-width:820px) {
      .nav-toggle {
        display: flex;
      }

      .nav-dropdown {
        display: flex;
      }
    }

    /* ============================================================
       Mobile hero avatar — circular placeholder for a portrait photo.
       Hidden on larger screens (the orbit system already carries the
       visual interest there); shown above the hero text on mobile,
       matching the reference layout. Uses assets/images/rashedul.webp;
       if that file is ever missing it falls back to a quiet "RI"
       placeholder in the same circle.
       ============================================================ */
    .hero-avatar {
      display: none;
    }

    @media (max-width:1024px) {
      .hero-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
        position: relative;
        width: clamp(140px, 24vw, 220px);
        height: clamp(140px, 24vw, 220px);
        border-radius: 50%;
        overflow: hidden;
        margin-bottom: 32px;
        flex-shrink: 0;
        border: 1.5px solid rgba(63, 214, 201, 0.55);
        background: radial-gradient(circle at 35% 30%, rgba(63, 214, 201, 0.22), rgba(10, 34, 38, 0.95) 70%);
        box-shadow: 0 0 0 4px rgba(63, 214, 201, 0.07), 0 0 30px rgba(63, 214, 201, 0.22);
      }

      .hero-avatar img {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 132%;
        height: 132%;
        transform: translate(-50%, -50%);
        object-fit: cover;
        display: block;
      }

      .hero-avatar .avatar-fallback {
        display: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.9rem;
        letter-spacing: 0.06em;
        color: var(--ivory);
      }
    }

    /* Phones (narrower than tablets) get slightly tighter spacing
       around the already-fluid avatar to help fill the vertical
       space within the one-screen budget. */
    @media (max-width:820px) {
      .hero-avatar {
        margin-bottom: 30px;
      }

      .hero .eyebrow {
        margin-bottom: 10px;
      }

      .hero-sub {
        margin-top: 8px;
      }

      .scroll-cue {
        margin-top: 30px;
      }
    }

    /* ============================================================
       LIGHT THEME
       The dark theme above is the default and stays exactly as it
       was. Everything below only applies once data-theme="light"
       is set on <html>, and simply overrides the palette + the
       handful of rules that used literal colors instead of the
       CSS variables.
       ============================================================ */
    html[data-theme="light"] {
      --bg: #faf7f1;
      --bg-2: #f1ebe0;
      --teal-deep: #dceeec;
      --teal: #0e7670;
      --teal-bright: #0c7770;
      --gold: #856532;
      --ivory: #17302d;
      --ivory-dim: rgba(23, 48, 45, 0.72);
      --line: rgba(23, 48, 45, 0.14);
    }

    html[data-theme="light"] .grain {
      opacity: 0.02;
    }

    html[data-theme="light"] nav {
      background: linear-gradient(to bottom, rgba(250, 247, 241, 0.85), transparent);
    }

    html[data-theme="light"] .theme-toggle {
      background: rgba(23, 48, 45, 0.04);
    }

    html[data-theme="light"] .planet,
    html[data-theme="light"] .orbit-center,
    html[data-theme="light"] .logo-card .logo-icon,
    html[data-theme="light"] .modal-icon,
    html[data-theme="light"] .branch-card .branch-icon,
    html[data-theme="light"] .hero-avatar {
      background: radial-gradient(circle at 35% 30%, rgba(15, 143, 134, 0.16), rgba(255, 255, 255, 0.92) 70%);
    }

    html[data-theme="light"] .hero-avatar {
      border-color: rgba(15, 143, 134, 0.5);
      box-shadow: 0 0 0 4px rgba(15, 143, 134, 0.08), 0 0 30px rgba(15, 143, 134, 0.14);
    }

    html[data-theme="light"] .portrait-frame,
    html[data-theme="light"] .modal-gallery .g-item {
      background:
        linear-gradient(160deg, rgba(15, 143, 134, 0.14), rgba(255, 255, 255, 0.92)),
        repeating-linear-gradient(135deg, rgba(23, 48, 45, 0.045) 0 2px, transparent 2px 14px);
    }

    html[data-theme="light"] .modal-gallery .g-item svg {
      stroke: rgba(23, 48, 45, 0.3);
    }

    html[data-theme="light"] .modal-gallery .g-item.g-empty::after {
      color: rgba(23, 48, 45, 0.4);
    }

    html[data-theme="light"] .portrait-frame .initials {
      color: rgba(23, 48, 45, 0.16);
    }

    /* ============================================================
       Light-theme elegance pass — soft, warm depth cues that the
       dark theme doesn't need (its glow shadows already read fine
       against a near-black background). Kept subtle and additive;
       nothing here changes layout, only adds quiet lift on hover.
       ============================================================ */
    html[data-theme="light"] .modal-panel {
      box-shadow: 0 30px 70px -20px rgba(23, 48, 45, 0.22), 0 4px 16px rgba(23, 48, 45, 0.06);
    }

    html[data-theme="light"] .nav-dropdown {
      box-shadow: 0 20px 44px -12px rgba(23, 48, 45, 0.18);
    }

    html[data-theme="light"] .logo-card,
    html[data-theme="light"] .aff-card {
      background: rgba(255, 255, 255, 0.5);
    }

    html[data-theme="light"] .logo-card:hover,
    html[data-theme="light"] .aff-card:hover {
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 22px 46px -18px rgba(23, 48, 45, 0.22);
    }

    html[data-theme="light"] .branch-card:hover {
      background: rgba(255, 255, 255, 0.6);
      box-shadow: 0 14px 30px -14px rgba(23, 48, 45, 0.2);
    }

    html[data-theme="light"] .website-btn,
    html[data-theme="light"] .fb-btn {
      box-shadow: 0 10px 24px -12px rgba(23, 48, 45, 0.18);
    }

    html[data-theme="light"] .website-btn:hover,
    html[data-theme="light"] .fb-btn:hover {
      box-shadow: 0 14px 30px -12px rgba(15, 143, 134, 0.28);
    }

    html[data-theme="light"] .branch-fb:hover {
      box-shadow: 0 10px 20px -10px rgba(15, 143, 134, 0.25);
    }

    html[data-theme="light"] .theme-toggle,
    html[data-theme="light"] .nav-toggle {
      box-shadow: 0 2px 10px rgba(23, 48, 45, 0.06);
    }