:root {
    --about-navy:#183a5b;
    --about-blue:#204265;
    --about-teal:#3da5bd;
    --about-teal-dark:#258da6;
    --about-green:#57b860;
    --about-green-dark:#489f50;
    --about-muted:#60778d;
    --about-border:#d9e9ef;
}

.about-hero {
    position:relative;
    overflow:hidden;
    padding:86px 22px 82px;
    background:
        radial-gradient(circle at 10% 18%,rgba(61,165,189,.14),transparent 26rem),
        radial-gradient(circle at 90% 82%,rgba(87,184,96,.10),transparent 25rem),
        linear-gradient(180deg,#f9fcfd 0%,#edf8fa 100%);
}
.about-hero__inner {
    width:min(1160px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.03fr .97fr;
    align-items:center;
    gap:64px;
}
.about-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--about-teal-dark);
    font-size:12px;
    font-weight:800;
    letter-spacing:1.45px;
    text-transform:uppercase;
}
.about-eyebrow::before {
    content:"";
    width:34px;
    height:1px;
    background:currentColor;
    opacity:.55;
}
.about-hero h1,
.about-story h2,
.about-values h2,
.about-personal h2 {
    margin:14px 0 0;
    color:var(--about-navy);
    font-family:Georgia,"Times New Roman",serif;
    letter-spacing:-.035em;
}
.about-hero h1 {
    font-size:clamp(44px,6vw,68px);
    line-height:1.02;
}
.about-hero__lead {
    max-width:660px;
    margin:20px 0 0;
    color:var(--about-muted);
    font-size:17px;
    line-height:1.75;
}
.about-hero__points {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:25px;
}
.about-hero__point {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;
    border:1px solid rgba(61,165,189,.22);
    border-radius:999px;
    background:rgba(255,255,255,.82);
    color:var(--about-blue);
    font-size:12px;
    font-weight:800;
}
.about-hero__point::before {
    content:"✓";
    display:grid;
    width:19px;
    height:19px;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--about-green);
    font-size:11px;
}
.about-hero__portrait {
    position:relative;
    max-width:520px;
    margin-left:auto;
}
.about-hero__portrait::before {
    content:"";
    position:absolute;
    inset:24px -18px -18px 22px;
    border-radius:28px;
    background:linear-gradient(145deg,rgba(61,165,189,.25),rgba(87,184,96,.18));
}
.about-hero__portrait img {
    position:relative;
    width:100%;
    aspect-ratio:4/5;
    display:block;
    object-fit:cover;
    object-position:center 30%;
    border-radius:26px;
    box-shadow:0 24px 65px rgba(32,66,101,.18);
}

.about-story {
    padding:88px 22px 84px;
    background:#fff;
}
.about-story__inner,
.about-values__inner {
    width:min(1100px,100%);
    margin:0 auto;
}
.about-story__intro,
.about-values__intro {
    max-width:800px;
    margin:0 auto 46px;
    text-align:center;
}
.about-story h2,
.about-values h2,
.about-personal h2 {
    font-size:clamp(38px,5vw,56px);
    line-height:1.04;
}
.about-story__intro p,
.about-values__intro p,
.about-personal__copy p {
    color:var(--about-muted);
    font-size:16px;
    line-height:1.78;
}
.about-story__grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px;
}
.about-story__card {
    padding:28px 26px;
    border:1px solid var(--about-border);
    border-radius:22px;
    background:
        radial-gradient(circle at 100% 0%,rgba(61,165,189,.08),transparent 18rem),
        #fff;
    box-shadow:0 18px 46px rgba(32,66,101,.09);
}
.about-story__number {
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(145deg,var(--about-teal),var(--about-green));
    font-weight:800;
}
.about-story__card h3 {
    margin:18px 0 0;
    color:var(--about-navy);
    font-size:22px;
    line-height:1.3;
}
.about-story__card p {
    margin:12px 0 0;
    color:var(--about-muted);
    font-size:14px;
    line-height:1.74;
}

