/* =========================================================
   RIGSAM GIS
   GIS ASSET MANAGEMENT SYSTEM
   ---------------------------------------------------------
   SEMANTIC GIS COLOUR SYSTEM

   LAND / TERRAIN        = Earth / Brown
   VEGETATION / FARM     = Green
   WATER / HYDROLOGY     = Teal / Blue
   INFRASTRUCTURE        = Terracotta / Red
   ANALYSIS / DECISION   = Amber / Ochre
   DATA / REFERENCE      = Slate / Grey
   GIS PLATFORM          = Forest
========================================================= */


/* =========================================================
   GIS COLOUR VARIABLES
========================================================= */

:root {

    /* GIS BASE */
    --gis-forest: #26392f;
    --gis-forest-dark: #1c2e27;
    --gis-forest-soft: #354f44;

    /* LAND / TERRAIN */
    --gis-land: #a96743;
    --gis-land-dark: #875337;
    --gis-land-light: #f0e4d9;
    --gis-land-pale: #f8f3ed;

    /* VEGETATION / AGRICULTURE */
    --gis-green: #668658;
    --gis-green-dark: #4f7048;
    --gis-green-light: #e5eee1;
    --gis-green-pale: #f3f7f0;

    /* WATER / HYDROLOGY */
    --gis-water: #39818a;
    --gis-water-dark: #286872;
    --gis-water-light: #dceef0;
    --gis-water-pale: #f0f7f7;

    /* INFRASTRUCTURE / BUILT-UP */
    --gis-built: #b85f47;
    --gis-built-dark: #964936;
    --gis-built-light: #f3dfd8;
    --gis-built-pale: #faf2ef;

    /* ANALYSIS / DECISION */
    --gis-analysis: #a39142;
    --gis-analysis-dark: #776d30;
    --gis-analysis-light: #eee9cf;
    --gis-analysis-pale: #f8f6e9;

    /* DATA / REFERENCE */
    --gis-data: #64736f;
    --gis-data-dark: #485853;
    --gis-data-light: #e4e9e7;
    --gis-data-pale: #f3f5f4;

    /* PEOPLE / COMMUNITY */
    --gis-people: #c4864e;
    --gis-people-dark: #9c6439;
    --gis-people-light: #f3e4d3;

    /* COMMON */
    --gis-white: #ffffff;
    --gis-text: #30413a;
    --gis-text-soft: #66736c;
    --gis-border: #dce1da;
    --gis-page: #f5f4ed;
}


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

.rs-home-page {
    width: 100%;
    overflow: hidden;

    color: var(--gis-text);

    background:
        var(--gis-page);
}


.rs-home-page *,
.rs-home-page *::before,
.rs-home-page *::after {
    box-sizing: border-box;
}


.rs-home-page h1,
.rs-home-page h2,
.rs-home-page h3,
.rs-home-page p {
    margin-top: 0;
}


.rs-home-page a {
    text-decoration: none;
}


/* =========================================================
   COMMON SECTION LABEL
========================================================= */

.rs-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--gis-green-dark);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.rs-section-label::before {
    content: "";

    width: 20px;
    height: 2px;

    background:
        var(--gis-green);
}


/* =========================================================
   COMMON SECTION HEADING
========================================================= */

.rs-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.85fr);

    gap: 60px;

    align-items: end;
}


.rs-section-heading h2 {
    margin:
        10px 0 0;

    color: var(--gis-forest);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1px;
}


.rs-section-heading > p {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   COMMON BUTTONS
========================================================= */

.rs-primary-button,
.rs-secondary-button {
    min-height: 46px;

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

    gap: 12px;

    padding:
        0 20px;

    border-radius: 6px;

    font-size: 12px;
    font-weight: 700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


.rs-primary-button {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--gis-green),
            var(--gis-water-dark)
        );

    box-shadow:
        0 8px 22px rgba(40,104,114,0.20);
}


.rs-primary-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 13px 28px rgba(40,104,114,0.28);
}


.rs-primary-button span {
    font-size: 17px;
    line-height: 1;
}


.rs-secondary-button {
    color: var(--gis-forest);

    background:
        rgba(255,255,255,0.82);

    border:
        1px solid rgba(255,255,255,0.50);
}


.rs-secondary-button:hover {
    background: #ffffff;

    border-color:
        rgba(102,134,88,0.40);

    transform:
        translateY(-2px);
}


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

.rs-hero {
    position: relative;

    min-height: 680px;

    display: grid;

    grid-template-columns:
        minmax(0, 0.90fr)
        minmax(460px, 1.10fr);

    align-items: center;

    gap: 50px;

    padding:
        80px 5vw;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            #1c2e27 0%,
            #26392f 48%,
            #314b40 100%
        );

    overflow: hidden;
}


/* topographic background */

.rs-hero-grid {
    position: absolute;

    inset: 0;

    opacity: 0.14;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.08) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    pointer-events: none;
}


.rs-hero::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -260px;
    bottom: -320px;

    border-radius: 50%;

    border:
        1px solid rgba(102,134,88,0.20);

    box-shadow:
        0 0 0 40px rgba(102,134,88,0.035),
        0 0 0 90px rgba(57,129,138,0.025);
}


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

