@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.woff2') format('woff2'), url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.woff2') format('woff2'), url('../fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'), url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.woff2') format('woff2'), url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'), url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-Regular.woff2') format('woff2'), url('../fonts/Mulish-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-Medium.woff2') format('woff2'), url('../fonts/Mulish-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-SemiBold.woff2') format('woff2'), url('../fonts/Mulish-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-Bold.woff2') format('woff2'), url('../fonts/Mulish-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Mulish';
    src: url('../fonts/Mulish-ExtraBold.woff2') format('woff2'), url('../fonts/Mulish-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'SVN Aguda';
    src: url('../fonts/svn-aguda-regular.woff2') format('woff2'), url('../fonts/svn-aguda-regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'SVN Aguda';
    src: url('../fonts/svn-aguda-black.woff2') format('woff2'), url('../fonts/svn-aguda-black.otf') format('opentype');
    font-weight: 900;
    font-display: swap;
}

@font-face {
    font-family: 'SVN Casual Brush';
    src: url('../fonts/SVN-CasualBrush.woff2') format('woff2'), url('../fonts/SVN-CasualBrush.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --color-primary: #42B136;
    --color-primary-dark: #379329;
    --color-dark: #135040;
    --color-dark-deep: #0d3b2f;
    --color-mint: rgba(19, 80, 64, 0.1);
    --color-mint15: rgba(19, 80, 64, 0.15);
    --color-mint2: rgba(19, 80, 64, 0.2);
    --color-mint3: rgba(19, 80, 64, 0.3);
    --color-mint4: rgba(19, 80, 64, 0.4);
    --color-mint5: rgba(19, 80, 64, 0.5);
    --color-mint6: rgba(19, 80, 64, 0.6);
    --color-mint7: rgba(19, 80, 64, 0.7);
    --color-mint8: rgba(19, 80, 64, 0.8);
    --color-mint-strong: #cfebcc;
    --color-accent: #fde740;
    --color-text: #222222;
    --color-muted: #5f6f69;
    --color-surface: #ffffff;
    --color-surface-alt: #f2f5f7;
    --color-surface-muted: #f3f6f5;
    --color-line: #c1c1c1;
    --color-border: #dde5e2;

    --font-display: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Mulish', 'Segoe UI', sans-serif;
    --font-script: 'SVN Casual Brush', 'Segoe Script', cursive;
    --font-number: 'SVN Aguda', 'Poppins', sans-serif;

    --header-height: 80px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    --transition-fast: 0.2s;
    --transition-base: 0.3s;
    --transition-slow: 0.6s;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);

    --shadow-card: 0 10px 30px rgba(19, 80, 64, 0.08);
    --shadow-card-hover: 0 18px 44px rgba(19, 80, 64, 0.18);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-surface);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Images only start hidden once main.js has taken over the fade-in. */
.js-enabled img {
    opacity: 0;
    transition: opacity var(--transition-slow) var(--easing);
}

.js-enabled img.is-loaded {
    opacity: 1;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast) var(--easing);
}

ul,
ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

figure {
    margin: 0;
}

blockquote {
    margin: 0;
}

button {
    font-family: inherit;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ layout */

.container-custom {
    width: 1280px;
    max-width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

.container-header {
    width: 1370px;
    max-width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
}

.section {
    width: 100%;
    padding: 80px 0;
    overflow-x: clip;
}

.section-full {
    width: 100%;
    overflow-x: clip;
}

.section-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.split-layout {
    display: grid;
    grid-template-columns: 408px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Only the works column sits under a tab row, so only it needs the offset
   that lines it up with the grid beside it. */
.works-section .split-content {
    padding-top: 72px;
}

/* -------------------------------------------------------------- typography */

.section-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-dark);
    text-transform: uppercase;
}

.section-title-center {
    text-align: center;
}

.section-title-light {
    color: #ffffff;
}

.section-title .highlight {
    color: var(--color-primary);
}

.section-title .display-title,
.section-title .subtitle {
    display: block;
}

.section-title .subtitle {
    font-weight: 600;
    text-transform: uppercase;
}

.display-title {
    font-family: var(--font-display);
    font-weight: 800;
    text-transform: uppercase;
}

.script-title {
    display: block;
    font-family: var(--font-script);
    font-size: 125px;
    font-weight: 400;
    line-height: 0.62;
    color: var(--color-primary);
    text-transform: none;
}

.script-title-light {
    color: #ffffff;
}

.script-title-center {
    text-align: center;
}

.section-overline {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
    text-transform: uppercase;
}

.section-tag {
    position: relative;
    margin: 0;
    padding: 8px 20px 5px 20px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    text-transform: uppercase;
    background-color: var(--color-mint);
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}

.section-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: var(--color-dark);
}

.section-quote {
    position: relative;
    padding-left: 35px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-dark);
}

.section-quote::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 26px;
    height: 24px;
    background-image: url('../icons/q-1.png');
    background-repeat: no-repeat;
    background-size: contain;
}

/* These two sit in a fixed column, so the mark goes out into the margin. */
.projects-section .section-quote,
.works-section .section-quote {
    padding-left: 0;
}

.projects-section .section-quote::before,
.works-section .section-quote::before {
    left: -47px;
}

.works-section .section-quote {
    margin-bottom: 20px;
}

.services-section .section-quote {
    color: var(--color-text);
}

.section-quote-center {
    width: fit-content;
    max-width: 1000px;
    margin: 10px auto 0;
    text-align: center;
}

.section-quote-light {
    color: rgba(255, 255, 255, 0.92);
}

/* The mark is a PNG now, so lift it to white instead of recolouring text. */
.section-quote-light::before {
    filter: brightness(0) invert(1);
    opacity: 0.5;
}

.text-link {
    color: var(--color-primary);
    font-weight: 600;
    white-space: nowrap;
}

.text-link:hover {
    color: var(--color-primary-dark);
}

.badge-pill {
    display: inline-block;
    margin: 0;
    padding: 6px 20px 5px 20px;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: 50px 0 0 50px;
    box-shadow: 0 8px 20px rgba(66, 177, 54, 0.28);
    width: 100%;
    text-align: right;
}

.badge-pill-primary {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------- buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 15px;
    height: 38px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-base) var(--easing),
        color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.button i {
    transition: transform var(--transition-base) var(--easing);
}

.button:hover i {
    transform: translateX(4px);
}

.button-primary {
    color: #ffffff;
    background-color: var(--color-primary);
}

.button-primary:hover {
    color: #ffffff;
    background-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(66, 177, 54, 0.3);
}

.button-accent {
    color: var(--color-dark);
    background-color: var(--color-accent);
    text-transform: uppercase;
}

.button-accent:hover {
    color: var(--color-dark);
    background-color: #f5dc1f;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(253, 231, 64, 0.35);
}

/* ------------------------------------------------------------ filter tabs */

.filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-list-center {
    justify-content: center;
    margin-top: 25px;
}

/* Sits above the grid it filters, so it centres on that column, not the page. */
.filter-list-above {
    justify-content: center;
    margin-bottom: 28px;
}

.filter-list-stacked {
    flex-direction: column;
    margin-top: 30px;
}

.filter-button {
    padding: 10px 15px 9px 15px;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    background-color: var(--color-mint);
    border: 1px solid var(--color-mint5);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--easing),
        color var(--transition-base) var(--easing),
        border-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.filter-button:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.filter-button.is-active {
    color: #ffffff;
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

/* ----------------------------------------------------------- slider arrows */

.slider-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: -26px;
    font-size: 18px;
    color: var(--color-dark);
    background-color: var(--color-mint2);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        opacity var(--transition-base) var(--easing);
}

.slider-arrow:hover {
    color: #ffffff;
    background-color: var(--color-dark);
    /* transform: scale(1.08); */
}

.slider-arrow.swiper-button-disabled {
    opacity: 0.45;
    cursor: default;
}

.slider-arrow.swiper-button-disabled:hover {
    color: var(--color-dark);
    background-color: rgba(232, 238, 236, 0.8);
    transform: none;
}

.slider-arrow-prev {
    left: 62px;
}

.slider-arrow-next {
    right: 62px;
}

/* Both in-flow dot rows sit centred under their slider; only the gap above differs. */
.certification-pagination,
.testimonials-pagination,
.reviews-pagination,
.partners-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.swiper-pagination-bullet {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin: 0 !important;
    background-color: transparent;
    border: 1px solid var(--color-dark);
    opacity: 1;
    transition: background-color var(--transition-base) var(--easing);
}

.swiper-pagination-bullet-active {
    background-color: var(--color-dark);
    width: 16px;
    height: 16px;
}

.hero-pagination {
    --swiper-pagination-bottom: 35px;
    z-index: 5;
    gap: 15px;
    display: flex;
    justify-content: center
}

/* Hairline ring so the dark green bullets stay readable on dark slides too. */
.hero-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 4px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.dot-nav {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.dot {
    width: 12px;
    height: 12px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.dot:hover {
    transform: scale(1.2);
}

.dot.is-active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

/* ------------------------------------------------------------ project card */

/* At rest the card is just the photo with its caption. Hovering veils the photo
   in black and swaps the caption for the full project details. */
.project-card {
    position: relative;
    overflow: hidden;
    background-color: var(--color-dark-deep);
    /* border-radius: var(--radius-sm); */
}

.project-card-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.project-card:hover .project-card-image {
    transform: scale(1.06);
}

.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #000000;
    opacity: 0;
    transition: opacity var(--transition-base) var(--easing);
}

.project-card:hover::before {
    opacity: 0.72;
}

.project-card-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 15px 20px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.4);
    transition: opacity var(--transition-base) var(--easing);
}

.project-card:hover .project-card-caption {
    opacity: 0;
}

.project-card-info {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    color: #ffffff;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.project-card:hover .project-card-info {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* The works cards are narrower and centre their details, unlike the projects grid. */
.works-section .project-card-info {
    align-items: center;
    padding: 20px;
    text-align: center;
}

.works-section .project-card-title {
    font-size: 22px;
}

.project-card-title {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 25px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 10px;
}

.project-card-address {
    margin: 0 0 auto;
    font-size: 16px;
}

/* --------------------------------------------------------------- header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    height: var(--header-height);
    background-color: var(--color-surface);
    transition: box-shadow var(--transition-base) var(--easing);
}

.site-header.is-scrolled {
    box-shadow: 0 6px 24px rgba(19, 80, 64, 0.12);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 100%;
}

.site-logo {
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    width: 72px;
    height: auto;
    transition: transform var(--transition-base) var(--easing);
}

.site-logo:hover img {
    transform: scale(1.05);
}

.main-nav-list {
    display: flex;
    align-items: center;
    gap: 18px;
}

.main-nav-item {
    position: relative;
}

.main-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 28px 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-dark);
    text-transform: uppercase;
    white-space: nowrap;
}

.main-nav-link .fa-chevron-down {
    font-size: 10px;
    font-weight: 400;
    transition: transform var(--transition-base) var(--easing);
}

.main-nav-item:hover>.main-nav-link,
.main-nav-item.is-active>.main-nav-link {
    color: var(--color-primary);
}

.main-nav-item:hover>.main-nav-link .fa-chevron-down {
    transform: rotate(180deg);
}

.main-nav-item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 100px;
    height: 5px;
    background-color: var(--color-primary);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transform: translateX(-50%);
}

.submenu {
    position: absolute;
    top: 100%;
    left: -18px;
    min-width: 236px;
    padding: 10px 0;
    background-color: var(--color-surface);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-card-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        visibility var(--transition-base) var(--easing);
}

.main-nav-item:hover>.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu a {
    display: block;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-dark);
}

.submenu a:hover {
    color: var(--color-primary);
    background-color: var(--color-mint);
}

.site-header-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 16px;
}

.header-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 22px;
    color: var(--color-dark);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--transition-base) var(--easing);
}

.header-search:hover,
.header-search.is-open {
    color: var(--color-primary);
}

.header-search .fa-xmark,
.header-search.is-open .fa-magnifying-glass {
    display: none;
}

.header-search.is-open .fa-xmark {
    display: block;
}

.header-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    width: 100%;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 16px 30px rgba(19, 80, 64, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        visibility var(--transition-base) var(--easing);
}

.header-search-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 0;
}

/* .form-control is declared further down and resets border-color, so scope this. */
.header-search-panel .search-input {
    flex: 1 1 240px;
    min-width: 0;
    border-color: var(--color-border);
    border-radius: 10px;
}

.search-submit {
    flex: 0 0 auto;
    height: 48px;
    padding-inline: 32px;
    white-space: nowrap;
    border-radius: 10px;
}

.header-cta {
    padding: 13px 28px;
    white-space: nowrap;
    border-radius: var(--radius-pill);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 9px;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background-color: var(--color-dark);
    border-radius: 2px;
    transition: transform var(--transition-base) var(--easing),
        opacity var(--transition-base) var(--easing);
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------------ hero */

.hero-section {
    position: relative;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    height: 660px;
}

.hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-slider .swiper-slide {
    height: 100%;
    overflow: hidden;
}

/* ----------------------------------------------------------------- story */

.story-section {
    padding: 60px 0 60px;
}

.story-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 625px;
    gap: 28px;
    align-items: start;
}

.story-content {
    max-width: 630px;
}

.story-title {
    margin: 25px 0 16px;
}

.story-title .display-title {
    display: block;
    margin-top: 6px;
    font-size: 45px;
    line-height: 1.12;
    text-align: center;
    color: var(--color-dark);
}

.story-description {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    color: var(--color-dark);
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 25px;
    margin-top: 30px;
}

.stat-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    font-size: 30px;
    color: var(--color-primary);
    background-color: var(--color-mint-strong);
    border-radius: var(--radius-md);
    transition: transform var(--transition-base) var(--easing);
}

