/* =============================================================
   BOLD SIGNATURE HOMES — site styles (new-bold)
   Tokens imported from ./assets/colors_and_type.css
   "The silence of absolute design."
   ============================================================= */

@import url('./assets/colors_and_type.css');

/* ─────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────── */
html, body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-weight: 300;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--accent); text-decoration: none; transition: color 240ms var(--ease-silk); }
a:hover { color: var(--accent-hover); }

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

::selection { background: var(--accent); color: var(--fg-on-accent); }

.bsh-container {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
}

/* legacy helpers kept to avoid breaking embedded references — neutralised */
.border-id-lg,
.border-id-sm { border-radius: var(--radius-0); }

/* ─────────────────────────────────────────────────────────────
   Reusable button
   ───────────────────────────────────────────────────────────── */
.bsh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px 36px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	background: var(--accent);
	color: var(--fg-on-accent);
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: background 240ms var(--ease-silk),
	            color 240ms var(--ease-silk),
	            box-shadow 240ms var(--ease-silk),
	            border-color 240ms var(--ease-silk);
}

.bsh-btn:hover, .bsh-btn:focus-visible {
	background: var(--accent-hover);
	color: var(--fg-on-accent);
	box-shadow: 0 0 32px -6px rgba(94, 26, 34, 0.35);
	outline: none;
}

.bsh-btn.ghost {
	background: transparent;
	border-color: var(--rule-strong);
	color: var(--fg);
}

.bsh-btn.ghost:hover, .bsh-btn.ghost:focus-visible {
	background: rgba(94, 26, 34, 0.06);
	border-color: var(--accent);
	color: var(--accent);
	box-shadow: none;
}

.bsh-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--accent);
	padding: 8px 0;
	border-bottom: 1px solid var(--accent);
	width: max-content;
	transition: color 240ms var(--ease-silk),
	            border-color 240ms var(--ease-silk),
	            gap 240ms var(--ease-silk);
}

.bsh-link:hover {
	color: var(--accent-hover);
	border-color: var(--accent-hover);
	gap: 16px;
}

.bsh-link-icon { color: currentColor; flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */
.custom-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	padding: 20px 56px;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 480ms var(--ease-silk),
	            backdrop-filter 480ms var(--ease-silk),
	            border-color 480ms var(--ease-silk);
}

.header-scrolled {
	background-color: rgba(236, 228, 214, 0.85);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--rule);
}

.logo-grid {
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 32px;
}

.brand-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.brand-wordmark img {
	/* Wordmark oficial (Bold.png) — preto. Sobre o hero é invertido p/ branco;
	   ao rolar (header bege) volta ao preto natural. */
	height: 60px;
	width: auto;
	max-width: none;
	display: block;
	filter: invert(1);
	transition: filter 480ms var(--ease-silk), height 240ms var(--ease-silk);
}

.header-scrolled .brand-wordmark img { filter: none; }

.header-nav {
	flex: 1;
	display: flex;
	justify-content: center;
	gap: 44px;
}

.header-nav a {
	position: relative;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(246, 241, 232, 0.86);
	transition: color 240ms var(--ease-silk);
}

/* Traço em hover: entra da direita para a esquerda e sai pela esquerda — a origem
   troca de lado entre o estado base e o :hover, então a saída continua o mesmo
   sentido do movimento em vez de voltar por onde veio.
   currentColor acompanha as duas versões do header (bone sobre a foto, bordô
   depois do scroll). O 0.18em descontado da largura é o letter-spacing que sobra
   depois da última letra — sem isso o traço passa da palavra à direita. */
.header-nav a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -7px;
	width: calc(100% - 0.18em);
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 380ms var(--ease-silk);
}

.header-nav a:hover::after {
	transform: scaleX(1);
	transform-origin: right;
}

.header-nav a:hover { color: var(--bsh-bone); }

.header-scrolled .header-nav a { color: var(--fg-secondary); }
.header-scrolled .header-nav a:hover { color: var(--accent); }

.language-icon {
	display: flex;
	align-items: center;
	gap: 10px;
}

.language-icon .change-language {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.16em;
	color: rgba(246, 241, 232, 0.7);
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
	text-transform: uppercase;
	transition: color 240ms var(--ease-silk);
}

.language-icon .change-language:hover { color: var(--bsh-bone); }
.language-icon .change-language.active { color: var(--bsh-bone); }

.language-icon .lang-sep { color: rgba(246, 241, 232, 0.4); }

.header-scrolled .language-icon .change-language { color: var(--fg-secondary); }
.header-scrolled .language-icon .change-language:hover,
.header-scrolled .language-icon .change-language.active { color: var(--accent); }
.header-scrolled .language-icon .lang-sep { color: var(--bsh-brushed-metal-dim); }

.menu-wrapper { position: relative; }

.menu-icon {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--bsh-bone);
	cursor: pointer;
	user-select: none;
	padding: 4px 0 4px 16px;
	border-left: 1px solid rgba(246, 241, 232, 0.3);
	transition: color 240ms var(--ease-silk);
}

.header-scrolled .menu-icon { color: var(--fg); border-left-color: var(--rule); }

.dropdown-menu {
	position: absolute;
	top: 200%;
	right: 0;
	background: var(--bg-card);
	border: 1px solid var(--rule);
	padding: 24px 28px;
	display: none;
	flex-direction: column;
	gap: 16px;
	min-width: 220px;
	z-index: 1000;
}

.dropdown-menu.active { display: flex; }

.dropdown-link {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--fg-secondary);
}

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

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
.hero {
	position: relative;
	min-height: 100dvh;
	overflow: hidden;
	background: var(--bsh-espresso);
	display: flex;
	align-items: center;
}

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

