/* ============================================================
   HOME.CSS — Terex Residence
   All values extracted from Figma node 159:642 (1440px frame)
   Desktop-first: 1440 → 1024 → 768 → 480
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   HERO  (node 196:60)
   Canvas height: 822px · Content left: 209px from frame
   ════════════════════════════════════════════════════════════ */
.hero {
    position: relative;
    min-height: 822px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
}

/* Sky background layer */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Building render — overlaid on sky, bottom-anchored */
.hero__building {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    max-height: 800px;
    z-index: 2;
    object-fit: contain;
    object-position: bottom right;
    pointer-events: none;
}

/* White fade at bottom */
.hero__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 205px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #fff 48.14%);
    z-index: 2;
    pointer-events: none;
}

/* Dark overlay at top for nav readability */
.hero__overlay-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 175px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Content block — Figma: left:209px, top:222px within frame */
.hero__content {
    position: relative;
    z-index: 3;
    padding-top: 222px;
    /* 209px from frame left; container pad=78px, so extra = 209-78=131px */
    padding-left: calc(var(--container-pad) + 131px);
    padding-right: var(--container-pad);
    width: 100%;
}

/* "по средата на всичко" — Montserrat Medium 41px lowercase */
.hero__kicker {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 41px;
    line-height: 1;
    text-transform: lowercase;
    color: var(--c-text-white);
    letter-spacing: 0;
    margin-bottom: 0;
}

/* "Твоето място" — Montserrat SemiBold 64px UPPERCASE */
.hero__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--c-text-white);
    white-space: nowrap;
    margin-bottom: 10px;
}

/* Body subtitle */
.hero__subtitle {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 35px;
    color: var(--c-text-white);
    max-width: 510px;
    margin-bottom: 30px;
}

/* CTA — smaller pad variant: 20px 40px */
.hero__cta {
    padding: 20px 40px;
    font-size: 26px;
}


/* ════════════════════════════════════════════════════════════
   WHY US  (node 159:682)
   bg: rgba(246,246,246,0.8) · 3-col grid
   ════════════════════════════════════════════════════════════ */
.why {
    /*background: var(--c-bg-light);*/
    padding-top: 80px;
    padding-bottom: 80px;
}

.why__header {
    text-align: center;
    margin-bottom: 60px;
}

.why__header .accent-bar {
    margin-inline: auto;
    margin-bottom: 19px;
}

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

.why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.why-card {
    text-align: center;
}

/* Icon: height 73px from Figma */
.why-card__icon {
    width: 77px;
    height: 73px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-card__icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Feature title — gradient text, 34px SemiBold */
.why-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 34px;
    background: var(--g-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

/* Description — 20px Regular */
.why-card__desc {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
    color: var(--c-text-body);
    max-width: 405px;
    margin-inline: auto;
}


/* ════════════════════════════════════════════════════════════
   AMENITIES  (node 159:734)
   ════════════════════════════════════════════════════════════ */
.amenities {
    padding-top: 80px;
    padding-bottom: 0; /* diagram sits flush at the bottom — no gap before banner */
    background: #fff;
}

.amenities__header {
    margin-bottom: 16px;
}

.amenities__header .accent-bar {
    margin-bottom: 19px;
}

.amenities__header .section-title {
    white-space: nowrap;
}

/* Subtitle — Montserrat Medium 18px */
.amenities__subtitle {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--c-text-body);
    max-width: 401px;
    margin-top: 8px;
}

/* Stats row — aligned right of header, same baseline */
.amenities__meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
}

.amenities__meta-left {
    flex: 1;
}

.amenities__stats {
    display: flex;
    gap: 56px;
    align-items: flex-start;
}

/* Stat block */
.stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.stat__value {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: var(--c-text-body);
}

.stat__label {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 24px;
    color: var(--c-text-body);
    margin-top: 4px;
}

/* ── Building Diagram — direct child of .amenities section (outside .container) ── */
.diagram-outer {
    width: 100%; /* fills the full section width naturally */
    position: relative;
}

.diagram-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.diagram-wrap img {
    width: 100%;
    display: block;
}

/* Pin group — positioned absolutely over diagram image */
.d-pin {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    pointer-events: none;
}

/* Icon circle */
.d-pin__icon {
    width: 94px;
    height: 94px;
    flex-shrink: 0;
}