.rs-hero-content {
    position: relative;

    z-index: 5;

    max-width: 660px;
}


.rs-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color:
        rgba(255,255,255,0.68);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.rs-eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--gis-green);

    box-shadow:
        0 0 0 5px rgba(102,134,88,0.14);
}


.rs-hero h1 {
    max-width: 700px;

    margin:
        0 0 25px;

    color: #ffffff;

    font-size:
        clamp(48px, 6vw, 76px);

    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -3px;
}


.rs-hero h1 span {
    color:
        #b7c98d;
}


.rs-hero-description {
    max-width: 620px;

    margin:
        0 0 30px;

    color:
        rgba(255,255,255,0.70);

    font-size: 15px;

    line-height: 1.85;
}


.rs-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.rs-hero-note {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 25px;

    color:
        rgba(255,255,255,0.42);

    font-size: 9px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.rs-hero-note span {
    width: 22px;
    height: 1px;

    background:
        var(--gis-water);
}


/* =========================================================
   HERO SPATIAL VISUAL
========================================================= */

.rs-spatial-visual {
    position: relative;

    z-index: 5;

    min-height: 500px;

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


.rs-map-surface {
    position: relative;

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

    height: 450px;

    border-radius: 18px;

    overflow: hidden;

    background:
        #dfe5d8;

    border:
        1px solid rgba(255,255,255,0.14);

    box-shadow:
        0 30px 70px rgba(0,0,0,0.28);

    transform:
        perspective(900px)
        rotateY(-5deg)
        rotateX(2deg);
}


/* map grid */

.rs-map-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(70,91,76,0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(70,91,76,0.12) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}


/* topographic lines */

.rs-map-topographic {
    position: absolute;

    inset: -20%;

    opacity: 0.32;

    background:
        repeating-radial-gradient(
            ellipse at 30% 40%,
            transparent 0,
            transparent 18px,
            rgba(98,111,78,0.18) 19px,
            transparent 20px,
            transparent 37px
        );

    transform:
        rotate(-8deg);
}


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

.rs-land-shape {
    position: absolute;

    background:
        var(--gis-land-light);

    border:
        1px solid rgba(135,83,55,0.35);

    box-shadow:
        inset 0 0 0 20px rgba(169,103,67,0.035);
}


.rs-land-one {
    width: 55%;
    height: 48%;

    left: -5%;
    top: 12%;

    border-radius:
        42% 58% 63% 37% /
        46% 40% 60% 54%;

    transform:
        rotate(-11deg);
}


.rs-land-two {
    width: 48%;
    height: 52%;

    right: -3%;
    bottom: -4%;

    border-radius:
        58% 42% 35% 65% /
        40% 56% 44% 60%;

    transform:
        rotate(12deg);
}


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

.rs-water-shape {
    position: absolute;

    width: 31%;
    height: 78%;

    right: 24%;
    top: 5%;

    background:
        var(--gis-water-light);

    border:
        1px solid rgba(57,129,138,0.42);

    border-radius:
        65% 35% 52% 48% /
        32% 62% 38% 68%;

    transform:
        rotate(13deg);
}


.rs-water-shape::after {
    content: "";

    position: absolute;

    inset: 15px;

    border:
        1px solid rgba(57,129,138,0.25);

    border-radius: inherit;
}


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

.rs-road {
    position: absolute;

    height: 3px;

    background:
        rgba(120,106,88,0.55);

    transform-origin: left center;

    box-shadow:
        0 0 0 1px rgba(255,255,255,0.35);
}


.rs-road-one {
    width: 72%;

    left: 6%;
    top: 54%;

    transform:
        rotate(-14deg);
}


.rs-road-two {
    width: 60%;

    left: 20%;
    top: 30%;

    transform:
        rotate(31deg);
}


.rs-road-three {
    width: 48%;

    left: 40%;
    top: 67%;

    transform:
        rotate(-38deg);
}


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

.rs-map-point {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background:
        var(--gis-built);

    border:
        3px solid #ffffff;

    box-shadow:
        0 3px 8px rgba(0,0,0,0.20);
}


.point-one {
    left: 23%;
    top: 37%;
}


.point-two {
    left: 57%;
    top: 23%;
}


.point-three {
    left: 68%;
    top: 58%;
}


.point-four {
    left: 37%;
    top: 72%;
}


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

.rs-map-label {
    position: absolute;

    padding:
        5px 8px;

    border-radius: 4px;

    background:
        rgba(38,57,47,0.86);

    color: #ffffff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 0.8px;
}


.label-one {
    left: 17%;
    top: 42%;
}


.label-two {
    left: 60%;
    top: 17%;
}


.label-three {
    right: 8%;
    bottom: 19%;
}


/* =========================================================
   MAP INFORMATION PANEL
========================================================= */

.rs-coordinate-panel {
    position: absolute;

    left: 20px;
    bottom: 20px;

    min-width: 190px;

    padding:
        14px 16px;

    border-radius: 8px;

    background:
        rgba(28,46,39,0.90);

    color: #ffffff;

    border:
        1px solid rgba(255,255,255,0.12);

    box-shadow:
        0 10px 25px rgba(0,0,0,0.18);
}


.rs-coordinate-panel small {
    display: block;

    margin-bottom: 6px;

    color:
        rgba(255,255,255,0.48);

    font-size: 8px;

    letter-spacing: 1px;
}


.rs-coordinate-panel strong {
    display: block;

    color: #ffffff;

    font-size: 13px;
}


.rs-coordinate-panel span {
    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,0.55);

    font-size: 9px;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.rs-introduction {
    display: grid;

    grid-template-columns:
        0.25fr 1.75fr;

    gap: 50px;

    padding:
        100px 8vw;

    background:
        #ffffff;

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


.rs-introduction-label {
    padding-top: 8px;

    color:
        var(--gis-green-dark);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.8px;
}


.rs-introduction-content {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;
}


.rs-introduction h2 {
    margin:
        10px 0 0;

    color:
        var(--gis-forest);

    font-size:
        clamp(30px, 4vw, 47px);

    line-height: 1.08;

    letter-spacing: -1.2px;
}


.rs-introduction p {
    margin:
        0 0 18px;

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

    font-size: 14px;

    line-height: 1.85;
}


.rs-introduction strong {
    color:
        var(--gis-forest);
}


/* =========================================================
   SYSTEM BEHAVIOUR
========================================================= */

.rs-behaviour {
    padding:
        100px 5vw;

    background:
        var(--gis-green-pale);
}


.rs-behaviour-flow {
    display: grid;

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

    align-items: center;

    gap: 12px;

    margin-top: 50px;
}


.rs-behaviour-step {
    min-height: 190px;

    padding:
        25px 20px;

    border-radius: 10px;

    background:
        #ffffff;

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

    box-shadow:
        0 8px 25px rgba(39,58,48,0.055);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.rs-behaviour-step:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 14px 32px rgba(39,58,48,0.10);
}


.rs-behaviour-step span {
    display: flex;

    width: 34px;
    height: 34px;

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

    margin-bottom: 25px;

    border-radius: 50%;

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}


.rs-behaviour-step strong {
    display: block;

    margin-bottom: 8px;

    color:
        var(--gis-forest);

    font-size: 19px;
}


.rs-behaviour-step p {
    margin: 0;

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

    font-size: 11px;

    line-height: 1.6;
}


.rs-flow-arrow {
    color:
        #aab4ad;

    font-size: 21px;
}


/* Semantic behaviour colours */

.behaviour-location {
    border-top:
        4px solid var(--gis-green);
}


.behaviour-location span {
    background:
        var(--gis-green);
}


.behaviour-identity {
    border-top:
        4px solid var(--gis-water);
}


.behaviour-identity span {
    background:
        var(--gis-water);
}


.behaviour-data {
    border-top:
        4px solid var(--gis-data);
}


.behaviour-data span {
    background:
        var(--gis-data);
}


.behaviour-monitor {
    border-top:
        4px solid var(--gis-analysis);
}


.behaviour-monitor span {
    background:
        var(--gis-analysis);
}


.behaviour-decision {
    border-top:
        4px solid var(--gis-built);
}


.behaviour-decision span {
    background:
        var(--gis-built);
}



/* =========================================================
   ASSET LIFECYCLE
   ---------------------------------------------------------
   GIS / ASSET MANAGEMENT PROCESS

   PLAN       = Analysis / Amber
   CREATE     = Built Environment / Terracotta
   LOCATE     = Geography / Teal
   OPERATE    = Forest / Green
   MONITOR    = Data / Slate
   MAINTAIN   = Earth / Brown
========================================================= */

.rs-lifecycle {
    position: relative;

    padding:
        105px 5vw;

    background:
        #ffffff;

    overflow: hidden;
}


/* ---------------------------------------------------------
   SUBTLE SPATIAL BACKGROUND
--------------------------------------------------------- */

.rs-lifecycle::before {
    content: "";

    position: absolute;

    left: -180px;
    bottom: -220px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    border:
        1px solid rgba(57,129,138,0.10);

    box-shadow:
        0 0 0 35px rgba(57,129,138,0.025),
        0 0 0 75px rgba(102,134,88,0.025),
        0 0 0 120px rgba(169,103,67,0.020);

    pointer-events: none;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.rs-lifecycle-intro {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin:
        0 auto 55px;

    text-align: center;
}


.rs-lifecycle-intro h2 {
    margin:
        10px 0 14px;

    color:
        var(--gis-forest);

    font-size:
        clamp(30px, 4vw, 46px);

    line-height:
        1.1;

    letter-spacing:
        -1px;
}


.rs-lifecycle-intro p {
    max-width: 720px;

    margin:
        0 auto;

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

    font-size:
        13px;

    line-height:
        1.75;
}


/* =========================================================
   LIFECYCLE TRACK
========================================================= */

.rs-lifecycle-track {
    position: relative;

    z-index: 2;

    display: grid;

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

    max-width:
        1250px;

    margin:
        0 auto;

    padding:
        35px 0 20px;
}


/* ---------------------------------------------------------
   CONNECTING LINE
--------------------------------------------------------- */

.rs-lifecycle-track::before {
    content: "";

    position: absolute;

    left: 7%;

    right: 7%;

    top: 69px;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--gis-analysis) 0%,
            var(--gis-built) 20%,
            var(--gis-water) 40%,
            var(--gis-green) 60%,
            var(--gis-data) 80%,
            var(--gis-land) 100%
        );

    border-radius:
        10px;

    opacity:
        0.55;
}


/* =========================================================
   LIFECYCLE ITEM
========================================================= */

.rs-life-item {
    position: relative;

    z-index: 2;

    min-width: 0;

    padding:
        0 10px;

    text-align:
        center;
}


/* ---------------------------------------------------------
   STEP NUMBER / NODE
--------------------------------------------------------- */

.rs-life-item::before {
    content: "";

    position: relative;

    display: flex;

    width: 62px;
    height: 62px;

    margin:
        0 auto 25px;

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

    border-radius: 50%;

    background:
        #ffffff;

    border:
        5px solid currentColor;

    box-shadow:
        0 5px 15px rgba(39,58,48,0.13);

    box-sizing:
        border-box;
}


/* ---------------------------------------------------------
   INNER NODE
--------------------------------------------------------- */

.rs-life-item::after {
    content: "";

    position: absolute;

    top: 20px;
    left: 50%;

    width: 22px;
    height: 22px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        currentColor;

    box-shadow:
        0 0 0 5px rgba(255,255,255,0.85);

    z-index:
        3;
}


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

.rs-life-item h3 {
    margin:
        0 0 9px;

    color:
        var(--gis-forest);

    font-size:
        16px;

    line-height:
        1.25;

    font-weight:
        700;
}


.rs-life-item p {
    max-width:
        170px;

    margin:
        0 auto;

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

    font-size:
        11px;

    line-height:
        1.65;
}


/* =========================================================
   PLAN
   Analysis / Planning
========================================================= */

.life-plan {
    color:
        var(--gis-analysis);
}


.life-plan h3 {
    color:
        var(--gis-analysis-dark);
}


/* =========================================================
   CREATE
   Built Environment
========================================================= */

.life-create {
    color:
        var(--gis-built);
}


.life-create h3 {
    color:
        var(--gis-built-dark);
}


/* =========================================================
   LOCATE
   Spatial / Geography
========================================================= */

.life-locate {
    color:
        var(--gis-water);
}


.life-locate h3 {
    color:
        var(--gis-water-dark);
}


/* =========================================================
   OPERATE
   Natural / Green
========================================================= */

.life-operate {
    color:
        var(--gis-green);
}


.life-operate h3 {
    color:
        var(--gis-green-dark);
}


/* =========================================================
   MONITOR
   Data / Information
========================================================= */

.life-monitor {
    color:
        var(--gis-data);
}


.life-monitor h3 {
    color:
        var(--gis-data-dark);
}


/* =========================================================
   MAINTAIN
   Earth / Physical Asset
========================================================= */

.life-maintain {
    color:
        var(--gis-land);
}


.life-maintain h3 {
    color:
        var(--gis-land-dark);
}


/* =========================================================
   HOVER EFFECT
========================================================= */

.rs-life-item {
    transition:
        transform 0.22s ease;
}


.rs-life-item:hover {
    transform:
        translateY(-5px);
}


.rs-life-item:hover::before {
    box-shadow:
        0 8px 22px rgba(39,58,48,0.18);
}


.rs-life-item:hover::after {
    transform:
        translateX(-50%) scale(1.12);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .rs-lifecycle-track {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        row-gap:
            45px;
    }

    .rs-lifecycle-track::before {
        display:
            none;
    }

}


@media (max-width: 700px) {

    .rs-lifecycle {
        padding:
            80px 5vw;
    }

    .rs-lifecycle-track {
        grid-template-columns:
            1fr 1fr;

        gap:
            40px 10px;

        padding-top:
            15px;
    }

}


@media (max-width: 480px) {

    .rs-lifecycle-track {
        grid-template-columns:
            1fr;
    }

    .rs-life-item p {
        max-width:
            250px;
    }

}




/* =========================================================
   SYSTEM GOALS
   ---------------------------------------------------------
   GIS SEMANTIC COLOUR

   01 VISIBILITY       = Vegetation / Green
   02 CONTROL          = Infrastructure / Terracotta
   03 LIFECYCLE        = Land / Earth
   04 BETTER DECISIONS = Analysis / Ochre
========================================================= */

.rs-goals {
    position: relative;

    padding:
        100px 5vw;

    background:
        linear-gradient(
            135deg,
            #eef3e8 0%,
            #f7f2e9 50%,
            #f3eee3 100%
        );

    overflow: hidden;
}


/* ---------------------------------------------------------
   SUBTLE GIS CONTOUR / SPATIAL DECORATION
--------------------------------------------------------- */

.rs-goals::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -250px;
    top: -240px;

    border-radius: 50%;

    border:
        1px solid rgba(102,134,88,0.22);

    box-shadow:
        0 0 0 35px rgba(102,134,88,0.045),
        0 0 0 75px rgba(57,129,138,0.035),
        0 0 0 120px rgba(169,103,67,0.025);

    pointer-events: none;
}


/* ---------------------------------------------------------
   GOAL GRID
--------------------------------------------------------- */

.rs-goal-grid {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 22px;

    margin-top: 48px;
}


/* ---------------------------------------------------------
   COMMON CARD
--------------------------------------------------------- */

.rs-goal-card {
    position: relative;

    min-height: 285px;

    padding:
        28px 27px 30px;

    border-radius: 14px;

    overflow: hidden;

    border:
        1px solid rgba(48,65,58,0.13);

    box-shadow:
        0 8px 25px rgba(39,58,48,0.08);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.rs-goal-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 38px rgba(39,58,48,0.15);
}


/* ---------------------------------------------------------
   LARGE NUMBER
--------------------------------------------------------- */

.rs-goal-number {
    position: absolute;

    right: 16px;
    top: 10px;

    font-size: 70px;

    line-height: 1;

    font-weight: 800;

    color:
        rgba(38,57,47,0.08);
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

.rs-goal-icon {
    width: 52px;
    height: 52px;

    display: flex;

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

    margin-bottom: 34px;

    border-radius: 12px;

    color:
        #ffffff;

    font-size: 20px;

    box-shadow:
        0 7px 16px rgba(39,58,48,0.16);
}


/* ---------------------------------------------------------
   TEXT
--------------------------------------------------------- */

.rs-goal-card h3 {
    margin:
        0 0 12px;

    color:
        var(--gis-forest);

    font-size: 21px;

    line-height: 1.2;
}


.rs-goal-card p {
    margin: 0;

    color:
        var(--gis-text);

    font-size: 12px;

    line-height: 1.75;
}


/* =========================================================
   01 — VISIBILITY
   GIS MEANING: VEGETATION / GREEN
========================================================= */

.goal-visibility {

    background:
        linear-gradient(
            145deg,
            #dfead9 0%,
            #eef5e9 48%,
            #f7f9f4 100%
        );

    border-top:
        6px solid var(--gis-green);
}


.goal-visibility::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -65px;
    bottom: -65px;

    border-radius: 50%;

    border:
        18px solid rgba(102,134,88,0.09);
}


.goal-visibility .rs-goal-icon {

    background:
        linear-gradient(
            135deg,
            var(--gis-green),
            var(--gis-green-dark)
        );
}


/* =========================================================
   02 — CONTROL
   GIS MEANING: BUILT ENVIRONMENT / INFRASTRUCTURE
========================================================= */

.goal-control {

    background:
        linear-gradient(
            145deg,
            #f0ddd5 0%,
            #f8eae4 48%,
            #fbf5f2 100%
        );

    border-top:
        6px solid var(--gis-built);
}


.goal-control::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -65px;
    bottom: -65px;

    border-radius: 50%;

    border:
        18px solid rgba(184,95,71,0.09);
}