.hero-image {
	position: absolute; inset: 0;
	/* Fachada da Model Home (Pendio Dr). TODO asset: trocar pela versão final/alta do Drive se vier melhor enquadrada. */
	background-image: url('./imgs/model-home-1/mh1-hero.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: contrast(1.02);
	z-index: 0;
}

/* Carrossel do hero — cross-fade automático a cada 3s (ver scripts.js).
   Só a slide .is-active fica visível; as demais ficam empilhadas em opacity 0. */
.hero-slide {
	opacity: 0;
	transition: opacity var(--dur-grand) var(--ease-marble);
	will-change: opacity;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide:nth-child(1) { background-image: url('./imgs/model-home-1/mh1-hero.jpg'); }
/* Slides 2-4 não declaram a foto aqui de propósito: as quatro baixariam juntas
   no primeiro paint, ~1,4 MB para três imagens invisíveis. O scripts.js atribui
   o background a partir do data-bg depois que a página termina de carregar. */

@media (prefers-reduced-motion: reduce) {
	.hero-slide { transition: none; }
	.header-nav a::after { transition: none; }
}

.hero-veil {
	position: absolute; inset: 0;
	/* Sem copy sobre a foto, o veil só protege a faixa inferior (scroll + assinatura)
	   e tira um pouco do estouro no topo. A imagem fica limpa no miolo. */
	background:
		linear-gradient(180deg, rgba(33,26,21,0.34) 0%, rgba(33,26,21,0) 26%, rgba(33,26,21,0) 58%, rgba(33,26,21,0.62) 100%);
	z-index: 1;
}

@keyframes bsh-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Assinatura do hero — segue sendo o <h1> da página, mas em escala discreta:
   a foto é o protagonista. Ancorada à direita, em oposição ao "Scroll". */
.hero-signature {
	position: absolute;
	right: 56px;
	bottom: 40px;
	z-index: 2;
	max-width: 34ch;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(15px, 1.5vw, 19px);
	line-height: 1.5;
	letter-spacing: 0.01em;
	text-align: right;
	text-wrap: balance;
	color: rgba(246, 241, 232, 0.78);
	text-shadow: 0 1px 18px rgba(33, 26, 21, 0.55);
	opacity: 0;
	animation: bsh-fade-up 1400ms var(--ease-silk) 700ms forwards;
}

.hero-signature em { font-style: italic; color: var(--bsh-bone); }

.hero-scroll {
	position: absolute;
	left: 56px;
	bottom: 40px;
	display: flex;
	align-items: center;
	gap: 16px;
	z-index: 2;
	opacity: 0;
	animation: bsh-fade-up 1400ms var(--ease-silk) 700ms forwards;
}

/* Mesmo bone da .hero-signature — os dois âncoras da base falam no mesmo tom. */
.hero-scroll-rule { width: 1px; height: 48px; background: rgba(246, 241, 232, 0.78); }

.hero-scroll span {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: rgba(246, 241, 232, 0.78);
	text-shadow: 0 1px 18px rgba(33, 26, 21, 0.55);
}

/* ─────────────────────────────────────────────────────────────
   Philosophy
   ───────────────────────────────────────────────────────────── */
.philosophy {
	background: var(--bg);
	padding: var(--space-11) 0;
	border-top: 1px solid var(--rule);
}

.philosophy-eyebrow,
.info-eyebrow,
.specs-eyebrow,
.projects-eyebrow,
.contact-eyebrow {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 24px;
	display: block;
}

.philosophy-statement {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 4.4vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin: 0 0 var(--space-8) 0;
	max-width: 1000px;
	text-wrap: balance;
}

.philosophy-statement em { font-style: italic; font-weight: 400; }

.philosophy-grid {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: var(--space-8);
	margin-top: var(--space-8);
	max-width: 1100px;
	align-items: center;
}

.philosophy-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--bg-card);
}

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

.philosophy-copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	align-items: flex-start;
}

.philosophy-body {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	color: var(--fg-secondary);
	max-width: 56ch;
	margin: 0;
}

.philosophy-copy .bsh-btn { margin-top: var(--space-2); }

/* ----- How We Build: shared sub-eyebrow ----- */
.ph-sub-eyebrow {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--accent);
	display: block;
	margin-bottom: var(--space-6);
}

/* ----- How We Build: process ----- */
.ph-process {
	margin-top: var(--space-10);
	max-width: 1100px;
}

.ph-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-7);
	border-top: 1px solid var(--rule);
	padding-top: var(--space-7);
}

.ph-step {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.ph-step-num {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	font-size: 22px;
	color: var(--accent);
	letter-spacing: 0;
}

.ph-step-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--fg);
	margin: 0;
}

.ph-step-text {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--fg-secondary);
	margin: 0;
}

/* ----- How We Build: story / timeline ----- */
.ph-story {
	margin-top: var(--space-10);
	max-width: 1100px;
}

/* Texto à esquerda, foto à direita. A altura da linha é dada pela foto;
   a copy fica centrada verticalmente ao lado dela. */
.ph-story-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-7);
	align-items: center;
	margin-bottom: var(--space-8);
}

.ph-story-media { overflow: hidden; }

.ph-story-media img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ph-story-lead {
	font-family: var(--font-display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--fg);
	/* margem inferior agora é do .ph-story-head */
	margin: var(--space-3) 0 0 0;
	max-width: 24ch;
	text-wrap: balance;
}

.ph-timeline {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-7);
	border-top: 2px solid var(--rule);
	padding-top: var(--space-7);
}

.ph-milestone {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	position: relative;
}

/* Nó sobre a linha do tempo */
.ph-milestone::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--space-7) - 7px);
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 5px var(--bg);
}

.ph-year {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.18em;
	color: var(--accent);
}

.ph-milestone-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--fg);
	margin: 0;
}

.ph-milestone-text {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--fg-secondary);
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Info — Florida lifestyle
   ───────────────────────────────────────────────────────────── */
.info {
	background: var(--bsh-anthracite-soft);
	padding: var(--space-11) 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.info-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9);
	align-items: center;
}

.info-media {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.info-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 5/4;
	border: 1px solid var(--rule);
	overflow: hidden;
}

.info-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: contrast(1.03);
}

.info-frame-meta {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fg-tertiary);
	display: flex;
	align-items: center;
	gap: 12px;
}

.info-frame-meta::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--accent);
}

.info-text-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(40px, 4.4vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin: 0 0 var(--space-5) 0;
	padding: 0;
	text-wrap: balance;
}

.info-text-title em { font-style: italic; font-weight: 400; }

.info-text {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.7;
	color: var(--fg-secondary);
	max-width: 56ch;
	margin: 0 0 var(--space-6) 0;
	padding: 0;
}

.info-text strong { color: var(--fg); font-weight: 400; }

/* ─────────────────────────────────────────────────────────────
   Model Home gallery
   ───────────────────────────────────────────────────────────── */
.gallery {
	background: var(--bg);
	padding: var(--space-11) 0;
	border-bottom: 1px solid var(--rule);
	overflow: hidden;
}

.gallery-head { margin-bottom: var(--space-8); }