.stat-item:hover .stat-icon {
    transform: translateY(-4px);
}

.stat-body {
    display: block;
}

.stat-number {
    display: block;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-dark);
}

.stat-label {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    color: var(--color-text);
    line-height: 20px;
}

.story-gallery {
    display: grid;
    grid-template-columns: 297px 297px;
    grid-template-rows: 279px 279px;
    gap: 15px 30px;
}

.story-figure {
    overflow: hidden;
    /* border-radius: var(--radius-sm); */
}

.story-figure-tall {
    grid-row: span 2;
}

.story-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.story-figure:hover img {
    transform: scale(1.06);
}

/* --------------------------------------------------------- certification */

.certification-section {
    padding: 60px 0;
    background-image: url('../backgrounds/certification-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.certification-layout {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 40px;
    /* align-items: center; */
}

.certification-content .section-title {
    margin-bottom: 10px;
}

.certification-description {
    margin: 20px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: justify;
    color: var(--color-dark);
}

.certification-slider-wrap {
    position: relative;
}

.certificate-figure {
    overflow: hidden;
    background-color: #ffffff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.certificate-figure:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.certificate-figure img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: contain;
}

.certification-pagination {
    margin-top: 35px;
}

/* -------------------------------------------------------------- services */

.services-section {
    padding: 60px 0 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 23px;
    margin-top: 30px;
    padding: 0 29px;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 470px;
    padding: 40px 20px;
    overflow: hidden;
    text-align: center;
    background-color: var(--color-dark-deep);
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

/* Bottom layer is the photo itself, then a flat black veil that deepens on hover. */
.service-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #000000;
    opacity: 0.6;
    transition: opacity var(--transition-base) var(--easing);
}

.service-card:hover::before {
    opacity: 0.8;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.service-icon,
.service-title,
.service-description,
.service-link {
    position: relative;
    z-index: 2;
}

.service-icon {
    width: 68px;
    height: auto;
    margin-bottom: 34px;
    transition: transform var(--transition-base) var(--easing);
}

.service-card:hover .service-icon {
    transform: translateY(-4px) scale(1.06);
}

.service-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    color: #ffffff;
    text-transform: uppercase;
}

/* Clamped to two lines at rest; hover reveals the rest and lets it scroll
   when the text is taller than the room left in the card. */
.service-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex-shrink: 1;
    min-height: 0;
    overflow: hidden;
    /* width: 264px; */
    max-width: 100%;
    margin: auto auto 0;
    padding-top: 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    transition: margin var(--transition-base) var(--easing);
}

/* Only the description may shrink, so icon, title and button keep their size. */
.service-icon,
.service-title,
.service-link {
    flex-shrink: 0;
}

.service-description::-webkit-scrollbar {
    width: 4px;
}

.service-description::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 2px;
}

.service-link {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: max-height var(--transition-base) var(--easing),
        opacity var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        margin-top var(--transition-base) var(--easing),
        padding var(--transition-base) var(--easing);
}

.service-card:hover .service-description {
    -webkit-line-clamp: none;
    margin-top: 15px;
    margin-bottom: auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) transparent;
}

.service-card:hover .service-link {
    max-height: 52px;
    margin-top: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------------- projects */

.projects-section {
    padding: 72px 0;
}

.projects-section .split-content .section-title {
    text-align: center;
}

.projects-section .section-title .display-title {
    font-size: 68px;
}

.projects-section .section-title .highlight {
    display: block;
    font-size: 40px;
}

.projects-section .section-quote {
    margin-top: 22px;
    text-align: justify;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 318px;
    gap: 25px;
}

.project-meta {
    margin: 0 0 auto;
}

.project-meta-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
    font-size: 16px;
}

.project-meta dt {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.project-meta dd {
    margin: 0;
    font-weight: 700;
}

/* ----------------------------------------------------------- consultation */

.consultation-section {
    padding: 60px 0;
    background-color: #679373;
    background-image: url('../backgrounds/consultation-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.consultation-section .section-title {
    font-size: 40px;
}

.consultation-section .script-title {
    margin: 2px 0 0;
    font-size: 68px;
}

.consultation-description {
    margin: 14px 0 0;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
}

.consultation-form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
}

.form-field {
    width: 372px;
    max-width: 100%;
}

.form-control {
    width: 100%;
    height: 48px;
    padding: 0px 20px;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--color-text);
    background-color: #ffffff;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.form-control::placeholder {
    color: #8b9691;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(66, 177, 54, 0.18);
    outline: none;
}

/* Measured from the design: a 10x5 hairline chevron centred 20px from the edge. */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' fill='none' stroke='%23000000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.625 0.625 5 4.375 9.375 0.625'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px 5px;
    padding-right: 46px;
}

.consultation-submit {
    height: 48px;
    padding-inline: 40px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------- works */

.works-section {
    padding: 60px 0;
}

.works-section .split-layout {
    grid-template-columns: 406px minmax(0, 1fr);
    gap: 36px;
}

.works-section .split-content .section-title {
    font-size: 36px;
    text-align: left;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 208px;
    gap: 20px 19px;
}

/* ----------------------------------------------------------------- video */

.video-section {
    padding: 56px 0 60px;
    background-color: var(--color-surface);
    background-image: url('../backgrounds/video-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.video-grid {
    display: grid;
    grid-template-columns: 625px 295px 295px;
    grid-template-rows: 166px 166px;
    gap: 20px 30px;
    justify-content: center;
    margin-top: 24px;
}

.video-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.video-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
}

.video-card .video-card-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.video-card:hover .video-card-image {
    transform: scale(1.05);
}

.video-card-featured {
    grid-row: span 2;
}

/* Play badge sits dead centre at its native size, as in the design. */
.video-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 56px;
    height: 50px;
    transform: translate(-50%, -50%);
    transition: transform var(--transition-base) var(--easing);
}

.video-card:hover .video-card-play {
    transform: translate(-50%, -50%) scale(1.12);
}

.video-card-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 36px 16px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-card-featured .video-card-caption {
    padding: 48px 22px 18px;
    font-size: 17px;
}

/* --------------------------------------------------------------- process */

.process-section {
    padding: 70px 0;
}

.process-layout {
    display: grid;
    grid-template-columns: 546px minmax(0, 1fr);
    margin-top: 40px;
    align-items: stretch;
}

.process-layout .process-figure .button-primary {
    font-size: 18px;
}

/* Five steps fill exactly the height of the photo beside it; extra steps scroll
   inside the panel. Square corners and a permanent 3px bar, as in the design. */
/* Native bar is hidden so the list keeps its full width; the bar below is drawn
   over the list by main.js instead of taking layout space. */
.process-panel {
    position: relative;
}

.process-list {
    height: 504px;
    overflow-y: auto;
    background-color: #f6f6f6;
    scrollbar-width: none;
}

.process-list::-webkit-scrollbar {
    display: none;
}

.process-scrollbar {
    position: absolute;
    top: 0;
    right: 7px;
    z-index: 1;
    width: 3px;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base) var(--easing);
}

.process-scrollbar.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.process-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #d9d9d9;
    cursor: grab;
}

.process-scrollbar-thumb:active {
    cursor: grabbing;
}

.process-step {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 100px;
    padding: 0 20px;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--easing);
}

.process-step+.process-step {
    border-top: 3px solid #ffffff;
}

.process-step:hover {
    background-color: #ffffff;
}

.process-step.is-active {
    background-color: #dce5e3;
}

.process-step-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    font-family: var(--font-number);
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-dark);
    background-color: var(--color-mint15);
    /* border: 1px solid var(--color-border); */
    border-radius: 50%;
    transition: color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing);
}

.process-step.is-active .process-step-number {
    color: #ffffff;
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

.process-step-label {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.process-step-title {
    margin: 0 0 6px;
    font-family: var(--color-text);
    font-size: 18px;
    font-weight: 800;
    color: #222;
}

.process-step-description {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--color-text);
}

.process-figure {
    position: relative;
    overflow: hidden;
}

.process-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.process-figure:hover img {
    transform: scale(1.04);
}

.process-figure-overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 30px;
    background: rgba(0, 0, 0, 0.5);
}

.process-figure-text {
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 700;
}

