/* ============================================================
   ARHA ABOUT PAGE

   Ivory + Deep Navy + ARHA Teal + Bronze
   ============================================================ */

#arhaAboutPage {

    --about-white:#FFFFFF;
    --about-ivory:#FBFAF6;
    --about-warm:#F5F1E9;
    --about-soft:#F0F5F3;

    --about-dark:#163943;
    --about-navy:#0E303A;
    --about-slate:#465E64;
    --about-muted:#77878A;

    --about-teal:#347C7C;
    --about-teal-dark:#265F61;
    --about-teal-soft:#E5EFED;

    --about-bronze:#AE8652;
    --about-bronze-soft:#F3E9D9;

    --about-red:#B84A4F;
    --about-red-soft:#F8E8E9;

    --about-border:#E1E7E3;

    --about-heading:'Outfit',sans-serif;
    --about-body:'Inter',sans-serif;

    width:100%;
    overflow:hidden;

    background:var(--about-ivory);
    color:var(--about-slate);

    font-family:var(--about-body);
}


#arhaAboutPage *,
#arhaAboutPage *::before,
#arhaAboutPage *::after {
    box-sizing:border-box;
}


#arhaAboutPage img {
    width:100%;
    display:block;
}


#arhaAboutPage a {
    text-decoration:none;
}


.about-container {

    width:min(
        1280px,
        calc(100% - 56px)
    );

    margin-inline:auto;
}


/* ============================================================
   REVEAL
   ============================================================ */

#arhaAboutPage [data-about-reveal] {

    opacity:0;

    transform:translateY(28px);

    transition:
        opacity .72s ease,
        transform .72s cubic-bezier(.2,.7,.2,1);
}


#arhaAboutPage
[data-about-reveal].about-visible {

    opacity:1;
    transform:none;
}


/* ============================================================
   HERO
   ============================================================ */

.about-hero {

    position:relative;

    padding:82px 0 108px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(52,124,124,.12),
            transparent 29%
        ),
        linear-gradient(
            120deg,
            #FFFFFF,
            #F7F4ED
        );
}


.about-hero-grid {

    position:absolute;
    inset:0;

    opacity:.19;

    background-image:
        linear-gradient(
            rgba(52,124,124,.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(52,124,124,.055) 1px,
            transparent 1px
        );

    background-size:64px 64px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            #000,
            transparent
        );
}


.about-orbit {

    position:absolute;

    border-radius:50%;

    border:
        1px solid rgba(52,124,124,.12);

    pointer-events:none;

    animation:
        aboutOrbit
        9s ease-in-out infinite alternate;
}


.about-orbit-one {

    width:570px;
    height:570px;

    right:-280px;
    top:-285px;
}


.about-orbit-two {

    width:230px;
    height:230px;

    left:-110px;
    bottom:-95px;

    border-color:
        rgba(174,134,82,.15);

    animation-delay:2s;
}


@keyframes aboutOrbit {

    to {
        transform:
            translate(30px,35px)
            scale(1.06);
    }

}


/* ============================================================
   HERO LAYOUT
   ============================================================ */

.about-hero-layout {

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        1fr .92fr;

    align-items:center;

    gap:82px;
}


.about-breadcrumb {

    margin-bottom:28px;

    display:flex;
    align-items:center;

    gap:8px;

    font-size:9px;

    color:var(--about-muted);
}


.about-breadcrumb a {
    color:var(--about-teal);
}


.about-breadcrumb i {
    font-size:6px;
}


.about-kicker,
.about-section-label {

    display:block;

    margin-bottom:10px;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.25px;

    color:var(--about-teal);
}


.about-hero h1 {

    max-width:720px;

    margin:0;

    font-family:var(--about-heading);

    font-size:
        clamp(50px,5.5vw,76px);

    font-weight:800;

    line-height:.97;

    letter-spacing:-2.5px;

    color:var(--about-dark);
}


.about-hero h1 strong {

    display:block;

    color:var(--about-teal);
}


.about-hero-description {

    max-width:670px;

    margin:25px 0 0;

    font-size:14.5px;

    line-height:1.8;
}


/* ============================================================
   HERO ACTIONS
   ============================================================ */

.about-hero-actions {

    margin-top:30px;

    display:flex;
    flex-wrap:wrap;

    gap:10px;
}


.about-primary,
.about-secondary {

    min-height:55px;

    padding:0 18px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:8px;

    font-size:11px;

    font-weight:700;
}