.gallery-eyebrow {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 24px;
	display: block;
}

.gallery-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(40px, 4vw, 64px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin: 0;
	text-wrap: balance;
}

.gallery-title em { font-style: italic; font-weight: 400; }

.gallery-track {
	display: flex;
	gap: var(--space-4);
	padding: 0 56px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.gallery-track::-webkit-scrollbar { display: none; }

.gallery-img {
	flex: 0 0 auto;
	width: clamp(240px, 30vw, 420px);
	aspect-ratio: 3 / 4;
	object-fit: cover;
	scroll-snap-align: start;
	background: var(--bg-card);
	filter: contrast(1.03);
	cursor: pointer;
	transition: filter 480ms var(--ease-silk);
}

.gallery-img:hover { filter: contrast(1.05) saturate(1.05); }
.gallery-img:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* Indicadores da faixa — sobre o bege, então usam a tinta escura/bordô */
.gallery-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: var(--space-6) 24px 0;
}

.gallery-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-0);
	background: var(--rule-strong);
	cursor: pointer;
	transition: background 240ms var(--ease-silk);
}

.gallery-dot:hover { background: var(--bsh-clay); }
.gallery-dot.is-active { background: var(--accent); }
.gallery-dot:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

/* Lightbox — a foto abre inteira, sem o corte do card 3/4. A imagem se ajusta
   ao próprio formato (não é esticada até a largura do modal), senão um retrato
   abriria com tarjas escuras nas laterais. O corpo do modal encolhe junto para
   que setas e indicadores fiquem rentes à foto em qualquer orientação. */
.lightbox-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 88vh;
	margin-inline: auto;
}

#galleryLightbox .modal-body {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Setas e fechar do lightbox: mesmo tratamento das .gallery-arrow, mas em
   versão escura — aqui elas ficam sobre a foto, não sobre o fundo bege. */
.lightbox-arrow,
#galleryLightbox .btn-close-custom {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-0);
	background: rgba(43, 34, 28, 0.55);
	border: 1px solid rgba(246, 241, 232, 0.35);
	color: var(--bsh-bone);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background 240ms var(--ease-silk), color 240ms var(--ease-silk), border-color 240ms var(--ease-silk);
}

.lightbox-arrow:hover,
#galleryLightbox .btn-close-custom:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bsh-bone);
}

.lightbox-arrow { top: 50%; transform: translateY(-50%); }
.lightbox-arrow-left { left: 24px; }
.lightbox-arrow-right { right: 24px; }

/* Indicadores de posição — quadrados, seguindo o --radius-0 do resto do site */
.lightbox-dots {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 20px 24px 0;
}

.lightbox-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-0);
	background: rgba(246, 241, 232, 0.32);
	cursor: pointer;
	transition: background 240ms var(--ease-silk);
}

.lightbox-dot:hover { background: rgba(246, 241, 232, 0.62); }
.lightbox-dot.is-active { background: var(--bsh-bone); }
.lightbox-dot:focus-visible { outline: 1px solid var(--bsh-bone); outline-offset: 3px; }

@media (max-width: 720px) {
	.lightbox-arrow,
	#galleryLightbox .btn-close-custom { width: 40px; height: 40px; }
	.lightbox-arrow-left { left: 12px; }
	.lightbox-arrow-right { right: 12px; }
}

/* ─────────────────────────────────────────────────────────────
   Projects
   ───────────────────────────────────────────────────────────── */
.projects {
	position: relative;
	overflow: hidden;
	background: var(--bg-elevated);
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
}

.projects-bg {
	position: absolute; inset: 0;
	background-image: url('./imgs/bg-05.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	filter: blur(28px) grayscale(0.5) brightness(1.15);
	opacity: 0.12;
	z-index: 0;
}

.projects-overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(228,218,201,0.55) 0%, rgba(228,218,201,0.35) 50%, rgba(228,218,201,0.7) 100%);
	z-index: 1;
}

.projects-content {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--space-11) 56px;
	color: var(--fg);
	z-index: 2;
}

.projects-head { margin-bottom: var(--space-6); }

.projects-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(48px, 5vw, 88px);
	line-height: 1.0;
	letter-spacing: -0.025em;
	color: var(--fg);
	margin: 0;
	padding: 0;
}

.projects-sub {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: var(--fg-secondary);
	max-width: 60ch;
	margin: 16px 0 0;
}

.projects-carousel-container {
	position: relative;
	margin-top: var(--space-6);
}

.carousel-arrow {
	position: absolute;
	top: 120px;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	background: transparent;
	border: 1px solid var(--rule-strong);
	color: var(--fg);
	border-radius: var(--radius-0);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 3;
	transition: border-color 240ms var(--ease-silk),
	            background 240ms var(--ease-silk),
	            color 240ms var(--ease-silk);
}

.carousel-arrow:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(94, 26, 34, 0.06);
}

.carousel-arrow-left { left: -64px; }
.carousel-arrow-right { right: -64px; }

.projects-list {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: var(--space-5);
	gap: var(--space-6);
	scrollbar-color: var(--bsh-brushed-metal-dim) transparent;
	scrollbar-width: thin;
}

.projects-list::-webkit-scrollbar { height: 1px; }
.projects-list::-webkit-scrollbar-track { background: var(--rule); }
.projects-list::-webkit-scrollbar-thumb { background: var(--bsh-brushed-metal); }

.project {
	flex: 0 0 auto;
	min-width: 280px;
	padding: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 14px;
	cursor: pointer;
}

.project-media {
	position: relative;
	width: 280px;
	height: 220px;
	overflow: hidden;
}

.projetct-img {
	width: 100%;
	height: 100%;
	border: 1px solid var(--rule);
	object-fit: cover;
	filter: contrast(1.03);
	transition: filter 700ms var(--ease-silk),
	            border-color 240ms var(--ease-silk),
	            transform 700ms var(--ease-silk);
}

.project:hover .projetct-img {
	filter: contrast(1.05) saturate(1.05);
	border-color: var(--accent);
	transform: scale(1.02);
}

.project-num {
	position: absolute;
	top: 14px;
	right: 14px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.32em;
	color: var(--bsh-bone);
	background: rgba(43, 34, 28, 0.55);
	border: 1px solid rgba(246, 241, 232, 0.3);
	padding: 4px 10px;
	backdrop-filter: blur(8px);
}

.project:hover .project-num {
	color: var(--accent);
	border-color: var(--accent);
}

