/* =========================================================
   CAIRN
   COMPLETE STYLESHEET
   ========================================================= */


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

:root {

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

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

    --border: #34322c;

    --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%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body-font);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


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



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

.site-header {

    position: fixed;

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

   z-index: 201;

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

    pointer-events: none;
}


.logo {

    width: max-content;

    color: var(--text);

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

    font-size:
        clamp(
            .8rem,
            1vw,
            1rem
        );

    font-weight: 700;

    letter-spacing: .13em;

    pointer-events: auto;
}



/* =========================================================
   CAIRN SECTION
   ========================================================= */

#cairn-section {

    position: relative;

    height: 620vh;
}


.cairn-sticky {

    position: sticky;

    top: 0;

    height: 100vh;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        5.5rem
        clamp(1.25rem, 5vw, 6rem)
        2rem;
}



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

.hero-inner {

    position: relative;

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 57%)
        minmax(380px, 43%);

    align-items: center;

    gap: 2vw;

    transform:
        translate3d(0, 0, 0)
        rotate(0deg)
        scale(1);

    transform-origin: center center;

    will-change: transform;
}


.hero-copy {

    position: relative;

    z-index: 10;

    max-width: 60rem;
}


.hero-title {

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

    font-size:
        clamp(
            4.5rem,
            10.2vw,
            10.8rem
        );

    font-weight: 600;

    line-height: .82;

    letter-spacing: -.06em;

    max-width: 9ch;
}


.hero-title span {
    display: block;
}



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

.hero-subtitle {

    max-width: 43rem;

    margin-top:
        clamp(
            1.7rem,
            3vw,
            3.3rem
        );

    color: var(--text-soft);

    font-size:
        clamp(
            .95rem,
            1.2vw,
            1.2rem
        );

    line-height: 1.38;

    letter-spacing: -.015em;
}


.hero-service-line {

    margin-top: .8rem;

    color: var(--text-muted);

    font-size:
        clamp(
            .76rem,
            .88vw,
            .92rem
        );

    line-height: 1.35;
}


.cairn-visual {
    position: relative;

    width: 100%;

    height:
        min(
            82vh,
            820px
        );

    min-height: 560px;

    overflow: visible;
}



/* =========================================================
   GLOW
   ========================================================= */

.cairn-glow {

    position: absolute;

    right: 3%;
    bottom: 4%;

    width:
        min(
            34vw,
            520px
        );

    height:
        min(
            34vw,
            520px
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(185,107,67,.08) 0%,
            rgba(185,107,67,.028) 32%,
            transparent 72%
        );

    filter: blur(14px);

    pointer-events: none;
}



/* =========================================================
   GROUND
   ========================================================= */

.cairn-ground {

    position: absolute;

    right: 2%;
    bottom: 5%;

    width:
        min(
            38vw,
            560px
        );

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.02) 10%,
            rgba(255,255,255,.12) 50%,
            rgba(255,255,255,.02) 90%,
            transparent 100%
        );

    z-index: 0;
}



/* =========================================================
   ROCK STACK
   ========================================================= */

.rock-stack {
    position: absolute;

    right: 2%;

    bottom: 4%;

    width:
        min(
            38vw,
            590px
        );

    height:
        min(
            74vh,
            730px
        );

    min-width: 350px;
    min-height: 540px;

    z-index: 4;

    overflow: visible;
}



/* =========================================================
   ROCK ITEM
   ========================================================= */

.rock-item {

    position: absolute;

    left: 50%;

    width: var(--rock-width);
    height: var(--rock-height);

    bottom: var(--rock-bottom);

    opacity: 0;

    /*
       JavaScript owns the actual animation.
    */

    transform:
        translate3d(
            -50%,
            -125vh,
            0
        )
        rotate(
            var(--start-angle)
        )
        scale(1.02);

    transform-origin: center bottom;

    will-change:
        transform,
        opacity;

    /*
       Important:
       no old CSS animation remains.
    */

    animation: none !important;

    transition: none !important;

    overflow: visible;

    pointer-events: none;
}



/* =========================================================
   ROCK BODY
   ========================================================= */

.rock-body {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    /*
       Each rock supplies its own shape.
    */

    clip-path: var(--rock-shape);

    /*
       Neutral default stone.
    */

    background:
        radial-gradient(
            ellipse 65% 68% at 22% 12%,
            rgba(255,255,255,.13) 0%,
            rgba(255,255,255,.055) 24%,
            transparent 66%
        ),

        radial-gradient(
            ellipse 76% 68% at 82% 82%,
            rgba(0,0,0,.52) 0%,
            rgba(0,0,0,.25) 34%,
            transparent 73%
        ),

        linear-gradient(
            145deg,
            #56534b 0%,
            #47443d 25%,
            #38362f 48%,
            #2b2a25 70%,
            #20201b 87%,
            #171612 100%
        );

    filter:
        contrast(1.045)
        saturate(.68);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        inset 8px 6px 20px rgba(255,255,255,.015),
        inset -14px -15px 30px rgba(0,0,0,.18);
}



/* =========================================================
   ROCK MATERIAL
   ========================================================= */

.rock-body::before {

    content: "";

    position: absolute;

    inset: -10%;

    pointer-events: none;

    background:

        radial-gradient(
            ellipse 25% 19% at 15% 29%,
            rgba(255,255,255,.038),
            transparent 72%
        ),

        radial-gradient(
            ellipse 28% 20% at 39% 16%,
            rgba(0,0,0,.028),
            transparent 73%
        ),

        radial-gradient(
            ellipse 25% 18% at 64% 29%,
            rgba(255,255,255,.018),
            transparent 73%
        ),

        radial-gradient(
            ellipse 28% 21% at 30% 72%,
            rgba(0,0,0,.07),
            transparent 72%
        ),

        radial-gradient(
            ellipse 27% 21% at 76% 77%,
            rgba(0,0,0,.08),
            transparent 73%
        );

    opacity: .9;

    mix-blend-mode: soft-light;

    transform:
        rotate(
            var(--texture-angle)
        )
        scale(1.08);
}



/* =========================================================
   SOFT TOP LIGHT
   ========================================================= */

.rock-body::after {

    content: "";

    position: absolute;

    width: 74%;
    height: 54%;

    left: -8%;
    top: -17%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.04) 32%,
            transparent 73%
        );

    filter: blur(7px);

    opacity: .78;

    transform:
        rotate(
            var(--light-angle)
        );
}



/* =========================================================
   ROCK EDGE OCCLUSION
   ========================================================= */

.rock-item::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    clip-path: var(--rock-shape);

    background:
        radial-gradient(
            ellipse 85% 80% at 48% 31%,
            transparent 44%,
            rgba(0,0,0,.035) 60%,
            rgba(0,0,0,.13) 81%,
            rgba(0,0,0,.28) 100%
        );

    opacity: .85;

    z-index: 3;
}



/* =========================================================
   ROCK PROPORTIONS
   Chunky, sharp-edged, irregular rectangular stones
   ========================================================= */

.rock-1 {
    --rock-width: 100%;
    --rock-height: 23%;
    --rock-bottom: 0%;

    --start-angle: -7deg;
    --rest-angle: -2deg;

    --texture-angle: -11deg;
    --light-angle: -12deg;

    --rock-shape:
        polygon(
            2% 28%,
            7% 11%,
            19% 6%,
            32% 8%,
            45% 4%,
            58% 8%,
            72% 5%,
            86% 11%,
            98% 25%,

            96% 49%,
            98% 71%,
            91% 89%,
            76% 92%,
            62% 96%,
            48% 93%,
            35% 97%,
            21% 93%,
            8% 95%,
            2% 79%,

            5% 61%
        );
}


.rock-2 {
    --rock-width: 87%;
    --rock-height: 20%;
    --rock-bottom: 17.7%;

    --start-angle: 8deg;
    --rest-angle: 4deg;

    --texture-angle: 8deg;
    --light-angle: 9deg;

    --rock-shape:
        polygon(
            4% 27%,
            11% 11%,
            24% 7%,
            37% 10%,
            50% 5%,
            63% 8%,
            76% 6%,
            89% 13%,
            97% 27%,

            94% 48%,
            98% 70%,
            90% 87%,
            77% 91%,
            63% 95%,
            50% 92%,
            37% 96%,
            24% 91%,
            11% 93%,
            4% 77%,

            7% 59%
        );
}


.rock-3 {
    --rock-width: 74%;
    --rock-height: 18%;
    --rock-bottom: 34%;

    --start-angle: -6deg;
    --rest-angle: -2deg;

    --texture-angle: -14deg;
    --light-angle: -8deg;

    --rock-shape:
        polygon(
            5% 28%,
            11% 12%,
            23% 7%,
            36% 9%,
            49% 5%,
            62% 9%,
            75% 6%,
            88% 13%,
            96% 28%,

            93% 49%,
            97% 70%,
            89% 87%,
            76% 91%,
            63% 95%,
            50% 92%,
            38% 97%,
            24% 92%,
            11% 94%,
            4% 77%,

            7% 59%
        );
}


.rock-4 {
    --rock-width: 60%;
    --rock-height: 16.5%;
    --rock-bottom: 48.5%;

    --start-angle: 6deg;
    --rest-angle: 3deg;

    --texture-angle: 12deg;
    --light-angle: 7deg;

    --rock-shape:
        polygon(
            5% 29%,
            12% 13%,
            25% 8%,
            38% 10%,
            51% 5%,
            64% 9%,
            77% 7%,
            89% 14%,
            96% 28%,

            93% 48%,
            98% 69%,
            90% 86%,
            77% 91%,
            63% 95%,
            50% 91%,
            37% 96%,
            24% 91%,
            11% 93%,
            4% 77%,

            7% 59%
        );
}


.rock-5 {
    --rock-width: 47%;
    --rock-height: 15%;
    --rock-bottom: 62.5%;

    --start-angle: -10deg;
    --rest-angle: -5deg;

    --texture-angle: -5deg;
    --light-angle: -10deg;

    --rock-shape:
        polygon(
            5% 28%,
            12% 12%,
            25% 7%,
            38% 10%,
            51% 5%,
            63% 9%,
            76% 7%,
            88% 14%,
            96% 28%,

            93% 49%,
            98% 69%,
            90% 86%,
            76% 91%,
            63% 95%,
            50% 91%,
            37% 97%,
            24% 92%,
            11% 94%,
            4% 78%,

            7% 59%
        );
}


/* =========================================================
   ROCK COLORS
   ========================================================= */

.rock-1 .rock-body {

    background:
        radial-gradient(
            ellipse 65% 70% at 23% 12%,
            rgba(255,255,255,.13),
            rgba(255,255,255,.05) 25%,
            transparent 68%
        ),

        radial-gradient(
            ellipse 76% 68% at 82% 82%,
            rgba(0,0,0,.55),
            rgba(0,0,0,.25) 37%,
            transparent 73%
        ),

        linear-gradient(
            145deg,
            #55524a 0%,
            #45423b 25%,
            #37352f 48%,
            #2b2a24 70%,
            #20201c 87%,
            #171612 100%
        );
}


.rock-2 .rock-body {

    background:
        radial-gradient(
            ellipse 65% 70% at 24% 13%,
            rgba(255,255,255,.13),
            rgba(255,255,255,.05) 25%,
            transparent 68%
        ),

        radial-gradient(
            ellipse 76% 68% at 82% 82%,
            rgba(0,0,0,.52),
            rgba(0,0,0,.24) 37%,
            transparent 73%
        ),

        linear-gradient(
            145deg,
            #5a5850 0%,
            #4b4841 25%,
            #3b3932 48%,
            #2f2e28 70%,
            #23221e 87%,
            #1a1915 100%
        );
}


.rock-3 .rock-body {

    background:
        radial-gradient(
            ellipse 65% 70% at 22% 13%,
            rgba(255,255,255,.12),
            rgba(255,255,255,.045) 25%,
            transparent 68%
        ),

        radial-gradient(
            ellipse 76% 68% at 82% 82%,
            rgba(0,0,0,.54),
            rgba(0,0,0,.25) 37%,
            transparent 73%
        ),

        linear-gradient(
            145deg,
            #525048 0%,
            #43413a 25%,
            #35342e 48%,
            #292824 70%,
            #20201b 87%,
            #181713 100%
        );
}


.rock-4 .rock-body {

    background:
        radial-gradient(
            ellipse 65% 70% at 24% 13%,
            rgba(255,255,255,.115),
            rgba(255,255,255,.045) 25%,
            transparent 68%
        ),

        radial-gradient(
            ellipse 76% 68% at 82% 82%,
            rgba(0,0,0,.48),
            rgba(0,0,0,.22) 37%,
            transparent 73%
        ),

        linear-gradient(
            145deg,
            #778779 0%,
            #68766a 25%,
            #58665a 48%,
            #465249 69%,
            #39443b 87%,
            #2d342f 100%
        );
}