.process-figure-overlay .button {
    flex-shrink: 0;
    font-weight: 700;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- standards */

.standards-section {
    padding: 60px 0;
    background-color: var(--color-dark);
    background-image: url('../backgrounds/standards-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.standards-section .standards-figure {
    max-width: 460px;
}

.standards-layout {
    display: grid;
    grid-template-columns: 272px 461px minmax(0, 1fr);
    row-gap: 29px;
    align-items: center;
}

.standards-counter {
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 0.75);
}

.standards-counter-current {
    color: var(--color-accent);
    font-size: 68px;
    font-weight: 800;
}

.standards-index {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

.standards-name {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    color: #ffffff;
    text-transform: uppercase;
}

.standards-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.standards-figure {
    overflow: hidden;
}

.standards-figure img {
    display: block;
    width: 100%;
    height: 450px;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.standards-figure:hover img {
    transform: scale(1.05);
}

.standards-content {
    padding-left: 29px;
}

.standards-content .section-title .display-title {
    font-size: 68px;
    text-align: center;
}

.standards-content .section-title .subtitle {
    font-size: 45px;
}

.standards-content .badge-pill {
    margin: 18px 0 20px;
}

.standards-section .badge-pill-primary {
    font-size: 34px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: var(--font-display);
    text-align: center;
    border-radius: 10px !important;
    margin: 10px 0 20px;
}

/* ---------------------------------------------------------- testimonials */

.testimonials-section {
    padding: 60px 0;
}

.testimonials-slider-wrap {
    position: relative;
    margin-top: 40px;
}

.testimonials-slider {
    overflow: hidden;
}

.testimonial-card {
    height: auto;
}

/* The avatar overlaps the photo edge, so it lives outside the clipped link. */
.testimonial-media {
    position: relative;
}

.testimonials-section .testimonial-title,
.testimonials-section .testimonial-title .link-text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: var(--color-dark);
    margin: 20px 0 8px;
    padding-right: 90px;
}

.testimonials-section .testimonial-title .link-text:hover {
    color: var(--color-primary);
}

.testimonials-section .slider-arrow {
    top: 26%;
}

.testimonial-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 56px;
    height: 50px;
    transform: translate(-50%, -50%);
    transition: transform var(--transition-base) var(--easing);
}

.testimonial-thumbnail:hover .testimonial-play {
    transform: translate(-50%, -50%) scale(1.12);
}

.testimonial-avatar {
    position: absolute;
    right: 12px;
    bottom: -38px;
    z-index: 3;
    width: 74px;
    height: 74px;
    object-fit: cover;
    border: 3px solid #ffffff;
    border-radius: 50%;
}

.testimonial-thumbnail {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.testimonial-image {
    display: block;
    width: 100%;
    height: 226px;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.testimonial-thumbnail:hover .testimonial-image {
    transform: scale(1.05);
}

/* The title column stops where the avatar starts, which is what makes it wrap
   onto three lines in the design while the description runs the full width. */
.testimonial-title {
    margin: 19px 0 8px;
    padding-right: 113px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.55;
    color: var(--color-dark);
}

.testimonial-description {
    margin: 0;
    font-size: 15px;
    line-height: 1.47;
}

/* Measured from the design: 48px buttons, 64px outside the container. */
.testimonials-arrow-prev,
.testimonials-arrow-next {
    width: 48px;
    height: 48px;
    margin-top: -24px;
}

.testimonials-arrow-prev {
    left: -86px;
}

.testimonials-arrow-next {
    right: -86px;
}

.testimonials-pagination {
    margin-top: 28px;
}

/* ------------------------------------------------------------- knowledge */

.knowledge-section {
    padding: 64px 0;
    background-color: var(--color-surface-alt);
    background-image: url('../backgrounds/knowledge-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.knowledge-section .filter-list-center {
    margin-top: 20px;
}

.knowledge-section .knowledge-layout {
    margin-top: 30px;
}

.knowledge-layout {
    display: grid;
    grid-template-columns: 627px minmax(0, 1fr);
    gap: 28px;
    margin-top: 40px;
    align-items: start;
}

.article-thumbnail {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.article-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.article-thumbnail:hover img {
    transform: scale(1.05);
}

.article-card-featured .article-thumbnail img {
    height: 351px;
}

.article-title {
    margin: 18px 0 10px;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-dark);
}

.article-title a:hover {
    color: var(--color-primary);
}

.article-description {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-muted);
}

.article-list {
    display: grid;
    gap: 23px;
}

.article-card-row {
    display: grid;
    grid-template-columns: 297px 1fr;
    gap: 26px;
    align-items: start;
}

.article-card-row .article-thumbnail img {
    height: 160px;
}

.article-card-row .article-title {
    margin-top: 0;
    font-size: 18px;
}

/* ------------------------------------------------------------------ team */

.team-section {
    padding: 62px 0 60px;
}

.team-section .section-title .script-title {
    font-size: 115px;
}

.team-section .section-title .display-title {
    font-size: 42px;
}

.team-mosaic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 36px;
    gap: 10px;
    margin-top: 40px;
}

.team-figure {
    position: relative;
    overflow: hidden;
}

.team-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.team-figure:hover img {
    transform: scale(1.07);
}

.team-figure-01 {
    grid-column: 1;
    grid-row: 6 / span 8;
}

.team-figure-02 {
    grid-column: 2;
    grid-row: 3 / span 8;
}

.team-figure-03 {
    grid-column: 2;
    grid-row: 11 / span 9;
}

.team-figure-04 {
    grid-column: 3;
    grid-row: 1 / span 11;
}

.team-figure-05 {
    grid-column: 3;
    grid-row: 12 / span 9;
}

.team-figure-06 {
    grid-column: 4;
    grid-row: 3 / span 10;
}

.team-figure-07 {
    grid-column: 4;
    grid-row: 13 / span 5;
}

.team-figure-08 {
    grid-column: 5;
    grid-row: 6 / span 9;
}

/* --------------------------------------------------------------- contact */

.contact-section {
    display: grid;
    grid-template-columns: 867px minmax(0, 1fr);
    align-items: stretch;
}

.contact-section .form-control {
    height: 44px;
    padding: 0px 15px;
    border-radius: 10px;
}

.contact-figure {
    overflow: hidden;
}

.contact-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact-panel {
    display: flex;
    align-items: center;
    padding: 50px 40px;
    background-color: var(--color-dark);
    background-image: url('../backgrounds/contact-form-background.jpg');
    background-position: center;
    background-size: cover;
}

.contact-panel-inner {
    width: 100%;
    max-width: 516px;
}

.contact-form {
    display: grid;
    gap: 15px;
    margin-top: 30px;
}

.contact-submit {
    justify-self: center;
    width: 100%;
    max-width: 320px;
    height: 44px;
    font-size: 18px;
    font-weight: 800;
    padding-top: 15px;
    border-radius: 90px;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
    padding: 60px 0 0;
    background-color: var(--color-surface);
}

.hotline-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.hotline-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 30px 19px 30px;
    color: #ffffff;
    background-color: var(--color-dark);
    border-radius: 20px;
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.hotline-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.hotline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    font-size: 26px;
    color: #ffffff;
}

.hotline-icon i {
    font-size: 46px;
}

.hotline-label {
    display: block;
    font-size: 18px;
    font-weight: 500;
}

.hotline-number {
    display: block;
    margin-top: 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
}

.hotline-number:hover {
    color: var(--color-accent);
}

.footer-layout {
    display: grid;
    grid-template-columns: 222px 180px 200px 190px minmax(0, 1fr);
    gap: 30px;
    margin-top: 52px;
}

.footer-logo {
    width: 150px;
    height: auto;
}

.social-list {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.social-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 15px;
    color: #ffffff;
    background-color: #b9c4c0;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.social-list a:hover {
    background-color: var(--color-primary);
    transform: translateY(-3px);
}

.footer-title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 12px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-dark);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-border);
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 68px;
    height: 2px;
    background-color: var(--color-dark);
}

.footer-list li+li {
    margin-top: 6px;
}

.footer-list a {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-size: 15px;
    color: var(--color-dark);
}

/* Font Awesome chevron drawn from CSS so the four footer lists stay plain markup. */
.footer-list a::before {
    content: '\f054';
    font-family: 'Font Awesome 7 Pro';
    font-size: 9px;
    font-weight: 300;
    color: #888888;
    transition: transform var(--transition-fast) var(--easing);
}

.footer-list a:hover {
    color: var(--color-primary);
}

.footer-list a:hover::before {
    color: var(--color-primary);
    transform: translateX(3px);
}

.footer-company {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    text-transform: uppercase;
}

.footer-contact-line {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
}

.footer-contact-line strong {
    font-weight: 700;
    color: var(--color-dark);
}

.footer-contact-email i {
    color: var(--color-primary);
}

.footer-map {
    display: block;
    margin-top: 14px;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.footer-map img {
    display: block;
    width: 100%;
    transition: transform var(--transition-slow) var(--easing);
}

.footer-map:hover img {
    transform: scale(1.05);
}

.site-copyright {
    margin: 48px 0 0;
    padding: 12px 20px;
    font-size: 15px;
    color: var(--color-muted);
    text-align: center;
    background-color: #f1f1f1;
}

.footer-column-contact .img-icon {
    padding-right: 10px;
    margin-top: -5px;
}

/* ----------------------------------------------------------- back to top */

.back-to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 18px;
    color: #ffffff;
    background-color: var(--color-dark);
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-card-hover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    cursor: pointer;
    transition: opacity var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing),
        visibility var(--transition-base) var(--easing);
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--color-primary);
    transform: translateY(-4px);
}

/* ---------------------------------------------------------- contact dock */

.contact-dock {
    position: fixed;
    left: 24px;
    bottom: 28px;
    z-index: 90;
}

.contact-dock-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-dock-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    color: #ffffff;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform var(--transition-base) var(--easing);
}

.contact-dock-link img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.contact-dock-facebook {
    background-color: #0866ff;
}

.contact-dock-email {
    font-size: 20px;
    background-image: linear-gradient(180deg, #7fb2ff 0%, #3f7df0 100%);
}

.contact-dock-link:hover,
.contact-dock-link:focus-visible {
    color: #ffffff;
    transform: scale(1.1);
}

.contact-dock-label {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    padding: 6px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    white-space: nowrap;
    background-color: var(--color-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-6px, -50%);
    transition: opacity var(--transition-fast) var(--easing),
        transform var(--transition-fast) var(--easing),
        visibility var(--transition-fast) var(--easing);
}

.contact-dock-label::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    border: 6px solid transparent;
    border-right-color: var(--color-dark);
    transform: translateY(-50%);
}

.contact-dock-link:hover .contact-dock-label,
.contact-dock-link:focus-visible .contact-dock-label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

/* ----------------------------------------------------------- promo popup */

.promo-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.promo-popup[hidden] {
    display: none;
}

.is-popup-open {
    overflow: hidden;
}

.promo-popup-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(8, 36, 29, 0.85);
    opacity: 0;
    transition: opacity var(--transition-base) var(--easing);
}

.promo-popup-dialog {
    position: relative;
    width: 680px;
    max-width: 100%;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 30px 24px 24px;
    color: #ffffff;
    text-align: center;
    background-color: var(--color-dark);
    background-image: linear-gradient(rgba(13, 59, 47, 0.8), rgba(13, 59, 47, 0.8)),
        url('../backgrounds/contact-form-background.jpg');
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: opacity var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.promo-popup-dialog:focus {
    outline: none;
}

.promo-popup.is-open .promo-popup-backdrop,
.promo-popup.is-open .promo-popup-dialog {
    opacity: 1;
}

.promo-popup.is-open .promo-popup-dialog {
    transform: none;
}

.promo-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 22px;
    color: #ffffff;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-fast) var(--easing),
        transform var(--transition-fast) var(--easing);
}

.promo-popup-close:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: rotate(90deg);
}

.promo-popup-close:focus-visible,
.promo-popup-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.promo-popup-title {
    margin: 0 40px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-accent);
    text-transform: uppercase;
}

.promo-popup-text {
    margin: 12px auto 0;
    max-width: 560px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

.promo-popup-banner {
    margin-top: 20px;
    overflow: hidden;
    border-radius: var(--radius-md);
}

/* The image gives up height first so the form and submit button stay on screen;
   660px is roughly everything else in the dialog. */
.promo-popup-banner img {
    display: block;
    width: 100%;
    aspect-ratio: 7 / 5;
    max-height: max(180px, calc(100vh - 660px));
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.promo-popup-banner:hover img {
    transform: scale(1.04);
}

.promo-popup-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition-fast) var(--easing);
}

.promo-popup-link i {
    font-size: 12px;
    transition: transform var(--transition-fast) var(--easing);
}

.promo-popup-link:hover {
    color: var(--color-accent);
}

.promo-popup-link:hover i {
    transform: translateX(3px);
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 76px;
    background-color: #06241c;
    border-radius: var(--radius-sm);
}

.countdown-value {
    font-family: var(--font-number);
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.countdown-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0.85;
}

.promo-popup-form {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.promo-popup-form .form-control {
    height: 46px;
    padding: 0 16px;
    font-size: 16px;
    border-radius: var(--radius-md);
}

.promo-popup-form select.form-control {
    padding-right: 46px;
}

.promo-popup-submit {
    width: 100%;
    height: 50px;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
}

/* --------------------------------------------------------- reduced motion */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---- team-section */
.team-section .section-quote-center {
    max-width: 680px;
    margin: 5px auto 0;
}

/* ----------------- */
/* ------------------------------------------------------- shared helpers */

.section-muted {
    background-color: var(--color-surface-muted);
}

.section-quote-narrow {
    max-width: 832px;
}

.section-action-center {
    display: flex;
    justify-content: center;
    margin-top: 37px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.button-lg {
    height: 50px;
    padding: 0 21px;
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}

.button-caps {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}

.button-outline-light {
    color: #ffffff;
    background-color: transparent;
    border: 1px solid #ffffff;
}

.button-outline-light i {
    font-size: 20px;
}

.button-outline-light:hover {
    color: var(--color-dark);
    background-color: #ffffff;
    transform: translateY(-2px);
}

.button-outline-light:hover i {
    transform: none;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-dark);
    text-transform: uppercase;
}

.eyebrow-light {
    gap: 10px;
    font-size: 16px;
    color: #ffffff;
}

.eyebrow-light::after {
    content: '';
    width: 176px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
}

.eyebrow-center {
    justify-content: center;
}

.eyebrow-center::before,
.eyebrow-center::after {
    content: '';
    width: 100px;
    height: 2px;
    background-color: #888888;
}

/* --------------------------------------------------------- service hero */

.service-hero {
    background-color: var(--color-dark-deep);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.renovation-hero-section {
    background-image: url('../backgrounds/renovation-hero-background.jpg');
}

.service-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 680px;
    padding: 60px 0;
}

.breadcrumb-nav {
    position: absolute;
    top: 13px;
    left: 0;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 15px;
    line-height: 22px;
    color: #ffffff;
}

.breadcrumb-list li+li::before {
    content: '\f054';
    margin: 0 17px;
    font-family: 'Font Awesome 7 Pro';
    font-size: 10px;
    font-weight: 300;
}

.breadcrumb-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.breadcrumb-list a i {
    font-size: 16px;
    color: #d9d9d9;
}

.breadcrumb-list a:hover {
    color: var(--color-primary);
}

.breadcrumb-list [aria-current] {
    font-weight: 700;
}

.service-hero-content {
    max-width: 600px;
}

.service-hero-title {
    margin: 16px 0 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
}

.service-hero-title .highlight {
    color: var(--color-primary);
}

.service-hero-subtitle {
    margin: 8px 0 0;
    padding-bottom: 10px;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    background: linear-gradient(90deg, var(--color-primary), rgba(66, 177, 54, 0)) left bottom / 180px 1px no-repeat;
}

.service-hero-description {
    max-width: 550px;
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
}

.hero-feature-list {
    display: grid;
    grid-template-columns: repeat(4, 144px);
    margin-top: 24px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 20px;
    color: #ffffff;
}

.hero-feature-icon {
    flex-shrink: 0;
    width: 36px;
    font-size: 34px;
    text-align: center;
    transition: transform var(--transition-base) var(--easing);
}

.hero-feature:hover .hero-feature-icon {
    transform: translateY(-3px);
}

.service-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 39px;
}