.d-pin__icon img {
    width: 100%;
    height: 100%;
}

/* Label */
.d-pin__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    color: var(--c-text-dark);
    white-space: nowrap;
    line-height: 1.3;
    padding-top: 8px;
}

/* Connector SVG line */
.d-pin__line {
    position: absolute;
    pointer-events: none;
    overflow: visible;
}

/* ---- Amenities diagram pin positions ----
   Frame: W=935px H=1153px (Figma node 165:1760, approx proportions used)
   Pins positioned as % of diagram container             */

/* Right side pins (icon left, label right) */
.d-pin--parking {
    /* icon at ~72.8% from left, ~79% from top */
    left: 72%;
    top: 78%;
    flex-direction: column;
}

.d-pin--parking .d-pin__label {
    position: absolute;
    top: 0;
    left: calc(100% + 10px);
    padding-top: 0;
}

.d-pin--maintenance {
    left: 72%;
    top: 27%;
}

.d-pin--facade {
    left: 72%;
    top: 50%;
}

/* Left side pins (label left, icon right) */
.d-pin--shop {
    left: 0;
    top: 83%;
}

.d-pin--surveillance {
    left: 0;
    top: 57%;
}

.d-pin--elevator {
    left: 0;
    top: 33%;
}

/* Simplified pin layout — icon + label side by side */
.d-pin--right {
    flex-direction: row;
}

.d-pin--left {
    flex-direction: row-reverse;
}

.d-pin--left .d-pin__label {
    text-align: right;
}


/* ════════════════════════════════════════════════════════════
   VIEWS BANNER  (node 196:39)
   Full-bleed · 905px height · dark bg image
   ════════════════════════════════════════════════════════════ */
.banner {
    position: relative;
    height: 905px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.banner__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.banner__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Cloud/tree decorative images from Figma (left + right) */
.banner__deco-left {
    position: absolute;
    left: -80px;
    top: 104px;
    width: 547px;
    height: 228px;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.banner__deco-right {
    position: absolute;
    right: -50px;
    top: 163px;
    width: 721px;
    height: 468px;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner__content .accent-bar {
    margin-bottom: 19px;
}

/* "Гледките, за които си мечтал" — 65px SemiBold */
.banner__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 65px;
    line-height: 65px;
    color: var(--c-text-white);
    white-space: pre-line;
    margin-bottom: 20px;
}

.banner__sub {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: var(--c-text-white);
    max-width: 511px;
    margin-bottom: 40px;
}


/* ════════════════════════════════════════════════════════════
   APARTMENTS / FLOORPLAN  (node 159:763)
   ════════════════════════════════════════════════════════════ */
.apartments {
    padding-top: 80px;
    padding-bottom: 80px;
    background: var(--c-bg-light);
}

.apartments__header {
    margin-bottom: 20px;
}

.apartments__subtitle {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    color: var(--c-text-body);
    max-width: 511px;
    margin-top: 8px;
}

.apartments__header .section-title {
    line-height: 56px;
}

/* Floorplan diagram */
.floorplan-wrap {
    position: relative;
    margin-bottom: 40px;
}

.floorplan-wrap img {
    width: 100%;
    display: block;
}

/* ── Floorplan Pin Callouts ──
   Pins are positioned as % relative to .floorplan-wrap
   Source measurements from Figma (frame W=1170, H=1049):
   ─ Тройни стъклопакети: top-left quadrant, callout going right
   ─ 2.75м височина: bottom-right, callout going left
   ─ Viega ВиК: mid-left, callout going right              */

.fp-pin {
    position: absolute;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    pointer-events: none;
    z-index: 4;
}

.fp-pin__icon {
    width: 94px;
    height: 94px;
    flex-shrink: 0;
}

.fp-pin__icon img {
    width: 100%;
    height: 100%;
}

.fp-pin__line {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}

.fp-pin__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    color: #000;
    line-height: 1.3;
    white-space: nowrap;
    padding-top: 60px; /* align label below icon */
}

/* Pin: Тройни стъклопакети — top-right area of floorplan */
.fp-pin--windows {
    /* icon at right, label at right of icon */
    right: 5%;
    top: 15%;
    flex-direction: row;
}

.fp-pin--windows .fp-pin__label {
    text-align: left;
    padding-left: 0;
}

/* Pin: 2.75м височина — bottom-right */
.fp-pin--height {
    right: 5%;
    bottom: 10%;
    flex-direction: row;
}

/* Pin: Viega ВиК — mid-left */
.fp-pin--pipe {
    left: 5%;
    top: 45%;
    flex-direction: row;
}

.apartments__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}


