/* =========================================================
   PRATH ESTATE — ABOUT PAGE
   Main stylesheet organized according to HTML structure
   ========================================================= */


/* =========================================================
   01. ROOT / VARIABLES
   ========================================================= */

:root {
    --bg: #25282b;
    --soft: #2a2d30;
    --deep: #202326;
    --panel: #2e3134;

    --text: #f0eee8;
    --muted: #a8aaa8;

    --gold: #c8a66b;
    --light: #dfc58d;
    --gold-light: #dfc58d;

    --line: rgba(221, 196, 141, 0.18);

    --serif: "Playfair Display", Georgia, serif;
    --sans: "DM Sans", Arial, sans-serif;

    --max: 1180px;
    --container: 1180px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   02. RESET / GLOBAL
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    color: var(--text);
    font: 300 14px/1.75 var(--sans);
    overflow-x: hidden;
}

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

img {
    display: block;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

p {
    color: var(--muted);
}

h1,
h2,
h3 {
    font-weight: 400;
}

h1,
h2 {
    font-family: var(--serif);
}

em {
    font-style: normal;
    color: var(--light);
}


/* =========================================================
   03. COMMON / REUSABLE COMPONENTS
   ========================================================= */

/* Eyebrow label */

.eyebrow {
    display: block;
    color: var(--gold);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 17px;
}


/* Common section */

.section {
    padding: 125px max(7%, calc((100vw - var(--max)) / 2));
    border-bottom: 1px solid var(--line);
}


/* Common image block */

.photo {
    height: 570px;
    position: relative;
    overflow: hidden;
}

.photo > span {
    position: absolute;
    bottom: 18px;
    left: 20px;
    z-index: 2;

    font-size: 8px;
    line-height: 1;
    letter-spacing: 1.5px;
    color: #ddd;
}


/* Common text block */

.copy {
    max-width: 520px;
}

.copy h2 {
    margin-bottom: 22px;
}

.copy p {
    font-size: 12px;
}


/* Common full-width background section */

.philosophy,
.future,
.cta {
    min-height: 570px;
    position: relative;

    display: flex;
    align-items: center;

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

.bg,
.shade {
    position: absolute;
    inset: 0;
}

.inside {
    position: relative;
    z-index: 1;

    width: min(var(--max), 84%);
    margin: auto;
}

.inside > p {
    max-width: 520px;
    font-size: 12px;
    margin: 22px 0 28px;
}


/* Common headings */

.philosophy h2,
.future h2 {
    font-size: clamp(42px, 4.4vw, 63px);
    line-height: 1.08;
}


/* Common tags */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.tags span {
    border: 1px solid var(--line);
    padding: 7px 10px;

    color: #b9bab8;
    font-size: 8px;
    line-height: 1.3;
    text-transform: uppercase;
}


/* =========================================================
   04. HEADER
   HTML:
   header.header
   ├── .logo-home
   │   └── .logo
   ├── .nav-links
   │   └── .nav
   └── .header-actions
       ├── .header-cta
       └── .menu
   ========================================================= */

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

.header {
  height: 90px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 500;
  /* padding: 0 clamp(24px, 5vw, 78px); */
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gold);

  backdrop-filter: blur(8px) saturate(50%);
  /* -webkit-backdrop-filter: blur(50px) saturate(100%); */

  transition:
    height .65s var(--ease),
    background .65s var(--ease),
    border-color .65s var(--ease),
    box-shadow .65s var(--ease);
  
}

.header.scrolled {
  height: 75px;
  background: rgba(9, 13, 16, .78);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border-color: var(--line);
  box-shadow: 0 15px 60px rgba(0,0,0,.16);
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-mark {
  /* width: 35px; */
  height: 70px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  position: relative;
}

.logo-mark::before {
  content: "";
  position: absolute;
  /* width: 34px; */
  height: 60px;
  border: 1px solid rgba(199,165,106,.22);
  transform: rotate(45deg) scale(.72);
}

.logo:hover .logo-mark i {
  background: rgba(199,165,106,.18);
}

.logo-text strong {
  display: block;
  font: 500 19px/1 var(--serif);
  letter-spacing: 3px;
  text-transform: uppercase;
}

.logo-text small {
  display: block;
  color: #8f9290;
  font-size: 7px;
  letter-spacing: 2.8px;
  line-height: 1.6;
  margin-top: 3px;
}

.nav {
  display: flex;
  gap: clamp(22px, 2.6vw, 42px);
  /* margin-left: auto; */
  /* margin-right: clamp(24px, 3vw, 48px); */
}

.nav a {
  position: relative;
  font-size:15px;
  text-transform: uppercase;
  letter-spacing: 1.7px;
  color: #d8d7d2;
  padding: 12px 0;
  transition: color .35s;
}

/* .nav a::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  width: 5px;
  height: 5px;
  border: 1px solid var(--gold);
  transform: scale(0) rotate(45deg);
  transition: transform .35s var(--ease);
} */

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transition: width .5s var(--ease);
}

.nav a:hover,
.nav a.active {
  color: var(--gold-light);
}

.nav a:hover::before,
.nav a.active::before {
  transform: scale(1) rotate(45deg);
}

.nav a:hover::after,
.nav a.active::after {
  width: 100%;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(199,165,106,.35);
  background: rgba(199,165,106,.035);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--gold-light);
  transition:
    background .4s var(--ease),
    border-color .4s,
    transform .4s var(--ease);
}

.header-cta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(199,165,106,.4);
  transition: box-shadow .5s;
}

.header-cta:hover {
  border-color: var(--gold);
  background: rgba(199,165,106,.1);
  transform: translateY(-2px);
}

.header-cta:hover::before {
  box-shadow: 0 0 0 7px rgba(199,165,106,.08);
}

.header-cta span {
  margin-left: 3px;
  font-size: 13px;
  transition: transform .35s var(--ease);
}

.header-cta:hover span {
  transform: translateX(4px);
}

.menu {
  display: none;
  width: 45px;
  height: 45px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}

.menu span {
  display: block;
  width: 21px;
  height: 1px;
  background: var(--gold);
  margin: 5px auto;
  transition: transform .4s var(--ease);
}

.mobile-nav {
  display: none;
}


/* =========================================================
   05. HERO
   ========================================================= */

.hero {
    height: 100vh;
    min-height: 720px;

    position: relative;

    display: flex;
    align-items: center;

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

.hero .bg {
    background:
        url("../assets/images/About-page/about-banner-bg.svg")
        center / cover no-repeat;
    /* background:
        url("https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=2200&q=90&fm=webp")
        center / cover no-repeat; */
}

.hero .shade {
    background:
        linear-gradient(
            90deg,
            #191c1fF5 0%,
            #191c1fB8 48%,
            #191c1f20 100%
        );
}

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

    width: min(630px, 84%);

    margin-left: 9%;
}

.hero h1 {
    font-size: clamp(27px, 4.3vw, 58px);
    line-height: 1.08;
}

.hero-copy p {
    max-width: 560px;

    margin: 24px 0 28px;

    font-size: 15px;
    line-height: 1.8;
}

.gold-link {
    color: var(--light);

    font-size: 8px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1.4px;

    transition: color 0.3s ease;
}

.gold-link:hover {
    color: #fff;
}


/* =========================================================
   06. WHO WE ARE
   HTML:
   section.section.who
   ========================================================= */


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

.who {
    display: grid;

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

    align-items: center;

    gap: clamp(45px, 7vw, 100px);

    /* width: min(1180px, calc(100% - 48px)); */

    margin: 0 auto;

    padding-top: clamp(80px, 9vw, 125px);
    padding-bottom: clamp(80px, 9vw, 125px);

    box-sizing: border-box;
}


/* =========================================================
   LEFT IMAGE / FIGURE
========================================================= */

.who .large-photo {
    position: relative;

    width: 100%;
    height: clamp(420px, 44vw, 570px);

    margin: 0;

    overflow: hidden;

    display: block;

    background: #202224;
}


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

.who .about-carousel {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #202224;
}


/* =========================================================
   SLIDES
========================================================= */

.who .about-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    z-index: 1;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}


/* ACTIVE SLIDE */

.who .about-slide.active {
    opacity: 1;
    visibility: visible;

    z-index: 2;
}


/* =========================================================
   SLIDE IMAGE
========================================================= */

.who .about-slide img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;

    object-fit: cover;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;
}


/* =========================================================
   IMAGE OVERLAY
   Gives the images a slightly darker luxury look
========================================================= */

.who .about-carousel::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.03) 0%,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, 0.22) 100%
        );
}


/* =========================================================
   CAPTION
========================================================= */

.who .about-caption-wrap,
.who figcaption {
    position: absolute;

    left: 20px;
    bottom: 20px;

    z-index: 10;

    margin: 0;

    padding: 0;
}


.who .about-caption {
    display: inline-flex;

    align-items: center;

    padding: 9px 12px;

    background: rgba(30, 32, 34, 0.90);

    border: 1px solid rgba(198, 165, 108, 0.28);

    color: #d4bd88;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1.4px;

    text-transform: uppercase;

    white-space: nowrap;
}


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

.who .about-carousel-controls {
    position: absolute;

    right: 20px;
    bottom: 20px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px;

    background: rgba(30, 32, 34, 0.92);

    border: 1px solid rgba(198, 165, 108, 0.22);

    box-sizing: border-box;
}


/* =========================================================
   ARROWS
========================================================= */

.who .about-arrow {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex: 0 0 34px;

    padding: 0;

    margin: 0;

    border: 1px solid rgba(198, 165, 108, 0.30);

    border-radius: 0;

    outline: none;

    background: transparent;

    color: #d2b879;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.who .about-arrow:hover {
    background: #c6a56c;

    border-color: #c6a56c;

    color: #202224;

    transform: translateY(-1px);
}


.who .about-arrow:active {
    transform: translateY(0);
}


.who .about-arrow:focus-visible {
    outline: 1px solid #c6a56c;

    outline-offset: 2px;
}


/* =========================================================
   COUNTER
========================================================= */

.who .about-counter {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 52px;

    padding: 0 5px;

    color: #777b79;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1px;
}


.who .about-current {
    color: #d3bc87;
}


.who .about-total {
    color: #777b79;
}


/* =========================================================
   COUNTER LINE
========================================================= */

.who .about-line {
    display: block;

    width: 22px;
    height: 1px;

    flex: 0 0 22px;

    background: rgba(198, 165, 108, 0.45);
}


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

.who .copy {
    width: 100%;

    max-width: 520px;

    margin: 0;

    padding: 0;
}


/* =========================================================
   EYEBROW
========================================================= */

.who .eyebrow {
    display: block;

    margin: 0 0 18px;

    color: #c6a56c;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.who .copy h2 {
    max-width: 520px;

    margin: 0;

    padding: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(35px, 3.5vw, 51px);

    font-weight: 400;

    line-height: 1.12;

    letter-spacing: -0.6px;
}


/* GOLD EMPHASIS */

