/* =========================================================
   CORNERSTONE HOME
   ========================================================= */


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

.cs-home-hero {
    position: relative;
    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;
    isolation: isolate;
}


/* Dark natural overlay */

.cs-home-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(38, 39, 36, 0.88) 0%,
            rgba(38, 39, 36, 0.72) 42%,
            rgba(38, 39, 36, 0.38) 72%,
            rgba(38, 39, 36, 0.20) 100%
        );

    z-index: 0;
}


/* Subtle green tint */

.cs-home-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(52, 78, 65, 0.14),
            rgba(52, 78, 65, 0.02)
        );

    z-index: 0;
}


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

.cs-home-hero .cs-home-hero-inner {
    position: relative;
    z-index: 2;

    min-height: 760px;

    display: flex;
    align-items: center;
}


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

.cs-home-hero .cs-home-hero-content {
    width: 100%;
    max-width: 790px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


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

.cs-home-hero .cs-home-hero-kicker {
    margin-bottom: 22px;

    color: var(--cs-accent);

    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cs-home-hero .cs-home-hero-kicker p {
    margin: 0;
}


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

.cs-home-hero
.cs-home-hero-title
.elementor-heading-title {
    max-width: 850px;

    margin: 0;

    color: var(--cs-white);

    font-size: clamp(52px, 5.7vw, 88px);
    line-height: 0.98;
    font-weight: 700;

    letter-spacing: -0.055em;
}


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

.cs-home-hero .cs-home-hero-text {
    max-width: 680px;

    margin-top: 30px;

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

    font-size: 18px;
    line-height: 1.75;
    font-weight: 400;
}

.cs-home-hero .cs-home-hero-text p {
    margin: 0;
}


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

.cs-home-hero .cs-home-hero-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 14px;

    margin-top: 38px;
}


/* =========================================================
   HERO BUTTON BASE
   ========================================================= */

.cs-home-hero
.cs-btn
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 26px;

    border-radius: var(--cs-radius-pill);

    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;

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


/* Primary */

.cs-home-hero
.cs-btn-primary
.elementor-button {
    background: var(--cs-accent);
    border: 1px solid var(--cs-accent);

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

.cs-home-hero
.cs-btn-primary
.elementor-button:hover {
    background: var(--cs-white);
    border-color: var(--cs-white);

    color: var(--cs-dark);

    transform: translateY(-2px);
}


/* Secondary */

.cs-home-hero
.cs-btn-secondary
.elementor-button {
    background: transparent;

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

    color: var(--cs-white);
}

.cs-home-hero
.cs-btn-secondary
.elementor-button:hover {
    background: var(--cs-white);
    border-color: var(--cs-white);

    color: var(--cs-dark);

    transform: translateY(-2px);
}


/* =========================================================
   WHY US
   ========================================================= */

.cs-why {
    width: 100%;

    background: var(--cs-background);
}

.cs-why .cs-why-inner {
    padding-top: 110px;
    padding-bottom: 110px;
}


/* Heading */

.cs-why .cs-section-heading {
    max-width: 760px;

    margin-bottom: 56px;
}

.cs-why .cs-section-kicker {
    margin-bottom: 16px;

    color: var(--cs-primary);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cs-why .cs-section-kicker p {
    margin: 0;
}

.cs-why
.cs-section-title
.elementor-heading-title {
    margin: 0;

    color: var(--cs-dark);

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
    font-weight: 700;

    letter-spacing: -0.04em;
}

.cs-why .cs-section-intro {
    max-width: 620px;

    margin-top: 20px;

    color: var(--cs-text-muted);

    font-size: 17px;
    line-height: 1.7;
}

.cs-why .cs-section-intro p {
    margin: 0;
}


/* Grid */

.cs-why .cs-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* Card */

.cs-why .cs-why-card {
    position: relative;

    min-height: 320px;

    display: flex;
    flex-direction: column;

    padding: 34px;

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

    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);

    overflow: hidden;

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

.cs-why .cs-why-card:hover {
    transform: translateY(-6px);

    border-color: rgba(52, 78, 65, 0.25);

    background: rgba(255, 255, 255, 0.68);
}


/* Number */

.cs-why .cs-why-number {
    margin-bottom: auto;

    color: var(--cs-accent);

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

    letter-spacing: 0.12em;
}

.cs-why .cs-why-number p {
    margin: 0;
}


/* Title */

.cs-why .cs-why-title {
    margin-top: 50px;
}

.cs-why
.cs-why-card
.cs-why-title
.elementor-heading-title {
    margin: 0;

    color: var(--cs-primary);

    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -0.025em;
}


/* Text */

.cs-why .cs-why-text {
    margin-top: 18px;

    color: var(--cs-text-muted);

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

.cs-why .cs-why-text p {
    margin: 0;
}


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

.cs-agape {
    width: 100%;

    background: var(--cs-primary);

    color: var(--cs-white);
}


/* =========================================================
   AGAPE INNER - TRUE 50/50
   ========================================================= */

.cs-agape .cs-agape-inner {
    --width: 100%;
    --max-width: 1240px;

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

    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

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

    gap: 72px;

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


/* True 50 / 50 columns */

.cs-agape
.cs-agape-inner
> .cs-agape-media,

.cs-agape
.cs-agape-inner
> .cs-agape-content {
    --width: 100%;
    --max-width: none;

    width: calc(50% - 36px);
    max-width: calc(50% - 36px);

    min-width: 0;

    flex: 0 0 calc(50% - 36px);
}


/* =========================================================
   AGAPE MEDIA
   ========================================================= */

.cs-agape .cs-agape-media {
    position: relative;

    aspect-ratio: 1 / 1;

    align-self: center;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: var(--cs-radius-lg);

    overflow: hidden;
}


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

.cs-agape .cs-agape-content {
    display: flex;
    flex-direction: column;

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


/* Kicker */

.cs-agape .cs-section-kicker {
    margin-bottom: 18px;

    color: var(--cs-accent);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cs-agape .cs-section-kicker p {
    margin: 0;
}


/* Title */

.cs-agape .cs-agape-title {
    width: 100%;
}

.cs-agape
.cs-agape-content
.cs-agape-title
.elementor-heading-title {
    width: 100%;
    max-width: none;

    margin: 0;

    color: var(--cs-white);

    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.05;
    font-weight: 700;

    letter-spacing: -0.045em;
}


/* Text */

.cs-agape .cs-agape-text {
    width: 100%;
    max-width: none;

    margin-top: 26px;

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

    font-size: 17px;
    line-height: 1.75;
}

.cs-agape .cs-agape-text p {
    margin: 0;
}


/* Highlight */

.cs-agape .cs-agape-highlight {
    width: 100%;
    max-width: none;

    margin-top: 24px;

    padding-left: 22px;

    border-left: 2px solid var(--cs-accent);

    color: var(--cs-white);

    font-size: 18px;
    line-height: 1.65;
    font-weight: 600;
}

.cs-agape .cs-agape-highlight p {
    margin: 0;
}


/* Produce tags */

.cs-agape .cs-agape-produce {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}

.cs-agape .cs-agape-tag {
    width: auto;

    padding: 8px 13px;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--cs-radius-pill);

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

    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}

.cs-agape .cs-agape-tag p {
    margin: 0;
}


/* CTA */

.cs-agape .cs-btn-dark {
    margin-top: 34px;
}

.cs-agape
.cs-btn-dark
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 26px;

    background: var(--cs-accent);

    border: 1px solid var(--cs-accent);
    border-radius: var(--cs-radius-pill);

    color: var(--cs-dark);

    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;

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

.cs-agape
.cs-btn-dark
.elementor-button:hover {
    background: var(--cs-white);
    border-color: var(--cs-white);

    color: var(--cs-dark);

    transform: translateY(-2px);
}


/* =========================================================
   FEATURED FOODS
   ========================================================= */

.cs-featured {
    width: 100%;

    background: var(--cs-background);
}

.cs-featured .cs-featured-inner {
    padding-top: 110px;
    padding-bottom: 110px;
}


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

.cs-featured .cs-section-heading {
    max-width: 760px;

    margin-bottom: 56px;
}

.cs-featured .cs-section-kicker {
    margin-bottom: 16px;

    color: var(--cs-primary);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cs-featured .cs-section-kicker p {
    margin: 0;
}

.cs-featured
.cs-section-heading
.cs-section-title
.elementor-heading-title {
    margin: 0;

    color: var(--cs-dark);

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.08;
    font-weight: 700;

    letter-spacing: -0.04em;
}

.cs-featured .cs-section-intro {
    max-width: 620px;

    margin-top: 20px;

    color: var(--cs-text-muted);

    font-size: 17px;
    line-height: 1.7;
}

.cs-featured .cs-section-intro p {
    margin: 0;
}


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

.cs-featured .cs-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 26px;
}


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

.cs-featured .cs-food-card {
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --padding-right: 0;

    min-width: 0;

    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    gap: 0;

    background: #ffffff;

    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-lg);

    overflow: hidden;

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

.cs-featured .cs-food-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(38, 39, 36, 0.10);
}


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

.cs-featured
.cs-food-card
> .cs-food-media {
    --padding-top: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --padding-right: 0;

    width: 100%;
    min-width: 100%;

    flex: 0 0 auto;

    aspect-ratio: 16 / 10;

    margin: 0;
    padding: 0;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    border-radius: 0;
}


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

.cs-featured
.cs-food-card
> .cs-food-content {
    --padding-top: 28px;
    --padding-right: 30px;
    --padding-bottom: 32px;
    --padding-left: 30px;

    width: 100%;

    display: flex;
    flex-direction: column;

    margin: 0;

    padding:
        28px
        30px
        32px;
}


/* Number */

.cs-featured
.cs-food-card
.cs-food-content
.cs-food-number {
    margin-bottom: 18px;

    color: var(--cs-accent);

    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.12em;
}

.cs-featured
.cs-food-card
.cs-food-content
.cs-food-number p {
    margin: 0;

    color: inherit;
}


/* Food title */

.cs-featured
.cs-food-card
.cs-food-content
.cs-food-title
.elementor-heading-title {
    margin: 0;

    color: var(--cs-primary);

    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;

    letter-spacing: -0.03em;
}


/* Food description */

.cs-featured
.cs-food-card
.cs-food-content
.cs-food-text {
    margin-top: 14px;

    color: var(--cs-text-muted);

    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
}

.cs-featured
.cs-food-card
.cs-food-content
.cs-food-text p {
    margin: 0;

    color: inherit;
}


/* =========================================================
   FEATURED FOOTER / CTA
   ========================================================= */

.cs-featured .cs-featured-footer {
    display: flex;
    justify-content: center;

    margin-top: 46px;
}

.cs-featured
.cs-btn-primary-dark
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 28px;

    background: var(--cs-primary);

    border: 1px solid var(--cs-primary);
    border-radius: var(--cs-radius-pill);

    color: var(--cs-white);

    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;

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

.cs-featured
.cs-btn-primary-dark
.elementor-button:hover {
    background: var(--cs-accent);
    border-color: var(--cs-accent);

    color: var(--cs-dark);

    transform: translateY(-2px);
}

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

.cs-location {
    --width: 100%;
    --content-width: 100%;

    width: 100%;
    max-width: none;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    background: var(--cs-dark);
    color: var(--cs-white);
}


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

.cs-location > .cs-location-inner {
    --width: 100%;
    --max-width: 1240px;
    --content-width: 1240px;

    width: calc(100% - 48px);
    max-width: 1240px;

    flex: 0 0 auto;
    align-self: center;

    margin: 0 auto;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;

    gap: 72px;

    padding: 110px 0;
}


/* =========================================================
   TRUE 50 / 50 COLUMNS
   ========================================================= */

.cs-location > .cs-location-inner > .cs-location-content,
.cs-location > .cs-location-inner > .cs-location-map {
    --width: calc(50% - 36px);
    --max-width: none;
    --flex-grow: 0;
    --flex-shrink: 0;
    --flex-basis: calc(50% - 36px);

    width: calc(50% - 36px);
    max-width: calc(50% - 36px);

    flex: 0 0 calc(50% - 36px);

    min-width: 0;
}


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

.cs-location > .cs-location-inner > .cs-location-content {
    display: flex;
    flex-direction: column;

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


/* =========================================================
   KICKER
   ========================================================= */

.cs-location .cs-section-kicker {
    width: 100%;

    margin: 0 0 18px;

    color: var(--cs-accent);

    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cs-location .cs-section-kicker p {
    margin: 0;
    color: inherit;
}


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

.cs-location .cs-location-title {
    width: 100%;
}

.cs-location
.cs-location-title
.elementor-heading-title {
    width: 100%;

    margin: 0;

    color: var(--cs-white);

    font-size: clamp(42px, 4vw, 60px);
    line-height: 1.05;
    font-weight: 700;

    letter-spacing: -0.045em;
}


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

.cs-location .cs-location-intro {
    width: 100%;
    max-width: 520px;

    margin-top: 24px;

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

    font-size: 17px;
    line-height: 1.7;
}

.cs-location .cs-location-intro p {
    margin: 0;
    color: inherit;
}


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

.cs-location .cs-location-info {
    --width: 100%;

    width: 100%;
    max-width: none;

    display: flex;
    flex-direction: column;

    margin-top: 42px;

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


/* One info row */

.cs-location .cs-location-item {
    --width: 100%;

    width: 100%;
    max-width: none;

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

    align-items: start;

    gap: 24px;

    padding: 20px 0;

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


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

.cs-location .cs-location-label {
    width: 100%;

    color: var(--cs-accent);

    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cs-location .cs-location-label p {
    margin: 0;
    color: inherit;
}


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

.cs-location .cs-location-value {
    width: 100%;
    min-width: 0;

    color: var(--cs-white);

    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}

.cs-location .cs-location-value p {
    margin: 0;
    color: inherit;
}

.cs-location .cs-location-value a {
    color: inherit;
    text-decoration: none;

    transition: color 0.25s ease;
}

.cs-location .cs-location-value a:hover {
    color: var(--cs-accent);
}


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

.cs-location .cs-btn-location {
    width: auto;

    margin-top: 34px;

    align-self: flex-start;
}

.cs-location
.cs-btn-location
.elementor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 0 28px;

    background: var(--cs-accent);

    border: 1px solid var(--cs-accent);
    border-radius: var(--cs-radius-pill);

    color: var(--cs-dark);

    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.07em;
    text-transform: uppercase;

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

.cs-location
.cs-btn-location
.elementor-button:hover {
    background: var(--cs-white);
    border-color: var(--cs-white);

    color: var(--cs-dark);

    transform: translateY(-2px);
}


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

.cs-location .cs-location-map {
    min-height: 560px;

    overflow: hidden;

    background: var(--cs-primary);

    border-radius: var(--cs-radius-lg);
}


/* HTML widget inside map */

.cs-location .cs-location-map .elementor-widget-html {
    width: 100%;
    height: 100%;

    flex: 1 1 auto;
}

.cs-location
.cs-location-map
.elementor-widget-html
.elementor-widget-container {
    width: 100%;
    height: 100%;
}


/* Google Map */

.cs-location .cs-location-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 560px;

    margin: 0;

    border: 0;
}


/* Temporary placeholder */

.cs-location .cs-map-placeholder {
    width: 100%;
    height: 100%;
    min-height: 560px;

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

    background: var(--cs-primary);

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

    font-size: 14px;
}