.rock-5 .rock-body {

    background:
        radial-gradient(
            ellipse 65% 70% at 24% 13%,
            rgba(255,255,255,.12),
            rgba(255,255,255,.05) 25%,
            transparent 68%
        ),

        radial-gradient(
            ellipse 76% 68% at 82% 82%,
            rgba(0,0,0,.50),
            rgba(0,0,0,.23) 37%,
            transparent 73%
        ),

        linear-gradient(
            145deg,
            #c47d57 0%,
            #b36a47 25%,
            #a05a3b 48%,
            #8b4b30 69%,
            #743d27 87%,
            #5a2f20 100%
        );
}



/* =========================================================
   ROCK CONTACT SHADOW
   ========================================================= */

.rock-shadow {

    position: absolute;

    left: 50%;

    bottom: -8%;

    width: 86%;
    height: 22%;

    transform:
        translateX(-50%)
        scale(.28);

    opacity: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.44) 32%,
            rgba(0,0,0,.18) 56%,
            transparent 76%
        );

    filter: blur(11px);

    pointer-events: none;

    z-index: -1;

    will-change:
        transform,
        opacity;
}



/* =========================================================
   IMPACT RING
   ========================================================= */

.impact-ring {

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 18%;
    height: 9%;

    transform:
        translate(
            -50%,
            50%
        )
        scale(.25);

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

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    z-index: 5;

    will-change:
        transform,
        opacity;
}



/* =========================================================
   ROCK LABEL
   ========================================================= */

/* =========================================================
   ROCK LABELS
   Each label is centered vertically against its own stone
   ========================================================= */

.rock-label {
    position: absolute;

    left:
        calc(
            100% + 38px
        );

    top: 50%;

    bottom: auto;

    width: 13rem;

    transform:
        translate3d(
            24px,
            -50%,
            0
        );

    opacity: 0;

    color: var(--text-soft);

    font-size:
        clamp(
            .72rem,
            .78vw,
            .84rem
        );

    font-weight: 450;

    line-height: 1.32;

    letter-spacing: -.01em;

    pointer-events: none;

    z-index: 20;

    will-change:
        transform,
        opacity;
}


.rock-label::before {
    content: "";

    position: absolute;

    top: 50%;

    right:
        calc(
            100% + 12px
        );

    width: 28px;

    height: 1px;

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

    transform:
        translateY(-50%);

    opacity: .9;
}



/* =========================================================
   SERVICES
   ========================================================= */

#services {

    position: relative;

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

    background: var(--bg-2);

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


.services-inner {

    max-width: 1450px;

    margin: 0 auto;
}


#services h2 {

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

    font-size:
        clamp(
            2.8rem,
            5.5vw,
            6rem
        );

    font-weight: 600;

    line-height: .9;

    letter-spacing: -.05em;

    max-width: 10ch;
}


.services-grid {

    margin-top: 4rem;

    display: grid;

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

    gap: 1px;

    background: var(--border);

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


.service-card {

    min-height: 17rem;

    padding: 1.5rem;

    background: var(--bg-2);
}


.service-card h3 {

    margin-bottom: .7rem;

    font-size: 1rem;

    line-height: 1.2;
}


.service-card p {

    color: var(--text-soft);

    font-size: .85rem;

    line-height: 1.55;
}



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

footer {

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

    background: var(--bg-2);

    color: var(--text-muted);

    font-size: .75rem;
}



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

@media (max-width: 1100px) {

    .hero-inner {

        grid-template-columns:
            minmax(0,54%)
            minmax(340px,46%);
    }


    .hero-title {

        font-size:
            clamp(
                4rem,
                9.7vw,
                8.5rem
            );
    }


    .rock-stack {

        right: 1%;

        width:
            min(
                37vw,
                420px
            );
    }


    .rock-label {

        left:
            calc(
                100% + 18px
            );

        width: 11rem;

        font-size: .68rem;
    }


    .rock-label::before {
        width: 18px;
    }


    .services-grid {

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



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

@media (max-width: 820px) {

    #cairn-section {
        height: 560vh;
    }


    .cairn-sticky {

        align-items: flex-start;

        padding-top: 7rem;
    }


    .hero-inner {
        display: block;
    }


    .hero-title {

        max-width: 8ch;

        font-size:
            clamp(
                4rem,
                16vw,
                7.5rem
            );
    }


    .hero-subtitle {

        width: 92%;

        margin-top: 1.5rem;

        font-size: .98rem;
    }


    .cairn-visual {

        position: absolute;

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

        width: 100%;

        height: 53vh;

        min-height: 390px;
    }


    .rock-stack {

        right: 3%;

        width:
            min(
                56vw,
                370px
            );

        min-width: 255px;

        height:
            min(
                48vh,
                430px
            );

        min-height: 340px;

        bottom: 4%;
    }


    .rock-label {

        left:
            calc(
                100% + 12px
            );

        width: 8rem;

        font-size: .6rem;
    }


    .rock-label::before {

        width: 12px;

        right:
            calc(
                100% + 6px
            );
    }


    .cairn-ground {

        right: 0;

        width: 70vw;

        bottom: 3%;
    }
}



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

@media (max-width: 560px) {

    .site-header {
        padding: 1rem;
    }


    .cairn-sticky {

        min-height: 680px;

        padding:
            6rem
            1rem
            1rem;
    }


    .hero-title {

        font-size:
            clamp(
                3.45rem,
                17vw,
                5.8rem
            );
    }


    .hero-subtitle {

        width: 94%;

        font-size: .9rem;
    }


    .hero-service-line {
        width: 90%;
    }


    .cairn-visual {

        height: 51vh;

        min-height: 340px;
    }


    .rock-stack {

        right: -7%;

        width: 73vw;

        min-width: 215px;

        height: 45vh;

        min-height: 315px;
    }


    .rock-label {

        left:
            calc(
                100% + 8px
            );

        width: 6.5rem;

        font-size: .54rem;
    }


    .rock-label::before {

        width: 8px;

        right:
            calc(
                100% + 4px
            );
    }


    .services-grid {
        grid-template-columns: 1fr;
    }
}



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

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

    html {
        scroll-behavior: auto;
    }

    .rock-item {
        transition: none !important;
    }
}


/* =========================================================
   CAIRN FINAL ROCK OVERRIDES
   ========================================================= */


/* =========================================================
   BIGGER CAIRN
   ========================================================= */

.cairn-visual {
    height:
        min(
            86vh,
            860px
        );

    min-height: 580px;
}


.rock-stack {
    right: 0;

    bottom: 2%;

    width:
        min(
            42vw,
            650px
        );

    height:
        min(
            78vh,
            770px
        );

    min-width: 380px;
    min-height: 560px;
}



/* =========================================================
   ROCKS — HEAVIER RECTANGULAR PROPORTIONS
   ========================================================= */

.rock-1 {
    --rock-width: 100%;
    --rock-height: 23%;

    --rock-bottom: 0%;

    --start-angle: -7deg;
    --rest-angle: -2deg;

    --texture-angle: -12deg;
    --light-angle: -10deg;

    --rock-shape:
        polygon(
            2% 30%,
            7% 12%,
            19% 7%,
            33% 9%,
            46% 4%,
            59% 8%,
            72% 5%,
            86% 11%,
            98% 25%,
            96% 49%,
            99% 69%,
            92% 88%,
            77% 92%,
            62% 96%,
            48% 93%,
            34% 97%,
            20% 93%,
            8% 95%,
            2% 80%,
            5% 61%
        );
}


.rock-2 {
    --rock-width: 88%;
    --rock-height: 20%;

    --rock-bottom: 18%;

    --start-angle: 8deg;
    --rest-angle: 3.5deg;

    --texture-angle: 8deg;
    --light-angle: 8deg;

    --rock-shape:
        polygon(
            4% 28%,
            11% 12%,
            24% 7%,
            38% 10%,
            51% 5%,
            64% 8%,
            76% 6%,
            89% 13%,
            97% 28%,
            94% 49%,
            98% 69%,
            90% 87%,
            77% 91%,
            63% 95%,
            50% 92%,
            37% 96%,
            24% 92%,
            11% 94%,
            4% 78%,
            7% 59%
        );
}


.rock-3 {
    --rock-width: 75%;
    --rock-height: 18%;

    --rock-bottom: 35%;

    --start-angle: -6deg;
    --rest-angle: -2deg;

    --texture-angle: -13deg;
    --light-angle: -7deg;

    --rock-shape:
        polygon(
            5% 29%,
            11% 12%,
            23% 7%,
            36% 9%,
            49% 5%,
            62% 9%,
            75% 6%,
            88% 13%,
            96% 28%,
            93% 49%,
            97% 70%,
            89% 87%,
            76% 91%,
            63% 95%,
            50% 92%,
            38% 97%,
            24% 92%,
            11% 94%,
            4% 77%,
            7% 59%
        );
}


.rock-4 {
    --rock-width: 61%;
    --rock-height: 16.5%;

    --rock-bottom: 49%;

    --start-angle: 6deg;
    --rest-angle: 3deg;

    --texture-angle: 11deg;
    --light-angle: 8deg;

    --rock-shape:
        polygon(
            5% 30%,
            12% 13%,
            25% 8%,
            38% 10%,
            51% 5%,
            64% 9%,
            77% 7%,
            89% 14%,
            96% 29%,
            93% 49%,
            98% 69%,
            90% 86%,
            77% 91%,
            63% 95%,
            50% 91%,
            37% 96%,
            24% 91%,
            11% 93%,
            4% 77%,
            7% 59%
        );
}


.rock-5 {
    --rock-width: 48%;
    --rock-height: 15%;

    --rock-bottom: 63%;

    --start-angle: -10deg;
    --rest-angle: -5deg;

    --texture-angle: -5deg;
    --light-angle: -10deg;

    --rock-shape:
        polygon(
            5% 29%,
            12% 12%,
            25% 7%,
            38% 10%,
            51% 5%,
            63% 9%,
            76% 7%,
            88% 14%,
            96% 29%,
            93% 49%,
            98% 69%,
            90% 86%,
            76% 91%,
            63% 95%,
            50% 91%,
            37% 97%,
            24% 92%,
            11% 94%,
            4% 78%,
            7% 59%
        );
}



/* =========================================================
   ROCK MATERIAL
   ========================================================= */

.rock-body {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    clip-path:
        var(--rock-shape);

    background:
        radial-gradient(
            ellipse 62% 68% at 20% 10%,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.055) 24%,
            transparent 63%
        ),

        radial-gradient(
            ellipse 78% 70% at 84% 84%,
            rgba(0,0,0,.56) 0%,
            rgba(0,0,0,.28) 34%,
            transparent 72%
        ),

        radial-gradient(
            ellipse 45% 36% at 50% 42%,
            rgba(255,255,255,.025) 0%,
            transparent 72%
        ),

        linear-gradient(
            142deg,
            #5a574f 0%,
            #4a4740 23%,
            #3a3831 45%,
            #2d2c26 67%,
            #22211d 84%,
            #171612 100%
        );

    filter:
        contrast(1.055)
        saturate(.62);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        inset 7px 5px 18px rgba(255,255,255,.018),
        inset -14px -14px 30px rgba(0,0,0,.22);
}



/* =========================================================
   SUBTLE STONE GRAIN
   ========================================================= */

.rock-body::before {

    content: "";

    position: absolute;

    inset: -8%;

    background:

        radial-gradient(
            ellipse 18% 15% at 12% 25%,
            rgba(255,255,255,.04),
            transparent 72%
        ),

        radial-gradient(
            ellipse 22% 16% at 31% 18%,
            rgba(0,0,0,.035),
            transparent 73%
        ),

        radial-gradient(
            ellipse 20% 16% at 57% 24%,
            rgba(255,255,255,.018),
            transparent 72%
        ),

        radial-gradient(
            ellipse 22% 18% at 73% 48%,
            rgba(255,255,255,.018),
            transparent 73%
        ),

        radial-gradient(
            ellipse 25% 18% at 30% 73%,
            rgba(0,0,0,.075),
            transparent 72%
        ),

        radial-gradient(
            ellipse 23% 18% at 71% 78%,
            rgba(0,0,0,.09),
            transparent 73%
        );

    opacity: .88;

    mix-blend-mode: soft-light;

    transform:
        rotate(var(--texture-angle))
        scale(1.08);

    pointer-events: none;
}



/* =========================================================
   SOFT NATURAL HIGHLIGHT
   ========================================================= */

.rock-body::after {

    content: "";

    position: absolute;

    width: 72%;
    height: 52%;

    top: -15%;
    left: -8%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.095) 0%,
            rgba(255,255,255,.035) 30%,
            transparent 72%
        );

    filter: blur(8px);

    opacity: .8;

    transform:
        rotate(var(--light-angle));

    pointer-events: none;
}



/* =========================================================
   ROCK 4 COLOR
   ========================================================= */

.rock-4 .rock-body {

    background:
        radial-gradient(
            ellipse 62% 68% at 20% 10%,
            rgba(255,255,255,.12),
            rgba(255,255,255,.045) 24%,
            transparent 64%
        ),

        radial-gradient(
            ellipse 76% 70% at 84% 84%,
            rgba(0,0,0,.48),
            rgba(0,0,0,.22) 36%,
            transparent 72%
        ),

        linear-gradient(
            142deg,
            #7a897c 0%,
            #68766b 24%,
            #58655a 47%,
            #465249 69%,
            #39443b 86%,
            #2e352f 100%
        );
}