.about-primary {

    background:var(--about-teal);

    color:#fff !important;

    box-shadow:
        0 13px 28px
        rgba(52,124,124,.17);
}


.about-secondary {

    border:
        1px solid var(--about-border);

    background:#fff;

    color:var(--about-dark) !important;
}


.about-hero-pills {

    margin-top:25px;

    display:flex;
    flex-wrap:wrap;

    gap:7px;
}


.about-hero-pills span {

    padding:8px 11px;

    display:flex;

    align-items:center;

    gap:6px;

    border:
        1px solid var(--about-border);

    border-radius:30px;

    background:
        rgba(255,255,255,.72);

    font-size:8.5px;

    font-weight:600;
}


.about-hero-pills i {
    color:var(--about-teal);
}


/* ============================================================
   HERO PHOTO
   ============================================================ */

.about-hero-visual {
    position:relative;
}


.about-hero-photo {

    position:relative;

    height:570px;

    margin:0;

    overflow:hidden;

    border-radius:
        100px 18px 100px 18px;

    box-shadow:
        0 30px 65px
        rgba(30,62,67,.13);
}


.about-hero-photo img {

    height:100%;

    object-fit:cover;

    transition:
        transform 7s ease;
}


.about-hero-photo:hover img {
    transform:scale(1.05);
}


.about-photo-overlay {

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(14,48,58,.74),
            transparent 52%
        );
}


.about-hero-photo figcaption {

    position:absolute;

    z-index:2;

    left:22px;
    bottom:20px;

    display:flex;
    flex-direction:column;

    color:#fff;
}


.about-hero-photo small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

    color:#C0E0DB;
}


.about-hero-photo strong {

    margin-top:3px;

    font-family:var(--about-heading);

    font-size:20px;
}


.about-floating-card {

    position:absolute;

    left:-45px;
    bottom:70px;

    padding:14px 16px;

    display:flex;
    align-items:center;

    gap:11px;

    border:
        1px solid var(--about-border);

    border-radius:10px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 15px 35px
        rgba(30,62,67,.11);

    animation:
        aboutFloat
        4s ease-in-out infinite;
}


@keyframes aboutFloat {

    50% {
        transform:translateY(-7px);
    }

}


.about-floating-card > span {

    width:41px;
    height:41px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:
        var(--about-bronze-soft);

    color:
        var(--about-bronze);
}


.about-floating-card div {

    display:flex;
    flex-direction:column;
}


.about-floating-card small {

    font-size:7px;

    font-weight:800;

    color:var(--about-teal);
}


.about-floating-card strong {

    margin-top:3px;

    font-family:var(--about-heading);

    font-size:11px;

    color:var(--about-dark);
}


/* ============================================================
   WHO WE ARE
   ============================================================ */

.about-intro {

    padding:110px 0;

    scroll-margin-top:110px;

    background:#fff;
}


.about-intro-layout {

    display:grid;

    grid-template-columns:
        .85fr 1fr;

    gap:110px;
}


.about-intro-title h2,
.about-heading h2,
.about-values-heading h2,
.about-care-copy h2 {

    margin:0;

    font-family:var(--about-heading);

    font-size:
        clamp(36px,4.2vw,53px);

    line-height:1.04;

    letter-spacing:-1.3px;

    color:var(--about-dark);
}


.about-intro-title h2 em,
.about-heading h2 em {

    display:block;

    font-style:normal;

    color:var(--about-teal);
}


.about-intro-copy {

    padding-top:17px;
}


.about-intro-copy p {

    margin:0 0 17px;

    font-size:12px;

    line-height:1.8;

    color:var(--about-muted);
}


.about-intro-copy
.about-intro-lead {

    font-family:var(--about-heading);

    font-size:20px;

    line-height:1.5;

    color:var(--about-slate);
}


.about-intro-copy > a {

    margin-top:7px;

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--about-teal) !important;

    font-size:10px;

    font-weight:700;
}


/* ============================================================
   STORY
   ============================================================ */

.about-story {

    padding:105px 0;

    background:var(--about-soft);
}


.about-story-layout {

    display:grid;

    grid-template-columns:
        1.25fr .75fr;

    gap:13px;
}


.about-story-layout figure {
    margin:0;
}


.about-story-main {

    position:relative;

    height:600px;

    overflow:hidden;

    border-radius:
        16px 90px 16px 16px;
}