/* ════════════════════════════════════════════════════════════
   LOCATION  (node 159:806)
   Map: W=1281px H=568px, starts at x=78 y=6016 in Figma frame
   All pin % coords derived: left=(pin_x - 78)/1281*100
                              top=(pin_y - 6016)/568*100
   ════════════════════════════════════════════════════════════ */
.location {
    padding-top: 80px;
    padding-bottom: 80px;
    background: #fff;
}

/* Header + stats row — Figma: left col text, right col stats */
.location__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 30px;
}

.location__header-col {
    flex: 1;
}

.location__header {
    margin-bottom: 0;
}

.location__header .section-title {
    white-space: nowrap;
}

.location__subtitle {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.5;
    color: var(--c-text-body);
    max-width: 401px;
    margin-top: 8px;
}

/* Distance stats — right side of header row */
.location__stats {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding-bottom: 4px; /* visual baseline alignment with subtitle */
}

.location-stat {
    display: flex;
    flex-direction: column;
}

.location-stat__num {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    color: var(--c-text-body);
}

.location-stat__num span {
    font-size: 24px;
    font-weight: 400;
}

.location-stat__label {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 24px;
    color: var(--c-text-body);
    margin-top: 4px;
}

/* ── Map container ──
   position:relative so all overlays use % coords of THIS element */
.location__map-wrap {
    position: relative;
    width: 100%;
    overflow: hidden; /* clip anything that bleeds outside */
}

/* Map image: natural aspect ratio 1281:568 = 2.254:1
   Use aspect-ratio so the pin % coords stay accurate at any width */
.location__map-wrap > .map-img {
    display: block;
    width: 100%;
    aspect-ratio: 1281 / 568;
    object-fit: cover;
    object-position: center;
}

/* ── Route SVG overlays (Figma nodes 159:920, 159:924, 159:928) ──
   Positioned as % of map container.
   Derived coords (Figma frame → relative to map x=78 y=6016):

   Vector11 (159:920): x=430, y=150, W=558.5, H=140.5
     left=430/1281=33.6%  top=150/568=26.4%  w=43.6%  h=24.7%

   Vector12 (159:924): x=367, y=290, W=184, H=127.5
     left=367/1281=28.7%  top=290/568=51.1%  w=14.4%  h=22.5%

   Vector13 (159:928): x=665, y=110.5, W=79, H=71.5
     left=665/1281=51.9%  top=110.5/568=19.5%  w=6.2%  h=12.6%      */
.map-route {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    /* width/height and left/top set per-element below */
}

.map-route img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill; /* stretch to fill the positioned box exactly */
}

.map-route--v11 {
    left: 33.6%;
    top: 26.4%;
    width: 43.6%;
    height: 24.7%;
}

.map-route--v12 {
    left: 28.7%;
    top: 51.1%;
    width: 14.4%;
    height: 22.5%;
}

.map-route--v13 {
    left: 51.9%;
    top: 19.5%;
    width: 6.2%;
    height: 12.6%;
}

/* ── CSS-drawn map pins (NO external SVG files needed) ──
   All positioned with transform: translate(-50%, -100%)
   so the anchor point is at the BOTTOM-CENTER of the marker  */

/* Base pin — centred on its % coordinate */
.map-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 4;
    /* anchor = bottom-center of the marker */
    transform: translate(-50%, -50%);
}

/* ── Terex Residence: red teardrop marker ──
   Figma: Frame47420 (node 159:925)
   Map-relative: x=485, y=216 (icon top-left), icon 64×64
   Center coords: (485+32)/1281=40.4%, (216+32)/568=43.7%     */
.map-pin--terex {
    left: 40.4%;
    top: 43.7%;
}

/* CSS teardrop: circle top, pointed bottom */
.map-pin--terex .map-pin__marker {
    width: 22px;
    height: 30px;
    background: var(--g-primary);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    position: relative;
    box-shadow: 0 2px 8px rgba(196, 22, 28, 0.5);
}

/* The pointed tip at the bottom */
.map-pin--terex .map-pin__marker::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #C4161C;
}