.goal-control .rs-goal-icon {

    background:
        linear-gradient(
            135deg,
            var(--gis-built),
            var(--gis-built-dark)
        );
}


/* =========================================================
   03 — LIFECYCLE MANAGEMENT
   GIS MEANING: LAND / EARTH
========================================================= */

.goal-lifecycle {

    background:
        linear-gradient(
            145deg,
            #ead9cc 0%,
            #f3e7dc 48%,
            #faf5ef 100%
        );

    border-top:
        6px solid var(--gis-land);
}


.goal-lifecycle::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -65px;
    bottom: -65px;

    border-radius: 50%;

    border:
        18px solid rgba(169,103,67,0.09);
}


.goal-lifecycle .rs-goal-icon {

    background:
        linear-gradient(
            135deg,
            var(--gis-land),
            var(--gis-land-dark)
        );
}


/* =========================================================
   04 — BETTER DECISIONS
   GIS MEANING: ANALYSIS / SPATIAL INTELLIGENCE
========================================================= */

.goal-decision {

    background:
        linear-gradient(
            145deg,
            #eee8c9 0%,
            #f5f1dc 48%,
            #faf9ef 100%
        );

    border-top:
        6px solid var(--gis-analysis);
}


.goal-decision::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -65px;
    bottom: -65px;

    border-radius: 50%;

    border:
        18px solid rgba(163,145,66,0.10);
}


