/* =========================================================
   CAIRN SERVICES PAGE
   CLEAN BASE STYLESHEET
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

    --bg: #121110;
    --bg-2: #171613;

    --section-light: #171613;
    --section-dark: #151411;

    --text: #f2f0ea;
    --text-soft: #b7b2a6;
    --text-muted: #7d786e;

    --border: #34322c;

    --sage: #68766b;
    --orange: #b46b48;
    --sand: #cdbb91;

    --display-font:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --body-font:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--bg);
    color: var(--text);
    scroll-behavior: smooth;
}

body {
    min-height: 100%;
    overflow-x: hidden;

    background: var(--bg);
    color: var(--text);

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

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.services-header {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 201;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        clamp(1rem, 2vw, 1.8rem)
        clamp(1.25rem, 4vw, 4rem);

    pointer-events: none;
}

.services-logo {

    display: flex;
    align-items: center;

    width: fit-content;

    pointer-events: auto;
}

.services-logo img {

    display: block;

    width: 120px;
    height: auto;

    max-height: 42px;

    object-fit: contain;
}


/* =========================================================
   MENU BUTTON
   ========================================================= */

.menu-toggle {

    position: relative;

    width: 36px;
    height: 36px;

    display: flex;
    flex-direction: column;

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

    gap: 5px;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
    pointer-events: auto;

    z-index: 202;

    appearance: none;
}

.menu-bar {

    display: block;

    width: 36px;
    height: 2px;

    background: var(--text);

    transform-origin: center;

    transition:
        transform .55s cubic-bezier(.22,.75,.2,1),
        width .55s cubic-bezier(.22,.75,.2,1),
        opacity .35s ease;
}

.menu-bar.bar3 {
    width: 24px;
}

.menu-toggle.menu-open .bar1 {

    transform:
        translateY(7px)
        rotate(45deg);
}

.menu-toggle.menu-open .bar2 {
    opacity: 0;
}

.menu-toggle.menu-open .bar3 {

    width: 36px;

    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   FULLSCREEN MENU
   ========================================================= */

#canvas-nav {

    position: fixed;
    inset: 0;

    z-index: 200;

    width: 100%;
    height: 100%;

    padding:
        10vw
        15vw
        5vw;

    background: var(--bg-2);

    overflow: hidden;

    clip-path: inset(0 0 100% 0);

    visibility: hidden;
    pointer-events: none;

    transition:
        clip-path 1s cubic-bezier(.4,.1,0,1),
        visibility 0s linear 1.3s;
}

#canvas-nav.canvas-open {

    clip-path: inset(0 0 0 0);

    visibility: visible;
    pointer-events: auto;

    transition:
        clip-path 1s cubic-bezier(.4,.1,0,1);
}

#canvas-nav .canvas-inner {

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 70%;
    height: 100%;
}


/* =========================================================
   MENU LINKS
   ========================================================= */

#canvas-nav nav ul {

    list-style: none;

    margin: 0;
    padding: 0;
}

#canvas-nav nav li {

    opacity: 0;

    transform:
        translateY(35px);
}

#canvas-nav.canvas-open nav li {

    animation:
        service-menu-in
        .5s
        ease
        forwards;
}

#canvas-nav.canvas-open nav li:nth-child(1) {
    animation-delay: .7s;
}

#canvas-nav.canvas-open nav li:nth-child(2) {
    animation-delay: .75s;
}

#canvas-nav.canvas-open nav li:nth-child(3) {
    animation-delay: .8s;
}

#canvas-nav.canvas-open nav li:nth-child(4) {
    animation-delay: .85s;
}

@keyframes service-menu-in {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#canvas-nav nav li a {

    display: block;

    color: var(--text);

    font-size: 4vw;
    font-weight: 500;

    line-height: 1;

    letter-spacing: -.045em;

    padding:
        1.2vw
        0
        .5vw;

    transition:
        color .35s ease;
}

#canvas-nav nav li a:hover {
    color: var(--text-soft);
}


/* =========================================================
   MENU FOOTER
   ========================================================= */

#canvas-nav .canvas-footer {

    margin-top: 3vw;

    opacity: 0;
}

#canvas-nav.canvas-open .canvas-footer {

    animation:
        service-footer-in
        .5s
        ease
        .75s
        forwards;
}