.about-personal {
    padding:0 22px 84px;
    background:#fff;
}
.about-personal__inner {
    width:min(1100px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:48px;
    align-items:center;
    padding:38px;
    border:1px solid var(--about-border);
    border-radius:26px;
    background:
        radial-gradient(circle at 0% 100%,rgba(87,184,96,.08),transparent 21rem),
        #f9fcfd;
    box-shadow:0 20px 54px rgba(32,66,101,.10);
}
.about-personal__copy p {
    margin:17px 0 0;
}
.about-personal__signature {
    margin-top:22px;
    color:var(--about-navy);
    font-size:15px;
    font-weight:800;
}
.about-personal__signature span {
    display:block;
    margin-top:4px;
    color:var(--about-muted);
    font-size:12px;
    font-weight:500;
}

.about-values {
    padding:82px 22px 84px;
    background:
        radial-gradient(circle at 12% 18%,rgba(61,165,189,.09),transparent 24rem),
        radial-gradient(circle at 88% 84%,rgba(87,184,96,.07),transparent 24rem),
        #f7fafb;
}
.about-values__grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}
.about-value {
    min-height:100%;
    padding:26px 23px;
    border:1px solid var(--about-border);
    border-radius:20px;
    background:#fff;
    box-shadow:0 16px 40px rgba(32,66,101,.08);
}
.about-value__icon {
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border-radius:14px;
    color:#fff;
    background:linear-gradient(145deg,var(--about-teal),var(--about-teal-dark));
    font-size:20px;
    font-weight:900;
}
.about-value:nth-child(2) .about-value__icon {
    background:linear-gradient(145deg,var(--about-green),var(--about-green-dark));
}
.about-value:nth-child(3) .about-value__icon {
    background:linear-gradient(145deg,var(--about-blue),var(--about-navy));
}
.about-value h3 {
    margin:17px 0 0;
    color:var(--about-navy);
    font-size:20px;
    line-height:1.3;
}
.about-value p {
    margin:11px 0 0;
    color:var(--about-muted);
    font-size:13px;
    line-height:1.7;
}
.about-note {
    width:min(1100px,100%);
    margin:28px auto 0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:19px 22px;
    border:1px solid rgba(61,165,189,.24);
    border-radius:16px;
    background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(238,249,251,.94));
}
.about-note__icon {
    flex:0 0 auto;
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:10px;
    color:#fff;
    background:var(--about-green);
    font-weight:900;
}
.about-note p {
    margin:0;
    color:var(--about-blue);
    font-size:14px;
    line-height:1.65;
}
.about-note strong {
    color:var(--about-navy);
}

@media(max-width:900px) {
    .about-hero__inner,
    .about-personal__inner {
        grid-template-columns:1fr;
    }
    .about-hero__portrait {
        max-width:650px;
        margin-left:0;
    }
    .about-personal__photo {
        max-width:620px;
    }
    .about-story__grid,
    .about-values__grid {
        grid-template-columns:1fr;
        max-width:760px;
        margin-inline:auto;
    }
}
@media(max-width:650px) {
    .about-hero,
    .about-story,
    .about-values {
        padding:58px 16px 54px;
    }
    .about-hero h1 {
        font-size:43px;
    }
    .about-personal {
        padding:0 16px 54px;
    }
    .about-personal__inner {
        padding:22px;
        gap:28px;
    }
    .about-note {
        align-items:flex-start;
        padding:18px;
    }
}


/* ==========================================================
   v1.1 — CAPE TOWN HOMETECH PROMISE PANEL
   Replaces the repeated founder portrait.
   ========================================================== */
.about-promise {
    position: relative;
    overflow: hidden;
    padding: 30px 27px 27px;
    border: 1px solid rgba(61,165,189,.28);
    border-radius: 23px;
    background:
        radial-gradient(circle at 100% 0%, rgba(87,184,96,.13), transparent 17rem),
        linear-gradient(155deg, #eef9fb 0%, #ffffff 68%);
    box-shadow: 0 18px 44px rgba(32,66,101,.12);
}

.about-promise::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--about-teal), var(--about-green));
}

.about-promise__badge {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, var(--about-teal), var(--about-green));
    box-shadow: 0 10px 24px rgba(61,165,189,.23);
    font-size: 22px;
    font-weight: 900;
}

.about-promise__eyebrow {
    display: block;
    margin-top: 20px;
    color: var(--about-teal-dark);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.about-promise h3 {
    margin: 8px 0 0;
    color: var(--about-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 31px;
    line-height: 1.08;
    letter-spacing: -.03em;
}

.about-promise__list {
    display: grid;
    gap: 0;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.about-promise__list li {
    display: grid;
    grid-template-columns: 25px 1fr;
    gap: 11px;
    padding: 15px 0;
    border-top: 1px solid var(--about-border);
}

.about-promise__icon {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    margin-top: 1px;
    border-radius: 50%;
    color: #fff;
    background: var(--about-green);
    font-size: 12px;
    font-weight: 900;
}

.about-promise__list strong,
.about-promise__list span {
    display: block;
}

.about-promise__list strong {
    color: var(--about-navy);
    font-size: 13px;
    line-height: 1.45;
}

.about-promise__list div > span {
    margin-top: 3px;
    color: var(--about-muted);
    font-size: 12px;
    line-height: 1.55;
}

@media(max-width:900px) {
    .about-promise {
        max-width: 720px;
    }
}


/* ==========================================================
   PRODUCTION v2.5 — ABOUT PROMISE CHECK-MARK OPTICAL ALIGNMENT
   ========================================================== */
.about-promise__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 1px;
}