/* =========================================================
   ROCK 5 COLOR
   ========================================================= */

.rock-5 .rock-body {

    background:
        radial-gradient(
            ellipse 62% 68% at 20% 10%,
            rgba(255,255,255,.12),
            rgba(255,255,255,.045) 24%,
            transparent 64%
        ),

        radial-gradient(
            ellipse 76% 70% at 84% 84%,
            rgba(0,0,0,.51),
            rgba(0,0,0,.24) 36%,
            transparent 72%
        ),

        linear-gradient(
            142deg,
            #c7815b 0%,
            #b46b48 24%,
            #a15b3c 47%,
            #8c4b31 69%,
            #743d28 86%,
            #5a2f20 100%
        );
}



/* =========================================================
   HEAVIER CONTACT SHADOW
   ========================================================= */

.rock-shadow {

    position: absolute;

    left: 50%;

    bottom: -9%;

    width: 88%;
    height: 23%;

    transform:
        translateX(-50%)
        scale(.25);

    opacity: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(0,0,0,.74) 0%,
            rgba(0,0,0,.44) 31%,
            rgba(0,0,0,.17) 54%,
            transparent 76%
        );

    filter: blur(11px);

    pointer-events: none;

    z-index: -1;
}



/* =========================================================
   LABELS — LOCKED TO THEIR ROCK
   ========================================================= */

.rock-label {

    position: absolute;

    left:
        calc(
            100% + 38px
        );

    top: 50%;

    bottom: auto;

    width: 14rem;

    margin: 0;

    transform:
        translate3d(
            24px,
            -50%,
            0
        );

    opacity: 0;

    color: var(--text-soft);

    font-size:
        clamp(
            .72rem,
            .78vw,
            .84rem
        );

    font-weight: 450;

    line-height: 1.32;

    letter-spacing: -.01em;

    pointer-events: none;

    z-index: 20;

    will-change:
        transform,
        opacity;
}


.rock-label::before {

    content: "";

    position: absolute;

    top: 50%;

    right:
        calc(
            100% + 12px
        );

    width: 28px;

    height: 1px;

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

    transform:
        translateY(-50%);
}



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

@media (max-width: 1100px) {

    .cairn-visual {

        height: 82vh;

        min-height: 540px;
    }


    .rock-stack {

        right: 0;

        width:
            min(
                44vw,
                540px
            );

        min-width: 340px;

        height:
            min(
                74vh,
                690px
            );

        min-height: 500px;
    }


    .rock-label {

        left:
            calc(
                100% + 24px
            );

        width: 11rem;

        font-size: .68rem;
    }


    .rock-label::before {

        width: 18px;

        right:
            calc(
                100% + 8px
            );
    }
}



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

@media (max-width: 820px) {

    .cairn-visual {

        height: 56vh;

        min-height: 410px;
    }


    .rock-stack {

        right: 1%;

        width:
            min(
                62vw,
                400px
            );

        min-width: 270px;

        height:
            min(
                51vh,
                460px
            );

        min-height: 355px;

        bottom: 3%;
    }


    .rock-label {

        left:
            calc(
                100% + 11px
            );

        width: 8rem;

        font-size: .6rem;
    }


    .rock-label::before {

        width: 11px;

        right:
            calc(
                100% + 5px
            );
    }
}



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

@media (max-width: 560px) {

    .rock-stack {

        right: -9%;

        width: 78vw;

        min-width: 225px;

        height: 48vh;

        min-height: 325px;
    }


    .rock-label {

        left:
            calc(
                100% + 7px
            );

        width: 6.5rem;

        font-size: .54rem;
    }


    .rock-label::before {

        width: 7px;

        right:
            calc(
                100% + 4px
            );
    }
}



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

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

    .rock-item {
        transition: none !important;
    }
}


/* =========================================================
   CAIRN PNG LOGO
   ========================================================= */

.site-header .logo {
    display: flex;
    align-items: center;
    width: fit-content;
    height: auto;
}

.site-header .logo img {
    display: block;
    width: 120px;
    height: auto;
    max-height: 200px;
    object-fit: contain;
}


/* =========================================================
   ROCK LABELS — INSIDE THE STONES
   ========================================================= */

.rock-label {
    position: absolute;

    /* Put the label directly in the middle of its rock */
    left: 50%;
    top: 50%;
    bottom: auto;

    width: 78%;
    max-width: 78%;
    margin: 0;

    /*
       The rock itself is rotated.
       Counter-rotate the text so it sits visually straight.
    */
    transform:
        translate3d(-50%, -50%, 0)
        rotate(calc(var(--rest-angle) * -1)) !important;

    opacity: 0;

    color: rgba(242, 240, 234, 0.94);

    font-size: clamp(.54rem, .72vw, .76rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.012em;

    text-align: center;
    text-wrap: balance;

    pointer-events: none;
    z-index: 20;

    /*
       Keeps the lettering readable against
       the stone texture without looking like a badge.
    */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, .65),
        0 3px 10px rgba(0, 0, 0, .42);
}

/* Remove the old connector line completely */
.rock-label::before {
    display: none;
}

/* Give the smaller upper rocks slightly tighter typography */
.rock-4 .rock-label,
.rock-5 .rock-label {
    width: 76%;
    max-width: 76%;
    font-size: clamp(.48rem, .62vw, .68rem);
    line-height: 1.16;
}

/* The long integration label needs a little more breathing room */
.rock-2 .rock-label {
    width: 70%;
    max-width: 70%;
    font-size: clamp(.5rem, .66vw, .7rem);
}

/* Make the large bottom stone's label slightly stronger */
.rock-1 .rock-label {
    width: 72%;
    max-width: 72%;
    font-size: clamp(.58rem, .78vw, .8rem);
}

/* Mobile */
@media (max-width: 820px) {
    .rock-label {
        width: 76%;
        max-width: 76%;
        font-size: .56rem;
        line-height: 1.16;
    }

    .rock-1 .rock-label {
        font-size: .62rem;
    }

    .rock-2 .rock-label {
        width: 68%;
        max-width: 68%;
        font-size: .5rem;
    }

    .rock-4 .rock-label,
    .rock-5 .rock-label {
        font-size: .48rem;
    }
}

@media (max-width: 560px) {
    .rock-label {
        width: 74%;
        max-width: 74%;
        font-size: .48rem;
    }

    .rock-1 .rock-label {
        font-size: .54rem;
    }

    .rock-2 .rock-label {
        font-size: .44rem;
    }

    .rock-4 .rock-label,
    .rock-5 .rock-label {
        font-size: .42rem;
    }
}

/* =========================================================
   ROCK LABELS — NO ENTRANCE ANIMATION
   ========================================================= */

.rock-label {
    left: 50%;
    top: 50%;
    bottom: auto;

    width: 76%;
    max-width: 76%;
    margin: 0;

    opacity: 1 !important;
    visibility: visible !important;

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

    pointer-events: none;
    z-index: 20;

    text-align: center;
    text-wrap: balance;

    /*
     * JS keeps the label centered and attached
     * to its specific rock.
     */
}

.rock-label::before {
    display: none !important;
}




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

.menu-toggle {
    position: fixed;

    top: 45px;
    right: 60px;

    width: 36px;
    height: 36px;

    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    gap: 5px;

    border: 0;
    background: transparent;

    pointer-events: auto;

    cursor: pointer;

    /*
       Header/menu button must remain above
       the fullscreen menu.
    */
    z-index: 201;

    appearance: none;
    -webkit-appearance: none;
}

.menu-bar {
    display: block;

    width: 36px;
    height: 2px;

    background: var(--text);

    transform-origin: center;

    transition:
        transform .3s ease-in-out,
        width .3s ease-in-out,
        opacity .3s ease-in-out;
}

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


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

#canvas-nav {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    padding:
        10vw
        15vw
        5vw;

    box-sizing: border-box;

    overflow: hidden;

    /*
       Keep the menu underneath the menu button,
       but above the entire page.
    */
    z-index: 200;

    background: var(--bg-2);

    text-align: left;

    /*
       CLOSED
       The whole panel is clipped upward.
    */
    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;
}


/* =========================================================
   OPEN MENU
   ========================================================= */

#canvas-nav.canvas-open {
    /*
       FULL SCREEN
    */
    clip-path:
        inset(
            0 0 0 0
        );

    visibility: visible;

    pointer-events: auto;

    /*
       Let visibility turn on immediately when opening.
    */
    transition:
        clip-path
        1s
        cubic-bezier(
            .4,
            .1,
            0,
            1
        );
}


/* =========================================================
   MENU INNER
   ========================================================= */

#canvas-nav .canvas-inner {
    display: flex;

    flex-direction: column;

    justify-content: center;

    width: 70%;
    height: 100%;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

#canvas-nav nav ul {
    margin: 0;
    padding: 0;

    width: 100%;
}

#canvas-nav nav ul li {
    position: relative;

    list-style: none;

    display: block;

    opacity: 0;

    transform:
        translateY(
            35px
        );
}


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

#canvas-nav nav ul li a {
    display: block;

    color: var(--text);

    text-decoration: none;

    line-height: 1;

    font-size: 4vw;

    font-weight: 500;

    letter-spacing: -.045em;

    padding:
        1.2vw
        0
        .5vw;

    position: relative;

    transition:
        color
        .6s
        cubic-bezier(
            .1,
            .75,
            .5,
            1
        );
}

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


/* =========================================================
   MENU ITEM ENTRANCE
   ========================================================= */

#canvas-nav.canvas-open nav ul li {
    animation:
        cairnMenuFromTop
        .5s
        ease
        forwards;
}

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

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

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

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


@keyframes cairnMenuFromTop {

    from {
        opacity: 0;

        transform:
            translateY(
                35px
            );
    }

    to {
        opacity: 1;

        transform:
            translateY(
                0
            );
    }
}


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

#canvas-nav .canvas-footer {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 3vw;

    opacity: 0;
}

#canvas-nav.canvas-open .canvas-footer {
    animation:
        cairnFooterIn
        .5s
        ease
        .75s
        forwards;
}


@keyframes cairnFooterIn {

    from {
        opacity: 0;

        transform:
            translateY(
                20px
            );
    }

    to {
        opacity: 1;

        transform:
            translateY(
                0
            );
    }
}


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

#canvas-nav .text-link {
    display: inline-block;

    color: var(--text-soft);

    font-size: 1vw;

    font-weight: 500;

    line-height: 1.2;

    padding:
        .75vw
        0
        .7vw;

    margin-right: 1vw;

    text-decoration: none;

    transition:
        color
        .3s
        ease;
}

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


/* =========================================================
   SLOWER, SMOOTHER MENU TOGGLE
   ========================================================= */

.menu-bar {
    display: block;

    width: 36px;
    height: 2px;

    background: var(--text);

    transform-origin: center;

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


/* =========================================================
   MENU BUTTON → X
   ========================================================= */

.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);
}


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

@media (min-width: 600px) and (max-width: 1199px) {

    .menu-toggle {
        top: 20px;
        right: 30px;
    }

    #canvas-nav {
        padding:
            13vw
            5vw
            5vw;
    }

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

    #canvas-nav nav ul li a {
        font-size: 6vw;

        padding:
            2.6vw
            0
            1.4vw;
    }

    #canvas-nav .canvas-footer {
        margin-top: 5vw;
    }

    #canvas-nav .text-link {
        font-size: 2.2vw;
        margin-right: 3vw;
    }
}


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

@media (max-width: 599px) {

    .menu-toggle {
        top: 16px;
        right:
            calc(
                15px + 1vw
            );
    }

    #canvas-nav {
        padding:
            13vw
            5vw
            5vw;
    }

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

    #canvas-nav nav ul li a {
        font-size: 10vw;

        padding:
            2.6vw
            0
            1.4vw;
    }

    #canvas-nav .canvas-footer {
        margin-top: 5vw;
    }

    #canvas-nav .text-link {
        font-size: 4vw;
        margin-right: 4vw;
    }
}





/* =========================================================
   CAIRN SERVICES OVERVIEW
   ========================================================= */

.services-overview {

    position: relative;

    padding:
        10rem
        clamp(1.25rem, 6vw, 7rem)
        11rem;

    background:
        var(--bg);

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

    overflow: hidden;
}

.services-overview::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(242,240,234,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(242,240,234,.025) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

    pointer-events: none;
}

.services-overview-inner {

    position: relative;

    max-width: 1500px;

    margin: 0 auto;

    z-index: 2;
}


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

.services-overview-header {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(250px, 30%);

    gap: 5rem;

    align-items: end;

    margin-bottom: 6rem;
}