@keyframes service-footer-in {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#canvas-nav .text-link {

    display: inline-block;

    color: var(--text-soft);

    font-size: 1vw;
    font-weight: 500;

    margin-right: 1vw;

    padding:
        .75vw
        0
        .7vw;

    transition:
        color .3s ease;
}

#canvas-nav .text-link:hover {
    color: var(--text);
}


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

.services-hero {

    position: relative;

    padding:
        11rem
        clamp(1.25rem, 4vw, 5rem)
        9rem;

    background: var(--bg);

    overflow: hidden;
}

.services-hero-inner {

    width: 100%;
    max-width: 1680px;

    margin: 0 auto;
}

.services-hero-copy {

    width: 100%;
    max-width: 1500px;

    margin: 0 auto;
}

.eyebrow {

    margin-bottom: 1.4rem;

    color: var(--text-muted);

    font-size: .68rem;
    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.services-hero h1 {

    max-width: 10ch;

    font-family: var(--display-font);

    font-size:
        clamp(
            4.5rem,
            8vw,
            9rem
        );

    font-weight: 600;

    line-height: .84;

    letter-spacing: -.065em;
}


/* =========================================================
   HERO SUPPORTING CONTENT
   ========================================================= */

.services-hero-bottom {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 31%);

    gap: 6rem;

    align-items: start;

    margin-top: 5rem;
}

.services-hero-description {

    max-width: 45rem;

    color: var(--text-soft);

    font-size:
        clamp(
            1rem,
            1.05vw,
            1.1rem
        );

    line-height: 1.6;

    letter-spacing: -.02em;
}

.services-hero-note {

    width: 100%;
    max-width: 30rem;

    color: var(--text-muted);

    font-size: .78rem;

    line-height: 1.65;

    letter-spacing: -.01em;
}


/* =========================================================
   SERVICE CATALOG
   ========================================================= */

.service-catalog {

    position: relative;

    padding:
        0
        clamp(1.25rem, 4vw, 5rem)
        11rem;

    background: var(--section-light);
}

.catalog-inner {

    width: 100%;
    max-width: 1680px;

    margin: 0 auto;
}


/* =========================================================
   SERVICE CATEGORY
   ========================================================= */

.service-category.service-category-cards {

    position: relative;

    padding:
        7rem
        0
        7.5rem;

    border-top:
        1px solid
        rgba(242,240,234,.10);
}


/* Explicit section backgrounds.
   No gradients.
   No translated section backgrounds.
*/

.service-category.service-category-cards:nth-of-type(1) {
    background: var(--section-light);
}

.service-category.service-category-cards:nth-of-type(2) {
    background: var(--section-dark);
}

.service-category.service-category-cards:nth-of-type(3) {
    background: var(--section-light);
}

.service-category.service-category-cards:nth-of-type(4) {
    background: var(--section-dark);
}


/* =========================================================
   CATEGORY HEADER
   ========================================================= */

.service-category-cards .category-header {

    display: grid;

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

    gap: 6rem;

    align-items: end;

    margin-bottom: 3.5rem;
}

.service-category-cards .category-number {

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

    width: 2.2rem;
    height: 2.2rem;

    margin-bottom: 1.5rem;

    border:
        1px solid
        rgba(242,240,234,.14);

    border-radius: 50%;

    color: var(--text-muted);

    font-size: .56rem;
    font-weight: 600;

    letter-spacing: .08em;
}

.service-category-cards .category-heading h3 {

    max-width: 8ch;

    margin: 0;

    font-family: var(--display-font);

    font-size:
        clamp(
            2.9rem,
            4.35vw,
            5rem
        );

    font-weight: 600;

    line-height: .84;

    letter-spacing: -.065em;
}

.service-category-cards .category-summary {

    padding-bottom: .2rem;
}

.service-category-cards .category-summary span {

    display: block;

    margin-bottom: 1rem;

    color: var(--text-muted);

    font-size: .52rem;
    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.service-category-cards .category-summary p {

    max-width: 28rem;

    color: var(--text-soft);

    font-size: .82rem;

    line-height: 1.65;
}


/* =========================================================
   SERVICE CARD GRID
   ========================================================= */

.service-card-grid {

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 1rem;

    align-items: stretch;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.service-card {

    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    min-height: 25rem;

    padding: 1.5rem;

    overflow: hidden;

    border:
        1px solid
        rgba(242,240,234,.105);

    border-radius: 1rem;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        );

    transition:
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        transform .35s cubic-bezier(.2,.75,.2,1);
}

.service-card::before {

    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(205,187,145,.075),
            transparent 34%
        );

    opacity: .65;
}

