/* =========================================================
   VILLA NOVA MIMIZAN
   MAIN STYLESHEET
========================================================= */


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #f8f7f4;
    color: #20211f;

    font-family: "Inter", Arial, sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

img {
    display: block;
    max-width: 100%;
}

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

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

button {
    cursor: pointer;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}


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

:root {

    --background: #f8f7f4;
    --background-dark: #eeeae2;

    --black: #20211f;
    --black-soft: #2a2b28;

    --text: #292a27;
    --text-soft: #6d6e68;

    --white: #ffffff;

    --line: #d5d1c9;

    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Inter", Arial, sans-serif;

    --container: 84vw;

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


/* =========================================================
   GLOBAL
========================================================= */

body {
    font-family: Inter, Arial, sans-serif;
    /* Empeche la selection */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
}

.section {
    width: 100%;
    padding: 130px 7vw;
}

.section h2 {
    font-size: clamp(48px, 5vw, 78px);
    margin: 20px 0 30px;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 500;
    line-height: .98;
    letter-spacing: -.02em;
}
.future p {
    color: #62635e;
    line-height: 1.65;
    font-size: 13px;
}

.wide {
    height: 620px;
    max-width: 1250px;
    margin: 80px auto 0px;
}
.wideshort {
    max-width: 1250px;
    margin: 80px auto 0px;
}
.widesimple {
    max-width: 1250px;
    margin: auto;
}
.widetext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9vw;
    max-width: 1250px;
    margin: auto;
}

.centre {
    max-width: 1250px;
    margin: auto;
}

.dark {
    background: #1d2421;
    color: #f8f7f4;
}
.beige{background:#ebe9e2}

/*.heroText>small, .heading>small, .section>small, .future>div>small {
    font-size: 10px;
    letter-spacing: .25em;
    font-weight: 600;
}*/
.note {
    font-size: 10px !important;
    border-left: 2px solid #aaa;
    padding-left: 12px;
}

.simplewide {
    max-width: 1250px;
    margin: auto;
    margin-right: 100px;
}
.heading p {
    max-width: 650px;
    color: #b8bbb4;
}

.loc, .future, .future-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9vw;
    max-width: 1250px;
    margin: auto;
}
.future-section {
    max-width: unset;
}
.future-section ul li {
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.8;
}

.loc>.ph {
    height: 550px;
}
.ph b {
    font-size: 9px;
    letter-spacing: .2em;
}
.ph strong {
    font: 13px monospace;
    margin-top: 7px;
}
.ph span {
    font-size: 11px;
    max-width: 380px;
    line-height: 1.4;
    margin-top: 8px;
    color: #6d6e68;
}

.facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.facts b {
    font: 400 50px "Cormorant Garamond", serif;
}
.facts div, .location-facts div {
    border-top: 1px solid #fff2;
    border-bottom: 1px solid #fff2;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.facts div:nth-child(odd), .location-facts div:nth-child(odd) {
    border-right: 1px solid #fff2;
}
.facts span {
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .65;
}

.ph {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(85, 86, 80);
    background: linear-gradient(135deg, rgb(228, 225, 217), rgb(208, 206, 199));
    /*border-width: 1px;
    border-style: dashed;
    border-color: rgb(153, 151, 143);
    border-image: none;*/
    padding: 25px;
}

.phwhite {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: rgb(85, 86, 80);
    padding: 25px;
}