.about-story-main img {

    height:100%;

    object-fit:cover;
}


.about-story-main::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(14,48,58,.72),
            transparent 53%
        );
}


.about-story-main figcaption {

    position:absolute;

    z-index:2;

    left:22px;
    bottom:20px;

    display:flex;
    flex-direction:column;

    color:#fff;
}


.about-story-main small {

    font-size:7px;

    color:#B9DDD8;
}


.about-story-main strong {

    margin-top:3px;

    font-family:var(--about-heading);

    font-size:21px;
}


.about-story-side {

    display:grid;

    grid-template-rows:
        1fr auto;

    gap:13px;
}


.about-story-side figure {

    height:350px;

    overflow:hidden;

    border-radius:15px;
}


.about-story-side img {

    height:100%;

    object-fit:cover;
}


.about-story-quote {

    min-height:237px;

    padding:29px;

    border-radius:
        15px 15px 65px 15px;

    background:
        var(--about-dark);

    color:#fff;
}


.about-story-quote > span {

    font-family:Georgia,serif;

    font-size:52px;

    line-height:.7;

    color:
        var(--about-bronze);
}


.about-story-quote p {

    margin:16px 0 20px;

    font-family:var(--about-heading);

    font-size:17px;

    line-height:1.45;
}


.about-story-quote small {

    font-size:7px;

    letter-spacing:.8px;

    color:#A4D0CB;
}


/* ============================================================
   SHARED HEADING
   ============================================================ */

.about-heading {

    max-width:860px;

    margin-bottom:45px;
}


.about-heading > p {

    max-width:700px;

    margin:17px 0 0;

    font-size:12px;

    line-height:1.75;

    color:var(--about-muted);
}


.about-heading-center {

    margin:
        0 auto 46px;

    text-align:center;
}


/* ============================================================
   PURPOSE
   ============================================================ */

.about-purpose {

    padding:110px 0;

    background:var(--about-ivory);
}


.about-purpose-grid {

    display:grid;

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

    gap:12px;
}


.about-purpose-card {

    position:relative;

    min-height:360px;

    padding:30px;

    border:
        1px solid var(--about-border);

    border-radius:13px;

    background:#fff;
}


.about-purpose-number {

    position:absolute;

    right:22px;
    top:20px;

    font-family:var(--about-heading);

    font-size:10px;

    color:#ADB6B4;
}


.about-purpose-icon {

    width:50px;
    height:50px;

    margin-bottom:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:11px;

    background:
        var(--about-teal-soft);

    color:
        var(--about-teal);
}


.about-vision-card
.about-purpose-icon {

    background:
        var(--about-bronze-soft);

    color:
        var(--about-bronze);
}


.about-purpose-card > small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

    color:var(--about-teal);
}


.about-purpose-card h3 {

    margin:7px 0 0;

    font-family:var(--about-heading);

    font-size:23px;

    line-height:1.16;

    color:var(--about-dark);
}


.about-purpose-card p {

    margin:14px 0 0;

    font-size:10.5px;

    line-height:1.75;

    color:var(--about-muted);
}


/* ============================================================
   VALUES
   ============================================================ */

.about-values {

    padding:110px 0;

    background:var(--about-dark);
}


.about-values-layout {

    display:grid;

    grid-template-columns:
        .58fr 1fr;

    gap:80px;
}


.about-values-heading {

    color:#fff;
}


.about-values-heading
.about-section-label {

    color:#A5D3CE;
}


.about-values-heading h2 {
    color:#fff;
}


.about-values-heading p {

    margin:17px 0 0;

    font-size:12px;

    line-height:1.75;

    color:#BDD0D3;
}


.about-values-grid {

    display:grid;

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

    gap:9px;
}


.about-values-grid article {

    position:relative;

    min-height:180px;

    padding:22px;

    border:
        1px solid rgba(255,255,255,.10);

    border-radius:10px;

    background:
        rgba(255,255,255,.045);
}


.about-values-grid article > span {

    position:absolute;

    right:15px;
    top:13px;

    font-size:7px;

    color:#799398;
}


.about-values-grid article > i {

    margin-bottom:20px;

    color:#C4A36C;

    font-size:17px;
}


.about-values-grid h3 {

    margin:0;

    font-family:var(--about-heading);

    font-size:15px;

    color:#fff;
}


