/* ============================================================
KhanModi Rentals — Premium Boutique Hospitality
============================================================ */
/* Fonts (Fraunces + Inter Tight) are loaded via + a
non-render-blocking in each page — see the HTML. */
:root {
/* ---------- Color palette ---------- */
--c-ink: #0B0B0B;
--c-ink-soft: #1A1A1A;
--c-cream: #F4EFE8;
--c-ivory: #FAF6EF;
--c-paper: #FFFFFF;
--c-red: #D9302A;
--c-red-dark: #A8231E;
--c-red-light: #EC4F49;
--c-muted: #6B6259;
--c-muted-soft: #8C8378;
--c-line: rgba(11,11,11,.08);
--c-line-strong:rgba(11,11,11,.18);
/* ---------- Typography ---------- */
--f-serif: "Fraunces", "DM Serif Display", Georgia, "Times New Roman", serif;
--f-sans: "Inter Tight", "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
/* ---------- Sizing ---------- */
--w-max: 1380px;
--gutter: clamp(20px, 5vw, 88px);
--sec-py: clamp(96px, 13vw, 200px);
--r-sm: 8px;
--r-card: 14px;
--r-lg: 22px;
--r-pill: 999px;
--c-red-10: rgba(217,48,42,.10);
--c-red-18: rgba(217,48,42,.18);
/* ---------- Shadow & motion ---------- */
--sh-1: 0 1px 2px rgba(11,11,11,.06);
--sh-2: 0 14px 36px rgba(11,11,11,.07), 0 2px 6px rgba(11,11,11,.04);
--sh-3: 0 28px 72px rgba(11,11,11,.14), 0 6px 14px rgba(11,11,11,.06);
--ease: cubic-bezier(.4, .0, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--f-sans);
font-weight: 400;
color: var(--c-ink);
background: var(--c-cream);
line-height: 1.65;
letter-spacing: -.003em;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Subtle paper grain — sits above everything but ignores pointer events */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 200;
opacity: .035;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--c-red); color: #fff; }
/* ---------- Layout primitives ---------- */
.container { max-width: var(--w-max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-py); position: relative; }
.section--cream { background: var(--c-cream); }
.section--ivory { background: var(--c-ivory); }
/* Section numbering — editorial detail */
.section-num {
display: inline-flex; align-items: center; gap: 14px;
font-family: var(--f-sans);
font-size: .72rem;
font-weight: 500;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--c-red-dark); /* AA contrast on cream/ivory */
margin: 0 0 22px;
}
.section-num::before {
content: ""; display: inline-block;
width: 32px; height: 1px;
background: currentColor;
}
.section-num--light { color: var(--c-red-light); }
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--f-serif);
font-weight: 400;
line-height: 1.04;
letter-spacing: -0.018em;
margin: 0 0 .4em;
color: inherit;
font-variation-settings: "opsz" 144, "SOFT" 30;
}
h1 { font-size: clamp(2.4rem, 6vw, 5rem); font-variation-settings: "opsz" 144, "SOFT" 50; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); font-family: var(--f-sans); font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
h4 { font-size: 1rem; font-family: var(--f-sans); font-weight: 600; letter-spacing: -.002em; }
p { margin: 0 0 1em; }
.lead {
font-size: clamp(1.05rem, 1.3vw, 1.22rem);
line-height: 1.62;
color: var(--c-ink-soft);
font-weight: 400;
}
.muted { color: var(--c-muted); }
/* Drop cap — for editorial body sections */
.dropcap::first-letter {
font-family: var(--f-serif);
font-weight: 500;
font-size: 4em;
line-height: .88;
float: left;
padding: 4px 14px 0 0;
color: var(--c-red);
font-variation-settings: "opsz" 144, "SOFT" 80;
}
/* gold/red rule divider */
.rule {
display: block;
width: 56px; height: 2px;
background: var(--c-red);
margin: 0 0 24px;
border: 0;
}
.text-center .rule { margin-inline: auto; }
.rule--light { background: var(--c-red-light); }
/* ---------- Buttons ---------- */
.btn {
--b-bg: var(--c-red);
--b-fg: #fff;
--b-border: var(--c-red);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 17px 34px;
background: var(--b-bg);
color: var(--b-fg);
border-radius: var(--r-pill);
border: 1.5px solid var(--b-border);
font-size: .78rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
box-shadow: var(--sh-1);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn::after {
content: "→";
font-size: 1rem;
margin-left: 4px;
transition: transform .3s var(--ease-out);
letter-spacing: 0;
}
.btn:hover::after { transform: translateX(4px); }
.btn--ghost-light {
--b-bg: transparent;
--b-fg: #fff;
--b-border: rgba(255,255,255,.45);
}
.btn--ghost-light:hover { --b-bg: #fff; --b-fg: var(--c-ink); --b-border: #fff; }
.btn--ink {
--b-bg: var(--c-ink);
--b-fg: #fff;
--b-border: var(--c-ink);
}
.btn--ink:hover { --b-bg: var(--c-red); --b-border: var(--c-red); }
.btn--ivory {
--b-bg: var(--c-ivory);
--b-fg: var(--c-ink);
--b-border: var(--c-ivory);
}
.btn--ivory:hover { --b-bg: var(--c-red); --b-fg: #fff; --b-border: var(--c-red); }
.btn--small { padding: 13px 24px; font-size: .72rem; letter-spacing: .2em; }
.btn--text {
background: transparent; border: 0; box-shadow: none; padding: 6px 0;
color: var(--c-ink);
border-bottom: 1.5px solid var(--c-ink);
border-radius: 0;
font-size: .82rem;
}
.btn--text::after { font-size: 1.05rem; }
.btn--text:hover { transform: translateY(0); box-shadow: none; color: var(--c-red); border-color: var(--c-red); }
/* Disabled state — e.g. Send while the Turnstile human-check isn't ready yet */
.btn:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; box-shadow: none; }
.btn:disabled:hover::after,
.btn[disabled]:hover::after { transform: none; }
.cta-group {
display: flex; gap: 14px; flex-wrap: wrap;
justify-content: center; align-items: center;
}
/* ---------- Header (with logo mark) ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(244, 239, 232, .88);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--c-line);
padding-block: 16px;
transition: background .3s var(--ease);
}
.site-header.is-dark {
background: linear-gradient(180deg, rgba(11,11,11,.7), rgba(11,11,11,.35));
border-bottom-color: rgba(255,255,255,.06);
color: var(--c-cream);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 32px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
width: 38px; height: 38px;
border-radius: 8px;
object-fit: contain;
box-shadow: 0 2px 8px rgba(11,11,11,.18);
}
.brand__name {
font-family: var(--f-serif);
font-size: 1.35rem;
font-weight: 500;
letter-spacing: -.012em;
line-height: 1;
color: inherit;
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); position: relative; }
.nav__list { display: flex; gap: clamp(16px, 2vw, 36px); list-style: none; padding: 0; margin: 0; }
.nav__list a {
position: relative;
font-size: .88rem; font-weight: 500;
padding: 6px 2px;
letter-spacing: .02em;
}
.nav__list a::after {
content: ""; position: absolute; left: 2px; right: 2px; bottom: -2px;
height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .3s var(--ease-out);
}
.nav__list a:hover::after,
.nav__list a.active::after { transform: scaleX(1); }
.nav__list a.active { color: var(--c-red); }
.site-header.is-dark .nav__list a.active { color: var(--c-red-light); }
.site-header.is-dark .nav__list a.active::after { background: var(--c-red-light); }
.nav__cta { padding: 12px 22px; font-size: .7rem; }
.nav-toggle {
display: none;
background: transparent; border: 0;
width: 44px; height: 44px;
flex-direction: column; align-items: center; justify-content: center; gap: 6px;
color: inherit;
}
.nav-toggle span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
@media (max-width: 960px) {
.nav__list, .nav__cta { display: none; }
.nav-toggle { display: flex; }
.nav.is-open .nav__list, .nav.is-open .nav__cta {
display: flex; position: absolute; left: 0; right: 0; top: 100%;
background: var(--c-cream); padding: 28px var(--gutter);
flex-direction: column; gap: 18px; align-items: flex-start;
border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
width: 100vw; margin-inline: calc(50% - 50vw);
}
.site-header.is-dark.has-open-menu .nav.is-open .nav__list,
.site-header.is-dark.has-open-menu .nav.is-open .nav__cta { background: var(--c-ink); }
.nav.is-open .nav__cta { display: inline-flex; align-self: flex-start; }
}
/* ---------- Home Hero ---------- */
.hero-home {
position: relative;
min-height: min(100vh, 940px);
padding-block: clamp(120px, 14vh, 180px);
display: flex; align-items: center;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hero-home__bg {
position: absolute; inset: 0; z-index: -2;
}
.hero-home__bg img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.04);
animation: heroPan 22s ease-in-out infinite alternate;
}
@keyframes heroPan {
from { transform: scale(1.04) translate(0, 0); }
to { transform: scale(1.08) translate(-2%, -1%); }
}
.hero-home::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(180deg, rgba(11,11,11,.5) 0%, rgba(11,11,11,.55) 50%, rgba(11,11,11,.82) 100%),
radial-gradient(ellipse at 50% 30%, rgba(11,11,11,.1), rgba(11,11,11,.55) 70%);
}
.hero-home__inner {
text-align: center; max-width: 1040px;
margin-inline: auto;
position: relative;
}
.hero-home__est {
position: absolute; top: -64px; right: 0;
font-family: var(--f-sans);
font-size: .68rem; letter-spacing: .35em;
color: rgba(255,255,255,.6);
text-transform: uppercase;
}
@media (max-width: 720px) { .hero-home__est { display: none; } }
.hero-brand {
display: flex; flex-direction: column; align-items: center;
margin-bottom: 32px;
}
.hero-brand__logo {
width: clamp(88px, 11vw, 128px);
height: clamp(88px, 11vw, 128px);
object-fit: contain;
border-radius: 20px;
filter: drop-shadow(0 14px 36px rgba(0,0,0,.55));
margin-bottom: 26px;
}
.hero-brand__name {
font-family: var(--f-serif);
font-size: clamp(2.6rem, 7.4vw, 5.4rem);
line-height: .96;
letter-spacing: -.018em;
color: #fff;
text-shadow: 0 4px 36px rgba(0,0,0,.5);
margin: 0;
font-variation-settings: "opsz" 144, "SOFT" 90;
font-weight: 500;
}
.hero-brand__rule {
display: block; width: 64px; height: 2px;
background: var(--c-red);
border: 0;
margin: 26px auto 18px;
}
.hero-brand__tagline {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.5vw, 1.32rem);
color: rgba(255,255,255,.92);
margin: 0;
letter-spacing: -.005em;
text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.hero-home .lead {
max-width: 660px;
margin: 14px auto 32px;
font-size: clamp(.98rem, 1.15vw, 1.08rem);
color: rgba(255,255,255,.85);
text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
.hero-home .scroll-cue {
position: absolute; left: 50%; bottom: 28px;
transform: translateX(-50%);
color: rgba(255,255,255,.5); font-size: .66rem; letter-spacing: .32em;
text-transform: uppercase;
display: flex; flex-direction: column; align-items: center; gap: 8px;
pointer-events: none;
}
.scroll-cue::after {
content: ""; width: 1px; height: 32px;
background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
0%,100% { opacity: .2; transform: scaleY(.6); }
50% { opacity: 1; transform: scaleY(1); }
}
@media (max-height: 840px) { .hero-home .scroll-cue { display: none; } }
/* ---------- Stats band ---------- */
.stats {
padding-block: clamp(60px, 9vw, 110px);
background: var(--c-ivory);
border-block: 1px solid var(--c-line);
}
.stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
@media (max-width: 800px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
.stats__item {
text-align: center;
padding: 24px 16px;
border-right: 1px solid var(--c-line);
position: relative;
}
.stats__item:last-child { border-right: 0; }
@media (max-width: 800px) {
.stats__item:nth-child(2) { border-right: 0; }
.stats__item:nth-child(1), .stats__item:nth-child(2) { border-bottom: 1px solid var(--c-line); margin-bottom: 24px; padding-bottom: 32px; }
}
.stats__num {
font-family: var(--f-serif);
font-size: clamp(3.6rem, 6.4vw, 5.8rem);
font-weight: 300;
line-height: .95;
color: var(--c-ink);
margin: 0 0 14px;
letter-spacing: -.028em;
font-variation-settings: "opsz" 144, "SOFT" 80;
position: relative;
}
.stats__item::before {
content: "";
display: block;
width: 1.5px; height: 18px;
background: var(--c-red);
margin: 0 auto 18px;
}
.stats__num .symbol {
color: var(--c-red);
margin-left: 4px;
}
.stats__label {
font-size: .72rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--c-muted);
font-weight: 500;
margin: 0;
}
/* ---------- Split (two-col) ---------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
}
.split--asym {
grid-template-columns: 5fr 6fr;
align-items: stretch;
gap: clamp(40px, 7vw, 120px);
}
@media (max-width: 900px) {
.split, .split--asym { grid-template-columns: 1fr; }
}
.split__text {
display: flex; flex-direction: column; justify-content: center;
max-width: 560px;
}
.split__media {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-3);
}
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform .8s var(--ease-out); }
.split__media:hover img { transform: scale(1.04); }
.split__media--tall img { aspect-ratio: 3/4; }
.split__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(11,11,11,.18));
pointer-events: none;
}
.split__media__cap {
position: absolute; left: 18px; bottom: 18px;
background: rgba(255,255,255,.94);
padding: 8px 14px;
border-radius: var(--r-pill);
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-ink);
font-weight: 600;
backdrop-filter: blur(8px);
}
/* ---------- Why Us specifics ---------- */
.why-section { background: var(--c-cream); }
/* ---------- Featured Properties teaser (homepage) ---------- */
.featured-properties { background: var(--c-cream); }
.feat-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
.feat-grid__hero {
grid-column: 1 / -1;
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 21/9;
box-shadow: var(--sh-2);
cursor: pointer;
}
.feat-grid__hero img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.feat-grid__hero:hover img { transform: scale(1.04); }
.feat-grid__hero__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(11,11,11,.78));
display: flex; flex-direction: column; justify-content: flex-end;
padding: clamp(28px, 5vw, 56px);
color: #fff;
}
.feat-grid__hero__chip {
display: inline-block; align-self: flex-start;
font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
padding: 8px 14px; border-radius: var(--r-pill);
background: rgba(255,255,255,.14); backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.3);
margin-bottom: 18px; font-weight: 500;
}
.feat-grid__hero h3 {
font-family: var(--f-serif);
font-size: clamp(1.8rem, 3.4vw, 2.8rem);
line-height: 1.05;
color: #fff;
font-weight: 400;
margin: 0 0 12px;
letter-spacing: -.012em;
}
.feat-grid__hero p {
max-width: 580px;
font-size: 1rem;
color: rgba(255,255,255,.88);
margin: 0 0 24px;
}
.feat-grid__sub {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1080px) { .feat-grid__sub { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-grid__sub { grid-template-columns: 1fr; } }
.mini-property {
display: flex; flex-direction: column;
cursor: pointer;
}
.mini-property__media {
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4/3;
box-shadow: var(--sh-1);
margin-bottom: 16px;
}
.mini-property__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.mini-property:hover .mini-property__media img { transform: scale(1.06); }
.mini-property__chip {
font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
color: var(--c-red-dark); margin-bottom: 6px; font-weight: 600;
}
.mini-property__title { font-family: var(--f-serif); font-weight: 400; font-size: 1.2rem; line-height: 1.2; margin: 0; }
.featured-properties__cta { margin-top: 56px; text-align: center; }
/* ---------- Process / How We Work ---------- */
.process-section { background: var(--c-ivory); }
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(28px, 4vw, 56px);
margin-top: 48px;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .process-grid { grid-template-columns: 1fr; } }
.process-step { position: relative; padding-top: 26px; }
.process-step__num {
font-family: var(--f-serif);
font-weight: 500;
font-size: clamp(4.2rem, 6.8vw, 6.5rem);
line-height: 1;
color: var(--c-red);
opacity: 1;
margin: 0 0 18px;
letter-spacing: -.03em;
font-variation-settings: "opsz" 144, "SOFT" 95;
}
.process-step h3 {
font-family: var(--f-serif);
font-size: 1.45rem;
font-weight: 500;
margin: 0 0 12px;
letter-spacing: -.01em;
}
.process-step p {
font-size: .96rem;
color: var(--c-muted);
line-height: 1.6;
margin: 0;
}
.process-step::before {
content: ""; position: absolute; top: 0; left: 0;
width: 32px; height: 1px; background: var(--c-red);
}
/* ---------- Testimonials (magazine) ---------- */
.testimonials {
background: var(--c-cream);
text-align: center;
overflow: hidden;
position: relative;
}
.testimonials__head { margin-bottom: 60px; }
.t-feature {
max-width: 880px; margin: 0 auto 80px;
text-align: center;
position: relative;
padding: 0 16px;
}
.t-feature::before {
content: "“";
font-family: var(--f-serif);
font-size: 10rem;
line-height: .8;
color: var(--c-red);
opacity: .14;
position: absolute;
top: -34px; left: 50%;
transform: translateX(-50%);
font-variation-settings: "opsz" 144;
}
.t-feature__quote {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
font-size: clamp(1.4rem, 2.4vw, 1.95rem);
line-height: 1.4;
color: var(--c-ink);
margin: 0 0 32px;
letter-spacing: -.008em;
position: relative;
}
.t-feature__author {
display: inline-flex; align-items: center; gap: 14px;
margin-top: 8px;
}
.t-feature__avatar {
width: 56px; height: 56px; border-radius: 50%;
object-fit: cover;
border: 2px solid var(--c-paper);
box-shadow: var(--sh-1);
}
.t-feature__name {
font-family: var(--f-sans); font-weight: 600;
font-size: .9rem; letter-spacing: .06em;
color: var(--c-ink);
}
.t-feature__name span {
display: block; font-weight: 400;
font-size: .72rem;
color: var(--c-muted);
letter-spacing: .2em;
margin-top: 4px;
text-transform: uppercase;
}
/* Compact testimonial cards */
.carousel { position: relative; }
.carousel__viewport { overflow: hidden; padding: 70px 4px 30px; }
.carousel__track {
display: flex; gap: 28px;
transition: transform .8s var(--ease-out);
will-change: transform;
}
.t-card {
flex: 0 0 calc((100% - 56px) / 3);
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-card);
padding: 70px 28px 28px;
box-shadow: var(--sh-2);
position: relative;
display: flex; flex-direction: column;
text-align: left;
min-height: 380px;
}
@media (max-width: 1080px) { .t-card { flex-basis: calc((100% - 28px) / 2); } }
@media (max-width: 720px) { .t-card { flex-basis: 100%; padding: 62px 24px 26px; } }
.t-card__avatar {
position: absolute; top: -48px; left: 50%; transform: translateX(-50%);
width: 96px; height: 96px; border-radius: 50%;
object-fit: cover;
border: 4px solid var(--c-paper);
box-shadow: var(--sh-3);
}
.t-card::before {
content: "“";
position: absolute;
top: 52px; left: 20px;
font-family: var(--f-serif);
font-size: 4.5rem;
line-height: 1;
color: var(--c-red);
opacity: .3;
}
.t-card__quote {
font-family: var(--f-serif);
font-style: italic;
font-weight: 400;
font-size: .98rem;
line-height: 1.55;
color: var(--c-ink-soft);
margin: 0 0 24px;
}
.t-card__author {
margin-top: auto;
font-family: var(--f-sans);
font-weight: 600;
font-size: .88rem;
letter-spacing: .04em;
color: var(--c-ink);
text-align: center;
padding-top: 16px;
border-top: 1px solid var(--c-line);
}
.carousel__nav {
display: flex; gap: 14px; justify-content: center;
margin-top: 36px;
}
.carousel__btn {
width: 50px; height: 50px; border-radius: 50%;
background: var(--c-paper);
color: var(--c-ink);
border: 1px solid var(--c-line);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.1rem;
transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
box-shadow: var(--sh-1);
}
.carousel__btn:hover {
background: var(--c-red); color: #fff; border-color: var(--c-red);
transform: translateY(-2px); box-shadow: var(--sh-2);
}
.carousel__btn:active { transform: translateY(0); }
/* ---------- CTA band ---------- */
.cta-band {
text-align: center;
background: var(--c-ink);
color: var(--c-cream);
position: relative;
overflow: hidden;
}
.cta-band::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 30%, rgba(217,48,42,.18), transparent 60%);
pointer-events: none;
}
.cta-band__mark {
width: 64px; height: 64px;
margin: 0 auto 32px;
border-radius: 12px;
opacity: .92;
}
.cta-band h2 { color: var(--c-cream); position: relative; }
.cta-band .lead { color: rgba(244,239,232,.72); max-width: 640px; margin: 0 auto; position: relative; }
.cta-band .cta-group { margin-top: 40px; position: relative; }
/* ---------- Form ---------- */
.form { display: grid; gap: 22px; }
.form__group { display: grid; gap: 8px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.form label {
font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
color: var(--c-muted);
}
.form .req { font-weight: 400; color: var(--c-muted-soft); text-transform: none; letter-spacing: 0; }
.form input, .form textarea {
width: 100%; padding: 12px 0;
font: inherit; font-size: .98rem;
border: 0; border-bottom: 1.5px solid var(--c-line-strong);
background: transparent;
color: var(--c-ink);
transition: border-color .25s var(--ease);
border-radius: 0;
}
.form input:focus, .form textarea:focus {
outline: none;
border-color: var(--c-red);
}
.form textarea { min-height: 130px; resize: vertical; padding-top: 18px; }
.form-actions { margin-top: 12px; }
/* ---------- Newsletter form (footer) ---------- */
.newsletter { display: flex; gap: 0; max-width: 340px; }
.newsletter input {
flex: 1; padding: 12px 14px;
font: inherit; font-size: .9rem;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
border-right: 0;
color: var(--c-cream);
border-radius: 8px 0 0 8px;
}
.newsletter input::placeholder { color: rgba(244,239,232,.45); }
.newsletter input:focus { outline: none; border-color: var(--c-red-light); background: rgba(255,255,255,.1); }
.newsletter button {
padding: 12px 18px;
background: var(--c-red);
color: #fff;
border: 1px solid var(--c-red);
border-radius: 0 8px 8px 0;
font-size: .76rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
transition: background .25s var(--ease);
}
.newsletter button:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }
/* ---------- Page Hero ---------- */
.hero-page {
position: relative;
min-height: 60vh;
display: flex; align-items: center;
color: #fff; overflow: hidden;
isolation: isolate;
}
.hero-page__bg { position: absolute; inset: 0; z-index: -2; }
.hero-page__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
.hero-page::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(135deg, rgba(11,11,11,.7), rgba(11,11,11,.42));
}
.hero-page__inner { padding-block: clamp(68px, 11vw, 130px); width: 100%; }
.hero-page h1 { color: #fff; margin: 0; font-weight: 400; }
.hero-page .lead { color: rgba(255,255,255,.86); margin-top: 22px; max-width: 540px; }
.hero-page--split .container { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end; }
@media (max-width: 900px) { .hero-page--split .container { grid-template-columns: 1fr; } }
/* ---------- Services grid ---------- */
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(20px, 2.5vw, 36px);
}
@media (max-width: 1080px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .services-grid { grid-template-columns: 1fr; } }
.service {
background: var(--c-paper);
border: 1px solid var(--c-line);
border-radius: var(--r-card);
padding: 36px 24px 30px;
text-align: center;
transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
box-shadow: var(--sh-1);
}
.service:hover {
transform: translateY(-6px);
box-shadow: var(--sh-3);
border-color: transparent;
}
.service__icon-wrap {
width: 88px; height: 88px;
border-radius: 50%;
background: var(--c-cream);
display: grid; place-items: center;
margin: 0 auto 22px;
transition: background .4s var(--ease-out);
}
.service:hover .service__icon-wrap { background: rgba(217,48,42,.1); }
.service__icon { width: 54px; height: 54px; object-fit: contain; }
.service__title { font-family: var(--f-sans); font-size: 1.02rem; font-weight: 600; color: var(--c-red-dark); margin: 0 0 10px; letter-spacing: -.005em; }
.service__desc { font-size: .9rem; color: var(--c-muted); line-height: 1.55; margin: 0; }
/* ---------- Properties (full) ---------- */
.properties-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(80px, 10vw, 140px);
}
.property {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: clamp(36px, 5vw, 72px);
align-items: center;
}
.property:nth-child(even) { grid-template-columns: .9fr 1.1fr; }
.property:nth-child(even) .property__media { order: 2; }
@media (max-width: 900px) {
.property, .property:nth-child(even) { grid-template-columns: 1fr; }
.property:nth-child(even) .property__media { order: 0; }
}
.property__media {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4/3;
box-shadow: var(--sh-2);
}
.property__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.property:hover .property__media img { transform: scale(1.05); }
.property__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(11,11,11,.32));
opacity: 0; transition: opacity .4s var(--ease);
}
.property:hover .property__media::after { opacity: 1; }
/* "Coming Soon" badge — e.g. Moongate Meadows while its full gallery is pending */
.property__badge {
position: absolute; top: 14px; left: 14px; z-index: 2;
display: inline-flex; align-items: center;
background: var(--c-red); color: #fff;
font-family: var(--f-sans); font-size: .66rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase;
padding: 7px 14px; border-radius: var(--r-pill);
box-shadow: var(--sh-2);
}
.property__body { padding: 0 clamp(0px, 2vw, 24px); }
.property__chip {
display: inline-flex; align-items: center; gap: 8px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--c-red);
margin-bottom: 14px;
}
.property__chip::before {
content: "◆";
font-size: .65rem;
opacity: .6;
}
.property__title {
margin: 0 0 16px;
font-family: var(--f-serif);
font-weight: 400;
font-size: clamp(1.8rem, 3vw, 2.4rem);
letter-spacing: -.012em;
line-height: 1.08;
}
.property__desc { color: var(--c-ink-soft); margin-bottom: 28px; max-width: 540px; font-size: 1.02rem; }
.property__cta { align-self: flex-start; }
/* Amenity chips for property cards */
.amenities {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 24px;
}
.amenities__chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
background: var(--c-ivory);
border: 1px solid var(--c-line);
border-radius: var(--r-pill);
font-size: .76rem;
color: var(--c-ink-soft);
letter-spacing: .02em;
}
/* ---------- About ---------- */
.about-hero {
background: var(--c-cream);
padding-block: clamp(64px, 8vw, 100px) clamp(20px, 3vw, 36px);
}
.about-hero h1 { max-width: 880px; font-weight: 400; }
.about-hero.text-center h1 { margin-inline: auto; }
.about-hero.text-center .lead { margin-inline: auto; }
/* Tighten the gap when a section follows the hero directly (same/related bg) */
.about-hero + .section,
.about-hero + .about-body {
padding-top: clamp(40px, 5vw, 72px);
}
/* Tighten the oversized gap between the bio and "Our Difference" */
.about-body + .different {
padding-top: clamp(40px, 5vw, 72px);
}
.about-body { background: var(--c-ivory); }
.about-body p { font-size: 1.05rem; color: var(--c-ink-soft); margin-bottom: 1.2em; }
.about-body .signature {
font-family: var(--f-serif);
font-style: italic;
font-size: 1.6rem;
color: var(--c-red);
margin-top: 32px;
font-weight: 400;
}
.different { background: var(--c-cream); }
.different__head { text-align: center; margin-bottom: 56px; }
.different__head p { color: var(--c-muted); margin-inline: auto; max-width: 720px; }
.different__list {
list-style: none; padding: 0; margin: 0 auto 48px;
max-width: 760px;
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 8px 32px;
}
@media (max-width: 600px) { .different__list { grid-template-columns: 1fr; } }
.different__list li {
display: flex; align-items: center; gap: 14px;
padding: 18px 0;
border-bottom: 1px solid var(--c-line);
font-family: var(--f-serif);
font-size: 1.22rem;
color: var(--c-ink);
font-weight: 400;
}
.different__list li::before {
content: "✦";
color: var(--c-red);
font-size: 1rem;
}
.different__cta { text-align: center; }
/* ---------- Contact page ---------- */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { font-size: 1.02rem; color: var(--c-ink-soft); }
.contact-details {
margin-top: 32px; padding: 28px;
background: var(--c-ivory);
border-left: 3px solid var(--c-red);
border-radius: 0 12px 12px 0;
}
.contact-details a { color: var(--c-red-dark); font-weight: 500; }
.contact-details a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-photo {
margin-top: 36px;
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--sh-2);
aspect-ratio: 4/3;
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- Footer ---------- */
.site-footer {
position: relative;
background: var(--c-ink);
color: var(--c-cream);
padding-block: clamp(80px, 10vw, 120px) 28px;
overflow: hidden;
isolation: isolate;
}
.site-footer__bg { position: absolute; inset: 0; z-index: -1; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.site-footer__bg::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(11,11,11,.62), rgba(11,11,11,.92));
}
.site-footer__top {
display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
gap: clamp(28px, 4vw, 64px);
align-items: start;
padding-bottom: clamp(40px, 6vw, 64px);
border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 960px) { .site-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 560px) { .site-footer__top { grid-template-columns: 1fr; } }
.site-footer__brand-block { }
.site-footer__brand-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.site-footer__brand-row img { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; }
.site-footer__brand-name {
font-family: var(--f-serif);
font-size: clamp(1.4rem, 2vw, 1.8rem);
color: #fff;
margin: 0 0 4px;
line-height: 1.1;
font-weight: 400;
letter-spacing: -.008em;
}
.site-footer__tagline { color: rgba(244,239,232,.7); font-size: .92rem; margin: 0; max-width: 320px; line-height: 1.55; }
.site-footer__est { display: block; margin-top: 18px; font-size: .68rem; letter-spacing: .3em; color: rgba(244,239,232,.4); text-transform: uppercase; }
.site-footer__heading {
color: var(--c-red-light);
font-family: var(--f-sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
margin: 0 0 22px;
}
.site-footer__nav { list-style: none; padding: 0; margin: 0; }
.site-footer__nav li { margin-bottom: 10px; }
.site-footer__nav a { color: rgba(244,239,232,.78); font-size: .94rem; transition: color .25s var(--ease); }
.site-footer__nav a:hover { color: var(--c-red-light); }
.site-footer p { margin: 6px 0; color: rgba(244,239,232,.78); font-size: .94rem; }
.site-footer a { transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--c-red-light); }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
width: 38px; height: 38px; border-radius: 50%;
background: rgba(255,255,255,.06);
color: var(--c-cream);
display: inline-flex; align-items: center; justify-content: center;
transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
border: 1px solid rgba(255,255,255,.1);
}
.socials a:hover { background: var(--c-red); color: #fff; transform: translateY(-2px); border-color: var(--c-red); }
/* "Coming soon" social icons — present but not yet linked */
.socials a.is-soon { opacity: .4; pointer-events: none; cursor: default; }
.socials a.is-soon:hover { background: transparent; transform: none; }
.socials__soon { display: block; margin-top: 10px; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--c-muted); }
/* Airbnb Superhost trust badge (stats band) */
.superhost-tag {
display: inline-flex; align-items: center; gap: 9px;
margin: 0 0 38px; padding: 9px 18px;
border: 1px solid var(--c-red-18); border-radius: 999px;
background: var(--c-red-10);
font-family: var(--f-sans); font-size: .82rem; letter-spacing: .03em;
color: var(--c-ink);
}
.superhost-tag strong { font-weight: 700; }
.superhost-tag__star { color: var(--c-red-dark); font-size: 1rem; line-height: 1; }
.superhost-tag__yr { color: var(--c-muted); letter-spacing: .12em; font-size: .72rem; }
.socials svg { width: 16px; height: 16px; fill: currentColor; }
.site-footer__bottom {
margin-top: 28px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 16px;
font-size: .78rem;
color: rgba(244,239,232,.45);
letter-spacing: .04em;
}
.site-footer__bottom-meta { display: flex; gap: 28px; flex-wrap: wrap; }
/* ---------- Scroll-reveal ---------- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.hero-home__bg img { animation: none; transform: none; }
.scroll-cue::after { animation: none; }
}
/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-l { margin-top: 32px; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ============================================================
PREMIUM POLISH v2 — Red accents, editorial details, a11y
============================================================ */
/* --- Top brand stripe --- */
.brand-stripe {
position: fixed; top: 0; left: 0; right: 0;
height: 3px;
background: var(--c-red);
z-index: 60;
pointer-events: none;
}
/* --- Skip-to-content --- */
.skip-link {
position: absolute; top: -100px; left: 16px;
background: var(--c-ink); color: #fff;
padding: 12px 18px;
border-radius: var(--r-sm);
z-index: 100;
font-size: .82rem; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase;
transition: top .25s var(--ease);
}
.skip-link:focus-visible { top: 12px; outline: 2px solid var(--c-red-light); outline-offset: 2px; }
/* --- Universal focus-visible rings --- */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px dashed var(--c-red);
outline-offset: 4px;
border-radius: 4px;
}
.btn:focus-visible {
outline: 2px dashed var(--c-red);
outline-offset: 4px;
}
.site-header.is-dark a:focus-visible,
.site-header.is-dark button:focus-visible,
.hero-home a:focus-visible {
outline-color: var(--c-red-light);
}
/* --- Active nav dot --- */
.nav__list a.active {
position: relative;
}
.nav__list a.active::before {
content: "";
position: absolute;
left: -10px; top: 50%;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--c-red);
transform: translateY(-50%);
}
.site-header.is-dark .nav__list a.active::before { background: var(--c-red-light); }
/* --- Hero: refined "Est" centered top band --- */
.hero-home__inner { padding-top: 0; }
.hero-home__est {
position: static;
display: flex; align-items: center; justify-content: center;
gap: 14px;
font-family: var(--f-sans);
font-size: .68rem;
letter-spacing: .35em;
color: rgba(255,255,255,.6);
text-transform: uppercase;
margin: 0 auto 28px;
}
.hero-home__est::before,
.hero-home__est::after {
content: ""; display: inline-block;
width: 36px; height: 1px;
background: rgba(255,255,255,.4);
}
.hero-home__est .dot { color: var(--c-red-light); font-size: .9rem; line-height: 1; }
/* --- Hero corner brackets --- */
.hero-home {
--bracket: 24px;
}
.hero-home::after {
content: "";
position: absolute;
top: 28px; left: 28px; right: 28px; bottom: 28px;
border: 0;
background:
linear-gradient(var(--c-red), var(--c-red)) top left / var(--bracket) 1.5px no-repeat,
linear-gradient(var(--c-red), var(--c-red)) top left / 1.5px var(--bracket) no-repeat,
linear-gradient(var(--c-red), var(--c-red)) top right / var(--bracket) 1.5px no-repeat,
linear-gradient(var(--c-red), var(--c-red)) top right / 1.5px var(--bracket) no-repeat,
linear-gradient(var(--c-red), var(--c-red)) bottom left / var(--bracket) 1.5px no-repeat,
linear-gradient(var(--c-red), var(--c-red)) bottom left / 1.5px var(--bracket) no-repeat,
linear-gradient(var(--c-red), var(--c-red)) bottom right / var(--bracket) 1.5px no-repeat,
linear-gradient(var(--c-red), var(--c-red)) bottom right / 1.5px var(--bracket) no-repeat;
pointer-events: none;
z-index: 0;
opacity: .55;
}
@media (max-width: 720px) { .hero-home::after { top: 14px; left: 14px; right: 14px; bottom: 14px; --bracket: 16px; } }
/* --- Watermark numerals (behind H2s) --- */
.bg-numeral {
position: absolute;
top: -.18em; left: -.05em;
font-family: var(--f-serif);
font-size: clamp(8rem, 16vw, 16rem);
line-height: .8;
color: var(--c-red);
opacity: .07;
pointer-events: none;
z-index: 0;
letter-spacing: -.04em;
font-variation-settings: "opsz" 144, "SOFT" 100;
font-weight: 500;
user-select: none;
}
.bg-numeral--right { left: auto; right: -.05em; }
.section .container { position: relative; z-index: 1; }
/* --- Asterisk row divider --- */
.divider-stars {
display: flex; justify-content: center; align-items: center;
gap: 28px;
margin: clamp(40px, 6vw, 80px) auto;
color: var(--c-red);
font-size: 1rem;
letter-spacing: .4em;
line-height: 1;
}
.divider-stars span { opacity: .7; }
.divider-stars::before,
.divider-stars::after {
content: ""; display: block;
width: clamp(40px, 8vw, 100px); height: 1px;
background: var(--c-red);
opacity: .25;
}
/* --- Featured ribbon (top-left corner of hero card) --- */
.feat-grid__hero {
position: relative;
isolation: isolate;
}
.feat-grid__hero .ribbon {
position: absolute; top: 18px; left: -50px;
transform: rotate(-45deg);
background: var(--c-red);
color: #fff;
font-family: var(--f-sans);
font-size: .7rem;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 600;
padding: 8px 60px;
z-index: 5;
box-shadow: 0 4px 12px rgba(11,11,11,.25);
}
/* --- Stats divider ornament --- */
.stats__item + .stats__item { position: relative; }
.stats__item + .stats__item::after {
content: "✦";
position: absolute; left: -8px; top: 50%; transform: translateY(-50%);
font-size: .68rem;
color: var(--c-red);
background: var(--c-ivory);
padding: 4px 0;
}
@media (max-width: 800px) {
.stats__item + .stats__item::after { display: none; }
}
/* --- Process step badge (circular outlined number) --- */
.process-step__num {
display: inline-flex; align-items: center; justify-content: center;
width: clamp(76px, 9vw, 100px);
height: clamp(76px, 9vw, 100px);
border: 1.5px solid var(--c-red);
border-radius: 50%;
font-size: clamp(2rem, 3.2vw, 2.8rem) !important;
line-height: 1 !important;
margin-bottom: 26px !important;
}
.process-step::before { display: none; }
/* --- Process step connector line --- */
.process-grid {
position: relative;
}
.process-grid::before {
content: ""; position: absolute;
top: clamp(38px, 4.5vw, 50px);
left: 12%; right: 12%;
height: 1px;
background: repeating-linear-gradient(90deg, var(--c-red) 0 6px, transparent 6px 14px);
opacity: .35;
z-index: 0;
}
@media (max-width: 900px) { .process-grid::before { display: none; } }
.process-step { position: relative; z-index: 1; padding-top: 0; }
/* --- Black testimonial card (every 3rd) --- */
.carousel__track > .t-card:nth-child(3n) {
background: var(--c-ink);
border-color: var(--c-ink);
color: var(--c-cream);
}
.carousel__track > .t-card:nth-child(3n) .t-card__quote { color: rgba(244,239,232,.9); }
.carousel__track > .t-card:nth-child(3n) .t-card__author {
color: var(--c-cream);
border-top-color: rgba(255,255,255,.14);
}
.carousel__track > .t-card:nth-child(3n)::before {
color: var(--c-red-light);
opacity: .55;
}
/* --- Featured testimonial: verified mark + closing quote --- */
.t-feature::after {
content: "”";
font-family: var(--f-serif);
font-size: 10rem;
line-height: .8;
color: var(--c-red);
opacity: .14;
position: absolute;
bottom: -70px; right: 50%;
transform: translateX(50%);
font-variation-settings: "opsz" 144;
}
.t-feature__verified {
display: inline-flex; align-items: center; gap: 14px;
margin-bottom: 28px;
font-family: var(--f-sans);
font-size: .72rem; letter-spacing: .26em; text-transform: uppercase;
color: var(--c-red);
font-weight: 600;
}
.t-feature__verified::before,
.t-feature__verified::after {
content: ""; display: inline-block;
width: 36px; height: 1px;
background: var(--c-red); opacity: .4;
}
.t-feature__verified .stars { color: var(--c-red); letter-spacing: .2em; }
/* --- Mini-property hover underline --- */
.mini-property__title {
position: relative;
padding-bottom: 4px;
display: inline-block;
}
.mini-property__title::after {
content: ""; position: absolute;
left: 0; right: 0; bottom: 0;
height: 1.5px;
background: var(--c-red);
transform: scaleX(0);
transform-origin: left;
transition: transform .35s var(--ease-out);
}
.mini-property:hover .mini-property__title::after { transform: scaleX(1); }
/* --- "FEATURED" diagonal label on hero property overlay --- */
.feat-grid__hero__chip {
position: relative;
}
/* --- Property gutter numeral (zig-zag) --- */
.property {
position: relative;
}
.property__numeral {
position: absolute;
top: -.18em;
font-family: var(--f-serif);
font-size: clamp(7rem, 14vw, 12rem);
line-height: .8;
color: var(--c-red);
opacity: .1;
pointer-events: none;
z-index: 0;
letter-spacing: -.04em;
font-variation-settings: "opsz" 144, "SOFT" 90;
font-weight: 500;
user-select: none;
}
.property:nth-child(odd) .property__numeral { right: -.08em; }
.property:nth-child(even) .property__numeral { left: -.08em; }
.property__body, .property__media { position: relative; z-index: 1; }
@media (max-width: 900px) {
.property__numeral { top: -.1em; right: 8px !important; left: auto !important; font-size: 6rem; }
}
/* --- Property media corner brackets --- */
.property__media {
position: relative;
}
.property__media::before {
content: "";
position: absolute;
top: -10px; left: -10px;
width: 32px; height: 32px;
border-top: 1.5px solid var(--c-red);
border-left: 1.5px solid var(--c-red);
z-index: 2;
opacity: 0;
transition: opacity .4s var(--ease-out), top .4s var(--ease-out), left .4s var(--ease-out);
}
.property:hover .property__media::before { opacity: 1; top: -14px; left: -14px; }
/* --- Amenity chip red accent stripe --- */
.amenities__chip {
position: relative; padding-left: 18px;
}
.amenities__chip::before {
content: "";
position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
width: 2px; height: 60%;
background: var(--c-red);
}
/* --- Contact details enhanced --- */
.contact-details {
position: relative;
border-left-width: 6px !important;
}
.contact-details::before,
.contact-details::after {
content: ""; position: absolute;
width: 14px; height: 14px;
border: 1.5px solid var(--c-red);
}
.contact-details::before {
top: -1px; right: -1px;
border-left: 0; border-bottom: 0;
}
.contact-details::after {
bottom: -1px; right: -1px;
border-left: 0; border-top: 0;
}
/* --- Form field numbering --- */
.form {
counter-reset: field;
}
.form__group { counter-increment: field; position: relative; }
.form__row .form__group { counter-increment: field; }
.form__group > label::before {
content: counter(field, decimal-leading-zero) " / ";
color: var(--c-red);
margin-right: 4px;
font-weight: 600;
}
/* --- Required asterisk --- */
.form .req { display: none; }
.form input[required] + .req,
.form textarea[required] + .req { display: inline; }
.form .req::before {
content: " *";
color: var(--c-red);
font-weight: 700;
}
.form-required-note {
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-muted);
margin: 0 0 10px;
}
.form-required-note::before {
content: "*";
color: var(--c-red);
margin-right: 6px;
}
/* --- Signature service cards (first 3 in services grid) --- */
.services-grid .service:nth-child(-n+3) {
background: var(--c-ink);
color: var(--c-cream);
border-color: var(--c-ink);
position: relative;
overflow: hidden;
}
.services-grid .service:nth-child(-n+3)::before {
content: "Signature";
position: absolute;
top: 14px; right: 14px;
font-family: var(--f-sans);
font-size: .6rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--c-red-light);
font-weight: 600;
padding: 3px 8px;
border: 1px solid var(--c-red-light);
border-radius: var(--r-pill);
}
.services-grid .service:nth-child(-n+3) .service__icon-wrap {
background: rgba(217,48,42,.12);
}
.services-grid .service:nth-child(-n+3) .service__icon {
filter: invert(1) brightness(2);
}
.services-grid .service:nth-child(-n+3) .service__title { color: var(--c-red-light); }
.services-grid .service:nth-child(-n+3) .service__desc { color: rgba(244,239,232,.78); }
.services-grid .service:nth-child(-n+3):hover {
background: var(--c-red);
border-color: var(--c-red);
}
.services-grid .service:nth-child(-n+3):hover .service__title { color: #fff; }
.services-grid .service:nth-child(-n+3):hover .service__desc { color: rgba(255,255,255,.9); }
.services-grid .service:nth-child(-n+3):hover::before {
color: #fff;
border-color: rgba(255,255,255,.6);
}
/* --- Footer huge wordmark watermark --- */
.site-footer {
padding-top: clamp(120px, 14vw, 180px);
}
.site-footer::before {
content: "KhanModi";
position: absolute;
top: 30px; left: 0; right: 0;
text-align: center;
font-family: var(--f-serif);
font-size: clamp(5rem, 12vw, 12rem);
line-height: 1;
color: var(--c-red);
opacity: .08;
letter-spacing: -.04em;
font-variation-settings: "opsz" 144, "SOFT" 100;
font-weight: 500;
z-index: 0;
pointer-events: none;
user-select: none;
white-space: nowrap;
overflow: hidden;
}
/* --- Footer heading ticker mark --- */
.site-footer__heading {
position: relative;
padding-left: 14px;
}
.site-footer__heading::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 4px; height: 14px;
background: var(--c-red-light);
}
/* --- Footer "Issue Nº" badge --- */
.issue-badge {
font-family: var(--f-sans);
font-size: .68rem;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--c-red-light);
font-weight: 600;
}
/* --- Newsletter focus enhancement --- */
.newsletter input:focus {
border-color: var(--c-red);
background: rgba(255,255,255,.12);
box-shadow: 0 2px 0 0 var(--c-red);
}
/* --- About H1 with red ampersand --- */
.about-h1-names {
font-family: var(--f-serif);
font-size: clamp(2.8rem, 7vw, 5.4rem);
line-height: 1;
letter-spacing: -.022em;
font-weight: 500;
font-variation-settings: "opsz" 144, "SOFT" 90;
margin: 0;
}
.about-h1-names .amp {
color: var(--c-red);
font-style: italic;
font-size: 1.3em;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 60;
vertical-align: -.08em;
padding: 0 .04em;
}
/* --- Signature wavy underline --- */
.about-body .signature {
position: relative;
padding-bottom: 8px;
display: inline-block;
}
.about-body .signature::after {
content: "";
position: absolute;
bottom: -2px; left: 0; right: 0;
height: 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M0 4 Q 15 0 30 4 T 60 4 T 90 4 T 120 4' fill='none' stroke='%23D9302A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: repeat-x;
background-size: 120px 8px;
background-position: 0 0;
}
/* --- Scroll cue refinement --- */
.hero-home .scroll-cue::after {
background: linear-gradient(180deg, var(--c-red-light), transparent);
}
/* --- Carousel buttons enhanced --- */
.carousel__btn {
box-shadow: var(--sh-1), inset 0 0 0 1px transparent;
transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.carousel__btn:hover {
box-shadow: var(--sh-2), inset 0 0 0 1px var(--c-red);
}
/* --- CTA band overlay enhancement --- */
.cta-band::after {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(45deg, transparent 0 12px, rgba(217,48,42,.04) 12px 13px);
pointer-events: none;
z-index: 0;
}
.cta-band > .container { position: relative; z-index: 1; }
/* --- Bottom rule with ornament --- */
.site-footer__bottom {
position: relative;
padding-top: 36px;
border-top: 0 !important;
}
.site-footer__bottom::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 35%, rgba(255,255,255,.18) 65%, transparent);
}
.site-footer__bottom::after {
content: "◆";
position: absolute;
left: 50%; top: -7px;
transform: translateX(-50%);
color: var(--c-red);
background: var(--c-ink);
padding: 0 12px;
font-size: .7rem;
}
/* --- Body padding to clear top stripe --- */
body { padding-top: 3px; }
/* --- Reduce motion: keep functionality but disable decorative animation --- */
@media (prefers-reduced-motion: reduce) {
.hero-home::after { transition: none; }
.scroll-cue::after { animation: none; }
}
/* ============================================================
LIGHTBOX GALLERY
============================================================ */
.property__gallery-btn {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 12px;
background: transparent;
border: 0;
padding: 8px 0;
color: var(--c-ink);
font-family: var(--f-sans);
font-size: .78rem;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
cursor: pointer;
position: relative;
}
.property__gallery-btn::before {
content: "";
display: inline-block;
width: 24px; height: 1.5px;
background: var(--c-red);
transition: width .3s var(--ease-out);
}
.property__gallery-btn:hover { color: var(--c-red); }
.property__gallery-btn:hover::before { width: 40px; }
.property__gallery-btn .count {
color: var(--c-red);
}
/* Property media becomes clickable for gallery */
.property__media[data-gallery] { cursor: zoom-in; }
.property__media[data-gallery]::before {
content: "";
position: absolute;
bottom: 16px; right: 16px;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(11,11,11,.78);
backdrop-filter: blur(8px);
z-index: 2;
opacity: 0;
transform: translateY(8px);
transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
border: 1.5px solid rgba(255,255,255,.18);
top: auto; left: auto;
}
.property__media[data-gallery] .zoom-icon {
position: absolute;
bottom: 16px; right: 16px;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
z-index: 3;
opacity: 0;
transform: translateY(8px);
transition: opacity .35s var(--ease), transform .35s var(--ease);
color: #fff;
pointer-events: none;
font-family: var(--f-sans);
font-size: .68rem;
letter-spacing: .14em;
}
.property__media[data-gallery] .zoom-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.property:hover .property__media[data-gallery]::before,
.property:hover .property__media[data-gallery] .zoom-icon {
opacity: 1;
transform: translateY(0);
}
.property:hover .property__media[data-gallery]::before {
border-color: var(--c-red);
background: var(--c-red);
}
/* The lightbox itself */
.lightbox {
position: fixed; inset: 0; z-index: 1000;
background: rgba(11, 11, 11, .96);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity .35s var(--ease);
padding: 24px;
isolation: isolate;
}
.lightbox.is-open {
opacity: 1; pointer-events: auto;
}
.lightbox::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--c-red);
z-index: 1;
}
.lightbox__inner {
display: grid;
grid-template-rows: auto 1fr auto auto;
gap: 18px;
max-width: 1200px;
width: 100%;
height: 100%;
max-height: calc(100vh - 48px);
}
.lightbox__header {
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
color: var(--c-cream);
padding-block: 8px;
border-bottom: 1px solid rgba(255,255,255,.1);
padding-bottom: 18px;
}
.lightbox__title-block { display: flex; flex-direction: column; gap: 4px; }
.lightbox__chip {
font-family: var(--f-sans);
font-size: .68rem;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--c-red-light);
font-weight: 600;
}
.lightbox__title {
font-family: var(--f-serif);
font-size: clamp(1.2rem, 2.2vw, 1.8rem);
font-weight: 500;
margin: 0;
color: #fff;
font-variation-settings: "opsz" 144, "SOFT" 60;
letter-spacing: -.012em;
}
.lightbox__meta { display: flex; align-items: center; gap: 18px; }
.lightbox__counter {
font-family: var(--f-serif);
font-size: clamp(1rem, 1.6vw, 1.3rem);
color: rgba(255,255,255,.6);
letter-spacing: .04em;
white-space: nowrap;
}
.lightbox__counter strong { color: var(--c-red-light); font-weight: 500; }
/* Floating action buttons — always visible, top-right of viewport */
.lightbox__actions {
position: fixed;
top: 24px; right: 24px;
display: flex;
gap: 12px;
z-index: 1010;
}
.lightbox:not(.is-open) .lightbox__actions { display: none; }
.lightbox__close,
.lightbox__fullscreen {
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(11,11,11,.62);
color: #fff;
border: 1.5px solid rgba(255,255,255,.28);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
padding: 0;
}
.lightbox__close svg,
.lightbox__fullscreen svg {
width: 22px; height: 22px;
stroke: currentColor;
fill: none;
stroke-width: 2.25;
stroke-linecap: round;
stroke-linejoin: round;
}
.lightbox__fullscreen:hover {
background: var(--c-red);
border-color: var(--c-red);
transform: scale(1.05);
}
.lightbox__close:hover {
background: var(--c-red);
border-color: var(--c-red);
transform: rotate(90deg) scale(1.05);
}
@media (max-width: 720px) {
.lightbox__actions { top: 12px; right: 12px; gap: 8px; }
.lightbox__close, .lightbox__fullscreen { width: 44px; height: 44px; }
}
.lightbox__stage {
position: relative;
display: flex; align-items: center; justify-content: center;
min-height: 0;
width: 100%;
}
.lightbox__media {
position: relative;
max-width: 100%; max-height: 100%;
display: flex; align-items: center; justify-content: center;
}
.lightbox__media img {
max-width: 100%; max-height: 100%;
width: auto; height: auto;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 30px 80px rgba(0,0,0,.6);
display: block;
transition: opacity .35s var(--ease);
}
.lightbox__media.is-loading img { opacity: 0; }
/* Side arrow buttons */
.lightbox__arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
width: 54px; height: 54px;
border-radius: 50%;
background: rgba(255,255,255,.08);
color: #fff;
border: 1px solid rgba(255,255,255,.14);
font-size: 1.4rem;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
z-index: 4;
backdrop-filter: blur(6px);
}
.lightbox__arrow:hover {
background: var(--c-red);
border-color: var(--c-red);
}
.lightbox__arrow--prev { left: -8px; }
.lightbox__arrow--next { right: -8px; }
@media (max-width: 720px) {
.lightbox__arrow--prev { left: -2px; }
.lightbox__arrow--next { right: -2px; }
.lightbox__arrow { width: 44px; height: 44px; }
}
/* Thumbnail strip */
.lightbox__thumbs {
display: flex;
gap: 10px;
overflow-x: auto;
padding: 4px 0;
scrollbar-width: thin;
scrollbar-color: var(--c-red) rgba(255,255,255,.08);
justify-content: center;
}
.lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.lightbox__thumbs::-webkit-scrollbar-thumb { background: var(--c-red); border-radius: 3px; }
.lightbox__thumb {
flex: 0 0 auto;
width: 90px; height: 64px;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
opacity: .55;
transition: opacity .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
background: rgba(255,255,255,.05);
padding: 0;
}
.lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox__thumb:hover { opacity: 1; }
.lightbox__thumb.is-active {
opacity: 1;
border-color: var(--c-red);
transform: translateY(-2px);
}
/* Footer with "see all photos" CTA */
.lightbox__footer {
display: flex; justify-content: center; align-items: center;
padding-top: 8px;
border-top: 1px solid rgba(255,255,255,.08);
}
.lightbox__cta {
display: inline-flex; align-items: center; gap: 10px;
color: var(--c-red-light);
font-family: var(--f-sans);
font-size: .76rem;
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
padding-bottom: 4px;
border-bottom: 1px solid currentColor;
transition: color .25s var(--ease);
}
.lightbox__cta:hover { color: #fff; }
.lightbox__cta::after {
content: "→";
font-size: 1rem;
transition: transform .25s var(--ease-out);
}
.lightbox__cta:hover::after { transform: translateX(4px); }
@media (max-width: 720px) {
.lightbox { padding: 12px; }
.lightbox__header { padding-bottom: 14px; }
.lightbox__title { font-size: 1.1rem; }
.lightbox__counter { font-size: 1rem; }
.lightbox__close { width: 40px; height: 40px; }
.lightbox__thumbs { justify-content: flex-start; }
.lightbox__thumb { width: 70px; height: 52px; }
}
/* Body lock when lightbox open */
body.lightbox-open { overflow: hidden; }
/* Fullscreen styles */
.lightbox:fullscreen {
padding: 32px;
background: #050505;
}
.lightbox:fullscreen .lightbox__inner { max-height: calc(100vh - 64px); }
.lightbox:-webkit-full-screen {
padding: 32px;
background: #050505;
}
/* Fullscreen button: pill-shaped with text label when in fullscreen */
.lightbox__fullscreen {
gap: 0;
padding: 0;
transition: width .35s var(--ease), border-radius .35s var(--ease), padding .35s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.lightbox__fullscreen .lb-fs-label {
display: none;
font-size: .72rem;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
line-height: 1;
}
.lightbox:fullscreen .lightbox__fullscreen {
width: auto;
border-radius: var(--r-pill);
padding: 0 22px 0 16px;
gap: 10px;
}
.lightbox:fullscreen .lightbox__fullscreen .lb-fs-label { display: inline; }
/* "Esc to exit" hint, only visible in fullscreen */
.lightbox__fs-hint {
display: none;
position: fixed;
top: 24px; left: 50%;
transform: translateX(-50%);
z-index: 1010;
font-family: var(--f-sans);
font-size: .68rem;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 500;
color: rgba(255,255,255,.7);
background: rgba(11,11,11,.5);
padding: 8px 16px;
border-radius: var(--r-pill);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(12px);
pointer-events: none;
}
.lightbox__fs-hint kbd {
display: inline-block;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.22);
border-radius: 4px;
padding: 2px 6px;
font-family: inherit;
font-size: .68rem;
letter-spacing: .04em;
margin-right: 4px;
color: #fff;
}
.lightbox:fullscreen .lightbox__fs-hint { display: inline-block; }
@media (max-width: 600px) {
.lightbox__fs-hint { font-size: .6rem; padding: 6px 12px; }
}
/* ---------- In-card mini carousel (per property) ---------- */
/* In-card carousel overlay — full-bleed positioning context only */
.property__media-nav {
position: absolute;
inset: 0;
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
pointer-events: none;
display: block;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
z-index: 3;
opacity: 1;
transform: none;
transition: none;
}
/* Semi-transparent side arrows that fade in on card hover */
.property__nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 46px; height: 46px;
border-radius: 50%;
background: rgba(11,11,11,.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,.22);
color: #fff;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
pointer-events: auto;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
z-index: 4;
}
.property__nav-btn[data-card-prev] { left: 14px; }
.property__nav-btn[data-card-next] { right: 14px; }
.property:hover .property__nav-btn,
.property__media:focus-within .property__nav-btn,
.mini-property:hover .property__nav-btn,
.mini-property__media:focus-within .property__nav-btn,
.property__nav-btn:focus-visible {
opacity: .92;
}
.property__nav-btn:hover {
opacity: 1;
background: var(--c-red);
border-color: var(--c-red);
transform: translateY(-50%) scale(1.06);
}
.property__nav-btn:focus-visible {
outline: 2px dashed #fff;
outline-offset: 3px;
}
/* Counter chip — small badge at bottom-left of the photo */
.property__counter {
position: absolute;
bottom: 14px;
left: 14px;
padding: 6px 14px;
background: rgba(11,11,11,.6);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--r-pill);
color: rgba(255,255,255,.86);
font-family: var(--f-sans);
font-size: .68rem;
letter-spacing: .22em;
font-weight: 500;
pointer-events: none;
user-select: none;
opacity: 0;
transition: opacity .3s var(--ease);
margin: 0;
min-width: 0;
text-align: left;
z-index: 3;
}
.property:hover .property__counter,
.property__media:focus-within .property__counter,
.mini-property:hover .property__counter,
.mini-property__media:focus-within .property__counter {
opacity: 1;
}
.property__counter strong { color: var(--c-red-light); font-weight: 600; }
/* Mini-card variant — smaller arrows + counter for the homepage cards */
.mini-property__media { position: relative; }
.mini-property__media .property__nav-btn {
width: 34px; height: 34px;
font-size: 1.05rem;
border-width: 1px;
}
.mini-property__media .property__nav-btn[data-card-prev] { left: 8px; }
.mini-property__media .property__nav-btn[data-card-next] { right: 8px; }
.mini-property__media .property__counter {
font-size: .58rem;
padding: 3px 9px;
bottom: 8px;
left: 8px;
letter-spacing: .18em;
}
/* Touch devices: hover is unreliable, so keep arrows visible */
@media (hover: none) {
.property__nav-btn { opacity: .85; }
.property__counter { opacity: 1; }
}
/* ---------- Contact form: honeypot + status ---------- */
.form__hp {
position: absolute !important;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
.form-status {
margin: 4px 0 0;
padding: 14px 18px;
border-radius: var(--r-sm);
font-size: .92rem;
line-height: 1.5;
border-left: 3px solid var(--c-muted);
background: var(--c-ivory);
color: var(--c-ink-soft);
}
.form-status.is-pending {
border-left-color: var(--c-muted);
}
.form-status.is-success {
border-left-color: #1f8a4c;
background: rgba(31,138,76,.08);
color: #156034;
}
.form-status.is-error {
border-left-color: var(--c-red);
background: var(--c-red-10);
color: var(--c-red-dark);
}