.services-kicker {

    margin-bottom: 1.4rem;

    color:
        var(--text-muted);

    font-size: .65rem;

    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.services-overview-header h2 {

    max-width: 9ch;

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

    font-weight: 600;

    line-height: .84;

    letter-spacing: -.065em;
}

.services-overview-intro {

    max-width: 27rem;

    color:
        var(--text-soft);

    font-size:
        .9rem;

    line-height: 1.7;
}


/* =========================================================
   CATEGORY SELECTOR
   ========================================================= */

.services-carousel-selector {

    display: grid;

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

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

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

    margin-bottom: 1rem;
}

.service-tab {

    position: relative;

    min-height: 5rem;

    padding:
        1rem
        1.2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    border: 0;

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

    background:
        transparent;

    color:
        var(--text-muted);

    text-align: left;

    cursor: pointer;

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

.service-tab:last-child {

    border-right:
        0;
}

.service-tab:hover {

    color:
        var(--text);
}

.service-tab.is-active {

    color:
        var(--text);

    background:
        rgba(242,240,234,.035);
}

.service-tab::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -1px;

    height: 2px;

    background:
        var(--text);

    transform:
        scaleX(0);

    transform-origin:
        left;

    transition:
        transform .45s
        cubic-bezier(.2,.75,.2,1);
}

.service-tab.is-active::after {

    transform:
        scaleX(1);
}

.service-tab-number {

    font-size:
        .58rem;

    font-weight:
        600;

    letter-spacing:
        .12em;
}

.service-tab-name {

    font-size:
        .8rem;

    font-weight:
        500;

    letter-spacing:
        -.015em;
}


/* =========================================================
   CAROUSEL
   ========================================================= */

.services-carousel {

    position: relative;

    overflow: hidden;

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

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

    touch-action:
        pan-y;

    cursor:
        grab;
}

.services-carousel.is-dragging {

    cursor:
        grabbing;
}

.services-carousel-track {

    display: flex;

    width: 100%;

    transition:
        transform .7s
        cubic-bezier(.16,1,.3,1);

    will-change:
        transform;
}

.services-carousel.is-dragging
.services-carousel-track {

    transition:
        none;
}


/* =========================================================
   SERVICE PANEL
   ========================================================= */

.service-panel {

    flex:
        0 0 100%;

    min-width:
        100%;

    display: grid;

    grid-template-columns:
        47%
        53%;

    min-height:
        39rem;

    background:
        #171613;
}


/* =========================================================
   TECHNICAL VISUAL
   ========================================================= */

.service-panel-visual {

    position: relative;

    min-height:
        39rem;

    overflow: hidden;

    background:
        #11100f;

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


/* grid */

.system-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(242,240,234,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(242,240,234,.045) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    opacity:
        .45;
}


/* =========================================================
   CLOUD / INFRASTRUCTURE RADAR
   ========================================================= */

.infrastructure-visual {
    position: relative;
    overflow: hidden;
}


/* Radar rings */

.infrastructure-visual .system-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(242,240,234,.18);
    border-radius: 50%;

    transform: translate(-50%, -50%);
}

.infrastructure-visual .orbit-one {
    width: 19rem;
    height: 19rem;
}

.infrastructure-visual .orbit-two {
    width: 10rem;
    height: 10rem;

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


/* Center crosshair */

.infrastructure-visual::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 19rem;
    height: 1px;

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

    transform: translate(-50%, -50%);
}


/* Radar sweep */

.infrastructure-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 10rem;
    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(205,187,145,.75),
            rgba(205,187,145,.16),
            transparent
        );

    box-shadow:
        0 0 14px rgba(205,187,145,.18);

    animation:
        radarSweep 5s linear infinite;

    z-index: 2;
}


@keyframes radarSweep {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


/* Existing central nodes */

.infrastructure-visual .system-node {

    position: absolute;

    width: .62rem;
    height: .62rem;

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

    border-radius: 50%;

    background:
        #11100f;

    box-shadow:
        0 0 0 4px rgba(205,187,145,.035),
        0 0 18px rgba(205,187,145,.14);

    z-index: 4;
}


.infrastructure-visual .node-three {

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}


.infrastructure-visual .node-one {

    left: calc(50% + 6rem);
    top: calc(50% - 4.5rem);

    transform:
        translate(-50%, -50%);
}


.infrastructure-visual .node-two {

    left: calc(50% - 6rem);
    top: calc(50% + 4.5rem);

    right: auto;
    bottom: auto;

    transform:
        translate(-50%, -50%);
}


/* =========================================================
   RADAR DETECTION POINTS
   ========================================================= */

.infrastructure-visual .radar-blip {

    position: absolute;

    width: .42rem;
    height: .42rem;

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

    border-radius: 50%;

    background:
        #11100f;

    transform:
        translate(-50%, -50%)
        scale(.25);

    opacity: .08;

    box-shadow:
        0 0 0 3px rgba(205,187,145,.025),
        0 0 0 rgba(205,187,145,0);

    animation:
        radarBlip 5s linear infinite;

    z-index: 5;
}


.infrastructure-visual .blip-one {

    left: calc(50% + 7rem);
    top: calc(50% - 2.5rem);

    animation-delay: -0.35s;
}


.infrastructure-visual .blip-two {

    left: calc(50% + 2.8rem);
    top: calc(50% - 7.1rem);

    animation-delay: -1.15s;
}


.infrastructure-visual .blip-three {

    left: calc(50% - 6.8rem);
    top: calc(50% - 2.2rem);

    animation-delay: -2.25s;
}


.infrastructure-visual .blip-four {

    left: calc(50% - 5rem);
    top: calc(50% + 5.2rem);

    animation-delay: -3.15s;
}


.infrastructure-visual .blip-five {

    left: calc(50% + 4.8rem);
    top: calc(50% + 5rem);

    animation-delay: -4.05s;
}


@keyframes radarBlip {

    0%,
    62% {
        opacity: .08;

        transform:
            translate(-50%, -50%)
            scale(.25);

        box-shadow:
            0 0 0 3px rgba(205,187,145,.025),
            0 0 0 rgba(205,187,145,0);
    }

    64% {

        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.25);

        box-shadow:
            0 0 0 4px rgba(205,187,145,.09),
            0 0 22px rgba(205,187,145,.5);
    }

    69% {

        opacity: .75;

        transform:
            translate(-50%, -50%)
            scale(.85);

        box-shadow:
            0 0 0 3px rgba(205,187,145,.06),
            0 0 14px rgba(205,187,145,.3);
    }

    78%,
    100% {

        opacity: .08;

        transform:
            translate(-50%, -50%)
            scale(.25);

        box-shadow:
            0 0 0 3px rgba(205,187,145,.025),
            0 0 0 rgba(205,187,145,0);
    }
}


/* =========================================================
   RADAR CONNECTION LINES
   ========================================================= */

.infrastructure-visual .system-line {

    position: absolute;

    left: 50%;
    top: 50%;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(205,187,145,.42),
            rgba(242,240,234,.10)
        );

    z-index: 1;
}


.infrastructure-visual .line-one {

    width: 7.4rem;

    transform:
        rotate(-37deg);
}


.infrastructure-visual .line-two {

    width: 7.4rem;

    transform:
        rotate(143deg);
}


/* Small center glow */

.infrastructure-visual .node-three::after {
    content: "";

    position: absolute;

    inset: -4px;

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

    border-radius: 50%;
}

/* =========================================================
   INTEGRATIONS / SYSTEMS VISUAL
   ========================================================= */

.systems-visual {
    position: relative;
    overflow: hidden;
}


/* System windows */

.systems-visual .data-window {
    position: absolute;

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

    background:
        linear-gradient(
            135deg,
            rgba(242,240,234,.025),
            rgba(242,240,234,.005)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    overflow: hidden;
}


/* Window 01 */

.systems-visual .window-one {
    left: 10%;
    top: 22%;

    width: 43%;
    height: 31%;
}


/* Window 02 */

.systems-visual .window-two {
    right: 10%;
    top: 27%;

    width: 27%;
    height: 25%;
}


/* Window 03 */

.systems-visual .window-three {
    left: 24%;
    bottom: 13%;

    width: 49%;
    height: 25%;
}


/* Subtle internal structure */

.systems-visual .window-one::before,
.systems-visual .window-two::before,
.systems-visual .window-three::before {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    top: 25%;

    height: 1px;

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

    box-shadow:
        0 1.7rem 0 rgba(242,240,234,.055),
        0 3.4rem 0 rgba(242,240,234,.04);
}


/* Connection points */

.systems-visual .system-node {
    position: absolute;

    width: .55rem;
    height: .55rem;

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

    background:
        #11100f;

    border-radius: 50%;

    box-shadow:
        0 0 14px rgba(205,187,145,.14);

    z-index: 4;
}


/* Node between windows */

.systems-visual .node-four {
    left: 56%;
    top: 37%;

    transform:
        translate(-50%, -50%);
}


/* Lower connection node */

.systems-visual .node-five {
    left: 50%;
    top: 65%;

    right: auto;
    bottom: auto;

    transform:
        translate(-50%, -50%);
}


/* Horizontal connector */

.systems-visual .line-three {
    position: absolute;

    left: 51%;
    top: 37%;

    width: 11%;
    height: 1px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(242,240,234,.12),
            rgba(205,187,145,.42)
        );

    transform-origin: left center;
}


/* Diagonal connector */

.systems-visual .line-four {
    position: absolute;

    left: 50%;
    top: 53%;

    width: 8rem;
    height: 1px;

    transform:
        rotate(118deg);

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            rgba(205,187,145,.42),
            rgba(242,240,234,.10)
        );
}


/* Tiny connector glow */

.systems-visual .node-four::after,
.systems-visual .node-five::after {
    content: "";

    position: absolute;

    inset: -3px;

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

    border-radius: 50%;
}


/* =========================================================
   AUTOMATION / OPERATIONS VISUAL
   ========================================================= */

.automation-visual {
    position: relative;
    overflow: hidden;
}


/* Main workflow line */

.automation-visual .automation-track {
    position: absolute;

    left: 15%;
    right: 15%;
    top: 50%;

    height: 1px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            rgba(242,240,234,.10),
            rgba(205,187,145,.38),
            rgba(242,240,234,.10)
        );

    box-shadow:
        0 0 12px rgba(205,187,145,.06);
}


/* Workflow nodes */

.automation-visual .automation-dot {
    position: absolute;

    top: 50%;

    width: .7rem;
    height: .7rem;

    transform:
        translate(-50%, -50%);

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

    background:
        #11100f;

    border-radius: 50%;

    box-shadow:
        0 0 0 5px rgba(205,187,145,.025),
        0 0 18px rgba(205,187,145,.13);

    z-index: 3;
}


/* Exact points on the same center line */

.automation-visual .dot-one {
    left: 18%;
}

.automation-visual .dot-two {
    left: 39%;
}

.automation-visual .dot-three {
    left: 61%;
}

.automation-visual .dot-four {
    left: 82%;

    right: auto;
}


/* Direction arrow */

