/* =====================================================================
   DeAlmeida Properties — Design system (Oakline-inspired)
   Off-white canvas · dark green principal · green accents · beige used
   only as soft tones · oversized headings · pill buttons · dark banners.
   Palette only — no invented gold tones.
   ===================================================================== */

:root {
    /* De Almeida brand palette (Manual de Marca, mayo 2026) */
    --c-bg:        #fdfdf8;   /* off-white */
    --c-ink:       #1c1c1c;
    --c-ink-soft:  #4a4a4a;   /* brand grey */
    --c-line:      #e6e1d5;
    --c-soft:      #f7f5f0;
    --c-green:     #7a6d5e;   /* brand taupe — accents, buttons & fills (was dark green) */
    --c-green-mid: #938573;   /* lighter taupe — hovers / gradient mid */
    --c-beige:     #d7c3a3;
    --c-sand:      #eee8e0;   /* light beige — soft section surfaces */
    --c-brown:     #776a5e;   /* readable text on beige surfaces */
    /* Accent aliases mapped to the brand taupe (no gold, no green):
       --c-gold = taupe accent · --c-gold-dk = darker taupe for text */
    --c-gold:      #7a6d5e;
    --c-gold-dk:   #776a5e;

    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Inter Tight', 'Inter', sans-serif;
    --font-serif:   'Cormorant Garamond', Georgia, serif;

    --container: 1280px;
    --radius:    16px;
    --radius-pill: 40px;
    --ease:      cubic-bezier(.22,.61,.36,1);
    --ease-out:  cubic-bezier(.16,1,.3,1);   /* smooth deceleration for reveals */
    --shadow:    0 24px 60px rgba(0,0,0,.12);

    /* Unified animation language */
    --rev-dur:      1s;     /* block / card reveal duration */
    --rev-stagger:  .09s;   /* delay between staggered siblings */
    --text-dur:     1.05s;  /* heading word reveal duration */

    /* Shared brand gradient — now a soft beige for the former dark sections */
    --grad-green: linear-gradient(135deg, #f2ede6 0%, #eee8e0 55%, #e6dccb 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; font-family: var(--font-sans); color: var(--c-ink); background: var(--c-bg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── Typography ──────────────────────────────────────────────── */
.display { font-family: var(--font-display); font-weight: 500; line-height: 1.03; letter-spacing: -.03em; margin: 0; }
h1.display, .hero__title { font-size: clamp(2.8rem, 7vw, 5.8rem); }
h2.display { font-size: clamp(2.1rem, 5vw, 4rem); }
.section__sub, .muted { color: var(--c-ink-soft); }
.center { text-align: center; }
.accent { color: var(--c-gold); }

.eyebrow { display: inline-block; font-family: var(--font-display); font-size: .92rem; font-weight: 400; letter-spacing: .01em; color: var(--c-ink); opacity: .55; margin-bottom: 14px; }
.eyebrow--light { color: #fff; opacity: .7; }

/* ── Layout ──────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(22px, 5vw, 56px); }
.container--narrow { max-width: 820px; }
.section { padding: clamp(64px, 9vw, 130px) 0; }
.section--soft { background: var(--c-soft); }

.section__head { margin-bottom: 52px; }
.section__head--split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; }
.section__head--split .section__sub { margin: 0; max-width: 44ch; }
.center-head { text-align: center; }
.center-head .eyebrow { justify-content: center; }
.section__sub { margin: 0; }

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

.link-arrow { font-weight: 600; color: var(--c-ink); transition: color .2s var(--ease); white-space: nowrap; }
.link-arrow:hover { color: var(--c-gold); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent; padding: .85rem 1.7rem; border-radius: 10px; transition: all .25s var(--ease); background: var(--c-green); color: #fff; }
.btn:hover { transform: translateY(-2px); }
.btn--pill { border-radius: var(--radius-pill); background: var(--c-green); color: #fff; }
.btn--pill:hover { background: var(--c-green-mid); color: #fff; }
/* On dark green sections the pill turns light so it never disappears. */
.hero .btn--pill { background: #fff; color: var(--c-green); border: 1px solid var(--c-green); }
.hero .btn--pill:hover { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.btn--lg { padding: 1.05rem 2.2rem; font-size: 1rem; }
.btn--sm { padding: .55rem 1.15rem; font-size: .82rem; }
.btn--outline { background: transparent; color: var(--c-green); border-color: var(--c-green); }
.btn--outline:hover { background: var(--c-green); color: #fff; }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }

/* ── Header (floating island) ────────────────────────────────── */
/* The header itself is a fixed full-width layer; the island floats
   inside it with clear space on every side so it reads as a pill. */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; padding-top: 22px; }
/* Single static island — always the solid off-white look (no scroll change). */
.header__inner { width: min(1200px, calc(100% - 56px)); margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px;
    height: 66px; padding: 0 16px 0 28px;
    border-radius: 999px; border: 1px solid var(--c-line);
    background: rgba(253,253,248,.92); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    box-shadow: 0 12px 30px rgba(0,0,0,.12); }

/* Official logo — green lockup on the light island. */
.header__logo { display: inline-flex; align-items: center; text-decoration: none; justify-self: start; }
.header__logo img { height: 27px; width: auto; display: block; }
.header__logo .logo--light { display: none; }
.header__logo .logo--dark { display: block; }

/* nav dissolves into the inner grid so links centre & actions sit right. */
.header__nav { display: contents; }
.header__links { display: flex; align-items: center; gap: 26px; justify-self: center; }
.header__right { display: flex; align-items: center; justify-self: end; }
.header__links a { position: relative; flex: 0 0 auto; font-weight: 500; font-size: .9rem; letter-spacing: .01em; line-height: 1; padding: 6px 0; color: var(--c-ink); transition: color .25s var(--ease); }
.header__links a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px; background: var(--c-green); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.header__links a:hover { color: var(--c-green); }
.header__links a:hover::after { transform: scaleX(1); }
.header__cta { flex: 0 0 auto; height: 40px; min-height: 40px; padding: 0 2.6rem !important; font-size: .86rem; line-height: 1; margin-left: 12px; white-space: nowrap; background: var(--c-green); color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.14); transition: background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.header__cta::after { display: none !important; }
.header__cta:hover { background: var(--c-green-mid); color: #fff !important; transform: scale(1.025); box-shadow: 0 6px 18px rgba(0,0,0,.22); }

.lang-switch { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; font-size: .8rem; font-weight: 600; padding-left: 20px; border-left: 1px solid var(--c-line); }
.lang-switch__item { opacity: .6; color: var(--c-ink); transition: opacity .2s var(--ease), color .2s var(--ease); }
.lang-switch__item:hover { opacity: 1; }
.lang-switch__item.is-active { opacity: 1; color: var(--c-green) !important; }
.header__nav-label { display: none; }
.header__burger { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 0; align-items: center; }
.header__burger span { width: 24px; height: 1.5px; border-radius: 2px; background: var(--c-ink); transition: transform .3s var(--ease), opacity .2s var(--ease); }
.header__burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.header__burger.is-open span:nth-child(2) { opacity: 0; }
.header__burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
body.no-hero main { padding-top: 120px; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; overflow: hidden; color: #fff; }
.hero__media { position: absolute; left: 0; right: 0; top: -15vh; height: 130vh; background-size: cover; background-position: center; will-change: transform; }
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,32,26,.5) 0%, rgba(38,32,26,.18) 45%, rgba(38,32,26,.62) 100%); }
.hero__inner { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; padding-top: 80px; padding-bottom: 48px; }
.hero__center { text-align: center; margin: auto 0; }
.hero__title { max-width: 18ch; }
.hero__eyebrow { margin-top: 14px; font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.hero__eyebrow--top { margin: 0 0 18px; }
/* Scroll hint at the bottom-centre of the hero */
.hero__scroll { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.hero__scroll-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; opacity: .85; }
.hero__scroll-line { width: 1px; height: 50px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 45%; background: #fff; animation: hero-scroll 1.9s var(--ease) infinite; }
@keyframes hero-scroll { 0% { transform: translateY(-120%); } 60%, 100% { transform: translateY(260%); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-line::after { animation: none; } }
/* Hero intro: slower, more cinematic than the rest of the site. */
.hero__title.anim .word > span { transition-duration: 1.5s; }
.hero__eyebrow.reveal { transition-duration: 1.4s; transition-delay: .6s; }
.hero__eyebrow.reveal.is-visible { opacity: .9; }

.hero__feature { position: absolute; left: 24px; right: 24px; bottom: 32px; max-width: 560px; margin: 0 auto; background: rgba(255,255,255,.96); color: var(--c-ink); border-radius: var(--radius); padding: 16px; display: flex; gap: 16px; align-items: center; justify-content: space-between; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.hero__feature-info { display: flex; flex-direction: column; gap: 4px; }
.hero__feature-info strong { font-family: var(--font-display); font-size: 1.05rem; }
.hero__feature-info span { font-size: .85rem; color: var(--c-ink-soft); }
.hero__feature-price { color: var(--c-gold-dk) !important; font-weight: 600; }
.hero__feature .btn { margin-top: 6px; align-self: flex-start; }
.hero__feature-media { position: relative; flex-shrink: 0; }
.hero__feature-media img { width: 150px; height: 110px; object-fit: cover; border-radius: 10px; }
.hero__feature-badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: .64rem; font-weight: 600; padding: 4px 9px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em; }

/* Featured properties section: a hair off-white so white cards sit softly. */
.section--featured { background: #f7f5f0; }

/* ── Property card (Airbnb style, equal height) ──────────────── */
.grid--3 { align-items: stretch; }
.pcard { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--c-line); border-radius: 18px; padding: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.pcard__media { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; background: var(--c-soft); }
.pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease); }
.pcard__img--b { opacity: 0; transform: scale(1.08); }
.pcard:hover .pcard__img--a { opacity: 0; filter: blur(4px); transform: scale(1.06); }
.pcard:hover .pcard__img--b { opacity: 1; transform: scale(1.03); }
.pcard__badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(0,0,0,.78); color: #fff; font-size: .7rem; font-weight: 600; padding: 6px 12px; border-radius: 30px; text-transform: uppercase; letter-spacing: .05em; backdrop-filter: blur(4px); }
.pcard__badge--sold { background: var(--c-gold); color: #fff; }
.pcard__view { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, calc(-50% + 10px)); display: inline-flex; align-items: center; gap: 7px; background: #fff; color: #111; font-weight: 600; font-size: .8rem; padding: .5rem 1.05rem; border-radius: var(--radius-pill); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.pcard__view svg { color: #111; width: 15px; height: 15px; }
.pcard:hover .pcard__view { opacity: 1; transform: translate(-50%, -50%); }

/* Off-market: real photo hidden behind a heavy blur + brand overlay */
.pcard--off .pcard__img { filter: blur(14px) saturate(.95); transform: scale(1.16); }
.pcard--off:hover .pcard__img--a { opacity: 1; filter: blur(14px) saturate(.95); transform: scale(1.16); }
.pcard--off:hover .pcard__img--b { opacity: 0; }
.pcard--off .pcard__view { display: none; }
.pcard__off { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; background: linear-gradient(180deg, rgba(38,32,26,.55), rgba(38,32,26,.7)); }
.pcard__off-logo { width: 74px; height: auto; opacity: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.pcard__off-label { color: #D6C1A2; font-weight: 700; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; }
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 6px 4px; color: inherit; }
.pcard__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pcard__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 1.02rem + .45vw, 1.26rem); line-height: 1.25; margin: 0; transition: color .2s var(--ease); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2.5em; }
.pcard:hover .pcard__title { color: var(--c-gold-dk); }
.pcard__type { font-size: .82rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: .05em; margin-top: 6px; margin-bottom: 6px; }
.pcard__price { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--c-gold-dk); white-space: nowrap; }
.pcard__specs { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--c-ink-soft); font-size: .88rem; border-top: 1px solid var(--c-line); margin-top: auto; padding-top: 16px; }

/* ── About: "Nuestra historia" ───────────────────────────────── */
.about-story__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; }
.about-story__intro h2 { margin: 6px 0 0; }
.about-story__lead { margin: 22px 0 26px; font-size: 1.12rem; line-height: 1.7; color: var(--c-ink-soft); max-width: 46ch; }
.about-story__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 8%; border-radius: var(--radius); }
.about-story__cols { margin-top: clamp(36px, 5vw, 60px); columns: 2; column-gap: clamp(32px, 5vw, 64px); }
.about-story__cols p { margin: 0 0 1.2rem; color: var(--c-ink-soft); font-size: .96rem; line-height: 1.75; break-inside: avoid; }
@media (max-width: 900px) {
    .about-story__top { grid-template-columns: 1fr; }
    .about-story__media { order: -1; }
    .about-story__cols { columns: 1; }
}

/* ── Listing page: hero, filters, pagination ─────────────────── */
/* Image hero, deliberately shorter than 100vh so the filters peek below
   the fold and the user knows to scroll. */
.page-hero { position: relative; min-height: clamp(420px, 68vh, 720px); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; padding: 130px 0 70px; }
.page-hero__media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; background-size: cover; background-position: center; will-change: transform; }
.page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,32,26,.55) 0%, rgba(38,32,26,.32) 45%, rgba(38,32,26,.72) 100%); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: 10px; }
.page-hero h1 { margin: 0; color: #fff; }
.page-hero__sub { max-width: 56ch; margin: 16px auto 0; color: rgba(255,255,255,.85); font-size: 1.05rem; }
/* Tighter top so the filter bar shows just under the hero. */
.section--listing { padding-top: clamp(28px, 4vw, 44px); }

/* Listing hero intro (sits under the title, a bit wider than the default sub) */
.page-hero__sub--wide { max-width: 64ch; line-height: 1.7; }

/* SEO text block (wide & airy) */
.seo-block { max-width: 1040px; margin: 0 auto; text-align: center; }
.seo-block h2 { margin: 0 0 34px; }
.seo-block p { margin: 0 0 1.7rem; color: var(--c-ink-soft); line-height: 1.95; }
.seo-block p:last-child { margin-bottom: 0; }

/* Legal pages (privacy / cookies / legal notice) — readable single column */
.page-hero--legal { min-height: clamp(320px, 46vh, 460px); }
.legal-doc { max-width: 820px; margin: 0 auto; color: var(--c-ink-soft); }
.legal-doc__intro { font-size: 1.08rem; line-height: 1.85; color: var(--c-ink); margin: 0 0 2.4rem; }
.legal-doc__h { font-family: 'Inter Tight', sans-serif; font-size: 1.18rem; font-weight: 600; color: var(--c-green); margin: 2.6rem 0 .9rem; }
.legal-doc__h:first-of-type { margin-top: 0; }
.legal-doc p { margin: 0 0 1.1rem; line-height: 1.85; }
.legal-doc__list { margin: 0 0 1.4rem; padding-left: 1.2rem; }
.legal-doc__list li { margin: 0 0 .55rem; line-height: 1.7; }

.pfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pfilters__field { flex: 1 1 150px; min-width: 130px; padding: .7rem .9rem; border: 1px solid var(--c-line); border-radius: 10px; font: inherit; font-size: .9rem; color: var(--c-ink); background: #fff; }
.pfilters__field:focus { outline: none; border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(41,98,83,.12); }
.pfilters__apply { flex: 0 0 auto; height: 42px; padding: 0 1.8rem; font-weight: 500; }
.pfilters__reset { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink-soft); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); }
.pfilters__reset:hover { color: var(--c-green); border-color: var(--c-green); background: rgba(41,98,83,.06); }
.pfilters__reset svg { display: block; }
.pfilters__count { margin: 18px 2px 26px; color: var(--c-ink-soft); font-size: .9rem; }
.pfilters__empty { grid-column: 1 / -1; text-align: center; padding: 40px 0; }