.goal-decision .rs-goal-icon {

    background:
        linear-gradient(
            135deg,
            var(--gis-analysis),
            var(--gis-analysis-dark)
        );
}


/* =========================================================
   KEY OBJECTIVES
========================================================= */

.rs-objectives {
    position: relative;

    padding:
        105px 5vw;

    background:
        #ffffff;
}


.rs-objectives::before {
    content: "";

    position: absolute;

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

    width: 6px;

    background:
        linear-gradient(
            180deg,
            var(--gis-land),
            var(--gis-green),
            var(--gis-water),
            var(--gis-built),
            var(--gis-analysis)
        );
}


.rs-objectives-header {
    max-width: 850px;

    margin:
        0 auto 48px;
}


.rs-objectives-header h2 {
    margin:
        10px 0 0;

    color:
        var(--gis-forest);

    font-size:
        clamp(30px, 4vw, 46px);

    line-height: 1.1;

    letter-spacing: -1px;
}


.rs-objective-list {
    display: flex;

    flex-direction: column;

    gap: 13px;

    max-width: 1180px;

    margin: auto;
}


.rs-objective-row {
    position: relative;

    display: grid;

    grid-template-columns:
        80px 1fr;

    align-items: center;

    min-height: 125px;

    padding:
        24px 32px;

    border-radius: 9px;

    overflow: hidden;

    background:
        #f7f8f5;

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

    box-shadow:
        0 4px 14px rgba(39,58,48,0.035);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.rs-objective-row:hover {
    transform:
        translateX(5px);

    box-shadow:
        0 10px 24px rgba(39,58,48,0.09);
}


.rs-objective-row::before {
    content: "";

    position: absolute;

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

    width: 7px;
}


.rs-objective-index {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;
}


.rs-objective-row h3 {
    margin:
        0 0 7px;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 700;

    color:
        var(--gis-forest);
}


.rs-objective-row p {
    max-width: 880px;

    margin: 0;

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

    font-size: 12px;

    line-height: 1.7;
}


/* 01 DATA */

.objective-green {
    background:
        var(--gis-data-pale);

    border-color:
        rgba(100,115,111,0.20);
}


.objective-green::before {
    background:
        var(--gis-data);
}


.objective-green .rs-objective-index {
    background:
        var(--gis-data);
}


/* 02 SPATIAL */

.objective-teal {
    background:
        var(--gis-water-pale);

    border-color:
        rgba(57,129,138,0.22);
}


.objective-teal::before {
    background:
        var(--gis-water);
}


.objective-teal .rs-objective-index {
    background:
        var(--gis-water);
}


/* 03 INFRASTRUCTURE */

.objective-earth {
    background:
        var(--gis-built-pale);

    border-color:
        rgba(184,95,71,0.22);
}


.objective-earth::before {
    background:
        var(--gis-built);
}


.objective-earth .rs-objective-index {
    background:
        var(--gis-built);
}


/* 04 MONITORING */

.objective-olive {
    background:
        var(--gis-analysis-pale);

    border-color:
        rgba(163,145,66,0.25);
}


.objective-olive::before {
    background:
        var(--gis-analysis);
}


.objective-olive .rs-objective-index {
    background:
        var(--gis-analysis);
}


/* 05 DECISION */

.objective-slate {
    background:
        var(--gis-green-pale);

    border-color:
        rgba(102,134,88,0.22);
}


.objective-slate::before {
    background:
        var(--gis-green);
}


.objective-slate .rs-objective-index {
    background:
        var(--gis-green);
}


/* =========================================================
   SPATIAL DOMAINS
========================================================= */

.rs-capabilities {
    padding:
        105px 5vw;

    background:
        linear-gradient(
            180deg,
            #f1f3ec,
            #f8f7f1
        );
}


.rs-domain-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 50px;
}