.who .copy h2 em {
    color: #c6a56c;

    font-style: normal;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.who .copy p {
    max-width: 455px;

    margin: 25px 0 0;

    padding: 0;

    color: #999d9b;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 400;

    line-height: 1.9;

    letter-spacing: 0;
}


/* =========================================================
   DETAILS
========================================================= */

.who .who-details {
    display: flex;

    align-items: center;

    gap: 40px;

    max-width: 470px;

    margin-top: 32px;

    padding-top: 23px;

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


/* =========================================================
   INDIVIDUAL DETAIL
========================================================= */

.who .who-detail {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 150px;
}


/* =========================================================
   DETAIL NUMBER
========================================================= */

.who .detail-number {
    width: 30px;
    height: 30px;

    flex: 0 0 30px;

    display: flex;

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

    border: 1px solid rgba(198, 165, 108, 0.30);

    border-radius: 50%;

    color: #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 10px;

    font-weight: 400;

    line-height: 1;
}


/* =========================================================
   DETAIL TITLE
========================================================= */

.who .who-detail strong {
    display: block;

    margin: 0;

    color: #d7d8d5;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.2;
}


/* =========================================================
   DETAIL DESCRIPTION
========================================================= */

.who .who-detail small {
    display: block;

    margin-top: 3px;

    color: #747877;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1.3;
}


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

.who .who-link {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    margin-top: 32px;

    padding: 0 0 7px;

    border: 0;

    border-bottom: 1px solid rgba(198, 165, 108, 0.45);

    color: #c6a56c;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1.4px;

    text-decoration: none;

    text-transform: uppercase;

    transition:
        color 0.25s ease,
        gap 0.25s ease,
        border-color 0.25s ease;
}


.who .who-link:hover {
    gap: 18px;

    color: #e0c98f;

    border-color: #c6a56c;
}


.who .who-link i {
    font-family: Arial, sans-serif;

    font-size: 13px;

    font-style: normal;

    line-height: 1;
}


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

/*
   IMPORTANT:
   This default state keeps the section visible.

   If you already have a global .reveal animation,
   remove that global rule or replace this section
   with your existing animation system.
*/

.who .reveal {
    opacity: 1;

    visibility: visible;

    transform: none;
}


/* Optional animation if JS adds .revealed */

.who .reveal.revealed {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


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

@media (max-width: 1100px) {

    .who {
        gap: 55px;

        width: min(100% - 40px, 1000px);
    }

    .who .copy {
        max-width: 480px;
    }

    .who .copy h2 {
        font-size: clamp(34px, 4vw, 45px);
    }

    .who .who-details {
        gap: 25px;
    }

}


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

@media (max-width: 991px) {

    .who {
        grid-template-columns: 1fr;

        gap: 50px;

        width: min(700px, calc(100% - 40px));

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


    .who .large-photo {
        width: 100%;

        height: 500px;
    }


    .who .copy {
        max-width: 650px;
    }


    .who .copy h2 {
        max-width: 620px;

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


    .who .copy p {
        max-width: 570px;

        font-size: 11px;
    }


    .who .who-details {
        max-width: 500px;
    }

}


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

@media (max-width: 575px) {

    .who {
        display: grid;

        grid-template-columns: 1fr;

        width: calc(100% - 32px);

        gap: 38px;

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


    /* IMAGE */

    .who .large-photo {
        height: 350px;
    }


    .who .about-carousel {
        height: 350px;
    }


    /* CAPTION */

    .who .about-caption-wrap,
    .who figcaption {
        left: 12px;

        bottom: 12px;
    }


    .who .about-caption {
        padding: 8px 10px;

        font-size: 7px;

        letter-spacing: 1.2px;
    }


    /* CONTROLS */

    .who .about-carousel-controls {
        right: 12px;

        bottom: 12px;

        gap: 5px;

        padding: 5px;
    }


    .who .about-arrow {
        width: 30px;
        height: 30px;

        flex-basis: 30px;

        font-size: 12px;
    }


    .who .about-counter {
        min-width: 45px;

        gap: 6px;

        font-size: 7px;
    }


    .who .about-line {
        width: 17px;

        flex-basis: 17px;
    }


    /* CONTENT */

    .who .copy {
        max-width: 100%;
    }


    .who .eyebrow {
        margin-bottom: 15px;

        font-size: 7px;

        letter-spacing: 1.7px;
    }


    .who .copy h2 {
        max-width: 100%;

        font-size: 34px;

        line-height: 1.14;

        letter-spacing: -0.4px;
    }


    .who .copy p {
        max-width: 100%;

        margin-top: 20px;

        font-size: 10.5px;

        line-height: 1.85;
    }


    /* DETAILS */

    .who .who-details {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        width: 100%;

        margin-top: 28px;

        padding-top: 20px;
    }


    .who .who-detail {
        min-width: 0;
    }


    /* CTA */

    .who .who-link {
        margin-top: 28px;

        font-size: 7px;

        letter-spacing: 1.2px;
    }

}


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

@media (max-width: 380px) {

    .who {
        width: calc(100% - 24px);

        gap: 32px;
    }


    .who .large-photo {
        height: 310px;
    }


    .who .about-carousel {
        height: 310px;
    }


    .who .copy h2 {
        font-size: 30px;
    }


    .who .copy p {
        font-size: 10px;
    }

}


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

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

    .who .about-slide,
    .who .about-arrow,
    .who .who-link,
    .who .reveal {
        transition: none !important;
    }

}

/* =========================================================
   07. OUR STORY
   PREMIUM TIMELINE
========================================================= */


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

.story {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.72fr)
        minmax(500px, 1.28fr);

    align-items: start;

    gap: clamp(60px, 9vw, 130px);

    /* width: min(1180px, calc(100% - 48px)); */

    margin: 0 auto;

    padding-top: clamp(90px, 10vw, 140px);
    padding-bottom: clamp(90px, 10vw, 140px);

    /* background: var(--soft, #202224); */

    box-sizing: border-box;
}


/* =========================================================
   INTRO
========================================================= */

.story-intro {
    position: sticky;

    top: 120px;

    max-width: 400px;
}


/* =========================================================
   EYEBROW
========================================================= */

.story .eyebrow {
    display: block;

    margin-bottom: 20px;

    color: var(--gold, #c6a56c);

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}


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

.story .story-intro h2 {
    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(40px, 4vw, 58px);

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -1px;
}


.story .story-intro h2 em {
    color: var(--gold, #c6a56c);

    font-style: normal;
}


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

.story .story-intro p {
    max-width: 350px;

    margin: 28px 0 0;

    color: #929795;

    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 400;

    line-height: 1.9;
}


/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    position: relative;

    width: 100%;

    padding: 5px 0;
}


/* =========================================================
   VERTICAL TIMELINE LINE
========================================================= */

/* .timeline::before {
    content: "";

    position: absolute;

    left: 61px;

    top: 32px;
    bottom: 32px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(198, 165, 108, 0.45) 8%,
            rgba(198, 165, 108, 0.20) 50%,
            rgba(198, 165, 108, 0.45) 92%,
            transparent
        );
} */


/* =========================================================
   TIMELINE ITEM
========================================================= */

.timeline-item {
    position: relative;

    display: grid;

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

    column-gap: 20px;

    min-height: 150px;

    margin: 0;

    padding: 0 0 45px;

    align-items: center ;
}


/* =========================================================
   LAST ITEM
========================================================= */

.timeline-item:last-child {
    min-height: 0;

    padding-bottom: 0;
}


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

.timeline-number {
    padding-top: 7px;

    color: #555957;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1;

    text-align: right;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   MARKER
========================================================= */

.timeline-marker {
    position: relative;

    z-index: 2;

    width: 42px;
    height: 42px;

    display: flex;

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

    box-sizing: border-box;

    border: 1px solid rgba(198, 165, 108, 0.35);

    border-radius: 50%;

    background: #202224;

    color: #c6a56c;

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


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

.timeline-marker svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.2;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.5s ease,
        stroke-width 0.3s ease;
}


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

.timeline-content {
    padding: 1px 0 0;
}


/* =========================================================
   SMALL LABEL
========================================================= */

.timeline-label {
    display: block;

    margin-bottom: 10px;

    color: #706f69;

    font-family: Arial, sans-serif;

    font-size: 7px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.timeline-content h3 {
    margin: 0;

    color: #e4e1da;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 400;

    line-height: 1.2;

    transition: color 0.3s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.timeline-content p {
    max-width: 490px;

    margin: 9px 0 0;

    color: #858a88;

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.8;
}


/* =========================================================
   TWO LINES UNDER EVERY POINT
========================================================= */

.timeline-lines {
    display: flex;

    flex-direction: column;

    gap: 5px;

    width: 100%;

    max-width: 480px;

    margin-top: 22px;
}


.timeline-lines span {
    display: block;

    width: 100%;

    height: 1px;

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

    transform-origin: left center;

    transition:
        background 0.4s ease,
        transform 0.4s ease;
}


/* Second line slightly softer */

.timeline-lines span:nth-child(2) {
    background: rgba(255, 255, 255, 0.035);
}


/* =========================================================
   HOVER — NUMBER
========================================================= */

.timeline-item:hover .timeline-number {
    color: #c6a56c;

    transform: translateX(-2px);
}


/* =========================================================
   HOVER — MARKER
========================================================= */

.timeline-item:hover .timeline-marker {
    border-color: #c6a56c;

    background: #c6a56c;

    color: #202224;

    transform: scale(1.08);

    box-shadow:
        0 0 0 6px rgba(198, 165, 108, 0.06),
        0 0 25px rgba(198, 165, 108, 0.12);
}


/* =========================================================
   HOVER — ICON
========================================================= */

.timeline-item:hover .timeline-marker svg {
    transform: rotate(180deg) scale(1.05);

    stroke-width: 1.5;
}


/* =========================================================
   HOVER — TITLE
========================================================= */

.timeline-item:hover .timeline-content h3 {
    color: #c6a56c;
}


/* =========================================================
   HOVER — TWO LINES
========================================================= */

.timeline-item:hover .timeline-lines span:first-child {
    background: rgba(198, 165, 108, 0.45);

    transform: scaleX(0.82);
}


.timeline-item:hover .timeline-lines span:nth-child(2) {
    background: rgba(198, 165, 108, 0.18);

    transform: scaleX(0.62);
}


/* =========================================================
   MARKER PULSE
========================================================= */

.timeline-item:hover .timeline-marker::after {
    content: "";

    position: absolute;

    inset: -7px;

    border: 1px solid rgba(198, 165, 108, 0.22);

    border-radius: 50%;

    animation: timelinePulse 1.2s ease-out infinite;

    pointer-events: none;
}


@keyframes timelinePulse {

    0% {
        opacity: 0.8;
        transform: scale(0.8);
    }

    100% {
        opacity: 0;
        transform: scale(1.25);
    }

}


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

@media (max-width: 991px) {

    .story {
        grid-template-columns: 1fr;

        gap: 60px;

        width: min(700px, calc(100% - 40px));
    }


    .story-intro {
        position: static;

        max-width: 600px;
    }


    .story .story-intro h2 {
        font-size: clamp(40px, 7vw, 52px);
    }


    .story .story-intro p {
        max-width: 500px;
    }

}


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

@media (max-width: 575px) {

    .story {
        width: calc(100% - 32px);

        gap: 45px;

        padding-top: 70px;

        padding-bottom: 70px;
    }


    /* INTRO */

    .story .story-intro h2 {
        font-size: 38px;

        line-height: 1.1;
    }


    .story .story-intro p {
        margin-top: 22px;

        font-size: 10.5px;

        line-height: 1.85;
    }


    /* TIMELINE */

    .timeline::before {
        left: 44px;

        top: 30px;
        bottom: 30px;
    }


    .timeline-item {
        grid-template-columns:
            30px
            30px
            minmax(0, 1fr);

        column-gap: 14px;

        min-height: 145px;

        padding-bottom: 38px;
    }


    /* NUMBER */

    .timeline-number {
        padding-top: 6px;

        font-size: 10px;
    }


    /* MARKER */

    .timeline-marker {
        width: 30px;
        height: 30px;
    }


    .timeline-marker svg {
        width: 13px;
        height: 13px;
    }


    /* LABEL */

    .timeline-label {
        margin-bottom: 6px;

        font-size: 6.5px;

        letter-spacing: 1.5px;
    }


    /* TITLE */

    .timeline-content h3 {
        font-size: 20px;
    }


    /* DESCRIPTION */

    .timeline-content p {
        margin-top: 8px;

        font-size: 9.5px;

        line-height: 1.75;
    }


    /* TWO LINES */

    .timeline-lines {
        margin-top: 17px;

        gap: 4px;
    }


}


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

@media (max-width: 380px) {

    .story {
        width: calc(100% - 24px);
    }


    .story .story-intro h2 {
        font-size: 34px;
    }


    .timeline-item {
        grid-template-columns:
            26px
            28px
            minmax(0, 1fr);

        column-gap: 11px;
    }


    .timeline::before {
        left: 40px;
    }


    .timeline-marker {
        width: 28px;
        height: 28px;
    }


    .timeline-content h3 {
        font-size: 18px;
    }


    .timeline-content p {
        font-size: 9px;
    }

}


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

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

    .timeline-item *,
    .timeline-marker,
    .timeline-marker svg,
    .timeline-number,
    .timeline-lines span {
        transition: none !important;

        animation: none !important;
    }

}


/* =========================================================
   08. PHILOSOPHY
   ========================================================= */

/* =========================================================
   08. OUR PHILOSOPHY
   PREMIUM FULL-WIDTH STATEMENT SECTION
========================================================= */


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

.philosophy {
    position: relative;

    min-height: 680px;

    width: 100%;

    overflow: hidden;

    display: flex;

    align-items: center;

    background: #202326;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.philosophy .bg {
    position: absolute;

    inset: 0;

    z-index: -3;

    background:
        url("../assets/images/About-page/philosophy-section-bg.svg")
        center / cover no-repeat;
    /* background:
        url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=1800&q=85&fm=webp")
        center / cover no-repeat; */

    transform: scale(1.03);

    transition: transform 1.2s ease;
}


/* Subtle zoom when section is hovered */

.philosophy:hover .bg {
    transform: scale(1.06);
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.philosophy .shade {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(25, 28, 30, 0.98) 0%,
            rgba(25, 28, 30, 0.94) 25%,
            rgba(25, 28, 30, 0.76) 50%,
            rgba(25, 28, 30, 0.35) 78%,
            rgba(25, 28, 30, 0.18) 100%
        );
}


/* Bottom shadow */

.philosophy::after {
    content: "";

    position: absolute;

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

    height: 180px;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(20, 22, 24, 0.75),
            transparent
        );
}


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

.philosophy .inside {
    position: relative;

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    padding-top: 110px;
    padding-bottom: 100px;

    box-sizing: border-box;
}


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

.philosophy-heading {
    max-width: 680px;
}


/* =========================================================
   EYEBROW
========================================================= */

.philosophy .eyebrow {
    display: inline-block;

    margin: 0;

    color: #c6a56c;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


/* =========================================================
   GOLD LINE
========================================================= */

.philosophy-line {
    display: block;

    width: 48px;

    height: 1px;

    margin-top: 18px;

    margin-bottom: 25px;

    background: #c6a56c;

    transform-origin: left center;

    transition:
        width 0.5s ease,
        background 0.5s ease;
}


.philosophy:hover .philosophy-line {
    width: 85px;

    background: #dfc486;
}


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

.philosophy h2 {
    margin: 0;

    color: #f0ede6;

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(44px, 5.2vw, 72px);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -1.5px;
}


/* GOLD WORD */

.philosophy h2 em {
    color: #c6a56c;

    font-style: normal;
}


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

.philosophy .philosophy-intro {
    max-width: 530px;

    margin: 28px 0 0;

    color: rgba(232, 232, 226, 0.68);

    font-family: Arial, sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.9;
}


/* =========================================================
   PROMISE ROW
========================================================= */

.philosophy .promise-row {
    display: grid;

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

    gap: 0;

    max-width: 980px;

    margin-top: 75px;

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

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}


/* =========================================================
   PROMISE
========================================================= */

.philosophy .promise {
    position: relative;

    /* display: grid; */
    display: flex;

    /* grid-template-columns: 32px 46px 1fr; */

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

    column-gap: 15px;

    min-height: 105px;

    padding: 18px 28px;

    box-sizing: border-box;

    border-right: 1px solid rgba(255, 255, 255, 0.10);

    transition:
        background 0.4s ease,
        border-color 0.4s ease;
}


.philosophy .promise:first-child {
    padding-left: 0;
}


.philosophy .promise:last-child {
    border-right: 0;
}


/* =========================================================
   PROMISE NUMBER
========================================================= */

.philosophy .promise-number {
    align-self: start;

    padding-top: 4px;

    color: rgba(198, 165, 108, 0.55);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 10px;

    line-height: 1;

    transition:
        color 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   ICON CIRCLE
========================================================= */

.philosophy .promise-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    border: 1px solid rgba(198, 165, 108, 0.35);

    border-radius: 50%;

    color: #c6a56c;

    background: rgba(20, 22, 24, 0.22);

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


/* =========================================================
   ICON SVG
========================================================= */

.philosophy .promise-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.15;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.5s ease,
        stroke-width 0.3s ease;
}


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

.philosophy .promise-content span {
    display: block;

    margin-bottom: 6px;

    color: rgba(198, 165, 108, 0.72);

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1.6px;

    text-transform: uppercase;
}


.philosophy .promise-content strong {
    display: block;

    color: #e8e5de;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.3;
}


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

.philosophy .promise:hover {
    background: rgba(198, 165, 108, 0.045);

    border-color: rgba(198, 165, 108, 0.20);
}


.philosophy .promise:hover .promise-number {
    color: #c6a56c;

    transform: translateY(-2px);
}


.philosophy .promise:hover .promise-icon {
    color: #202224;

    background: #c6a56c;

    border-color: #c6a56c;

    transform: scale(1.08);

    box-shadow:
        0 0 0 7px rgba(198, 165, 108, 0.06),
        0 0 25px rgba(198, 165, 108, 0.15);
}


.philosophy .promise:hover .promise-icon svg {
    transform: rotate(360deg);

    stroke-width: 1.5;
}


/* =========================================================
   DECORATIVE GOLD CORNER
========================================================= */

.philosophy .promise::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #c6a56c;

    transition: width 0.45s ease;
}


.philosophy .promise:hover::after {
    width: 35%;
}


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

@media (max-width: 991px) {

    .philosophy {
        min-height: 620px;
    }


    .philosophy .inside {
        width: min(700px, calc(100% - 40px));

        padding-top: 90px;

        padding-bottom: 80px;
    }


    .philosophy h2 {
        font-size: clamp(42px, 7vw, 58px);
    }


    .philosophy .philosophy-intro {
        max-width: 500px;
    }


    .philosophy .promise-row {
        grid-template-columns: 1fr;

        margin-top: 60px;
    }


    .philosophy .promise,
    .philosophy .promise:first-child {
        grid-template-columns: 35px 46px 1fr;

        min-height: 90px;

        padding: 18px 0;

        border-right: 0;

        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }


    .philosophy .promise:last-child {
        border-bottom: 0;
    }

}


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

@media (max-width: 575px) {

    .philosophy {
        min-height: auto;
    }


    /* Background */

    .philosophy .bg {
        background-position: 60% center;
    }


    .philosophy .shade {
        background:
            linear-gradient(
                90deg,
                rgba(25, 28, 30, 0.97) 0%,
                rgba(25, 28, 30, 0.88) 70%,
                rgba(25, 28, 30, 0.72) 100%
            );
    }


    /* Content */

    .philosophy .inside {
        width: calc(100% - 32px);

        padding-top: 75px;

        padding-bottom: 70px;
    }


    .philosophy .eyebrow {
        font-size: 7px;

        letter-spacing: 2px;
    }


    .philosophy-line {
        margin-top: 15px;

        margin-bottom: 22px;

        width: 40px;
    }


    .philosophy h2 {
        font-size: 39px;

        line-height: 1.08;

        letter-spacing: -0.8px;
    }


    .philosophy .philosophy-intro {
        max-width: 100%;

        margin-top: 22px;

        font-size: 13px;

        line-height: 1.85;
    }


    /* Promises */

    .philosophy .promise-row {
        margin-top: 48px;
    }


    .philosophy .promise,
    .philosophy .promise:first-child {
        grid-template-columns:
            28px
            38px
            1fr;

        column-gap: 12px;

        min-height: 82px;

        padding: 16px 0;
    }


    .philosophy .promise-number {
        font-size: 9px;
    }


    .philosophy .promise-icon {
        width: 36px;
        height: 36px;
    }


    .philosophy .promise-icon svg {
        width: 15px;
        height: 15px;
    }


    .philosophy .promise-content span {
        font-size: 8px;

        letter-spacing: 2px;
    }


    .philosophy .promise-content strong {
        font-size: 15px;
    }

}


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

@media (max-width: 380px) {

    .philosophy .inside {
        width: calc(100% - 24px);
    }


    .philosophy h2 {
        font-size: 35px;
    }


    .philosophy .philosophy-intro {
        font-size: 9.5px;
    }


    .philosophy .promise-content strong {
        font-size: 12px;
    }

}


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

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

    .philosophy .bg,
    .philosophy .promise,
    .philosophy .promise-icon,
    .philosophy .promise-icon svg,
    .philosophy .promise-number,
    .philosophy-line {
        transition: none !important;

        animation: none !important;
    }

}


/* ---------- Philosophy promises ---------- */

.promise-row {
    display: flex;

    max-width: 760px;

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

.promise-row span {
    flex: 1;

    padding: 20px 18px 0 0;

    color: #bbb;

    font-size: 9px;
    line-height: 1.5;

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

.promise-row span:last-child {
    border-right: 0;
}


/* =========================================================
   09. VISION / MISSION
   HTML:
   section.section.vm
   ========================================================= */

/* =========================================================
   09. VISION & MISSION
   IMAGE BASED SPLIT SECTION
========================================================= */

.vm {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;

    padding: 0;

    margin: 0;

    background: #202224;
}


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

.vm-card {
    position: relative;

    min-height: 720px;

    overflow: hidden;

    isolation: isolate;

    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND
========================================================= */

.vm-card .vm-bg {
    position: absolute;

    inset: 0;

    z-index: -3;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    transform: scale(1.02);

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


/* VISION IMAGE */

.vm-vision .vm-bg {
    background-image:
        url("../assets/images/About-page/our-vision.svg");
    /* background-image:
        url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1400&q=85&fm=webp"); */
}


/* MISSION IMAGE */

.vm-mission .vm-bg {
    background-image:
        url("../assets/images/About-page/our-mission.svg");
        /* url("https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1400&q=85&fm=webp"); */
}


/* =========================================================
   OVERLAY
========================================================= */

.vm-overlay {
    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            rgba(25, 27, 29, 0.82) 0%,
            rgba(25, 27, 29, 0.88) 45%,
            rgba(25, 27, 29, 0.97) 100%
        );
}


/* Additional side gradient */

.vm-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(25, 27, 29, 0.15),
            transparent 50%,
            rgba(25, 27, 29, 0.22)
        );
}


/* =========================================================
   HOVER IMAGE
========================================================= */

.vm-card:hover .vm-bg {
    transform: scale(1.07);
}


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

.vm-content {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    min-height: 720px;

    padding:
        clamp(65px, 7vw, 105px)
        clamp(35px, 5vw, 80px);

    box-sizing: border-box;
}


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

.vm-top {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 28px;
}


/* =========================================================
   LARGE NUMBER
========================================================= */

.vm-number {
    display: flex;

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

    width: 38px;
    height: 38px;

    border: 1px solid rgba(198, 165, 108, 0.45);

    border-radius: 50%;

    color: #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 10px;

    line-height: 1;

    transition:
        background .4s ease,
        color .4s ease,
        transform .4s ease;
}


/* =========================================================
   EYEBROW
========================================================= */

.vm .eyebrow {
    position: relative;

    display: flex;

    align-items: center;

    gap: 12px;

    margin: 0;

    color: #c6a56c;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.vm .eyebrow::before {
    content: "";

    width: 30px;

    height: 1px;

    background: rgba(198, 165, 108, 0.6);

    transition:
        width .4s ease;
}


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

.vm-card h2 {
    max-width: 560px;

    margin: 0;

    color: #efede7;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(36px, 3.8vw, 52px);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: -0.8px;
}


.vm-card h2 em {
    display: block;

    color: #c6a56c;

    font-style: normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.vm-description {
    max-width: 470px;

    margin: 25px 0 0;

    color: rgba(235, 235, 230, 0.68);

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.9;
}


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

.vm-points {
    display: flex;

    flex-direction: column;

    max-width: 540px;

    margin-top: 42px;

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


/* =========================================================
   POINT
========================================================= */

.vm-point {
    position: relative;

    display: grid;

    grid-template-columns: 32px 1fr;

    gap: 15px;

    align-items: center;

    min-height: 63px;

    padding: 9px 0;

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

    box-sizing: border-box;

    transition:
        padding-left .35s ease,
        background .35s ease;
}


/* =========================================================
   POINT icons
========================================================= */

.vm-point i , .vm-icon i {
    font-size: 25px;
    line-height: 1;
}

.vm-point:hover i {
    color: rgba(198, 165, 108, 0.65);
    border-color: rgba(198, 165, 108, 0.45);
    transform: scale(1.08);
}

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

.vm-point strong {
    display: block;

    color: #e3e1dc;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.2;

    transition:
        color .3s ease;
}


.vm-point small {
    display: block;

    margin-top: 4px;

    color: rgba(220, 220, 216, 0.48);

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.5;

    transition:
        color .3s ease;
}


/* =========================================================
   GOLD HOVER INDICATOR
========================================================= */

.vm-point::before {
    content: "";

    position: absolute;

    left: -1px;

    top: 50%;

    width: 0;

    height: 25px;

    background: #c6a56c;

    transform:
        translateY(-50%);

    transition:
        width .3s ease;
}


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

.vm-point:hover {
    padding-left: 13px;

    background: rgba(198, 165, 108, 0.035);
}


.vm-point:hover::before {
    width: 2px;
}


.vm-point:hover > span {
    color: #c6a56c;
}


.vm-point:hover strong {
    color: #c6a56c;
}


.vm-point:hover small {
    color: rgba(230, 230, 225, 0.68);
}


/* =========================================================
   TOP CIRCLE HOVER
========================================================= */

.vm-card:hover .vm-number {
    color: #202224;

    background: #c6a56c;

    border-color: #c6a56c;

    transform: rotate(360deg);
}


.vm-card:hover .eyebrow::before {
    width: 45px;
}


/* =========================================================
   CENTER DIVIDER
========================================================= */

.vm-vision {
    border-right: 1px solid rgba(198, 165, 108, 0.16);
}


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

@media (max-width: 991px) {

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


    .vm-card {
        min-height: auto;
    }


    .vm-content {
        min-height: auto;

        padding:
            80px
            clamp(35px, 8vw, 70px);
    }


    .vm-vision {
        border-right: 0;

        border-bottom:
            1px solid rgba(198, 165, 108, 0.18);
    }


    .vm-card h2 {
        font-size: clamp(38px, 6vw, 50px);
    }


    .vm-points {
        max-width: 650px;
    }

}


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

@media (max-width: 575px) {

    .vm-card {
        min-height: auto;
    }


    .vm-content {
        min-height: auto;

        padding:
            70px
            16px;
    }


    /* Background */

    .vm-card .vm-bg {
        background-position: center;
    }


    .vm-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(25, 27, 29, 0.84) 0%,
                rgba(25, 27, 29, 0.91) 42%,
                rgba(25, 27, 29, 0.98) 100%
            );
    }


    /* Top */

    .vm-top {
        gap: 13px;

        margin-bottom: 22px;
    }


    .vm-number {
        width: 32px;
        height: 32px;

        font-size: 8px;
    }


    .vm .eyebrow {
        font-size: 7px;

        letter-spacing: 1.7px;
    }


    .vm .eyebrow::before {
        width: 20px;
    }


    /* Heading */

    .vm-card h2 {
        max-width: 100%;

        font-size: 34px;

        line-height: 1.1;
    }


    /* Description */

    .vm-description {
        max-width: 100%;

        margin-top: 21px;

        font-size: 13px;

        line-height: 1.5;
    }


    /* Points */

    .vm-points {
        margin-top: 35px;
    }


    .vm-point {
        grid-template-columns: 27px 1fr;

        gap: 11px;

        min-height: 66px;
    }


    .vm-point > span {
        font-size: 8px;
    }


    .vm-point strong {
        font-size: 18px;
    }


    .vm-point small {
        font-size: 13px;

        line-height: 1.45;
    }


    /* Divider */

    .vm-vision {
        border-bottom:
            1px solid rgba(198, 165, 108, 0.18);
    }

}


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

@media (max-width: 380px) {

    .vm-content {
        padding:
            60px
            12px;
    }


    .vm-card h2 {
        font-size: 30px;
    }


    .vm-description {
        font-size: 9px;
    }


    .vm-point strong {
        font-size: 12px;
    }

}


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

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

    .vm-card .vm-bg,
    .vm-card,
    .vm-number,
    .vm-point,
    .vm-point strong,
    .vm-point small,
    .vm-point > span,
    .vm-point::before,
    .vm .eyebrow::before {
        transition: none !important;

        animation: none !important;
    }

}


/* =========================================================
   10. STATS
   Currently commented out in HTML.
   Kept here for future use.
   ========================================================= */

.stats {
    padding: 78px 7%;

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

    background: var(--deep);

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

.stats div {
    padding: 10px 30px;

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

.stats div:last-child {
    border-right: 1px solid var(--line);
}

.stats b {
    display: block;

    color: var(--light);

    font: 400 clamp(39px, 4vw, 55px)/1 var(--serif);
}

.stats sup {
    font-size: 0.45em;
}

.stats small {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}


/* =========================================================
   11. CORE VALUES
   PREMIUM ARCHITECTURAL GRID
========================================================= */


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

.values {
    position: relative;

    /* width: min(1180px, calc(100% - 48px)); */

    margin: 0 auto;

    padding-top: clamp(95px, 10vw, 140px);
    padding-bottom: clamp(95px, 10vw, 140px);

    box-sizing: border-box;
}


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

.values-heading {
    max-width: 650px;

    margin: 0 auto 65px;

    text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.values-heading .eyebrow {
    display: block;

    margin: 0;

    color: #c6a56c;

    font-family: Arial, sans-serif;

    font-size: 8px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 2.5px;

    text-transform: uppercase;
}


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

.values-heading-line {
    display: block;

    width: 38px;

    height: 1px;

    margin: 18px auto 24px;

    background: #c6a56c;

    transition:
        width .45s ease;
}


.values:hover .values-heading-line {
    width: 70px;
}


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

.values-heading h2 {
    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(38px, 4vw, 53px);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: -0.8px;
}


.values-heading h2 em {
    color: #c6a56c;

    font-style: normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.values-heading p {
    max-width: 510px;

    margin: 22px auto 0;

    color: #8e9391;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.85;
}


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

.value-grid {
    display: grid;

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

    border-top:
        1px solid rgba(198, 165, 108, 0.20);

    border-left:
        1px solid rgba(198, 165, 108, 0.20);
}


/* =========================================================
   VALUE CARD
========================================================= */

.value-card {
    position: relative;

    min-height: 300px;

    overflow: hidden;

    padding: 30px;

    box-sizing: border-box;

    border-right:
        1px solid rgba(198, 165, 108, 0.20);

    border-bottom:
        1px solid rgba(198, 165, 108, 0.20);

    background: #292c2f;

    isolation: isolate;

    transition:
        background .45s ease;
}


/* =========================================================
   CARD BACKGROUND
========================================================= */

.value-bg {
    position: absolute;

    inset: 0;

    z-index: -3;

    background:
        linear-gradient(
            135deg,
            rgba(198, 165, 108, 0.06),
            transparent 55%
        );

    opacity: .7;

    transition:
        opacity .5s ease,
        transform .8s ease;
}


/* =========================================================
   INDIVIDUAL SUBTLE BACKGROUND PATTERNS
========================================================= */

.value-card:nth-child(1) .value-bg {
    background:
        linear-gradient(
            135deg,
            rgba(198, 165, 108, .10),
            transparent 50%
        );
}


.value-card:nth-child(2) .value-bg {
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(198, 165, 108, .10),
            transparent 45%
        );
}


.value-card:nth-child(3) .value-bg {
    background:
        linear-gradient(
            45deg,
            rgba(198, 165, 108, .08),
            transparent 55%
        );
}


.value-card:nth-child(4) .value-bg {
    background:
        radial-gradient(
            circle at 20% 80%,
            rgba(198, 165, 108, .10),
            transparent 45%
        );
}


.value-card:nth-child(5) .value-bg {
    background:
        linear-gradient(
            135deg,
            transparent 40%,
            rgba(198, 165, 108, .08)
        );
}


.value-card:nth-child(6) .value-bg {
    background:
        radial-gradient(
            circle at 80% 80%,
            rgba(198, 165, 108, .10),
            transparent 45%
        );
}


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.value-number {
    position: absolute;

    top: 20px;

    right: 24px;

    color: rgba(198, 165, 108, 0.08);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 75px;

    font-weight: 400;

    line-height: 1;

    pointer-events: none;

    transition:
        color .45s ease,
        transform .45s ease;
}


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

.value-icon {
    position: relative;

    width: 45px;
    height: 45px;

    display: flex;

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

    margin-bottom: 28px;

    border:
        1px solid rgba(198, 165, 108, .38);

    border-radius: 50%;

    color: #c6a56c;

    background: rgba(32, 34, 36, .45);

    transition:
        background .45s ease,
        border-color .45s ease,
        color .45s ease,
        transform .55s ease,
        box-shadow .45s ease;
}


/* =========================================================
   ICON SVG
========================================================= */

.value-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.15;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .6s ease,
        stroke-width .3s ease;
}


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

.value-label {
    display: block;

    margin-bottom: 7px;

    color: rgba(198, 165, 108, .65);

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.value-content h3 {
    margin: 0 0 9px;

    color: #e9e6df;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 30px;

    font-weight: 400;

    line-height: 1.15;

    transition:
        color .35s ease;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.value-content p {
    max-width: 300px;

    margin: 0;

    color: #858a88;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.8;

    transition:
        color .35s ease;
}


/* =========================================================
   ARROW
========================================================= */

.value-arrow {
    display:none;
    
    position: absolute;

    right: 28px;

    bottom: 27px;

    color: rgba(198, 165, 108, .45);

    /* font-size: 14px; */
    font-size: 25px;

    line-height: 1;

    opacity: 0;

    transform: translateX(-8px);

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


/* =========================================================
   GOLD SIDE ACCENT
========================================================= */

.value-card::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 2px;

    height: 0;

    background: #c6a56c;

    transition:
        height .5s cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   BOTTOM ACCENT
========================================================= */

.value-card::after {
    content: "";

    position: absolute;

    left: 30px;

    right: 30px;

    bottom: 0;

    height: 1px;

    background: rgba(198, 165, 108, .0);

    transition:
        background .4s ease;
}


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

.value-card:hover {
    background: #25282a;
}


.value-card:hover::before {
    height: 100%;
}


.value-card:hover::after {
    background: rgba(198, 165, 108, .35);
}


.value-card:hover .value-bg {
    opacity: 1;

    transform: scale(1.12);
}


.value-card:hover .value-number {
    color: rgba(198, 165, 108, .16);

    transform: translateY(-5px);
}


.value-card:hover .value-icon {
    color: #202224;

    background: #c6a56c;

    border-color: #c6a56c;

    transform: scale(1.08);

    box-shadow:
        0 0 0 7px rgba(198, 165, 108, .05),
        0 0 25px rgba(198, 165, 108, .12);
}


.value-card:hover .value-icon svg {
    transform: rotate(360deg);

    stroke-width: 1.5;
}


.value-card:hover .value-content h3 {
    color: #c6a56c;
}


.value-card:hover .value-content p {
    color: #a3a7a5;
}


.value-card:hover .value-arrow {
    opacity: 1;

    color: #c6a56c;

    transform: translateX(0);
}


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

@media (max-width: 991px) {

    .values {
        width: min(700px, calc(100% - 40px));

        padding-top: 85px;

        padding-bottom: 85px;
    }


    .values-heading {
        margin-bottom: 50px;
    }


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


    .value-card {
        min-height: 280px;

        padding: 27px;
    }


    .value-content h3 {
        font-size: 22px;
    }

}


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

@media (max-width: 575px) {

    .values {
        width: calc(100% - 32px);

        padding-top: 70px;

        padding-bottom: 70px;
    }


    /* Heading */

    .values-heading {
        margin-bottom: 42px;
    }


    .values-heading .eyebrow {
        font-size: 7px;

        letter-spacing: 2px;
    }


    .values-heading-line {
        margin-top: 15px;

        margin-bottom: 20px;
    }


    .values-heading h2 {
        font-size: 35px;

        line-height: 1.1;
    }


    .values-heading p {
        margin-top: 19px;

        font-size: 12px;

        line-height: 1.5;
    }


    /* Grid */

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


    /* Card */

    .value-card {
        min-height: 250px;

        padding: 25px;
    }


    /* Number */

    .value-number {
        top: 16px;

        right: 18px;

        font-size: 65px;
    }


    /* Icon */

    .value-icon {
        width: 40px;
        height: 40px;

        margin-bottom: 23px;
    }


    .value-icon svg {
        width: 16px;
        height: 16px;
    }


    /* Label */

    .value-label {
        font-size: 10px;
    }


    /* Title */

    .value-content h3 {
        font-size: 25px;
    }


    /* Description */

    .value-content p {
        max-width: 290px;
        font-size: 13px;
        line-height: 1.5;
    }


    /* Always show arrow slightly on mobile */

    .value-arrow {
        opacity: .7;

        right: 23px;

        bottom: 23px;

        transform: none;
    }

}


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

@media (max-width: 380px) {

    .values {
        width: calc(100% - 24px);
    }


    .values-heading h2 {
        font-size: 31px;
    }


    .value-card {
        min-height: 235px;

        padding: 22px;
    }


    .value-content h3 {
        font-size: 19px;
    }


    .value-content p {
        font-size: 8.7px;
    }

}


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

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

    .value-card *,
    .value-card::before,
    .value-card::after,
    .values-heading-line {
        transition: none !important;

        animation: none !important;
    }

}

/* =========================================================
   12. WHAT MAKES US DIFFERENT
   ========================================================= */

/* =========================================================
   WHAT MAKES US DIFFERENT
========================================================= */

.different {
    position: relative;

    display: grid;

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

    width: 100%;

    min-height: 680px;

    overflow: hidden;

    background: #202224;

    border-top:
        1px solid rgba(198, 165, 108, 0.12);

    border-bottom:
        1px solid rgba(198, 165, 108, 0.12);
}


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

.different-copy {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        clamp(70px, 8vw, 115px)
        clamp(35px, 7vw, 105px);

    background:
        linear-gradient(
            135deg,
            #292c2f 0%,
            #242729 100%
        );

    box-sizing: border-box;

    z-index: 2;
}


/* =========================================================
   SUBTLE GRID PATTERN
========================================================= */

.different-copy::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(198,165,108,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(198,165,108,.035) 1px,
            transparent 1px
        );

    background-size: 50px 50px;
}


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.different-copy::after {
    content: "*";

    position: absolute;

    right: -20px;

    top: 25px;

    color: rgba(198,165,108,.035);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(180px, 20vw, 280px);

    font-weight: 400;

    line-height: 1;

    pointer-events: none;
}


/* =========================================================
   INTRO
========================================================= */

.different-intro {
    position: relative;

    z-index: 2;

    max-width: 510px;
}


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

.different-label {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 28px;
}


.different-label .eyebrow {
    margin: 0;

    color: #c6a56c;

    font-family: Arial, sans-serif;

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.different-number {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

    border:
        1px solid rgba(198,165,108,.4);

    border-radius: 50%;

    color: #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    /* font-size: 9px; */

    transition:
        background .4s ease,
        color .4s ease,
        transform .5s ease;
}


.different-number i{
font-size: 20px;
}

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

.different-line {
    width: 35px;

    height: 1px;

    background:
        rgba(198,165,108,.45);

    transition:
        width .4s ease;
}


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

.different h2 {
    position: relative;

    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(45px, 5vw, 68px);

    font-weight: 400;

    line-height: 1.03;

    letter-spacing: -1.2px;
}


.different h2 em {
    color: #c6a56c;

    font-style: normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.different-intro > p {
    max-width: 440px;

    margin: 28px 0 0;

    color: #949997;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.9;
}


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

.different-points {
    position: relative;

    z-index: 3;

    display: grid;

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

    max-width: 520px;

    margin-top: 40px;

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

    line-height: 2 ;
}


/* =========================================================
   POINT
========================================================= */

.different-point {
    /* font-size: 20px; */

    position: relative;

    /* display: grid; */
    display: flex;

    /* grid-template-columns:
        25px 32px 1fr; */

    align-items: center;

    /* justify-content: center; */

    gap: 10px;

    min-height: 58px;

    padding: 8px 12px 8px 0;

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

    cursor: default;

    transition:
        padding-left .35s ease,
        background .35s ease;
}

/* =========================================================
   POINT ICON
========================================================= */

.point-icon {
    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(198,165,108,.22);

    border-radius: 50%;

    color: #c6a56c;

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        transform .45s ease;
}


.point-icon svg {
    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


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

.point-text {
    color: #c7c9c6;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 15px;

    font-weight: 400;

    transition:
        color .3s ease;
}


/* =========================================================
   POINT HOVER
========================================================= */

.different-point:hover {
    padding-left: 10px;

    background:
        rgba(198,165,108,.035);
}


.different-point:hover .point-number {
    color: #c6a56c;
}


.different-point:hover .point-icon {
    color: #202224;

    background: #c6a56c;

    border-color: #c6a56c;

    transform: rotate(360deg);
}


.different-point:hover .point-text {
    color: #c6a56c;
}


/* =========================================================
   IMAGE
========================================================= */

.different-photo {
    position: relative;

    min-height: 680px;

    overflow: hidden;

    background: #1d1f20;
}


/* =========================================================
   IMAGE
========================================================= */

.different-photo img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.02);

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


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.different-photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(32,34,36,.45) 0%,
            rgba(32,34,36,.08) 40%,
            rgba(32,34,36,.12) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE LEFT BORDER
========================================================= */

.different-photo::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 1px;

    background:
        rgba(198,165,108,.25);

    z-index: 4;
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.different-photo-caption {
    position: absolute;

    left: 35px;

    bottom: 32px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 13px;

    color: #e6e2d8;

    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.caption-line {
    display: block;

    width: 35px;

    height: 1px;

    background: #c6a56c;
}


/* =========================================================
   IMAGE INDEX
========================================================= */

.different-photo-index {
    position: absolute;

    right: 35px;

    bottom: 27px;

    z-index: 5;

    color:
        rgba(255,255,255,.55);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================================================
   HOVER IMAGE
========================================================= */

.different:hover .different-photo img {
    transform: scale(1.08);
}


.different:hover .different-number {
    color: #202224;

    background: #c6a56c;

    transform: rotate(360deg);
}


.different:hover .different-line {
    width: 50px;
}


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

@media (max-width: 991px) {

    .different {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .different-copy {
        min-height: auto;

        padding:
            80px
            clamp(35px, 8vw, 70px);
    }


    .different-photo {
        min-height: 500px;

        height: 500px;
    }


    .different-photo::before {
        display: none;
    }


    .different-copy::after {
        font-size: 220px;

        right: 20px;
    }


    .different-intro > p {
        max-width: 600px;
    }


    .different-points {
        max-width: 650px;
    }

}


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

@media (max-width: 575px) {

    .different-copy {
        padding:
            70px 16px 65px;
    }


    /* Label */

    .different-label {
        gap: 10px;

        margin-bottom: 23px;
    }


    .different-number {
        width: 31px;

        height: 31px;

        flex-basis: 31px;

        font-size: 8px;
    }


    .different-line {
        width: 22px;
    }


    .different-label .eyebrow {
        font-size: 7px;

        letter-spacing: 1.7px;
    }


    /* Heading */

    .different h2 {
        font-size: 43px;

        line-height: 1.05;

        letter-spacing: -.7px;
    }


    /* Description */

    .different-intro > p {
        margin-top: 15px;

        font-size: 13px;

        line-height: 1.5;
    }


    /* Points */

    .different-points {
        grid-template-columns: 1fr;

        margin-top: 32px;

        max-width: 100%;
    }


    .different-point {
        min-height: 55px;

        grid-template-columns:
            25px 31px 1fr;
    }


    .point-text {
        font-size: 15px;
    }


    /* Image */

    .different-photo {
        min-height: 380px;

        height: 380px;
    }


    .different-photo-caption {
        left: 18px;

        bottom: 20px;
    }


    .different-photo-index {
        right: 18px;

        bottom: 18px;
    }


    .different-copy::after {
        font-size: 170px;

        top: 30px;

        right: -15px;
    }

}


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

@media (max-width: 380px) {

    .different h2 {
        font-size: 38px;
    }


    .different-copy {
        padding-left: 13px;

        padding-right: 13px;
    }


    .different-photo {
        height: 330px;

        min-height: 330px;
    }

}


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

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

    .different *,
    .different::before,
    .different::after {
        transition: none !important;

        animation: none !important;
    }

}


/* =========================================================
   13. DESIGN / APPROACH
   PREMIUM ARCHITECTURAL LAYOUT
========================================================= */

.design {
    position: relative;

    display: grid;

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

    background: #202224;

    border-bottom:
        1px solid rgba(198,165,108,.15);

    overflow: hidden;
}


/* =========================================================
   DESIGN INTRO
========================================================= */

.design-intro {
    position: relative;

    padding:
        clamp(80px, 8vw, 115px)
        clamp(35px, 7vw, 100px);

    background:
        linear-gradient(
            135deg,
            #292c2f 0%,
            #25282a 100%
        );

    box-sizing: border-box;

    overflow: hidden;
}


/* =========================================================
   SUBTLE ARCHITECTURAL GRID
========================================================= */

.design-intro::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .3;

    background-image:
        linear-gradient(
            rgba(198,165,108,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(198,165,108,.035) 1px,
            transparent 1px
        );

    background-size: 45px 45px;
}


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.design-intro::after {
    content: "#";

    position: absolute;

    top: 15px;

    right: -20px;

    color:
        rgba(198,165,108,.035);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(180px, 19vw, 280px);

    line-height: 1;

    pointer-events: none;
}


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

.design-label {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 28px;
}


.design-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    border: 1px solid rgba(198,165,108,.4);
    border-radius: 50%;

    color: #c6a56c;

    transition:
        background .4s ease,
        color .4s ease,
        transform .5s ease;
}

/* ICON */
.design-number i {
    font-size: 18px;
    color: inherit;
    transition: transform .5s ease;
}

/* HOVER EFFECT (apply on parent) */
.design-label:hover .design-number {
    background: #c6a56c;
    color: #202224;
    transform: rotate(360deg);
}

.design-label:hover .design-label-line {
    width: 50px;
}

.design-label:hover .design-number i {
    transform: rotate(-360deg);
}


.design-label-line {
    width: 35px;

    height: 1px;

    background:
        rgba(198,165,108,.45);

    transition:
        width .4s ease;
}


.design-label .eyebrow {
    margin: 0;

    color: #c6a56c;

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.design-intro h2 {
    position: relative;

    z-index: 2;

    max-width: 570px;

    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 4.5vw, 62px);

    font-weight: 400;

    line-height: 1.06;

    letter-spacing: -1px;
}


.design-intro h2 em {
    color: #c6a56c;

    font-style: normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.design-description {
    position: relative;

    z-index: 2;

    max-width: 450px;

    margin: 27px 0 0;

    color: #949997;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.9;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.design-principles {
    position: relative;

    z-index: 2;

    display: grid;

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

    max-width: 510px;

    margin-top: 42px;

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


/* =========================================================
   PRINCIPLE
========================================================= */

.design-principle {
    position: relative;

    /* display: grid; */
    display: flex;

    /* grid-template-columns:
        25px 31px 1fr; */

    align-items: center;

    gap: 10px;

    min-height: 60px;

    padding: 8px 12px 8px 0;

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

    transition:
        background .3s ease,
        padding-left .35s ease;
}


/* =========================================================
   PRINCIPLE NUMBER
========================================================= */

.principle-number {
    color:
        rgba(198,165,108,.48);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 8px;

    transition:
        color .3s ease;
}


/* =========================================================
   PRINCIPLE ICON
========================================================= */

.principle-icon {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 35px;

    border:
        1px solid rgba(198,165,108,.25);

    border-radius: 50%;

    color: #c6a56c;

    transition:
        background .35s ease,
        border-color .35s ease,
        color .35s ease,
        transform .45s ease;
}


.principle-icon svg {
    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.15;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =========================================================
   PRINCIPLE NAME
========================================================= */

.principle-name {
    color: #c9cbc8;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 15px;

    font-weight: 400;

    transition:
        color .3s ease;
}


/* =========================================================
   PRINCIPLE HOVER
========================================================= */

.design-principle:hover {
    padding-left: 10px;

    background:
        rgba(198,165,108,.035);
}


.design-principle:hover .principle-number {
    color: #c6a56c;
}


.design-principle:hover .principle-icon {
    color: #202224;

    background: #c6a56c;

    border-color: #c6a56c;

    transform: rotate(360deg);
}


.design-principle:hover .principle-name {
    color: #c6a56c;
}


/* =========================================================
   DESIGN PHOTO
========================================================= */

.design-photo {
    position: relative;

    min-height: 560px;

    overflow: hidden;

    background: #191b1d;
}


/* =========================================================
   PHOTO IMAGE
========================================================= */

.design-photo img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.03);

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


/* =========================================================
   PHOTO OVERLAY
========================================================= */

.design-photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(25,27,29,.40),
            transparent 50%
        ),
        linear-gradient(
            0deg,
            rgba(25,27,29,.45),
            transparent 45%
        );
}


/* =========================================================
   ARCHITECTURAL FRAME
========================================================= */

.design-frame {
    position: absolute;

    inset: 35px;

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

    pointer-events: none;

    transition:
        inset .6s ease,
        border-color .5s ease;
}


/* =========================================================
   FRAME CORNERS
========================================================= */

.frame-corner {
    position: absolute;

    width: 18px;

    height: 18px;

    border-color: #c6a56c;

    border-style: solid;
}


.frame-corner.top-left {
    top: -1px;
    left: -1px;

    border-width: 2px 0 0 2px;
}


.frame-corner.top-right {
    top: -1px;
    right: -1px;

    border-width: 2px 2px 0 0;
}


.frame-corner.bottom-left {
    bottom: -1px;
    left: -1px;

    border-width: 0 0 2px 2px;
}


.frame-corner.bottom-right {
    right: -1px;
    bottom: -1px;

    border-width: 0 2px 2px 0;
}


/* =========================================================
   PHOTO CAPTION
========================================================= */

.design-photo-caption {
    position: absolute;

    left: 50px;

    bottom: 40px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 13px;

    color: #ebe7dc;

    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.caption-line {
    width: 35px;

    height: 1px;

    background: #c6a56c;
}


/* =========================================================
   PHOTO NUMBER
========================================================= */

.design-photo-number {
    position: absolute;

    right: 48px;

    bottom: 36px;

    color:
        rgba(255,255,255,.55);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 10px;

    letter-spacing: 2px;
}


/* =========================================================
   PHOTO HOVER
========================================================= */

.design:hover .design-photo img {
    transform: scale(1.09);
}


.design:hover .design-frame {
    inset: 25px;

    border-color:
        rgba(198,165,108,.35);
}


.design:hover .design-number {
    color: #202224;

    background: #c6a56c;

    transform: rotate(360deg);
}


.design:hover .design-label-line {
    width: 50px;
}


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

.design-purpose {
    position: relative;

    grid-column: 2;

    padding:
        clamp(65px, 6vw, 90px)
        clamp(35px, 7vw, 100px);

    background:
        #242729;

    border-top:
        1px solid rgba(198,165,108,.15);

    overflow: hidden;
}


/* =========================================================
   PURPOSE BACKGROUND DETAIL
========================================================= */

.design-purpose::before {
    content: "";

    position: absolute;

    right: -30px;

    top: -55px;

    width: 180px;

    height: 180px;

    border:
        1px solid rgba(198,165,108,.08);

    border-radius: 50%;
}


.design-purpose::after {
    content: "";

    position: absolute;

    right: 10px;

    top: -20px;

    width: 100px;

    height: 100px;

    border:
        1px solid rgba(198,165,108,.06);

    border-radius: 50%;
}


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

.purpose-number {
    margin-bottom: 22px;

    color:
        rgba(198,165,108,.55);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 8px;

    letter-spacing: 1.5px;
}


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

.design-purpose .eyebrow {
    display: block;

    margin-bottom: 20px;

    color: #c6a56c;

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.design-purpose h2 {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(35px, 3.5vw, 50px);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: -.7px;
}


.design-purpose h2 em {
    color: #c6a56c;

    font-style: normal;
}


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

.design-purpose p {
    max-width: 440px;

    margin: 23px 0 0;

    color: #909593;

    font-size: 10px;

    line-height: 1.85;
}


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

.purpose-line {
    width: 50px;

    height: 1px;

    margin-top: 30px;

    background: #c6a56c;
}


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

.purpose-statement {
    display: flex;

    flex-wrap: wrap;

    gap: 8px 25px;

    margin-top: 22px;
}


.purpose-statement span {
    position: relative;

    color: #777c79;

    font-family: Arial, sans-serif;

    font-size: 7px;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.purpose-statement span::before {
    content: "•";

    margin-right: 7px;

    color: #c6a56c;
}


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

@media (max-width: 991px) {

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


    .design-intro {
        padding:
            80px
            clamp(35px, 8vw, 70px);
    }


    .design-photo {
        min-height: 500px;

        height: 500px;
    }


    .design-purpose {
        grid-column: 1;

        padding:
            70px
            clamp(35px, 8vw, 70px);
    }


    .design-principles {
        max-width: 650px;
    }

}


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

@media (max-width: 575px) {

    .design-intro {
        padding:
            70px 16px 60px;
    }


    /* Label */

    .design-label {
        gap: 10px;

        margin-bottom: 23px;
    }


    .design-number {
        width: 31px;

        height: 31px;

        flex-basis: 31px;

        font-size: 8px;
    }


    .design-label-line {
        width: 22px;
    }


    .design-label .eyebrow {
        font-size: 7px;

        letter-spacing: 1.7px;
    }


    /* Heading */

    .design-intro h2 {
        font-size: 38px;

        line-height: 1.06;
    }


    /* Description */

    .design-description {
        margin-top: 15px;

        font-size: 13px;

        line-height: 1.5;
    }


    /* Principles */

    .design-principles {
        grid-template-columns: 1fr;

        margin-top: 32px;
    }


    .design-principle {
        min-height: 55px;
    }


    .principle-name {
        font-size: 15px;
    }


    /* Photo */

    .design-photo {
        min-height: 380px;

        height: 380px;
    }


    .design-frame {
        inset: 18px;
    }


    .design:hover .design-frame {
        inset: 18px;
    }


    .design-photo-caption {
        left: 25px;

        bottom: 24px;
    }


    .design-photo-number {
        right: 25px;

        bottom: 22px;
    }


    /* Purpose */

    .design-purpose {
        padding:
            60px 16px;
    }


    .purpose-number {
        margin-bottom: 18px;
    }


    .design-purpose h2 {
        font-size: 34px;
    }


    .design-purpose p {
        font-size: 9.5px;
    }


    .purpose-statement {
        flex-direction: column;

        gap: 10px;
    }


    .design-intro::after {
        font-size: 160px;

        top: 25px;

        right: -15px;
    }

}


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

@media (max-width: 380px) {

    .design-intro {
        padding-left: 13px;

        padding-right: 13px;
    }


    .design-intro h2 {
        font-size: 34px;
    }


    .design-purpose {
        padding-left: 13px;

        padding-right: 13px;
    }


    .design-purpose h2 {
        font-size: 31px;
    }


    .design-photo {
        height: 330px;

        min-height: 330px;
    }

}


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

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

    .design *,
    .design::before,
    .design::after {
        transition: none !important;

        animation: none !important;
    }

}



/* =========================================================
   14. CONSTRUCTION EXCELLENCE
   PREMIUM PROCESS SECTION
========================================================= */

.construction {
    position: relative;

    background:
        #25282a;

    overflow: hidden;

    border-bottom:
        1px solid rgba(198,165,108,.14);
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.construction::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .35;

    background-image:
        linear-gradient(
            rgba(198,165,108,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(198,165,108,.025) 1px,
            transparent 1px
        );

    background-size: 50px 50px;
}


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.construction::after {
    /* content: "05"; */
    content: "Quality";

    position: absolute;

    top: 25px;

    right: -20px;

    color:
        rgba(198,165,108,.025);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(180px, 20vw, 300px);

    line-height: 1;

    pointer-events: none;
}


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

.construction-heading {
    position: relative;

    z-index: 2;

    max-width: 650px;

    margin:
        0 auto 70px;

    text-align: center;
}


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

.construction-label {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 25px;
}


.construction-label-number {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 33px;

    height: 33px;

    border:
        1px solid rgba(198,165,108,.4);

    border-radius: 50%;

    color: #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 9px;

    transition:
        .5s ease;
}


.construction-label-line {
    width: 35px;

    height: 1px;

    background:
        rgba(198,165,108,.4);
}


.construction-label .eyebrow {
    margin: 0;

    color: #c6a56c;

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


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

.construction-heading h2 {
    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 4vw, 57px);

    font-weight: 400;

    line-height: 1.08;

    letter-spacing: -.8px;
}


.construction-heading h2 em {
    color: #c6a56c;

    font-style: normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.construction-heading p {
    max-width: 480px;

    margin:
        25px auto 0;

    color: #969a98;

    font-size: 15px;

    line-height: 1.85;
}


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

.construction-process {
    position: relative;

    z-index: 2;

    display: grid;

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

    max-width: 1220px;

    margin: 0 auto;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.process-line {
    position: absolute;

    top: 35px;

    left: 8%;

    right: 8%;

    height: 1px;

    background:
        rgba(198,165,108,.18);

    z-index: 0;

    overflow: hidden;
}


.process-line span {
    display: block;

    width: 100%;

    height: 100%;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            #8e7448,
            #c6a56c,
            #8e7448
        );

    animation:
        processLine 1.8s ease forwards;
}


@keyframes processLine {

    to {
        transform: scaleX(1);
    }

}


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

.process-step {
    position: relative;

    z-index: 2;

    padding:
        0 18px 30px;

    text-align: center;
}


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

.process-icon {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 70px;

    height: 70px;

    margin:
        0 auto 27px;

    border:
        1px solid rgba(198,165,108,.32);

    border-radius: 50%;

    background:
        #25282a;

    color: #c6a56c;

    transition:
        transform .5s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}


/* outer ring */

.process-icon::before {
    content: "";

    position: absolute;

    inset: -6px;

    border:
        1px solid rgba(198,165,108,.08);

    border-radius: 50%;

    transition:
        transform .6s ease,
        border-color .4s ease;
}


.process-icon svg {
    width: 22px;

    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.15;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .5s ease;
}


/* small number */

.process-icon span {
    position: absolute;

    right: -3px;

    bottom: -3px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    border:
        1px solid #c6a56c;

    border-radius: 50%;

    background: #25282a;

    color: #c6a56c;

    font-size: 7px;
}


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

.process-content {
    max-width: 160px;

    margin: 0 auto;
}


.process-content small {
    display: block;

    margin-bottom: 9px;

    color:
        rgba(198,165,108,.65);

    font-size: 10px;

    letter-spacing: 1.5px;
}


.process-content h3 {
    margin: 0 0 9px;

    color: #dddcd7;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 23px;

    font-weight: 400;

    line-height: 1.2;

    transition:
        color .3s ease;
}


.process-content p {
    margin: 0;

    color: #777c79;

    font-size: 13px;

    line-height: 1.6;

    transition:
        color .3s ease;
}


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

.process-step:hover .process-icon {
    transform:
        translateY(-7px);

    background:
        #c6a56c;

    border-color:
        #c6a56c;

    color:
        #202224;

    box-shadow:
        0 12px 35px
        rgba(198,165,108,.12);
}


.process-step:hover .process-icon::before {
    transform:
        scale(1.18);

    border-color:
        rgba(198,165,108,.3);
}


.process-step:hover .process-icon svg {
    transform:
        scale(1.1)
        rotate(5deg);
}


.process-step:hover .process-content h3 {
    color: #c6a56c;
}


.process-step:hover .process-content p {
    color: #a8aaa7;
}


.process-step:hover .process-icon span {
    background: #25282a;

    color: #c6a56c;
}


/* =========================================================
   ANIMATED STEP ENTRANCE
========================================================= */

.process-step {
    opacity: 0;

    transform:
        translateY(25px);

    animation:
        processReveal .7s ease forwards;
}


.process-step:nth-child(2) {
    animation-delay: .15s;
}

.process-step:nth-child(3) {
    animation-delay: .3s;
}

.process-step:nth-child(4) {
    animation-delay: .45s;
}

.process-step:nth-child(5) {
    animation-delay: .6s;
}

.process-step:nth-child(6) {
    animation-delay: .75s;
}

.process-step:nth-child(7) {
    animation-delay: .9s;
}


@keyframes processReveal {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 991px) {

    .construction-heading {
        margin-bottom: 60px;
    }


    .construction-process {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 50px;
    }


    .process-line {
        display: none;
    }


    .process-step {
        padding-bottom: 0;
    }


    .process-icon {
        width: 65px;

        height: 65px;
    }


    .process-content {
        max-width: 190px;
    }

}


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

@media (max-width: 575px) {

    .construction-heading {
        margin-bottom: 48px;
    }


    .construction-label {
        gap: 9px;
    }


    .construction-label-number {
        width: 30px;

        height: 30px;

        font-size: 8px;
    }


    .construction-label-line {
        width: 22px;
    }


    .construction-heading h2 {
        font-size: 37px;
    }


    .construction-heading p {
        font-size: 13px;

        line-height: 1.3;
    }


    .construction-process {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 45px;
    }


    .process-step {
        padding:
            0 8px;
    }


    .process-icon {
        width: 58px;

        height: 58px;

        margin-bottom: 22px;
    }


    .process-icon svg {
        width: 18px;

        height: 18px;
    }


    .process-icon span {
        width: 19px;

        height: 19px;

        font-size: 6px;
    }


    .process-content h3 {
        font-size: 17px;
    }


    .process-content p {
        font-size: 12px;

        line-height: 1.2;
    }


    .construction-footer {
        gap: 12px;

        margin-top: 50px;
    }


    .construction-footer p {
        font-size: 13px;

        text-align: center;
    }


    .footer-line {
        width: 25px;
    }


    .construction::after {
        font-size: 160px;

        top: 15px;

        right: -10px;
    }

}


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

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

    .construction *,
    .construction::before,
    .construction::after {
        animation: none !important;

        transition: none !important;
    }

}


/* =========================================================
   15. SUSTAINABILITY / SAFETY
   EDITORIAL FEATURE DESIGN
========================================================= */

.features {
    position: relative;

    background: #202224;

    overflow: hidden;
}


/* =========================================================
   FEATURE BLOCK
========================================================= */

.feature-block {
    position: relative;

    min-height: 680px;

    display: flex;

    align-items: center;

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


/* =========================================================
   IMAGE
========================================================= */

.feature-image {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.feature-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transform:
        scale(1.04);

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


.feature-block:hover .feature-image img {
    transform:
        scale(1.09);
}


/* =========================================================
   IMAGE SHADE
========================================================= */

.feature-image-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(22,24,25,.94) 0%,
            rgba(22,24,25,.82) 28%,
            rgba(22,24,25,.42) 58%,
            rgba(22,24,25,.15) 100%
        );
}


/* second block shade */

.feature-safety .feature-image-shade {
    background:
        linear-gradient(
            270deg,
            rgba(22,24,25,.94) 0%,
            rgba(22,24,25,.82) 28%,
            rgba(22,24,25,.42) 58%,
            rgba(22,24,25,.15) 100%
        );
}


/* =========================================================
   LARGE IMAGE NUMBER
========================================================= */

.feature-image-number {
    position: absolute;

    right: 5%;

    bottom: 25px;

    color:
        rgba(255,255,255,.18);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(100px, 13vw, 190px);

    line-height: .8;

    font-weight: 400;
}


/* Move number on second section */

.feature-safety .feature-image-number {
    left: 5%;
    right: auto;
}


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

.feature-panel {
    position: relative;

    z-index: 3;

    width: min(560px, 46%);

    margin-left:
        max(7%, calc((100vw - 1180px) / 2));

    padding:
        58px 62px;

    background:
        rgba(31,33,35,.94);

    border:
        1px solid rgba(198,165,108,.16);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.25);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* =========================================================
   SAFETY PANEL RIGHT
========================================================= */

.feature-safety {
    justify-content: flex-end;
}


.feature-safety .feature-panel {
    margin-left: 0;

    margin-right:
        max(7%, calc((100vw - 1180px) / 2));
}


/* =========================================================
   TOP ROW
========================================================= */

.feature-panel-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;
}


.feature-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #c6a56c;

    font-size: 8px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.feature-kicker i {
    display: block;

    width: 25px;

    height: 1px;

    background:
        #c6a56c;

    transition:
        width .4s ease;
}


.feature-block:hover .feature-kicker i {
    width: 38px;
}


.feature-index {
    color:
        rgba(198,165,108,.4);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 12px;
}


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

.feature-panel h2 {
    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(34px, 3.3vw, 48px);

    font-weight: 400;

    line-height: 1.12;

    letter-spacing: -.5px;
}


.feature-panel h2 em {
    color: #c6a56c;

    font-style: normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.feature-panel > p {
    max-width: 420px;

    margin:
        23px 0 0;

    color: #999d9b;

    font-size: 14px;

    line-height: 1.9;
}


/* =========================================================
   DIVIDER
========================================================= */

.feature-divider {
    width: 100%;

    height: 1px;

    margin:
        30px 0 24px;

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


/* =========================================================
   FEATURE LIST
========================================================= */

.feature-list {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        0 30px;
}


.feature-item {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 43px;

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

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


.feature-item span {
    flex: 0 0 auto;

    color:
        rgba(198,165,108,.55);

    font-size: 7px;

    letter-spacing: 1px;
}


.feature-item strong {
    color: #b9bbb8;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    transition:
        color .3s ease;
}


/* little gold marker */

.feature-item::before {
    content: "";

    width: 15px;

    height: 15px;

    flex: 0 0 15px;

    border:
        1px solid #c6a56c;

    transform:
        rotate(45deg);

    opacity: .6;

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


.feature-item:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(198,165,108,.2);
}


.feature-item:hover strong {
    color: #ddd8cb;
}


.feature-item:hover::before {
    transform:
        rotate(135deg);

    background:
        #c6a56c;
}


/* =========================================================
   BOTTOM LABEL
========================================================= */

.feature-bottom {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 27px;
}


.feature-bottom-line {
    width: 35px;

    height: 1px;

    background:
        rgba(198,165,108,.4);
}


.feature-bottom small {
    color:
        #6e7471;

    font-size: 10px;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


/* =========================================================
   DECORATIVE CORNERS
========================================================= */

.feature-panel::before,
.feature-panel::after {
    content: "";

    position: absolute;

    width: 18px;

    height: 18px;

    pointer-events: none;
}


.feature-panel::before {
    top: -1px;
    left: -1px;

    border-top:
        1px solid #c6a56c;

    border-left:
        1px solid #c6a56c;
}


.feature-panel::after {
    right: -1px;
    bottom: -1px;

    border-right:
        1px solid #c6a56c;

    border-bottom:
        1px solid #c6a56c;
}


/* =========================================================
   ANIMATION
========================================================= */

.feature-panel {
    opacity: 0;

    transform:
        translateY(30px);

    animation:
        featureReveal .9s ease forwards;
}


.feature-sustainable .feature-panel {
    animation-delay:
        .15s;
}


.feature-safety .feature-panel {
    animation-delay:
        .25s;
}


@keyframes featureReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   IMAGE NUMBER ANIMATION
========================================================= */

.feature-image-number {
    transition:
        color .6s ease,
        transform .8s ease;
}


.feature-block:hover .feature-image-number {
    color:
        rgba(198,165,108,.25);

    transform:
        translateY(-10px);
}


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

@media (max-width: 991px) {

    .feature-block {
        min-height: 620px;
    }


    .feature-panel {
        width:
            min(570px, 60%);

        margin-left:
            5%;

        padding:
            48px 45px;
    }


    .feature-safety .feature-panel {
        margin-right:
            5%;
    }


    .feature-panel h2 {
        font-size:
            38px;
    }

}


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

@media (max-width: 767px) {

    .feature-block,
    .feature-safety {
        display: block;

        min-height: auto;

        padding:
            0 16px 50px;
    }


    /* image becomes normal top section */

    .feature-image {
        position: relative;

        width: 100%;

        height: 310px;

        inset: auto;
    }


    .feature-image img {
        transform:
            scale(1);
    }


    .feature-image-shade,
    .feature-safety .feature-image-shade {
        background:
            linear-gradient(
                180deg,
                transparent 35%,
                rgba(22,24,25,.75) 100%
            );
    }

.feature-sustainable
    .feature-image-number,
    .feature-safety .feature-image-number {
        left: auto;

        right: 15px;

        bottom: 20px;

        font-size: 65px;
    }

.feature-safety
    .feature-image-number,
    .feature-safety .feature-image-number {
        left: auto;

        right: 20px;

        bottom: 15px;

        font-size: 90px;
    }


    /* panel */

    .feature-panel,
    .feature-safety .feature-panel {
        width: 100%;

        margin:
            -35px 0 0;

        padding:
            38px 25px 30px;

        transform:
            none;

        animation: none;
    }


    .feature-panel-top {
        margin-bottom: 22px;
    }


    .feature-panel h2 {
        font-size:
            34px;

        line-height:
            1.13;
    }


    .feature-panel > p {
        font-size:
            9.5px;

        line-height:
            1.8;
    }


    .feature-list {
        grid-template-columns:
            1fr;

        gap: 0;
    }


    .feature-item {
        min-height:
            42px;
    }


    .feature-item strong {
        font-size:
            13px;
    }


    .feature-divider {
        margin:
            25px 0 15px;
    }


    .feature-bottom {
        margin-top:
            23px;
    }

}


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

@media (max-width: 400px) {

    .feature-block,
    .feature-safety {
        padding-left:
            12px;

        padding-right:
            12px;
    }


    .feature-image {
        height:
            270px;
    }


    .feature-panel {
        padding:
            32px 20px 27px;
    }


    .feature-panel h2 {
        font-size:
            30px;
    }


    .feature-kicker {
        font-size:
            7px;

        letter-spacing:
            1.5px;
    }

}


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

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

    .features *,
    .features::before,
    .features::after {
        animation: none !important;

        transition: none !important;
    }

}


/* =========================================================
   16. CUSTOMER EXPERIENCE
   PREMIUM CUSTOMER JOURNEY
========================================================= */

.customer {
    position: relative;

    background:
        #292c2f;

    overflow: hidden;

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


/* =========================================================
   BACKGROUND DETAILS
========================================================= */

.customer::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(198,165,108,.055),
            transparent 40%
        );
}


.customer::after {
    content: "EXPERIENCE";

    position: absolute;

    top: -100px;

    left: -20px;

    color:
        rgba(198,165,108,.025);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(180px, 23vw, 320px);

    line-height: 1;

    pointer-events: none;
}


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

.customer-heading {
    position: relative;

    z-index: 2;

    max-width: 700px;

    margin:
        0 auto 75px;

    text-align: center;
}


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

.customer-label {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 25px;
}


.customer-label span {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    border:
        1px solid rgba(198,165,108,.4);

    border-radius: 50%;

    color: #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 9px;
}


.customer-label i {
    width: 30px;

    /* height: 1px; */

    /* background:
        rgba(198,165,108,.35); */
}


.customer-label .eyebrow {
    margin: 0;

    color: #c6a56c;

    font-size: 8px;

    letter-spacing: 2px;
}


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

.customer-heading h2 {
    margin: 0;

    color: #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(38px, 4vw, 55px);

    font-weight: 400;

    line-height: 1.1;

    letter-spacing: -.7px;
}


.customer-heading h2 em {
    color: #c6a56c;

    font-style: normal;
}


.customer-heading p {
    max-width: 500px;

    margin:
        25px auto 0;

    color: #949896;

    font-size: 15px;

    line-height: 1.5;
}


/* =========================================================
   JOURNEY
========================================================= */

.customer-journey {
    position: relative;

    z-index: 3;

    display: grid;

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

    max-width: 1220px;

    margin:
        0 auto;
}


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

.journey-track {
    position: absolute;

    top: 36px;

    left: 7%;

    right: 7%;

    height: 1px;

    background:
        rgba(198,165,108,.16);

    overflow: hidden;
}


.journey-track span {
    display: block;

    width: 100%;

    height: 100%;

    transform:
        scaleX(0);

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(198,165,108,.35),
            #c6a56c,
            rgba(198,165,108,.35)
        );

    animation:
        journeyLine 2s ease forwards;
}


@keyframes journeyLine {

    to {
        transform:
            scaleX(1);
    }

}


/* =========================================================
   STEP
========================================================= */

.journey-step {
    position: relative;

    z-index: 2;

    padding:
        0 14px;

    text-align: center;
}


/* =========================================================
   NODE
========================================================= */

.journey-node {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 72px;

    height: 72px;

    margin:
        0 auto 30px;

    border:
        1px solid rgba(198,165,108,.35);

    border-radius: 50%;

    background:
        #292c2f;

    color:
        #c6a56c;

    transition:
        .45s ease;
}


.journey-node::before {
    content: "";

    position: absolute;

    inset: -7px;

    border:
        1px solid rgba(198,165,108,.08);

    border-radius: 50%;

    transition:
        .5s ease;
}


.journey-node svg {
    width: 22px;

    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.1;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .45s ease;
}


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

.journey-node span {
    position: absolute;

    right: -3px;

    bottom: -3px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 22px;

    height: 22px;

    border:
        1px solid #c6a56c;

    border-radius: 50%;

    background:
        #292c2f;

    color:
        #c6a56c;

    font-size: 7px;
}


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

.journey-content {
    max-width: 165px;

    margin: 0 auto;
}


.journey-content > small {
    display: block;

    margin-bottom: 9px;

    color:
        rgba(198,165,108,.55);

    font-size: 9px;

    letter-spacing: 1.4px;

    line-height: 1.4;
}


.journey-content h3 {
    margin:
        0 0 8px;

    color:
        #e0dfda;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        25px;

    font-weight: 400;

    line-height: 1.2;

    transition:
        color .3s ease;
}


.journey-content p {
    margin: 0;

    color:
        #777c79;

    font-size:
        12px;

    line-height:
        1.7;

    transition:
        color .3s ease;
}


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

.journey-step:hover .journey-node {
    background:
        #c6a56c;

    border-color:
        #c6a56c;

    color:
        #202224;

    transform:
        translateY(-7px);

    box-shadow:
        0 15px 35px
        rgba(198,165,108,.13);
}


.journey-step:hover .journey-node::before {
    transform:
        scale(1.16);

    border-color:
        rgba(198,165,108,.25);
}


.journey-step:hover .journey-node svg {
    transform:
        scale(1.12);
}


.journey-step:hover .journey-content h3 {
    color:
        #c6a56c;
}


.journey-step:hover .journey-content p {
    color:
        #a3a6a3;
}


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

.journey-final .journey-node {
    border-color:
        rgba(198,165,108,.55);

    box-shadow:
        0 0 0 5px
        rgba(198,165,108,.025);
}


.journey-final .journey-content h3 {
    color:
        #c6a56c;
}




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

.journey-step {
    opacity: 0;

    transform:
        translateY(25px);

    animation:
        journeyReveal .7s ease forwards;
}


.journey-step:nth-child(2) {
    animation-delay: .1s;
}

.journey-step:nth-child(3) {
    animation-delay: .25s;
}

.journey-step:nth-child(4) {
    animation-delay: .4s;
}

.journey-step:nth-child(5) {
    animation-delay: .55s;
}

.journey-step:nth-child(6) {
    animation-delay: .7s;
}

.journey-step:nth-child(7) {
    animation-delay: .85s;
}


@keyframes journeyReveal {

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 991px) {

    .customer-heading {
        margin-bottom:
            60px;
    }


    .customer-journey {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap:
            55px;
    }


    .journey-track {
        display:
            none;
    }


    .journey-step {
        padding:
            0 15px;
    }

}


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

@media (max-width: 575px) {

    .customer-heading {
        margin-bottom:
            48px;
    }


    .customer-label span {
        width: 29px;

        height: 29px;
    }


    .customer-label i {
        width: 20px;
    }


    .customer-heading h2 {
        font-size:
            35px;

        line-height:
            1.12;
    }


    .customer-heading p {
        font-size:
            13px;
    }


    .customer-journey {
        grid-template-columns:
            1fr 1fr;

        row-gap:
            45px;
    }


    .journey-step {
        padding:
            0 8px;
    }


    .journey-node {
        width:
            60px;

        height:
            60px;

        margin-bottom:
            22px;
    }


    .journey-node svg {
        width:
            19px;

        height:
            19px;
    }


    .journey-node span {
        width:
            19px;

        height:
            19px;

        font-size:
            6px;
    }


    .journey-content h3 {
        font-size:
            20px;
    }


    .journey-content p {
        font-size:
            12px;

        line-height:
            1.2;
    }


    .journey-content > small {
        font-size:
            10px;
    }


    .customer-footer {
        margin-top:
            48px;

        gap:
            10px;
    }


    .customer-footer span {
        width:
            25px;
    }


    .customer-footer p {
        font-size:
            13px;

        text-align:
            center;
    }


    .customer::after {
        font-size:
            150px;
    }

}


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

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

    .customer *,
    .customer::before,
    .customer::after {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   17. LEADERSHIP
   PREMIUM EDITORIAL DESIGN
========================================================= */

.leadership {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    min-height:
        680px;

    background:
        #202326;

    overflow:
        hidden;

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


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.leadership-number {
    position: absolute;

    right:
        -15px;

    top:
        -65px;

    z-index:
        0;

    color:
        rgba(198,165,108,.025);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(220px, 27vw, 390px);

    font-weight:
        400;

    line-height:
        1;

    pointer-events:
        none;
}


/* =========================================================
   IMAGE SIDE
========================================================= */

.leadership-visual {
    position:
        relative;

    min-height:
        680px;

    overflow:
        hidden;

    background:
        #17191b;
}


/* =========================================================
   IMAGE
========================================================= */

.leadership-image {
    position:
        absolute;

    inset:
        45px 55px 45px 0;

    overflow:
        hidden;
}


.leadership-image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        saturate(.72)
        contrast(1.05);

    transform:
        scale(1.03);

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


.leadership:hover
.leadership-image img {
    transform:
        scale(1.08);

    filter:
        saturate(.9)
        contrast(1.06);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.leadership-overlay {
    position:
        absolute;

    inset:
        45px 55px 45px 0;

    z-index:
        1;

    pointer-events:
        none;

    background:
        linear-gradient(
            180deg,
            rgba(20,22,24,.05) 25%,
            rgba(20,22,24,.35) 100%
        );
}


/* =========================================================
   IMAGE GOLD EDGE
========================================================= */

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

    position:
        absolute;

    left:
        0;

    top:
        45px;

    bottom:
        45px;

    width:
        2px;

    background:
        linear-gradient(
            180deg,
            transparent,
            #c6a56c 30%,
            #c6a56c 70%,
            transparent
        );

    opacity:
        .75;
}


/* =========================================================
   FLOATING BRAND BADGE
========================================================= */

.leadership-badge {
    position:
        absolute;

    right:
        28px;

    top:
        50%;

    z-index:
        4;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 16px;

    background:
        rgba(32,35,38,.92);

    border:
        1px solid rgba(198,165,108,.3);

    backdrop-filter:
        blur(8px);

    transform:
        translateY(-50%);

    color:
        #c6a56c;
}


.badge-line {
    width:
        24px;

    height:
        1px;

    background:
        #c6a56c;
}


.leadership-badge strong {
    display:
        block;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        12px;

    font-weight:
        400;

    letter-spacing:
        2px;
}


.leadership-badge small {
    display:
        block;

    margin-top:
        2px;

    color:
        #777b79;

    font-size:
        6px;

    letter-spacing:
        2px;
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.leadership-caption {
    position:
        absolute;

    left:
        30px;

    bottom:
        25px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.leadership-caption span {
    color:
        #c6a56c;

    font-size:
        10px;

    letter-spacing:
        1.8px;
}


.leadership-caption i {
    width:
        25px;

    height:
        1px;

    background:
        rgba(198,165,108,.5);
}


.leadership-caption strong {
    color:
        rgba(238,234,226,.7);

    font-size:
        7px;

    font-weight:
        400;

    letter-spacing:
        .8px;
}


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

.leadership-content {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        80px
        /* max(7%, calc((100vw - var(--max)) / 2)) */
        /* 75px */
        65px;
}


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

.leadership-label {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        24px;
}


.leadership-label span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        30px;

    height:
        30px;

    border:
        1px solid rgba(198,165,108,.4);

    border-radius:
        50%;

    color:
        #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        9px;
}





.leadership-label .eyebrow {
    margin:
        0;

    color:
        #c6a56c;
}

.leadership-label i {
font-size:18px;
}


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

.leadership-intro h2 {
    margin:
        0;

    color:
        #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(40px, 4vw, 58px);

    font-weight:
        400;

    line-height:
        1.08;

    letter-spacing:
        -.8px;
}


.leadership-intro h2 em {
    display:
        inline-block;

    color:
        #c6a56c;

    font-style:
        normal;
}


.leadership-intro p {
    max-width:
        475px;

    margin:
        26px 0 0;

    color:
        #919593;

    font-size:
        13px;

    line-height:
        1.9;
}


/* =========================================================
   PRINCIPLES
========================================================= */

.leadership-principles {
    display:
        grid;

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

    max-width:
        520px;

    margin-top:
        42px;

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

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


.leadership-principle {
    position:
        relative;

    padding:
        18px 14px 18px 0;

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


.leadership-principle:not(:first-child) {
    padding-left:
        16px;
}


.leadership-principle:last-child {
    border-right:
        0;
}


.leadership-principle > span {
    display:
        block;

    margin-bottom:
        17px;

    color:
        #c6a56c;

    font-size:
        7px;

    letter-spacing:
        1px;
}


.leadership-principle strong {
    display:
        block;

    color:
        #dddcd7;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.3;
}


.leadership-principle small {
    display:
        block;

    margin-top:
        5px;

    color:
        #6f7471;

    font-size:
        15px;

    line-height:
        1.3;
}


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

.leadership-statement {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        35px;
}


.leadership-statement > span {
    width:
        35px;

    height:
        1px;

    background:
        #c6a56c;
}


.leadership-statement p {
    margin:
        0;

    color:
        #707572;

    font-size:
        10px;

    line-height:
        1.8;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;
}


.leadership-statement em {
    color:
        #c6a56c;

    font-style:
        normal;
}


/* =========================================================
   SUBTLE ANIMATION
========================================================= */

.leadership-label,
.leadership-intro h2,
.leadership-intro p,
.leadership-principles,
.leadership-statement {
    animation:
        leadershipFade .8s ease both;
}


.leadership-intro h2 {
    animation-delay:
        .1s;
}


.leadership-intro p {
    animation-delay:
        .2s;
}


.leadership-principles {
    animation-delay:
        .3s;
}


.leadership-statement {
    animation-delay:
        .4s;
}


@keyframes leadershipFade {

    from {
        opacity:
            0;

        transform:
            translateY(20px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 991px) {

    .leadership {
        grid-template-columns:
            1fr;

        min-height:
            auto;
    }


    .leadership-visual {
        min-height:
            520px;
    }


    .leadership-image,
    .leadership-overlay {
        inset:
            35px 40px 35px 0;
    }


    .leadership-visual::after {
        top:
            35px;

        bottom:
            35px;
    }


    .leadership-content {
        padding:
            75px
            max(6%, 40px);
    }


    .leadership-principles {
        max-width:
            100%;
    }


    .leadership-badge {
        right:
            25px;
    }

}


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

@media (max-width: 575px) {

    .leadership {
        display:
            block;
    }


    .leadership-visual {
        min-height:
            390px;
    }


    .leadership-image,
    .leadership-overlay {
        inset:
            20px 20px 20px 0;
    }


    .leadership-visual::after {
        top:
            20px;

        bottom:
            20px;
    }


    .leadership-badge {
        right:
            12px;

        padding:
            10px 12px;
    }


    .leadership-badge strong {
        font-size:
            10px;
    }


    .leadership-caption {
        left:
            15px;

        bottom:
            13px;

        gap:
            7px;
    }


    .leadership-caption strong {
        display:
            none;
    }


    .leadership-content {
        padding:
            60px 16px;
    }


    .leadership-intro h2 {
        font-size:
            36px;

        line-height:
            1.1;
    }


    .leadership-intro p {
        font-size:
            14px;

        line-height:
            1.4;
    }


    .leadership-principles {
        grid-template-columns:
            1fr;

        margin-top:
            35px;
    }


    .leadership-principle,
    .leadership-principle:not(:first-child) {
        display:
            grid;

        grid-template-columns:
            30px 1fr;

        gap:
            10px;

        padding:
            15px 0;

        border-right:
            0;

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


    .leadership-principle:last-child {
        border-bottom:
            0;
    }


    .leadership-principle > span {
        margin:
            2px 0 0;
    }


    .leadership-principle strong {
        font-size:
            18px;
    }


    .leadership-statement {
        margin-top:
            28px;
    }


    .leadership-number {
        font-size:
            170px;

        top:
            -25px;
    }

}


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

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

    .leadership *,
    .leadership img {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   18. FUTURE / LOOKING AHEAD
   PREMIUM CINEMATIC DESIGN
========================================================= */

.future {
    position: relative;

    min-height: 700px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #1b1e21;

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


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.future-bg {
    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2000&q=88&fm=webp")
        center / cover no-repeat;

    transform: scale(1.03);

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


.future:hover .future-bg {
    transform: scale(1.07);
}


/* =========================================================
   CINEMATIC SHADE
========================================================= */

.future-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(27,30,33,.98) 0%,
            rgba(27,30,33,.94) 30%,
            rgba(27,30,33,.76) 55%,
            rgba(27,30,33,.28) 100%
        );
}


/* Additional bottom fade */

.future-shade::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(27,30,33,.8),
            #000000a3  35%
        );
}


/* =========================================================
   LARGE BACKGROUND YEAR
========================================================= */

.future-number {
    position: absolute;

    z-index: 2;

    right: -35px;

    top: 50%;

    transform:
        translateY(-52%);

    color:
        rgba(198,165,108,.055);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(190px, 27vw, 420px);

    font-weight:
        400;

    line-height:
        .8;

    letter-spacing:
        -12px;

    user-select:
        none;

    pointer-events:
        none;
}


/* =========================================================
   MAIN INNER
========================================================= */

.future-inner {
    position: relative;

    z-index: 5;

    width:
        min(1180px, calc(100% - 48px));

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, .95fr);

    gap:
        clamp(50px, 8vw, 120px);

    align-items:
        center;
}


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

.future-content {
    max-width:
        600px;
}


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

.future-label {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        25px;
}


.future-label > span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        31px;

    height:
        31px;

    border:
        1px solid rgba(198,165,108,.42);

    border-radius:
        50%;

    color:
        #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        9px;
}


.future-label i {
    width:
        30px;

    height:
        1px;

    background:
        rgba(198,165,108,.4);
}


.future-label .eyebrow {
    margin:
        0;

    color:
        #c6a56c;
}


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

.future h2 {
    margin:
        0;

    color:
        #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(43px, 5vw, 68px);

    font-weight:
        400;

    line-height:
        1.04;

    letter-spacing:
        -1px;
}


.future h2 em {
    color:
        #c6a56c;

    font-style:
        normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.future-content > p {
    max-width:
        520px;

    margin:
        28px 0 0;

    color:
        #999d9b;

    font-size:
        13px;

    line-height:
        1.5;
}


/* =========================================================
   GOLD LINE
========================================================= */

.future-line {
    width:
        100%;

    max-width:
        480px;

    height:
        1px;

    margin-top:
        34px;

    background:
        linear-gradient(
            90deg,
            #c6a56c,
            rgba(198,165,108,.15),
            transparent
        );

    position:
        relative;

    overflow:
        hidden;
}


.future-line::after {
    content:
        "";

    position:
        absolute;

    left:
        -100%;

    top:
        0;

    width:
        100%;

    height:
        1px;

    background:
        #e0c98f;

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


@keyframes futureLine {

    0% {
        left: -100%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }

}


/* =========================================================
   DIRECTION NOTE
========================================================= */

.future-note {
    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    margin-top:
        27px;
}


.future-note > span {
    color:
        #bcc6bf;

    font-size:
        10px;

    letter-spacing:
        1.5px;
}


.future-note strong {
    color:
        #d8d7d1;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        400;
}


.future-note strong em {
    color:
        #c6a56c;

    font-style:
        normal;
}


/* =========================================================
   FUTURE PILLARS
========================================================= */

.future-pillars {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    border:
        1px solid rgba(198,165,108,.22);

    background:
        rgba(25,28,30,.46);

    backdrop-filter:
        blur(9px);
}


/* =========================================================
   PILLAR
========================================================= */

.future-pillar {
    position:
        relative;

    min-height:
        135px;

    padding:
        25px 22px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

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

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

    overflow:
        hidden;

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


/* Correct borders */

.future-pillar:nth-child(2n) {
    border-right:
        0;
}

.future-pillar:nth-child(n + 5) {
    border-bottom:
        0;
}


/* Hover */

.future-pillar:hover {
    background:
        rgba(198,165,108,.09);

    transform:
        translateY(-3px);
}


/* =========================================================
   PILLAR NUMBER
========================================================= */

.future-pillar > span {
    color:
        #c6a56c;

    font-size:
        12px;

    letter-spacing:
        1.5px;
}


/* =========================================================
   PILLAR TITLE
========================================================= */

.future-pillar strong {
    display:
        block;

    color:
        #e2e0d9;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        17px;

    font-weight:
        400;

    line-height:
        1.2;
}


.future-pillar small {
    display:
        block;

    margin-top:
        4px;

    color:
        #777b79;

    font-size:
        15px;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;
}


/* =========================================================
   SMALL GOLD CORNER
========================================================= */

.future-pillar::after {
    content:
        "";

    position:
        absolute;

    right:
        0;

    bottom:
        0;

    width:
        0;

    height:
        0;

    border-style:
        solid;

    border-width:
        0 0 24px 24px;

    border-color:
        transparent
        transparent
        rgba(198,165,108,.14)
        transparent;

    transition:
        border-color .3s ease;
}


.future-pillar:hover::after {
    border-color:
        transparent
        transparent
        rgba(198,165,108,.45)
        transparent;
}


/* =========================================================
   BOTTOM PROGRESS
========================================================= */

.future-progress {
    position:
        absolute;

    left:
        50%;

    bottom:
        27px;

    z-index:
        6;

    transform:
        translateX(-50%);

    width:
        min(1180px, calc(100% - 48px));

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.future-progress span {
    height:
        1px;

    flex:
        1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(198,165,108,.35)
        );
}


.future-progress span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(198,165,108,.35),
            transparent
        );
}


.future-progress small {
    color:
        #6f7371;

    font-size:
        6px;

    letter-spacing:
        2px;

    white-space:
        nowrap;
}


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

@media (max-width: 991px) {

    .future {
        min-height:
            auto;

        padding:
            100px 0 90px;
    }


    .future-inner {
        grid-template-columns:
            1fr;

        gap:
            55px;
    }


    .future-content {
        max-width:
            680px;
    }


    .future-pillars {
        max-width:
            650px;
    }


    .future-number {
        right:
            -30px;

        top:
            30px;

        transform:
            none;

        font-size:
            220px;
    }


    .future-progress {
        bottom:
            20px;
    }

}


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

@media (max-width: 575px) {

    .future {
        padding:
            75px 0 75px;
    }


    .future-inner {
        width:
            calc(100% - 32px);

        gap:
            42px;
    }


    .future-label {
        margin-bottom:
            20px;
    }


    .future h2 {
        font-size:
            38px;

        line-height:
            1.08;
    }


    .future-content > p {
        margin-top:
            22px;

        font-size:
            14px;

        line-height:
            1.3;
    }


    .future-note {
        gap:
            12px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .future-pillars {
        grid-template-columns:
            1fr;

        max-width:
            none;
    }


    .future-pillar {
        min-height:
            105px;

        padding:
            20px;

        border-right:
            0;

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


    .future-pillar:nth-child(n) {
        border-right:
            0;
    }


    .future-pillar:nth-child(n + 5) {
        border-bottom:
            1px solid rgba(255,255,255,.07);
    }


    .future-pillar:last-child {
        border-bottom:
            0;
    }


    .future-pillar strong {
        font-size:
            20px;
    }


    .future-number {
        right:
            -20px;

        top:
            5px;

        font-size:
            145px;

        letter-spacing:
            -5px;
    }


    .future-progress {
        width:
            calc(100% - 32px);

        bottom:
            15px;
    }


    .future-progress small {
        font-size:
            10px;

        letter-spacing:
            1px;
    }

}


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

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

    .future-bg,
    .future-line::after,
    .future-pillar {
        animation:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   19. WHY HOMEBUYERS TRUST US
   PREMIUM TRUST GRID
========================================================= */

.trust {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(300px, .78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(55px, 8vw, 115px);

    align-items:
        center;

    overflow:
        hidden;

    background:
        #202326;

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


/* =========================================================
   LARGE BACKGROUND NUMBER
========================================================= */

.trust-number {
    position:
        absolute;

    left:
        -25px;

    bottom:
        -90px;

    z-index:
        0;

    color:
        rgba(198,165,108,.035);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(250px, 31vw, 430px);

    font-weight:
        400;

    line-height:
        .8;

    pointer-events:
        none;

    user-select:
        none;
}


/* =========================================================
   LEFT INTRO
========================================================= */

.trust-intro {
    position:
        relative;

    z-index:
        2;

    max-width:
        490px;
}


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

.trust-label {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        25px;
}


.trust-label > span {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        31px;

    height:
        31px;

    border:
        1px solid rgba(198,165,108,.4);

    border-radius:
        50%;

    color:
        #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        9px;
}


.trust-label i {
    width:
        30px;

    height:
        1px;

    background:
        rgba(198,165,108,.4);
}


.trust-label .eyebrow {
    margin:
        0;

    color:
        #c6a56c;
}


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

.trust-intro h2 {
    margin:
        0;

    color:
        #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(42px, 4.5vw, 62px);

    font-weight:
        400;

    line-height:
        1.05;

    letter-spacing:
        -1px;
}


.trust-intro h2 em {
    color:
        #c6a56c;

    font-style:
        normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.trust-intro > p {
    max-width:
        420px;

    margin:
        27px 0 0;

    color:
        #919593;

    font-size:
        10.5px;

    line-height:
        1.9;
}


/* =========================================================
   SIGNATURE / COMMITMENT
========================================================= */

.trust-signature {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        35px;
}


.trust-signature > span {
    width:
        42px;

    height:
        1px;

    background:
        #c6a56c;
}


.trust-signature small {
    display:
        block;

    margin-bottom:
        0px;

    color:
        #9e9e9e;

    font-size:
        12px;

    letter-spacing:
        1.4px;
}


.trust-signature strong {
    color:
        #d2d0c9;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        15px;

    font-weight:
        400;
}


/* =========================================================
   TRUST GRID
========================================================= */

.trust-grid {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

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

    border-left:
        1px solid rgba(255,255,255,.09);
}


/* =========================================================
   TRUST CARD
========================================================= */

.trust-card {
    position:
        relative;

    min-height:
        175px;

    padding:
        20px 22px 20px 25px;

    border-right:
        1px solid rgba(255,255,255,.09);

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

    overflow:
        hidden;

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

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


/* =========================================================
   GOLD HOVER BAR
========================================================= */

.trust-card::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        2px;

    height:
        0;

    background:
        #c6a56c;

    transition:
        height .35s ease;
}


.trust-card:hover {
    background:
        rgba(198,165,108,.055);

    transform:
        translateY(-3px);
}


.trust-card:hover::before {
    height:
        100%;
}


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

.trust-index {
    position:
        absolute;

    top:
        19px;

    right:
        20px;

    color:
        rgba(198,165,108,.55);

    font-size:
        7px;

    letter-spacing:
        1px;
}


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

.trust-icon {
    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        20px;

    border:
        1px solid rgba(198,165,108,.3);

    border-radius:
        50%;

    color:
        #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        14px;

    transition:
        transform .4s ease,
        background .35s ease,
        color .35s ease;
}


.trust-card:hover .trust-icon {
    transform:
        rotate(45deg);

    background:
        #c6a56c;

    color:
        #202326;
}


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

.trust-card-content {
    padding-right:
        25px;
}


.trust-card h3 {
    margin:
        0 0 6px;

    color:
        #deddd7;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        22px;

    font-weight:
        400;

    line-height:
        1.2;
}


.trust-card p {
    max-width:
        250px;

    margin:
        0;

    color:
        #747976;

    font-size:
        11px;

    line-height:
        1.65;
}


/* =========================================================
   ARROW
========================================================= */

.trust-arrow {
    position:
        absolute;

    right:
        19px;

    bottom:
        17px;

    color:
        #575c59;

    font-size:
        15px;

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


.trust-card:hover .trust-arrow {
    color:
        #c6a56c;

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


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 991px) {

    .trust {
        grid-template-columns:
            1fr;

        gap:
            55px;

        align-items:
            start;
    }


    .trust-intro {
        max-width:
            650px;
    }


    .trust-grid {
        width:
            100%;
    }


    .trust-number {
        right:
            -30px;

        left:
            auto;

        top:
            -40px;

        bottom:
            auto;

        font-size:
            220px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 575px) {

    .trust {
        display:
            block;

        padding-top:
            65px;

        padding-bottom:
            65px;
    }


    .trust-intro {
        margin-bottom:
            42px;
    }


    .trust-label {
        margin-bottom:
            20px;
    }


    .trust-intro h2 {
        font-size:
            37px;

        line-height:
            1.08;
    }


    .trust-intro > p {
        margin-top:
            22px;

        font-size:
            15px;

        line-height:
            1.4;
    }


    .trust-signature {
        margin-top:
            28px;
    }


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


    .trust-card {
        min-height:
            150px;

        padding:
            19px 20px;
    }


    .trust-card h3 {
        font-size:
            20px;
    }


    .trust-card p {
        font-size:
            15px;
    }


    .trust-number {
        top:
            -5px;

        right:
            -15px;

        font-size:
            95px;
    }

}


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

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

    .trust-card,
    .trust-icon,
    .trust-arrow {
        transition:
            none !important;
    }

}


/* =========================================================
   20. OUR PROMISE
   PREMIUM BRAND STATEMENT
========================================================= */

.promise {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 40%,
            rgba(198,165,108,.08),
            transparent 30%
        ),
        #1b1e21;

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


/* =========================================================
   WATERMARK
========================================================= */

.promise-watermark {
    position: absolute;

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

    z-index: 0;

    color:
        rgba(198,165,108,.035);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(150px, 24vw, 360px);

    font-weight:
        400;

    line-height:
        .75;

    letter-spacing:
        -10px;

    user-select:
        none;

    pointer-events:
        none;
}


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

.promise-inner {
    position: relative;

    z-index: 2;

    width:
        min(1180px, calc(100% - 48px));

    margin:
        0 auto;

    display:
        grid;

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

    gap:
        45px;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.promise-side {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding-top:
        8px;
}


.promise-number {
    width:
        38px;

    height:
        38px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(198,165,108,.42);

    border-radius:
        50%;

    color:
        #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        10px;
}


.promise-line {
    width:
        1px;

    height:
        110px;

    margin:
        17px 0;

    background:
        linear-gradient(
            to bottom,
            rgba(198,165,108,.5),
            rgba(198,165,108,.05)
        );
}


.promise-side .eyebrow {
    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    margin:
        0;

    color:
        #8d7650;

    font-size:
        7px;

    letter-spacing:
        2px;
}


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

.promise-content {
    max-width:
        930px;
}


.promise h2 {
    margin:
        0;

    color:
        #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

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

    font-weight:
        400;

    line-height:
        1.04;

    letter-spacing:
        -1.5px;
}


.promise h2 em {
    color:
        #c6a56c;

    font-style:
        normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.promise-content > p {
    max-width:
        600px;

    margin:
        30px 0 0;

    color:
        #858a87;

    font-size:
        14px;

    line-height:
        1.9;
}


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

.promise-values {
    display:
        grid;

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

    margin-top:
        55px;

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

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


.promise-value {
    position:
        relative;

    min-height:
        145px;

    padding:
        21px 18px;

    border-right:
        1px solid rgba(255,255,255,.08);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    transition:
        background .35s ease;
}


.promise-value:last-child {
    border-right:
        0;
}


.promise-value:hover {
    background:
        rgba(198,165,108,.055);
}


/* =========================================================
   VALUE NUMBER
========================================================= */

.promise-value > span {
    color:
        #c6a56c;

    font-size:
        11px;

    letter-spacing:
        1.5px;
}


/* =========================================================
   VALUE TITLE
========================================================= */

.promise-value strong {
    display:
        block;

    color:
        #d8d7d1;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.15;
}


.promise-value small {
    display:
        block;

    margin-top:
        4px;

    color:
        #686d6a;

    font-size:
        15px;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;
}


/* =========================================================
   GOLD CORNER
========================================================= */

.promise-value::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    background:
        #c6a56c;

    transition:
        width .4s ease;
}


.promise-value:hover::after {
    width:
        100%;
}


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


.footer{
    background:url(../assets/images/footer-bg-img.svg) no-repeat center;
    background-size: cover;
}

.promise-footer {
    display:
        grid;

    grid-template-columns:
        45px auto 45px;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        38px;
}


.promise-footer > span {
    height:
        1px;

    background:
        rgba(198,165,108,.28);
}


.promise-footer small {
    color:
        #6b706d;

    font-size:
        10px;

    letter-spacing:
        1.8px;

    white-space:
        nowrap;
}


.promise-footer strong {
    grid-column:
        1 / -1;

    margin-top:
        3px;

    color:
        #aaa9a3;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        15px;

    font-weight:
        400;
}


.promise-footer strong em {
    color:
        #c6a56c;

    font-style:
        normal;
}




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

@media (max-width: 991px) {

    .promise {
        min-height:
            auto;

        padding:
            100px 0;
    }


    .promise-inner {
        grid-template-columns:
            65px 1fr;

        gap:
            30px;
    }


    .promise h2 {
        font-size:
            clamp(43px, 6vw, 65px);
    }


    .promise-values {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .promise-value:nth-child(3) {
        border-right:
            0;
    }


    .promise-value:nth-child(-n + 3) {
        border-bottom:
            1px solid rgba(255,255,255,.08);
    }

}


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

@media (max-width: 575px) {

    .promise {
        min-height:
            auto;

        padding:
            75px 0 80px;
    }


    .promise-inner {
        width:
            calc(100% - 32px);

        display:
            block;
    }


    .promise-side {
        flex-direction:
            row;

        justify-content:
            flex-start;

        align-items:
            center;

        gap:
            10px;

        margin-bottom:
            27px;
    }


    .promise-line {
        width:
            30px;

        height:
            1px;

        margin:
            0;

        background:
            rgba(198,165,108,.4);
    }


    .promise-side .eyebrow {
        writing-mode:
            initial;

        transform:
            none;

        font-size:
            7px;
    }


    .promise h2 {
        font-size:
            39px;

        line-height:
            1.07;

        letter-spacing:
            -.5px;
    }


    .promise-content > p {
        margin-top:
            22px;

        font-size:
            15px;

        line-height:
            1.5;
    }


    .promise-values {
        grid-template-columns:
            1fr 1fr;

        margin-top:
            38px;
    }


    .promise-value {
        min-height:
            120px;

        padding:
            17px 15px;
    }


    .promise-value:nth-child(3) {
        border-right:
            1px solid rgba(255,255,255,.08);
    }


    .promise-value:nth-child(2n) {
        border-right:
            0;
    }


    .promise-value:nth-child(-n + 4) {
        border-bottom:
            1px solid rgba(255,255,255,.08);
    }


    .promise-value:last-child {
        grid-column:
            1 / -1;

        border-right:
            0;
    }


    .promise-value strong {
        font-size:
            20px;
    }


    .promise-footer {
        margin-top:
            30px;
    }


    .promise-footer strong {
        font-size:
            15px;

        line-height:
            1.5;
    }


    .promise-watermark {
        right:
            -15px;

        bottom:
            -10px;

        font-size:
            130px;

        letter-spacing:
            -5px;
    }

}


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

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

    .promise-value {
        transition:
            none !important;
    }

}


/* =========================================================
   21. FINAL CTA
   CINEMATIC CLOSING SECTION
========================================================= */

.cta {
    position:
        relative;

    min-height:
        720px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    text-align:
        center;

    background:
        #191c1f;

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


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.cta-bg {
    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    background:
        url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2200&q=88&fm=webp")
        center / cover no-repeat;

    transform:
        scale(1.04);

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


.cta:hover .cta-bg {
    transform:
        scale(1.08);
}


/* =========================================================
   CINEMATIC SHADE
========================================================= */

.cta-shade {
    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        radial-gradient(
            circle at center,
            rgba(25,28,31,.58) 0%,
            rgba(25,28,31,.78) 48%,
            rgba(25,28,31,.95) 100%
        );
}


/* =========================================================
   SUBTLE GOLD GLOW
========================================================= */

.cta-shade::after {
    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        50%;

    top:
        50%;

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

    background:
        radial-gradient(
            circle,
            rgba(198,165,108,.09),
            transparent 68%
        );

    pointer-events:
        none;
}


/* =========================================================
   WATERMARK
========================================================= */

.cta-watermark {
    position:
        absolute;

    z-index:
        2;

    left:
        50%;

    top:
        50%;

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

    color:
        rgba(255,255,255,.035);

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(170px, 25vw, 370px);

    font-weight:
        400;

    line-height:
        .75;

    letter-spacing:
        -12px;

    user-select:
        none;

    pointer-events:
        none;
}


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

.cta-inner {
    position:
        relative;

    z-index:
        5;

    width:
        min(900px, calc(100% - 40px));

    padding:
        70px 55px;

    border:
        1px solid rgba(198,165,108,.24);

    background:
        rgba(20,23,25,.30);

    backdrop-filter:
        blur(5px);

    box-shadow:
        0 30px 90px rgba(0,0,0,.25);
}


/* =========================================================
   GOLD CORNER DETAILS
========================================================= */

.cta-inner::before,
.cta-inner::after {
    content:
        "";

    position:
        absolute;

    width:
        55px;

    height:
        55px;

    pointer-events:
        none;
}


.cta-inner::before {
    left:
        -1px;

    top:
        -1px;

    border-top:
        2px solid #c6a56c;

    border-left:
        2px solid #c6a56c;
}


.cta-inner::after {
    right:
        -1px;

    bottom:
        -1px;

    border-right:
        2px solid #c6a56c;

    border-bottom:
        2px solid #c6a56c;
}


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

.cta-label {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-bottom:
        25px;
}


.cta-label > span {
    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(198,165,108,.42);

    border-radius:
        50%;

    color:
        #c6a56c;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        9px;
}


.cta-label i {
    width:
        30px;

    height:
        1px;

    background:
        rgba(198,165,108,.4);
}


.cta-label .eyebrow {
    margin:
        0;

    color:
        #c6a56c;
}


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

.cta h2 {
    margin:
        0;

    color:
        #eeeae2;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        clamp(45px, 5.3vw, 72px);

    font-weight:
        400;

    line-height:
        1.06;

    letter-spacing:
        -1px;
}


.cta h2 em {
    color:
        #c6a56c;

    font-style:
        normal;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.cta-inner > p {
    max-width:
        520px;

    margin:
        23px auto 0;

    color:
        #999d9b;

    font-size:
        12px;

    line-height:
        1.85;
}


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

.cta-actions {
    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        32px;
}


/* =========================================================
   BUTTON BASE
========================================================= */

.gold-button,
.outline-button {
    min-width:
        155px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        14px 17px;

    text-decoration:
        none;

    font-size:
        12px;

    line-height:
        1;

    letter-spacing:
        1.2px;

    text-transform:
        uppercase;

    transition:
        all .3s ease;
}


.gold-button b,
.outline-button b {
    font-size:
        12px;

    font-weight:
        400;

    transition:
        transform .3s ease;
}


.gold-button:hover b,
.outline-button:hover b {
    transform:
        translate(3px, -3px);
}


/* =========================================================
   GOLD BUTTON
========================================================= */

.gold-button {
    color:
        #1b1e21;

    background:
        #c6a56c;

    border:
        1px solid #c6a56c;
}


.gold-button:hover {
    color:
        #1b1e21;

    background:
        #e0c98f;

    border-color:
        #e0c98f;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 30px rgba(198,165,108,.18);
}


/* =========================================================
   OUTLINE BUTTON
========================================================= */

.outline-button {
    color:
        #eeeae2;

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

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


.outline-button:hover {
    color:
        #c6a56c;

    border-color:
        rgba(198,165,108,.65);

    background:
        rgba(198,165,108,.06);

    transform:
        translateY(-3px);
}


/* =========================================================
   BOTTOM BRAND LINE
========================================================= */

.cta-bottom {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-top:
        48px;
}


.cta-bottom span {
    flex:
        1;

    height:
        1px;

    background:
        rgba(198,165,108,.18);
}


.cta-bottom small {
    color:
        #666b68;

    font-size:
        10px;

    letter-spacing:
        1.8px;

    white-space:
        nowrap;
}


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

@media (max-width: 991px) {

    .cta {
        min-height:
            650px;
    }


    .cta-inner {
        width:
            min(760px, calc(100% - 40px));

        padding:
            60px 40px;
    }


    .cta-watermark {
        font-size:
            230px;
    }

}


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

@media (max-width: 575px) {

    .cta {
        min-height:
            620px;
    }


    .cta-inner {
        width:
            calc(100% - 32px);

        padding:
            48px 20px;
    }


    .cta-inner::before,
    .cta-inner::after {
        width:
            35px;

        height:
            35px;
    }


    .cta-label {
        margin-bottom:
            21px;
    }


    .cta h2 {
        font-size:
            38px;

        line-height:
            1.08;

        letter-spacing:
            -.5px;
    }


    .cta-inner > p {
        margin-top:
            20px;

        font-size:
            15px;

        line-height:
            1.2;
    }


    .cta-actions {
        flex-direction:
            column;

        align-items:
            stretch;

        margin-top:
            28px;
    }


    .gold-button,
    .outline-button {
        width:
            100%;

        min-width:
            0;
    }


    .cta-bottom {
        margin-top:
            35px;
    }


    .cta-bottom small {
        font-size:
            5px;

        letter-spacing:
            1px;
    }


    .cta-watermark {
        font-size:
            130px;

        letter-spacing:
            -5px;
    }

}


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

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

    .cta-bg,
    .gold-button,
    .outline-button {
        transition:
            none !important;
    }

}


/* =========================================================
   23. TABLET — MAX WIDTH 900PX
   ========================================================= */

@media (max-width: 900px) {

    /* ---------- Header ---------- */

    .design{
        display:flex;
        flex-direction: column-reverse;
    }

    .header {
        height: 72px;

        padding: 0 5%;
    }

    .header.scrolled {
        height: 68px;
    }

    .nav-links {
        display: none;
    }

    .header-cta {
        display: none;
    }

    .menu {
        display: block;
    }


    /* ---------- Common sections ---------- */

    .who,
    .story,
    .different,
    .leadership,
    .trust {
        grid-template-columns: 1fr;
    }


    /* ---------- Who ---------- */

    .who {
        gap: 55px;
    }


    /* ---------- Story ---------- */

    .story {
        gap: 55px;
    }


    /* ---------- Different ---------- */

    .different .copy {
        padding: 80px 7%;
    }

    .different .photo {
        min-height: 450px;
        height: 450px;
    }


    /* ---------- Vision / Mission ---------- */

    .vm,
    .design {
        grid-template-columns: 1fr;
    }

    .vm article {
        padding: 0 !important;
    }

    .vm article + article {
        margin-top: 50px;
        padding-top: 50px !important;

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


    /* ---------- Design ---------- */

    .purpose {
        grid-column: auto;
    }


    /* ---------- Features ---------- */

    .features article {
        grid-template-columns: 1fr;
    }

    .features article:nth-child(2) .copy {
        order: 1;
    }

    .features article:nth-child(2) .photo {
        order: 2;
    }

    .features .photo {
        min-height: 350px;
        height: 350px;
    }

    .features .copy,
    .features article:nth-child(2) .copy {
        padding: 70px 7%;
    }


    /* ---------- Stats ---------- */

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


    /* ---------- Journey ---------- */

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

    .journey span:nth-child(2n) {
        border-right: 0;
    }

    .journey span:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }


    /* ---------- Process ---------- */

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

        gap: 35px;
    }

    .process span::after {
        display: none;
    }


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

    .footer-top {
        grid-template-columns: 1fr 1fr;

        padding: 60px 7%;

        gap: 40px;
    }

    .footer-map {
        width: 100%;
        height: 180px;

        grid-column: 1 / -1;
    }

    .footer-bottom {
        padding: 18px 7%;
    }
}


/* =========================================================
   24. MOBILE — MAX WIDTH 600PX
   ========================================================= */

@media (max-width: 600px) {

    /* ---------- Header ---------- */

    .header {
        height: 90px;

        padding: 0 5%;
    }

    .header.scrolled {
        height: 64px;
    }

    .logo-mark {
        height: 70px;
    }

    .menu {
        width: 42px;
        height: 42px;
    }


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

    .hero {
        min-height: 670px;
    }

    .hero-copy {
        width: 86%;

        margin-left: 7%;
    }

    .hero h1 {
        font-size: 42px;
    }

    .hero-copy p {
        margin: 15px 0 15px;

        font-size: 15px;
    }


    /* ---------- Common section ---------- */

    .section {
        padding: 82px 7%;
    }

    .photo {
        height: 330px;
    }


    /* ---------- Story timeline ---------- */

    .timeline article {
        grid-template-columns: 40px 35px 1fr;

        gap: 10px;
    }

    .timeline::before {
        left: 37px;
    }


    /* ---------- Philosophy ---------- */

    .philosophy,
    .future {
        min-height: 620px;
    }

    .inside {
        width: 86%;
    }

    .promise-row {
        display: block;
    }

    .promise-row span {
        display: block;

        padding: 14px 0;

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

    .promise-row span:last-child {
        border-bottom: 0;
    }


    /* ---------- Values ---------- */

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

    .value-grid article,
    .value-grid article:nth-child(3n),
    .value-grid article:nth-child(n + 4) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .value-grid article:last-child {
        border-bottom: 0;
    }


    /* ---------- Different ---------- */

    .different .copy {
        padding: 70px 7%;
    }

    .different .photo {
        min-height: 330px;
        height: 330px;
    }


    /* ---------- Design ---------- */

    .design .copy {
        padding: 70px 7%;
    }

    .design .photo {
        min-height: 320px;
        height: 320px;
    }


    /* ---------- Construction ---------- */

    .process {
        grid-template-columns: 1fr 1fr;

        gap: 35px 20px;

        margin-top: 45px;
    }


    /* ---------- Features ---------- */

    .features .photo {
        min-height: 320px;
        height: 320px;
    }

    .features .copy,
    .features article:nth-child(2) .copy {
        padding: 65px 7%;
    }

    .features h2 {
        font-size: 34px;
    }

    .features ul {
        grid-template-columns: 1fr;
    }


    /* ---------- Stats ---------- */

    .stats div {
        padding: 18px 14px;
    }

    .stats div:nth-child(3) {
        border-left: 0;
    }


    /* ---------- Journey ---------- */

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

    .journey span {
        min-height: 130px;

        padding: 20px 14px;
    }

    .journey strong {
        font-size: 17px;
    }


    /* ---------- Leadership ---------- */

    .leadership .photo {
        min-height: 330px;
        height: 330px;
    }

    .leadership .copy {
        padding: 70px 7%;
    }


    /* ---------- Trust ---------- */

    .trust {
        gap: 50px;
    }

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


    /* ---------- Promise ---------- */

    .promise {
        min-height: 570px;

        padding: 70px 7%;
    }

    .promise h2 {
        font-size: clamp(42px, 11vw, 58px);
    }

    .promise-values {
        display: grid;
        grid-template-columns: 1fr 1fr;

        margin-top: 35px;
    }

    .promise-values span {
        padding: 10px;

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

    .promise-values span:nth-child(odd) {
        border-right: 1px solid var(--line);
    }

    .promise-values span:nth-last-child(-n + 2) {
        border-bottom: 0;
    }


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

    .cta {
        min-height: 600px;
    }

    .cta h2 {
        font-size: clamp(40px, 10vw, 55px);
    }

    .cta .inside > div {
        flex-direction: column;

        align-items: center;
    }

    .gold-button,
    .outline-button {
        min-width: 170px;

        text-align: center;
    }


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

    .footer-top {
        grid-template-columns: 1fr;

        padding: 60px 7%;

        gap: 35px;
    }

    .footer-map {
        grid-column: auto;

        width: 100%;
        height: 200px;
    }

    .footer-bottom {
        flex-direction: column;

        gap: 8px;

        padding: 18px 7%;

        text-align: center;
    }

    .footer-brand .logo-mark {
        width: 35px;
        height: 35px;
    }

    .footer-brand .logo-text strong {
        font-size: 16px;
    }
}


/* =========================================================
   25. VERY SMALL MOBILE — MAX WIDTH 400PX
   ========================================================= */

@media (max-width: 400px) {

    .hero h1 {
        font-size: 37px;
    }

    .hero-copy p {
        font-size: 14px;
    }

    .eyebrow {
        font-size: 10px;
    }

    .copy h2,
    .heading h2 {
        font-size: 36px;
    }

    .vm h2 {
        font-size: 30px;
    }

    .features h2 {
        font-size: 31px;
    }

    .process {
        gap: 28px 12px;
    }

    .promise-values {
        grid-template-columns: 1fr;
    }

    .promise-values span,
    .promise-values span:nth-child(odd) {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .promise-values span:last-child {
        border-bottom: 0;
    }
}






/*  */

.timeline-item::before {
    content: "";

    width: 15px;

    height: 15px;

    flex: 0 0 15px;

    border:
        1px solid #c6a56c;

    transform:
        rotate(45deg);

    opacity: .6;

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


.timeline-item:hover {
    transform:
        translateX(5px);

    border-color:
        rgba(198,165,108,.2);
}


.timeline-item:hover strong {
    color: #ddd8cb;
}


.timeline-item:hover::before {
    transform:
        rotate(135deg);

    background:
        #c6a56c;
}



.customer-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    border: 1px solid rgba(198,165,108,.4);

    color: #c6a56c;
}

.customer-icon i {
    font-size: 18px;
    color: inherit;
}





@media (max-width: 950px) {
 .mobile-nav {
    display: flex;
    position: fixed;
    z-index: 450;
    /* top: 76px; */
    top: 60px;
    left: 0;
    right: 0;
    padding: 32px 7%;
    background:
      linear-gradient(135deg, rgba(199,165,106,.045), transparent),
      rgba(9,13,16,.97);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 4px;
    transform: translateY(-120%);
    opacity: 0;
    transition:
      transform .6s var(--ease),
      opacity .5s;
  }

  .mobile-nav.open {
    transform: none;
    opacity: 1;
  }

  .mobile-nav a {
    position: relative;
    padding: 15px 0;
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .mobile-nav a::after {
    content: "↗";
    position: absolute;
    right: 0;
    color: var(--gold);
  }
}





/*  */

/* =========================================================
   FEATURES — MOBILE VISIBILITY FIX
   Disable reveal/entrance animations on mobile
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       FEATURES CONTAINER
    ----------------------------------------------------- */

    .features {
        width: 100%;
        overflow: visible !important;
    }


    /* -----------------------------------------------------
       FEATURE BLOCK
    ----------------------------------------------------- */

    .feature-block {
        width: 100%;

        display: flex !important;
        flex-direction: column !important;

        position: relative;

        overflow: visible !important;

        opacity: 1 !important;

        transform: none !important;

        visibility: visible !important;

        clip-path: none !important;

        filter: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       REMOVE ANY REVEAL ANIMATION
       This catches common animation classes such as:
       .reveal
       .is-visible
       .active
       etc.
    ----------------------------------------------------- */

    .feature-block.reveal,
    .feature-block.is-visible,
    .feature-block.active,
    .feature-image.reveal,
    .feature-panel.reveal,
    .feature-image.is-visible,
    .feature-panel.is-visible {
        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        clip-path: none !important;

        filter: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       IMAGE
    ----------------------------------------------------- */



    /* -----------------------------------------------------
       IMAGE LABEL
    ----------------------------------------------------- */

    .feature-image-number {
        position: absolute;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


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

    .feature-panel {
        width: 100%;

        min-height: auto;

        height: auto;

        padding:
            45px 25px 50px;

        position: relative;

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        clip-path: none !important;

        filter: none !important;

        animation: none !important;

        transition: none !important;

        overflow: visible !important;
    }


    /* -----------------------------------------------------
       PANEL TOP
    ----------------------------------------------------- */

    .feature-panel-top {
        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       KICKER
    ----------------------------------------------------- */

    .feature-kicker {
        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }

    .feature-kicker i {
        opacity: 1 !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


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

    .feature-index {
        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }

    .feature-index i {
        opacity: 1 !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       HEADING
    ----------------------------------------------------- */

    .feature-panel h2 {
        width: 100%;

        max-width: 100%;

        margin:
            22px 0 0;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        clip-path: none !important;

        animation: none !important;

        transition: none !important;
    }


    .feature-panel h2 em {
        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       DESCRIPTION
    ----------------------------------------------------- */

    .feature-panel p {
        width: 100%;

        max-width: 100%;

        margin:
            20px 0 0;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        clip-path: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       DIVIDER
    ----------------------------------------------------- */

    .feature-divider {
        width: 100%;

        margin:
            30px 0;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       FEATURE LIST
    ----------------------------------------------------- */

    .feature-list {
        width: 100%;

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap:
            0;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       FEATURE ITEMS
    ----------------------------------------------------- */

    .feature-item {
        min-height: 55px;

        display: flex;

        align-items: center;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        clip-path: none !important;

        animation: none !important;

        transition: none !important;
    }


    .feature-item strong {
        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    /* -----------------------------------------------------
       BOTTOM
    ----------------------------------------------------- */

    .feature-bottom {
        width: 100%;

        margin-top: 35px;

        display: flex;

        align-items: center;

        gap: 12px;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    .feature-bottom-line {
        width: 30px;

        height: 1px;

        flex: 0 0 30px;

        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }


    .feature-bottom small {
        opacity: 1 !important;

        visibility: visible !important;

        transform: none !important;

        animation: none !important;

        transition: none !important;
    }
}


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

@media (max-width: 520px) {

    .feature-image {
        min-height: 270px;
    }


    .feature-panel {
        padding:
            38px 21px 45px;
    }


    .feature-panel h2 {
        font-size:
            clamp(29px, 8vw, 38px);

        line-height: 1.1;
    }


    .feature-panel p {
        font-size: 13px;
        line-height: 1.5;
    }


    .feature-list {
        grid-template-columns: 1fr;
    }


    .feature-item {
        min-height: 48px;
    }
}


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

@media (max-width: 380px) {

    .feature-image {
        min-height: 240px;
    }

    .feature-panel {
        padding:
            34px 18px 40px;
    }

    .feature-panel h2 {
        font-size: 28px;
    }

    .feature-panel p {
        font-size: 10.5px;
    }

    .feature-item strong {
        font-size: 10px;
    }
}


.footer-statement{
    display: flex;
    align-items: center;
    justify-content: center;
}