/* ============================================================
   ARHA SUPER SPECIALITY HOSPITALS
   CONTACT PAGE

   Pearl White + Deep Slate + ARHA Teal + Emergency Red
   ============================================================ */


#arhaContactPage {

    --ct-white:#FFFFFF;
    --ct-pearl:#FAFBF9;
    --ct-soft:#F1F6F5;
    --ct-teal-soft:#E6F1EF;

    --ct-dark:#173945;
    --ct-slate:#425C64;
    --ct-muted:#74868C;

    --ct-teal:#287D80;
    --ct-teal-dark:#1D6468;

    --ct-gold:#B99559;
    --ct-gold-soft:#F5EDDD;

    --ct-red:#B9434A;
    --ct-red-dark:#96343B;
    --ct-red-soft:#F9E8E9;

    --ct-green:#397054;
    --ct-green-soft:#EAF4ED;

    --ct-border:#DFE8E6;

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

    width:100%;
    overflow:hidden;

    background:
        var(--ct-pearl);

    color:
        var(--ct-slate);

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


#arhaContactPage *,
#arhaContactPage *::before,
#arhaContactPage *::after {

    box-sizing:border-box;
}


#arhaContactPage a {

    text-decoration:none;
}


#arhaContactPage button,
#arhaContactPage input,
#arhaContactPage select,
#arhaContactPage textarea {

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


.arha-contact-container {

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

    margin-inline:auto;
}



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

#arhaContactPage [data-contact-reveal] {

    opacity:0;

    transform:
        translateY(28px);

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


#arhaContactPage
[data-contact-reveal].contact-visible {

    opacity:1;

    transform:none;
}



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

.arha-contact-hero {

    position:relative;

    padding:
        82px 0 105px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 83% 18%,
            rgba(40,125,128,.13),
            transparent 29%
        ),

        linear-gradient(
            120deg,
            #FFFFFF,
            #F1F7F6
        );
}