.service-card:hover {

    border-color:
        rgba(205,187,145,.34);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 1.5rem 4rem rgba(0,0,0,.20);

    transform:
        translateY(-4px);
}

.service-card:focus-visible {

    outline:
        2px solid
        rgba(205,187,145,.75);

    outline-offset: 4px;
}


/* =========================================================
   CARD TOP
   ========================================================= */

.service-card-top {

    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 1.5rem;
}

.service-card-index {

    color: var(--text-muted);

    font-size: .53rem;
    font-weight: 600;

    letter-spacing: .12em;
}

.service-card-badge {

    padding:
        .36rem
        .55rem;

    border:
        1px solid
        rgba(205,187,145,.28);

    border-radius: .35rem;

    background:
        rgba(205,187,145,.06);

    color:
        rgba(205,187,145,.82);

    font-size: .45rem;
    font-weight: 700;

    letter-spacing: .10em;

    text-transform: uppercase;
}


/* =========================================================
   CARD ICON
   ========================================================= */

.service-card-icon {

    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 3px;

    width: 2.75rem;
    height: 2.75rem;

    margin-top: 2rem;
    margin-bottom: 1.55rem;

    padding:
        0
        .65rem;

    border:
        1px solid
        rgba(242,240,234,.12);

    border-radius: .75rem;

    background:
        rgba(242,240,234,.025);

    transition:
        border-color .3s ease,
        background .3s ease;
}

.service-card-icon span {

    display: block;

    width: 100%;
    height: 1px;

    background:
        rgba(205,187,145,.58);

    transform-origin: left;

    transition:
        transform .35s ease;
}

.service-card-icon span:nth-child(1) {
    width: 65%;
}

.service-card-icon span:nth-child(2) {
    width: 100%;
}

.service-card-icon span:nth-child(3) {
    width: 45%;
}

.service-card:hover .service-card-icon {

    border-color:
        rgba(205,187,145,.30);

    background:
        rgba(205,187,145,.055);
}

.service-card:hover .service-card-icon span:nth-child(1) {
    transform: scaleX(1.4);
}

.service-card:hover .service-card-icon span:nth-child(3) {
    transform: scaleX(1.7);
}


/* =========================================================
   CARD BODY
   ========================================================= */

.service-card-body {

    position: relative;
    z-index: 1;
}

.service-card-body h4 {

    margin: 0 0 .75rem;

    color: var(--text);

    font-family: var(--display-font);

    font-size:
        clamp(
            1.05rem,
            1.25vw,
            1.3rem
        );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -.035em;

    transition:
        color .25s ease;
}

.service-card:hover .service-card-body h4 {
    color: #f7f3e9;
}

.service-card-body p {

    max-width: 24rem;

    margin: 0;

    color: #918d83;

    font-size: .74rem;

    line-height: 1.62;

    transition:
        color .25s ease;
}

.service-card:hover .service-card-body p {
    color: var(--text-soft);
}


/* =========================================================
   CARD BOTTOM
   ========================================================= */

.service-card-bottom {

    position: relative;
    z-index: 1;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-top: auto;

    padding-top: 2rem;
}

.service-card-price {
    display: flex;
    flex-direction: column;
}