/* White dot inside (matches Figma) */
.map-pin--terex .map-pin__marker::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
}

/* ── Small location pins (Mall / Beach / Center) ──
   Each: a small red circle dot + gradient label below

   Mall Galleria (159:921):
     x=394.5, y=411 → left=30.8%, top=72.4%

   Плаж Бургас (159:923):
     x=743.5, y=84  → left=58.0%, top=14.8%

   Бургас Център (159:922):
     x=1011.5, y=162 → left=79.0%, top=28.5%          */

.map-pin--mall {
    left: 30.8%;
    top: 72.4%;
}

.map-pin--beach {
    left: 58.0%;
    top: 14.8%;
}

.map-pin--center {
    left: 79.0%;
    top: 28.5%;
}

/* Small dot marker for non-Terex pins */
.map-pin__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--g-primary);
    box-shadow: 0 1px 4px rgba(196, 22, 28, 0.6);
    flex-shrink: 0;
}

/* Gradient text label (Figma: Poppins Regular 13px, gradient fill) */
.map-pin__label {
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    background: var(--g-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    width: 55px;
    margin-top: 3px;
}


/* ════════════════════════════════════════════════════════════
   TIMELINE  (node 196:59)
   bg: rgba(246,246,246,0.8)
   ════════════════════════════════════════════════════════════ */
.stages {
    background: var(--c-bg-light);
    padding-top: 80px;
    padding-bottom: 80px;
}

.stages__header {
    text-align: center;
    margin-bottom: 60px;
}

.stages__header .accent-bar {
    margin-inline: auto;
    margin-bottom: 19px;
}

/* Horizontal timeline */
.timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-inline: 60px;
}

/* Track line — grey */
.timeline__track {
    position: absolute;
    top: 36px; /* center of 74px icon */
    left: 12%;
    right: 12%;
    height: 2px;
    background: rgba(0, 0, 0, 0.2);
    z-index: 0;
}

/* Progress — gradient, covers first completed step */
.timeline__progress {
    position: absolute;
    top: 33px;
    left: 12%;
    width: 5%; /* adjust to match actual % complete */
    height: 7px;
    background: var(--g-primary);
    z-index: 1;
}

.timeline__step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 200px;
}

/* Step icon (74×74 from Figma) */
.timeline__icon {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}

.timeline__icon img {
    width: 100%;
    height: 100%;
}

/* Step label — Montserrat SemiBold 24px */
.timeline__name {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 24px;
    text-align: center;
    color: #000;
    line-height: 1.3;
    max-width: 200px;
}

/* Step date — Montserrat Medium 18px */
.timeline__date {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    color: var(--c-text-body);
}


/* ════════════════════════════════════════════════════════════
   CONTACT  (node 396:142)
   bg: dark building image · form left · info bottom
   ════════════════════════════════════════════════════════════ */
.contact {
    position: relative;
    min-height: 1080px;
    overflow: hidden;
    padding-top: 134px; /* accent bar starts at y=134 in Figma frame */
    padding-bottom: 160px;
}

/* Background building image */
.contact__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.contact__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Dark gradient overlay at bottom */
.contact__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 439px;
    background: linear-gradient(to bottom, rgba(28, 27, 23, 0.2) 29.41%, #1C1B17 48.14%);
    z-index: 1;
    pointer-events: none;
}

/* Inner layout — 2 cols: heading/form | right space */
.contact__inner {
    position: relative;
    z-index: 2;
    padding-inline: var(--container-pad);
    max-width: var(--container-max);
    margin: 0 auto;
}

/* Accent bar + heading */
.contact__accent {
    margin-bottom: 0;
}

/* "Намери своето място." — Montserrat SemiBold 56px white */
.contact__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 56px;
    line-height: 56px;
    color: var(--c-text-white);
    margin-top: 29px;
    margin-bottom: 20px;
    max-width: 648px;
}

/* Subtitle — Montserrat Medium 18px white */
.contact__sub {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 18px;
    color: var(--c-text-white);
    max-width: 521px;
    margin-bottom: 40px;
}

/* ── Contact Form ── */
.contact__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 550px;
}

.form-row {
    display: flex;
    gap: 14px;
}

.form-row .form-field {
    flex: 1;
}