.automation-visual .automation-arrow {
    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    color:
        var(--warm, #cdbb91);

    font-size:
        1.5rem;

    line-height:
        1;

    opacity:
        .85;

    z-index:
        4;
}


/* Moving signal */

.automation-visual::after {
    content: "";

    position: absolute;

    top: 50%;
    left: 15%;

    width: 3rem;
    height: 1px;

    transform:
        translateY(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(205,187,145,.9),
            transparent
        );

    filter:
        blur(.2px);

    animation:
        automationSignal 3.2s linear infinite;

    pointer-events:
        none;
}


@keyframes automationSignal {

    from {
        left: 15%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    to {
        left: 82%;
        opacity: 0;
    }
}


/* =========================================================
   DATA VISUAL
   ========================================================= */

.data-column {

    position: absolute;

    bottom:
        22%;

    width:
        1.8rem;

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

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

.column-one {

    left:
        19%;

    height:
        20%;
}

.column-two {

    left:
        32%;

    height:
        36%;
}

.column-three {

    left:
        45%;

    height:
        55%;
}

.column-four {

    left:
        58%;

    height:
        43%;
}

.column-five {

    left:
        71%;

    height:
        70%;
}

.data-scan {

    position: absolute;

    left:
        14%;

    right:
        14%;

    top:
        36%;

    height:
        1px;

    background:
        var(--warm, #cdbb91);

    opacity:
        .35;

    box-shadow:
        0 0 25px
        rgba(205,187,145,.18);
}


/* =========================================================
   VISUAL LABELS
   ========================================================= */

.visual-label {

    position: absolute;

    color:
        var(--text-muted);

    font-size:
        .53rem;

    font-weight:
        600;

    letter-spacing:
        .14em;
}

.visual-label-top {

    top:
        1.5rem;

    left:
        1.5rem;
}

.visual-label-bottom {

    bottom:
        1.5rem;

    right:
        1.5rem;
}


/* =========================================================
   PANEL CONTENT
   ========================================================= */

.service-panel-content {

    min-width:
        0;

    padding:
        2rem
        2.5rem
        2.5rem;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;
}

.service-panel-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        1.5rem;

    color:
        var(--text-muted);

    font-size:
        .58rem;

    font-weight:
        600;

    letter-spacing:
        .12em;

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

.service-panel-main {

    max-width:
        38rem;

    margin:
        auto 0;
}

.service-panel-main h3 {

    max-width:
        9ch;

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

    font-weight:
        500;

    line-height:
        .84;

    letter-spacing:
        -.06em;
}

.service-panel-main p {

    max-width:
        30rem;

    margin-top:
        2rem;

    color:
        var(--text-soft);

    font-size:
        .9rem;

    line-height:
        1.65;
}


/* =========================================================
   CAPABILITIES
   ========================================================= */

.service-capabilities {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        .5rem;

    margin-top:
        2.2rem;
}

.service-capabilities span {

    padding:
        .65rem
        .8rem;

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

    color:
        var(--text-muted);

    font-size:
        .61rem;

    letter-spacing:
        .05em;

    text-transform:
        uppercase;
}


/* =========================================================
   EXPLORE LINK
   ========================================================= */

.service-explore {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    width:
        100%;

    padding-top:
        1.2rem;

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

    color:
        var(--text);

    font-size:
        .75rem;

    font-weight:
        500;

    transition:
        color .3s ease;
}

.service-explore span {

    font-size:
        1.2rem;

    transition:
        transform .35s
        cubic-bezier(.2,.75,.2,1);
}

.service-explore:hover {

    color:
        var(--text-soft);
}

.service-explore:hover span {

    transform:
        translate(
            4px,
            -4px
        );
}


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

.services-carousel-footer {

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    gap:
        2rem;

    align-items:
        center;

    margin-top:
        1rem;
}

.carousel-progress {

    position:
        relative;

    height:
        1px;

    background:
        var(--border);
}

#carouselProgressBar {

    position:
        absolute;

    left:
        0;

    top:
        0;

    height:
        1px;

    width:
        25%;

    background:
        var(--text);

    transition:
        width .6s
        cubic-bezier(.2,.75,.2,1);
}

.carousel-controls {

    display:
        flex;

    align-items:
        center;

    gap:
        .5rem;
}

#carouselCounter {

    margin-right:
        1rem;

    color:
        var(--text-muted);

    font-size:
        .6rem;

    font-weight:
        600;

    letter-spacing:
        .1em;
}

.carousel-arrow {

    width:
        3rem;

    height:
        2.6rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    background:
        transparent;

    color:
        var(--text);

    cursor:
        pointer;

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

.carousel-arrow:hover {

    background:
        var(--text);

    color:
        var(--bg);
}


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

@media (max-width: 1000px) {

    .services-overview-header {

        grid-template-columns:
            1fr;

        gap:
            2rem;
    }

    .service-panel {

        grid-template-columns:
            42%
            58%;
    }

    .service-panel-visual {

        min-height:
            34rem;
    }

    .service-panel {

        min-height:
            34rem;
    }

    .service-panel-content {

        padding:
            1.5rem
            2rem
            2rem;
    }

}


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

@media (max-width: 700px) {

    .services-overview {

        padding:
            6rem
            1.25rem
            7rem;
    }

    .services-overview-header {

        margin-bottom:
            3.5rem;
    }

    .services-overview-header h2 {

        font-size:
            clamp(
                3.2rem,
                14vw,
                5rem
            );
    }


    /* ---------------------------------------------
       Category tabs
       --------------------------------------------- */

    .services-carousel-selector {

        overflow-x:
            auto;

        display:
            flex;

        scrollbar-width:
            none;

        -ms-overflow-style:
            none;
    }

    .services-carousel-selector::-webkit-scrollbar {

        display:
            none;
    }

    .service-tab {

        flex:
            0 0 auto;

        min-width:
            8rem;

        min-height:
            4.2rem;
    }


    /* ---------------------------------------------
       Carousel panel
       --------------------------------------------- */

    .service-panel {

        display:
            flex;

        flex-direction:
            column;

        min-height:
            auto;
    }

    .service-panel-visual {

        min-height:
            20rem;

        border-right:
            0;

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

    .service-panel-content {

        min-height:
            28rem;

        padding:
            1.25rem;

    }

    .service-panel-main h3 {

        font-size:
            clamp(
                2.8rem,
                13vw,
                5rem
            );
    }

    .service-panel-main p {

        font-size:
            .82rem;
    }


    /* ---------------------------------------------
       Footer
       --------------------------------------------- */

    .services-carousel-footer {

        grid-template-columns:
            1fr;

        gap:
            1.25rem;

        margin-top:
            1.25rem;
    }

    .carousel-controls {

        justify-content:
            space-between;
    }

    #carouselCounter {

        margin-right:
            auto;
    }

    .carousel-arrow {

        width:
            3.3rem;

        height:
            3rem;
    }

}




/* =========================================================
   CAIRN HOMEPAGE
   HOW CAIRN WORKS
   ========================================================= */

.how-cairn-works {

    position: relative;

    padding:
        11rem
        clamp(1.25rem, 6vw, 7rem)
        12rem;

    background:
        #171613;

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

    overflow: hidden;
}

.how-cairn-works::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 45%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(205,187,145,.035)
        );

    pointer-events: none;
}

.how-cairn-inner {

    position: relative;

    max-width: 1500px;

    margin: 0 auto;
}


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

.how-cairn-heading {

    display: grid;

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

    gap: 5rem;

    align-items: end;

    margin-bottom: 7rem;
}

.home-kicker {

    margin-bottom:
        1.4rem;

    color:
        #7d786e;

    font-size:
        .65rem;

    font-weight:
        600;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}

.how-cairn-heading h2 {

    max-width:
        8ch;

    color:
        #f2f0ea;

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

    font-weight:
        600;

    line-height:
        .84;

    letter-spacing:
        -.065em;
}

.how-cairn-intro {

    max-width:
        27rem;

    color:
        #b7b2a6;

    font-size:
        .9rem;

    line-height:
        1.7;
}


/* =========================================================
   PROCESS TRACK
   ========================================================= */

.process-track {

    display:
        grid;

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

    border:
        1px solid
        #34322c;
}

.process-step {

    position:
        relative;

    min-height:
        27rem;

    padding:
        1.7rem;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid
        #34322c;

    background:
        #171613;

    transition:
        background .4s ease,
        transform .4s cubic-bezier(.2,.75,.2,1);
}

.process-step:last-child {

    border-right:
        0;
}

.process-step:hover {

    background:
        #1d1b18;

    transform:
        translateY(-5px);
}

.process-step-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

.process-number,
.process-state {

    color:
        #7d786e;

    font-size:
        .58rem;

    font-weight:
        600;

    letter-spacing:
        .12em;
}

.process-step-body {

    max-width:
        19rem;
}

.process-step-body h3 {

    margin-bottom:
        1rem;

    color:
        #f2f0ea;

    font-size:
        clamp(
            2rem,
            3vw,
            3.2rem
        );

    font-weight:
        500;

    line-height:
        .9;

    letter-spacing:
        -.05em;
}

.process-step-body p {

    color:
        #b7b2a6;

    font-size:
        .78rem;

    line-height:
        1.65;
}

.process-mark {

    align-self:
        flex-end;

    color:
        #7d786e;

    font-size:
        1.2rem;

    transition:
        color .3s ease,
        transform .35s ease;
}

.process-step:hover .process-mark {

    color:
        #cdbb91;

    transform:
        translateX(4px);
}

.process-step-final .process-mark {

    color:
        #cdbb91;
}


/* =========================================================
   OUTCOMES
   ========================================================= */

.outcomes-section {

    position: relative;

    padding:
        12rem
        clamp(1.25rem, 6vw, 7rem)
        13rem;

    background:
        #121110;

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

    overflow: hidden;
}


.outcomes-section::before {

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 42%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(205,187,145,.025)
        );

    pointer-events: none;
}


.outcomes-inner {

    position: relative;

    max-width:
        1500px;

    margin:
        0 auto;

    z-index:
        2;
}


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

.outcomes-heading {

    margin-bottom:
        6rem;
}