.rs-domain-card {
    position: relative;

    min-height: 360px;

    padding:
        25px;

    border-radius: 12px;

    background:
        #ffffff;

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

    overflow: hidden;

    box-shadow:
        0 7px 22px rgba(39,58,48,0.06);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.rs-domain-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 18px 35px rgba(39,58,48,0.12);
}


.rs-domain-top {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;
}


.rs-domain-number {
    font-size: 10px;

    font-weight: 800;

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


.rs-domain-symbol {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================================
   DOMAIN GRAPHICS
========================================================= */

.rs-domain-shape {
    position: relative;

    width: 120px;
    height: 120px;

    margin:
        30px auto 28px;

    border-radius: 50%;

    overflow: hidden;
}


/* LAND */

.land-card {
    border-top:
        5px solid var(--gis-land);
}


.land-card .rs-domain-symbol {
    color:
        var(--gis-land-dark);
}


.land-shape {
    background:
        var(--gis-land-light);

    border:
        1px solid rgba(169,103,67,0.30);

    border-radius:
        43% 57% 48% 52% /
        58% 39% 61% 42%;

    transform:
        rotate(-8deg);
}


.land-shape::before,
.land-shape::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(169,103,67,0.30);
}


.land-shape::before {
    width: 75px;
    height: 75px;

    left: 20px;
    top: 18px;
}


.land-shape::after {
    width: 40px;
    height: 40px;

    left: 38px;
    top: 35px;
}


/* NATURE */

.nature-card {
    border-top:
        5px solid var(--gis-green);
}


.nature-card .rs-domain-symbol {
    color:
        var(--gis-green-dark);
}


.nature-shape {
    background:
        var(--gis-green-light);

    border-radius:
        55% 45% 60% 40% /
        45% 58% 42% 55%;

    border:
        1px solid rgba(102,134,88,0.30);
}


.nature-shape::before {
    content: "";

    position: absolute;

    width: 55px;
    height: 75px;

    left: 31px;
    top: 20px;

    background:
        rgba(102,134,88,0.45);

    border-radius:
        100% 0 100% 0;

    transform:
        rotate(-35deg);
}


.nature-shape::after {
    content: "";

    position: absolute;

    width: 3px;
    height: 72px;

    left: 58px;
    top: 30px;

    background:
        var(--gis-green-dark);

    transform:
        rotate(20deg);
}


/* ASSETS */

.asset-card {
    border-top:
        5px solid var(--gis-built);
}


.asset-card .rs-domain-symbol {
    color:
        var(--gis-built-dark);
}


.asset-shape {
    background:
        var(--gis-built-light);

    border-radius:
        12px;

    border:
        1px solid rgba(184,95,71,0.30);

    transform:
        rotate(45deg) scale(0.78);
}


.asset-shape::before {
    content: "";

    position: absolute;

    left: 25px;
    top: 25px;

    width: 70px;
    height: 70px;

    border:
        8px solid rgba(184,95,71,0.42);
}


.asset-shape::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 18px;

    left: 43px;
    top: 43px;

    background:
        var(--gis-built);
}