.project-city {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 4px 0 0;
}

.project-address {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--fg);
	margin: 0;
}

.project-address em { font-style: italic; font-weight: 400; }

.project-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--rule-strong);
	color: var(--fg);
	padding: 8px 0;
	margin-top: 6px;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	cursor: pointer;
	width: max-content;
	transition: border-color 240ms var(--ease-silk),
	            color 240ms var(--ease-silk),
	            gap 240ms var(--ease-silk);
}

.project-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
	gap: 16px;
}

.project-btn svg { color: currentColor; flex: 0 0 auto; }

/* ─────────────────────────────────────────────────────────────
   Voice — pull quote
   ───────────────────────────────────────────────────────────── */
.voice {
	background: var(--bg);
	padding-top: 0;
	padding-bottom: 192px;
	border-bottom: 1px solid var(--rule);
}

.voice-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-9);
	align-items: center;
}

.voice-quote {
	position: relative;
	margin: 0;
	padding-left: 56px;
	max-width: 620px;
}

.voice-rule {
	position: absolute;
	left: 0;
	top: 18px;
	width: 32px;
	height: 1px;
	background: var(--accent);
}

.voice-quote p {
	font-family: var(--font-display);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(36px, 4.4vw, 72px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin: 0;
	text-wrap: balance;
}

.voice-media {
	width: 100%;
	overflow: hidden;
}

.voice-media img {
	width: 100%;
	height: 560px;
	object-fit: cover;
	display: block;
}

/* Mobile */
@media (max-width: 768px) {
	.voice-layout {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}

	.voice-quote {
		max-width: none;
	}

	.voice-media img {
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
}

/* ─────────────────────────────────────────────────────────────
   Contact form section
   ───────────────────────────────────────────────────────────── */
.contact-section {
	background: var(--bsh-anthracite-soft);
	padding: var(--space-11) 0;
	border-bottom: 1px solid var(--rule);
}

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--space-9);
	align-items: start;
}

.contact-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(40px, 4.4vw, 72px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin: 0 0 var(--space-5);
	text-wrap: balance;
}

.contact-title em { font-style: italic; font-weight: 400; }

.contact-sub {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	color: var(--fg-secondary);
	max-width: 50ch;
	margin: 0 0 var(--space-7);
}

.contact-meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin: 0;
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule);
}

.contact-meta div {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--space-4);
	align-items: baseline;
}

.contact-meta dt {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fg-tertiary);
	margin: 0;
}

.contact-meta dd {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 15px;
	color: var(--fg);
	margin: 0;
}

.contact-meta dd a { color: var(--fg); border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.contact-meta dd a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* form ─────────────────────────────────────────────────────── */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.bsh-field {
	display: block;
	border-bottom: 1px solid var(--bsh-brushed-metal);
	padding: 12px 0 10px;
	transition: border-color 240ms var(--ease-silk);
}

.bsh-field:focus-within { border-color: var(--accent); }

.bsh-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.bsh-field-label {
	display: block;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fg-secondary);
	margin-bottom: 8px;
	transition: color 240ms var(--ease-silk);
}

.bsh-field:focus-within .bsh-field-label { color: var(--accent); }

.bsh-field-input {
	width: 100%;
	background: transparent;
	border: none;
	outline: none;
	padding: 0;
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 15px;
	color: var(--fg);
	line-height: 1.5;
}

.bsh-field-input::placeholder { color: var(--bsh-brushed-metal-dim); }

.bsh-field-textarea { resize: vertical; min-height: 80px; }

.bsh-interest-label {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fg-secondary);
	margin: var(--space-4) 0 12px;
	display: block;
}

.bsh-interest-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: var(--space-5);
}

.bsh-interest-opt {
	padding: 14px 16px;
	border: 1px solid var(--rule-strong);
	background: transparent;
	color: var(--fg);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.3;
	text-align: left;
	cursor: pointer;
	transition: border-color 240ms var(--ease-silk),
	            background 240ms var(--ease-silk),
	            color 240ms var(--ease-silk);
}

.bsh-interest-opt:hover { border-color: var(--bsh-brushed-metal); }

.bsh-interest-opt.selected {
	border-color: var(--accent);
	background: rgba(94, 26, 34, 0.08);
	color: var(--accent);
}

.bsh-form-error {
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--accent);
	margin: 4px 0;
	min-height: 16px;
}

.contact-form .bsh-btn { align-self: flex-start; margin-top: var(--space-3); }

.contact-disclaimer {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 12px;
	color: var(--fg-tertiary);
	margin: 16px 0 0;
}

/* ─────────────────────────────────────────────────────────────
   Contact strip
   ───────────────────────────────────────────────────────────── */
.contact {
	background: var(--bg);
	color: var(--fg);
	padding: var(--space-9) 0;
	border-bottom: 1px solid var(--rule);
}

.contact-strip {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-5);
	text-align: right;
}

.contact-strip-tag {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--fg-tertiary);
	margin-right: auto;
}

.contact-strip .contact-phone {
	font-family: var(--font-sans);
	font-weight: 400;
	font-style: normal;
	font-size: clamp(24px, 2.4vw, 38px);
	line-height: 1;
	letter-spacing: -0.005em;
	color: var(--fg);
	transition: color 240ms var(--ease-silk);
	padding: 0;
}

.contact-strip .contact-phone:hover { color: var(--accent); }

.contact-instagram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--rule-strong);
	color: var(--fg);
	transition: border-color 240ms var(--ease-silk),
	            background 240ms var(--ease-silk),
	            color 240ms var(--ease-silk);
}

.contact-instagram:hover {
	border-color: var(--accent);
	background: rgba(94, 26, 34, 0.06);
	color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
.footer {
	background: var(--bg);
	border-top: 1px solid var(--rule);
	padding: var(--space-10) 0 var(--space-7);
}

.footer-tagline {
	font-family: var(--font-display);
	font-weight: 700;
	font-style: italic;
	font-size: clamp(28px, 3.4vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--fg);
	max-width: 800px;
	margin-bottom: var(--space-9);
	text-wrap: balance;
}

.footer-tagline em { font-style: italic; font-weight: 400; }

.footer .row {
	max-width: 1440px;
	margin: 0;
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
	gap: var(--space-7);
	align-items: flex-start;
}

.footer-logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.footer-logo img {
	height: 72px;
	width: auto;
	padding: 0;
	filter: brightness(0) saturate(100%);
}

.footer-logo .footer-by-bold {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--fg-secondary);
}