.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 48px; }
.pagination__link { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 10px; color: var(--c-ink); font-weight: 600; font-size: .9rem; transition: all .2s var(--ease); }
.pagination__link:hover { border-color: var(--c-green); color: var(--c-green); }
.pagination__link.is-active { background: var(--c-green); border-color: var(--c-green); color: #fff; }

/* ── Property detail ─────────────────────────────────────────── */
/* Full-bleed hero with centred title + thumbnail strip. */
.pdh { position: relative; min-height: clamp(460px, 78vh, 820px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; padding: 130px 0 90px; }
.pdh__media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: background-image .4s var(--ease); }
.pdh__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,32,26,.45) 0%, rgba(38,32,26,.25) 45%, rgba(38,32,26,.65) 100%); }
/* Off-market detail hero: real photo hidden behind a heavy blur + brand mark */
.pdh--off .pdh__media { filter: blur(18px) saturate(.92); transform: scale(1.14); }
.pdh--off .pdh__overlay { background: linear-gradient(180deg, rgba(38,32,26,.55) 0%, rgba(38,32,26,.45) 45%, rgba(38,32,26,.72) 100%); }
.pdh--off .pdh__title, .pdh--off .pdh__address { color: #fff; }
.pdh__off { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 10px; }
.pdh__off-logo { width: clamp(96px, 12vw, 130px); height: auto; opacity: 1; filter: drop-shadow(0 3px 12px rgba(0,0,0,.38)); }
.pdh__off-label { color: #D6C1A2; font-weight: 700; font-size: clamp(.9rem, 1.4vw, 1.05rem); letter-spacing: .28em; text-transform: uppercase; }
.pd-offnote { margin: -4px 0 8px; font-size: .92rem; color: var(--c-brown); background: rgba(119,106,94,.08); border-left: 3px solid var(--c-green); padding: 10px 14px; border-radius: 8px; }
.pdh__inner { position: relative; z-index: 1; }
.pdh .pcard__badge { position: static; display: inline-flex; margin-bottom: 18px; background: #fff; color: var(--c-green); }
.pdh .pcard__badge--sold { background: var(--c-gold); color: #fff; }
.pdh__title { margin: 0; color: #fff; font-size: clamp(2.4rem, 6vw, 5rem); }
.pdh__address { margin: 12px 0 0; color: rgba(255,255,255,.88); font-size: 1.05rem; }
.pdh__thumbs { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 1; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 0 16px; }
.pdh__thumb { width: 92px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: none; opacity: .65; transition: opacity .25s var(--ease), border-color .25s var(--ease); }
.pdh__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdh__thumb:hover { opacity: 1; }
.pdh__thumb.is-active { opacity: 1; border-color: #fff; }

.pd-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.pd-back { display: inline-block; margin-bottom: 22px; }
.pd-title { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0; }
.pd-address { margin: 8px 0 0; color: var(--c-ink-soft); }
.pd-price { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--c-green); margin: 14px 0 24px; }
.pd-desc { color: var(--c-ink-soft); line-height: 1.8; font-size: 1.02rem; }
.pd-specs { list-style: none; margin: 30px 0 0; padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 40px; border-top: 1px solid var(--c-line); }
.pd-specs li { display: flex; flex-direction: column; gap: 2px; }
.pd-specs__n { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; color: var(--c-ink); }
.pd-specs li span:last-child { font-size: .8rem; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: .04em; }

/* Detail groups (Interior / Exterior / Area & Lot) — clean spec card */
.pd-detailcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
.pd-detailgroup { padding: clamp(24px, 2.4vw, 36px); border-left: 1px solid var(--c-line); }
.pd-detailgroup:first-child { border-left: 0; }
.pd-detailgroup__title { font-family: var(--font-display); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-green); margin: 0 0 16px; }
.pd-details { margin: 0; }
.pd-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.pd-details > div:last-child { border-bottom: 0; }
.pd-details dt { color: var(--c-ink-soft); margin: 0; font-size: .92rem; }
.pd-details dd { margin: 0; font-weight: 600; color: var(--c-ink); text-align: right; font-size: .92rem; }
.pd-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.pd-features li { position: relative; padding: 12px 0 12px 24px; color: var(--c-ink); font-size: .92rem; border-bottom: 1px solid var(--c-line); }
.pd-features li:last-child { border-bottom: 0; }
.pd-features li::before { content: '✓'; position: absolute; left: 0; top: 12px; color: var(--c-green); font-weight: 700; }
.pd-section--map { margin-top: 48px; }
.pd-map { height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); z-index: 0; }

/* Auto-scrolling, full-bleed image marquee with faded edges */
.pd-marquee { position: relative; width: 100%; overflow: hidden; padding: 18px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.pd-marquee__track { display: flex; gap: 18px; width: max-content; animation: pd-scroll 60s linear infinite; }
.pd-marquee__item { flex: 0 0 auto; width: clamp(300px, 38vw, 560px); aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; }
.pd-marquee__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes pd-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pd-marquee__track { animation: none; } }

/* Sticky request card + agent (with photo) */
.pd-card { position: sticky; top: 110px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.pd-card__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 6px; }
.pd-card__text { color: var(--c-ink-soft); font-size: .92rem; margin: 0 0 18px; }
.pd-form { display: flex; flex-direction: column; gap: 10px; }
.pd-form input, .pd-form textarea { width: 100%; padding: .85rem 1rem; border: 1px solid var(--c-line); border-radius: 10px; font: inherit; color: var(--c-ink); background: #fff; }
.pd-form .btn { margin-top: 4px; }
.pd-agent { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--c-line); display: flex; align-items: center; gap: 14px; }
.pd-agent__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 15%; flex: 0 0 auto; }
.pd-agent__info { display: flex; flex-direction: column; gap: 1px; }
.pd-agent__info strong { font-family: var(--font-display); }
.pd-agent__role { font-size: .76rem; color: var(--c-ink-soft); margin-bottom: 3px; }
.pd-agent__info a { color: var(--c-green); font-size: .9rem; }
.pd-agent__info a:hover { color: var(--c-green-mid); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Interested banner — fades into the footer green at the bottom. */
.pd-banner { position: relative; overflow: hidden; background: var(--grad-green); color: #fff; }
.pd-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(14,59,54,0) 0%, var(--c-green) 100%); pointer-events: none; z-index: 0; }
.pd-banner__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-block: clamp(48px, 6vw, 80px); }
.pd-banner__text h2 { margin: 0; color: #fff; }
.pd-banner__text p { margin: 12px 0 0; color: rgba(255,255,255,.85); max-width: 46ch; }
.pd-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.pd-banner__wa { background: #25d366; color: #fff; gap: 8px; }
.pd-banner__wa:hover { background: #1ebe5b; color: #fff; }
.pd-banner .btn--pill { background: #fff; color: var(--c-green); }
.pd-banner .btn--pill:hover { background: var(--c-beige); color: var(--c-green); }

@media (max-width: 900px) {
    .pd-grid { grid-template-columns: 1fr; }
    .pd-detailcols { grid-template-columns: 1fr; }
    .pd-detailgroup { border-left: 0; border-top: 1px solid var(--c-line); }
    .pd-detailgroup:first-child { border-top: 0; }
    .pd-card { position: static; }
    .pdh__thumb { width: 70px; height: 50px; }
}

/* ── More Than Real Estate (banner + stats) ──────────────────── */
.mtre { position: relative; color: #fff; overflow: hidden; background: var(--grad-green); }
.mtre__inner { position: relative; padding-block: clamp(48px, 6vw, 90px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); }
.mtre__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.mstat { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.mstat__num, .mstat__suffix { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: -.03em; }
.mstat__label { flex-basis: 100%; font-size: .95rem; color: rgba(255,255,255,.75); }

/* More-than-real-estate: experience (left) + partner services (right) */
.mtre__cols { display: grid; grid-template-columns: 1.5fr minmax(160px, .7fr); gap: clamp(32px, 5vw, 70px); align-items: start; }
.mtre__head { margin-bottom: 22px; }
.mtre__figure { position: sticky; top: 120px; text-align: right; }
.mtre__figure .mstat { justify-content: flex-end; }
.mstat--xl .mstat__label { text-align: right; }
.mstat--xl .mstat__num, .mstat--xl .mstat__suffix { font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }
.mtre__lead { font-size: .98rem; color: rgba(255,255,255,.82); margin: 0 0 20px; max-width: 60ch; }
.mtre__services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.mservice { position: relative; padding-left: 26px; }
.mservice::before { content: ""; position: absolute; left: 0; top: .5em; width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); }
.mservice__title { display: block; font-family: var(--font-display); font-size: 1.08rem; letter-spacing: -.01em; margin-bottom: 3px; }
.mservice__text { display: block; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.78); }

/* ── Split (quote + image) ───────────────────────────────────── */
.section--split { padding-top: clamp(60px, 8vw, 110px); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.split__quote { font-size: clamp(1.6rem, 3vw, 2.6rem); margin-bottom: 1.5rem; }
.split__body p { margin: 0 0 2rem; max-width: 52ch; color: var(--c-ink-soft); }
.split__actions { display: flex; gap: 24px; align-items: center; }
.split__media img { border-radius: var(--radius); width: 100%; object-fit: cover; object-position: 50% 6%; aspect-ratio: 1/1; }

/* ── Testimonials ────────────────────────────────────────────── */
.tgrid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; }
.tfeatured { position: relative; border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center; min-height: 460px; display: flex; align-items: flex-end; color: #fff; }
.tfeatured__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.82)); }
.tfeatured__content { position: relative; padding: 34px; }
.tfeatured__content blockquote { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; margin: 0 0 20px; }
.tfeatured__meta { display: flex; flex-direction: column; }
.tfeatured__meta strong { font-size: 1rem; }
.tfeatured__meta span { font-size: .85rem; opacity: .8; }
.tfeatured__trust { margin-top: 16px; font-size: .82rem; opacity: .85; }
.stars { color: var(--c-gold); letter-spacing: 2px; }
.tlist { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-content: start; }
.tcard { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 22px; }
.section--soft .tcard { background: #fff; }
.tcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tcard__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--c-gold); color: #fff; display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); }
.tcard__head strong { display: block; font-size: .92rem; }
.tcard__head span { font-size: .8rem; color: var(--c-ink-soft); }
.tcard p { margin: 0; color: var(--c-ink-soft); font-size: .92rem; }

/* ── Zones / neighbourhoods ──────────────────────────────────── */
.zones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.zone-card { position: relative; aspect-ratio: 3/3.4; border-radius: var(--radius); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 22px; overflow: hidden; }
.zone-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.72)); transition: background .4s var(--ease); }
.zone-card:hover::after { background: linear-gradient(180deg, rgba(0,0,0,.1) 20%, rgba(0,0,0,.8)); }
.zone-card__foot { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zone-card__name { color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; }
.zone-card__arrow { flex: 0 0 auto; color: #fff; transition: transform .35s var(--ease); }
.zone-card:hover .zone-card__arrow { transform: translate(3px, -3px); }

/* ── As Seen In ──────────────────────────────────────────────── */
.section--logos { padding-bottom: clamp(40px, 6vw, 80px); }
.logos-banner { position: relative; overflow: hidden; padding: clamp(80px, 12vw, 180px) 0 clamp(50px, 7vw, 90px); color: #fff; background-size: cover; background-position: center; }
.logos-banner__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.6)); }
.logos-banner .container { position: relative; }
.logos { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 30px; padding: 50px 0 0; opacity: .45; }
.logos__item { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .08em; }