/* PEOPLE */

.people-card {
    border-top:
        5px solid var(--gis-people);
}


.people-card .rs-domain-symbol {
    color:
        var(--gis-people-dark);
}


.people-shape {
    background:
        var(--gis-people-light);

    border:
        1px solid rgba(196,134,78,0.30);
}


.people-shape::before {
    content: "";

    position: absolute;

    width: 30px;
    height: 30px;

    left: 45px;
    top: 24px;

    border-radius: 50%;

    background:
        var(--gis-people);
}


.people-shape::after {
    content: "";

    position: absolute;

    width: 68px;
    height: 42px;

    left: 26px;
    top: 60px;

    border-radius:
        50% 50% 20% 20%;

    background:
        var(--gis-people);
}


/* =========================================================
   DOMAIN TEXT
========================================================= */

.rs-domain-card h3 {
    margin:
        0 0 10px;

    color:
        var(--gis-forest);

    font-size: 19px;

    line-height: 1.25;
}


.rs-domain-card p {
    margin: 0;

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

    font-size: 12px;

    line-height: 1.7;
}


.rs-domain-line {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 22px;

    height: 2px;

    opacity: 0.55;
}


.land-card .rs-domain-line {
    background:
        var(--gis-land);
}


.nature-card .rs-domain-line {
    background:
        var(--gis-green);
}


