{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}About Us | Home in Sri Lanka Property Care{% endblock %}

{% block content %}

<style>
  /* ── TOKENS — matched to Home in Sri Lanka premium palette ───── */
  :root {
    --ink:     #0e1a22;
    --paper:   #ffffff;
    --gold:    #ffc107;
    --gold-lt: #ffe082;
    --mist:    #f8f9fa;
    --slate:   #5a6a72;
    --white:   #ffffff;
    --teal:    #0f766e;
    --teal-dk: #115e59;
    --serif:   system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sans:    system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono:    'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    --ease:    cubic-bezier(.25,.46,.45,.94);
  }

  /* ── RESET ───────────────────────────────────────────────────── */
  .about-page * {
    box-sizing: border-box;
  }

  .about-page {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    overflow-x: hidden;
  }

  /* ── HERO ────────────────────────────────────────────────────── */
  .ens-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: url("{% static 'expat_life/images/about_hero.webp' %}") no-repeat center center / cover;
    overflow: hidden;
    background-color: #0e1a22;
  }

  .ens-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        rgba(7, 19, 28, 0.90) 0%,
        rgba(7, 19, 28, 0.74) 45%,
        rgba(7, 19, 28, 0.44) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0,0,0,0.16) 0%,
        rgba(0,0,0,0.34) 100%
      );
  }

  .ens-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--paper));
  }

  .ens-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 850px;
    padding: 0 2rem;
  }

  .ens-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.5rem;
    font-weight: 500;
  }

  .ens-hero__eyebrow span {
    width: 28px;
    height: 1px;
    background: var(--gold);
  }

  .ens-hero__title {
    font-family: var(--sans);
    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
    font-weight: 700;
    color: var(--white);
    line-height: 1.12;
    margin-bottom: 1.5rem;
  }

  .ens-hero__title em {
    font-style: normal;
    color: var(--gold-lt);
  }

  .ens-hero__sub {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255,255,255,.80);
    max-width: 660px;
    line-height: 1.85;
    margin-bottom: 2.5rem;
  }

  .ens-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(255,193,7,.35);
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--gold-lt);
    text-transform: uppercase;
    background: rgba(255,193,7,.06);
  }

  .ens-hero__scroll {
    position: absolute;
    bottom: 140px;
    right: 3rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    font-family: var(--mono);
    font-size: .65rem;
    letter-spacing: .15em;
    color: rgba(255,255,255,.4);
    text-transform: uppercase;
    animation: scrollBob 2.4s var(--ease) infinite;
  }

  .ens-hero__scroll::after {
    content: '';
    width: 1px;
    height: 48px;
    background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent);
  }

  @keyframes scrollBob {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
  }

  /* ── SECTION SHELL ───────────────────────────────────────────── */
  .ens-section {
    padding: 7rem 0;
  }

  .ens-section--mist {
    background: var(--mist);
  }

  .ens-section--ink {
    background: var(--ink);
    color: var(--white);
  }

  .ens-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1rem;
    font-weight: 500;
  }

  .ens-label::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--gold);
  }

  .ens-h2 {
    font-family: var(--sans);
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 700;
    line-height: 1.18;
    margin-bottom: 1.25rem;
    color: var(--ink);
  }

  .ens-section--ink .ens-h2 {
    color: var(--white);
  }

  .ens-lead {
    font-size: 1.05rem;
    color: var(--slate);
    line-height: 1.85;
    max-width: 590px;
  }

  /* ── PLATFORM PILLARS ────────────────────────────────────────── */
  .pillar-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
  }

  .pillar {
    padding: 1.6rem;
    border-left: 3px solid var(--gold);
    background: var(--white);
    position: relative;
    overflow: hidden;
    border: 1px solid #e9ecef;
    border-left: 3px solid var(--gold);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }

  .pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(14,26,34,.10);
  }

  .pillar__num {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-family: var(--mono);
    font-size: .65rem;
    color: rgba(0,0,0,.12);
    letter-spacing: .1em;
  }

  .pillar__title {
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .3rem;
    color: var(--ink);
  }

  .pillar__desc {
    font-size: .875rem;
    color: var(--slate);
    line-height: 1.7;
    margin-bottom: 0;
  }

  /* ── PROPERTY CARE PURPOSE STRIP ─────────────────────────────── */
  .purpose-band {
    border-radius: 34px;
    background:
      radial-gradient(circle at top right, rgba(255,193,7,.16), transparent 30%),
      linear-gradient(135deg, #052e25, #0f766e);
    color: #fff;
    padding: 2.6rem 2.4rem;
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
  }

  .purpose-band h3 {
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1rem;
  }

  .purpose-band p {
    max-width: 980px;
    color: rgba(255,255,255,.86);
    line-height: 1.85;
    font-size: 1.03rem;
    margin-bottom: 0;
  }

  /* ── STATS ROW ───────────────────────────────────────────────── */
  .stats-row {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
  }

  .stat {
    flex: 1;
    padding: 3rem 2rem;
    border-right: 1px solid rgba(255,255,255,.1);
    text-align: center;
  }

  .stat:last-child {
    border-right: none;
  }

  .stat__num {
    font-family: var(--sans);
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
  }

  .stat__lbl {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-top: .4rem;
    line-height: 1.5;
  }

  /* ── SERVICE VIEW ────────────────────────────────────────────── */
  .care-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin-top: 2.5rem;
  }

  .care-card {
    height: 100%;
    background: #ffffff;
    border: 1px solid #e9ecef;
    padding: 1.45rem;
    border-radius: 24px;
    box-shadow: 0 14px 30px rgba(14,26,34,.06);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  }

  .care-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(14,26,34,.11);
  }

  .care-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ecfdf5;
    color: var(--teal);
    font-size: 1.35rem;
    margin-bottom: 1rem;
  }

  .care-card:nth-child(2) .care-card__icon,
  .care-card:nth-child(5) .care-card__icon,
  .care-card:nth-child(8) .care-card__icon {
    background: #fef3c7;
    color: #b45309;
  }

  .care-card__title {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.02rem;
    margin-bottom: .42rem;
  }

  .care-card__desc {
    color: var(--slate);
    font-size: .9rem;
    line-height: 1.72;
    margin-bottom: 0;
  }

  /* ── NETWORK LINKS ───────────────────────────────────────────── */
  .network-card {
    background: var(--white);
    border: 1px solid #dee2e6;
    overflow: hidden;
  }

  .network-card__header {
    padding: 1.8rem 2rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: var(--mist);
  }

  .network-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 2rem;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    color: var(--ink);
    transition: background .2s, padding-left .2s var(--ease);
  }

  .network-item:last-child {
    border-bottom: none;
  }

  .network-item:hover {
    background: var(--mist);
    padding-left: 2.4rem;
    color: var(--ink);
  }

  .network-item__left {
    display: flex;
    align-items: center;
    gap: 0.85rem;
  }

  .network-item__logo {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .network-item__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 5px;
  }

  .network-item__text h6 {
    font-weight: 600;
    margin: 0 0 .15rem;
    font-size: .95rem;
  }

  .network-item__text small {
    font-size: .78rem;
    color: var(--slate);
  }

  .network-item__arrow {
    color: var(--gold);
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  /* ── TEAM ────────────────────────────────────────────────────── */
  .team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

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

  .team-card__img-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 1.2rem;
  }

  .team-card__img-wrap::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .3s;
  }

  .team-card:hover .team-card__img-wrap::before {
    opacity: 1;
  }

  .team-card__img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(20%);
    transition: filter .3s;
    border: 2px solid #dee2e6;
  }

  .team-card:hover .team-card__img {
    filter: grayscale(0);
  }

  .team-card__name {
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
    color: var(--ink);
  }

  .team-card__role {
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
  }

  /* ── CTA STRIP ───────────────────────────────────────────────── */
  .about-cta {
    padding: 6rem 0;
    background:
      radial-gradient(circle at top left, rgba(255,193,7,.12), transparent 30%),
      radial-gradient(circle at bottom right, rgba(15,118,110,.14), transparent 34%),
      #f8fafc;
  }

  .about-cta__card {
    border-radius: 36px;
    padding: 3rem 2.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 24px 58px rgba(15,23,42,.10);
    text-align: center;
  }

  .about-cta__card h2 {
    color: var(--ink);
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1rem;
  }

  .about-cta__card p {
    max-width: 820px;
    margin: 0 auto 1.8rem;
    color: var(--slate);
    line-height: 1.82;
    font-size: 1.03rem;
  }

  .about-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .9rem;
  }

  .about-cta__btn-primary {
    border-radius: 999px;
    font-weight: 800;
    padding: .9rem 1.45rem;
    border: none;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
  }

  .about-cta__btn-primary:hover {
    color: #111827;
  }

  .about-cta__btn-dark {
    border-radius: 999px;
    font-weight: 800;
    padding: .9rem 1.45rem;
  }

  /* ── FOOTER STRIP ────────────────────────────────────────────── */
  .ens-footer-strip {
    background: var(--ink);
    color: rgba(255,255,255,.55);
    padding: 4rem 0;
    text-align: center;
  }

  .ens-footer-strip address {
    font-style: normal;
    font-size: .9rem;
    line-height: 2;
  }

  .ens-footer-strip strong {
    color: var(--white);
  }

  .ens-socials {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .ens-socials a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.5);
    font-size: 1rem;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
  }

  .ens-socials a:hover {
    border-color: var(--gold);
    color: var(--ink);
    background: var(--gold);
  }

  /* ── FADE-IN ANIMATION ───────────────────────────────────────── */
  .ens-fade {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }

  .ens-fade.visible {
    opacity: 1;
    transform: none;
  }

  .ens-fade:nth-child(2) {
    transition-delay: .1s;
  }

  .ens-fade:nth-child(3) {
    transition-delay: .2s;
  }

  .ens-fade:nth-child(4) {
    transition-delay: .3s;
  }

  /* ── RESPONSIVE ──────────────────────────────────────────────── */
  @media (max-width: 991px) {
    .team-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .stats-row {
      flex-wrap: wrap;
    }

    .stat {
      flex: 0 0 50%;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }

    .care-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 767px) {
    .purpose-band {
      padding: 2rem 1.35rem;
      border-radius: 28px;
    }

    .about-cta__card {
      padding: 2.2rem 1.35rem;
      border-radius: 28px;
    }
  }

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

    .team-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    .ens-hero__scroll {
      display: none;
    }

    .stat {
      flex: 0 0 100%;
    }

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

    .ens-hero__inner {
      padding: 0 1.25rem;
    }
  }