/* -------------------------------------------------------- caption figure */

/* Photo with a translucent band holding live text; the photo is absolutely
   placed so the figure's own height decides the crop. */
.caption-figure {
    position: relative;
    overflow: hidden;
}

.caption-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.caption-figure:hover img {
    transform: scale(1.04);
}

.caption-figure-body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 22px 46px 22px 30px;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.45);
}

.caption-figure-title {
    margin: 0 0 6px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
}

.caption-figure-text {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
}

.caption-figure-brand {
    border-radius: var(--radius-lg);
}

.caption-figure-brand .caption-figure-body {
    padding: 24px 45px 38px;
    background-color: rgba(19, 80, 64, 0.6);
}

.caption-figure-brand .caption-figure-title {
    margin-bottom: 10px;
    font-size: 30px;
}

.caption-figure-brand .caption-figure-text {
    font-size: 19px;
    line-height: 27px;
}

/* ----------------------------------------------------------------- needs */

.renovation-needs-section {
    padding: 64px 0 60px;
}

.needs-layout {
    display: grid;
    grid-template-columns: 620px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.needs-description {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.needs-tags {
    gap: 16px 15px;
    margin-top: 27px;
}

.needs-tags .filter-button {
    padding: 11px 15px 10px;
    line-height: 22px;
}

.needs-figure {
    height: 416px;
}

/* ------------------------------------------------------------ media card */

.renovation-categories-section {
    padding: 60px 0 85px;
}

.renovation-risk-section {
    padding: 60px 0 80px;
}

.media-card {
    display: flex;
    flex-direction: column;
    padding: 5px 5px 25px;
    background-color: #ffffff;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.media-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.media-card-image {
    height: 181px;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.media-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.media-card:hover .media-card-image img {
    transform: scale(1.06);
}

.media-card-title {
    margin: 16px 0 12px;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 800;
    line-height: 30px;
    color: var(--color-dark);
    text-align: center;
    text-transform: uppercase;
    transition: color var(--transition-base) var(--easing);
}

.media-card:hover .media-card-title {
    color: var(--color-primary);
}

.media-card-text {
    margin: 0;
    padding: 0 22px 9px;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-text);
}

.bullet-list {
    padding: 0 6px 0 17px;
}

.bullet-list li {
    position: relative;
    padding-left: 18px;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-text);
}

.bullet-list li+li {
    margin-top: 8px;
}

.bullet-list li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
}

/* --------------------------------------------------------------- pricing */

.renovation-pricing-section {
    padding: 60px 0;
    background-color: #f7fbfb;
    background-image: url('../backgrounds/pricing-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.renovation-pricing-section .section-title {
    margin-top: 5px;
}

.price-table-wrap {
    margin-top: 32px;
    overflow-x: auto;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.price-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-text);
}

.price-col-service {
    width: 327px;
}

.price-col-scope {
    width: 436px;
}

.price-col-price {
    width: 218px;
}

.price-table thead th {
    height: 55px;
    padding: 0 20px;
    font-weight: 800;
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
    background-color: var(--color-dark);
}

.price-table thead th:first-child {
    padding-left: 40px;
}

.price-table th+th,
.price-table td {
    border-left: 1px solid var(--color-line);
}

.price-table tbody th,
.price-table td {
    padding: 15px 20px;
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
}

.price-table tbody tr {
    transition: background-color var(--transition-base) var(--easing);
}

.price-table tbody tr:nth-child(even) {
    background-color: #f6f7f8;
}

.price-table tbody tr:hover {
    background-color: var(--color-mint);
}

.price-table tbody th {
    padding-left: 22px;
    padding-right: 10px;
    font-weight: 800;
    color: var(--color-dark);
    text-transform: uppercase;
}

.price-table td:last-child {
    font-weight: 400;
}

.price-table .price-value {
    font-weight: 800;
}

.price-service {
    display: flex;
    align-items: center;
    gap: 15px;
}

.price-service-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    background-color: #ebf0ee;
    border-radius: 50%;
    font-size: 36px;
    color: var(--color-dark);
    transition: transform var(--transition-base) var(--easing);
}

.price-table tbody tr:hover .price-service-icon {
    transform: scale(1.06);
}

.price-footer {
    display: flex;
    gap: 21px;
    margin-top: 30px;
}

.price-note {
    display: flex;
    flex: 1;
    align-items: center;
    min-height: 90px;
    background-color: #e0ebe9;
    border-radius: var(--radius-md);
}

.price-note-label {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 97px;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    color: var(--color-dark);
    text-transform: uppercase;
}

.price-note-label i {
    font-size: 34px;
}

.price-note-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    margin: 10px 0;
    padding: 0 20px 0 16px;
    border-left: 1px solid var(--color-line);
}

.price-note-list li {
    position: relative;
    padding-left: 15px;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-text);
}

.price-note-list li::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: currentColor;
    border-radius: 50%;
}

.button-tile {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 200px;
    min-height: 90px;
    padding: 0 20px 0 22px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 800;
    line-height: 28px;
    color: #ffffff;
    text-transform: uppercase;
    background-color: var(--color-primary);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.button-tile i {
    font-size: 40px;
    transition: transform var(--transition-base) var(--easing);
}

.price-footer.aos-init .button-tile i {
    font-weight: 300;
}

.button-tile:hover {
    color: #ffffff;
    background-color: var(--color-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(66, 177, 54, 0.3);
}

.button-tile:hover i {
    transform: scale(1.08);
}

/* --------------------------------------------------------------- process */

.renovation-process-section {
    padding: 70px 0 60px;
}

.step-grid {
    row-gap: 34px;
    margin-top: 48px;
}

.step-number {
    position: relative;
    display: block;
    padding-bottom: 8px;
    font-family: var(--font-number);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-line);
    transition: color var(--transition-base) var(--easing);
}

.step-number::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow) var(--easing);
}

.step-item:hover .step-number {
    color: var(--color-primary);
}

.step-item:hover .step-number::after {
    transform: scaleX(1);
}

.step-text {
    margin: 17px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-dark);
}

/* ------------------------------------------------------ project showcase */

.renovation-projects-section {
    padding: 60px 0;
}

.project-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
    margin-top: 42px;
}

.before-after {
    position: relative;
    display: block;
    height: 300px;
    overflow: hidden;
    border-radius: var(--radius-md);
}

.before-after img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.before-after:hover img {
    transform: scale(1.05);
}

.before-after-small {
    height: 143px;
}

/* Pills sit over the centre of each half of the composite thumbnail. */
.before-after-label {
    position: absolute;
    top: 2px;
    left: 25%;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: rgba(110, 110, 110, 0.9);
    border-radius: 4px;
    transform: translateX(-50%);
}

.before-after-label-after {
    left: 75.5%;
    background-color: var(--color-primary);
}

.project-feature-title {
    margin: 17px 0 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-dark);
}

.project-feature-title a:hover,
.project-item-title a:hover {
    color: var(--color-primary);
}

.project-feature-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    margin: 15px 0 18px;
    overflow: hidden;
    font-size: 16px;
    line-height: 22px;
    color: #888888;
}

.project-feature .button {
    font-size: 18px;
}

.project-list {
    display: grid;
    gap: 24px;
}

.project-item {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

.project-item-title {
    margin: 0 0 5px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    color: var(--color-dark);
}

.view-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 36px;
    font-size: 18px;
    font-weight: 500;
    color: var(--color-dark);
    background-color: #edf8eb;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base) var(--easing),
        color var(--transition-base) var(--easing);
}

.view-all-link i {
    transition: transform var(--transition-base) var(--easing);
}

.view-all-link:hover {
    color: #ffffff;
    background-color: var(--color-primary);
}

.view-all-link:hover i {
    transform: translateX(4px);
}

.meta-list {
    display: grid;
    gap: 6px;
}

.meta-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
}

.meta-list i {
    flex-shrink: 0;
    width: 12px;
    font-size: 12px;
    color: #888888;
    text-align: center;
}

.meta-list-inline {
    display: flex;
    gap: 40px;
    margin-top: 17px;
}

.meta-list-inline li:last-child {
    flex: 1;
}

/* The scope line wraps at the same width in the feature and in the list. */
.project-showcase .meta-list li:last-child {
    max-width: 262px;
}

/* --------------------------------------------------------------- reviews */

/* Each slide is one page of the design: a video review beside two written ones. */
.reviews-section {
    padding: 64px 0 60px;
}

.reviews-slider-wrap {
    position: relative;
    margin-top: 34px;
}

.reviews-slider {
    overflow: hidden;
}

.reviews-page {
    display: grid;
    grid-template-columns: minmax(0, 625fr) repeat(2, minmax(0, 297fr));
    gap: 30px;
    align-items: start;
}

.review-card-featured {
    display: grid;
    grid-template-columns: minmax(0, 407fr) minmax(0, 198fr);
    gap: 20px;
    align-items: start;
}

.review-video,
.review-card-image {
    position: relative;
    display: block;
    margin: 0;
    overflow: hidden;
}

.review-video {
    aspect-ratio: 407 / 305;
}

.review-card-image {
    height: 167px;
}

.review-video img,
.review-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.review-video:hover img,
.review-card:hover .review-card-image img {
    transform: scale(1.05);
}

.review-name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--color-dark);
}

.review-card-featured .review-name {
    display: inline-block;
    margin-top: 2px;
    padding-bottom: 4px;
    font-size: 22px;
    border-bottom: 2px solid var(--color-primary);
}

.review-card .meta-list {
    gap: 8px;
}

.review-card-featured .meta-list {
    margin-top: 15px;
}

.review-text {
    margin: 23px 0 0;
    font-size: 15px;
    line-height: 22px;
    color: #888888;
}

/* Written reviews indent everything below the photo to the text column that
   starts after the quote mark. */
.review-card:not(.review-card-featured) .review-card-body {
    padding-top: 22px;
}

.review-quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    padding-left: 37px;
    overflow: hidden;
    font-size: 15px;
    line-height: 22px;
    color: #888888;
}

.review-quote::before {
    top: 2px;
    left: 0;
    width: 22px;
    height: 18px;
}

.review-quote+.review-name {
    margin: 6px 0 0 37px;
}

.review-card:not(.review-card-featured) .meta-list {
    margin: 10px 0 0 37px;
}

.reviews-arrow-prev,
.reviews-arrow-next {
    top: 195px;
    margin-top: -24px;
}

.reviews-arrow-prev {
    left: -111px;
}

.reviews-arrow-next {
    right: -111px;
}

.reviews-slider-wrap .slider-arrow:not(.swiper-button-disabled) {
    color: #ffffff;
    background-color: var(--color-dark);
}

.reviews-slider-wrap .slider-arrow:not(.swiper-button-disabled):hover {
    background-color: var(--color-primary);
}

.reviews-slider-wrap .slider-arrow.swiper-button-disabled {
    opacity: 1;
    color: var(--color-dark);
    background-color: var(--color-mint2);
}

.reviews-pagination {
    margin-top: 22px;
}

/* ------------------------------------------------------------------- faq */