/* Selo de associação. A GOBA é marca de terceiro, então a logo entra nas cores
   originais dela — só o tamanho é contido, para não disputar com a assinatura
   Bold logo acima. O filete separa o selo do bloco da marca. */
.footer-goba {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-3);
	max-width: 260px;
	padding-top: var(--space-4);
	border-top: 1px solid var(--rule);
}

.footer-goba-text {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 12px;
	line-height: 1.5;
	color: var(--fg-secondary);
	margin: 0;
}

/* Sobrescreve o filter preto herdado de .footer-logo img — a logo mantém a cor. */
.footer-logo .footer-goba img {
	height: 34px;
	width: auto;
	filter: none;
}

.footer-col-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 24px;
	display: block;
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.footer-col li,
.footer-col li a {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 14px;
	color: var(--fg-secondary);
	text-decoration: none;
}

.footer-col li a { transition: color 240ms var(--ease-silk); }
.footer-col li a:hover { color: var(--accent); }

.footer-social {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-top: var(--space-5);
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--rule);
	color: var(--fg-secondary);
	transition: border-color 240ms var(--ease-silk),
	            background 240ms var(--ease-silk),
	            color 240ms var(--ease-silk);
}

.footer-social a:hover {
	border-color: var(--accent);
	background: rgba(94, 26, 34, 0.06);
	color: var(--accent);
}

.footer-legal {
	margin-top: var(--space-7);
	padding-top: var(--space-5);
	border-top: 1px solid var(--rule);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--fg-tertiary);
}

/* ─────────────────────────────────────────────────────────────
   Email copy feedback
   ───────────────────────────────────────────────────────────── */
.email-wrapper { position: relative; display: inline-block; }

.copy-feedback {
	position: absolute;
	top: -32px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-sans);
	font-size: 9px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	background: var(--bsh-anthracite-raised);
	color: var(--accent);
	border: 1px solid var(--accent);
	padding: 4px 10px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 240ms var(--ease-silk);
	pointer-events: none;
}

.copy-feedback.show { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   Modal
   ───────────────────────────────────────────────────────────── */
.modal-content.bg-dark {
	background: var(--bg) !important;
	border: 1px solid var(--rule);
	border-radius: var(--radius-0);
	color: var(--fg);
}

.modal-content .modal-body { padding: 0; }

/* Retrato estoura o teto de 70vh: em vez de encaixar a foto inteira e sobrar
   tarja dos lados, o cover preenche a faixa e corta topo/base. O fundo bege fica
   de reserva — só aparece enquanto a imagem carrega. */
#mainImage {
	background: var(--bg-elevated);
	max-height: 70vh;
	object-fit: cover;
	border-bottom: 1px solid var(--rule);
}

#modalTitle {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 3vw, 44px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--fg);
	margin: 0 0 12px 0;
}

#modalDescription {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: 15px;
	line-height: 1.7;
	color: var(--fg-secondary);
	max-width: 64ch;
	margin: 0;
}

.btn-close-custom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	background: rgba(43, 34, 28, 0.55);
	border: 1px solid var(--rule-strong);
	color: var(--fg);
	cursor: pointer;
	transition: border-color 240ms var(--ease-silk),
	            background 240ms var(--ease-silk),
	            color 240ms var(--ease-silk);
}

.btn-close-custom:hover {
	border-color: var(--accent);
	background: rgba(94, 26, 34, 0.10);
	color: var(--accent);
}

.modal-content .btn-dark {
	background: rgba(43, 34, 28, 0.5);
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-0);
	color: var(--fg);
	opacity: 0.85 !important;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.modal-content .btn-dark:hover {
	background: rgba(94, 26, 34, 0.10);
	border-color: var(--accent);
	color: var(--accent);
}

.modal-gallery {
	display: flex;
	overflow-x: auto;
	gap: 10px;
	padding-bottom: var(--space-5);
}

.modal-gallery::-webkit-scrollbar { height: 1px; }
.modal-gallery::-webkit-scrollbar-track { background: var(--rule); }
.modal-gallery::-webkit-scrollbar-thumb { background: var(--bsh-brushed-metal); }

.thumbnail-img {
	height: 80px;
	width: auto;
	border: 1px solid var(--rule);
	border-radius: var(--radius-0);
	opacity: 0.6;
	transition: opacity 240ms var(--ease-silk),
	            border-color 240ms var(--ease-silk);
	cursor: pointer;
}