.arha-contact-grid-bg {

    position:absolute;

    inset:0;

    opacity:.17;

    background-image:

        linear-gradient(
            rgba(40,125,128,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(40,125,128,.06) 1px,
            transparent 1px
        );

    background-size:
        62px 62px;

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


.arha-contact-orbit {

    position:absolute;

    border:
        1px solid rgba(40,125,128,.12);

    border-radius:50%;

    pointer-events:none;

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


.arha-contact-orbit-one {

    width:550px;
    height:550px;

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


.arha-contact-orbit-two {

    width:220px;
    height:220px;

    left:-110px;
    bottom:-90px;

    border-color:
        rgba(185,149,89,.14);

    animation-delay:2s;
}


@keyframes contactOrbit {

    to {

        transform:
            translate(30px,35px)
            scale(1.07);

    }

}



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

.arha-contact-hero-layout {

    position:relative;

    z-index:2;

    display:grid;

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

    align-items:center;

    gap:95px;
}


.arha-contact-breadcrumb {

    margin-bottom:28px;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:9px;

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


.arha-contact-breadcrumb a {

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


.arha-contact-breadcrumb i {

    font-size:6px;
}


.arha-contact-kicker,
.arha-contact-section-label {

    display:block;

    margin-bottom:10px;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.25px;

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


.arha-contact-hero h1 {

    max-width:720px;

    margin:0;

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

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

    font-weight:800;

    line-height:.97;

    letter-spacing:-2.5px;

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


.arha-contact-hero h1 strong {

    display:block;

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


.arha-contact-hero-copy > p {

    max-width:650px;

    margin:
        25px 0 0;

    font-size:14.5px;

    line-height:1.8;

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



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

.arha-contact-hero-actions {

    margin-top:30px;

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}


.arha-contact-primary {

    min-height:56px;

    padding:
        0 18px;

    display:inline-flex;

    align-items:center;

    gap:9px;

    border-radius:9px;

    background:
        var(--ct-teal);

    color:#fff !important;

    box-shadow:
        0 13px 28px
        rgba(40,125,128,.17);

    font-size:11px;

    font-weight:700;

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


.arha-contact-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 36px
        rgba(40,125,128,.24);
}


.arha-contact-emergency-button {

    min-height:56px;

    padding:
        7px 17px;

    display:inline-flex;

    align-items:center;

    gap:10px;

    border-radius:9px;

    background:
        var(--ct-red);

    color:#fff !important;

    box-shadow:
        0 12px 27px
        rgba(185,67,74,.15);
}


.arha-contact-emergency-button > span {

    display:flex;

    flex-direction:column;

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

    font-size:14px;

    font-weight:800;
}


.arha-contact-emergency-button small {

    font-family:
        var(--ct-body);

    font-size:7px;

    letter-spacing:.7px;
}



/* ============================================================
   HERO CONTACT CARD
   ============================================================ */

.arha-contact-hero-card {

    padding:35px;

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

    border-radius:
        75px 16px 16px 16px;

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

    box-shadow:
        0 25px 55px
        rgba(30,66,72,.10);

    backdrop-filter:
        blur(10px);
}


.arha-contact-card-label {

    font-size:7px;

    font-weight:800;

    letter-spacing:.9px;

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


.arha-contact-hero-card h2 {

    margin:
        7px 0 21px;

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

    font-size:30px;

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


.arha-contact-hero-option {

    min-height:74px;

    padding:
        12px 0;

    display:grid;

    grid-template-columns:
        40px minmax(0,1fr) auto;

    align-items:center;

    gap:12px;

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

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

    transition:
        transform .22s ease;
}


.arha-contact-hero-option:hover {

    transform:
        translateX(4px);
}


.arha-contact-hero-option > span {

    width:39px;
    height:39px;

    display:flex;

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

    border-radius:9px;

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

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


.arha-contact-hero-option div {

    min-width:0;

    display:flex;

    flex-direction:column;
}


.arha-contact-hero-option small {

    font-size:7px;

    font-weight:800;

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


.arha-contact-hero-option strong {

    margin-top:3px;

    overflow-wrap:anywhere;

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

    font-size:11px;
}



/* ============================================================
   QUICK CONTACT
   ============================================================ */

.arha-contact-options {

    padding:
        90px 0;

    background:
        var(--ct-pearl);
}


.arha-contact-options-grid {

    display:grid;

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

    gap:11px;
}


.arha-contact-option {

    min-height:245px;

    padding:24px;

    display:flex;

    flex-direction:column;

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

    border-radius:12px;

    background:#fff;

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


.arha-contact-option:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 17px 37px
        rgba(30,66,72,.07);
}


.arha-contact-option > span {

    width:44px;
    height:44px;

    margin-bottom:23px;

    display:flex;

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

    border-radius:10px;

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

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


.arha-contact-emergency-card > span {

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

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


.arha-contact-option > small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

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


.arha-contact-emergency-card > small {

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


.arha-contact-option h3 {

    margin:
        5px 0 0;

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

    font-size:18px;

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


.arha-contact-option p {

    margin:
        9px 0 18px;

    font-size:10px;

    line-height:1.65;

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


.arha-contact-option > a {

    margin-top:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:8px;

    overflow-wrap:anywhere;

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

    font-size:9px;

    font-weight:700;
}


.arha-contact-emergency-card > a {

    color:
        var(--ct-red) !important;
}



/* ============================================================
   APPOINTMENT SECTION
   ============================================================ */

.arha-appointment {

    padding:
        110px 0;

    scroll-margin-top:115px;

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


.arha-appointment-layout {

    display:grid;

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

    align-items:start;

    gap:85px;
}


.arha-appointment-info {

    position:sticky;

    top:125px;
}


.arha-appointment-info h2,
.arha-contact-heading h2 {

    margin:0;

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

    font-size:
        clamp(36px,4vw,51px);

    line-height:1.05;

    letter-spacing:-1.2px;

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


.arha-appointment-info h2 em,
.arha-contact-heading h2 em {

    font-style:normal;

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


.arha-appointment-info > p,
.arha-contact-heading-copy {

    max-width:680px;

    margin:
        17px 0 0;

    font-size:12.5px;

    line-height:1.75;

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



/* ============================================================
   APPOINTMENT PROCESS
   ============================================================ */

.arha-appointment-process {

    margin-top:28px;

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


.arha-appointment-process > div {

    padding:
        15px 0;

    display:grid;

    grid-template-columns:
        37px 1fr;

    gap:12px;

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


.arha-appointment-process > div > span {

    width:28px;
    height:28px;

    display:flex;

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

    border-radius:50%;

    background:
        var(--ct-teal);

    color:#fff;

    font-size:8px;

    font-weight:800;
}


.arha-appointment-process strong {

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

    font-size:12px;

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


.arha-appointment-process p {

    margin:
        3px 0 0;

    font-size:9px;

    line-height:1.5;

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


.arha-appointment-note {

    margin-top:22px;

    padding:15px;

    display:flex;

    align-items:flex-start;

    gap:9px;

    border-radius:9px;

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

    color:
        var(--ct-red-dark);
}


.arha-appointment-note > i {

    margin-top:2px;
}


.arha-appointment-note p {

    margin:0;

    font-size:9px;

    line-height:1.55;
}


.arha-appointment-note a {

    color:
        var(--ct-red-dark) !important;

    font-weight:800;
}



/* ============================================================
   FORM CARD
   ============================================================ */

.arha-appointment-form-card {

    padding:38px;

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

    border-radius:15px;

    background:#fff;

    box-shadow:
        0 18px 45px
        rgba(30,66,72,.07);
}


.arha-form-kicker {

    font-size:7px;

    font-weight:800;

    letter-spacing:.9px;

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


.arha-appointment-form-card > h3 {

    margin:
        5px 0 26px;

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

    font-size:27px;

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


.arha-form-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:17px;
}


.arha-form-group {

    min-width:0;
}


.arha-form-group label {

    margin-bottom:7px;

    display:flex;

    align-items:center;

    gap:4px;

    font-size:9px;

    font-weight:700;

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


.arha-form-group label > span {

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


.arha-form-group label small {

    margin-left:auto;

    font-size:7px;

    font-weight:500;

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


.arha-input-wrap {

    position:relative;

    min-width:0;
}


.arha-input-wrap > i {

    position:absolute;

    z-index:2;

    left:14px;

    top:50%;

    transform:
        translateY(-50%);

    pointer-events:none;

    color:
        var(--ct-teal);

    font-size:12px;
}


.arha-input-wrap input,
.arha-input-wrap select,
.arha-form-group textarea {

    width:100%;

    outline:0;

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

    border-radius:8px;

    background:
        var(--ct-pearl);

    color:
        var(--ct-dark);

    font-family:
        var(--ct-body);

    font-size:10px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.arha-input-wrap input,
.arha-input-wrap select {

    height:52px;

    padding:
        0 13px 0 40px;
}


.arha-input-wrap select {

    appearance:auto;
}


.arha-form-group textarea {

    min-height:125px;

    padding:13px;

    resize:vertical;
}


.arha-input-wrap input:focus,
.arha-input-wrap select:focus,
.arha-form-group textarea:focus {

    border-color:
        rgba(40,125,128,.55);

    background:#fff;

    box-shadow:
        0 0 0 4px
        rgba(40,125,128,.07);
}


.arha-form-full {

    position:relative;

    margin-top:17px;
}


.arha-message-count {

    position:absolute;

    right:10px;
    bottom:9px;

    padding:2px 5px;

    border-radius:4px;

    background:
        rgba(250,251,249,.9);

    font-size:7px;

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


.arha-form-submit {

    width:100%;

    min-height:54px;

    margin-top:18px;

    padding:
        0 17px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border:0;

    border-radius:9px;

    background:
        var(--ct-teal);

    color:#fff;

    font-size:10px;

    font-weight:700;

    cursor:pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.arha-form-submit:hover {

    background:
        var(--ct-teal-dark);

    transform:
        translateY(-2px);
}


.arha-form-submit > span {

    display:flex;

    align-items:center;

    gap:8px;
}


.arha-form-submit:disabled {

    opacity:.7;

    cursor:wait;

    transform:none;
}


.arha-form-disclaimer {

    margin:
        10px 0 0;

    text-align:center;

    font-size:8px;

    line-height:1.5;

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


.arha-contact-honeypot {

    position:absolute !important;

    left:-10000px !important;

    top:auto !important;

    width:1px !important;

    height:1px !important;

    overflow:hidden !important;
}



/* ============================================================
   FORM STATUS
   ============================================================ */

.arha-form-success,
.arha-form-errors {

    margin-bottom:21px;

    padding:14px;

    display:flex;

    align-items:flex-start;

    gap:11px;

    border-radius:9px;
}


.arha-form-success {

    background:
        var(--ct-green-soft);

    color:
        var(--ct-green);
}


.arha-form-errors {

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

    color:
        var(--ct-red-dark);
}


.arha-form-success > i,
.arha-form-errors > i {

    margin-top:2px;
}


.arha-form-success strong,
.arha-form-errors strong {

    font-size:10px;
}


.arha-form-success p {

    margin:
        3px 0 0;

    font-size:9px;

    line-height:1.5;
}


.arha-form-errors ul {

    margin:
        5px 0 0;

    padding-left:16px;

    font-size:8.5px;

    line-height:1.6;
}



/* ============================================================
   LOCATION
   ============================================================ */

.arha-contact-location {

    padding:
        105px 0;

    scroll-margin-top:115px;

    background:#fff;
}


.arha-contact-heading {

    max-width:800px;

    margin-bottom:38px;
}


.arha-location-layout {

    display:grid;

    grid-template-columns:
        1.35fr .65fr;

    min-height:545px;

    overflow:hidden;

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

    border-radius:15px;

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



/* ============================================================
   MAP
   ============================================================ */

.arha-location-map {

    position:relative;

    min-height:545px;

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


.arha-location-map iframe {

    width:100%;

    height:100%;

    min-height:545px;

    display:block;

    border:0;
}


.arha-map-overlay-button {

    position:absolute;

    z-index:4;

    left:18px;

    bottom:18px;

    min-height:47px;

    padding:
        0 15px;

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:8px;

    background:
        var(--ct-teal);

    color:#fff !important;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.19);

    font-size:9px;

    font-weight:700;
}



/* ============================================================
   LOCATION INFO
   ============================================================ */

.arha-location-info {

    padding:45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:
        var(--ct-dark);

    color:#fff;
}


.arha-location-icon {

    width:52px;
    height:52px;

    margin-bottom:24px;

    display:flex;

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

    border-radius:50%;

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

    color:
        #D1B577;
}


.arha-location-info > small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.9px;

    color:
        #9FD1CE;
}


.arha-location-info h3 {

    margin:
        6px 0 0;

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

    font-size:31px;
}


.arha-full-address {

    margin:
        15px 0 0;

    font-style:normal;

    font-size:11px;

    line-height:1.85;

    color:
        #C6D4D7;
}


.arha-full-address strong {

    color:#fff;

    font-weight:700;
}


.arha-location-contact {

    margin-top:23px;

    border-top:
        1px solid rgba(255,255,255,.12);
}


.arha-location-contact > a {

    padding:
        14px 0;

    display:flex;

    align-items:center;

    gap:11px;

    border-bottom:
        1px solid rgba(255,255,255,.12);

    color:#fff !important;
}


.arha-location-contact > a > i {

    width:29px;

    color:
        #9FD1CE;
}


.arha-location-contact span {

    min-width:0;

    display:flex;

    flex-direction:column;

    overflow-wrap:anywhere;

    font-size:10px;
}


.arha-location-contact small {

    margin-bottom:2px;

    font-size:6.5px;

    color:
        #9BACB0;
}


.arha-location-button {

    min-height:48px;

    margin-top:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:8px;

    background:
        var(--ct-teal);

    color:#fff !important;

    font-size:10px;

    font-weight:700;

    transition:
        background .22s ease,
        transform .22s ease;
}


.arha-location-button:hover {

    background:
        var(--ct-teal-dark);

    transform:
        translateY(-2px);
}



/* ============================================================
   CUG CONTACT DIRECTORY
   ============================================================ */

.arha-contact-directory {

    padding:
        105px 0;

    background:
        var(--ct-pearl);
}


.arha-cug-grid {

    display:grid;

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

    gap:11px;
}


.arha-cug-card {

    position:relative;

    min-height:135px;

    padding:18px;

    display:grid;

    grid-template-columns:
        43px minmax(0,1fr) 35px;

    align-items:center;

    gap:12px;

    overflow:hidden;

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

    border-radius:11px;

    background:#fff;

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

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


.arha-cug-card::before {

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:
        var(--ct-teal);

    transform:
        scaleY(0);

    transform-origin:center;

    transition:
        transform .25s ease;
}


.arha-cug-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(40,125,128,.25);

    box-shadow:
        0 14px 32px
        rgba(30,66,72,.08);
}


.arha-cug-card:hover::before {

    transform:
        scaleY(1);
}


.arha-cug-icon {

    width:43px;
    height:43px;

    display:flex;

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

    border-radius:10px;

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

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


.arha-cug-card > div {

    min-width:0;

    display:flex;

    flex-direction:column;
}


.arha-cug-card small {

    font-size:6.5px;

    font-weight:800;

    letter-spacing:.8px;

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


.arha-cug-card strong {

    margin-top:3px;

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

    font-size:13px;

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


.arha-cug-card p {

    margin:
        4px 0 0;

    font-size:8px;

    line-height:1.45;

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


.arha-cug-number {

    margin-top:5px;

    font-size:11px;

    font-weight:800;

    color:
        var(--ct-teal-dark);
}


.arha-cug-call {

    width:35px;
    height:35px;

    display:flex;

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

    border-radius:50%;

    background:
        var(--ct-soft);

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



/* No CUG yet fallback */

.arha-cug-main-contact {

    padding:
        25px 27px;

    display:grid;

    grid-template-columns:
        50px minmax(0,1fr) auto;

    align-items:center;

    gap:18px;

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

    border-radius:12px;

    background:#fff;
}


.arha-cug-main-contact > span {

    width:50px;
    height:50px;

    display:flex;

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

    border-radius:10px;

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

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


.arha-cug-main-contact small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

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


.arha-cug-main-contact h3 {

    margin:
        3px 0 0;

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

    font-size:18px;

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


.arha-cug-main-contact p {

    margin:
        4px 0 0;

    max-width:650px;

    font-size:9px;

    line-height:1.5;

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


.arha-cug-main-contact > a {

    min-height:47px;

    padding:
        0 14px;

    display:flex;

    align-items:center;

    gap:8px;

    border-radius:8px;

    background:
        var(--ct-teal);

    color:#fff !important;

    font-size:10px;

    font-weight:700;
}



/* Emergency note */

.arha-cug-emergency-note {

    margin-top:18px;

    padding:
        14px 17px;

    display:flex;

    align-items:flex-start;

    gap:10px;

    border:
        1px solid #F0DADB;

    border-radius:9px;

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

    color:
        var(--ct-red-dark);
}


.arha-cug-emergency-note > i {

    margin-top:2px;
}


.arha-cug-emergency-note p {

    margin:0;

    font-size:9px;

    line-height:1.6;
}


.arha-cug-emergency-note a {

    color:
        var(--ct-red-dark) !important;

    font-weight:800;
}



/* ============================================================
   EMERGENCY CTA
   ============================================================ */

.arha-contact-emergency {

    padding:
        70px 0;

    background:#fff;
}


.arha-contact-emergency-panel {

    padding:
        27px 29px;

    display:grid;

    grid-template-columns:
        55px minmax(0,1fr) auto;

    align-items:center;

    gap:22px;

    border:
        1px solid #F0D9DA;

    border-radius:13px;

    background:
        linear-gradient(
            115deg,
            #FFFFFF,
            #FFF9F9
        );
}


.arha-contact-emergency-icon {

    width:53px;
    height:53px;

    display:flex;

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

    border-radius:11px;

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

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


.arha-contact-emergency-panel
> div > small {

    font-size:7px;

    font-weight:800;

    letter-spacing:.8px;

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


.arha-contact-emergency-panel h2 {

    margin:
        4px 0 0;

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

    font-size:22px;

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


.arha-contact-emergency-panel p {

    max-width:720px;

    margin:
        5px 0 0;

    font-size:9px;

    line-height:1.5;

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


.arha-contact-emergency-panel > a {

    min-height:52px;

    padding:
        7px 15px;

    display:flex;

    align-items:center;

    gap:9px;

    border-radius:8px;

    background:
        var(--ct-red);

    color:#fff !important;
}


.arha-contact-emergency-panel > a > span {

    display:flex;

    flex-direction:column;

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

    font-size:13px;

    font-weight:800;
}


.arha-contact-emergency-panel > a small {

    font-family:
        var(--ct-body);

    font-size:6.5px;
}



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

.arha-contact-final {

    position:relative;

    padding:
        64px 0;

    overflow:hidden;

    background:
        var(--ct-dark);

    color:#fff;
}


.arha-contact-final-orbit {

    position:absolute;

    width:420px;
    height:420px;

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

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

    border-radius:50%;
}


.arha-contact-final-layout {

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;
}


.arha-contact-final-layout
> div:first-child > span {

    font-size:8px;

    font-weight:800;

    letter-spacing:.9px;

    color:
        #9DD1CE;
}


.arha-contact-final h2 {

    margin:
        6px 0 0;

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

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


.arha-contact-final p {

    margin:
        8px 0 0;

    font-size:10px;

    color:
        #C2D1D4;
}


.arha-contact-final-actions {

    display:flex;

    gap:9px;
}


.arha-contact-final-primary,
.arha-contact-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;
}


.arha-contact-final-primary {

    background:
        var(--ct-teal);

    color:#fff !important;
}


.arha-contact-final-call {

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

    color:#fff !important;
}



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

.arha-contact-mobile-bar {

    display:none;
}



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

@media(max-width:1050px) {

    .arha-contact-hero-layout {

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

        gap:50px;
    }


    .arha-contact-options-grid {

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


    .arha-cug-grid {

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

}



@media(max-width:880px) {

    .arha-contact-hero-layout,
    .arha-appointment-layout,
    .arha-location-layout {

        grid-template-columns:1fr;
    }


    .arha-appointment-info {

        position:relative;

        top:auto;
    }


    .arha-contact-hero-card {

        max-width:650px;
    }


    .arha-location-info {

        min-height:420px;
    }


    .arha-cug-main-contact {

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


    .arha-cug-main-contact > a {

        grid-column:
            span 2;

        justify-content:center;
    }

}



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

@media(max-width:600px) {

    #arhaContactPage {

        padding-bottom:60px;
    }


    .arha-contact-container {

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


    /* --------------------------------------------------------
       Mobile action bar
       -------------------------------------------------------- */

    .arha-contact-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(--ct-border);

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


    .arha-contact-mobile-bar a {

        min-width:0;

        display:flex;

        flex-direction:column;

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

        gap:4px;

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

        font-size:8px;

        font-weight:700;
    }


    .arha-contact-mobile-bar
    .arha-contact-mobile-emergency {

        background:
            var(--ct-red);

        color:#fff !important;
    }


    /* --------------------------------------------------------
       Hero
       -------------------------------------------------------- */

    .arha-contact-hero {

        padding:
            50px 0 70px;
    }


    .arha-contact-hero h1 {

        font-size:
            clamp(40px,11vw,50px);

        letter-spacing:-1.5px;
    }


    .arha-contact-hero-copy > p {

        font-size:12.5px;
    }


    .arha-contact-hero-actions {

        flex-direction:column;
    }


    .arha-contact-primary,
    .arha-contact-emergency-button {

        width:100%;
    }


    .arha-contact-hero-card {

        padding:
            29px 21px;

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


    /* --------------------------------------------------------
       Quick contacts
       -------------------------------------------------------- */

    .arha-contact-options {

        padding:
            70px 0;
    }


    .arha-contact-options-grid {

        grid-template-columns:1fr;
    }


    .arha-contact-option {

        min-height:200px;
    }


    /* --------------------------------------------------------
       Appointment
       -------------------------------------------------------- */

    .arha-appointment,
    .arha-contact-location,
    .arha-contact-directory {

        padding:
            75px 0;
    }


    .arha-appointment-info h2,
    .arha-contact-heading h2 {

        font-size:33px;
    }


    .arha-appointment-form-card {

        padding:
            28px 19px;
    }


    .arha-form-grid {

        grid-template-columns:1fr;
    }


    /*
     * Prevent iOS form overflow
     */

    .arha-input-wrap input,
    .arha-input-wrap select,
    .arha-form-group textarea {

        font-size:16px;
    }


    /* --------------------------------------------------------
       Map
       -------------------------------------------------------- */

    .arha-location-layout {

        border-radius:12px;
    }


    .arha-location-map,
    .arha-location-map iframe {

        min-height:370px;
    }


    .arha-map-overlay-button {

        left:12px;
        bottom:12px;

        min-height:44px;
    }


    .arha-location-info {

        min-height:auto;

        padding:
            32px 22px;
    }


    /* --------------------------------------------------------
       CUG
       -------------------------------------------------------- */

    .arha-cug-grid {

        grid-template-columns:1fr;
    }


    .arha-cug-card {

        min-height:125px;
    }


    .arha-cug-main-contact {

        padding:20px;

        grid-template-columns:
            44px 1fr;

        gap:13px;
    }


    .arha-cug-main-contact > span {

        width:44px;
        height:44px;
    }


    .arha-cug-main-contact > a {

        grid-column:
            span 2;

        width:100%;

        justify-content:center;
    }


    /* --------------------------------------------------------
       Emergency CTA
       -------------------------------------------------------- */

    .arha-contact-emergency-panel {

        grid-template-columns:
            45px 1fr;

        padding:20px;
    }


    .arha-contact-emergency-icon {

        width:45px;
        height:45px;
    }


    .arha-contact-emergency-panel > a {

        grid-column:
            span 2;

        width:100%;

        justify-content:center;

        margin-top:5px;
    }


    /* --------------------------------------------------------
       Final
       -------------------------------------------------------- */

    .arha-contact-final-layout {

        align-items:flex-start;

        flex-direction:column;

        gap:25px;
    }


    .arha-contact-final-actions {

        width:100%;

        flex-direction:column;
    }


    .arha-contact-final-primary,
    .arha-contact-final-call {

        width:100%;
    }

}



/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media(max-width:380px) {

    .arha-contact-hero-card {

        padding:
            27px 17px;
    }


    .arha-contact-hero-option {

        grid-template-columns:
            37px minmax(0,1fr) auto;
    }


    .arha-location-info {

        padding:
            28px 18px;
    }

}



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

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

    #arhaContactPage *,
    #arhaContactPage *::before,
    #arhaContactPage *::after {

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;
    }


    #arhaContactPage
    [data-contact-reveal] {

        opacity:1 !important;

        transform:none !important;
    }

}