.service-card-price > span {
    margin-bottom: .4rem;

    color: rgba(125,120,110,.72);

    font-size: .47rem;
    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.service-card-standard-price {
    display: block;

    margin-bottom: .18rem;

    color: rgba(125,120,110,.58);

    font-family: var(--display-font);

    font-size: .72rem;
    font-weight: 400;

    line-height: 1;

    text-decoration-line: line-through;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(125,120,110,.65);
}

.service-card-price strong {

    display: block;

    color: var(--text);

    font-family: var(--display-font);

    font-size:
        clamp(
            1.15rem,
            1.5vw,
            1.4rem
        );

    font-weight: 500;

    line-height: 1;

    letter-spacing: -.035em;
}

.service-card-arrow {

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

    width: 2.25rem;
    height: 2.25rem;

    border:
        1px solid
        rgba(242,240,234,.13);

    border-radius: 50%;

    color: var(--text-soft);

    font-size: 1rem;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .35s cubic-bezier(.2,.75,.2,1);
}

.service-card:hover .service-card-arrow {

    border-color:
        rgba(205,187,145,.40);

    background:
        rgba(205,187,145,.08);

    color:
        #f2f0ea;

    transform:
        translateX(3px);
}


/* =========================================================
   FEATURED SERVICE CARD
   ========================================================= */

.featured-service-card {

    border-color:
        rgba(205,187,145,.19);

    background:
        linear-gradient(
            145deg,
            rgba(205,187,145,.055),
            rgba(255,255,255,.012)
        );
}

.featured-service-card:hover {

    border-color:
        rgba(205,187,145,.42);
}


/* =========================================================
   PERSONALIZED SERVICE
   ========================================================= */

.personalized-service {

    margin-top: 1rem;

    padding-top: 1px;

    background: var(--section-light);
}

.personalized-service-inner {

    position: relative;

    display: grid;

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

    gap: 2rem;

    align-items: center;

    min-height: 18rem;

    padding:
        2rem
        2.25rem;

    overflow: hidden;

    border:
        1px solid
        rgba(205,187,145,.22);

    border-radius: 1rem;

    background:
        linear-gradient(
            135deg,
            #1d1b16 0%,
            #151411 100%
        );

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

.personalized-service-inner::before {

    content: "";

    position: absolute;

    width: 22rem;
    height: 22rem;

    right: -7rem;
    top: -9rem;

    border:
        1px solid
        rgba(205,187,145,.08);

    border-radius: 50%;

    box-shadow:
        0 0 0 2rem rgba(205,187,145,.018),
        0 0 0 5rem rgba(205,187,145,.010);

    pointer-events: none;
}

.personalized-service-inner:hover {

    border-color:
        rgba(205,187,145,.38);

    box-shadow:
        0 1.5rem 4rem rgba(0,0,0,.18);

    transform:
        translateY(-3px);
}


/* =========================================================
   PERSONALIZED MARK
   ========================================================= */

.personalized-service-mark {

    position: relative;
    z-index: 1;

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

    width: 4rem;
    height: 4rem;

    border:
        1px solid
        rgba(205,187,145,.28);

    border-radius: 50%;

    color:
        rgba(205,187,145,.85);

    font-size: 1.7rem;
    font-weight: 300;
}


/* =========================================================
   PERSONALIZED CONTENT
   ========================================================= */

.personalized-service-content {

    position: relative;
    z-index: 1;
}

.personalized-service-label {

    display: block;

    margin-bottom: 1rem;

    color:
        rgba(125,120,110,.8);

    font-size: .5rem;
    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.personalized-service-content h3 {

    max-width: 9ch;

    margin: 0 0 1rem;

    font-family: var(--display-font);

    font-size:
        clamp(
            2rem,
            3.5vw,
            3.8rem
        );

    font-weight: 600;

    line-height: .88;

    letter-spacing: -.06em;
}

.personalized-service-content p {

    max-width: 38rem;

    margin: 0;

    color: var(--text-soft);

    font-size: .81rem;

    line-height: 1.65;
}


/* =========================================================
   PERSONALIZED ACTION
   ========================================================= */

.personalized-service-action {

    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 1rem;

    padding:
        .85rem
        1rem;

    border:
        1px solid
        rgba(242,240,234,.13);

    border-radius: .65rem;

    color: var(--text-soft);

    font-size: .53rem;
    font-weight: 600;

    letter-spacing: .11em;

    white-space: nowrap;

    text-transform: uppercase;

    transition:
        border-color .3s ease,
        background .3s ease,
        color .3s ease;
}

.personalized-service-inner:hover .personalized-service-action {

    border-color:
        rgba(205,187,145,.38);

    background:
        rgba(205,187,145,.055);

    color:
        var(--text);
}

.personalized-service-arrow {

    font-size: 1rem;
    line-height: 1;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

    padding:
        2rem
        clamp(1.25rem, 4vw, 5rem);

    background: var(--bg-2);

    color: var(--text-muted);

    font-size: .75rem;

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


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1800px) {

    .services-hero-inner,
    .catalog-inner {
        max-width: 1740px;
    }

    .services-hero h1 {

        font-size:
            clamp(
                4.8rem,
                7.2vw,
                9rem
            );
    }

    .service-category-cards .category-heading h3 {

        font-size:
            clamp(
                3rem,
                4vw,
                5rem
            );
    }
}


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

@media (max-width: 1200px) {

    .service-card-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


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

@media (max-width: 1000px) {

    .services-header {
        padding:
            1rem
            2rem;
    }

    .services-hero {

        padding:
            9rem
            clamp(1.25rem, 4vw, 3rem)
            7rem;
    }

    .services-hero-inner {
        max-width: 1200px;
    }

    .services-hero h1 {

        font-size:
            clamp(
                4rem,
                8vw,
                7rem
            );
    }

    .services-hero-bottom {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(240px, .7fr);

        gap: 4rem;

        margin-top: 4rem;
    }

    .service-catalog {

        padding:
            0
            clamp(1.25rem, 4vw, 3rem)
            9rem;
    }

    .service-category.service-category-cards {

        padding:
            5rem
            0
            6rem;
    }

    .service-category-cards .category-header {

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

        gap: 3rem;
    }

    .service-card {
        min-height: 25rem;
    }

    .personalized-service-inner {

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

        gap: 1.5rem;
    }

    .personalized-service-action {

        grid-column: 2;

        justify-self: start;
    }
}


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

@media (max-width: 900px) {

    .service-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


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

@media (max-width: 700px) {

    .services-header {
        padding: 1rem;
    }

    .services-logo img {

        width: 105px;

        max-height: 36px;
    }


    /* -----------------------------------------------------
       MENU
       ----------------------------------------------------- */

    #canvas-nav {

        padding:
            7rem
            1.5rem
            2rem;
    }

    #canvas-nav .canvas-inner {
        width: 100%;
    }

    #canvas-nav nav li a {

        font-size: 10vw;

        padding:
            2.6vw
            0
            1.4vw;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .services-hero {

        padding:
            8rem
            1.25rem
            5rem;
    }

    .services-hero-copy {
        max-width: 100%;
    }

    .services-hero h1 {

        max-width: 10ch;

        font-size:
            clamp(
                4rem,
                18vw,
                6.5rem
            );
    }

    .services-hero-bottom {

        display: block;

        margin-top: 3rem;

        padding-top: 1.5rem;
    }

    .services-hero-description {

        max-width: 30rem;

        font-size: 1rem;
    }

    .services-hero-note {

        max-width: 30rem;

        margin-top: 2rem;

        font-size: .78rem;
    }


    /* -----------------------------------------------------
       CATALOG
       ----------------------------------------------------- */

    .service-catalog {

        padding:
            0
            1.25rem
            7rem;
    }


    /* -----------------------------------------------------
       CATEGORIES
       ----------------------------------------------------- */

    .service-category.service-category-cards {

        padding:
            4rem
            0
            4.5rem;
    }

    .service-category-cards .category-header {

        display: block;

        margin-bottom: 2.5rem;
    }

    .service-category-cards .category-number {

        width: 2rem;
        height: 2rem;

        margin-bottom: 1.2rem;
    }

    .service-category-cards .category-heading h3 {

        max-width: 9ch;

        font-size:
            clamp(
                2.7rem,
                12vw,
                4.3rem
            );
    }

    .service-category-cards .category-summary {

        margin-top: 1.6rem;
    }

    .service-category-cards .category-summary p {

        max-width: 30rem;

        font-size: .79rem;
    }


    /* -----------------------------------------------------
       CARDS
       ----------------------------------------------------- */

    .service-card-grid {
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .service-card {

        min-height: 23rem;

        padding: 1.35rem;

        border-radius: .9rem;
    }

    .service-card-icon {

        width: 2.55rem;
        height: 2.55rem;

        margin-top: 1.65rem;
        margin-bottom: 1.35rem;
    }

    .service-card-body h4 {
        font-size: 1.2rem;
    }

    .service-card-body p {

        max-width: 100%;

        font-size: .75rem;
    }

    .service-card-price strong {
        font-size: 1.3rem;
    }


    /* -----------------------------------------------------
       PERSONALIZED SERVICE
       ----------------------------------------------------- */

    .personalized-service-inner {

        display: block;

        min-height: 0;

        padding: 1.5rem;
    }

    .personalized-service-mark {

        width: 3.25rem;
        height: 3.25rem;

        margin-bottom: 2rem;

        font-size: 1.4rem;
    }

    .personalized-service-content h3 {

        max-width: 10ch;

        font-size:
            clamp(
                2.3rem,
                11vw,
                3.7rem
            );
    }

    .personalized-service-content p {

        max-width: 30rem;

        font-size: .78rem;
    }

    .personalized-service-action {

        display: inline-flex;

        margin-top: 2rem;
    }
}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 480px) {

    .service-card {

        min-height: 22rem;

        padding: 1.2rem;
    }

    .service-card-body h4 {
        font-size: 1.1rem;
    }

    .service-card-body p {

        font-size: .73rem;

        line-height: 1.58;
    }

    .service-card-badge {
        font-size: .42rem;
    }

    .personalized-service-action {

        width: 100%;

        justify-content: space-between;
    }
}


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

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

    .menu-bar,
    .service-card,
    .service-card-icon,
    .service-card-icon span,
    .service-card-arrow,
    .personalized-service-inner,
    .personalized-service-action {

        transition: none !important;
    }

    .service-card:hover,
    .personalized-service-inner:hover {

        transform: none !important;
    }
}

/* =========================================================
   SERVICE CATEGORY LANDING
   Gives linked categories more breathing room below header
   ========================================================= */

html {
    scroll-padding-top: 0rem;
}

#cloud,
#integrations,
#automation,
#data {
    scroll-margin-top: 0;
}

@media (max-width: 700px) {

    html {
        scroll-padding-top: 0rem;
    }

}


/* =========================================================
   MENU TOGGLE — KEEP X TRANSITION
   ========================================================= */

.menu-toggle .menu-bar {
    transition:
        transform .55s cubic-bezier(.22,.75,.2,1),
        width .55s cubic-bezier(.22,.75,.2,1),
        opacity .35s ease !important;
}

.menu-toggle.menu-open .bar1 {
    transform:
        translateY(7px)
        rotate(45deg) !important;
}

.menu-toggle.menu-open .bar2 {
    opacity: 0 !important;
}

.menu-toggle.menu-open .bar3 {
    width: 36px !important;

    transform:
        translateY(-7px)
        rotate(-45deg) !important;
}

/* =========================================================
   HEADER — STATIC PAGE POSITION
   ========================================================= */

.services-header {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
}

/* =========================================================
   CAIRN — MATCH HOMEPAGE LOGO SIZE
   ========================================================= */

header a[href="index.html"] img[src="assets/logo (2).png"] {
    display: block;
    width: 120px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}


/* =========================================================
   MOBILE — SAME SCALE AS HOMEPAGE
   ========================================================= */

@media (max-width: 700px) {

    header a[href="index.html"] img[src="assets/logo (2).png"] {
        width: 100px !important;
    }

}


/* =========================================================
   PERSONALIZED SERVICE ACTION — CONTENT WIDTH
   ========================================================= */

.personalized-service-action {
    width: fit-content !important;
    justify-content: flex-start !important;
}

/* =========================================================
   PERSONALIZED SERVICE — TWO-COLUMN LAYOUT
   ========================================================= */

.personalized-service-inner {
    grid-template-columns:
        minmax(0, 1fr)
        auto;
}

.personalized-service-action {
    justify-self: end;
    width: fit-content !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .personalized-service-inner {
        display: block;
    }

    .personalized-service-action {
        justify-self: auto;
        width: fit-content !important;
    }

}


/* =========================================================
   CAIRN — FULLSCREEN MENU SCROLL LOCK
   Prevent the page from moving behind the open menu
   ========================================================= */

html.menu-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

body.menu-scroll-locked {
    position: fixed !important;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden !important;
    overscroll-behavior: none !important;
}


/* =========================================================
   MOBILE — NORMAL FAQ MENU LINK SIZE
   ========================================================= */

@media (max-width: 700px) {

    #canvas-nav .text-link {
        font-size: .9rem !important;
        line-height: 1.3;
        padding: .7rem 0;
    }

}

/* =========================================================
   SITE FOOTER — LEGAL LINKS
   ========================================================= */

footer {
    display: grid !important;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;
    gap: 2rem;
}

.site-footer-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.site-footer-links a {
    color: var(--text-muted);
    font-size: .68rem;
    transition:
        color .25s ease;
}

.site-footer-links a:hover {
    color: var(--text);
}

@media (max-width: 700px) {

    footer {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .site-footer-links {
        gap: 1.2rem;
    }

    .site-footer-links a {
        font-size: .72rem;
    }

}