/* CareNotes /about : company page, layered on sample3.css */

:root { --ab: #7c3aed; --ab-deep: #5b21b6; --ab-soft: #ede9fe; --ab-ink: #2e1065; }

/* ---------------- HERO ---------------- */
.ab-hero {
    margin-top: -76px; padding: 150px 22px 90px; text-align: center; overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f3efff 45%, #e6dcff 100%);
    color: #1d1d1f;
}
.ab-hero .eyebrow, .detail .eyebrow { color: var(--ab-deep); }
.ab-hero h1 {
    margin: 10px auto 0; max-width: 900px;
    font-size: clamp(40px, 6vw, 76px); font-weight: 700; line-height: 1.04; letter-spacing: -.015em; text-wrap: balance;
}
.ab-hero .lede {
    margin: 18px auto 0; max-width: 680px; font-size: clamp(18px, 2vw, 23px); line-height: 1.35;
    color: #4c3f6b; letter-spacing: -.01em; text-wrap: balance;
}
.ab-hero .ctas { margin-top: 26px; }
.ab-hero .btn-fill { background: #1d1d1f; color: #fff; }
.ab-hero .btn-fill:hover { background: var(--ab); }
.ab-hero .btn-line { color: #1d1d1f; box-shadow: inset 0 0 0 1px #1d1d1f; }
.ab-hero .btn-line:hover { background: #1d1d1f; color: #fff; }

.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 56px auto 0; width: min(880px, 100%); text-align: left; }
.ab-stat {
    background: rgba(255, 255, 255, .78); border-radius: 22px; padding: 26px 24px 24px;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 40px 80px -40px rgba(60, 20, 120, .35), inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(0, 0, 0, .04);
}
.ab-stat .big { font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; letter-spacing: -.025em; line-height: 1; color: var(--ab-deep); }
.ab-stat .big small { font-size: .42em; font-weight: 600; letter-spacing: 0; margin-left: 6px; color: #6e6e73; vertical-align: middle; }
.ab-stat p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: #4c3f6b; letter-spacing: -.01em; }

/* ---------------- PHOTO ---------------- */
.ab-photo { background: #000; }
.ab-photo figure { position: relative; margin: 0; max-height: 720px; overflow: hidden; }
.ab-photo img, .ab-photo video { width: 100%; height: 100%; max-height: 720px; object-fit: cover; display: block; background: #000; }
.ab-photo video { aspect-ratio: 16 / 9; }
.ab-photo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 22px 34px; text-align: center; color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .6) 100%);
}
.ab-photo figcaption strong { display: block; font-size: clamp(22px, 2.8vw, 34px); font-weight: 600; letter-spacing: -.01em; }
.ab-photo figcaption span { display: block; margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .82); }

/* ---------------- WHO BUILT IT ---------------- */
.ab-two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; margin-top: 44px; text-align: left; }
.ab-copy p { margin-top: 16px; font-size: 17px; line-height: 1.55; color: #424245; letter-spacing: -.01em; }
.ab-copy p:first-child { margin-top: 0; }
.ab-copy strong { color: #1d1d1f; }
.ab-copy a { color: var(--ab); font-weight: 600; }
.ab-copy a:hover { text-decoration: underline; }
.founder {
    background: #f5f5f7; border-radius: 22px; padding: 28px 26px 26px;
    box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .35);
}
.detail-alt .founder { background: #fff; }
.founder .fd-top { display: flex; align-items: center; gap: 16px; }
.founder .fd-avatar {
    width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
    background: #fff; color: #1d1d1f; font-weight: 800; font-size: 24px; border: 5px solid var(--ab);
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .28);
}
.founder .fd-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.founder .fd-role { margin-top: 2px; font-size: 14px; color: #6e6e73; }
.founder .fd-quote { margin-top: 18px; font-size: 16px; line-height: 1.5; color: #424245; letter-spacing: -.01em; }
.founder .fd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.founder .fd-links a {
    display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; padding: 8px 13px; border-radius: 980px;
    background: #fff; color: #1d1d1f; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); transition: background .2s var(--ease), color .2s var(--ease);
}
.founder .fd-links a:hover { background: #1d1d1f; color: #fff; }
.founder .fd-links i { color: var(--ab); }
.founder .fd-links a:hover i { color: #fff; }

/* ---------------- WATCH ---------------- */
.ab-media { display: grid; grid-template-columns: 1.45fr 1fr; gap: 20px; margin-top: 44px; text-align: left; align-items: start; }
.ab-video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 22px; background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .5); }
.ab-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ab-social { background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.ab-social .instagram-media { margin: 0 !important; min-width: 0 !important; width: 100% !important; border-radius: 12px !important; }
.ab-social-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 12px; font-size: 14px; font-weight: 600; color: #424245; }
.ab-social-head i { color: #e1306c; font-size: 18px; }
.ab-social-head a { margin-left: auto; font-size: 13px; color: var(--ab); }
.ab-social-head a:hover { text-decoration: underline; }

/* ---------------- GALLERY ---------------- */
.ab-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; text-align: left; }
.ab-shot { display: block; position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4; background: #ddd; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, .45); color: #fff; }
.ab-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ab-shot:hover img { transform: scale(1.04); }
.ab-shot figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 18px 18px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .65));
}
.ab-shot figcaption b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ab-shot figcaption span { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
.ab-events { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.ab-events span { font-size: 14px; font-weight: 600; padding: 9px 14px; border-radius: 980px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.detail-alt .ab-events span { background: #fff; }
.ab-events small { font-weight: 500; color: #86868b; margin-left: 4px; }

/* ---------------- TRUST (dark) ---------------- */
.ab-dark { background: #1d1d1f; color: #f5f5f7; }
.ab-dark .eyebrow { color: #c4b5fd; }
.ab-dark h3 { color: #f5f5f7; }
.ab-dark .lede { margin: 14px auto 0; max-width: 720px; font-size: 17px; line-height: 1.5; color: #a1a1a6; letter-spacing: -.01em; }
.ab-dark .lede a { color: #c4b5fd; font-weight: 600; }
.ab-dark .lede a:hover { text-decoration: underline; }
.ab-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; text-align: left; }
.ab-pillar { background: #2a2a2e; border-radius: 18px; padding: 20px 18px; }
.ab-pillar i { color: #c4b5fd; font-size: 16px; }
.ab-pillar b { display: block; margin-top: 12px; font-size: 15px; font-weight: 600; color: #f5f5f7; letter-spacing: -.01em; }
.ab-pillar span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #a1a1a6; }
.ab-dark .ctas { margin-top: 34px; }
.ab-dark .ctas .btn-fill { background: #f5f5f7; color: #1d1d1f; }
.ab-dark .ctas .btn-line { color: #f5f5f7; box-shadow: inset 0 0 0 1px #f5f5f7; }
.ab-dark .ctas .btn-line:hover { background: #f5f5f7; color: #1d1d1f; }

/* ---------------- CONTACT / CLOSER ---------------- */
.ab-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 40px; text-align: left; }
.ab-link {
    display: flex; align-items: center; gap: 14px; background: #f5f5f7; border-radius: 18px; padding: 18px 18px; color: inherit;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ab-link:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .4); }
.ab-link .ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ab-soft); color: var(--ab-deep); font-size: 15px; }
.ab-link .txt { display: block; min-width: 0; }
.ab-link .txt b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ab-link .txt span { display: block; margin-top: 2px; font-size: 13px; color: #6e6e73; }
#start .btn-fill { background: #1d1d1f; color: #fff; }
#start .btn-fill:hover { background: var(--ab); }
#start .btn-line { color: #1d1d1f; box-shadow: inset 0 0 0 1px #1d1d1f; }
#start .btn-line:hover { background: #1d1d1f; color: #fff; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 1068px) {
    .ab-pillars, .ab-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 734px) {
    .ab-hero { padding-top: 120px; padding-bottom: 70px; }
    .ab-stats { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
    .ab-two, .ab-media { grid-template-columns: 1fr; gap: 28px; }
    .ab-gallery { grid-template-columns: 1fr; }
    .ab-shot { aspect-ratio: 4 / 3; }
    .ab-pillars, .ab-links { grid-template-columns: 1fr; }
    .ab-photo figcaption { position: static; padding: 18px 22px 26px; background: #000; }
}