.asset-card .rs-domain-line {
    background:
        var(--gis-built);
}


.people-card .rs-domain-line {
    background:
        var(--gis-people);
}


/* =========================================================
   PLATFORM VALUE
========================================================= */

.rs-platform-section {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 0.8fr);

    gap: 70px;

    align-items: center;

    padding:
        110px 8vw;

    color: #ffffff;

    background:
        linear-gradient(
            120deg,
            var(--gis-forest-dark),
            var(--gis-forest)
        );

    overflow: hidden;
}


.rs-platform-content {
    position: relative;
    z-index: 2;

    max-width: 650px;
}


.rs-platform-content .rs-section-label {
    color:
        #b6c99a;
}


.rs-platform-content h2 {
    margin:
        15px 0 25px;

    color:
        #ffffff;

    font-size:
        clamp(38px, 5vw, 62px);

    line-height: 1.02;

    letter-spacing: -2px;
}


.rs-platform-content p {
    max-width: 610px;

    color:
        rgba(255,255,255,0.66);

    font-size: 14px;

    line-height: 1.85;
}


/* =========================================================
   PLATFORM POINTS
========================================================= */

.rs-platform-points {
    display: grid;

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

    gap: 12px;

    margin-top: 35px;
}


.rs-platform-points > div {
    min-height: 100px;

    padding:
        18px;

    border-radius: 8px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid rgba(255,255,255,0.08);
}


.rs-platform-points span {
    display: block;

    margin-bottom: 10px;

    font-size: 9px;

    color:
        rgba(255,255,255,0.40);
}


.rs-platform-points strong {
    display: block;

    margin-bottom: 5px;

    font-size: 14px;

    color: #ffffff;
}


.rs-platform-points small {
    color:
        rgba(255,255,255,0.52);

    font-size: 10px;

    line-height: 1.5;
}


.platform-locate {
    border-left:
        3px solid var(--gis-green) !important;
}


.platform-identify {
    border-left:
        3px solid var(--gis-water) !important;
}


.platform-manage {
    border-left:
        3px solid var(--gis-built) !important;
}


.platform-decide {
    border-left:
        3px solid var(--gis-analysis) !important;
}


/* =========================================================
   PLATFORM ORBIT
========================================================= */

.rs-platform-visual {
    position: relative;

    min-height: 500px;

    display: flex;

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


.rs-platform-core {
    position: relative;
    z-index: 4;

    width: 150px;
    height: 150px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            var(--gis-green),
            var(--gis-water-dark)
        );

    border:
        5px solid rgba(255,255,255,0.12);

    box-shadow:
        0 0 50px rgba(57,129,138,0.20);

    font-size: 27px;

    font-weight: 800;

    letter-spacing: 2px;
}


.rs-platform-orbit {
    position: absolute;

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius: 50%;
}


.orbit-one {
    width: 300px;
    height: 300px;
}