.outcomes-heading h2 {

    max-width:
        8ch;

    color:
        #f2f0ea;

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

    font-weight:
        600;

    line-height:
        .82;

    letter-spacing:
        -.07em;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.outcomes-statement {

    display:
        grid;

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

    gap:
        2.5rem;

    align-items:
        start;

    padding:
        2rem
        0
        3.5rem;

    border-top:
        1px solid
        #34322c;

    border-bottom:
        1px solid
        #34322c;
}


.outcomes-statement-index {

    padding-top:
        .15rem;

    color:
        #7d786e;

    font-size:
        .6rem;

    font-weight:
        600;

    letter-spacing:
        .12em;
}


.outcomes-statement-copy {

    max-width:
        58rem;
}


.outcomes-statement-label {

    display:
        block;

    margin-bottom:
        1.2rem;

    color:
        #7d786e;

    font-size:
        .58rem;

    font-weight:
        600;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;
}


.outcomes-statement-copy p {

    max-width:
        52rem;

    color:
        #f2f0ea;

    font-size:
        clamp(
            1.45rem,
            2.3vw,
            2.35rem
        );

    font-weight:
        400;

    line-height:
        1.08;

    letter-spacing:
        -.04em;
}


/* =========================================================
   OUTCOME GRID
   ========================================================= */

.outcomes-grid {

    display:
        grid;

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

    border-left:
        1px solid
        #34322c;

    border-bottom:
        1px solid
        #34322c;
}


/* =========================================================
   OUTCOME ITEM
   ========================================================= */

.outcome-item {

    min-width:
        0;

    min-height:
        21rem;

    padding:
        1.6rem
        1.7rem
        1.8rem;

    display:
        flex;

    flex-direction:
        column;

    border-right:
        1px solid
        #34322c;

    background:
        #121110;

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


.outcome-item:last-child {

    border-right:
        0;
}


.outcome-item:hover {

    background:
        #191815;

    transform:
        translateY(-4px);
}


/* =========================================================
   NUMBER / LINE
   ========================================================= */

.outcome-item-top {

    display:
        flex;

    align-items:
        center;

    gap:
        .8rem;

    margin-bottom:
        auto;
}


.outcome-number {

    flex:
        0 0 auto;

    color:
        #7d786e;

    font-size:
        .6rem;

    font-weight:
        600;

    letter-spacing:
        .1em;
}


.outcome-line {

    width:
        100%;

    height:
        1px;

    background:
        #34322c;
}


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

.outcome-item-content {

    margin-top:
        4rem;
}


.outcome-item h3 {

    margin-bottom:
        1rem;

    color:
        #f2f0ea;

    font-size:
        clamp(
            1.35rem,
            1.8vw,
            1.9rem
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.04em;

    white-space:
        nowrap;
}


.outcome-item p {

    max-width:
        18rem;

    color:
        #b7b2a6;

    font-size:
        .8rem;

    line-height:
        1.65;
}


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

@media (max-width: 1000px) {

    .outcomes-statement {

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

        gap:
            1.5rem;
    }


    .outcomes-grid {

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


    .outcome-item:nth-child(2) {

        border-right:
            0;
    }


    .outcome-item:nth-child(-n + 2) {

        border-bottom:
            1px solid
            #34322c;
    }


    .outcome-item h3 {

        font-size:
            clamp(
                1.4rem,
                3vw,
                2rem
            );
    }

}


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

@media (max-width: 700px) {

    .outcomes-section {

        padding:
            7rem
            1.25rem
            8rem;
    }


    .outcomes-heading {

        margin-bottom:
            4rem;
    }


    .outcomes-heading h2 {

        font-size:
            clamp(
                3.2rem,
                14vw,
                5rem
            );
    }


    .outcomes-statement {

        grid-template-columns:
            1fr;

        gap:
            1rem;

        padding:
            1.5rem
            0
            2.5rem;
    }


    .outcomes-statement-copy p {

        font-size:
            1.4rem;
    }


    .outcomes-grid {

        grid-template-columns:
            1fr;
    }


    .outcome-item {

        min-height:
            17rem;

        padding:
            1.5rem;

        border-right:
            0;
    }


    .outcome-item:nth-child(2) {

        border-right:
            0;
    }


    .outcome-item:nth-child(-n + 2) {

        border-bottom:
            1px solid
            #34322c;
    }


    .outcome-item:nth-child(3) {

        border-bottom:
            1px solid
            #34322c;
    }


    .outcome-item-content {

        margin-top:
            3.5rem;
    }


    .outcome-item h3 {

        font-size:
            1.6rem;

        white-space:
            normal;
    }


    .outcome-item p {

        max-width:
            24rem;

        font-size:
            .8rem;
    }

}
/* =========================================================
   OUTCOMES — FINAL CLEAN LAYOUT
   ========================================================= */


/* =========================================================
   STATEMENT
   ========================================================= */

.outcomes-statement {

    display:
        grid;

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

    gap:
        2.5rem;

    align-items:
        start;

    padding:
        2rem
        0
        3.5rem;

    min-height:
        0;

    background:
        transparent;

    border-top:
        1px solid
        #34322c;

    border-bottom:
        1px solid
        #34322c;
}


.outcomes-statement-copy {

    max-width:
        58rem;
}


.outcomes-statement-copy p {

    max-width:
        52rem;

    margin:
        0;

    color:
        #f2f0ea;

    font-size:
        clamp(
            1.45rem,
            2.3vw,
            2.35rem
        );

    font-weight:
        400;

    line-height:
        1.08;

    letter-spacing:
        -.04em;
}


/* =========================================================
   OUTCOME GRID
   ========================================================= */

.outcomes-grid {

    display:
        grid;

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

    border-left:
        1px solid
        #34322c;

    border-top:
        0;

    margin-top:
        3rem;
}


/* =========================================================
   OUTCOME CARD
   ========================================================= */

.outcome-item {

    position:
        relative;

    min-width:
        0;

    min-height:
        21rem;

    padding:
        1.6rem
        1.7rem
        1.8rem;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    background:
        #121110;

    border:
        0;

    border-right:
        1px solid
        #34322c;

    border-bottom:
        1px solid
        #34322c;

    transform:
        none;

    transition:
        background .3s ease;
}


/* Last card does not need an extra right border */

.outcome-item:last-child {

    border-right:
        0;
}


/* No jumping when hovered */

.outcome-item:hover {

    background:
        #191815;

    transform:
        none;
}


/* =========================================================
   TOP AREA
   ========================================================= */

.outcome-item-top {

    display:
        flex;

    align-items:
        center;

    width:
        100%;

    margin:
        0;

    flex:
        0 0 auto;
}


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

.outcome-item-content {

    margin-top:
        auto;

    padding-top:
        3rem;
}


.outcome-item h3 {

    margin:
        0
        0
        1rem;

    color:
        #f2f0ea;

    font-size:
        clamp(
            1.35rem,
            1.8vw,
            1.9rem
        );

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -.04em;

    white-space:
        normal;
}


.outcome-item p {

    max-width:
        18rem;

    margin:
        0;

    color:
        #b7b2a6;

    font-size:
        .8rem;

    line-height:
        1.65;
}


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

@media (max-width: 1000px) {

    .outcomes-statement {

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

        gap:
            1.5rem;
    }


    .outcomes-grid {

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


    .outcome-item:nth-child(2n) {

        border-right:
            0;
    }


    .outcome-item {

        min-height:
            21rem;
    }


    .outcome-item h3 {

        font-size:
            clamp(
                1.4rem,
                3vw,
                2rem
            );
    }

}


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

@media (max-width: 700px) {

    .outcomes-statement {

        grid-template-columns:
            1fr;

        gap:
            1rem;

        padding:
            1.5rem
            0
            2.5rem;
    }


    .outcomes-statement-copy p {

        font-size:
            1.4rem;
    }


    .outcomes-grid {

        grid-template-columns:
            1fr;

        margin-top:
            2rem;
    }


    .outcome-item {

        min-height:
            18rem;

        padding:
            1.5rem;

        border-right:
            0;

        border-bottom:
            1px solid
            #34322c;
    }


    .outcome-item:last-child {

        border-bottom:
            0;
    }


    .outcome-item-content {

        padding-top:
            2.5rem;
    }


    .outcome-item h3 {

        font-size:
            1.6rem;

        white-space:
            normal;
    }


    .outcome-item p {

        max-width:
            24rem;

        font-size:
            .8rem;
    }

}

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

.home-final {

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

    background:
        #121110;

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

.home-final-inner {

    position:
        relative;

    min-height:
        48rem;

    max-width:
        1500px;

    margin:
        0 auto;

    padding:
        2rem
        2.2rem
        2.4rem;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    overflow:
        hidden;

    background:
        #e8e4da;

    color:
        #171613;
}

.home-final-inner::before {

    content:
        "";

    position:
        absolute;

    width:
        32rem;

    height:
        32rem;

    right:
        -8rem;

    bottom:
        -11rem;

    border:
        1px solid
        rgba(23,22,19,.12);

    border-radius:
        50%;
}

.home-final-inner::after {

    content:
        "";

    position:
        absolute;

    width:
        19rem;

    height:
        19rem;

    right:
        5rem;

    bottom:
        5rem;

    border:
        1px solid
        rgba(23,22,19,.1);

    border-radius:
        50%;
}

.home-final-top {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        rgba(23,22,19,.52);

    font-size:
        .58rem;

    font-weight:
        600;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}

.home-final-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        1000px;
}

.home-final-content h2 {

    max-width:
        9ch;

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

    font-weight:
        600;

    line-height:
        .78;

    letter-spacing:
        -.075em;
}

.home-final-content p {

    max-width:
        30rem;

    margin-top:
        3rem;

    color:
        rgba(23,22,19,.62);

    font-size:
        .9rem;

    line-height:
        1.65;
}


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

.home-final-button {

    min-width:
        18rem;

    min-height:
        5.6rem;

    margin-top:
        2rem;

    padding:
        0
        1.8rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    border:
        1px solid
        #171613;

    background:
        #171613;

    color:
        #f2f0ea;

    font-size:
        .82rem;

    font-weight:
        500;

    transition:
        background .35s ease,
        padding .35s cubic-bezier(.2,.75,.2,1);
}

.home-final-button span {

    font-size:
        1.3rem;

    transition:
        transform .35s ease;
}

.home-final-button:hover {

    padding-left:
        2.1rem;

    padding-right:
        2.1rem;

    background:
        #292721;
}

.home-final-button:hover span {

    transform:
        translate(
            4px,
            -4px
        );
}


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

@media (max-width: 1000px) {

    .how-cairn-heading {

        grid-template-columns:
            1fr;

        gap:
            2rem;
    }

    .process-track {

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

    .process-step:nth-child(2) {

        border-right:
            0;
    }

    .process-step:nth-child(-n+2) {

        border-bottom:
            1px solid
            #34322c;
    }

    .outcomes-layout {

        grid-template-columns:
            1fr;
    }

    .outcomes-statement {

        border-right:
            1px solid
            #34322c;
    }

}


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

@media (max-width: 700px) {

    .how-cairn-works {

        padding:
            6rem
            1.25rem
            7rem;
    }

    .how-cairn-heading {

        margin-bottom:
            4.5rem;
    }

    .how-cairn-heading h2,
    .outcomes-heading h2 {

        font-size:
            clamp(
                3.2rem,
                14vw,
                5rem
            );
    }


    /* Process */

    .process-track {

        grid-template-columns:
            1fr;
    }

    .process-step {

        min-height:
            22rem;

        border-right:
            0;
    }

    .process-step:nth-child(3) {

        border-bottom:
            1px solid
            #34322c;
    }


    /* Outcomes */

    .outcomes-section {

        padding:
            7rem
            1.25rem
            8rem;
    }

    .outcomes-heading {

        margin-bottom:
            4.5rem;
    }

    .outcomes-statement {

        min-height:
            20rem;

        padding:
            1.5rem;
    }

    .outcome-item {

        min-height:
            18rem;

        padding:
            1.5rem;
    }

    .outcomes-statement p {

        font-size:
            1.4rem;
    }


    /* Final CTA */

    .home-final {

        padding:
            1rem
            1rem
            1.5rem;
    }

    .home-final-inner {

        min-height:
            42rem;

        padding:
            1.25rem;
    }

    .home-final-top {

        font-size:
            .52rem;
    }

    .home-final-content h2 {

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

    .home-final-content p {

        margin-top:
            2rem;

        font-size:
            .82rem;
    }

    .home-final-button {

        width:
            100%;

        min-width:
            0;

        min-height:
            5.2rem;
    }

}


/* =========================================================
   SYSTEMS VISUAL — CLEAN SYSTEM ARCHITECTURE
   Replace/override previous Systems visual styling
   ========================================================= */

.systems-visual {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   SYSTEM BOXES
   ========================================================= */

.systems-visual .data-window {
    position: absolute;

    overflow: visible;

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

    border-radius: 2px;

    background:
        linear-gradient(
            145deg,
            rgba(242,240,234,.035),
            rgba(242,240,234,.008)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 14px 34px rgba(0,0,0,.12);

    z-index: 2;
}


/* =========================================================
   LEFT SYSTEM
   ========================================================= */

.systems-visual .window-one {
    left: 9%;
    top: 24%;

    width: 31%;
    height: 18%;
}


/* =========================================================
   RIGHT SYSTEM
   ========================================================= */

.systems-visual .window-two {
    right: 9%;
    top: 24%;

    width: 31%;
    height: 18%;
}


/* =========================================================
   DOWNSTREAM SYSTEM
   ========================================================= */

.systems-visual .window-three {
    left: 24%;
    bottom: 14%;

    width: 52%;
    height: 20%;
}


/* =========================================================
   INTERNAL WINDOW STRUCTURE
   ========================================================= */

.systems-visual .data-window::before {

    content: "";

    position: absolute;

    left: 11%;
    right: 11%;
    top: 19%;

    height: 2px;

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

    box-shadow:
        0 11px 0 rgba(242,240,234,.045),
        0 22px 0 rgba(242,240,234,.028),
        0 33px 0 rgba(242,240,234,.02);

    opacity: .9;

    pointer-events: none;
}


/* =========================================================
   CONNECTION PORTS
   ========================================================= */

.systems-visual .data-window::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

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

    border-radius: 50%;

    background:
        #11100f;

    box-shadow:
        0 0 10px rgba(205,187,145,.2);

    pointer-events: none;

    z-index: 8;
}


/* Left system output */

.systems-visual .window-one::after {

    right: -3px;
    top: 50%;

    transform:
        translateY(-50%);
}


/* Right system input */

.systems-visual .window-two::after {

    left: -3px;
    top: 50%;

    transform:
        translateY(-50%);
}


/* Downstream system input */

.systems-visual .window-three::after {

    left: 50%;
    top: -3px;

    transform:
        translateX(-50%);
}


/* =========================================================
   NETWORK PATH
   =========================================================
   
   Left system ──┐
                 ├── API HUB
   Right system ─┘
                    │
                    │
                    ▼
                downstream
   ========================================================= */

.systems-visual::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 3;

    background:

        /* left → hub */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 39.5%,
            rgba(205,187,145,.18) 39.5%,
            rgba(205,187,145,.42) 40%,
            rgba(205,187,145,.42) 49.5%,
            transparent 50%
        )
        0 33% /
        100% 1px
        no-repeat,

        /* hub → right */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 50%,
            rgba(205,187,145,.42) 50%,
            rgba(205,187,145,.42) 60%,
            rgba(205,187,145,.16) 60.5%,
            transparent 61%
        )
        0 33% /
        100% 1px
        no-repeat,

        /* hub ↓ lower node */
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 33%,
            rgba(205,187,145,.42) 33%,
            rgba(205,187,145,.42) 58%,
            rgba(205,187,145,.16) 58.5%,
            transparent 59%
        )
        50% 0 /
        1px 100%
        no-repeat,

        /* lower node ↓ downstream system */
        linear-gradient(
            180deg,
            transparent 0%,
            transparent 58%,
            rgba(205,187,145,.28) 58%,
            rgba(205,187,145,.28) 64%,
            transparent 64.5%
        )
        50% 0 /
        1px 100%
        no-repeat;
}


/* =========================================================
   HIDDEN OLD CONNECTORS
   ========================================================= */

.systems-visual .system-line {
    display: none !important;
}


/* =========================================================
   UPPER API HUB
   ========================================================= */

.systems-visual .node-four {

    position: absolute;

    left: 50%;
    top: 33%;

    width: .58rem;
    height: .58rem;

    transform:
        translate(-50%, -50%);

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

    border-radius: 50%;

    background:
        #11100f;

    box-shadow:
        0 0 0 5px rgba(205,187,145,.035),
        0 0 18px rgba(205,187,145,.25);

    z-index: 7;
}


/* =========================================================
   LOWER ROUTING NODE
   ========================================================= */

.systems-visual .node-five {

    position: absolute;

    left: 50%;
    top: 58%;

    width: .48rem;
    height: .48rem;

    transform:
        translate(-50%, -50%);

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

    border-radius: 50%;

    background:
        #11100f;

    box-shadow:
        0 0 0 4px rgba(205,187,145,.025),
        0 0 14px rgba(205,187,145,.18);

    z-index: 7;
}


/* =========================================================
   HUB RINGS
   ========================================================= */

.systems-visual .node-four::after {

    content: "";

    position: absolute;

    inset: -5px;

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

    border-radius: 50%;

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


.systems-visual .node-five::after {

    content: "";

    position: absolute;

    inset: -4px;

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

    border-radius: 50%;

    animation:
        systemsHubPulse 4s ease-in-out 1.2s infinite;
}


@keyframes systemsHubPulse {

    0%,
    100% {
        opacity: .3;
        transform: scale(.9);
    }

    50% {
        opacity: .8;
        transform: scale(1.12);
    }
}


/* =========================================================
   SMALL DATA MARKERS
   ========================================================= */

.systems-visual .window-one,
.systems-visual .window-two,
.systems-visual .window-three {

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


.systems-visual .window-one:hover,
.systems-visual .window-two:hover,
.systems-visual .window-three:hover {

    border-color:
        rgba(242,240,234,.22);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 14px 34px rgba(0,0,0,.16),
        0 0 18px rgba(205,187,145,.035);
}


/* =========================================================
   SUBTLE ACTIVE SIGNAL
   ========================================================= */

.systems-visual .node-four {

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


@keyframes systemsHubGlow {

    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(205,187,145,.035),
            0 0 18px rgba(205,187,145,.18);
    }

    50% {
        box-shadow:
            0 0 0 5px rgba(205,187,145,.06),
            0 0 24px rgba(205,187,145,.32);
    }
}


/* =========================================================
   VISUAL LABEL
   ========================================================= */

.systems-visual .visual-label-top {

    top: 1.5rem;
    left: 1.5rem;

    color:
        rgba(125,120,110,.82);
}


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

@media (max-width: 700px) {

    .systems-visual .window-one {

        left: 6%;
        top: 23%;

        width: 34%;
        height: 18%;
    }


    .systems-visual .window-two {

        right: 6%;
        top: 23%;

        width: 34%;
        height: 18%;
    }


    .systems-visual .window-three {

        left: 20%;
        bottom: 13%;

        width: 60%;
        height: 20%;
    }


    .systems-visual .node-four {

        top: 33%;
    }


    .systems-visual .node-five {

        top: 58%;
    }


    .systems-visual .data-window::before {

        left: 12%;
        right: 12%;
    }


    .systems-visual::before {

        background:

            /* left → hub */
            linear-gradient(
                90deg,
                transparent 0%,
                transparent 39%,
                rgba(205,187,145,.4) 39.5%,
                rgba(205,187,145,.4) 49.5%,
                transparent 50%
            )
            0 33% /
            100% 1px
            no-repeat,

            /* hub → right */
            linear-gradient(
                90deg,
                transparent 0%,
                transparent 50%,
                rgba(205,187,145,.4) 50.5%,
                rgba(205,187,145,.4) 61%,
                transparent 61.5%
            )
            0 33% /
            100% 1px
            no-repeat,

            /* vertical trunk */
            linear-gradient(
                180deg,
                transparent 0%,
                transparent 33%,
                rgba(205,187,145,.4) 33%,
                rgba(205,187,145,.4) 58%,
                transparent 59%
            )
            50% 0 /
            1px 100%
            no-repeat;
    }
}


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

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

    .systems-visual .node-four,
    .systems-visual .node-four::after,
    .systems-visual .node-five::after {

        animation:
            none !important;
    }
}

/* =========================================================
   SYSTEMS VISUAL — REMOVE REDUNDANT LOWER DOT
   ========================================================= */

.systems-visual .node-five {
    display: none !important;
}

.systems-visual .node-five::after {
    display: none !important;
}

/* =========================================================
   AUTOMATION — REMOVE ARROW
   ========================================================= */

.automation-visual .automation-arrow {
    display: none !important;
}





/* =========================================================
   CAIRN — NATURAL ZOOMED-OUT SCALE
   Larger canvas + restrained element scale
   Desktop experiment for homepage
   ========================================================= */


/* =========================================================
   EXPAND THE EFFECTIVE CANVAS
   ========================================================= */

@media (min-width: 1101px) {

    .hero-inner,
    .services-overview-inner,
    .how-cairn-inner,
    .outcomes-inner,
    .home-final-inner {

        max-width:
            1680px;

    }


    .cairn-sticky {

        padding-left:
            clamp(
                1.5rem,
                4vw,
                5rem
            );

        padding-right:
            clamp(
                1.5rem,
                4vw,
                5rem
            );

    }


    #services,
    .how-cairn-works,
    .outcomes-section,
    .home-final {

        padding-left:
            clamp(
                1.5rem,
                4vw,
                5rem
            );

        padding-right:
            clamp(
                1.5rem,
                4vw,
                5rem
            );

    }

}


/* =========================================================
   HERO
   Keep it large — just less oversized
   ========================================================= */

@media (min-width: 1101px) {

    .hero-inner {

        grid-template-columns:
            minmax(0, 58%)
            minmax(360px, 42%);

        gap:
            1.5vw;

    }


    .hero-title {

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

        max-width:
            9.5ch;

    }


    .hero-subtitle {

        max-width:
            47rem;

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

    }


    .hero-service-line {

        font-size:
            clamp(
                .76rem,
                .78vw,
                .85rem
            );

    }


    .cairn-visual {

        height:
            min(
                76vh,
                760px
            );

        min-height:
            520px;

    }


    .rock-stack {

        width:
            min(
                35vw,
                540px
            );

        height:
            min(
                69vh,
                690px
            );

        min-height:
            500px;

    }


    .cairn-ground {

        width:
            min(
                36vw,
                540px
            );

    }

}


/* =========================================================
   SERVICES OVERVIEW
   ========================================================= */

@media (min-width: 1101px) {

    .services-overview-header {

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

        gap:
            6rem;

    }


    .services-overview-header h2 {

        font-size:
            clamp(
                3.5rem,
                5.8vw,
                6.2rem
            );

    }


    .services-overview-intro {

        max-width:
            31rem;

        font-size:
            .86rem;

    }


    .service-panel {

        min-height:
            36rem;

    }


    .service-panel-visual {

        min-height:
            36rem;

    }

}


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

@media (min-width: 1101px) {

    .how-cairn-heading {

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

        gap:
            6rem;

    }


    .how-cairn-heading h2 {

        font-size:
            clamp(
                3.5rem,
                5.8vw,
                6.2rem
            );

    }


    .how-cairn-intro {

        max-width:
            31rem;

        font-size:
            .86rem;

    }


    .process-step {

        min-height:
            25rem;

        padding:
            1.65rem;

    }


    .process-step-body {

        max-width:
            21rem;

    }


    .process-step-body h3 {

        font-size:
            clamp(
                1.9rem,
                2.5vw,
                3rem
            );

    }

}


/* =========================================================
   OUTCOMES
   ========================================================= */

@media (min-width: 1101px) {

    .outcomes-heading {

        margin-bottom:
            5.5rem;

    }


    .outcomes-heading h2 {

        font-size:
            clamp(
                3.8rem,
                6.5vw,
                7rem
            );

    }


    .outcomes-statement-copy {

        max-width:
            65rem;

    }


    .outcomes-statement-copy p {

        max-width:
            58rem;

        font-size:
            clamp(
                1.35rem,
                2vw,
                2.1rem
            );

    }


    .outcome-item {

        min-height:
            19rem;

    }


    .outcome-item h3 {

        font-size:
            clamp(
                1.2rem,
                1.55vw,
                1.65rem
            );

    }


    .outcome-item p {

        max-width:
            20rem;

        font-size:
            .76rem;

    }

}


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

@media (min-width: 1101px) {

    .home-final-inner {

        min-height:
            46rem;

        padding:
            2rem
            2.2rem
            2.4rem;

    }


    .home-final-content {

        max-width:
            1100px;

    }


    .home-final-content h2 {

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

    }


    .home-final-content p {

        max-width:
            38rem;

        font-size:
            .86rem;

    }

}


/* =========================================================
   EXTRA-WIDE DISPLAYS
   Prevent the page from becoming visually cramped
   ========================================================= */

@media (min-width: 1800px) {

    .hero-inner,
    .services-overview-inner,
    .how-cairn-inner,
    .outcomes-inner,
    .home-final-inner {

        max-width:
            1740px;

    }


    .hero-title {

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

    }


    .services-overview-header h2,
    .how-cairn-heading h2 {

        font-size:
            clamp(
                4rem,
                5.2vw,
                6.2rem
            );

    }


    .outcomes-heading h2 {

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

    }


    .home-final-content h2 {

        font-size:
            clamp(
                5rem,
                7vw,
                9rem
            );

    }

}


/* =========================================================
   MOBILE
   Leave the existing mobile scale alone.
   ========================================================= */

@media (max-width: 1100px) {

    .hero-inner,
    .services-overview-inner,
    .how-cairn-inner,
    .outcomes-inner,
    .home-final-inner {

        max-width:
            1500px;

    }

}


/* =========================================================
   FINAL CTA — MORE SPACE BEFORE BUTTON
   ========================================================= */

.home-final-button {
    margin-top: 4rem;
}

@media (max-width: 700px) {

    .home-final-button {
        margin-top: 3rem;
    }

}

/* =========================================================
   OUTCOMES STATEMENT — REMOVE LEFT INDENT
   ========================================================= */

.outcomes-statement {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.outcomes-statement-mark {
    display: none;
}


/* =========================================================
   OUTCOME CARDS — TECHNICAL VISUALS
   Clean diagrams, consistent geometry, restrained detail
   ========================================================= */


/* =========================================================
   SHARED VISUAL FRAME
   ========================================================= */

.outcome-item-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-height: 9.5rem;
    margin: 0;
    flex: 0 0 auto;
}

.outcome-symbol {
    position: relative;
    display: block;
    width: 10rem;
    height: 8rem;
    flex: 0 0 10rem;
    color: #cdbb91;
}


/* =========================================================
   FIXED SCOPE
   Defined boundary / controlled scope
   ========================================================= */

.outcome-symbol-scope {
    position: relative;

    width: 10rem;
    height: 7.5rem;

    flex: 0 0 10rem;

    border: 0;

    background:
        /* OUTER CORNER — TOP LEFT */
        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        16px 13px /
        13px 1px
        no-repeat,

        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        16px 13px /
        1px 13px
        no-repeat,


        /* OUTER CORNER — TOP RIGHT */
        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        131px 13px /
        13px 1px
        no-repeat,

        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        143px 13px /
        1px 13px
        no-repeat,


        /* OUTER CORNER — BOTTOM LEFT */
        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        16px 106px /
        13px 1px
        no-repeat,

        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        16px 94px /
        1px 13px
        no-repeat,


        /* OUTER CORNER — BOTTOM RIGHT */
        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        131px 106px /
        13px 1px
        no-repeat,

        linear-gradient(
            #cdbb91,
            #cdbb91
        )
        143px 94px /
        1px 13px
        no-repeat;
}


/* ---------------------------------------------------------
   OUTER BOUNDARY
   The full area represents the controlled project boundary.
   --------------------------------------------------------- */

.outcome-symbol-scope::before {
    content: "";

    position: absolute;

    left: 17px;
    top: 14px;

    width: 126px;
    height: 93px;

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

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

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.018);

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


/* ---------------------------------------------------------
   DEFINED WORK AREA
   Inner boundary represents exactly what Cairn is responsible
   for delivering.
   --------------------------------------------------------- */

.outcome-symbol-scope::after {
    content: "";

    position: absolute;

    left: 33px;
    top: 30px;

    width: 94px;
    height: 61px;

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

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

    box-shadow:
        inset 0 0 0 1px
        rgba(205,187,145,.045),

        inset 0 0 22px
        rgba(205,187,145,.025);

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


/* =========================================================
   02 — FIXED PRICE
   Concept:
   defined price held inside a fixed boundary
   ========================================================= */

.outcome-symbol-price {
    width: 9.8rem;
    height: 6.8rem;

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

    background:
        rgba(242,240,234,.018);
}


/* Dollar marker */

.outcome-symbol-price::before {
    content: "$";

    position: absolute;

    left: 1rem;
    top: 50%;

    width: 3.5rem;
    height: 3.5rem;

    display: grid;
    place-items: center;

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

    border-radius: 50%;

    background:
        #121110;

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

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

    font-size:
        1.45rem;

    font-weight:
        400;

    transform:
        translateY(-50%);
}


/* Price lines */

.outcome-symbol-price::after {
    content: "";

    position: absolute;

    left: 5.2rem;
    top: 50%;

    width: 3.2rem;
    height: 2.4rem;

    transform:
        translateY(-50%);

    background:

        linear-gradient(
            rgba(242,240,234,.24),
            rgba(242,240,234,.24)
        )
        left top /
        100% 1px
        no-repeat,

        linear-gradient(
            rgba(242,240,234,.12),
            rgba(242,240,234,.12)
        )
        left center /
        76% 1px
        no-repeat,

        linear-gradient(
            rgba(205,187,145,.45),
            rgba(205,187,145,.45)
        )
        left bottom /
        54% 1px
        no-repeat;
}


/* =========================================================
   03 — EXISTING STACK
   Concept:
   existing layers / infrastructure already in place
   ========================================================= */

.outcome-symbol-stack {
    width: 9.8rem;
    height: 7.8rem;
}


/* Layered systems */

.outcome-symbol-stack::before {
    content: "";

    position: absolute;

    left: .8rem;
    top: .65rem;

    width: 7.2rem;
    height: 1.65rem;

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

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

    box-shadow:

        0 2rem 0 -1px
            #121110,

        0 2rem 0 0
            rgba(242,240,234,.15),

        0 4rem 0 -1px
            #121110,

        0 4rem 0 0
            rgba(205,187,145,.30);
}


/* System connection spine */

.outcome-symbol-stack::after {
    content: "";

    position: absolute;

    right: .7rem;
    top: .55rem;

    width: .7rem;
    height: 6rem;

    background:

        radial-gradient(
            circle,
            #cdbb91 0 2px,
            transparent 2.5px
        )
        center top /
        7px 7px
        no-repeat,

        radial-gradient(
            circle,
            #cdbb91 0 2px,
            transparent 2.5px
        )
        center center /
        7px 7px
        no-repeat,

        radial-gradient(
            circle,
            #cdbb91 0 2px,
            transparent 2.5px
        )
        center bottom /
        7px 7px
        no-repeat,

        linear-gradient(
            rgba(205,187,145,.30),
            rgba(205,187,145,.30)
        )
        center /
        1px 100%
        no-repeat;
}


/* =========================================================
   04 — CLEAR HANDOFF
   Concept:
   work moves cleanly from an existing system to a
   completed / accepted state
   ========================================================= */

.outcome-symbol-handoff {
    position: relative;

    width: 10rem;
    height: 7.8rem;

    flex: 0 0 10rem;

    background:

        /* LEFT TRANSFER RAIL */
        linear-gradient(
            90deg,
            rgba(205,187,145,.34),
            rgba(205,187,145,.34)
        )
        40px 50% /
        39px 1px
        no-repeat,

        /* RIGHT TRANSFER RAIL */
        linear-gradient(
            90deg,
            rgba(205,187,145,.34),
            rgba(205,187,145,.34)
        )
        81px 50% /
        39px 1px
        no-repeat,

        /* CENTER HANDOFF NODE */
        radial-gradient(
            circle,
            #121110 0 3px,
            #cdbb91 3px 4px,
            transparent 4.5px
        )
        center center /
        13px 13px
        no-repeat;



    transition:
        filter .3s ease;
}


/* ---------------------------------------------------------
   SOURCE SYSTEM
   Represents the work / system being handed over
   --------------------------------------------------------- */

.outcome-symbol-handoff::before {
    content: "";

    position: absolute;

    left: 2px;
    top: 50%;

    width: 34px;
    height: 44px;

    transform:
        translateY(-50%);

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

    background:

        /* TOP MODULE LINE */
        linear-gradient(
            rgba(242,240,234,.28),
            rgba(242,240,234,.28)
        )
        8px 10px /
        17px 1px
        no-repeat,

        /* MIDDLE MODULE LINE */
        linear-gradient(
            rgba(242,240,234,.18),
            rgba(242,240,234,.18)
        )
        8px 20px /
        13px 1px
        no-repeat,

        /* BOTTOM MODULE LINE */
        linear-gradient(
            rgba(205,187,145,.42),
            rgba(205,187,145,.42)
        )
        8px 30px /
        17px 1px
        no-repeat,

        rgba(242,240,234,.012);

    box-shadow:
        inset 0 0 0 1px
        rgba(242,240,234,.018);

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


/* ---------------------------------------------------------
   RECEIVED / ACCEPTED STATE
   Represents the finished handoff
   --------------------------------------------------------- */

.outcome-symbol-handoff::after {
    content: "✓";

    position: absolute;

    right: 2px;
    top: 50%;

    width: 34px;
    height: 44px;

    transform:
        translateY(-50%);

    display: grid;
    place-items: center;

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

    background:

        /* STATUS BAR */
        linear-gradient(
            rgba(205,187,145,.58),
            rgba(205,187,145,.58)
        )
        center 9px /
        14px 1px
        no-repeat,

        /* SMALL ACCEPTED STATE LINE */
        linear-gradient(
            rgba(242,240,234,.18),
            rgba(242,240,234,.18)
        )
        center 35px /
        11px 1px
        no-repeat,

        #121110;

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

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

    font-size:
        1rem;

    font-weight:
        500;

    box-shadow:
        inset 0 0 0 5px
        rgba(205,187,145,.025);

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


/* =========================================================
   CLEAR HANDOFF — HOVER
   ========================================================= */

.outcome-item:hover
.outcome-symbol-handoff {
    filter:
        brightness(1.08);
}


.outcome-item:hover
.outcome-symbol-handoff::before {
    border-color:
        rgba(242,240,234,.28);

    background:

        linear-gradient(
            rgba(242,240,234,.36),
            rgba(242,240,234,.36)
        )
        8px 10px /
        17px 1px
        no-repeat,

        linear-gradient(
            rgba(242,240,234,.22),
            rgba(242,240,234,.22)
        )
        8px 20px /
        13px 1px
        no-repeat,

        linear-gradient(
            rgba(205,187,145,.55),
            rgba(205,187,145,.55)
        )
        8px 30px /
        17px 1px
        no-repeat,

        rgba(242,240,234,.018);

    box-shadow:
        inset 0 0 0 1px
        rgba(205,187,145,.025);
}


.outcome-item:hover
.outcome-symbol-handoff::after {
    border-color:
        rgba(205,187,145,.72);

    color:
        rgba(205,187,145,1);

    background:

        linear-gradient(
            rgba(205,187,145,.78),
            rgba(205,187,145,.78)
        )
        center 9px /
        14px 1px
        no-repeat,

        linear-gradient(
            rgba(242,240,234,.24),
            rgba(242,240,234,.24)
        )
        center 35px /
        11px 1px
        no-repeat,

        #121110;

    box-shadow:
        inset 0 0 0 5px
        rgba(205,187,145,.035),

        0 0 18px
        rgba(205,187,145,.055);
}

/* =========================================================
   CARD CONTENT SPACING
   ========================================================= */

.outcome-item-content {
    margin-top: auto;
    padding-top: 2.5rem;
}


/* =========================================================
   OUTCOME HOVER RESPONSE
   ========================================================= */


/* ---------------------------------------------------------
   FIXED SCOPE
   Entire visual responds as one system.
   --------------------------------------------------------- */

.outcome-item:hover .outcome-symbol-scope {
    transform:
        translateY(-2px);

    filter:
        brightness(1.06);
}


.outcome-item:hover .outcome-symbol-scope::before {
    border-color:
        rgba(242,240,234,.28);

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

    box-shadow:
        inset 0 0 0 1px
        rgba(205,187,145,.035);
}


.outcome-item:hover .outcome-symbol-scope::after {
    border-color:
        rgba(205,187,145,.72);

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

    box-shadow:
        inset 0 0 0 1px
        rgba(205,187,145,.08),

        inset 0 0 26px
        rgba(205,187,145,.05);

    transform:
        scale(1.025);
}


/* ---------------------------------------------------------
   FIXED PRICE
   --------------------------------------------------------- */

.outcome-item:hover
.outcome-symbol-price {
    border-color:
        rgba(205,187,145,.30);
}

.outcome-item:hover
.outcome-symbol-price::before {
    border-color:
        rgba(205,187,145,.65);
}


/* ---------------------------------------------------------
   EXISTING STACK
   --------------------------------------------------------- */

.outcome-item:hover
.outcome-symbol-stack::before {
    border-color:
        rgba(242,240,234,.24);

    box-shadow:

        0 2rem 0 -1px
            #121110,

        0 2rem 0 0
            rgba(242,240,234,.20),

        0 4rem 0 -1px
            #121110,

        0 4rem 0 0
            rgba(205,187,145,.38);
}


/* ---------------------------------------------------------
   CLEAR HANDOFF
   --------------------------------------------------------- */

.outcome-item:hover
.outcome-symbol-handoff {
    filter:
        brightness(1.08);
}

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

@media (max-width: 700px) {

    .outcome-item-top {
        min-height:
            8.5rem;
    }

    .outcome-symbol {
        transform:
            scale(.9);

        transform-origin:
            left top;
    }

    .outcome-item-content {
        padding-top:
            2rem;
    }

}












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

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


/* =========================================================
   HOMEPAGE HEADER — LOCK DURING CAIRN CONSTRUCTION
   ========================================================= */

.site-header.cairn-header-locked {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
}

/* =========================================================
   HOMEPAGE LOGO — PART OF STICKY HERO
   ========================================================= */

.hero-logo {
    position: absolute;

    top:
        clamp(
            1.2rem,
            2vw,
            2rem
        );

    left:
        clamp(
            1.25rem,
            3vw,
            4rem
        );

    display: block;

    width: max-content;

    z-index: 20;

    pointer-events: auto;
}


.hero-logo img {
    display: block;

    width: 120px;
    height: auto;

    max-height: 200px;

    object-fit: contain;
}


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

@media (max-width: 560px) {

    .hero-logo {
        top: 1rem;
        left: 1rem;
    }

    .hero-logo img {
        width: 100px;
    }

}




/* =========================================================
   CAIRN HERO — MOBILE RECOMPOSITION
   Keep text and cairn visually separated on phones
   ========================================================= */

@media (max-width: 820px) {

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

    .cairn-sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        min-height: 650px;

        align-items: flex-start;

        padding:
            6.5rem
            1.1rem
            0;
    }

    .hero-inner {
        position: relative;
        width: 100%;
        height: 100%;

        display: block;

        margin: 0;
    }


    /* ---------------------------------------------------------
       HERO COPY
       Text owns the upper portion of the phone screen
       --------------------------------------------------------- */

    .hero-copy {
        position: relative;
        z-index: 30;

        width: 100%;
        max-width: 100%;

        padding-right: .15rem;
    }

    .hero-title {
        max-width: 8ch;

        font-size:
            clamp(
                3.7rem,
                15.8vw,
                6.4rem
            );

        line-height: .82;

        letter-spacing: -.065em;
    }

    .hero-subtitle {
        position: relative;
        z-index: 30;

        width: 92%;
        max-width: 28rem;

        margin-top: 1.4rem;

        font-size:
            clamp(
                .86rem,
                3.8vw,
                1rem
            );

        line-height: 1.42;
    }

    .hero-service-line {
        position: relative;
        z-index: 30;

        width: 92%;

        margin-top: .8rem;

        font-size:
            clamp(
                .68rem,
                3vw,
                .82rem
            );

        line-height: 1.4;
    }


    /* ---------------------------------------------------------
       CAIRN VISUAL
       Move the entire cairn BELOW the copy
       --------------------------------------------------------- */

    .cairn-visual {
        position: absolute;

        top: 48%;
        bottom: auto;

        left: 0;
        right: 0;

        width: 100%;
        height: 52%;

        min-height: 0;

        overflow: visible;

        z-index: 4;

        pointer-events: none;
    }


    /* ---------------------------------------------------------
       GLOW
       --------------------------------------------------------- */

    .cairn-glow {
        right: 50%;
        bottom: 7%;

        width: 65vw;
        height: 65vw;

        transform: translateX(50%);
    }


    /* ---------------------------------------------------------
       ROCK STACK
       Center the entire cairn instead of pushing it
       into the text from the right
       --------------------------------------------------------- */

    .rock-stack {
        left: 50%;
        right: auto;

        bottom: 2%;

        width:
            min(
                72vw,
                330px
            );

        height: 92%;

        min-width: 0;
        min-height: 0;

        transform: translateX(-50%);
    }


    /* ---------------------------------------------------------
       ROCK LABELS
       Slightly smaller on phones
       --------------------------------------------------------- */

    .rock-label {
        width: 76%;
        max-width: 76%;

        font-size: .52rem;
        line-height: 1.15;
    }

    .rock-1 .rock-label {
        font-size: .58rem;
    }

    .rock-2 .rock-label {
        width: 69%;
        max-width: 69%;

        font-size: .47rem;
    }

    .rock-4 .rock-label,
    .rock-5 .rock-label {
        font-size: .44rem;
    }


    /* ---------------------------------------------------------
       GROUND
       --------------------------------------------------------- */

    .cairn-ground {
        left: 50%;
        right: auto;

        width: 72vw;

        bottom: 1.5%;

        transform: translateX(-50%);
    }
}


/* =========================================================
   SMALL PHONE — MORE VERTICAL SEPARATION
   ========================================================= */

@media (max-width: 560px) {

    .cairn-sticky {
        min-height: 680px;

        padding:
            6rem
            1rem
            0;
    }


    .hero-title {
        max-width: 8ch;

        font-size:
            clamp(
                3.3rem,
                16.8vw,
                5.5rem
            );

        line-height: .82;
    }

    .hero-subtitle {
        width: 94%;

        margin-top: 1.25rem;

        font-size: .88rem;
    }

    .hero-service-line {
        width: 92%;

        font-size: .68rem;
    }


    /* Push the cairn farther down */
    .cairn-visual {
        top: 54%;
        height: 46%;
    }


    .rock-stack {
        left: 50%;
        right: auto;

        width: 74vw;

        height: 92%;

        min-width: 0;
        min-height: 0;

        bottom: 2%;

        transform: translateX(-50%);
    }


    .rock-label {
        width: 74%;
        max-width: 74%;

        font-size: .45rem;
        line-height: 1.14;
    }

    .rock-1 .rock-label {
        font-size: .52rem;
    }

    .rock-2 .rock-label {
        width: 68%;
        max-width: 68%;

        font-size: .42rem;
    }

    .rock-4 .rock-label,
    .rock-5 .rock-label {
        font-size: .40rem;
    }


    .cairn-ground {
        width: 70vw;
        bottom: 1%;
    }
}

/* =========================================================
   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;
    }

}