.faq-section {
    padding: 52px 0 65px;
    background-color: var(--color-surface-alt);
    background-image: url('../backgrounds/knowledge-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.faq-list {
    display: grid;
    gap: 10px;
    width: 1060px;
    max-width: 100%;
    margin: 24px auto 0;
}

.faq-item[open] {
    margin-bottom: 12px;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 48px;
    padding: 10px 18px 10px 16px;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-dark);
    list-style: none;
    background-color: var(--color-mint);
    border: 1px solid var(--color-mint4);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-base) var(--easing),
        color var(--transition-base) var(--easing);
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '\2b';
    flex-shrink: 0;
    font-family: 'Font Awesome 7 Pro';
    font-size: 16px;
    font-weight: 300;
    transition: transform var(--transition-base) var(--easing);
}

.faq-question:hover {
    background-color: var(--color-mint2);
}

.faq-item[open] .faq-question {
    font-weight: 700;
    color: #ffffff;
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    border-radius: 8px 8px 0 0;
}

.faq-item[open] .faq-question::after {
    content: '\f068';
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 291px;
    padding: 18px 20px 20px 21px;
    overflow-y: auto;
    font-size: 16px;
    line-height: 28px;
    color: var(--color-text);
    background-color: #ffffff;
    border-radius: 0 0 8px 8px;
    scrollbar-color: #d9d9d9 transparent;
    scrollbar-width: thin;
    animation: faq-reveal var(--transition-base) var(--easing);
}

.faq-answer::-webkit-scrollbar {
    width: 5px;
}

.faq-answer::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
}

.faq-answer p {
    margin: 0;
}

.faq-answer ul {
    padding-left: 24px;
    list-style: disc;
}

@keyframes faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------- consult */

.consult-section {
    padding: 60px 0;
    background-color: var(--color-dark);
    background-image: linear-gradient(rgba(19, 80, 64, 0.625), rgba(19, 80, 64, 0.625)),
        url('../backgrounds/consult-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.consult-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27px;
}

.consult-figure {
    min-height: 480px;
}

.consult-card {
    padding: 28px 22px;
    background-color: #ffffff;
    border-radius: var(--radius-lg);
}

.consult-overline {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.consult-title {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 46px;
    color: var(--color-dark);
    text-transform: uppercase;
}

.consult-title .highlight {
    display: block;
    color: var(--color-primary);
}

.consult-description {
    margin: 5px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text);
}

.consult-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 20px;
    margin-top: 18px;
}

.consult-form .form-control {
    height: 44px;
    padding: 0 15px;
    border-color: var(--color-line);
    border-radius: var(--radius-md);
}

.consult-form .form-control::placeholder {
    color: #888888;
}

.consult-form .form-control:focus {
    border-color: var(--color-primary);
}

.input-icon {
    position: relative;
    display: block;
}

.input-icon img {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.consult-form .input-icon .form-control {
    padding-left: 41px;
}

.consult-submit {
    grid-column: 1 / -1;
    height: 48px;
    margin-top: 5px;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
}

/* -------------------------------------------------------------- partners */

.partners-section {
    padding: 60px 0;
}

.partners-slider-wrap {
    position: relative;
    margin-top: 40px;
}

.partners-slider {
    overflow: hidden;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
}

.partner-logo img {
    max-width: 170px;
    max-height: 84px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-base) var(--easing);
}

.partner-logo:hover img {
    transform: scale(1.06);
}

.slider-arrow-dark {
    color: #ffffff;
    background-color: var(--color-dark);
}

.slider-arrow-dark:hover {
    background-color: var(--color-primary);
}

.partners-arrow-prev {
    left: -111px;
}

.partners-arrow-next {
    right: -111px;
}

.partners-pagination {
    margin-top: 35px;
}

/* --------------------------------------------------- projects page hero */

.projects-hero-section {
    background-image: url('../backgrounds/projects-hero-background.jpg');
}

.projects-hero-section .service-hero-inner {
    align-items: flex-start;
    min-height: 678px;
    padding: 149px 0 60px;
}

.eyebrow-lead {
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
}

.eyebrow-lead::before {
    content: '';
    flex-shrink: 0;
    width: 34px;
    height: 3px;
    background-color: var(--color-primary);
}

.eyebrow-accent {
    justify-content: center;
    color: var(--color-primary);
}

.projects-hero-title {
    margin-top: 10px;
}

.projects-hero-subtitle {
    max-width: 500px;
    margin: 12px 0 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 32px;
    color: #ffffff;
}

.projects-hero-description {
    max-width: 440px;
    margin-top: 16px;
}

.projects-hero-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    margin-top: 1px;
}

.projects-hero-actions .button {
    padding: 0 26px;
}

.projects-hero-actions .button-outline-light {
    padding: 0 18px;
}

/* -------------------------------------------------------------- filter */

.house-filter-section {
    padding: 30px 0 28px;
    background-color: var(--color-surface-muted);
}

.house-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 162px;
    gap: 16px;
}

.house-filter .form-control {
    height: 44px;
    padding-left: 15px;
    border-color: #89a8a0;
}

.house-filter .form-control:focus {
    border-color: var(--color-primary);
}

.house-filter-submit {
    height: 44px;
    border: 1px solid var(--color-dark);
}

/* ---------------------------------------------------------- house list */

.house-list-section {
    padding: 60px 0;
}

.pill-list {
    gap: 17px 15px;
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
}

.pill-button {
    height: 40px;
    padding: 0 20px;
    font-size: 16px;
    color: var(--color-primary);
    background-color: #ffffff;
    border-color: var(--color-primary);
    border-radius: var(--radius-pill);
}

.pill-button:hover {
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.pill-button.is-active {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.house-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 41px 35px;
    margin-top: 41px;
}

.house-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.house-card-image {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.house-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.house-card:hover .house-card-image img {
    transform: scale(1.06);
}

.house-card-title {
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 800;
    line-height: 28px;
    color: var(--color-dark);
    transition: color var(--transition-base) var(--easing);
}

.house-card:hover .house-card-title {
    color: var(--color-primary);
}

.spec-list {
    margin-top: 12px;
}

.spec-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 16px;
    line-height: 30px;
    color: var(--color-text);
}

.spec-list i {
    flex-shrink: 0;
    width: 16px;
    font-size: 15px;
    color: #888888;
    text-align: center;
}

.spec-list strong {
    font-weight: 700;
}

.button-soft {
    color: var(--color-dark);
    background-color: #e8eeec;
    border: 1px solid #7d9f96;
}

.button-soft:hover,
.house-card:hover .button-soft {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.house-card .button-soft {
    margin-top: 11px;
}

.pagination-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: var(--color-text);
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 4px;
    transition: color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing),
        border-color var(--transition-base) var(--easing);
}

a.pagination-link:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.pagination-link.is-active {
    font-weight: 700;
    color: #ffffff;
    background-color: var(--color-dark);
    border-color: var(--color-dark);
}

.pagination-link.is-active:hover {
    color: #ffffff;
}

/* ------------------------------------------------------- guide article */

.townhouse-guide-section {
    padding: 60px 0;
}

.intro-box {
    padding: 30px;
    background-color: #eaf5eb;
    border-radius: var(--radius-lg);
}

.intro-box-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 800;
    line-height: 29px;
    color: var(--color-dark);
}

.intro-box-text {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: #888888;
}

.intro-box-text a,
.article-content p a {
    text-decoration: underline;
}

.intro-box-text a:hover,
.article-content p a:hover {
    color: var(--color-primary);
}

.article-row {
    display: grid;
    grid-template-columns: minmax(0, 733fr) minmax(0, 515fr);
    gap: 30px;
    align-items: start;
    margin-top: 60px;
}

.article-row+.article-row {
    margin-top: 80px;
}

.article-row-reverse {
    grid-template-columns: minmax(0, 515fr) minmax(0, 733fr);
}

.article-row-reverse .article-figure {
    order: -1;
}

.article-heading {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-dark);
}

.article-subheading {
    margin: 18px 0 10px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text);
}

.article-content p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    color: var(--color-text);
}

.check-list li {
    display: flex;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    color: var(--color-text);
}

.check-list li+li {
    margin-top: 14px;
}

.check-list i {
    flex-shrink: 0;
    margin-top: 5px;
    font-size: 16px;
    color: var(--color-primary);
}

.check-list strong {
    font-weight: 800;
}

.article-figure {
    aspect-ratio: 515 / 581;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.article-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.article-figure:hover img {
    transform: scale(1.04);
}

/* ------------------------------------------------------------- gallery */

.house-gallery-section {
    padding: 70px 0 47px;
}

.house-gallery-section+.house-gallery-section {
    padding-bottom: 94px;
}

.gallery-title {
    margin-top: 6px;
    line-height: 49px;
}

.gallery-title span {
    display: block;
}

.gallery-quote {
    max-width: 850px;
    margin-top: 16px;
    line-height: 24px;
    color: #666666;
}

.gallery-quote-wide {
    max-width: 1160px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 21px 30px;
    margin-top: 22px;
}

.gallery-item {
    margin: 0;
}

.gallery-image {
    aspect-ratio: 624 / 753;
    overflow: hidden;
}

.gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.gallery-item:hover .gallery-image img {
    transform: scale(1.04);
}

.gallery-item figcaption {
    margin-top: 22px;
    padding: 0 40px;
    font-size: 16px;
    line-height: 24px;
    color: #666666;
    text-align: center;
}

/* ------------------------------------------------ construction page hero */

.construction-hero-section {
    background-image: url('../backgrounds/construction-hero-background.jpg');
}

.construction-hero-section .service-hero-inner {
    align-items: flex-start;
    min-height: 678px;
    padding: 107px 0 40px;
}

.construction-hero-title {
    margin: 0;
    padding-left: 20px;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    line-height: 56px;
    color: #ffffff;
    text-transform: uppercase;
    border-left: 2px solid var(--color-primary);
}

.construction-hero-title .highlight {
    display: block;
    color: var(--color-primary);
}

.construction-hero-section .projects-hero-subtitle {
    margin-top: 2px;
}

.construction-hero-description {
    max-width: 510px;
    margin-top: 10px;
}

.scope-list {
    display: grid;
    grid-template-columns: repeat(3, 200px);
    margin-top: 29px;
}

.scope-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 16px;
    color: #ffffff;
}

.scope-item strong {
    display: block;
    margin-bottom: 3px;
    font-size: 18px;
    font-weight: 800;
    line-height: 22px;
    text-transform: uppercase;
}

.scope-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 20px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    transition: background-color var(--transition-base) var(--easing);
}

.scope-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.scope-item:hover .scope-icon {
    background-color: var(--color-primary);
}

.construction-hero-section .projects-hero-actions {
    display: inline-grid;
    align-items: stretch;
    margin-top: 24px;
}

/* ------------------------------------------------------- service tabs */

.service-tabs-section {
    background-color: var(--color-dark);
}

.service-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 25px 0;
}

.service-tab {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    border: 1px solid #ffffff;
    border-radius: var(--radius-sm);
    transition: color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing);
}

.service-tab:hover,
.service-tab.is-active {
    color: var(--color-primary);
    background-color: #ffffff;
}

/* ----------------------------------------------------- categories */

.construction-categories-section {
    padding: 66px 0 60px;
}

.card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 31px;
    margin-top: 30px;
}

.media-card-lg {
    padding: 6px 6px 26px;
}

.media-card-lg .media-card-image {
    height: 260px;
    border-radius: var(--radius-md);
}

.media-card-lg .media-card-title {
    margin: 20px 0 6px;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
}

.media-card-lead {
    margin: 0 0 18px;
    font-size: 18px;
    line-height: 26px;
    color: var(--color-text);
    text-align: center;
}

.media-card-lg .media-card-text {
    padding: 0 22px;
    font-size: 15px;
    line-height: 22px;
    text-align: justify;
    color: #888888;
}

.media-card-lg:hover .media-card-text {
    color: var(--color-text);
}

.section-quote strong {
    font-weight: 700;
}

/* ----------------------------------------------------- process cards */

.construction-process-section {
    padding: 62px 0 61px;
}

.step-card-grid {
    gap: 32px;
    margin-top: 32px;
}

.step-card {
    padding: 22px 24px 28px;
    background-color: #ffffff;
    border: 1px solid #e1e1e1;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.step-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.step-card-number {
    display: block;
    font-family: var(--font-number);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary);
}

.step-card-title {
    margin: 16px 0 10px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 800;
    line-height: 28px;
    color: var(--color-text);
    transition: color var(--transition-base) var(--easing);
}

.step-card:hover .step-card-title {
    color: var(--color-primary);
}

.step-card-text {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #888888;
}