</style>


<div class="about-page">

  <!-- ══ HERO ══════════════════════════════════════════════════════ -->
  <section class="ens-hero">
    <div class="container">
      <div class="ens-hero__inner">
        <div class="ens-hero__eyebrow">
          <span></span>
          Ensolanka Property Care Vision
        </div>

        <h1 class="ens-hero__title">
          Empowering Innovation,<br>
          <em>Protecting What Matters.</em>
        </h1>

        <p class="ens-hero__sub">
          Home in Sri Lanka Property Care is a trusted digital and operational ecosystem
          helping overseas and distant property owners care for homes, lands, villas,
          estates, and buildings in Sri Lanka through structured inspections,
          maintenance planning, transparent reporting, and connected Ensolanka services.
        </p>

        <div class="ens-hero__badge">
          <i class="bi bi-house-gear-fill"></i>
          Home in Sri Lanka &nbsp;·&nbsp; Powered by Ensolanka LLC
        </div>
      </div>
    </div>

    <div class="ens-hero__scroll">Scroll</div>
  </section>


  <!-- ══ WHAT WE DO ════════════════════════════════════════════════ -->
  <section class="ens-section">
    <div class="container">
      <div class="row align-items-start gy-5">

        <div class="col-lg-5">
          <div class="ens-fade">
            <p class="ens-label">What We Do</p>

            <h2 class="ens-h2">
              Remote Property Care,<br>
              Built with Structure.
            </h2>

            <p class="ens-lead">
              Since 2001, Ensolanka has focused on building practical digital systems
              and service ecosystems that solve real-world problems. Home in Sri Lanka
              Property Care extends that vision by supporting property owners who live
              overseas, travel frequently, or remain away from their Sri Lankan assets.
            </p>
          </div>
        </div>

        <div class="col-lg-6 offset-lg-1">
          <div class="pillar-grid">

            <div class="pillar ens-fade">
              <span class="pillar__num">01</span>
              <p class="pillar__title">Remote Property Care</p>
              <p class="pillar__desc">
                Ongoing support for homes, lands, villas, estates, and buildings when owners are away.
              </p>
            </div>

            <div class="pillar ens-fade">
              <span class="pillar__num">02</span>
              <p class="pillar__title">Inspections & Reports</p>
              <p class="pillar__desc">
                Structured visits, condition checks, uploaded photos, and transparent maintenance records.
              </p>
            </div>

            <div class="pillar ens-fade">
              <span class="pillar__num">03</span>
              <p class="pillar__title">Service Planning</p>
              <p class="pillar__desc">
                Cleaning, garden care, vacancy checks, utility handling, emergency support, and arrival readiness.
              </p>
            </div>

            <div class="pillar ens-fade">
              <span class="pillar__num">04</span>
              <p class="pillar__title">Connected Opportunities</p>
              <p class="pillar__desc">
                Seamless links to rental listing opportunities and Ensolanka’s wider partner ecosystem.
              </p>
            </div>

          </div>
        </div>

      </div>
    </div>
  </section>


  <!-- ══ PURPOSE BAND ══════════════════════════════════════════════ -->
  <section class="ens-section pt-0">
    <div class="container">
      <div class="purpose-band ens-fade">
        <h3>
          A more dependable way to care for Sri Lankan property from anywhere in the world.
        </h3>

        <p>
          Property ownership should not become a burden simply because the owner is abroad,
          travelling, or far from the property. Our model is designed to make property condition,
          maintenance activity, service planning, and future reporting more visible and organized —
          while giving Ensolanka operations teams a clear workflow to review, support, and act responsibly.
        </p>
      </div>
    </div>
  </section>


  <!-- ══ STATS ══════════════════════════════════════════════════════ -->
  <section class="ens-section--ink">
    <div class="container-fluid px-0">
      <div class="stats-row">

        <div class="stat ens-fade">
          <div class="stat__num">24+</div>
          <div class="stat__lbl">Years of Ensolanka Vision</div>
        </div>

        <div class="stat ens-fade">
          <div class="stat__num">9</div>
          <div class="stat__lbl">Core Care Service Types</div>
        </div>

        <div class="stat ens-fade">
          <div class="stat__num">1</div>
          <div class="stat__lbl">Remote Property Care Hub</div>
        </div>

        <div class="stat ens-fade">
          <div class="stat__num">360°</div>
          <div class="stat__lbl">Visibility for Owners</div>
        </div>

      </div>
    </div>
  </section>


  <!-- ══ PROPERTY CARE SERVICE VISION ══════════════════════════════ -->
  <section class="ens-section">
    <div class="container">

      <div class="row align-items-start gy-5">

        <div class="col-lg-5 ens-fade">
          <p class="ens-label">Property Care Scope</p>

          <h2 class="ens-h2">
            Built Around Real<br>
            Owner Concerns.
          </h2>

          <p class="ens-lead">
            The platform is structured around practical needs faced by remote property owners:
            keeping properties visible, maintained, prepared, and professionally reviewed through
            a service catalogue that can grow with operational experience.
          </p>
        </div>

        <div class="col-lg-7">
          <div class="care-grid">

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-clipboard-check-fill"></i>
              </div>
              <h4 class="care-card__title">Inspection Visits</h4>
              <p class="care-card__desc">
                Scheduled condition checks and visit records to help owners understand what is happening on site.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-stars"></i>
              </div>
              <h4 class="care-card__title">Interior & Exterior Cleaning</h4>
              <p class="care-card__desc">
                Support for keeping living spaces and visible outdoor areas cleaner and better maintained.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-tree-fill"></i>
              </div>
              <h4 class="care-card__title">Garden & Land Care</h4>
              <p class="care-card__desc">
                Grass cutting, vacant land care, and outdoor monitoring based on the property’s nature.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-receipt-cutoff"></i>
              </div>
              <h4 class="care-card__title">Utility Bill Handling</h4>
              <p class="care-card__desc">
                Organized support for utility continuity, reference tracking, and owner coordination.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-shield-check"></i>
              </div>
              <h4 class="care-card__title">Security & Vacancy Checks</h4>
              <p class="care-card__desc">
                Routine observation of gates, access points, visible risks, and signs of vacancy-related concern.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-exclamation-triangle-fill"></i>
              </div>
              <h4 class="care-card__title">Emergency Support</h4>
              <p class="care-card__desc">
                Coordination assistance when urgent property situations need attention or inspection.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-door-open-fill"></i>
              </div>
              <h4 class="care-card__title">Arrival Preparation</h4>
              <p class="care-card__desc">
                Property readiness support before an owner, family member, or planned guest arrives.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-images"></i>
              </div>
              <h4 class="care-card__title">Photos & Reports</h4>
              <p class="care-card__desc">
                Uploaded visit photos, inspection summaries, and future owner-facing records for transparency.
              </p>
            </div>

            <div class="care-card ens-fade">
              <div class="care-card__icon">
                <i class="bi bi-link-45deg"></i>
              </div>
              <h4 class="care-card__title">Connected Ecosystem</h4>
              <p class="care-card__desc">
                Built to connect with rental owner access, affiliate opportunities, and wider Ensolanka services.
              </p>
            </div>

          </div>
        </div>

      </div>

    </div>
  </section>


  <!-- ══ GLOBAL NETWORK ════════════════════════════════════════════ -->
  <section class="ens-section ens-section--mist">
    <div class="container">
      <div class="row align-items-center gy-5">

        <div class="col-lg-5 ens-fade">
          <p class="ens-label">Our Network</p>

          <h2 class="ens-h2">
            Explore Our<br>
            Global Presence.
          </h2>

          <p class="ens-lead">
            Home in Sri Lanka Property Care is part of a wider Ensolanka ecosystem
            spanning digital systems, education, international communities, and
            globally connected service platforms.
          </p>
        </div>

        <div class="col-lg-6 offset-lg-1 ens-fade">
          <div class="network-card">

            <div class="network-card__header">
              <p class="ens-label mb-0">Sister Sites</p>
            </div>

            <a href="https://ensolanka.com/" target="_blank" class="network-item">
              <div class="network-item__left">
                <div class="network-item__logo">
                  <img src="{% static 'expat_life/images/corporate.png' %}" alt="Ensolanka Corporate logo">
                </div>

                <div class="network-item__text">
                  <h6>Ensolanka Corporate</h6>
                  <small>Our main technology, consultancy, and business innovation hub</small>
                </div>
              </div>

              <i class="bi bi-arrow-up-right network-item__arrow"></i>
            </a>

            <a href="https://pythonplayground.org/" target="_blank" class="network-item">
              <div class="network-item__left">
                <div class="network-item__logo">
                  <img src="{% static 'expat_life/images/python_playground.png' %}" alt="Python Playground logo">
                </div>

                <div class="network-item__text">
                  <h6>Python Playground</h6>
                  <small>Advanced AI, coding, and technology education platform</small>
                </div>
              </div>

              <i class="bi bi-arrow-up-right network-item__arrow"></i>
            </a>

            <a href="https://mauritians.net/" target="_blank" class="network-item">
              <div class="network-item__left">
                <div class="network-item__logo">
                  <img src="{% static 'expat_life/images/mauritians.png' %}" alt="Mauritians.net logo">
                </div>

                <div class="network-item__text">
                  <h6>Mauritians.net</h6>
                  <small>Global community platform and international digital ecosystem</small>
                </div>
              </div>

              <i class="bi bi-arrow-up-right network-item__arrow"></i>
            </a>

          </div>
        </div>

      </div>
    </div>
  </section>


  <!-- ══ TEAM ══════════════════════════════════════════════════════ -->
  <section class="ens-section">
    <div class="container">

      <div class="text-center mb-5 ens-fade">
        <p class="ens-label" style="justify-content:center;">
          The People
        </p>

        <h2 class="ens-h2">
          Leadership Team
        </h2>
      </div>

      <div class="team-grid">

        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/ceo.jpg' %}"
                 class="team-card__img"
                 alt="D. S. Wasantha Jayathunge">
          </div>

          <p class="team-card__name">
            D. S. Wasantha Jayathunge
          </p>

          <p class="team-card__role">
            Founder &amp; CEO
          </p>
        </div>

        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/harshani.jpg' %}"
                 class="team-card__img"
                 alt="D. S. Harshani Dharmathilaka">
          </div>

          <p class="team-card__name">
            D. S. Harshani Dharmathilaka
          </p>

          <p class="team-card__role">
            Managing Partner &amp; Secretary
          </p>
        </div>

        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/amila.jpg' %}"
                 class="team-card__img"
                 alt="R.M. Amila Ruwan Kumara">
          </div>

          <p class="team-card__name">
            R.M. Amila Ruwan Kumara
          </p>

          <p class="team-card__role">
            Manager Operations
          </p>
        </div>

        <div class="team-card ens-fade">
          <div class="team-card__img-wrap">
            <img src="{% static 'expat_life/images/team/lionel.jpg' %}"
                 class="team-card__img"
                 alt="Lionel Fernando">
          </div>

          <p class="team-card__name">
            Lionel Fernando
          </p>

          <p class="team-card__role">
            Sr. Business Coordinator
          </p>
        </div>

      </div>

    </div>
  </section>


  <!-- ══ CTA ═══════════════════════════════════════════════════════ -->
  <section class="about-cta">
    <div class="container">
      <div class="about-cta__card ens-fade">

        <h2>
          Own Property in Sri Lanka?<br>
          Let’s Build a Better Care Plan Around It.
        </h2>

        <p>
          Whether you live abroad, travel often, or simply need a trusted system
          to organize maintenance and property visibility, Home in Sri Lanka Property Care
          is designed to help you register your property, select services, review estimates,
          and begin a more structured care journey.
        </p>

        <div class="about-cta__actions">
          <a href="{% url 'property_manager_app:property_manager_signup' %}"
             class="btn about-cta__btn-primary">
            <i class="bi bi-person-plus-fill me-2"></i>
            Create Property Care Access
          </a>

          <a href="{% url 'property_manager_app:home_property_manager' %}"
             class="btn btn-dark about-cta__btn-dark">
            <i class="bi bi-house-heart-fill me-2"></i>
            Back to Property Care Home
          </a>
        </div>

      </div>
    </div>
  </section>


  <!-- ══ FOOTER STRIP ══════════════════════════════════════════════ -->
  <div class="ens-footer-strip">
    <div class="container">
      <address>
        <strong>Official Registered Address — USA</strong><br>
        30 N Gould St Ste R, Sheridan, WY 82801, United States<br>
        <span style="font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);">
          ENSOLANKA LLC &nbsp;·&nbsp; EIN: 30-1444464
        </span>
      </address>

      <div class="ens-socials">
        <a href="https://web.facebook.com/ensolanka"
           target="_blank"
           aria-label="Facebook">
          <i class="bi bi-facebook"></i>
        </a>

        <a href="https://www.youtube.com/@ensolanka/"
           target="_blank"
           aria-label="YouTube">
          <i class="bi bi-youtube"></i>
        </a>

        <a href="https://www.linkedin.com/company/ensolanka-llc/"
           target="_blank"
           aria-label="LinkedIn">
          <i class="bi bi-linkedin"></i>
        </a>
      </div>
    </div>
  </div>

</div><!-- /about-page -->


<script>
  const faders = document.querySelectorAll('.ens-fade');

  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('visible');
        io.unobserve(e.target);
      }
    });
  }, {
    threshold: 0.12
  });

  faders.forEach(el => io.observe(el));
</script>

{% endblock %}