.stats{position:absolute;z-index:2;right:5vw;bottom:35px;color:#fff;display:flex;gap:30px}
.stats span{display:flex;flex-direction:column;font-size:9px;text-transform:uppercase;letter-spacing:.13em;opacity:.8}
.stats b{font:500 29px "Cormorant Garamond",serif;color:#fff;opacity:1}

.dark-section {
    background: var(--black);
    color: white;
}

.beige-section {
    background: var(--background-dark);
}

.eyebrow {
    display: block;

    font-family: var(--sans);
    font-size: 9px;
    font-weight: 500;

    letter-spacing: .2em;
    line-height: 1.4;

    text-transform: uppercase;
}

.dark-eyebrow {
    color: #686963;
}

.section-heading {
    max-width: 900px;
    margin-bottom: 70px;
}

.section-heading.emplacement, .section-heading.prestations {
    max-width: 1250px;
    margin: auto;
    margin-bottom: 70px;
}

.location-bottom.emplacement {
    max-width: 1250px;
    margin: 55px auto 0;
}

.section-heading.centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.section-heading h2,
.section-intro h2,
.project-intro h2,
.future-project-text h3,
.details-layout h2,
.closing-content h2 {
    margin: 18px 0 25px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(50px, 6vw, 84px);
    line-height: .9;
    letter-spacing: -.025em;
    text-shadow: none;
}

.section-heading h2 em,
.section-intro h2 em,
.project-intro h2 em,
.future-project-text h3 em,
.details-layout h2 em,
.closing-content h2 em {
    font-style: italic;
    font-weight: 400;
}

.section-heading p {
    max-width: 650px;
    margin: 0;
    /*color: var(--text-soft);*/
    font-size: 13px;
    line-height: 1.8;
}
.house-section .section-heading p, .exterior-section .section-heading p, .day-night-section .section-heading p {
    margin: 0 auto;
}

.dark-section .section-heading p {
    color: rgba(255,255,255,.65);
}



/* =========================================================
   IMAGES
========================================================= */


img:not(.hero img, .ai-watermark-image) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    position: absolute;
}
.hero img {
    height: 100vh !important;
}

.before-after-slider img,
.day-night-slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    user-select: none;
    pointer-events: none;
}
/*.large {
    aspect-ratio: 16 / 9;
}*/

.ai-image {
    position: relative;
}

.ai-watermark-image {
    position: absolute;

    bottom: -80px;
    right: 5px;

    width: 260px;
    opacity: 0.75;

    pointer-events: none;
    z-index: 1;
}
.dark-section .note {
    max-width: 418px;
}
.future .ai-watermark-image {

    bottom: 55px;
    right: auto;
    left: 5px;

    width: 100px;

    z-index: 2;
}


/* =========================================================
   SLIDER
========================================================= */

/*.comparison-slider{
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
    cursor:ew-resize;
}

.image-day,
.image-night{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.image-night-wrapper{
    position:absolute;
    inset:0;
    width:50%;
    overflow:hidden;
}

.comparison-divider{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    height:100%;
    background:white;
    z-index:20;
}

.comparison-divider span{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    box-shadow:0 0 10px rgba(0,0,0,.3);
}*/


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

.site-header {
    position: fixed;
    z-index: 1000;

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

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

    padding: 24px 5vw;

    color: white;

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

.site-header.scrolled {
    background: rgba(248,247,244,.96);

    color: var(--black);

    box-shadow: 0 8px 35px rgba(0,0,0,.06);

    backdrop-filter: blur(12px);
}

.brand {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.brand-name {
    font-family: var(--sans);

    font-size: 14px;
    font-weight: 600;

    letter-spacing: .18em;
    line-height: 1;
}

.brand-location {
    font-size: 8px;
    letter-spacing: .2em;

    opacity: .65;
}

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

.main-nav a {
    font-family: var(--sans);

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .1em;

    text-transform: uppercase;

    white-space: nowrap;
}

.main-nav a:not(.nav-cta) {
    opacity: .85;
}

.nav-cta {
    padding: 11px 17px;

    border: 1px solid currentColor;

    transition: var(--transition);
}

.nav-cta:hover {
    background: currentColor;
    color: var(--background);
}

.mobile-menu-button {
    display: none;

    width: 38px;
    height: 38px;

    padding: 8px;

    border: 0;
    background: transparent;
}

.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 1px;

    margin: 6px 0;

    background: currentColor;

    transition: var(--transition);
}

.mobile-menu {
    position: fixed;
    z-index: 999;

    inset: 0;

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

    gap: 25px;

    background: var(--black);
    color: white;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu a {
    font-family: var(--serif);

    font-size: 38px;
}


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

.hero {
    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background: #565750;
    color: white;
}

.hero-background {
    position: absolute;
    inset: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.64) 0%,
            rgba(0,0,0,.28) 55%,
            rgba(0,0,0,.15) 100%
        );
}