/* ── Blog (asymmetric) ───────────────────────────────────────── */
.blog-split { display: grid; grid-template-columns: .9fr 1.4fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.blog-split__head .btn { margin-top: 26px; }
.blog-split__head .section__sub { margin-top: 16px; }
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bcard__media { position: relative; display: block; aspect-ratio: 3/2; border-radius: var(--radius); overflow: hidden; }
.bcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.05); }
.bcard__date { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.92); color: var(--c-ink); font-size: .72rem; font-weight: 600; padding: 5px 11px; border-radius: 20px; }
.bcard__title { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; line-height: 1.2; margin: 14px 0 0; }
.bcard__title a:hover { color: var(--c-gold-dk); }

/* Blog index grid + cards */
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.posts-grid .bcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 14px; }
.bcard__meta { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-ink-soft); }
.posts-grid .bcard__title { margin: 0; }
.bcard__excerpt { margin: 2px 0 6px; color: var(--c-ink-soft); font-size: .92rem; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Single post */
.post-hero { position: relative; min-height: clamp(360px, 56vh, 620px); display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.post-hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.04); }
.post-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,32,26,.35) 0%, rgba(38,32,26,.3) 40%, rgba(38,32,26,.82) 100%); }
.post-hero__inner { position: relative; z-index: 1; padding-top: 140px; padding-bottom: 56px; }
.post-hero__back { display: inline-block; color: rgba(255,255,255,.85); font-size: .85rem; margin-bottom: 18px; }
.post-hero__back:hover { color: #fff; }
.post-hero h1 { margin: 8px 0 0; color: #fff; max-width: 20ch; }
.post-body { max-width: 760px; }
.post-body p { margin: 0 0 1.3rem; color: var(--c-ink-soft); line-height: 1.8; font-size: 1.05rem; }
.post-body h2, .post-body h3 { font-family: var(--font-display); color: var(--c-ink); margin: 2.2rem 0 .8rem; }
.post-body h2 { font-size: 1.7rem; }
.post-body h3 { font-size: 1.3rem; }
.post-body img { width: 100%; border-radius: var(--radius); margin: 1.5rem 0; }
.post-body ul, .post-body ol { color: var(--c-ink-soft); line-height: 1.8; margin: 0 0 1.3rem 1.2rem; }
.post-body a { color: var(--c-green); text-decoration: underline; }
/* Buttons / CTA links inside the post body must keep their own styling,
   not the inline-link rule above (which would make button text green-on-green). */
.post-body .btn { color: #fff; text-decoration: none; }
.post-body .btn--pill:hover { color: #fff; }
.post-body__cta .link-arrow { color: var(--c-green); text-decoration: none; }
.post-body__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--c-line); }

/* ── Let's Talk ──────────────────────────────────────────────── */
.letstalk { position: relative; overflow: hidden; color: #fff; background: var(--grad-green); }
/* Fade the bottom into the footer green so the section change is seamless. */
.letstalk::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; background: linear-gradient(180deg, rgba(14,59,54,0) 0%, var(--c-green) 100%); pointer-events: none; z-index: 0; }
.letstalk__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 50px); align-items: center; padding-block: clamp(60px, 9vw, 130px); }
.letstalk__intro p { color: rgba(255,255,255,.82); max-width: 38ch; margin-top: 1rem; }
.letstalk__form { background: #fff; border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.letstalk__form input, .letstalk__form select, .letstalk__form textarea { width: 100%; padding: .9rem 1.1rem; border: 1px solid var(--c-line); border-radius: 10px; font: inherit; color: var(--c-ink); background: #fff; }
.letstalk__form .btn { margin-top: 6px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Contact form feedback notice (success / error) */
.form-note { margin: 0; padding: .8rem 1rem; border-radius: 10px; font-size: .92rem; line-height: 1.4; }
.form-note--ok { background: #e7f3ee; color: #0e3b36; border: 1px solid #b7dccd; }
.form-note--err { background: #fbeaea; color: #8a1f1f; border: 1px solid #eecaca; }

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.faq-split__head .section__sub { margin-top: 16px; }
.faq__item { border: 1px solid var(--c-line); border-radius: 12px; padding: 4px 22px; margin-bottom: 14px; transition: box-shadow .3s var(--ease); }
.faq__item[open] { box-shadow: var(--shadow); }
.faq__item summary { font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; color: var(--c-gold); font-size: 1.5rem; line-height: 1; }
.faq__item[open] summary::after { content: '−'; }
.faq__item p { color: var(--c-ink-soft); margin: 0 0 18px; }

/* ── Footer (dark image bg) ──────────────────────────────────── */
.site-footer { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--c-green) 0%, #0a2c28 100%); color: #cfcccc; padding: clamp(60px, 7vw, 100px) 0 30px; }
.site-footer__texture { display: none; }
.site-footer__inner { position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 50px; align-items: center; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.footer-brand__info { display: flex; flex-direction: column; gap: 4px; }
.footer-brand__name { color: #fff; font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; letter-spacing: .01em; }
.footer-brand__email { color: #b9b6b3; font-size: .82rem; transition: color .2s var(--ease); }
.footer-brand__email:hover { color: var(--c-gold); }
.footer-logo { color: #fff; display: inline-block; }
.footer-logo-img { height: 78px; width: auto; display: block; }
.footer-news h3 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 12px; }
.footer-news p { color: #b9b6b3; max-width: 40ch; margin: 0 0 20px; }
.footer-news__form { display: flex; gap: 10px; max-width: 420px; }
.footer-news__form input { flex: 1; padding: .9rem 1.2rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-pill); background: rgba(255,255,255,.06); color: #fff; }
.footer-news__form input::placeholder { color: #9a9794; }
.footer-social { display: flex; gap: 12px; margin-top: 22px; }
.footer-social a { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: #fff; transition: all .25s var(--ease); }
.footer-social a:hover { background: var(--c-gold); color: #fff; border-color: var(--c-gold); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 30px; }
.footer-col h4 { color: #fff; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 14px; }
.footer-col a { display: block; padding: 4px 0; font-size: .85rem; color: #b9b6b3; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--c-gold); }
.footer-office { margin-bottom: 14px; line-height: 1.5; }
.footer-office strong { display: block; color: #fff; font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.footer-contact { margin-bottom: 16px; line-height: 1.6; }
.footer-contact strong { display: block; color: #fff; font-weight: 600; font-size: .92rem; margin-bottom: 2px; }
.footer-contact a { padding: 1px 0; }
.footer-disclaimer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 32px; margin-top: 50px; }
.footer-disclaimer { margin: 0; font-size: .76rem; color: #807d7a; max-width: 90ch; line-height: 1.7; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .76rem; color: #fff; }
.footer-bottom a { color: #fff; }
.footer-bottom a:hover { color: #fff; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .76rem; }
.footer-legal a { color: #fff; white-space: nowrap; }
.footer-legal a:hover { color: #fff; }
.footer-credit-row { display: flex; justify-content: flex-end; }
.footer-credit { font-size: .76rem; color: #fff; white-space: nowrap; }

/* ── Cookie banner (compact, bottom-right) ───────────────────── */
/* Floating WhatsApp button (bottom-right); the cookie popup sits above it. */
.wa-fab { position: fixed; right: 24px; bottom: 24px; z-index: 95; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--c-green); border: 1px solid var(--c-line); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.18); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.wa-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px rgba(0,0,0,.24); color: var(--c-green); }
.wa-fab svg { display: block; width: 26px; height: 26px; }

.cookie-banner { position: fixed; right: 24px; bottom: 88px; left: auto; z-index: 100; width: min(360px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 120px); overflow-y: auto; }
.cookie-banner[hidden] { display: none; }
.cookie-banner__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--c-ink); }
.cookie-banner__text { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--c-ink-soft); }
.cookie-banner__text a { color: var(--c-gold-dk); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.cookie-banner .btn { padding: .5rem 1.05rem; font-size: .8rem; }

/* Granular categories */
.cookie-cats { border-top: 1px solid var(--c-line); padding-top: 6px; }
.cookie-cats > summary { cursor: pointer; list-style: none; font-size: .8rem; font-weight: 600; color: var(--c-green); padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; }
.cookie-cats > summary::-webkit-details-marker { display: none; }
.cookie-cats > summary::after { content: '+'; font-size: 1rem; line-height: 1; }
.cookie-cats[open] > summary::after { content: '–'; }
.cookie-cat { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--c-line); }
.cookie-cat:first-of-type { border-top: 0; }
.cookie-cat__txt { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cookie-cat__txt strong { font-size: .82rem; color: var(--c-ink); }
.cookie-cat__txt small { font-size: .72rem; line-height: 1.4; color: var(--c-ink-soft); }
.cookie-cat__on { font-size: .68rem; font-weight: 600; color: var(--c-ink-soft); white-space: nowrap; align-self: center; }
.cookie-cat input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--c-green); margin-top: 2px; cursor: pointer; }
.cookie-cat input[type="checkbox"]:disabled { cursor: default; opacity: .5; }

/* ── Bottom scroll blur (subtle, like the reference) ─────────── */
.scroll-blur { position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: 40; pointer-events: none; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-mask-image: linear-gradient(to top, #000 12%, transparent 100%); mask-image: linear-gradient(to top, #000 12%, transparent 100%); }

/* ── Errors ──────────────────────────────────────────────────── */
.section--error { padding-top: 200px; }
.error__code { font-size: clamp(4rem, 14vw, 10rem); color: var(--c-gold); }

/* ── Animations ──────────────────────────────────────────────── */
/* Generic block reveal (progressive enhancement: only active with JS).
   Uses the independent `translate`/`scale` properties so it never clashes
   with hover effects that animate `transform`. Cascades via --d (set in JS). */
html.js .reveal {
    opacity: 0; translate: 0 44px;
    transition: opacity var(--rev-dur) var(--ease-out),
                translate var(--rev-dur) var(--ease-out),
                scale var(--rev-dur) var(--ease-out);
    transition-delay: calc(var(--d, 0) * var(--rev-stagger));
    will-change: opacity, translate, scale;
}
html.js .reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; }

/* Cards add a subtle zoom-in for an extra polished feel. */
html.js .pcard.reveal, html.js .zone-card.reveal,
html.js .bcard.reveal, html.js .tcard.reveal,
html.js .tfeatured.reveal, html.js .mstat.reveal,
html.js .faq__item.reveal { scale: .955; }

/* Word-by-word text reveal for headings.
   padding-bottom + negative margin keeps descenders (g, j, p, y) from being
   clipped by the overflow:hidden mask. */
html.js .anim .word { display: inline-block; overflow: hidden; vertical-align: top; margin-right: .22em; padding-bottom: .16em; margin-bottom: -.16em; }
html.js .anim .word > span { display: inline-block; opacity: 0; transform: translateY(115%); transition: transform var(--text-dur) var(--ease-out), opacity var(--text-dur) var(--ease-out); }
html.js .anim.is-visible .word > span { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    html.js .reveal, html.js .anim .word > span {
        opacity: 1 !important; transform: none !important;
        translate: none !important; scale: none !important;
        transition: none !important; animation: none !important;
    }
    html { scroll-behavior: auto; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .tgrid { grid-template-columns: 1fr; }
    .blog-split, .faq-split { grid-template-columns: 1fr; }
    .letstalk__inner { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .posts-grid { grid-template-columns: repeat(2, 1fr); }
    .zones { grid-template-columns: repeat(2, 1fr); }
    .split { grid-template-columns: 1fr; }
    .split__media { order: -1; }
    .section__head--split { grid-template-columns: 1fr; gap: 16px; }
    .mtre__stats { grid-template-columns: 1fr; gap: 24px; }
    .mtre__cols { grid-template-columns: 1fr; gap: 24px; }
    .mtre__figure { position: static; top: auto; text-align: left; order: -1; }
    .mtre__figure .mstat { justify-content: flex-start; }
    .mstat--xl .mstat__label { text-align: left; }
}
@media (max-width: 720px) {
    /* Slimmer closed bar, a touch higher up. */
    .site-header { padding-top: 14px; }
    .header__inner { display: flex; justify-content: space-between; height: 56px; width: calc(100% - 32px); padding: 0 10px 0 20px; gap: 14px; }
    .header__logo img { height: 26px; }
    .header__cta { display: none; }            /* CTA lives inside the popup on mobile */
    /* Slightly larger hero title on phones for more impact. */
    .hero__title { font-size: clamp(3.3rem, 11vw, 4.2rem); }
    body.no-hero main { padding-top: 92px; }

    /* Full-screen popup menu (Oakline style). */
    .header__nav { display: flex; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh;
        background: var(--c-bg); flex-direction: column; align-items: stretch; justify-content: flex-start;
        gap: 0; padding: 86px 26px 40px; overflow-y: auto; z-index: 55;
        opacity: 0; transform: translateY(-10px); pointer-events: none;
        transition: opacity .32s var(--ease), transform .32s var(--ease); }
    .header__nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
    .header__links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
    .header__right { display: flex; flex-direction: column; align-items: flex-start; }
    .header__nav-label { display: block; color: var(--c-ink-soft); opacity: .55; font-size: .82rem; letter-spacing: .04em; margin: 0 0 14px; }
    .header__nav-label--lang { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--c-line); }
    .header__links a { flex: 0 0 auto; font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; color: var(--c-ink); padding: 9px 0; }
    .header__links a::after { display: none; }
    .header__links a:hover { color: var(--c-green); }
    .lang-switch { padding-left: 0; border-left: 0; gap: 22px; font-size: 1rem; }
    .lang-switch__item { opacity: .85; }
    .header__nav .header__cta { display: inline-flex; align-self: flex-start; margin: 30px 0 0; height: 48px; padding: 0 2.6rem !important; }

    /* Clean top bar while the popup is open (no pill outline). */
    body.nav-open { overflow: hidden; }
    body.nav-open .header__inner { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .header__logo { position: relative; z-index: 60; }
    .header__burger { display: flex; position: relative; z-index: 60; }

    .letstalk__form { padding: 20px; }
    .mstat__num, .mstat__suffix { font-size: clamp(2.4rem, 13vw, 3.4rem); }
    .grid--3, .blog-grid, .posts-grid, .tlist, .zones { grid-template-columns: 1fr; }
    .hero__feature { flex-direction: column; align-items: stretch; }
    .hero__feature-media img { width: 100%; height: 150px; }
    .footer-top { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ════════════════════════════════════════════════════════════════
   BEIGE REBRAND — the former dark-green sections are now light beige,
   so their text flips from white to brand taupe for legibility.
   ════════════════════════════════════════════════════════════════ */
.mtre, .pd-banner, .letstalk { color: var(--c-brown); }
.mtre .eyebrow--light, .pd-banner .eyebrow--light, .letstalk .eyebrow--light { color: var(--c-brown); opacity: .7; }
.mtre__lead, .mservice__text, .mstat__label,
.pd-banner__text p, .letstalk__intro p { color: rgba(119,106,94,.85); }
.mservice__title, .mstat__num, .mstat__suffix, .pd-banner__text h2 { color: var(--c-brown); }
.mservice::before { border-color: rgba(119,106,94,.5); }
/* bottom fades of the banners used to dissolve into dark green → beige now */
.pd-banner::after, .letstalk::after { background: linear-gradient(180deg, rgba(238,232,224,0) 0%, #e6dccb 100%); }

/* Footer → beige surface with dark taupe text */
.site-footer { background: linear-gradient(180deg, #efe9e1 0%, #e6dccb 100%); color: var(--c-brown); }
.footer-brand__name, .footer-logo, .footer-news h3, .footer-col h4,
.footer-office strong, .footer-contact strong { color: var(--c-brown); }
.footer-brand__email, .footer-news p, .footer-col a, .footer-disclaimer { color: #8a7d6f; }
.footer-news__form input { border-color: rgba(0,0,0,.14); background: rgba(255,255,255,.5); color: var(--c-brown); }
.footer-news__form input::placeholder { color: #a39684; }
.footer-social a { border-color: rgba(0,0,0,.18); color: var(--c-brown); }
.footer-social a:hover { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.footer-bottom { border-top-color: rgba(0,0,0,.12); color: var(--c-brown); }
.footer-bottom a, .footer-legal a, .footer-credit { color: var(--c-brown); }
.footer-col a:hover, .footer-bottom a:hover, .footer-legal a:hover,
.footer-brand__email:hover { color: var(--c-green); }