/*
Theme Name: Batra PM
Description: Custom theme for Batra Property Management. Lightweight, no third-party plugins required; optional Elementor support with Batra widgets. See CHANGELOG.md for version history.
Version: 1.6.1
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: batra
*/

:root {
	--ink: #0e0e0e;
	--ink-80: rgba(14, 14, 14, .78);
	--ink-60: rgba(14, 14, 14, .55);
	--line: rgba(14, 14, 14, .14);
	--paper: #f3f3f1;
	--paper-2: #e9e9e7;
	--stone: #dcdcda;
	--sage: #e6e6e4;
	--gray: #8a8a88;
	--graphite: #3a3a39;
	--terra: #0e0e0e;
	--chip: rgba(14, 14, 14, .07);
	--white: #fff;
	--font: "Urbanist", system-ui, sans-serif;
	--mono: "DM Mono", ui-monospace, monospace;
	--gutter: clamp(16px, 3.4vw, 48px);
	--radius: 14px;
	--ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-80);
	font: 500 17px/1.4 var(--font);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 500; margin: 0; letter-spacing: -.02em; line-height: 1.05; }
p { margin: 0 0 1em; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { clip: auto; width: auto; height: auto; z-index: 999; background: var(--ink); color: #fff; padding: 10px 16px; top: 8px; left: 8px; }

.wrap { padding-inline: var(--gutter); max-width: 1680px; margin-inline: auto; }
.eyebrow { font: 400 12px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-80); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.meta { font: 400 12px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-60); }

/* Buttons */
.btn {
	display: inline-flex; align-items: center; gap: 10px;
	font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em;
	padding: 6px 18px 6px 6px; border-radius: 99px;
	background: var(--chip); color: var(--ink);
	transition: background .3s var(--ease), color .3s var(--ease);
}
.btn .ico { width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .4s var(--ease); }
.btn:hover .ico { transform: rotate(-45deg); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark .ico { background: rgba(255, 255, 255, .16); }
.btn--light { background: rgba(255, 255, 255, .16); color: #fff; }
.btn--light .ico { background: #fff; color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Header */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 50;
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px var(--gutter);
	transition: background .4s var(--ease), padding .4s var(--ease);
}
.site-header.is-scrolled { background: rgba(243, 243, 241, .86); backdrop-filter: blur(12px); padding-block: 10px; }
/* Logo lockup */
.site-logo { display: inline-flex; }
.logo-lockup { display: inline-flex; align-items: center; gap: 10px; color: #0e0e0e; line-height: 1; }
.logo-mark { height: 44px; width: auto; }
.logo-words { display: grid; gap: 4px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; }
.logo-words b { font-size: 25px; font-weight: 700; letter-spacing: .01em; }
.logo-words small { font-size: 8.6px; font-weight: 400; letter-spacing: .11em; }
.logo-lockup--light { color: #fff; }
.logo-lockup--light .logo-mark { filter: invert(1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone { font: 400 12px/1 var(--mono); letter-spacing: .04em; padding: 14px 16px; border-radius: 99px; background: rgba(255, 255, 255, .5); color: var(--ink); }
.menu-toggle {
	display: inline-flex; align-items: center; gap: 14px; border: 0; cursor: pointer;
	font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
	background: var(--chip); backdrop-filter: blur(10px); padding: 14px 18px; border-radius: 99px;
}
.menu-toggle .bars { width: 18px; display: grid; gap: 4px; }
.menu-toggle .bars i { height: 1.5px; background: currentColor; display: block; transition: transform .4s var(--ease); }
.menu-toggle .bars i:last-child { width: 70%; justify-self: end; }

/* Fullscreen menu */
.menu-overlay {
	position: fixed; inset: 0; z-index: 60; background: var(--ink); color: #fff;
	display: grid; grid-template-columns: 1.4fr 1fr; padding: 100px var(--gutter) 40px; gap: 40px;
	clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); visibility: hidden;
}
.menu-open .menu-overlay { clip-path: inset(0); visibility: visible; }
.menu-overlay .close { position: absolute; top: 18px; right: var(--gutter); background: rgba(255, 255, 255, .14); color: #fff; }
.menu-overlay nav ul { list-style: none; margin: 0; padding: 0; }
.menu-overlay nav a { display: block; font-size: clamp(32px, 4.6vw, 68px); font-weight: 600; letter-spacing: -.04em; line-height: 1.08; color: rgba(255, 255, 255, .9); transition: color .3s, transform .4s var(--ease); }
.menu-overlay nav a:hover { color: var(--gray); transform: translateX(10px); }
.menu-overlay .menu-side { align-self: end; display: grid; gap: 24px; font-size: 18px; }
.menu-overlay .menu-side .meta { color: rgba(255, 255, 255, .5); display: block; margin-bottom: 6px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.hero-media { position: relative; overflow: hidden; }
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent 38%); }
.city { position: absolute; inset: 0; overflow: hidden; }
.city img { width: 100%; height: 100%; object-fit: cover; }
.city--ny { transform: scale(1.08); animation: heroZoom 2.4s var(--ease) forwards; }
.city--miami { z-index: 1; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.city--miami img { transform: scale(1.18); }
.hero[data-city="miami"] .city--miami { clip-path: inset(0); }
.hero[data-city="miami"] .city--miami img { transform: scale(1); }
.hero[data-city="miami"] .city--ny img { transform: scale(1.06) translateY(-3%); }
.hero.is-live[data-city="ny"] .city--ny img, .hero.is-live[data-city="miami"] .city--miami img { filter: grayscale(0) contrast(1); }
.hero-caption { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 16px; color: #fff; pointer-events: none; }
.hero-caption .names, .hero-caption .coords { display: grid; overflow: hidden; }
.hero-caption .names { height: 1em; font-size: clamp(30px, 3.6vw, 60px); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.hero-caption .coords { height: 1.4em; font: 400 12px/1.4 var(--mono); letter-spacing: .04em; color: rgba(255, 255, 255, .8); text-align: right; }
.hero-caption span > span { transition: transform .9s var(--ease); }
.hero-caption .names > span { height: 1em; }
.hero-caption .coords > span { height: 1.4em; }
.hero[data-city="miami"] .hero-caption span > span { transform: translateY(-100%); }
.hero[data-city="miami"] .hero-caption .coords > span { transition-delay: .08s; }
@keyframes heroZoom { to { transform: scale(1); } }
.hero-text { display: flex; flex-direction: column; justify-content: center; padding: 120px var(--gutter) 60px; position: relative; }
.hero-text h1 { font-size: clamp(44px, 6vw, 112px); font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; margin: 18px 0 28px; }
.hero-text h1 span { display: block; overflow: hidden; }
.hero-text h1 span > b { display: block; font-weight: inherit; transform: translateY(105%); animation: lineUp 1.1s var(--ease) forwards; }
.hero-text h1 span:nth-child(2) > b { animation-delay: .1s; }
.hero-text h1 span:nth-child(3) > b { animation-delay: .2s; }
@keyframes lineUp { to { transform: none; } }
.hero-text .lead { max-width: 420px; font-size: 19px; color: var(--ink-80); margin-bottom: 28px; }
.hero-side { position: absolute; right: 18px; bottom: 40px; writing-mode: vertical-rl; transform: rotate(180deg); font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }

/* Intro */
.section { padding-block: clamp(80px, 10vw, 150px); }
/* Consecutive sections on the same background share one gap instead of doubling it. */
.section--flush { padding-top: 0; }
.intro { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; }
.intro h2 { font-size: clamp(34px, 4.4vw, 74px); letter-spacing: -.035em; line-height: .94; margin: 18px 0 38px; }
.intro .side p { font-size: 17px; }

/* Mission band: tinted stone with architectural grid lines */
.intro-band { position: relative; overflow: hidden; background: #d3d2cd; }
.intro-band::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(to right, rgba(14, 14, 14, .08) 1px, transparent 1px);
	background-size: calc((100% - 2 * var(--gutter)) / 4) 100%;
	background-position: var(--gutter) 0;
}
.intro-band .intro { position: relative; border-top: 1px solid rgba(14, 14, 14, .2); padding-top: 34px; }
.intro-band .side { padding-top: 26px; }
.intro-band .btn:not(.btn--dark) { background: rgba(255, 255, 255, .45); }
.intro-band .vlabel { position: absolute; right: 18px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-60); }

/* Words fill from faint to solid as the heading scrolls through view */
.ink-fill .w { opacity: .16; transition: opacity .35s linear; }
.ink-fill .w.on { opacity: 1; }

/* Section head */
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(34px, 3.4vw, 50px); }

/* Works / property types */
.works { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.work { grid-column: span 4; }
.work figure { margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; position: relative; }
.work figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work:hover figure img { transform: scale(1.05); }
.work h3 { font-size: 21px; margin-bottom: 6px; letter-spacing: -.01em; }

/* Process cards */
.process-head h2 { font-size: clamp(34px, 4.2vw, 64px); max-width: 980px; margin: 18px 0 50px; letter-spacing: -.03em; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { border-radius: var(--radius); padding: 22px; min-height: 380px; display: flex; flex-direction: column; color: var(--ink); }
.step:nth-child(1) { background: var(--stone); }
.step:nth-child(2) { background: #b9b9b7; }
.step:nth-child(3) { background: var(--graphite); color: #fff; }
.step:nth-child(3) h3 { color: #fff; }
.step:nth-child(3) .arrow, .step:nth-child(4) .arrow { background: rgba(255, 255, 255, .14); }
.step:nth-child(4) { background: var(--ink); color: #fff; }
.step:nth-child(4) h3 { color: #fff; }
.step .num { font: 400 12px/1 var(--mono); margin-bottom: 18px; }
.step h3 { font-size: clamp(26px, 2.3vw, 34px); letter-spacing: -.02em; }
.step p { margin-top: auto; font-size: 15px; opacity: .85; }
.step .arrow { width: 40px; height: 40px; border-radius: 50%; background: rgba(0, 0, 0, .14); display: grid; place-items: center; margin-top: 14px; transition: transform .6s var(--ease), background .4s, color .4s; }

/* Card hover: photo sweeps up from the bottom, text turns white */
.step { position: relative; overflow: hidden; isolation: isolate; transition: color .5s var(--ease); }
.step h3 { transition: color .5s var(--ease); }
.step-media { position: absolute; inset: 0; z-index: -1; clip-path: inset(100% 0 0 0); transition: clip-path .8s var(--ease); }
.step-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); transition: transform 1.4s var(--ease); }
.step-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .82) 10%, rgba(0, 0, 0, .2)); }
.step:is(:hover, :focus-visible, .is-active) { color: #fff; }
.step:is(:hover, :focus-visible, .is-active) h3 { color: #fff; }
.step:is(:hover, :focus-visible, .is-active) .step-media { clip-path: inset(0); }
.step:is(:hover, :focus-visible, .is-active) .step-media img { transform: scale(1); }
.step:is(:hover, :focus-visible, .is-active) .arrow { background: #fff; color: var(--ink); transform: rotate(45deg); }
.step:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Scroll-in: headings slide up word by word from hidden masks */
.split-up .m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split-up .i { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0) * 45ms); }
.split-up.is-in .i { transform: none; }

/* Scroll-in: photos open like a curtain and settle from a zoom */
.work.reveal figure, .post-card.reveal figure, .approach figure.reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease) var(--rd, 0ms); }
.work.reveal figure img, .post-card.reveal figure img, .approach figure.reveal img { transform: scale(1.3); transition: transform 1.8s var(--ease) var(--rd, 0ms), filter 1.2s var(--ease); }
.work.reveal.is-in figure, .post-card.reveal.is-in figure, .approach figure.reveal.is-in { clip-path: inset(0); }
.work.reveal.is-in figure img, .post-card.reveal.is-in figure img, .approach figure.reveal.is-in img { transform: scale(1); }
.work.reveal.is-in:hover figure img, .post-card.reveal.is-in:hover figure img { transform: scale(1.05); transition-delay: 0s; }
.approach figure.reveal { transform: none; opacity: 1; }
.statement img.bg { will-change: transform; }

/* Statement band */
.statement { position: relative; color: #fff; overflow: hidden; }
.statement img.bg { position: absolute; inset: -10% 0; width: 100%; height: 120%; object-fit: cover; }
.statement::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .82), rgba(0, 0, 0, .3)); }
.statement .wrap { position: relative; z-index: 1; padding-block: clamp(110px, 14vw, 200px); }
.statement h2 { color: #fff; font-size: clamp(34px, 4.2vw, 64px); max-width: 900px; margin: 18px 0 30px; letter-spacing: -.03em; line-height: .95; }
.statement p { max-width: 440px; color: rgba(255, 255, 255, .82); }
.statement .eyebrow { color: rgba(255, 255, 255, .8); }

/* Accordion */
.approach { background: var(--sage); }
.approach .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
.approach h2 { font-size: clamp(34px, 4.2vw, 64px); letter-spacing: -.03em; margin: 18px 0 50px; max-width: 900px; }
.acc-item { border-top: 1px solid var(--line); }
.acc-item:last-child { border-bottom: 1px solid var(--line); }
.acc-item button {
	all: unset; cursor: pointer; width: 100%; box-sizing: border-box;
	display: flex; align-items: center; gap: 16px; padding: 16px 0;
	font-size: clamp(20px, 1.7vw, 25px); color: var(--ink); letter-spacing: -.01em;
}
.acc-item button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.acc-item .pm { width: 14px; height: 14px; position: relative; flex: none; }
.acc-item .pm::before, .acc-item .pm::after { content: ""; position: absolute; inset: 6px 0 auto; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.acc-item .pm::after { transform: rotate(90deg); }
.acc-item.is-open .pm::after { transform: rotate(0); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding: 0 0 18px 30px; max-width: 620px; font-size: 16px; }
.intro > *, .approach .grid > *, .residents > *, .works > *, .posts > *, .process > * { min-width: 0; }
.approach figure { margin: 0; width: 100%; border-radius: var(--radius); overflow: hidden; position: sticky; top: 100px; aspect-ratio: 4 / 5; }
.approach figure img { width: 100%; height: 100%; object-fit: cover; }

/* Marquee */
.marquee { background: var(--terra); overflow: hidden; padding-block: 26px; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { font-size: clamp(30px, 3.4vw, 50px); color: #fff; white-space: nowrap; padding-right: .5em; letter-spacing: -.02em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Residents */
.residents { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.residents h2 { font-size: clamp(34px, 4.2vw, 64px); letter-spacing: -.03em; margin: 18px 0 24px; line-height: .95; }
.tools { display: grid; gap: 12px; }
.tool { background: var(--white); border-radius: var(--radius); padding: 22px 24px; display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: center; }
.tool .n { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; font: 400 12px var(--mono); color: var(--ink); }
.tool h3 { font-size: 21px; margin-bottom: 4px; }
.tool p { margin: 0; font-size: 15px; }

/* Posts */
.posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.post-card figure { margin: 0 0 16px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--stone); }
.post-card figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.post-card:hover figure img { transform: scale(1.05); }
.post-card h3 { font-size: 21px; margin: 10px 0; letter-spacing: -.01em; }
.post-card p { font-size: 15px; }
.tag { display: inline-block; font: 400 11px/1 var(--mono); text-transform: uppercase; padding: 8px 10px; border-radius: 6px; background: var(--chip); color: var(--ink); }

/* Contact CTA */
.cta { padding-block: clamp(90px, 12vw, 180px); text-align: center; border-top: 1px solid var(--line); }
.cta h2 { font-size: clamp(64px, 14vw, 230px); font-weight: 900; text-transform: uppercase; letter-spacing: -.06em; line-height: .82; margin: 24px 0 30px; }
.cta p { font-size: clamp(20px, 2vw, 28px); color: var(--ink); line-height: 1.15; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, .72); padding-block: 70px 30px; }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.site-footer .meta { color: rgba(255, 255, 255, .45); display: block; margin-bottom: 10px; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-logo { margin: 0 0 18px; }
.site-footer .bottom { margin-top: 60px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; gap: 20px; font: 400 12px var(--mono); flex-wrap: wrap; }

/* Inner pages */
.page-hero { padding: 160px 0 60px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(48px, 8vw, 130px); font-weight: 900; text-transform: uppercase; letter-spacing: -.05em; line-height: .86; margin-top: 18px; }
.page-hero .lead { max-width: 640px; margin-top: 24px; font-size: 19px; }
.entry { max-width: 820px; padding-block: 70px 110px; font-size: 18px; line-height: 1.6; }
.entry h2 { font-size: clamp(28px, 3vw, 40px); margin: 1.6em 0 .5em; }
.entry h3, .entry h4 { font-size: 24px; margin: 1.4em 0 .4em; }
.entry ul { padding-left: 1.2em; }
.entry > :first-child { margin-top: 0; }
.entry a { text-decoration: underline; text-underline-offset: 3px; }
.page-cover { border-radius: var(--radius); overflow: hidden; margin-top: 40px; aspect-ratio: 21 / 8; }
.page-cover img { width: 100%; height: 100%; object-fit: cover; }
.archive-grid { padding-block: 70px 110px; }
.pagination { margin-top: 50px; display: flex; gap: 8px; }
.pagination .page-numbers { padding: 10px 14px; border-radius: 8px; background: var(--chip); font: 400 13px var(--mono); }
.pagination .current { background: var(--ink); color: #fff; }

/* Forms */
.form { display: grid; gap: 14px; max-width: 720px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: grid; gap: 6px; font: 400 12px var(--mono); text-transform: uppercase; color: var(--ink); }
.form input, .form select, .form textarea {
	font: 500 17px var(--font); color: var(--ink); background: var(--white);
	border: 1px solid transparent; border-radius: 10px; padding: 14px 16px; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form textarea { min-height: 160px; resize: vertical; }
.form .hp { position: absolute; left: -9999px; }
.form button.btn { border: 0; cursor: pointer; justify-self: start; }
.notice { padding: 14px 18px; border-radius: 10px; background: var(--sage); color: var(--ink); margin-bottom: 20px; max-width: 720px; }
.notice--error { background: var(--ink); color: #fff; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.reveal { opacity: 1; transform: none; }
	.ink-fill .w { opacity: 1; }
	.split-up .i { transform: none; }
	.work.reveal figure, .post-card.reveal figure, .approach figure.reveal { clip-path: none; }
	.work.reveal figure img, .post-card.reveal figure img, .approach figure.reveal img { transform: none; }
	.hero-text h1 span > b { transform: none; }
}

/* Responsive */
@media (max-width: 1100px) {
	.process, .posts { grid-template-columns: 1fr 1fr; }
	.site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.site-header { background: rgba(243, 243, 241, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding-block: 10px; }
	.hero { grid-template-columns: 1fr; padding-top: 64px; }
	.hero-media { min-height: 46svh; }
	.hero-text { padding-top: 50px; }
	.hero-side, .intro-band .vlabel { display: none; }
	.intro-band::before { background-size: calc((100% - 2 * var(--gutter)) / 2) 100%; }
	.intro, .approach .grid, .residents { grid-template-columns: 1fr; gap: 30px; }
	.work { grid-column: span 12; }

	.approach figure { position: static; aspect-ratio: 4 / 3; }
	.menu-overlay { grid-template-columns: 1fr; }
	.header-phone { display: none; }
	.sec-head { flex-direction: column; align-items: start; }
}
@media (max-width: 560px) {
	.process, .posts, .site-footer .cols, .form .row { grid-template-columns: 1fr; }
	.step { min-height: 280px; }
	.logo-mark { height: 36px; }
	.logo-words b { font-size: 21px; }
	.logo-words small { font-size: 7.4px; }
}

/* Monochrome photography: black & white at rest, colour bloom on hover */
.city img, .work figure img, .post-card figure img, .approach figure img, .page-cover img, .statement img.bg {
	filter: grayscale(1) contrast(1.06);
	transition: filter 1.2s var(--ease), transform 1.2s var(--ease);
}
.work:hover figure img, .post-card:hover figure img, .approach figure:hover img { filter: grayscale(0) contrast(1); }
.marquee span { -webkit-text-stroke: 0; }
.marquee__track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .7); }

/* Short-term / Airbnb block: the one splash of brand colour on a monochrome page */
:root { --airbnb: #ff5a5f; }
.str { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; background: var(--white); border-radius: calc(var(--radius) * 1.5); padding: clamp(22px, 3vw, 44px); }
.str > * { min-width: 0; }
.str h2 { font-size: clamp(32px, 3.6vw, 56px); letter-spacing: -.03em; line-height: .95; margin: 14px 0 20px; }
.str-text p { max-width: 520px; font-size: 17px; }
.airbnb-tag { display: flex; align-items: center; gap: 8px; color: var(--airbnb); font-weight: 600; font-size: 22px; letter-spacing: -.02em; margin-bottom: 22px; }
.airbnb-tag .airbnb-belo { width: 34px; height: 34px; }
.str-points { list-style: none; padding: 0; margin: 6px 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.str-points li { font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .03em; padding: 10px 12px; border-radius: 99px; background: var(--paper); color: var(--ink); }
.str-media { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 5 / 4; }
.str-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter 1.2s var(--ease), transform 1.4s var(--ease); }
.str:hover .str-media img { filter: none; transform: scale(1.03); }
.str-badge { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 99px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
.str-badge .airbnb-belo { width: 18px; height: 18px; color: var(--airbnb); }
@media (max-width: 860px) {
	.str { grid-template-columns: 1fr; }
	.str-media { order: -1; aspect-ratio: 4 / 3; }
}

/* Process cards combine scroll-in and hover colour transitions; hover reacts instantly. */
.step.reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), color .5s var(--ease); }
.step.reveal.is-in:is(:hover, :focus-visible, .is-active) { transition-delay: 0s !important; }

/* ---------- Elementor ---------- */
/* Containers holding a full-bleed Batra section: no padding or gaps, edge to edge. */
.e-con.batra-flush {
	--padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
	--gap: 0px; --row-gap: 0px; --column-gap: 0px; --margin-top: 0px; --margin-bottom: 0px;
}
.e-con.batra-flush > .elementor-widget { width: 100%; }

/* Inner-page content built with Elementor keeps the reading layout and typography. */
.e-con.batra-entry {
	--padding-top: 70px; --padding-bottom: 110px; --padding-left: var(--gutter); --padding-right: var(--gutter);
	max-width: 1680px; margin-inline: auto;
}
.elementor.elementor .e-con.batra-entry > .elementor-widget.elementor-widget-text-editor { max-width: 820px; }
.elementor-widget-text-editor { font-size: 18px; line-height: 1.6; color: var(--ink-80); }
.elementor-widget-text-editor h2 { font-size: clamp(28px, 3vw, 40px); margin: 1.6em 0 .5em; }
.elementor-widget-text-editor h3, .elementor-widget-text-editor h4 { font-size: 24px; margin: 1.4em 0 .4em; }
.elementor-widget-text-editor > :first-child, .elementor-widget-text-editor .elementor-widget-container > :first-child { margin-top: 0; }
.elementor-widget-text-editor ul { padding-left: 1.2em; }
.elementor-widget-text-editor a { text-decoration: underline; text-underline-offset: 3px; }

/* In the Elementor editor, show everything in its final state so nothing is hidden while editing. */
.elementor-editor-active .reveal,
.elementor-editor-active .split-up .i { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .work.reveal figure,
.elementor-editor-active .post-card.reveal figure,
.elementor-editor-active .approach figure.reveal { clip-path: none !important; }
.elementor-editor-active .work.reveal figure img,
.elementor-editor-active .post-card.reveal figure img,
.elementor-editor-active .approach figure.reveal img { transform: none !important; }
.elementor-editor-active .hero-text h1 span > b { animation: none; transform: none; }
/* Elementor resets figure margins; keep the gap under card photos. */
.elementor .elementor-widget .section .works .work figure,
.elementor .elementor-widget .section .posts .post-card figure { margin: 0 0 16px; }
/* Elementor sets every image to height:auto; theme photos must fill their frames. */
.elementor .elementor-widget .city img,
.elementor .elementor-widget .str-media img,
.elementor .elementor-widget .step-media img,
.elementor .elementor-widget .work figure img,
.elementor .elementor-widget .post-card figure img,
.elementor .elementor-widget .approach figure img,
.elementor .elementor-widget .page-cover img { width: 100%; height: 100%; max-width: none; }
.elementor .elementor-widget .statement img.bg { width: 100%; height: 120%; max-width: none; }

/* ---------- Blog ---------- */
.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.cat-filter a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: var(--chip); color: var(--ink); font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; transition: background .3s var(--ease), color .3s var(--ease); }
.cat-filter a span { opacity: .55; }
.cat-filter a:hover { background: rgba(14, 14, 14, .14); }
.cat-filter a[aria-current="page"] { background: var(--ink); color: #fff; }
.pagination { flex-wrap: wrap; }
.pagination a.page-numbers:hover { background: rgba(14, 14, 14, .14); }

/* Single post: centred reading column */
.post-hero { padding: 150px 0 0; }
.post-hero .wrap > * { max-width: 860px; margin-inline: auto; }
.back-link { display: block; font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-60); margin-bottom: 28px; }
.back-link:hover { color: var(--ink); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.post-hero h1 { font-size: clamp(34px, 4.6vw, 64px); letter-spacing: -.03em; line-height: 1.02; }
.post-hero .lead { font-size: 20px; color: var(--ink-80); margin-top: 22px; }
.post-hero .wrap > .post-cover { max-width: 1180px; margin-top: 44px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 21 / 9; }
.post-cover img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter 1.2s var(--ease); }
.post-cover:hover img { filter: none; }
.entry--post { margin-inline: auto; max-width: 760px; }
.entry--post img { border-radius: 10px; margin: 10px 0; }
.entry--post blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--ink); font-size: 20px; }
.related { border-top: 1px solid var(--line); }
.posts--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .posts--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
	.posts--3 { grid-template-columns: 1fr; }
	.post-hero { padding-top: 110px; }
	.post-hero .wrap > .post-cover { aspect-ratio: 4 / 3; }
}

/* Office addresses (footer + menu) */
.offices { margin: 0; display: grid; gap: 16px; }
.offices .office { display: block; line-height: 1.45; }
.offices .office strong { display: block; font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin-bottom: 2px; }
.offices .office a { text-decoration: underline; text-underline-offset: 3px; }
.menu-phone { display: block; }

/* ---------- Contact page ---------- */
.page-hero__actions { margin-top: 28px; }
.contact-band { background: var(--paper-2); }
.contact-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-split__intro h2 { font-size: clamp(30px, 3vw, 44px); letter-spacing: -.02em; margin-bottom: 12px; }
.contact-split__intro p { max-width: 34ch; }
.offices-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.office-card { display: grid; gap: 6px; align-content: start; }
.office-card h3 { font-size: 22px; margin-bottom: 6px; }
.office-card__address { margin: 0 0 10px; color: var(--ink-80); }
.office-card__phone { font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; word-break: break-word; }
.office-card__note { margin: 8px 0 0; font-size: 15px; color: var(--ink-60); }

.form--grid { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 18px; }
.form--grid .wide, .form--grid .chips, .form--grid .consent, .form--grid button { grid-column: 1 / -1; }
.form .chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form .chips legend { font: 400 12px var(--mono); text-transform: uppercase; color: var(--ink); margin-bottom: 8px; padding: 0; }
.form .chip { display: inline-flex; position: relative; font: 500 15px/1 var(--font); text-transform: none; cursor: pointer; }
.form .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; }
.form .chip span { padding: 11px 16px; border-radius: 99px; background: var(--white); border: 1px solid transparent; color: var(--ink); transition: background .25s var(--ease), color .25s var(--ease); }
.form .chip:hover span { border-color: var(--ink-60); }
.form .chip input:checked + span { background: var(--ink); color: #fff; }
.form .chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.form .consent { display: flex; align-items: flex-start; gap: 10px; font: 500 15px/1.4 var(--font); text-transform: none; color: var(--ink-80); cursor: pointer; }
.form .consent input { width: 18px; height: 18px; padding: 0; margin: 1px 0 0; flex: none; accent-color: var(--ink); }

.contact-map { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(360px, 42vw, 560px); }
.contact-map__map { position: relative; background: var(--stone); overflow: hidden; }
.contact-map__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }
.contact-map__tabs { position: absolute; z-index: 2; top: 18px; right: 18px; display: flex; gap: 8px; }
.contact-map__tabs .btn { border: 0; cursor: pointer; padding: 12px 18px; background: rgba(255, 255, 255, .9); }
.contact-map__tabs .btn.btn--dark { background: var(--ink); color: #fff; }
.contact-map__photo { margin: 0; overflow: hidden; }
.contact-map__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter 1.2s var(--ease); }
.contact-map__photo:hover img { filter: none; }

.resident-cta { border-top: 1px solid var(--line); }
.resident-cta__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 16px; }
.resident-cta h2 { font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -.02em; max-width: 760px; }

@media (max-width: 1100px) { .offices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.contact-split { grid-template-columns: 1fr; }
	.contact-map { grid-template-columns: 1fr; }
	.contact-map__map { min-height: 360px; }
	.contact-map__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
	.offices-grid, .form--grid { grid-template-columns: 1fr; }
}
/* Elementor resets image heights; the contact photo must fill its frame. */
.elementor .elementor-widget .contact-map__photo img { width: 100%; height: 100%; max-width: none; }