/* Form field — Figma: bg rgba(255,255,255,0.6) border #1C1B17 radius 5px */
.form-field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 69px;
    padding: 12px 14px;
    background: var(--c-input-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--r-input);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: -0.15px;
    color: var(--c-text-body);
    width: 100%;
    outline: none;
    transition: border-color 0.2s;
}

.form-field::placeholder {
    color: var(--c-text-body);
    opacity: 0.8;
}

.form-field:focus {
    border-color: var(--c-primary-end);
}

textarea.form-field {
    height: 180px;
    align-items: flex-start;
    resize: vertical;
    padding-top: 14px;
}

/* Submit button — full width, gradient bg, Poppins SemiBold 28px */
.btn-submit {
    width: 100%;
    height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-primary);
    box-shadow: var(--sh-form);
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -0.28px;
    color: var(--c-text-white);
    border: none;
    cursor: pointer;
    transition: filter 0.2s;
}

.btn-submit:hover {
    filter: brightness(1.1);
}

/* ── Consent checkboxes ── */
.contact__consents {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.consent-label {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    color: var(--c-text-white);
    cursor: pointer;
}

.consent-label input[type="checkbox"] {
    width: 21px;
    height: 21px;
    min-width: 21px;
    border: 1px solid #fff;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    margin-top: 2px;
    cursor: pointer;
}

.consent-label input[type="checkbox"]:checked {
    background: var(--g-primary);
}

.consent-label a {
    text-decoration: underline;
}

/* ── Contact info row (address / phone / email) ── */
.contact__info-row {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-top: 60px;
    padding-top: 30px;
    position: relative; /* ← must be positioned to stack above the overlay */
    z-index: 2; /* ← overlay is z-index:1, this must be higher */
}

.contact__info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.45;
    color: var(--c-text-white);
    text-align: center;
    text-decoration: none; /* link reset */
    transition: opacity 0.2s;
}

.contact__info-item:hover {
    opacity: 0.8;
}