/* ---------------------------------------------------- quality control */

/* The photo collage on the right is part of the background image itself. */
.quality-section {
    padding: 70px 0 72px;
    background-color: #f3f7f6;
    background-image: url('../backgrounds/quality-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.quality-content {
    max-width: 517px;
}

.quality-content .section-title .highlight {
    display: block;
}

.quality-description {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
}

.quality-list {
    display: grid;
    gap: 15px;
    margin-top: 26px;
}

.quality-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 14px 12px 16px;
    background-color: #ffffff;
    border: 1px solid #e8eeec;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.quality-item:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
}

.quality-number {
    flex-shrink: 0;
    width: 46px;
    font-family: var(--font-number);
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-dark);
}

.quality-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 32px;
    color: var(--color-primary);
    background-color: #e8eeec;
    border-radius: 50%;
}

.quality-body {
    flex: 1;
    min-width: 0;
}

.quality-title {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
    color: var(--color-dark);
    text-transform: uppercase;
}

.quality-text {
    display: block;
    font-size: 15px;
    line-height: 22px;
    color: #888888;
}

.quality-arrow {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 13px;
    color: var(--color-primary);
    background-color: #c7e8c3;
    border-radius: 50%;
    transition: transform var(--transition-base) var(--easing),
        color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing);
}

.quality-icon img {
    width: 37px;
    height: 37px;
    object-fit: contain;
}

.quality-item:hover .quality-arrow {
    color: #ffffff;
    background-color: var(--color-primary);
    transform: translateX(3px);
}

/* ------------------------------------------------------ engineer team */

.engineer-team-section {
    padding: 98px 0 92px;
    background-color: var(--color-dark);
    background-image: url('../backgrounds/team-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.eyebrow-on-dark {
    color: #ffffff;
    font-size: 18px;
    text-transform: none;
}

.eyebrow-on-dark::before,
.eyebrow-on-dark::after {
    width: 60px;
    background-color: #ffffff;
}

.engineer-team-section .section-title {
    margin-top: 2px;
}

.engineer-team-section .section-quote {
    margin-top: 2px;
}

.engineer-grid {
    gap: 30px;
    margin-top: 32px;
}

.engineer-card {
    overflow: hidden;
    background-color: #1a5544;
    border-radius: var(--radius-md);
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.engineer-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}

.engineer-photo {
    height: 210px;
    overflow: hidden;
}

.engineer-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.engineer-card:hover .engineer-photo img {
    transform: scale(1.06);
}

.engineer-body {
    padding: 20px 23px 30px;
}

.engineer-name {
    margin: 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 32px;
    color: #ffffff;
}

.engineer-role {
    position: relative;
    margin: 2px 0 0;
    padding-bottom: 22px;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.engineer-role::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--color-primary);
}

.engineer-text {
    margin: 18px 0 0;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

/* --------------------------------------------------- projects listing */

.construction-projects-section {
    padding: 82px 0 60px;
}

.construction-projects-section .house-grid {
    margin-top: 40px;
}

.construction-projects-section .section-action-center {
    margin-top: 40px;
}

.section-quote-compact {
    max-width: 640px;
}

/* ------------------------------------------------ turnkey page: shared */

.button-outline {
    color: var(--color-primary);
    background-color: #ffffff;
    border: 1px solid var(--color-primary);
}

.button-outline:hover {
    color: #ffffff;
    background-color: var(--color-primary);
    transform: translateY(-2px);
}

.turnkey-hero-section {
    position: relative;
    background-image: url('../backgrounds/turnkey-hero-background.jpg');
}

.turnkey-hero-section .service-hero-inner {
    min-height: 678px;
    align-items: flex-start;
    padding: 0;
}

.turnkey-hero-action {
    position: absolute;
    bottom: 40px;
    left: 0;
}

.turnkey-intro-section .section-tag-plain {
    display: block;
    font-weight: 600;
}

.turnkey-intro-section .story-title .script-title {
    font-size: 88px;
    line-height: 1;
    text-align: center;
}

.turnkey-intro-section .story-title .display-title {
    font-size: 28px;
}

.turnkey-intro-section .story-gallery {
    grid-template-rows: 224px 224px;
    gap: 12px 30px;
}

.turnkey-intro-section .story-figure-tall img {
    object-position: 62% center;
}

.story-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 28px;
}

.story-actions .button {
    height: 50px;
    padding: 0 21px;
}

/* ------------------------------------------------------- concerns slider */

.concerns-section {
    padding: 84px 0 70px;
    color: #ffffff;
    background-color: var(--color-dark-deep);
    background-image: linear-gradient(rgba(13, 59, 47, 0.55), rgba(13, 59, 47, 0.55)),
        url('../backgrounds/homeowner-concerns-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.concerns-subtitle {
    margin: 4px 0 0;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
}

/* Cards are stacked on the centre line and pushed outwards by their distance
   from the middle pair, so the carousel can wrap without re-laying anything. */
.concerns-slider {
    margin-top: 20px;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.concerns-slider.is-dragging {
    cursor: grabbing;
}

.concerns-track {
    display: grid;
    justify-items: center;
    align-items: center;
}

.concern-card {
    --side: 1;
    --offset: 168px;
    --scale: 1;
    grid-area: 1 / 1;
    z-index: 3;
    width: 296px;
    opacity: 1;
    transform: translateX(calc(var(--side) * var(--offset))) scale(var(--scale));
    transition: transform var(--transition-slow) var(--easing),
        opacity var(--transition-slow) var(--easing);
}

.concern-card[data-side="-1"] {
    --side: -1;
}


.concern-card[data-distance="1"] {
    --offset: 476px;
    --scale: 0.8;
    z-index: 2;
    opacity: 0.7;
}

.concern-card[data-distance="2"] {
    --offset: 730px;
    --scale: 0.6;
    z-index: 1;
    opacity: 0.45;
}

.concern-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    margin-bottom: 14px;
}

.concern-card-head img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.concern-card-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
}

.concern-card-body {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.concern-card-image {
    height: 200px;
    margin: 0;
    overflow: hidden;
}

.concern-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.concern-checklist {
    display: grid;
    gap: 14px;
    padding: 16px 16px 20px;
}

.concern-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.concern-checklist i {
    flex-shrink: 0;
    margin-top: 4px;
    font-size: 16px;
    color: var(--color-primary);
}

.concerns-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

/* ------------------------------------------------------------- solution */

.turnkey-solution-section {
    padding: 70px 0 60px;
}

.solution-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 628px;
    gap: 28px;
    align-items: center;
}

.solution-content {
    max-width: 630px;
}

.solution-title-line {
    display: block;
}

.solution-subtitle {
    margin: 14px 0 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-dark);
}

.solution-text {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    color: var(--color-dark);
}

.solution-video {
    height: 350px;
    border-radius: 0;
}

/* ------------------------------------------------------------- packages */

.turnkey-packages-section {
    padding: 66px 0 60px;
}

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.package-card {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 508px;
    overflow: hidden;
}

.package-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.package-card:hover img {
    transform: scale(1.05);
}

.package-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 55%);
}

.package-card-title {
    position: relative;
    z-index: 1;
    margin: 0 28px 24px;
    padding: 0 5px 14px 16px;
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    transition: color var(--transition-base) var(--easing);
}

.package-card:hover .package-card-title {
    color: var(--color-mint-strong);
}

.note-panel {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 34px;
    padding: 24px 36px;
    background-color: var(--color-surface-muted);
    border-radius: var(--radius-lg);
}

.note-panel-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 20px;
    color: #ffffff;
    background-color: var(--color-dark);
    border-radius: 50%;
}

.note-panel-text {
    margin: 0;
    font-size: 20px;
    line-height: 31px;
    color: var(--color-dark);
}

/* ---------------------------------------------------------------- scope */

.turnkey-scope-section {
    padding: 40px 0 50px;
}

.process-layout-scope .process-list {
    height: 520px;
}

.process-layout-scope .process-step {
    height: 75px;
    gap: 16px;
    padding: 0 16px;
}

.process-layout-scope .process-step-number {
    width: 52px;
    height: 52px;
    font-size: 26px;
}

.process-layout-scope .process-step-title {
    margin-bottom: 2px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 22px;
    color: var(--color-dark);
    text-transform: uppercase;
}

.process-layout-scope .process-step-description {
    font-size: 15px;
    line-height: 20px;
}

.process-figure-copy {
    flex: 1;
    min-width: 0;
}

.process-figure-title {
    display: block;
    margin-bottom: 4px;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
}

.process-layout-scope .process-figure-overlay {
    padding: 18px 24px;
}

.process-layout-scope .process-figure-text {
    font-size: 17px;
    font-weight: 600;
}

.process-layout-scope .process-figure .button-primary {
    height: 40px;
    padding: 0 14px;
    font-size: 16px;
    text-transform: none;
}

.process-figure-number {
    flex-shrink: 0;
    font-family: var(--font-number);
    font-size: 64px;
    font-weight: 400;
    line-height: 1;
    color: #ffffff;
}

.process-layout-commitment .process-step-number {
    font-size: 40px;
}

.process-layout-commitment .process-step:not(.is-active) .process-step-number {
    font-weight: 400;
}

.process-layout-commitment .process-step-title {
    margin-bottom: 2px;
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 22px;
    color: var(--color-dark);
    text-transform: uppercase;
}

.process-layout-commitment .process-step-description {
    font-size: 15px;
    line-height: 20px;
}

.process-layout-commitment .process-figure-overlay {
    padding: 14px 16px;
}

.process-layout-commitment .process-figure-title {
    font-size: 20px;
}

.process-layout-commitment .process-figure-text {
    font-size: 17px;
    font-weight: 600;
}

.process-layout-commitment .process-figure .button-primary {
    height: 40px;
    padding: 0 14px;
    font-size: 16px;
}

.turnkey-commitment-section {
    padding: 60px 0 70px;
}

/* -------------------------------------------------------------- process */

.turnkey-process-section {
    padding: 86px 0 75px;
    background-color: #ffffff;
    background-image: url('../backgrounds/turnkey-process-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.turnkey-step-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px 32px;
    margin-top: 40px;
}

.turnkey-step-number {
    display: block;
    padding-bottom: 8px;
    font-family: var(--font-number);
    font-size: 40px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-dark);
    border-bottom: 1px solid #c8d0cd;
    transition: color var(--transition-base) var(--easing),
        border-color var(--transition-base) var(--easing);
}

.turnkey-step:hover .turnkey-step-number {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.turnkey-step-title {
    max-width: 280px;
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: var(--color-dark);
}

.turnkey-process-section .section-action-center {
    margin-top: 40px;
}

/* ------------------------------------------------------------ assurance */

.progress-assurance-section {
    padding: 52px 0 60px;
}

.progress-assurance-section .section-title {
    margin-top: 8px;
}

.expand-grid {
    display: flex;
    height: 607px;
    margin-top: 36px;
}

.expand-panel {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    min-width: 0;
    overflow: hidden;
    color: #ffffff;
    cursor: pointer;
    transition: flex-grow var(--transition-slow) var(--easing);
}

.expand-panel.is-active {
    flex-grow: 1.51;
}

.expand-panel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.expand-panel::before,
.expand-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.expand-panel::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 59%, #000000 100%);
}

.expand-panel::after {
    background: linear-gradient(to top, rgba(19, 80, 64, 0.95), rgba(19, 80, 64, 0.7) 35%, rgba(19, 80, 64, 0) 62%);
    opacity: 0;
    transition: opacity var(--transition-slow) var(--easing);
}

.expand-panel.is-active::after {
    opacity: 1;
}

.expand-panel-body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 24px 28px;
}

.expand-panel-number {
    display: block;
    font-family: var(--font-number);
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
}

.expand-panel-title {
    margin: 6px 0 0;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
    text-transform: uppercase;
}

.expand-panel-text {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 24px;
    opacity: 0;
    transition: opacity var(--transition-base) var(--easing),
        max-height var(--transition-slow) var(--easing);
}

.expand-panel.is-active .expand-panel-text {
    max-height: 140px;
    margin-top: 10px;
    opacity: 1;
}

/* -------------------------------------------------------------- pricing */

.turnkey-pricing-section {
    padding: 40px 0 60px;
}

.price-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    align-items: center;
    margin-top: 30px;
}

.price-card {
    padding: 30px 25px;
    color: var(--color-dark);
    background-color: #e8eeec;
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
}

.price-card-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
}