.about-values-grid p {

    margin:7px 0 0;

    font-size:9px;

    line-height:1.55;

    color:#AFC4C7;
}


/* ============================================================
   LEADERSHIP
   ============================================================ */

.about-leadership {

    padding:110px 0;

    scroll-margin-top:110px;

    background:#fff;
}


.about-leadership-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr .82fr;

    gap:13px;
}


.about-leader-card {

    overflow:hidden;

    border:
        1px solid var(--about-border);

    border-radius:13px;

    background:
        var(--about-ivory);
}


.about-leader-photo {

    position:relative;

    height:390px;

    overflow:hidden;

    background:#EAEEEB;
}


.about-leader-photo img {

    height:100%;

    object-fit:cover;

    object-position:center top;

    transition:transform .55s ease;
}


.about-leader-card:hover img {
    transform:scale(1.035);
}


.about-leader-overlay {

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(14,48,58,.28),
            transparent 45%
        );
}


.about-leader-info {

    padding:21px;
}


.about-leader-info small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

    color:var(--about-teal);
}


.about-leader-info h3 {

    margin:5px 0 0;

    font-family:var(--about-heading);

    font-size:21px;

    color:var(--about-dark);
}


.about-leader-info p {

    margin:4px 0 0;

    font-size:9px;

    color:var(--about-muted);
}


.about-leadership-statement {

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    border-radius:
        13px 70px 13px 13px;

    background:
        var(--about-warm);
}


.about-leadership-statement > span {

    width:48px;
    height:48px;

    margin-bottom:auto;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        var(--about-bronze-soft);

    color:
        var(--about-bronze);
}


.about-leadership-statement h3 {

    margin:50px 0 0;

    font-family:var(--about-heading);

    font-size:26px;

    line-height:1.12;

    color:var(--about-dark);
}


.about-leadership-statement p {

    margin:12px 0 0;

    font-size:10px;

    line-height:1.7;

    color:var(--about-muted);
}


/* ============================================================
   CLINICAL SPECIALITIES
   ============================================================ */

.about-clinical {

    padding:110px 0;

    background:var(--about-soft);
}


.about-clinical-grid {

    display:grid;

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

    gap:10px;
}


.about-clinical-grid > a {

    position:relative;

    min-height:205px;

    padding:22px;

    display:flex;
    flex-direction:column;

    border:
        1px solid var(--about-border);

    border-radius:11px;

    background:
        rgba(255,255,255,.78);

    color:var(--about-dark) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.about-clinical-grid > a:hover {

    transform:translateY(-5px);

    box-shadow:
        0 16px 35px
        rgba(30,62,67,.07);
}


.about-clinical-grid > a > span {

    width:43px;
    height:43px;

    margin-bottom:21px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:
        var(--about-teal-soft);

    color:
        var(--about-teal);
}


.about-clinical-grid
.about-clinical-emergency > span {

    background:
        var(--about-red-soft);

    color:
        var(--about-red);
}


.about-clinical-grid small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.7px;

    color:var(--about-teal);
}


.about-clinical-grid strong {

    margin-top:4px;

    font-family:var(--about-heading);

    font-size:16px;
}


.about-clinical-grid p {

    margin:7px 0 18px;

    font-size:9px;

    line-height:1.55;

    color:var(--about-muted);
}


.about-clinical-grid
> a > i:last-child {

    margin-top:auto;

    color:var(--about-teal);
}


/* ============================================================
   CARE APPROACH
   ============================================================ */

.about-care {

    padding:110px 0;

    background:#fff;
}


.about-care-layout {

    display:grid;

    grid-template-columns:
        1fr .9fr;

    align-items:center;

    gap:80px;
}


.about-care-photo {

    position:relative;

    height:560px;

    overflow:hidden;

    border-radius:
        90px 15px 90px 15px;
}


.about-care-photo img {

    height:100%;

    object-fit:cover;
}


.about-care-photo::after {

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(14,48,58,.7),
            transparent 52%
        );
}


.about-care-photo-content {

    position:absolute;

    z-index:2;

    left:21px;
    bottom:20px;

    display:flex;
    flex-direction:column;

    color:#fff;
}


.about-care-photo-content small {

    font-size:7px;

    color:#B8DCD7;
}


.about-care-photo-content strong {

    margin-top:3px;

    font-family:var(--about-heading);

    font-size:17px;
}