.contact__info-item img {
    width: 22px;
    height: auto;
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

/* ── 1024px Tablet ── */
@media (max-width: 1024px) {
    :root {
        --container-pad: 40px;
        --section-gap: 60px;
    }

    .section-title {
        font-size: 42px;
        line-height: 44px;
    }

    /* Hero */
    .hero__content {
        padding-left: calc(var(--container-pad) + 40px);
        padding-top: 180px;
    }

    .hero__title {
        font-size: 52px;
    }

    .hero__kicker {
        font-size: 32px;
    }

    /* Why */
    .why__grid {
        gap: 24px;
    }

    .why-card__title {
        font-size: 26px;
    }

    .why-card__desc {
        font-size: 17px;
    }

    /* Amenities stats */
    .amenities__stats {
        gap: 30px;
    }

    .stat__value {
        font-size: 28px;
    }

    .stat__label {
        font-size: 18px;
    }

    /* Banner */
    .banner {
        height: 600px;
    }

    .banner__title {
        font-size: 48px;
        line-height: 52px;
    }

    .banner__deco-left, .banner__deco-right {
        display: none;
    }

    /* Timeline */
    .timeline {
        padding-inline: 20px;
    }

    .timeline__step {
        width: 140px;
    }

    .timeline__name {
        font-size: 18px;
    }

    /* Contact */
    .contact__title {
        font-size: 44px;
        line-height: 48px;
    }

    .contact__info-row {
        gap: 40px;
        font-size: 18px;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Footer */
    .footer {
        grid-template-columns: 1fr 1fr;
        padding: 60px 40px 0;
        gap: 0 20px;
    }

    .footer__logo-wrap {
        grid-column: 1 / -1;
        margin-bottom: 20px;
    }
}

/* ── 768px Mobile ── */
@media (max-width: 768px) {
    :root {
        --container-pad: 20px;
    }

    .section-title {
        font-size: 32px;
        line-height: 36px;
    }

    .btn-cta {
        font-size: 20px;
        padding: 16px 24px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    /* Hero */
    .hero {
        min-height: 600px;
    }

    .hero__content {
        padding-left: var(--container-pad);
        padding-top: 120px;
    }

    .hero__title {
        font-size: 36px;
        white-space: normal;
    }

    .hero__kicker {
        font-size: 24px;
    }

    .hero__subtitle {
        font-size: 16px;
        line-height: 26px;
    }

    .hero__building {
        width: 100%;
        opacity: 0.4;
    }

    /* Why */
    .why__grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Amenities */
    .amenities__meta {
        flex-direction: column;
    }

    .amenities__stats {
        gap: 20px;
        flex-wrap: wrap;
    }

    .d-pin {
        display: none;
    }

    /* hide diagram pins on mobile, rely on list below */
    /* Banner */
    .banner {
        height: auto;
        min-height: 400px;
        padding: 60px 20px;
    }

    .banner__title {
        font-size: 34px;
        line-height: 38px;
    }

    /* Apartments */
    .fp-pin {
        display: none;
    }

    /* Location */
    .location__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .location__stats {
        gap: 20px;
        flex-wrap: wrap;
    }

    /* Scale down map pins on mobile */
    .map-pin--terex .map-pin__marker {
        width: 16px;
        height: 22px;
    }

    .map-pin__dot {
        width: 6px;
        height: 6px;
    }

    .map-pin__label {
        font-size: 10px;
        width: 44px;
    }

    /* Timeline */
    .timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        padding-inline: 0;
    }

    .timeline__track, .timeline__progress {
        display: none;
    }

    .timeline__step {
        flex-direction: row;
        width: 100%;
        gap: 20px;
        align-items: center;
    }

    .timeline__icon {
        width: 52px;
        height: 52px;
    }

    .timeline__name {
        text-align: left;
        font-size: 18px;
    }

    /* Contact */
    .contact {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .contact__title {
        font-size: 34px;
        line-height: 38px;
    }

    .contact__info-row {
        flex-direction: column;
        gap: 20px;
        font-size: 16px;
    }

    .form-row {
        flex-direction: column;
    }

    /* Footer */
    .footer {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 40px 20px 0;
    }

    /*.footer__logo {*/
    /*    width: 180px;*/
    /*    height: auto;*/
    /*}*/
    .footer__copy {
        padding-bottom: 20px;
    }
}

/* ── 480px Small Mobile ── */
@media (max-width: 480px) {
    .section-title {
        font-size: 26px;
        line-height: 30px;
    }

    .hero__title {
        font-size: 28px;
    }

    .hero__kicker {
        font-size: 20px;
    }

    .banner__title {
        font-size: 26px;
        line-height: 30px;
    }

    .contact__title {
        font-size: 26px;
        line-height: 30px;
    }

    .btn-cta {
        font-size: 18px;
        padding: 14px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   Hero Load Animation
   Building rises, sky descends, cloud drifts up, text fades
   Total sequence: ~3s
   ═══════════════════════════════════════════════════════════ */

:root {
    --hero-duration: 2.2s;
    --hero-distance: 80px;
    --hero-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Cloud — single image spanning the hero ───────────────── */

.hero__cloud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5%;       /* was 5% — moves clouds lower */
    width: 100%;
    height: auto;
    z-index: 1;        /* was 3 — building stays on top */
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.1;
}

/* ── Building — slides up ─────────────────────────────────── */

.hero-animate-up {
    opacity: 0;
    transform: translateY(var(--hero-distance));
    animation: heroSlideUp var(--hero-duration) var(--hero-easing) forwards;
    animation-delay: var(--hero-delay, 0s);
}

/* ── Sky/bg — slides down ─────────────────────────────────── */

.hero-animate-down {
    opacity: 0;
    transform: translateY(calc(var(--hero-distance) * -0.5));
    animation: heroSlideDown var(--hero-duration) var(--hero-easing) forwards;
    animation-delay: var(--hero-delay, 0s);
}

/* ── Cloud — rises up into frame ──────────────────────────── */

.hero-animate-cloud {
    opacity: 0;
    transform: translateY(60px);
    animation: heroCloudRise 2.8s var(--hero-easing) forwards;
    animation-delay: var(--hero-delay, 0s);
}

/* ── Text — fades in last ─────────────────────────────────── */

.hero-animate-fade {
    opacity: 0;
    transform: translateY(15px);
    animation: heroFadeIn 1.2s var(--hero-easing) forwards;
    animation-delay: var(--hero-delay, 0s);
}

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes heroSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroSlideDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroCloudRise {
    to {
        opacity: 0.85;
        transform: translateY(0);
    }
}

@keyframes heroFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hero-animate-up,
    .hero-animate-down,
    .hero-animate-cloud,
    .hero-animate-fade {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .hero__cloud {
        opacity: 0.85;
    }
}