.price-card-description {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

.price-card-rates {
    margin: 24px 0 0;
}

.price-card-rate+.price-card-rate {
    margin-top: 20px;
}

.price-card-rate dt {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}

.price-card-rate dd {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
}

.price-card-rate+.price-card-rate dd {
    font-size: 24px;
}

.price-card-action {
    display: flex;
    width: fit-content;
    height: 50px;
    margin: 24px auto 0;
    padding: 0 21px;
}

.price-card-featured {
    padding-top: 36px;
    padding-bottom: 38px;
    color: #ffffff;
    background-color: var(--color-dark);
}

.price-card-featured .price-card-title {
    font-size: 32px;
}

.price-card-featured .price-card-description {
    position: relative;
    padding-bottom: 15px;
    font-size: 18px;
}

.price-card-featured .price-card-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 144px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.7);
    transform: translateX(-50%);
}

/* ------------------------------------------------------------- projects */

.turnkey-projects-section {
    padding-top: 40px;
}

.turnkey-projects-section .house-card-image,
.about-projects-section .house-card-image {
    border-radius: 15px;
}

/* ---------------------------------------------------------- about page */

.eyebrow-small {
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
}

.eyebrow-small.eyebrow-center::before,
.eyebrow-small.eyebrow-center::after {
    width: 26px;
    background-color: var(--color-primary);
}

.section-quote-muted {
    color: #6b7a75;
}

.about-hero-section {
    background-image: url('../backgrounds/about-hero-background.jpg');
}

.about-hero-section .service-hero-inner {
    align-items: flex-start;
    min-height: 679px;
    padding: 0;
}

.about-hero-content {
    max-width: 720px;
    padding-top: 100px;
}

.about-hero-title {
    margin: 0;
}

.about-hero-title .script-title {
    font-size: 125px;
}

.about-hero-title-accent {
    margin: 12px 0 0 92px;
}

.about-hero-lead {
    margin: 30px 0 0;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
}

.about-hero-text {
    max-width: 480px;
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 30px;
    color: #ffffff;
}

.about-hero-content .button {
    margin-top: 22px;
}

.about-story-section {
    padding: 66px 0 60px;
}

.about-story-layout {
    display: grid;
    grid-template-columns: 624px minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.about-story-gallery {
    grid-template-rows: 277px 277px;
}

.about-story-gallery .story-figure-tall img {
    object-position: 72% center;
}

.about-story-heading {
    margin: 22px 0 14px;
    font-family: var(--font-body);
    font-size: 24px;
    font-style: italic;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-dark);
}

.about-story-text {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 28px;
    text-align: justify;
    color: var(--color-text);
}

.about-story-text strong {
    font-weight: 800;
}

.about-story-signature {
    margin: 26px 0 0;
}

.about-story-signature .script-title {
    font-size: 104px;
    text-align: center;
}

.about-story-signature .display-title {
    display: block;
    margin-top: 8px;
    font-size: 30px;
    text-align: center;
    color: var(--color-dark);
}

.about-video {
    aspect-ratio: 16 / 9;
    height: auto;
    margin-top: 50px;
}

.about-philosophy-section {
    padding: 110px 0 90px;
    background-color: #eef6fb;
    background-image: url('../backgrounds/philosophy-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about-philosophy-content {
    max-width: 840px;
}

.about-philosophy-content .section-title {
    font-family: var(--font-body);
}

.about-philosophy-bar {
    display: inline-block;
    margin: 14px 0 30px;
    padding: 0 30px 0 20px;
    font-size: 30px;
    font-weight: 400;
    line-height: 48px;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: 0px 23px 23px 0px;
}

.about-philosophy-quote {
    margin: 0;
    padding-left: 40px;
    font-size: 18px;
    line-height: 30px;
}

.about-philosophy-quote p {
    margin: 0 0 12px;
}

.about-philosophy-quote strong {
    font-weight: 800;
}

.about-values-section {
    padding: 56px 0 60px;
}

.about-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-value {
    padding: 0 40px;
    text-align: center;
}

.about-value+.about-value {
    background: url('../backgrounds/column-divider.png') left center / auto 100% no-repeat;
}

.about-value-icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 80px;
    transition: transform var(--transition-base) var(--easing);
}

.about-value-icon img {
    max-height: 100%;
    width: auto;
}

.about-value:hover .about-value-icon {
    transform: translateY(-4px);
}

.about-value-title {
    margin: 30px 0 22px;
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 800;
    line-height: 28px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.about-value-text {
    margin: 0;
    font-size: 18px;
    line-height: 30px;
}

.about-value-text strong,
.about-value-items strong {
    font-weight: 800;
}

.about-value-items {
    text-align: left;
}

.about-value-items li {
    font-size: 17px;
    line-height: 28px;
}

.about-value-items li+li {
    margin-top: 14px;
}

.about-principles-section {
    padding: 78px 0 80px;
    background-color: #ffffff;
    background-image: url('../backgrounds/principles-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 35px;
    margin-top: 40px;
}

.principle-card-offset {
    grid-column: 2;
}

.principle-card {
    min-height: 226px;
    padding: 22px 22px 20px;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.principle-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}

.principle-card-number {
    display: block;
    font-family: var(--font-number);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary);
}

.principle-card-title {
    margin: 14px 0 8px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text);
    text-transform: uppercase;
    transition: color var(--transition-base) var(--easing);
}

.principle-card:hover .principle-card-title {
    color: var(--color-primary);
}

.principle-card-text {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #888888;
}

.about-fields-section {
    padding: 70px 0 60px;
}

.about-fields-section .section-title {
    margin-top: 6px;
}

.about-team-section {
    padding: 50px 0 60px;
}

.about-team-title .script-title {
    font-size: 110px;
    text-align: center;
}

.about-team-title .display-title {
    display: block;
    margin-top: 6px;
}

.about-team-title .highlight {
    color: var(--color-primary);
}

.team-collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, 274px);
    gap: 30px;
    margin-top: 40px;
}

.team-collage-item {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 15px;
}

.team-collage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.team-collage-item:hover img {
    transform: scale(1.05);
}

.team-collage-b {
    grid-column: 2;
    grid-row: 1 / 3;
}

.team-collage-c {
    grid-column: 3;
    grid-row: 1;
}

.team-collage-d {
    grid-column: 1;
    grid-row: 2;
}

.team-collage-e {
    grid-column: 3;
    grid-row: 2 / 4;
}

.team-collage-f {
    grid-column: 1 / 3;
    grid-row: 3;
}

.about-certification-section {
    padding: 76px 0 70px;
    background-color: #f3f6f5;
    background-image: url('../backgrounds/about-certification-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.about-certification-section .section-title {
    margin-top: 6px;
}

.about-certification-wrap {
    margin-top: 36px;
}

.about-certification-pagination {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

.about-projects-section {
    padding: 60px 0 70px;
}

.about-projects-subtitle {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
    color: var(--color-primary);
    text-transform: uppercase;
}

.about-projects-section .house-grid {
    margin-top: 40px;
}

.about-projects-section .section-action-center {
    margin-top: 40px;
}

/* ------------------------------------------------------------- lightbox */

.certificate-figure {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base) var(--easing),
        visibility var(--transition-base) var(--easing);
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background-color: #ffffff;
    transform: scale(0.94);
    transition: transform var(--transition-base) var(--easing);
}

.lightbox.is-open .lightbox-image {
    transform: none;
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 24px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--transition-base) var(--easing);
}

.lightbox-close:hover {
    background-color: var(--color-primary);
}

body.lightbox-open {
    overflow: hidden;
}
/* ---------------------------------------------------- feng shui page */

.feng-shui-hero-section {
    background-image: url('../backgrounds/feng-shui-hero-background.jpg');
}

.feng-shui-hero-section .service-hero-inner {
    align-items: flex-start;
    min-height: 568px;
    padding: 187px 0 60px;
}

.feng-shui-hero-title {
    margin: 10px 0 0;
    font-family: var(--font-body);
    font-size: 40px;
    font-weight: 800;
    line-height: 1.4;
    color: #ffffff;
    text-transform: uppercase;
}

.feng-shui-hero-title .highlight {
    display: block;
    color: var(--color-primary);
}

.feng-shui-hero-description {
    max-width: 420px;
    margin-top: 16px;
    font-size: 18px;
    line-height: 25px;
}

.benefit-section {
    background-color: #f7f7f7;
}

.benefit-list {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 20px 30px;
    padding: 25px 0;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.benefit-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    transition: transform var(--transition-base) var(--easing);
}

.benefit-item:hover .benefit-icon {
    transform: translateY(-3px);
}

.benefit-title {
    display: block;
    font-size: 18px;
    font-weight: 800;
    line-height: 24px;
    color: var(--color-dark);
}

.benefit-text {
    display: block;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-text);
}

.feng-shui-posts-section {
    padding: 50px 0 60px;
}

.feng-shui-posts-section .section-title {
    margin-top: 6px;
}

.feng-shui-posts-section .pill-list {
    margin-top: 28px;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px 25px;
    margin-top: 40px;
}

.post-card {
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: transform var(--transition-base) var(--easing),
        box-shadow var(--transition-base) var(--easing);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.post-card[hidden] {
    display: none;
}

.post-card-image {
    display: block;
    height: 218px;
    overflow: hidden;
}

.post-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.post-card:hover .post-card-image img {
    transform: scale(1.06);
}

.post-card-body {
    padding: 20px 17px 22px;
}

.post-card-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.post-card-label::before {
    content: '';
    width: 24px;
    height: 2px;
    background-color: var(--color-primary);
}

.post-card-title {
    margin: 5px 0 0;
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 800;
    line-height: 26px;
}

.post-card-title a {
    color: var(--color-dark);
    transition: color var(--transition-base) var(--easing);
}

.post-card:hover .post-card-title a {
    color: var(--color-primary);
}

.post-card-text {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 20px;
    color: #888888;
}

.feng-shui-posts-section .pagination-list {
    margin-top: 28px;
}

.feng-shui-knowledge-section {
    padding: 60px 0 70px;
    background-color: #f3f3f3;
    background-image: url('../backgrounds/feng-shui-knowledge-background.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.feng-shui-knowledge-subtitle {
    margin: 8px 0 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.4;
    text-align: center;
    color: var(--color-primary);
}

.bagua-layout {
    display: grid;
    grid-template-columns: 500px minmax(0, 1fr);
    gap: 60px;
    align-items: center;
    margin-top: 30px;
}

.bagua-figure {
    margin: 0;
}

.bagua-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.bagua-content p {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 25px;
    text-align: justify;
    color: var(--color-text);
}

.bagua-content p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------- company profile */

.profile-hero-section {
    position: relative;
    background-color: var(--color-dark-deep);
    background-image: url('../backgrounds/profile-hero-background.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

.profile-hero-inner {
    position: relative;
    min-height: 859px;
}

.profile-hero-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px 0 22px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
}

.profile-hero-caption .eyebrow {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
}

.profile-hero-caption .eyebrow-small.eyebrow-center::before,
.profile-hero-caption .eyebrow-small.eyebrow-center::after {
    width: 26px;
}

.profile-hero-title {
    margin: 4px 0 0;
    font-family: var(--font-body);
    font-size: 48px;
    font-weight: 800;
    line-height: 1.3;
    color: #ffffff;
    text-transform: uppercase;
}

.profile-content-section {
    padding: 40px 0 0;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 338px;
    gap: 24px;
    align-items: start;
}

.profile-heading {
    margin: 0;
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-dark);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 12px;
}

.share-list {
    display: flex;
    gap: 8px;
}

.share-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 13px;
    color: var(--color-dark);
    background-color: #e1e6e4;
    border-radius: 3px;
    transition: color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing);
}

.share-list a:hover {
    color: #ffffff;
    background-color: var(--color-primary);
}

.profile-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: var(--color-dark);
}

.note-box {
    margin: 14px 0 0;
    padding: 14px 21px;
    font-size: 16px;
    font-weight: 600;
    line-height: 23px;
    text-align: justify;
    color: var(--color-dark);
    background-color: #eceeed;
}

.download-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    padding: 9px 21px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    border: 1px solid var(--color-dark);
    transition: color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing);
}

.download-bar i {
    font-size: 22px;
    color: var(--color-primary);
    transition: color var(--transition-base) var(--easing);
}

.download-bar:hover {
    color: #ffffff;
    background-color: var(--color-dark);
}