.about-care-copy > p {

    margin:17px 0 0;

    font-size:12.5px;

    line-height:1.75;

    color:var(--about-muted);
}


.about-care-path {

    margin-top:26px;

    border-top:
        1px solid var(--about-border);
}


.about-care-path > div {

    padding:15px 0;

    display:grid;

    grid-template-columns:
        37px 1fr;

    gap:12px;

    border-bottom:
        1px solid var(--about-border);
}


.about-care-path > div > span {

    width:28px;
    height:28px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--about-teal);

    color:#fff;

    font-size:8px;

    font-weight:800;
}


.about-care-path strong {

    font-family:var(--about-heading);

    font-size:12px;

    color:var(--about-dark);
}


.about-care-path p {

    margin:3px 0 0;

    font-size:9px;

    color:var(--about-muted);
}


/* ============================================================
   WHY ARHA
   ============================================================ */

.about-why {

    padding:105px 0;

    background:var(--about-ivory);
}


.about-why-grid {

    display:grid;

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

    gap:10px;
}


.about-why-grid article {

    min-height:190px;

    padding:21px;

    display:flex;

    gap:13px;

    border:
        1px solid var(--about-border);

    border-radius:11px;

    background:#fff;
}


.about-why-grid article > span {

    width:41px;
    height:41px;

    min-width:41px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:9px;

    background:var(--about-teal-soft);

    color:var(--about-teal);
}


.about-why-grid small {

    font-size:6.5px;

    font-weight:800;

    color:var(--about-teal);
}


.about-why-grid h3 {

    margin:4px 0 0;

    font-family:var(--about-heading);

    font-size:15px;

    color:var(--about-dark);
}


.about-why-grid p {

    margin:7px 0 0;

    font-size:9px;

    line-height:1.55;

    color:var(--about-muted);
}


/* ============================================================
   HOSUR
   ============================================================ */

.about-hosur {

    padding:70px 0;

    background:#fff;
}


.about-hosur-panel {

    padding:27px 29px;

    display:grid;

    grid-template-columns:
        53px 1fr auto;

    align-items:center;

    gap:20px;

    border:
        1px solid var(--about-border);

    border-radius:13px;

    background:
        var(--about-warm);
}


.about-hosur-icon {

    width:51px;
    height:51px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        var(--about-bronze-soft);

    color:
        var(--about-bronze);
}


.about-hosur-panel small {

    font-size:7px;

    font-weight:800;

    color:var(--about-teal);
}


.about-hosur-panel h2 {

    margin:4px 0 0;

    font-family:var(--about-heading);

    font-size:22px;

    color:var(--about-dark);
}


.about-hosur-panel p {

    margin:5px 0 0;

    font-size:9px;

    line-height:1.55;

    color:var(--about-muted);
}


.about-hosur-panel > a {

    min-height:46px;

    padding:0 15px;

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:8px;

    background:var(--about-teal);

    color:#fff !important;

    font-size:10px;

    font-weight:700;
}


/* ============================================================
   FINAL
   ============================================================ */

.about-final {

    position:relative;

    padding:64px 0;

    overflow:hidden;

    background:
        var(--about-dark);

    color:#fff;
}


.about-final-orbit {

    position:absolute;

    width:420px;
    height:420px;

    right:-190px;
    top:-220px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius:50%;
}


.about-final-layout {

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;
}


.about-final-layout
> div:first-child > span {

    font-size:8px;

    font-weight:800;

    letter-spacing:.9px;

    color:#A5D3CE;
}


.about-final h2 {

    margin:6px 0 0;

    font-family:var(--about-heading);

    font-size:
        clamp(29px,3.4vw,43px);
}


.about-final p {

    margin:8px 0 0;

    font-size:10px;

    color:#C3D1D4;
}


.about-final-actions {

    display:flex;
    gap:9px;
}


.about-final-primary,
.about-final-call {

    min-height:51px;

    padding:0 16px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    border-radius:8px;

    font-size:10px;

    font-weight:700;
}


.about-final-primary {

    background:var(--about-teal);

    color:#fff !important;
}


.about-final-call {

    border:
        1px solid rgba(255,255,255,.2);

    color:#fff !important;
}


/* ============================================================
   MOBILE BAR
   ============================================================ */