.hero-overlay-bot {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            335deg,
            rgba(0,0,0,.60) 0%,
            rgba(0,0,0,.28) 20%,
            rgba(0,0,0,.0) 30%,
            rgba(0,0,0,.0) 100%
        );
}

.hero-content {
    position: absolute;
    z-index: 3;

    left: 8vw;
    top: 50%;

    width: min(700px, 80vw);

    transform: translateY(-50%);
}

.hero-content h1 {
    margin: 22px 0;

    font-family: var(--serif);
    font-size: clamp(65px, 8vw, 110px);
    font-weight: 500;

    line-height: .84;
    letter-spacing: -.035em;

    text-shadow: none;
}

.hero-content h1 em {
    font-weight: 400;
}

.hero-content p {
    max-width: 580px;
    margin-bottom: 32px;
    color: rgba(255,255,255,.78);
    /*font-size: 13px;*/
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 25px;
}

.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 48px;

    padding: 14px 22px;

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

    background: var(--black);
    color: white;

    font-family: var(--sans);

    font-size: 9px;
    font-weight: 500;

    letter-spacing: .13em;

    text-transform: uppercase;

    transition: var(--transition);
}
.qualification-step .button {
    margin-top: 35px;
}

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

.button-light {
    border-color: white;

    background: white;
    color: var(--black);
}

.text-link {
    font-size: 9px;
    letter-spacing: .12em;

    text-transform: uppercase;
}

.light-link {
    color: white;
}

.text-link span {
    margin-left: 8px;
}

.hero-stats {
    position: absolute;
    z-index: 3;

    left: 8vw;
    right: 8vw;
    bottom: 35px;

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

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

.hero-stats div {
    padding-top: 17px;
}

.hero-stats strong {
    display: block;

    font-family: var(--serif);
    font-size: 27px;
    font-weight: 500;
}

.hero-stats span {
    display: block;

    margin-top: 4px;

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

    font-size: 8px;
    letter-spacing: .1em;

    text-transform: uppercase;
}


/* =========================================================
   PLACEHOLDERS
========================================================= */

.placeholder-image {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #d9d5cd,
            #bcb9b1
        );

    color: #555650;
}

.placeholder-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            transparent 55%
        );
}

.placeholder-content {
    position: absolute;
    z-index: 2;

    left: 50%;
    top: 50%;

    width: min(80%, 430px);

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

    text-align: center;
}

.placeholder-content span {
    display: block;

    margin-bottom: 10px;

    font-family: var(--sans);
    font-size: 8px;
    font-weight: 600;

    letter-spacing: .18em;
}

.placeholder-content strong {
    display: block;

    font-family: monospace;
    font-size: 17px;
    font-weight: 400;
}

.placeholder-content small {
    display: block;

    margin-top: 10px;

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

    opacity: .7;
}


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

.split-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8vw;

    margin-bottom: 70px;
}

.intro-copy {
    padding-top: 30px;
}

.intro-copy p {
    color: var(--text-soft);
    font-size: 13px;
    line-height: 1.85;
}

.intro-copy .large-copy {
    color: var(--text);

    font-family: var(--serif);

    font-size: 29px;
    line-height: 1.2;
}

.large-photo {
    aspect-ratio: 16 / 8;
}


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

.location-layout {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 9vw;

    max-width: 1250px;
    margin: auto;
}

.location-photo {
    min-height: 560px;
}

.location-facts {
    display: grid;

    grid-template-columns: 1fr 1fr;

    background: rgba(255,255,255,.12);
}

.location-fact {
    padding: 35px;

    background: var(--black);

    border-bottom: 1px solid rgba(255,255,255,.12);
    /*border-right: 1px solid rgba(255,255,255,.12);*/
}

.location-fact strong {
    display: block;

    font-family: var(--serif);
    font-size: 48px;
    font-weight: 500;
}

.location-fact span {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: .65;
}

.location-fact p {
    margin-top: 18px;
    color: rgba(255,255,255,.55);
    color: var(--text-soft);
    font-size: 11px;
    line-height: 1.6;
}