.download-bar:hover i {
    color: #ffffff;
}

.profile-text {
    margin-top: 30px;
}

.profile-text-heading {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text);
}

.profile-text p {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 23px;
    color: var(--color-text);
}

.profile-sidebar {
    display: grid;
    gap: 14px;
}

.support-box {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 22px 10px 24px;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: 8px;
}

.support-box-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
}

.support-box-label {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
}

.support-box-phone {
    display: block;
    font-family: var(--font-body);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.sidebar-form {
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--color-dark);
    border-radius: 8px;
}

.sidebar-form-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.5;
    color: #ffffff;
    background-color: var(--color-dark);
}

.sidebar-form-body {
    display: grid;
    gap: 10px;
    padding: 16px 12px 12px;
}

.sidebar-form-body .form-control {
    height: 38px;
    padding: 0 13px;
    font-size: 14px;
    color: var(--color-text);
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
}

.sidebar-form-body .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: none;
}

.sidebar-form-body textarea.form-control {
    height: 98px;
    padding-top: 10px;
    resize: none;
}

.sidebar-form-submit {
    width: 100%;
    height: 44px;
    font-size: 18px;
}

.sidebar-banner {
    display: block;
    overflow: hidden;
}

.sidebar-banner img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--transition-slow) var(--easing);
}

.sidebar-banner:hover img {
    transform: scale(1.04);
}

.profile-viewer-heading {
    margin: 50px 0 18px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text);
}

.profile-viewer {
    background-color: #4d4d4d;
}

.profile-viewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 80px 20px;
}

.profile-book {
    width: min(100%, 1280px);
    height: 905px;
}

.viewer-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 26px;
    color: #ffffff;
    background: transparent;
    border: 0;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color var(--transition-base) var(--easing);
}

.viewer-arrow:hover {
    color: var(--color-primary);
}

.viewer-arrow-prev {
    left: 14px;
}

.viewer-arrow-next {
    right: 14px;
}

.profile-toolbar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 24px 18px;
    color: #ffffff;
}

.toolbar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    color: #ffffff;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--transition-base) var(--easing);
}

.toolbar-button:hover {
    color: var(--color-primary);
}

.toolbar-counter {
    min-width: 48px;
    font-size: 14px;
}

.toolbar-range {
    flex: 1;
    height: 4px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.profile-viewer:fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-viewer:fullscreen .profile-book {
    height: calc(100vh - 140px);
}

/* ------------------------------------------------------------ team page */

.team-hero-section {
    background-image: url('../backgrounds/profile-hero-background.jpg');
}

.charity-section {
    padding: 56px 0 40px;
}

.charity-collage {
    position: relative;
    width: 1000px;
    max-width: 100%;
    aspect-ratio: 2570 / 2180;
    margin: 36px auto 0;
}

.charity-tile {
    position: absolute;
    top: var(--t);
    left: var(--l);
    width: var(--w);
    height: var(--h);
    margin: 0;
    overflow: hidden;
    cursor: zoom-in;
}

.charity-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.charity-tile:hover img {
    transform: scale(1.08);
}

.zoom-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 16px;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.charity-tile:hover .zoom-badge,
.customer-tile:hover .zoom-badge,
.team-collage-item:hover .zoom-badge,
.team-figure:hover .zoom-badge,
[data-zoom]:focus-visible .zoom-badge {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

[data-zoom] {
    cursor: zoom-in;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 22px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.15);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--transition-base) var(--easing);
}

.lightbox-nav:hover {
    background-color: var(--color-primary);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-count {
    position: absolute;
    bottom: 16px;
    left: 50%;
    font-size: 15px;
    color: #ffffff;
    transform: translateX(-50%);
}

.customer-focus-section {
    padding: 40px 0 50px;
}

.customer-focus-section .section-title,
.team-values-section .section-title,
.team-culture-section .section-title {
    font-size: 36px;
}

.customer-mosaic {
    position: relative;
    aspect-ratio: 1000 / 688;
    margin-top: 40px;
}

.customer-tile {
    position: absolute;
    top: var(--t);
    left: var(--l);
    width: var(--w);
    height: var(--h);
    margin: 0;
    overflow: hidden;
}

.customer-tile .zoom-badge {
    z-index: 1;
}

.customer-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.customer-tile:hover img {
    transform: scale(1.06);
}

.team-values-section {
    padding: 40px 0 50px;
}

.team-culture-section {
    padding: 40px 0 70px;
}

.team-culture-section .about-video {
    margin-top: 40px;
}

.team-culture-section .post-grid {
    margin-top: 40px;
}

.post-card-centered .post-card-body {
    padding: 22px 17px 24px;
}

.post-card-centered .post-card-title {
    font-size: 20px;
    line-height: 28px;
    text-align: center;
}

.post-card-centered .post-card-text {
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
}

.team-culture-section .pagination-list {
    margin-top: 28px;
}

/* ------------------------------------------------------------- articles */

.articles-hero-section {
    background-image: linear-gradient(rgba(13, 80, 60, 0.62), rgba(13, 80, 60, 0.62)),
        url('../backgrounds/turnkey-hero-background.jpg');
}

.articles-hero-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 348px;
    padding: 50px 0 40px;
}

.articles-hero-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff;
    text-transform: uppercase;
}

.article-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 42px;
}

.article-tab {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    background-color: #ffffff;
    border-radius: var(--radius-sm);
    transition: color var(--transition-base) var(--easing),
        background-color var(--transition-base) var(--easing),
        transform var(--transition-base) var(--easing);
}

.article-tab:hover,
.article-tab.is-active {
    color: #ffffff;
    background-color: var(--color-primary);
}

.article-tab:hover {
    transform: translateY(-2px);
}

.articles-featured-section {
    padding: 30px 0 40px;
}

.articles-featured-section .knowledge-layout {
    margin-top: 0;
}

.articles-list-section {
    padding: 52px 0 70px;
}

.articles-list-section .post-card-body {
    padding: 20px 17px 22px;
}

.articles-list-section .pagination-list {
    margin-top: 40px;
}

/* -------------------------------------------------------- article detail */

.article-tab i {
    margin-right: 8px;
    font-size: 16px;
}

.detail-section {
    padding: 52px 0 70px;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 844px) 407px;
    gap: 29px;
    align-items: start;
}

.detail-article .profile-heading {
    font-size: 32px;
    line-height: 1.25;
}

.note-box-light {
    margin-top: 0;
    padding: 14px 27px;
    font-weight: 400;
    background-color: #e8eeec;
}

.detail-heading {
    margin: 26px 0 12px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-text);
}

.detail-text {
    margin: 0;
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
    color: var(--color-text);
}

.detail-list-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 8px;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 800;
    color: var(--color-text);
}

.detail-list-title i {
    font-size: 6px;
}

.table-scroll {
    overflow-x: auto;
}

.quote-table {
    width: 100%;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #dcdcdc;
}

.quote-table th,
.quote-table td {
    padding: 4px 6px;
    border: 1px solid #dcdcdc;
}

.quote-table thead th {
    font-weight: 800;
}

.quote-table-type,
.quote-table tbody th {
    text-align: left;
    font-weight: 400;
}

.quote-table-type {
    font-weight: 800;
}

.quote-table-note {
    margin: 0;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 22px;
    border: 1px solid #dcdcdc;
    border-top: 0;
}

.design-price {
    margin-top: 24px;
}

.design-price-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.design-price-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-dark);
    text-transform: uppercase;
}

.design-price-badge {
    flex-shrink: 0;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    background-color: var(--color-dark);
}

.design-price-table {
    width: 100%;
    font-size: 15px;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid var(--color-dark);
}

.design-price-table th,
.design-price-table td {
    height: 46px;
    padding: 2px 6px;
    border: 1px solid var(--color-dark);
}

.design-price-table th[scope="row"] {
    width: 27%;
    font-weight: 800;
    text-align: left;
    color: var(--color-dark);
}

.design-price-table thead th,
.design-price-row th,
.design-price-row td {
    font-weight: 800;
    color: #ffffff;
    background-color: var(--color-dark);
}

.design-price-table thead th {
    font-size: 13px;
}

.design-price-table thead th:first-child {
    text-align: left;
}

.design-price-row th[scope="row"] {
    color: #ffffff;
    font-size: 17px;
}

.design-price-table td .fa-check {
    font-size: 20px;
    color: var(--color-dark);
}

.design-price-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-dark);
    border-top: 0;
}

.design-price-note {
    position: relative;
}

.design-price-note+.design-price-note {
    border-left: 1px solid var(--color-dark);
}

.design-price-note-title {
    margin: 0;
    padding: 10px 12px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    color: #ffffff;
    background-color: var(--color-dark);
}

.design-price-note-list {
    padding: 14px 12px 14px 28px;
    list-style: disc;
    font-size: 12px;
    line-height: 17px;
    color: var(--color-text);
}

.design-price-note-list li+li {
    margin-top: 8px;
}

.design-price-book {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 135px;
    height: auto;
}

.design-price-note:first-child .design-price-note-list {
    padding-bottom: 80px;
}

.detail-figure {
    margin: 36px 0 0;
}

.detail-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.related-section {
    margin-top: 40px;
}

.related-title {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-dark);
    border-bottom: 1px solid #e1e1e1;
}

.related-title span {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 3px solid var(--color-dark);
    margin-bottom: -1px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 15px;
}

.related-card-image {
    display: block;
    height: 118px;
    overflow: hidden;
}

.related-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.related-card:hover .related-card-image img {
    transform: scale(1.06);
}

.related-card-title {
    margin: 10px 0 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    line-height: 25px;
}

.related-card-title a {
    color: var(--color-dark);
    transition: color var(--transition-base) var(--easing);
}

.related-card:hover .related-card-title a {
    color: var(--color-primary);
}

.detail-sidebar {
    display: grid;
    gap: 28px;
}

.detail-form .sidebar-form-title {
    padding: 14px 20px;
    font-size: 22px;
}

.detail-form .sidebar-form-body {
    gap: 9px;
    padding: 18px 11px 13px;
}

.budget-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    margin: 18px 0 0;
    padding: 0 0 0 4px;
    border: 0;
}

.budget-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--color-text);
    cursor: pointer;
}

.budget-option input {
    accent-color: var(--color-primary);
}

.featured-posts .related-title {
    margin-bottom: 14px;
}

.featured-post-list {
    display: grid;
    gap: 16px;
}

.featured-post {
    display: grid;
    grid-template-columns: 146px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.featured-post-image {
    display: block;
    height: 82px;
    overflow: hidden;
}

.featured-post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow) var(--easing);
}

.featured-post:hover .featured-post-image img {
    transform: scale(1.06);
}

.featured-post-title {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    line-height: 19px;
}

.featured-post-title a {
    color: var(--color-dark);
    transition: color var(--transition-base) var(--easing);
}

.featured-post:hover .featured-post-title a {
    color: var(--color-primary);
}

.featured-post-date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 14px;
    color: #888888;
}

/* ------------------------------------------------------------ contact page */

.contact-hero-section {
    background-image: linear-gradient(rgba(19, 80, 64, 0.55), rgba(19, 80, 64, 0.55)),
        url('../backgrounds/contact-hero-background.jpg');
    background-position: center;
}

.contact-page-section {
    padding: 56px 0 70px;
}

.contact-page-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    align-items: start;
}

.contact-info-heading {
    margin: 0 0 20px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.4;
    color: var(--color-dark);
    text-transform: uppercase;
    border-bottom: 1px solid #e1e1e1;
}

.contact-info-heading span {
    display: inline-block;
    padding-bottom: 6px;
    margin-bottom: -1px;
    border-bottom: 3px solid var(--color-dark);
}

.contact-info-company {
    margin: 0 0 18px;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-primary);
    text-transform: uppercase;
}

.contact-info-list {
    display: grid;
    gap: 14px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.contact-info-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 15px;
    color: var(--color-dark);
    background-color: #e1e6e4;
    border-radius: 50%;
}

.contact-info-text {
    font-size: 16px;
    line-height: 22px;
    color: var(--color-text);
}

.contact-info-text strong {
    font-weight: 800;
}

.contact-info-map {
    display: block;
    margin-top: 28px;
    overflow: hidden;
}

.contact-info-map img {
    display: block;
    width: 100%;
    height: auto;
}

.contact-form-lead {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--color-text);
}

.contact-form-card .sidebar-form-title {
    text-transform: uppercase;
}