.about-mobile-bar {
    display:none;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1000px) {

    .about-purpose-grid {

        grid-template-columns:
            repeat(3,1fr);
    }


    .about-clinical-grid {

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


    .about-why-grid {

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

}


@media(max-width:900px) {

    .about-hero-layout,
    .about-intro-layout,
    .about-values-layout,
    .about-care-layout {

        grid-template-columns:1fr;

        gap:48px;
    }


    .about-hero-visual {

        max-width:680px;
    }


    .about-floating-card {
        left:20px;
    }


    .about-story-layout {

        grid-template-columns:1fr;
    }


    .about-story-side {

        grid-template-columns:1fr 1fr;

        grid-template-rows:auto;
    }


    .about-leadership-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .about-leadership-statement {

        grid-column:span 2;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:600px) {

    #arhaAboutPage {

        padding-bottom:60px;
    }


    .about-container {

        width:
            calc(100% - 30px);
    }


    .about-mobile-bar {

        position:fixed;

        left:0;
        right:0;
        bottom:0;

        z-index:8500;

        height:60px;

        display:grid;

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

        background:#fff;

        border-top:
            1px solid var(--about-border);

        box-shadow:
            0 -7px 25px rgba(0,0,0,.1);
    }


    .about-mobile-bar a {

        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:4px;

        color:
            var(--about-dark) !important;

        font-size:8px;

        font-weight:700;
    }


    .about-mobile-bar
    .about-mobile-primary {

        background:
            var(--about-teal);

        color:#fff !important;
    }


    /* HERO */

    .about-hero {

        padding:50px 0 68px;
    }


    .about-hero h1 {

        font-size:
            clamp(39px,11vw,49px);

        letter-spacing:-1.5px;
    }


    .about-hero-description {
        font-size:12.5px;
    }


    .about-hero-actions {
        flex-direction:column;
    }


    .about-primary,
    .about-secondary {
        width:100%;
    }


    .about-hero-photo {

        height:390px;

        border-radius:
            60px 13px 60px 13px;
    }


    .about-floating-card {

        position:relative;

        left:auto;
        bottom:auto;

        margin:
            -25px 13px 0;
    }


    /* SECTIONS */

    .about-intro,
    .about-story,
    .about-purpose,
    .about-values,
    .about-leadership,
    .about-clinical,
    .about-care,
    .about-why {

        padding:74px 0;
    }


    .about-intro-title h2,
    .about-heading h2,
    .about-values-heading h2,
    .about-care-copy h2 {

        font-size:33px;
    }


    .about-intro-copy
    .about-intro-lead {

        font-size:17px;
    }


    /* STORY */

    .about-story-main {

        height:380px;

        border-radius:
            13px 55px 13px 13px;
    }


    .about-story-side {

        grid-template-columns:1fr;
    }


    .about-story-side figure {

        height:300px;
    }


    /* PURPOSE */

    .about-purpose-grid {

        grid-template-columns:1fr;
    }


    .about-purpose-card {

        min-height:295px;
    }


    /* VALUES */

    .about-values-grid {

        grid-template-columns:1fr;
    }


    /* LEADERSHIP */

    .about-leadership-grid {

        grid-template-columns:1fr;
    }


    .about-leadership-statement {

        grid-column:auto;
    }


    .about-leader-photo {

        height:410px;
    }


    .about-leadership-statement {

        min-height:300px;
    }


    /* CLINICAL */

    .about-clinical-grid {

        grid-template-columns:1fr;
    }


    .about-clinical-grid > a {

        min-height:175px;
    }


    /* CARE */

    .about-care-photo {

        height:370px;

        border-radius:
            55px 13px 55px 13px;
    }


    /* WHY */

    .about-why-grid {

        grid-template-columns:1fr;
    }


    .about-why-grid article {

        min-height:150px;
    }


    /* HOSUR */

    .about-hosur-panel {

        grid-template-columns:
            45px 1fr;

        padding:20px;
    }


    .about-hosur-panel > a {

        grid-column:span 2;

        justify-content:center;
    }


    /* FINAL */

    .about-final-layout {

        align-items:flex-start;

        flex-direction:column;

        gap:25px;
    }


    .about-final-actions {

        width:100%;

        flex-direction:column;
    }


    .about-final-primary,
    .about-final-call {

        width:100%;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    #arhaAboutPage *,
    #arhaAboutPage *::before,
    #arhaAboutPage *::after {

        animation:none !important;
        transition:none !important;
    }


    #arhaAboutPage
    [data-about-reveal] {

        opacity:1 !important;
        transform:none !important;
    }

}