.orbit-two {
    width: 440px;
    height: 440px;

    border-color:
        rgba(102,134,88,0.15);
}


.rs-layer {
    position: absolute;

    padding:
        6px 10px;

    border-radius: 4px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.layer-earth {
    left: 14%;
    top: 22%;

    color:
        #d3a98d;

    background:
        rgba(169,103,67,0.15);
}


.layer-nature {
    right: 13%;
    top: 27%;

    color:
        #b6c99a;

    background:
        rgba(102,134,88,0.16);
}


.layer-assets {
    right: 10%;
    bottom: 25%;

    color:
        #e4a58e;

    background:
        rgba(184,95,71,0.16);
}


.layer-data {
    left: 11%;
    bottom: 27%;

    color:
        #9bc5c8;

    background:
        rgba(57,129,138,0.16);
}


.layer-projects {
    left: 44%;
    top: 7%;

    color:
        #d8c98a;

    background:
        rgba(163,145,66,0.16);
}


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

.rs-final-cta {
    display: flex;

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

    gap: 50px;

    padding:
        80px 8vw;

    background:
        #ffffff;

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


.rs-final-cta > div {
    max-width: 850px;
}


.rs-final-cta h2 {
    margin:
        12px 0 15px;

    color:
        var(--gis-forest);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1px;
}


.rs-final-cta p {
    margin: 0;

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

    font-size: 13px;

    line-height: 1.8;
}


.rs-final-cta .rs-primary-button {
    flex-shrink: 0;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .rs-hero {
        grid-template-columns:
            1fr;

        padding-top: 70px;
        padding-bottom: 70px;
    }


    .rs-hero-content {
        max-width: 800px;
    }


    .rs-spatial-visual {
        min-height: 420px;
    }


    .rs-section-heading {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .rs-goal-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .rs-domain-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .rs-platform-section {
        grid-template-columns:
            1fr;
    }


    .rs-platform-visual {
        min-height: 430px;
    }
}


@media (max-width: 900px) {

    .rs-introduction {
        grid-template-columns:
            1fr;

        gap: 25px;

        padding:
            80px 6vw;
    }


    .rs-introduction-content {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .rs-behaviour-flow {
        grid-template-columns:
            1fr 1fr;

        gap: 14px;
    }


    .rs-flow-arrow {
        display: none;
    }


    .rs-lifecycle-track {
        display: grid;

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

        gap: 35px;
    }


    .rs-life-line {
        display: none;
    }


    .rs-final-cta {
        flex-direction: column;

        align-items: flex-start;
    }
}


@media (max-width: 700px) {

    .rs-hero {
        min-height: auto;

        padding:
            65px 20px;
    }


    .rs-hero h1 {
        font-size:
            clamp(42px, 12vw, 58px);

        letter-spacing: -2px;
    }


    .rs-map-surface {
        height: 350px;

        transform: none;
    }


    .rs-spatial-visual {
        min-height: 350px;
    }


    .rs-introduction,
    .rs-behaviour,
    .rs-lifecycle,
    .rs-goals,
    .rs-objectives,
    .rs-capabilities,
    .rs-platform-section,
    .rs-final-cta {
        padding-left: 20px;
        padding-right: 20px;
    }


    .rs-goal-grid,
    .rs-domain-grid {
        grid-template-columns:
            1fr;
    }


    .rs-behaviour-flow {
        grid-template-columns:
            1fr;
    }


    .rs-lifecycle-track {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .rs-objective-row {
        grid-template-columns:
            60px 1fr;

        padding:
            20px;
    }


    .rs-objective-index {
        width: 40px;
        height: 40px;
    }


    .rs-platform-points {
        grid-template-columns:
            1fr;
    }


    .rs-platform-visual {
        min-height: 360px;
    }


    .orbit-one {
        width: 230px;
        height: 230px;
    }


    .orbit-two {
        width: 320px;
        height: 320px;
    }


    .rs-platform-core {
        width: 120px;
        height: 120px;

        font-size: 22px;
    }


    .layer-earth {
        left: 3%;
    }


    .layer-nature {
        right: 3%;
    }


    .layer-assets {
        right: 2%;
    }


    .layer-data {
        left: 2%;
    }


    .layer-projects {
        top: 3%;
    }
}


@media (max-width: 480px) {

    .rs-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }


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


    .rs-map-surface {
        height: 300px;
    }


    .rs-coordinate-panel {
        left: 12px;
        bottom: 12px;

        min-width: 160px;

        padding:
            11px 12px;
    }


    .rs-map-label {
        display: none;
    }


    .rs-lifecycle-track {
        grid-template-columns:
            1fr;
    }


    .rs-objective-row {
        grid-template-columns:
            1fr;

        gap: 12px;
    }


    .rs-objective-row p {
        font-size: 11px;
    }


    .rs-platform-visual {
        min-height: 300px;
    }


    .orbit-one {
        width: 190px;
        height: 190px;
    }


    .orbit-two {
        width: 270px;
        height: 270px;
    }


    .rs-platform-core {
        width: 95px;
        height: 95px;

        font-size: 18px;
    }


    .rs-layer {
        font-size: 7px;

        padding:
            4px 6px;
    }
}