.thumbnail-img:hover { opacity: 0.9; }
.thumb-active { opacity: 1; border: 1px solid var(--accent); }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
	.bsh-container { padding: 0 32px; }
	.custom-header { padding: 16px 32px; }
	/* nav horizontal tem rótulos longos (Revisão 2) — abaixo de 1080px usa o MENU */
	.header-nav { display: none; }
	.hero-scroll { left: 32px; }
	.hero-signature { right: 32px; }
	.projects-content { padding: var(--space-10) 32px; }
	.carousel-arrow-left { left: -8px; }
	.carousel-arrow-right { right: -8px; }

	.philosophy-grid { grid-template-columns: 1fr; }
	.philosophy-portrait { max-width: 420px; }
	.ph-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
	.ph-timeline { grid-template-columns: 1fr; gap: var(--space-6); border-top: none; border-left: 2px solid var(--rule); padding-top: 0; padding-left: var(--space-5); }
	.ph-milestone::before { top: 5px; left: calc(-1 * var(--space-5) - 7px); }
	.info-row { grid-template-columns: 1fr; gap: var(--space-7); }
	.gallery-track { padding: 0 32px; }
	.contact-layout { grid-template-columns: 1fr; gap: var(--space-7); }
	.footer .row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	.bsh-container { padding: 0 24px; }
	.custom-header { padding: 14px 24px; }
	.logo-grid { gap: 14px; }
	.header-nav { display: none; }
	.brand-wordmark img { height: 42px; }

	/* TODO asset: fachada Model Home 1 (Drive) em versão vertical p/ mobile.
	   Escopado na 1ª slide para não sobrescrever as demais do carrossel. */
	.hero-slide:nth-child(1) { background-image: url('./imgs/model-home-1/mh1-hero.jpg'); }
	.hero-scroll { left: 24px; bottom: 24px; }
	/* Assinatura à direita, na mesma linha de base do "Scroll".
	   O max-width quebra a frase em duas linhas e libera a esquerda p/ o indicador. */
	.hero-signature {
		right: 24px;
		bottom: 24px;
		max-width: 26ch;
		font-size: 15px;
	}

	.hide-on-mobile { display: none !important; }

	.philosophy,
	.info,
	.gallery,
	.contact-section { padding: var(--space-9) 0; }

	.philosophy-statement,
	.info-text-title,
	.gallery-title,
	.contact-title { font-size: 36px; }

	.ph-process, .ph-story { margin-top: var(--space-8); }
	.ph-steps { grid-template-columns: 1fr; gap: var(--space-6); padding-top: var(--space-6); }
	.ph-story-lead { font-size: 24px; max-width: none; }
	/* Empilha: texto em cima, foto embaixo */
	.ph-story-head { grid-template-columns: 1fr; gap: var(--space-6); }

	.gallery-track { padding: 0 24px; }
	.gallery-img { width: 78vw; }

	.projects-content { padding: var(--space-9) 24px; }
	.projects-title { font-size: 48px; }
	.carousel-arrow { width: 36px; height: 36px; top: 110px; }
	.carousel-arrow-left { left: 4px; }
	.carousel-arrow-right { right: 4px; }
	.project { min-width: 240px; }
	.project-media { width: 240px; height: 190px; }

	.bsh-field-row { grid-template-columns: 1fr; gap: 0; }
	.bsh-interest-grid { grid-template-columns: 1fr; }
	.contact-meta div { grid-template-columns: 1fr; gap: 4px; }
	.contact-meta dd { font-size: 16px; }

	.contact-strip {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-3);
	}
	.contact-strip-tag { margin: 0; }

	.footer { padding: var(--space-9) 0 var(--space-5); }
	.footer .row { grid-template-columns: 1fr; gap: var(--space-6); }
	.footer-logo img { height: 56px; }
	.footer-tagline { font-size: 28px; }
	.footer-legal { padding: var(--space-4) 0; margin-top: var(--space-6); }

	.voice-quote { padding-left: 44px; }
	.voice-rule { width: 24px; top: 14px; }
	.voice-quote p { font-size: 32px; }
}

/* Specs por residência no modal (fundo escuro) */
.modal-specs {
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.05em;
	color: #C2B097;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(194, 176, 151, 0.22);
}

/* Designador "Model Home 1/2" abaixo do nome da casa no card */
.project-sub {
	display: block;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fg-tertiary);
	margin-top: 7px;
}

/* ============================================================
   Revisão 2 — Bold Difference / Lifestyle / Meet the Founder
   ============================================================ */

/* The Bold Difference (statement curto) */
.bold-diff-copy { max-width: 760px; margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.bold-diff-copy .philosophy-body { font-size: var(--fs-18); color: var(--fg-secondary); }

/* Lifestyle — imagem sangrada com painel sobreposto */
.lifestyle { position: relative; width: 100%; min-height: 84vh; display: flex; align-items: center; overflow: hidden; }
.lifestyle-media { position: absolute; inset: 0; z-index: 0; }
.lifestyle-media img { width: 100%; height: 100%; object-fit: cover; }
.lifestyle-panel {
	position: relative; z-index: 2;
	/* Encostado na mesma calha de 56px do .bsh-container: alinha com o resto da
	   página e libera o máximo de foto à direita sem o painel virar uma faixa. */
	margin: var(--space-9) var(--space-7) var(--space-9) clamp(var(--space-4), 4vw, 56px);
	max-width: 370px; background: var(--bg);
	padding: var(--space-7) var(--space-6) var(--space-6);
}
/* Teto menor que o original (--fs-56): na coluna mais estreita, 56px quebrava
   o título em linhas demais — a caixa crescia e comia a foto de volta. */
.lifestyle-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--fs-32), 3.2vw, var(--fs-40)); line-height: var(--lh-snug); letter-spacing: var(--tr-display); margin: var(--space-3) 0 var(--space-4); }
.lifestyle-title em { font-style: italic; font-weight: 400; }
/* Justificado só no corpo — títulos e eyebrow seguem alinhados à esquerda.
   hyphens:auto evita rios de espaço na coluna estreita; usa o lang do <html>,
   que translatePage() troca junto com o idioma. */
.lifestyle-text {
	font-size: var(--fs-16);
	line-height: var(--lh-loose);
	color: var(--fg-secondary);
	margin-bottom: var(--space-5);
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/* Meet the Founder */
.founder { padding: var(--space-10) 0; }
.founder-intro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: center; }
.founder-portrait { aspect-ratio: 4/5; overflow: hidden; }
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; }
.founder-eyebrow { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tr-tech-wide); color: var(--accent); }
.founder-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(var(--fs-32), 4vw, var(--fs-56)); line-height: var(--lh-snug); letter-spacing: var(--tr-display); margin: var(--space-3) 0 var(--space-5); }
.founder-title em { font-style: italic; font-weight: 400; }
.founder-body { font-size: var(--fs-16); line-height: var(--lh-loose); color: var(--fg-secondary); margin-bottom: var(--space-4); }
/* Link inline na bio: a cor de acento sozinha não lê como clicável no meio do parágrafo — o filete fecha no hover. */
.founder-body a { color: var(--accent); font-weight: 700; font-size: 1.08em; letter-spacing: 0.01em; border-bottom: 1px solid rgba(94, 26, 34, 0.35); transition: color 240ms var(--ease-silk), border-color 240ms var(--ease-silk); }
.founder-body a:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.founder-feature { margin: var(--space-9) 0 var(--space-8); width: 100%; aspect-ratio: 16/9; overflow: hidden; }
.founder-feature img { width: 100%; height: 100%; object-fit: cover; }
.founder .ph-process, .founder .ph-story { margin-top: var(--space-9); }

@media (max-width: 1080px) {
	.founder-intro { grid-template-columns: 1fr; gap: var(--space-6); }
	/* Empilhado, o retrato ocupa a largura toda: forçar 16/10 aqui cortava a
	   cabeça do Fausto (o arquivo é 1200×1800). Sem proporção fixa, a foto
	   aparece inteira, na razão natural. */
	.founder-portrait { aspect-ratio: auto; }
	.founder-portrait img { height: auto; }
}
@media (max-width: 720px) {
	.lifestyle { min-height: 0; flex-direction: column; }
	.lifestyle-media { position: relative; width: 100%; height: 62vw; }
	.lifestyle-panel { margin: -56px var(--space-4) var(--space-6); padding: var(--space-6) var(--space-5); max-width: none; }
	.founder-feature { aspect-ratio: 4/3; }
}