.location-bottom {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7vw;

    margin-top: 55px;

    border-top: 1px solid rgba(255,255,255,.18);
    padding-top: 30px;
}

.location-bottom p {
    margin: 0;

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

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

.location-bottom strong {
    color: white;
}


/* =========================================================
   HOUSE
========================================================= */

.house-grid {
    display: grid;

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

    gap: 18px;
}

.card-photo {
    aspect-ratio: 3 / 4;
}

.house-card {
    position: relative;
}

.card-number {
    display: block;

    margin-top: 18px;

    color: #8b8c84;

    font-size: 8px;
    letter-spacing: .15em;
}

.house-card h3 {
    margin: 8px 0;

    font-family: var(--serif);

    font-size: 34px;
    font-weight: 500;
}

.house-card p {
    color: var(--text-soft);

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


/* =========================================================
   FEATURES
========================================================= */

.features-grid {
    display: grid;

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

    /*gap: 18px;*/

    /*margin-bottom: 70px;*/
    margin: 0 auto 70px;
    max-width: 1250px;
}

.features-grid article {
    /*border-top: 1px solid #c8c4bc;*/
    border-top: 1px solid #bbb9b2;
    padding: 30px;

    padding-top: 20px;
}

.features-grid article > span {
    /*color: #8b8c84;*/
    font-weight: bolder;
    /*font-size: 8px;*/
    letter-spacing: .15em;
}

.features-grid h3 {
    margin: 20px 0 10px;

    font-family: var(--serif);

    font-size: 34px;
    font-weight: 500;
}

.features-grid p {
    margin: 0;

    color: var(--text-soft);

    font-size: 13px;
    /*font-size: 11px;*/
    line-height: 1.7;
}

.feature-photo {
    min-height: 470px;
}
.features-grid article+article {
    border-left: 1px solid #bbb9b2;
}


/* =========================================================
   EXTERIORS
========================================================= */

.exterior-layout {
    display: grid;

    grid-template-columns: 1.4fr 1fr;

    gap: 18px;
}

.exterior-main {
    min-height: 658px;
}

.exterior-secondary {
    display: grid;

    grid-template-rows: 1fr 1fr;

    gap: 18px;
}

.exterior-secondary > div {
    min-height: 320px;
}

.exterior-features {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 25px;

    margin-top: 25px;

    color: #666760;

    font-size: 7.5px;
    /*font-size: 9px;*/
    letter-spacing: .1em;

    text-transform: uppercase;

    margin: auto;
    max-width: 1250px;
    padding: 0 25px;
}


/* =========================================================
   COMPARISON SLIDERS
========================================================= */

.comparison {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #ccc;
}

.comparison-large {
    aspect-ratio: 16 / 8;
}

.comparison-side {
    position: absolute;

    inset: 0;

    min-height: 100%;
}

.comparison-before {
    z-index: 1;
}

.comparison-after {
    position:absolute;
    z-index: 2;

    width: 50%;

    /*clip-path: inset(0 0 0 0);*/

    overflow:hidden;
}

.comparison-divider {
    position: absolute;
    z-index: 5;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 2px;

    background: white;

    transform: translateX(-50%);

    pointer-events: none;
}

.comparison-divider span {
    position: absolute;

    left: 50%;
    top: 50%;

    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    background: white;
    color: var(--black);

    font-size: 16px;

    box-shadow: 0 5px 25px rgba(0,0,0,.2);
}

.comparison-range {
    position: absolute;
    z-index: 10;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: ew-resize;
}

.comparison-side img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;
}

.comparison-label {
    position: absolute;
    z-index: 7;
    top: 18px;

    padding: 7px 10px;

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

    color: var(--black);

    font-size: 7px;
    font-weight: 600;

    letter-spacing: .14em;

    text-transform: uppercase;
}

.label-before {
    left: 18px;
}

.label-after {
    right: 18px;
}

.comparison-caption {
    display: flex;
    justify-content: space-between;

    margin: 16px auto 40px;

    font-size: 9px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.comparison-caption span {
    opacity: .5;
}

.comparison-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.day-night-section .placeholder-image {
    background:
        linear-gradient(
            135deg,
            #70716d,
            #3d3e3a
        );

    color: rgba(255,255,255,.8);
}/*
.comparison{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border-radius:16px;
}

.comparison-base{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;
}

.comparison-overlay{
    position:absolute;
    inset:0;

    width:50%;
    overflow:hidden;
}

.comparison-overlay img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    max-width:none;
    /*width:100vw;    /* TEMPORAIRE POUR TEST */
    /*top:0;
    left:0; */   /* 
    object-fit:cover;
}

.comparison-divider{
    position:absolute;

    top:0;
    bottom:0;
    left:50%;

    width:3px;

    background:white;

    transform:translateX(-50%);

    z-index:20;

    pointer-events:none;
}

.comparison-divider span{
    position:absolute;

    top:50%;
    left:50%;

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

    width:48px;
    height:48px;

    border-radius:50%;

    background:white;

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

    font-weight:bold;

    box-shadow:0 5px 20px rgba(0,0,0,.25);
}

.comparison-range{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    margin:0;

    opacity:0;

    cursor:ew-resize;

    z-index:50;
}*/


/* =========================================================
   FUTURE / AI
========================================================= */

.future-section {
    background: var(--background);
}

.ai-disclaimer {
    max-width: 650px;

    margin-top: 35px;

    padding: 20px;

    border-left: 2px solid #b4b0a7;

    background: rgba(255,255,255,.5);
}

.ai-disclaimer strong {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    letter-spacing: .12em;

    text-transform: uppercase;
}

.ai-disclaimer p {
    margin: 0;

    color: var(--text-soft);

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

.future-project {
    display: grid;

    grid-template-columns: .65fr 1.35fr;

    gap: 7vw;

    align-items: center;

    margin-top: 110px;
}

.future-project.reverse {
    grid-template-columns: 1.35fr .65fr;
}

.future-project.reverse .future-project-text {
    order: 2;
}

.future-project.reverse .comparison {
    order: 1;
}

.future-project-text > span {
    font-size: 8px;
    letter-spacing: .16em;

    color: #777870;
}

.future-project-text h3 {
    font-size: clamp(43px, 5vw, 67px);
}

.future-project-text p {
    max-width: 500px;

    color: var(--text-soft);

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

.future-project .comparison {
    aspect-ratio: 16 / 9;
}

.future-plan {
    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 7vw;

    align-items: center;

    margin-top: 130px;

    padding-top: 80px;

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

.plan-image {
    min-height: 500px;
}

.plan-text > span {
    font-size: 8px;
    letter-spacing: .16em;
}

.plan-text h3 {
    margin: 18px 0;

    font-family: var(--serif);

    font-size: 55px;
    font-weight: 500;
    line-height: .9;
}

.plan-text h3 em {
    font-weight: 400;
}

.plan-text p,
.plan-text li {
    color: var(--text-soft);

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

.plan-text ul {
    padding-left: 18px;
}


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

.details-layout {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 10vw;
}

.details-list {
    display: grid;

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

.details-list div {
    display: grid;

    grid-template-columns: 30px 1fr;

    gap: 15px;

    padding: 18px 0;

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

.details-list span {
    color: #85867f;

    font-size: 11px;
}

.details-list strong {
    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   PERFORMANCE
========================================================= */

.performance-section h2 {
    max-width: 850px;

    margin: 18px auto 70px;

    font-family: var(--serif);

    font-size: clamp(50px, 6vw, 82px);
    font-weight: 500;

    line-height: .9;


    max-width: 1250px;
}

.performance-content {
    display: grid;

    grid-template-columns: 395px 1fr;

    gap: 7vw;

    align-items: center;
}

.energy-score {
    display: flex;
    align-items: flex-end;

    gap: 20px;

    /*border-top: 1px solid rgba(255,255,255,.25);*/

    /*padding-top: 25px;*/
}

.energy-score strong {
    font-family: var(--serif);

    font-size: 145px;
    font-weight: 500;

    line-height: .65;
}

.energy-score span {
    padding-bottom: 5px;

    /*font-size: 9px;*/
    letter-spacing: .15em;

    text-transform: uppercase;

    opacity: .65;
}

.performance-text {
    max-width: 650px;
}

.performance-text p {
    color: rgba(255,255,255,.62);

    font-size: 12px;
    line-height: 1.8;
}
.energy{display:flex;align-items:baseline;gap:18px;margin:0}
.energy b{font:400 160px "Cormorant Garamond",serif;line-height:.8}
.energyvals{display:flex;gap:70px; 
    margin-top: 40px;}
.energyvals div{display:flex;flex-direction:column}
.energyvals b{font:400 45px "Cormorant Garamond",serif}
.energyvals span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.6}


/* =========================================================
   GALLERY
========================================================= */

.gallery-grid {
    display: grid;

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

    gap: 18px;
}

.gallery-photo {
    min-height: 390px;
}

.gallery-photo.large {
    grid-column: span 2;

    min-height: 550px;
}


/* =========================================================
   CLOSING
========================================================= */

.closing-section {
    position: relative;

    min-height: 75vh;

    overflow: hidden;

    color: white;
}

.closing-background {
    position: absolute;

    inset: 0;

    min-height: 100%;
}

.closing-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.65),
            rgba(0,0,0,.2)
        );
}

.closing-content {
    position: absolute;
    z-index: 2;

    left: 8vw;
    top: 50%;

    transform: translateY(-50%);
}

.closing-content h2 {
    font-size: clamp(55px,7vw,100px);

    color: white;
}


/* =========================================================
   QUALIFICATION
========================================================= */

.project-section {
    padding-bottom: 150px;
}

.project-intro {
    /*max-width: 850px;*/
    max-width: 1250px;

    margin: auto;
    margin-bottom: 80px;
}

.project-intro > p {
    max-width: 650px;

    color: var(--text-soft);

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

.qualification-container {
    display: grid;

    grid-template-columns: 200px 1fr;

    gap: 7vw;

    /*max-width: 1100px;*/
    max-width: 1250px;
    margin: auto;
}

.qualification-progress {
    display: flex;

    flex-direction: column;

    gap: 25px;
}

.progress-item {
    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 12px;

    align-items: center;

    color: #999a94;

    transition: var(--transition);
}

.progress-item span {
    display: grid;

    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid currentColor;

    border-radius: 50%;

    font-size: 8px;
}

.progress-item small {
    font-size: 8px;
    letter-spacing: .08em;

    text-transform: uppercase;
}

.progress-item.active {
    color: var(--black);
}

.progress-item.active span {
    background: var(--black);
    color: white;
}

.qualification-form {
    min-height: 500px;
}

.qualification-step {
    display: none;
}

.qualification-step.active {
    display: block;
}

.step-number {
    display: block;

    margin-bottom: 20px;

    color: #85867f;

    font-size: 8px;
    letter-spacing: .15em;
}

.qualification-step h3 {
    margin: 0 0 15px;

    font-family: var(--serif);

    font-size: 55px;
    font-weight: 500;

    line-height: .95;
}

.qualification-step > p {
    max-width: 600px;

    margin-bottom: 40px;

    color: var(--text-soft);

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

.choice-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
}

.choice-list {
    display: grid;

    gap: 10px;
}

.choice {
    position: relative;

    display: block;

    cursor: pointer;
}

.choice input {
    position: absolute;

    opacity: 0;
}

.choice > span {
    display: block;

    padding: 20px;

    border: 1px solid #ccc8bf;

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

    transition: var(--transition);
}

.choice:hover > span {
    border-color: var(--black);
}

.choice input:checked + span {
    border-color: var(--black);

    background: var(--black);
    color: white;
}

.choice strong {
    display: block;

    margin-bottom: 7px;

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

.choice small {
    color: var(--text-soft);

    font-size: 9px;
}

.choice input:checked + span small {
    color: rgba(255,255,255,.6);
}

.form-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 35px;
}

.text-button {
    border: 0;

    background: transparent;

    color: var(--text-soft);

    font-size: 9px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.form-fields {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}

.form-fields label {
    display: flex;

    flex-direction: column;

    gap: 9px;

    font-size: 8px;
    letter-spacing: .1em;

    text-transform: uppercase;
}

.form-fields label:last-child {
    grid-column: span 2;
}

.form-fields input,
.form-fields select,
.form-fields textarea {
    width: 100%;

    padding: 13px 0;

    border: 0;

    border-bottom: 1px solid #aaa69d;

    background: transparent;

    outline: none;

    color: var(--black);

    font-size: 12px;

    letter-spacing: 0;

    text-transform: none;
}

.form-fields textarea {
    resize: vertical;
}

.qualification-success {
    display: none;

    padding: 60px 0;
}

.qualification-success.show {
    display: block;
}

.qualification-success > span {
    font-size: 8px;
    letter-spacing: .15em;
}

.qualification-success h3 {
    margin: 20px 0;

    font-family: var(--serif);

    font-size: 65px;
    font-weight: 500;

    line-height: .9;
}

.qualification-success h3 em {
    font-weight: 400;
}

.qualification-success p {
    max-width: 500px;

    color: var(--text-soft);

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


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

.site-footer {
    display: flex;

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

    padding: 35px 8vw;

    background: var(--black);
    color: white;
}

.site-footer > div {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.site-footer strong {
    font-size: 12px;
    letter-spacing: .18em;
}

.site-footer span {
    color: rgba(255,255,255,.55);

    font-size: 8px;
    letter-spacing: .08em;

    text-transform: uppercase;
}


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

@media (max-width: 1000px) {

    .main-nav a:not(.nav-cta) {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

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

    .split-intro,
    .location-layout,
    .details-layout {
        grid-template-columns: 1fr;
    }

    .future-project,
    .future-project.reverse {
        grid-template-columns: 1fr;
    }

    .future-project.reverse .future-project-text {
        order: initial;
    }

    .future-project.reverse .comparison {
        order: initial;
    }

    .future-plan {
        grid-template-columns: 1fr;
    }

    .features-grid>article+article {
        border-left: 0;
    }
    .features-grid>article:nth-child(even) {
        border-left: 1px solid #bbb9b2;
    }

    .qualification-container {
        grid-template-columns: 1fr;
    }

    .qualification-progress {
        display: grid;

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

        gap: 10px;
    }

    .progress-item {
        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;
    }

    .progress-item small {
        display: none;
    }

}


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

@media (max-width: 650px) {

    .section {
        padding: 90px 6vw;
    }

    .hero-content {
        left: 6vw;
        width: 88vw;
    }

    .hero-content h1 {
        font-size: 62px;
    }

    .hero-content p {
        font-size: 12px;
    }

    .hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }

    .hero-stats {
        left: 6vw;
        right: 6vw;

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

        gap: 12px;
    }

    .hero-stats div {
        padding-top: 10px;
    }

    .hero-stats strong {
        font-size: 22px;
    }

    .split-intro {
        gap: 25px;
    }

    .location-facts,
    .choice-grid,
    .form-fields,
    .comparison-grid,
    .gallery-grid,
    .house-grid,
    .features-grid,
    .details-list {
        grid-template-columns: 1fr;
    }

    .location-bottom {
        grid-template-columns: 1fr;
    }

    .location-photo {
        min-height: 400px;
    }

    .exterior-layout {
        grid-template-columns: 1fr;
    }

    .exterior-main {
        min-height: 450px;
    }

    .exterior-secondary {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .exterior-secondary > div {
        min-height: 220px;
    }

    .comparison-large {
        aspect-ratio: 4 / 3;
    }

    .comparison {
        aspect-ratio: 4 / 3;
    }

    .comparison-divider span {
        width: 38px;
        height: 38px;
    }

    .future-project-text h3 {
        font-size: 48px;
    }

    .plan-image {
        min-height: 350px;
    }

    .features-grid>article+article, .features-grid>article:nth-child(even) {
        border-left: 0;
    }

    .performance-content {
        grid-template-columns: 1fr;
    }

    .gallery-photo.large {
        grid-column: auto;
        min-height: 390px;
    }

    .qualification-step h3 {
        font-size: 45px;
    }

    .form-fields label:last-child {
        grid-column: auto;
    }

    .site-footer {
        flex-direction: column;

        align-items: flex-start;

        gap: 25px;
    }

}