/* Vídeo institucional do founder (YouTube) */
.founder-video { background: #000; }
.founder-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Vídeo self-hosted do founder */
.founder-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* ============================================================
   Revisão 3
   ============================================================ */

/* Lifestyle — painel translúcido sobre a foto (vê o fundo, mantém leitura) */
.lifestyle-panel {
	background: rgba(236, 228, 214, 0.66);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(246, 241, 232, 0.35);
}

/* Subtítulo do modal de projeto ("Model Home") */
.modal-sub {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #C2B097;
	margin: 6px 0 0;
}

/* Vídeo do founder sangrado para as laterais (full-bleed) */
.founder-feature.founder-video {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-height: 90vh;
}

/* Setas de navegação da galeria "Inside the Model Home" */
.gallery-viewport { position: relative; }
.gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: var(--radius-0);
	background: rgba(246, 241, 232, 0.92);
	border: 1px solid var(--rule);
	color: var(--fg);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 6px 24px -10px rgba(0,0,0,0.4);
	transition: background 240ms var(--ease-silk), color 240ms var(--ease-silk), border-color 240ms var(--ease-silk);
}
.gallery-arrow:hover { background: var(--accent); color: var(--bsh-bone); border-color: var(--accent); }
.gallery-arrow-left { left: 24px; }
.gallery-arrow-right { right: 24px; }
@media (max-width: 720px) { .gallery-arrow { width: 40px; height: 40px; } .gallery-arrow-left { left: 12px; } .gallery-arrow-right { right: 12px; } }

/* ─────────────────────────────────────────────────────────────
   Where We Build — mapa em relevo (arte da cliente, imgs/map/)

   Até ~1024px a seção é a própria arte: o mapa 1080×1590 ocupa a largura
   e o texto fica sobreposto no canto inferior esquerdo, medido em cqw para
   escalar junto com a imagem. Acima disso o mapa encosta na borda esquerda
   (o recorte do panhandle vira sangria) e o texto vai para a coluna ao lado.

   Rótulos: cada PNG é 3× o tamanho de exibição em relação ao mapa e traz o
   ponto num dos cantos. left/top/width abaixo estão em % do mapa, calculados
   para o centro do ponto cair sobre a cidade como na referência.
   ───────────────────────────────────────────────────────────── */
.locations {
	/* Fundo atrás do PNG transparente do mapa (e do painel .loc-detail). */
	--loc-paper: #E4D6C3;
	position: relative;
	background: var(--loc-paper);
	container-type: inline-size;
	overflow: hidden;
}

@font-face {
	font-family: "Varoste";
	src: url("./assets/fonts/Varoste.otf") format("opentype");
	font-display: swap;
}

.loc-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 1080 / 1590;
	overflow: hidden;
}

/* florida-map.png (1920×1765, fundo transparente) é o estado inteiro. O palco
   continua no recorte 1080×1590 do mapa anterior, então a imagem é escalada e
   deslocada para a geografia cair no mesmo lugar — os rótulos não mudam.
   Registro medido: novo = 0,979 × antigo + (596, 162,6) px, sem rotação. */
.loc-map {
	position: absolute;
	display: block;
	left: -56.37%;
	top: -10.45%;
	width: 181.6%;
	height: auto;
	max-width: none;
}

/* O botão tem o tamanho do PNG, mas só o .loc-hit (sobre o nome) recebe o
   ponteiro — o resto do PNG é transparente e os retângulos se sobrepõem.
   :hover no filho sobe para o botão, então o hover pinta o rótulo inteiro. */
.loc-pin {
	position: absolute;
	display: block;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	pointer-events: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.loc-pin img {
	display: block;
	width: 100%;
	height: auto;
	transition: filter 240ms var(--ease-silk);
}

.loc-hit {
	position: absolute;
	pointer-events: auto;
	cursor: pointer;
}

/* Rótulo preto → bordô, bolinha continua branca (filtro #locPinAccent no HTML). */
.loc-pin:hover img,
.loc-pin.is-open img,
.loc-pin:focus-visible img { filter: url(#locPinAccent); }

.loc-pin:focus-visible { outline: none; }
.loc-pin:focus-visible .loc-hit { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Área clicável sobre o nome, em % do PNG de cada rótulo. */
.loc-pin--bella      .loc-hit { left: 68%; top: 0;   width: 32%; height: 43%; }
.loc-pin--oakland    .loc-hit { left: 63%; top: 5%;  width: 37%; height: 55%; }
.loc-pin--clermont   .loc-hit { left: 0;   top: 5%;  width: 49%; height: 55%; }
.loc-pin--windermere .loc-hit { left: 0;   top: 18%; width: 45%; height: 75%; }
.loc-pin--phillips   .loc-hit { left: 69%; top: 4%;  width: 31%; height: 96%; }

.loc-pin--bella      { left: 51.35%; top: 16.71%; width: 36.45%; }
.loc-pin--oakland    { left: 55.78%; top: 25.54%; width: 38.77%; }
.loc-pin--clermont   { left: 17.18%; top: 28.51%; width: 31.64%; }
.loc-pin--windermere { left:  7.68%; top: 34.12%; width: 44.78%; }
.loc-pin--phillips   { left: 55.79%; top: 35.78%; width: 38.83%; }

/* Absoluto para não empurrar a seção além do fim do mapa. 71% do mapa
   cortado = a mesma altura em que o texto estava na arte 1080×1920. */
.loc-copy {
	position: absolute;
	left: 13.6%;
	top: 71%;
	width: 42%;
}

.loc-title {
	font-family: "Varoste", var(--font-display);
	font-weight: 400;
	font-size: 9.5cqw;
	line-height: 0.88;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--bsh-olive);
	max-width: 4.3em;
	margin: 0;
}

.loc-sub {
	font-family: var(--font-sans);
	font-weight: 300;
	font-size: max(12px, 3.1cqw);
	line-height: 1.3;
	color: var(--bsh-olive);
	max-width: 15em;
	margin: 1.9cqw 0 0;
}

@media (min-width: 1024px) {
	.locations {
		display: grid;
		grid-template-columns: min(640px, 48vw) minmax(0, 1fr);
		align-items: center;
	}

	/* Bloco centralizado no espaço à direita do mapa; o texto segue alinhado
	   à esquerda, como na arte. */
	.loc-copy {
		position: static;
		justify-self: center;
		width: auto;
		padding: 0 var(--space-8);
	}

	.loc-title { font-size: clamp(64px, 6vw, 104px); }

	/* Fora do mapa o creme da arte some no bege — aqui o texto precisa de contraste. */
	.loc-sub {
		font-size: var(--fs-16);
		line-height: var(--lh-loose);
		color: var(--fg-secondary);
		margin-top: 20px;
	}
}

/* ── Painel da localidade (abre ao clicar num rótulo do mapa) ──
   Mesmo fundo da seção para ler como continuação do mapa. */
.loc-detail { background: #E4D6C3; /* = --loc-paper da .locations */ }

/* scroll-margin: o scrollIntoView do clique não deixa o topo sob o header fixo. */
.loc-panel { border-top: 1px solid var(--rule); scroll-margin-top: 120px; }

.loc-panel-inner {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--space-8);
	padding: var(--space-8) 0 var(--space-9);
	align-items: start;
	animation: loc-panel-in 520ms var(--ease-silk) both;
}

@keyframes loc-panel-in {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.loc-panel-inner { animation: none; }
}

.loc-panel-text { display: flex; flex-direction: column; gap: 14px; }

.loc-panel-region {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--fg-tertiary);
	margin: 0;
}

.loc-panel-name {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(30px, 3vw, 44px);
	line-height: 1.05;
	color: var(--fg);
	margin: 0;
}

.loc-panel-body {
	font-size: var(--fs-16);
	line-height: var(--lh-loose);
	color: var(--fg-secondary);
	margin: 0;
	max-width: 46ch;
}

.loc-offers {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	border-top: 1px solid var(--rule);
}

.loc-offers li {
	padding: 13px 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fg);
}

.loc-offers-pending {
	margin: 10px 0 0;
	padding-top: 13px;
	border-top: 1px solid var(--rule);
	font-size: 13px;
	font-style: italic;
	color: var(--fg-tertiary);
}

/* Foto da região com a miniatura da casa sobreposta no canto. */
.loc-panel-media { position: relative; }
.loc-panel-media.has-home { margin-bottom: 28px; }

.loc-region-img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	border: 1px solid var(--rule);
}

/* Sem foto da região: bloco tipográfico em bordô com o nome. */
.loc-region-plate {
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	background: var(--accent);
}

.loc-region-plate span {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(30px, 4vw, 52px);
	line-height: 1.05;
	color: var(--fg-on-accent);
	opacity: 0.92;
	text-align: center;
}

/* CC BY exige atribuição visível — condição da licença, não enfeite. */
.loc-region-credit {
	margin: 8px 0 0;
	font-family: var(--font-sans);
	font-size: 9.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--fg-tertiary);
}

.loc-home {
	position: absolute;
	right: -12px;
	bottom: -28px;
	width: clamp(140px, 22%, 220px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 8px;
	margin: 0;
	background: var(--bg-elevated);
	border: 1px solid var(--rule);
	cursor: pointer;
	text-align: left;
	transition: border-color 240ms var(--ease-silk), box-shadow 240ms var(--ease-silk);
}

.loc-home img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.loc-home-link {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
	border-bottom: 1px solid var(--accent);
	transition: color 240ms var(--ease-silk), border-color 240ms var(--ease-silk);
}

.loc-home:hover { border-color: var(--accent); box-shadow: 0 10px 28px -14px rgba(43, 34, 28, 0.45); }
.loc-home:hover .loc-home-link { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.loc-home:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }

@media (max-width: 860px) {
	.loc-panel-inner { grid-template-columns: 1fr; gap: var(--space-7); }
	.loc-home { right: 12px; bottom: -20px; width: 132px; }
	.loc-panel-media.has-home { margin-bottom: 20px; }
}

/* Inset sem projeto vinculado: figura, não botão. O crédito fica sob a imagem
   a que pertence — em Windermere a foto da comunidade é do Commons, a da casa
   é material da Bold. */
.loc-home--static { cursor: default; }
.loc-home-credit {
	display: block;
	padding-top: 6px;
	font-family: var(--font-sans);
	font-size: 8.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-tertiary);
	line-height: 1.35;
}


/* ─────────────────────────────────────────────────────────────
   WhatsApp — botão flutuante
   Na cor da marca, não no verde do WhatsApp: o ícone já é
   reconhecível sozinho. O rótulo abre no hover (só desktop).
   Fica abaixo do header (999) e dos modais do Bootstrap (1050+).
   ───────────────────────────────────────────────────────────── */
.wa-float {
	position: fixed;
	right: 28px;
	bottom: 28px;
	z-index: 990;
	display: flex;
	align-items: center;
	height: 56px;
	padding: 0 15px;
	border-radius: 28px;
	background: var(--accent);
	color: var(--bg);
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(43, 34, 28, 0.28);
	transition: background-color 320ms var(--ease-silk), box-shadow 320ms var(--ease-silk),
	            opacity 480ms var(--ease-silk), transform 480ms var(--ease-silk), visibility 0s;
}
/* Escondido enquanto o slogan do hero passa pela faixa do botão: os dois
   ocupam o mesmo canto inferior direito. A classe já vem no HTML (evita piscar) e o JS a
   liga/desliga conforme o slogan entra e sai da tela. */
.wa-float.is-hidden {
	opacity: 0;
	transform: translateY(16px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 320ms var(--ease-silk), transform 320ms var(--ease-silk), visibility 0s 320ms;
}
.wa-float:hover,
.wa-float:focus-visible {
	background: var(--accent-hover);
	color: var(--bg);
	box-shadow: 0 14px 34px rgba(43, 34, 28, 0.34);
}
.wa-float:active { background: var(--accent-pressed); }
.wa-float:focus-visible { outline: 2px solid var(--bg); outline-offset: 3px; }

.wa-float-icon { flex: 0 0 auto; display: block; }

.wa-float-label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	transition: max-width 480ms var(--ease-silk), opacity 320ms var(--ease-silk), margin 480ms var(--ease-silk);
}
@media (hover: hover) {
	.wa-float:hover .wa-float-label,
	.wa-float:focus-visible .wa-float-label {
		max-width: 220px;
		opacity: 1;
		margin-right: 10px;
	}
}

@media (max-width: 760px) {
	.wa-float { right: 16px; bottom: 16px; height: 52px; padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.wa-float, .wa-float-label { transition: none; }
}