/* =====================================================================
VAMIKA BUILDERS — DIGITAL CORPORATE WEBSITE v3
---------------------------------------------------------------------
Brand-verified palette:
#08190E Exclusive Green — primary brand canvas
#D4B163 Golden — brand accent / metallic seal
#E7DBC1 Himalayan Sand — cream contrast / paper
#5A7C5B Moss — supporting tone
Type: Montserrat (per brand guideline — weights 300/400/500/900)
Architecture: Vamika is the parent. Every project — Vilasa, Kasauli
Greens, Trillium, Magnum, Royal Apartments — inherits the trust seal.
Voice: restrained confidence (Pixalane bible).
===================================================================== */
:root {
/* =========================================================
COLOUR SYSTEM — wired to brand.css tokens.
Brand source of truth: assets/css/brand.css
========================================================= */
/* Primary green ramp (resolves to brand-primary #08190E) */
--color-primary: var(--brand-primary); /* brand primary */
--color-primary-1: var(--brand-primary); /* canvas */
--color-primary-2: var(--brand-primary-soft); /* surface */
--color-primary-3: #1B3722; /* surface raised */
--color-primary-4: #244A30; /* surface highest */
--color-moss: var(--brand-moss);
/* Accent ramp (brand yellow #FACB3F) */
--color-accent: var(--brand-accent);
--color-accent-bright: var(--brand-accent-bright);
--color-accent-deep: var(--brand-accent-deep);
/* Cream / surfaces on light — v3 favours a white-dominant palette.
The canvas/sand surface tokens point to the lightest cream-bone variant,
so .cream sections feel like a whisper of warmth on a near-white page.
--brand-cream itself is reserved for HERO photo-overlay text and for
accent moments that genuinely want stronger warmth (tile cards on cream). */
--color-sand: var(--brand-cream-bone);
--color-sand-warm: var(--brand-cream-warm);
--color-bone: var(--brand-cream-bone);
--color-canvas-light: var(--brand-cream-bone);
--color-canvas-warm: var(--brand-cream-warm);
/* Text colours (proxies to brand.css text tokens) */
--color-text-light: var(--brand-text-light);
--color-text-light-muted: var(--brand-text-light-muted);
--color-text-light-faint: var(--brand-text-light-faint);
--color-text-dark: var(--brand-text-dark);
--color-text-dark-muted: var(--brand-text-dark-muted);
--color-text-dark-faint: var(--brand-text-dark-faint);
/* Rules / borders */
--color-rule-light: var(--brand-rule-light);
--color-rule-light-strong: var(--brand-rule-light-strong);
--color-rule-dark: var(--brand-rule-dark);
--color-rule-dark-strong: var(--brand-rule-dark-strong);
/* ---------- LEGACY ALIASES (v3 light theme — text-friendly defaults) ----------
v3 swaps the semantic of --green-deep: in v2 it was the dark canvas color
(used as bg + dark text). In v3 the canvas is light, so --green-deep is
remapped to --brand-ink (dark ink) for all the text/border rules that
reference it. Source rules that used it as a *background* have been
migrated to --brand-primary (light) directly. */
--green-deep: var(--brand-ink);
--green: var(--color-primary-2);
--green-mid: var(--color-primary-3);
--green-soft: var(--color-primary-4);
--moss: var(--color-moss);
--gold: var(--color-accent);
--gold-bright: var(--color-accent-bright);
--gold-deep: var(--brand-accent-deep);
--sand: var(--color-sand);
--sand-warm: var(--color-sand-warm);
--bone: var(--color-bone);
--charcoal: #1A1F1A;
--rule: var(--brand-rule-light);
--rule-strong: var(--brand-rule-light-strong);
--canvas: var(--color-canvas-light);
--canvas-warm: var(--color-canvas-warm);
--rule-dark: var(--color-rule-dark);
--rule-dark-strong: var(--color-rule-dark-strong);
/* =========================================================
SPACING SCALE — single rhythm across the entire site
Steps: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 120 / 160
========================================================= */
--space-3xs: 4px;
--space-2xs: 8px;
--space-xs: 12px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 80px;
--space-4xl: 120px;
--space-5xl: 160px;
/* Section vertical padding — three steps so sections have real rhythm.
Tight: CTA strips, sub-sections. Default: standard. Spacious: heroes / origins.
v3: tightened ~50% from v2 — user feedback the layout had too much breathing room. */
--section-padding-y: clamp(32px, 3vw, 52px);
--section-padding-y-tight: clamp(20px, 2vw, 32px);
--section-padding-y-spacious: clamp(48px, 4.5vw, 76px);
--section-padding: var(--section-padding-y) 0;
--section-padding-tight: var(--section-padding-y-tight) 0;
--section-padding-spacious: var(--section-padding-y-spacious) 0;
/* Card padding — single token for every card across the site
(verticals, promise, beyond-the-build, etc.) — v3 tightened. */
--card-padding: clamp(20px, 2.2vw, 32px);
/* =========================================================
TYPOGRAPHY SCALE
Body uses rem (html font-size: 100% = 16px)
Display headings use fluid clamp()
========================================================= */
/* Typography — Montserrat only (per brand guideline).
--display retained as alias so existing rules keep working. */
--display: var(--brand-font);
--body: var(--brand-font);
--text-xs: 0.6875rem; /* 11px — labels, eyebrows */
--text-sm: 0.8125rem; /* 13px — captions */
--text-base: 1rem; /* 16px — default body */
--text-md: 1.0625rem; /* 17px — comfortable body */
--text-lg: 1.1875rem; /* 19px — large body / lead */
--text-xl: 1.375rem; /* 22px */
--text-2xl: 1.75rem; /* 28px */
--text-3xl: clamp(1.75rem, 3vw, 2.5rem);
--text-4xl: clamp(2.25rem, 4vw, 3.5rem);
--text-5xl: clamp(2.75rem, 5vw, 4.5rem);
--text-6xl: clamp(3rem, 6vw, 5rem);
--leading-tight: 1.15;
--leading-snug: 1.35;
--leading-base: 1.6;
--leading-loose: 1.7;
--tracking-tight: -0.018em;
--tracking-base: 0.005em;
--tracking-wide: 0.18em;
--tracking-wider: 0.32em;
/* Layout */
--pad-x: clamp(24px, 5vw, 72px);
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 8px;
--radius-pill: 999px;
/* Motion */
--easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 0.2s;
--duration-base: 0.3s;
--duration-slow: 0.5s;
}
/* Root font-size base — 1rem = 16px */
html { font-size: 100%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--color-primary-1);
color: var(--color-text-light);
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: var(--leading-loose);
letter-spacing: var(--tracking-base);
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
::selection { background: var(--gold); color: var(--green-deep); }
/* ---------- TYPE PRIMITIVES ---------- */
.serif { font-family: var(--display); }
.h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 1.02;
letter-spacing: -0.018em;
}
.h2 .it { color: var(--brand-ink-soft); font-weight: 400; }
.cream .h2 .it { color: var(--brand-ink-soft); }
/* Soft italic — same italic accent as .it but without gold (use when too many gold accents on a page) */
.it-soft { font-weight: inherit; color: inherit; }
/* ===== Cream section variant — applies cream bg + dark text universally ===== */
section.cream,
.cream { background: var(--canvas) !important; color: var(--green-deep); }
section.cream h1, section.cream h2, section.cream h3, section.cream h4, section.cream h5, section.cream h6,
.cream h1, .cream h2, .cream h3, .cream h4, .cream h5, .cream h6 { color: var(--green-deep) !important; }
section.cream p, section.cream li,
.cream p, .cream li,
section.cream .vert-body, section.cream .vert-secondary-body,
section.cream .tile-body p, section.cream .promise-card p,
section.cream .snap-content p,
section.cream .split-half p,
section.cream .honest-content p, section.cream .honest-row p { color: rgba(8,25,14,0.86) !important; }
.cream .it { color: var(--brand-ink-soft); }
.cream .it-soft { color: rgba(8,25,14,0.65); }
.cream .chapter, .cream .chapter span { color: var(--brand-ink-soft); }
.cream .chapter-num { color: var(--brand-ink-soft); }
.cream .chapter-rule { background: var(--brand-ink-soft); }
.cream .eyebrow { color: var(--brand-ink-soft); }
.cream a { color: inherit; }
/* .cream variant uses the unified .btn-primary / .btn-ghost system above — no overrides needed */
.cream .tile { background: rgba(8,25,14,0.025); border-color: rgba(8,25,14,0.08); }
.cream .tile-name { color: var(--green-deep); }
.cream .tile-name .it-soft { color: rgba(8,25,14,0.65); }
.cream .tile-body p { color: rgba(8,25,14,0.72); }
.cream .tile-cat { color: var(--gold-deep); }
.cream .tile-link { color: var(--gold-deep); }
.cream .tile-link .arrow { color: var(--gold-deep); }
.cream .vertical-card { color: var(--green-deep); }
.cream .vertical-card-num, .cream .vertical-card-cat { color: var(--brand-ink-soft); }
.cream .authority-num { color: var(--brand-ink) !important; }
.cream .authority-num small { color: var(--brand-ink-soft) !important; }
.cream .authority-label { color: rgba(8,25,14,0.78) !important; }
.cream .authority-cell { border-right-color: rgba(8,25,14,0.14) !important; }
.cream .tile-name { color: var(--green-deep) !important; }
.cream .tile-name .it-soft { color: rgba(8,25,14,0.65) !important; }
.cream .tile-body p { color: rgba(8,25,14,0.72) !important; }
.cream .tile-cat, .cream .tile-link { color: var(--gold-deep) !important; }
.cream .tile-meta-row { color: white !important; }
.cream .tile {
background: #FFFFFF;
border-color: rgba(8,25,14,0.10);
box-shadow: 0 1px 0 rgba(8,25,14,0.04);
}
.cream .tile:hover { border-color: var(--gold-deep) !important; }
.cream .it { color: var(--brand-ink-soft) !important; }
.cream .promise-card h4 { color: var(--green-deep) !important; }
.cream .promise-card h4 em { color: var(--brand-ink-soft) !important; }
.cream .promise-card p { color: rgba(8,25,14,0.82) !important; }
/* tile name italic-soft on cream — bump to readable green */
.cream .tile-name .it-soft { color: rgba(8,25,14,0.78) !important; }
/* tile-link arrow — Lucide SVG version */
.tile-link svg.arrow,
.tile-link .arrow {
width: 16px !important;
height: 16px !important;
background: transparent !important;
border: none !important;
stroke: currentColor;
stroke-width: 1.5;
display: inline-block;
vertical-align: middle;
}
/* honest-band — was fighting cream class with sand bg */
.honest-band.cream { background: var(--canvas) !important; }
.honest-band.cream h2 { color: var(--green-deep) !important; }
.honest-band.cream h3 { color: var(--green-deep) !important; }
.honest-band.cream p, .honest-band.cream li { color: rgba(8,25,14,0.82) !important; }
.honest-band.cream .it, .honest-band.cream .it-soft { color: var(--brand-ink-soft) !important; }
/* NRI band stats */
.nri-band-stats .snap-stat-num {
color: var(--gold-deep) !important;
font-size: 52px;
font-weight: 500;
}
.nri-band-stats .snap-stat-label {
color: rgba(14, 14, 14, 0.85) !important;
font-size: 10.5px;
letter-spacing: 0.34em;
margin-top: 10px;
}
/* Section vertical rhythm — every cream section uses the standard token.
When two cream sections stack adjacent, the second gets a slightly tighter
top padding (rather than 0) so there's still breathing room between heads
but not a doubled gap. */
section.cream { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
section.cream.honest-band { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
section.cream + section.cream { padding-top: var(--section-padding-y-tight); }
.eyebrow {
font-family: var(--body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--brand-ink-soft);
display: inline-flex;
align-items: center;
gap: 12px;
}
.eyebrow::before {
content: '';
width: 28px; height: 1px;
background: var(--brand-ink-soft);
display: inline-block;
}
.eyebrow.center { display: flex; justify-content: center; }
.eyebrow.dark { color: var(--brand-ink-soft); }
.eyebrow.dark::before { background: var(--brand-ink-soft); }
.label {
font-family: var(--body);
font-weight: 400;
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
}
.body-l {
font-size: var(--text-md);
line-height: 1.65;
font-weight: 300;
color: rgba(14, 14, 14, 0.78);
}
.gold { color: var(--gold-deep) !important; }
.gold-deep { color: var(--gold-deep) !important; }
.it { font-weight: 400; color: var(--brand-ink-soft); }
.dark .it { color: var(--brand-ink-soft); }
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-tight { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-narrow { max-width: 1000px; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-reading { max-width: 820px; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-wide { max-width: 1600px; margin: 0 auto; padding: 0 var(--pad-x); }
/* Utility section classes — replace common inline section patterns */
/* .section-dark* — true dark-green editorial bands, retained from v2 semantic naming.
Used on journal article pages as image-strip / pull-quote / closing sections. */
.section-dark { background: #08190E; color: var(--brand-cream); padding: var(--section-padding); }
.section-dark-tall { background: #08190E; color: var(--brand-cream); padding: var(--section-padding); }
.section-dark-taller { background: #08190E; color: var(--brand-cream); padding: var(--section-padding-spacious); }
.section-sand-tall { background: var(--sand); color: var(--brand-ink); padding: var(--section-padding); }
.section-dark a { color: var(--gold); }
.section-dark a:hover { color: var(--gold-bright); }
.section-dark .chapter, .section-dark .chapter span,
.section-dark-tall .chapter, .section-dark-tall .chapter span,
.section-dark-taller .chapter, .section-dark-taller .chapter span { color: var(--gold); }
.section-dark .chapter-rule, .section-dark-tall .chapter-rule, .section-dark-taller .chapter-rule { background: var(--gold); }
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark-tall h1, .section-dark-tall h2, .section-dark-tall h3,
.section-dark-taller h1, .section-dark-taller h2, .section-dark-taller h3 { color: var(--brand-cream); }
.section-dark .it, .section-dark-tall .it, .section-dark-taller .it { color: var(--brand-accent); }
.section-dark p, .section-dark-tall p, .section-dark-taller p { color: rgba(244, 236, 217, 0.78); }
/* Utility link style */
.link-gold-underline { color: var(--gold-deep); text-decoration: underline; }
.cream .link-gold-underline, .section-sand-tall .link-gold-underline { color: var(--gold-deep); }
/* ---------- LOGO SYSTEM ---------- */
/* Nav: mark only (logo-mark-light.png is the building+leaves icon, no wordmark, no tagline) */
.nav .vamika-logo img,
.loader .vamika-logo img {
display: block;
width: auto;
height: 52px;
object-fit: contain;
}
.nav .vamika-logo img{
filter:invert(1);
}
.nav.scrolled .vamika-logo img:first-child{
display:none;
}
.nav .vamika-logo img:last-child{
display:none;
}
.nav.scrolled .vamika-logo img:last-child{
display:block;
}
.nav.scrolled .vamika-logo img { height: 50px; transition: height 0.4s ease; filter:invert(0) }
.loader .vamika-logo.lg img { height: 96px; }
.nav .vamika-logo:hover img { opacity: 0.9; transition: opacity 0.3s ease; }
/* Footer brand column: clip bottom 5% of source */
.footer-brand .vamika-logo img {
display: block;
width: 100%;
max-width: 240px;
height: auto;
/* clip-path: inset(0 0 5% 0); */
margin-bottom: -2%;
}
/* Footer-massive: original lockup with tagline cropped via clip-path.
Source PNG content map: y=310-701 (mark+wordmark), y=723-760 (tagline).
Keep top, drop bottom 30% to remove tagline cleanly. */
.footer-massive .vamika-logo img {
display: block;
width: 100%;
max-width: 760px;
height: auto;
clip-path: inset(0 0 33% 0);
margin: 0 auto -12%; /* compensate clipped (still-rendered) bottom space */
}
/* Legacy generic */
.vamika-logo { display: inline-flex; align-items: center; }
.vamika-mark { width: 30px; height: 30px; flex-shrink: 0; }
/* ===================================================================
LOADER
=================================================================== */
.loader {
position: fixed; inset: 0;
z-index: 1000;
background: var(--brand-primary);
display: flex; align-items: center; justify-content: center;
flex-direction: column;
gap: 24px;
opacity: 1;
transition: opacity 1s ease, visibility 0s linear 1s;
}
.loader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.loader .vamika-logo img {
opacity: 0;
transform: scale(0.94);
animation: loaderFadeIn 0.9s 0.15s ease forwards;
}
@keyframes loaderFadeIn {
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.loader .vamika-logo img { animation: none; opacity: 1; transform: none; }
}
.loader-text {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-base);
color: var(--gold-deep);
opacity: 0;
animation: loaderTextIn 0.9s 0.9s ease forwards;
}
.loader-bar {
width: 200px; height: 1px;
background: rgba(122, 99, 9, 0.2);
position: relative;
overflow: hidden;
}
.loader-bar::after {
content: ''; position: absolute; left: 0; top: 0;
width: 0; height: 100%;
background: var(--gold);
animation: loaderBar 1.6s 0.5s ease forwards;
}
@keyframes loaderTextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loaderBar { to { width: 100%; } }
@keyframes loaderOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
@keyframes markIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
/* Custom cursor removed — OS default cursor site-wide */
body { cursor: auto; }
a, button, [role="button"], .tile, summary, .nav-cta, .btn { cursor: pointer; }
/* ===================================================================
ANNOUNCEMENT BAR (top)
=================================================================== */
.announce {
background: #08190E;
color: #fff;
padding: 11px 0;
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
position: relative;
z-index: 102;
border-bottom: 1px solid var(--brand-rule-light);
}
.announce a {
margin-left: 14px;
color:#FACB3F;
font-weight: 500;
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 1px;
text-decoration-color: var(--brand-accent-deep);
}
.announce a:hover { color: var(--brand-accent-deep); }
/* ===================================================================
NAVIGATION
=================================================================== */
.nav {
position: sticky; top: 0; left: 0; right: 0;
z-index: 100;
/* Background spans full viewport, but inner content (links + logo) aligns
with the body .wrap (max-width 1480px + pad-x). On viewports wider than
1480, padding-inline grows to keep content edges in sync with body. */
padding: 12px max(var(--pad-x), calc(50vw - 740px + var(--pad-x)));
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--rule);
transition: padding 0.4s ease;
}
.nav.is-scrolled { background: rgba(255, 255, 255, 0.98); }
.nav.scrolled {
padding: 12px max(var(--pad-x), calc(50vw - 740px + var(--pad-x)));
/* background-color: #08190ea6; */
background: #08190eba;
}
/* Logo absolutely centered — independent of left/right link widths */
.nav > .vamika-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
gap:10px;
}
.nav > .vamika-logo span{
font-family: var(--body);
font-size: 18px;
font-weight: 500;
}
.nav-left, .nav-right {
display: flex; align-items: center; gap: 30px;
}
.nav-right { justify-content: flex-end; }
.nav-link {
font-family: var(--body);
font-weight: 500;
font-size: 11.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.92);
padding: 6px 0;
position: relative;
transition: color 0.3s;
}
.nav.scrolled .nav-link{
color:#fff;
}
.nav-link:hover { color: var(--gold-deep); }
.nav-link::after {
content: ''; position: absolute;
bottom: 0; left: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width 0.4s ease;
}
.nav-link:hover::after { width: 100%; }
/* dropdown for projects */
.has-dropdown { position: relative; }
.dropdown {
position: absolute;
top: calc(100% + 16px); left: -20px;
background: var(--brand-primary);
border: 1px solid var(--rule-strong);
padding: 22px;
min-width: 320px;
opacity: 0; visibility: hidden;
transform: translateY(-8px);
transition: all 0.3s ease;
z-index: 50;
}
.has-dropdown:hover .dropdown {
opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-title {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--rule);
}
.dropdown-link {
display: block;
padding: 10px 0;
border-bottom: 1px solid var(--rule);
}
.dropdown-link:last-child { border-bottom: none; }
.dropdown-link strong {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-md);
color: var(--brand-ink);
display: block;
margin-bottom: 3px;
}
.dropdown-link span {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.55);
}
.dropdown-link:hover strong { color: var(--gold-deep); }
.nav-cta {
font-family: var(--body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--brand-cream);
background: #2A4D38;
border: 1px solid #2A4D38;
padding: 12px 22px;
transition: background 0.3s ease, border-color 0.3s ease;
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: #3B6649; border-color: #3B6649; }
/* Tablet: hide secondary links, keep CTA */
@media (max-width: 1100px) {
.nav-left .nav-link:nth-child(n+4) { display: none; }
.nav-right .nav-link { display: none; }
}
/* Mobile: kill all nav links + CTA, logo only */
/* Tablet narrowing — tighten gaps + hide secondary links so they don't collide with centered logo */
@media (max-width: 1180px) {
.nav-left, .nav-right { gap: 18px; }
.nav-link { font-size: 10.5px; letter-spacing: 0.16em; }
}
@media (max-width: 1024px) {
.nav-left a:nth-child(n+4),
.nav-right a:nth-child(-n+2) { display: none; }
.nav .vamika-logo img { height: 44px; }
}
.nav-mobile-toggle { display: none; }
@media (max-width: 768px) {
.nav {
justify-content: space-between;
padding: 14px var(--pad-x);
}
.nav-left,
.nav-right { display: none; }
.nav > .vamika-logo {
position: static;
transform: none;
}
.nav-mobile-toggle { display: inline-flex !important; }
}
.nav-mobile-toggle button {
background: transparent;
border: 1px solid rgba(14, 14, 14, 0.18);
color: var(--brand-ink);
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s ease, border-color 0.2s ease;
}
.nav-mobile-toggle button:hover,
.nav-mobile-toggle button:focus-visible {
background: rgba(14, 14, 14, 0.04);
border-color: var(--brand-ink);
}
.nav-mobile-toggle button svg,
.nav-mobile-toggle button [data-lucide] {
width: 22px !important;
height: 22px !important;
color: var(--brand-ink) !important;
stroke: currentColor !important;
stroke-width: 2;
}
.nav.scrolled .nav-mobile-toggle button svg,
.nav.scrolled .nav-mobile-toggle button{
color: #fff !important;
}
.nav.scrolled .nav-mobile-toggle button{
border: 1px solid #fff;
}
.nav-mobile-panel {
display: none;
position: fixed; inset: 60px 0 0 0;
background: var(--brand-primary);
z-index: 99;
flex-direction: column;
padding: 32px var(--pad-x);
gap: 18px;
}
.nav-mobile-panel.is-open { display: flex; }
.nav-mobile-panel a {
font-family: var(--body);
font-size: var(--text-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brand-ink);
padding: 10px 0;
border-bottom: 1px solid rgba(14, 14, 14, 0.12);
}
/* ===================================================================
HERO — cinematic, visible, layered
=================================================================== */
.hero {
position: relative;
min-height: calc(100vh - 39px);
display: flex;
align-items: stretch;
overflow: hidden;
background: var(--brand-primary);
}
.hero-bg {
position: absolute; inset: 0;
background-image: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=2400&q=85&auto=format&fit=crop');
background-size: cover;
background-position: center 35%;
filter: saturate(0.92) brightness(0.78) contrast(1.05);
transform: scale(1.04);
animation: kenBurns 22s ease-out infinite alternate;
}
@keyframes kenBurns {
0% { transform: scale(1.04); }
100% { transform: scale(1.10) translate(-1%, -1.2%); }
}
.hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(8,25,14,0.45) 0%, rgba(8,25,14,0.20) 25%, rgba(8,25,14,0.40) 65%, rgba(8,25,14,0.92) 100%),
linear-gradient(90deg, rgba(8,25,14,0.55) 0%, rgba(8,25,14,0.05) 45%, rgba(8,25,14,0.0) 65%);
}
.hero-grain {
position: absolute; inset: 0; opacity: 0.10; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
.hero-watermark {
position: absolute;
bottom: -3%; left: -2%;
font-family: var(--display);
font-weight: 900;
font-size: clamp(180px, 22vw, 380px);
line-height: 0.78;
letter-spacing: -0.04em;
color: rgba(122, 99, 9, 0.06);
pointer-events: none;
white-space: nowrap;
z-index: 1;
}
.hero-rail {
position: absolute;
left: var(--pad-x); top: 50%;
transform: translateY(-50%);
display: flex; flex-direction: column; align-items: center; gap: 10px;
z-index: 4;
}
.hero-rail .rail-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--gold-deep);
}
.hero-rail .rail-line { width: 1px; height: 80px; background: linear-gradient(180deg, var(--gold) 0%, transparent 100%); }
.hero-rail .rail-line.bottom { background: linear-gradient(0deg, var(--gold) 0%, transparent 100%); }
.hero-content {
position: relative;
z-index: 3;
width: 100%;
display: grid;
grid-template-columns: 1.15fr 1fr;
align-items: end;
padding: 100px var(--pad-x) 90px;
max-width: 1480px;
margin: 0 auto;
gap: 40px;
padding-left: 0;
}
.hero-eyebrow-row {
display: flex; align-items: center; gap: 14px;
margin-bottom: 32px;
opacity: 0; animation: fadeUp 1.4s 0.4s ease forwards;
}
.hero-h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(54px, 9vw, 144px);
line-height: 0.88;
letter-spacing: -0.025em;
color: var(--brand-ink);
margin-bottom: 32px;
opacity: 0; animation: fadeUp 1.6s 0.6s ease forwards;
text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.hero-h1 .nb { display: block; }
.hero-meta {
align-self: end;
border-left: 1px solid var(--rule-strong);
padding-left: 28px;
max-width: 460px;
opacity: 0; animation: fadeUp 1.4s 0.85s ease forwards;
}
.hero-lead {
font-size: var(--text-md);
line-height: 1.65;
color: rgba(14, 14, 14, 0.92);
font-weight: 300;
margin-bottom: 22px;
}
.hero-canon {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-xl);
line-height: 1.3;
color: var(--gold-deep);
margin-bottom: 32px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* ============================================================
BUTTONS — context-aware via CSS custom properties.
Two variants: .btn-primary (filled) + .btn-ghost (outlined).
On dark-green section parents the local tokens redefine themselves,
so the same button class auto-inverts. No overrides, no duplicate rules.
============================================================ */
:root {
/* Default tokens — light sections (white/cream surfaces).
Button green is a richer mid-dark forest, NOT the near-black #08190E.
The brand canvas green stays #08190E for sections, but buttons need a
more visibly green shade so they don't read as black on cream. */
--btn-bg: #2A4D38;
--btn-text: var(--brand-cream);
--btn-border: #2A4D38;
--btn-bg-hover: #3B6649;
--btn-text-hover: var(--brand-cream);
--btn-border-hover: #3B6649;
--btn-ghost-bg: transparent;
--btn-ghost-text: #2A4D38;
--btn-ghost-border: #2A4D38;
--btn-ghost-bg-hover: #2A4D38;
--btn-ghost-text-hover: var(--brand-cream);
--btn-ghost-border-hover: #2A4D38;
}
/* Dark-green section scopes — redefine the same tokens, no rule duplication */
.section-dark,
.section-dark-tall,
.section-dark-taller,
.ab-invite,
.ab-ethos,
.editorial-pull,
.editorial-note,
.cumulative-note,
.footer,
.project-detail-section {
--btn-bg: var(--brand-accent);
--btn-text: var(--brand-ink);
--btn-border: var(--brand-accent);
--btn-bg-hover: var(--brand-accent-bright);
--btn-text-hover: var(--brand-ink);
--btn-border-hover: var(--brand-accent-bright);
--btn-ghost-bg: transparent;
--btn-ghost-text: var(--brand-cream);
--btn-ghost-border: rgba(244, 236, 217, 0.55);
--btn-ghost-bg-hover: var(--brand-cream);
--btn-ghost-text-hover: var(--brand-ink);
--btn-ghost-border-hover: var(--brand-cream);
}
.btn {
font-family: var(--body);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.28em;
text-transform: uppercase;
padding: 14px 26px;
border: 1px solid transparent;
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 10px;
line-height: 1;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
}
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-primary {
background: var(--btn-bg);
color: var(--btn-text) !important;
border-color: var(--btn-border);
}
.btn-primary:hover {
background: var(--btn-bg-hover);
color: var(--btn-text-hover);
border-color: var(--btn-border-hover);
transform: translateY(-1px);
}
.btn-ghost {
background: var(--btn-ghost-bg);
color: var(--btn-ghost-text);
border-color: var(--btn-ghost-border);
}
.btn-ghost:hover {
background: var(--btn-ghost-bg-hover);
color: var(--btn-ghost-text-hover);
border-color: var(--btn-ghost-border-hover);
}
.btn .arrow:not([data-lucide]) {
width: 18px; height: 1px; background: currentColor; position: relative;
}
.btn .arrow:not([data-lucide])::after {
content: ''; position: absolute; right: 0; top: -3.5px;
width: 8px; height: 8px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
}
.hero-corners {
position: absolute; inset: 0;
pointer-events: none; z-index: 4;
}
.hero-corner {
position: absolute;
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
}
.hero-corner.tr { top: 30px; right: var(--pad-x); }
.hero-corner.br {
bottom: 28px; right: var(--pad-x);
display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.hero-corner.br .scroll-line {
width: 1px; height: 40px;
background: linear-gradient(180deg, transparent, var(--gold), transparent);
animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (max-width: 968px) {
.hero-content { grid-template-columns: 1fr; gap: 28px; padding: 80px var(--pad-x) 60px; }
.hero-meta { border-left: none; padding-left: 0; border-top: 1px solid var(--rule-strong); padding-top: 22px; }
.hero-rail, .hero-corner.tr { display: none; }
.hero-watermark { font-size: 160px; }
}
/* ===================================================================
PROJECT FAMILY STRIP — under hero, shows project hierarchy
=================================================================== */
.family {
background: var(--green);
border-bottom: 1px solid var(--rule);
padding: 28px 0;
}
.family-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 40px;
align-items: center;
}
.family-intro {
display: flex; flex-direction: column; gap: 10px;
border-right: 1px solid var(--rule);
padding-right: 60px;
}
.family-intro .label { color: var(--gold-deep); }
.family-intro h3 {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-xl);
color: var(--brand-ink);
line-height: 1.2;
}
.family-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.family-item {
display: flex;
flex-direction: column;
gap: 6px;
border-left: 1px solid var(--rule);
padding-left: 18px;
transition: border-color 0.3s, padding-left 0.3s;
}
.family-item:hover { border-left-color: var(--gold-deep); padding-left: 22px; }
.family-item .fname {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-base);
color: var(--brand-ink);
line-height: 1.1;
}
.family-item .fmeta {
font-family: var(--body);
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-deep);
}
.family-item .floc {
font-family: var(--body);
font-size: var(--text-xs);
color: rgba(14, 14, 14, 0.55);
font-weight: 300;
}
@media (max-width: 968px) {
.family-grid { grid-template-columns: 1fr; gap: 30px; }
.family-intro { border-right: none; border-bottom: 1px solid var(--rule); padding: 0 0 24px; }
.family-list { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
/* ===================================================================
THE STUDIO — about Vamika section with imagery
=================================================================== */
.studio {
padding: var(--section-padding);
background: var(--brand-primary);
position: relative;
overflow: hidden;
}
.studio-bg-text {
position: absolute;
top: 7%; right: -6%;
font-family: var(--display);
font-weight: 900;
font-size: clamp(160px, 20vw, 320px);
line-height: 0.85;
color: rgba(122, 99, 9, 0.04);
pointer-events: none;
letter-spacing: -0.04em;
}
.studio-grid {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1.1fr;
gap: 36px;
align-items: center;
}
.studio-image-stack {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 14px;
aspect-ratio: 1/1.1;
}
.studio-image-stack .img {
background-size: cover;
background-position: center;
position: relative;
filter: saturate(0.88);
}
.studio-image-stack .img.tall {
grid-row: 1 / 3;
}
.studio-image-stack .img:nth-child(1) {
background-image: url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=900&q=85&auto=format&fit=crop');
}
.studio-image-stack .img:nth-child(2) {
background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=900&q=85&auto=format&fit=crop');
}
.studio-image-stack .img:nth-child(3) {
background-image: url('https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=900&q=85&auto=format&fit=crop');
}
.studio-image-cap {
position: absolute;
bottom: 14px; left: 14px;
font-family: var(--body);
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.78);
background: rgba(8,25,14,0.7);
padding: 4px 10px;
z-index: 2;
}
.studio-content h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(24px, 3vw, 40px);
line-height: 0.96;
margin: 28px 0 32px;
letter-spacing: -0.018em;
}
.studio-content p {
font-size: var(--text-base);
line-height: 1.75;
color: rgba(14, 14, 14, 0.78);
margin-bottom: 20px;
}
.studio-content p:first-of-type {
font-family: var(--display);
font-size: var(--text-xl);
line-height: 1.4;
color: var(--gold-deep);
margin-bottom: 28px;
font-weight: 400;
}
.studio-actions {
margin-top: 32px;
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.studio-attribution {
margin-top: 32px;
display: flex; align-items: center; gap: 18px;
padding-top: 24px;
border-top: 1px solid var(--rule);
}
.studio-attribution .att-sig {
font-family: var(--display);
font-size: var(--text-xl);
color: var(--gold-deep);
}
.studio-attribution .att-role {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.55);
}
@media (max-width: 968px) {
.studio { padding: var(--section-padding-tight); }
.studio-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ===================================================================
MARQUEE — canonical statement
=================================================================== */
.marquee {
background: var(--green);
padding: 28px 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
overflow: hidden;
}
.marquee-track {
display: flex; gap: 40px;
animation: marqueeScroll 38s linear infinite;
width: max-content;
align-items: center;
}
.marquee-item {
font-family: var(--display);
font-weight: 400;
font-size: clamp(22px, 2.8vw, 38px);
color: var(--gold-deep);
white-space: nowrap;
letter-spacing: -0.005em;
}
.marquee-item .dot {
display: inline-block;
width: 6px; height: 6px;
background: var(--gold);
border-radius: 50%;
margin: 0 22px 6px;
vertical-align: middle;
}
@keyframes marqueeScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ===================================================================
THE NUMBERS
=================================================================== */
.numbers {
background: var(--sand);
color: var(--green-deep);
padding: var(--section-padding);
position: relative;
overflow: hidden;
}
.numbers::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
pointer-events: none;
}
.numbers-head {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.numbers-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(30px, 4vw, 52px);
line-height: 1;
margin-top: 28px;
margin-bottom: 24px;
color: var(--green-deep);
letter-spacing: -0.018em;
}
.numbers-head .body-l {
max-width: 600px;
margin: 0 auto;
color: rgba(8, 25, 14, 0.74);
}
.numbers-grid {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--rule-dark-strong);
}
.num {
padding: 56px 28px;
border-right: 1px solid var(--rule-dark-strong);
position: relative;
}
.num:last-child { border-right: none; }
.num::before {
content: attr(data-folio);
position: absolute;
top: 14px; right: 18px;
font-family: var(--display);
font-weight: 400;
font-size: var(--text-base);
color: var(--gold-deep);
opacity: 0.7;
}
.num-label {
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 22px;
}
.num-value {
font-family: var(--display);
font-weight: 400;
font-size: clamp(88px, 11vw, 156px);
line-height: 0.85;
color: var(--green-deep);
margin-bottom: 24px;
letter-spacing: -0.04em;
display: flex;
align-items: flex-start;
}
.num-value sup {
font-size: 0.32em;
color: var(--gold-deep);
font-weight: 500;
margin-left: 6px;
margin-top: 0.6em;
}
.num-detail {
font-size: var(--text-sm);
line-height: 1.6;
color: rgba(8, 25, 14, 0.72);
font-weight: 300;
max-width: 220px;
}
@media (max-width: 968px) {
.numbers { padding: var(--section-padding-tight); }
.numbers-grid { grid-template-columns: repeat(2, 1fr); }
.num { padding: 44px 24px; }
.num:nth-child(odd) { padding-left: 0; padding-right: 24px; }
.num:nth-child(even) { padding-left: 24px; padding-right: 0; border-right: none; }
.num:nth-child(1), .num:nth-child(2) { border-bottom: 1px solid var(--rule-dark-strong); }
}
@media (max-width: 568px) {
.numbers-grid { grid-template-columns: 1fr; }
.num { border-right: none !important; border-bottom: 1px solid var(--rule-dark-strong); padding: 36px 0; }
.num:last-child { border-bottom: none; }
}
/* ===================================================================
PORTFOLIO — featured project showcases
=================================================================== */
.portfolio {
padding: var(--section-padding-y) 0 0;
background: var(--brand-primary);
position: relative;
}
.portfolio-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: end;
margin-bottom: 40px;
}
.portfolio-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 60px);
line-height: 0.95;
margin-top: 28px;
letter-spacing: -0.018em;
}
.portfolio-head-meta {
display: flex; flex-direction: column; gap: 20px;
border-left: 1px solid var(--rule);
padding-left: 28px;
align-self: end;
}
.portfolio-head-meta p {
font-size: var(--text-md);
color: rgba(14, 14, 14, 0.74);
line-height: 1.65;
}
.portfolio-head-meta strong {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-lg);
color: var(--gold-deep);
}
/* PROJECT FEATURE — full alternating cinematic layout */
.project {
position: relative;
padding: var(--section-padding);
border-top: 1px solid var(--rule);
}
.project:first-of-type { border-top: none; padding-top: 0; }
/* Cream variant — flips .project body to sand bg with dark text */
.project.cream { background: var(--sand) !important; color: var(--green-deep); }
.project.cream .eyebrow { color: var(--brand-ink-soft); }
.project.cream .project-tag { color: var(--gold-deep) !important; border-left-color: var(--gold-deep); }
.project.cream .project-body { color: rgba(8, 25, 14, 0.78) !important; }
.project.cream .project-highlight { color: var(--gold-deep); border-color: rgba(8, 25, 14, 0.22); }
.project.cream .project-specs { border-top-color: rgba(8, 25, 14, 0.18); }
.project.cream .project-spec-label { color: rgba(8, 25, 14, 0.5); }
.project.cream .project-spec-value { color: var(--green-deep); }
.project.cream .project-spec-value.gold { color: var(--gold-deep); }
.project.cream .project-credentials { border-top-color: rgba(8, 25, 14, 0.18); }
.project.cream .project-cred-label { color: rgba(8, 25, 14, 0.55); }
.project.cream .project-cred-value { color: rgba(8, 25, 14, 0.78); }
.project.cream .project-cred-value em { color: var(--gold-deep); }
.project.cream .project-amenities { border-top-color: rgba(8, 25, 14, 0.18); }
.project.cream .project-amenities-label { color: var(--gold-deep); }
.project.cream .project-amenities-title { color: var(--green-deep); }
.project.cream .project-amenities-title .it { color: var(--brand-ink-soft); }
.project.cream .project-amenities-grid li {
color: rgba(8, 25, 14, 0.78);
border-color: rgba(8, 25, 14, 0.18);
background: rgba(8, 25, 14, 0.02);
}
.project.cream .project-amenities-grid li:hover {
border-color: var(--gold-deep);
background: rgba(212, 169, 26, 0.06);
}
.project.cream .amenity-icon { color: var(--gold-deep); }
.project.cream h2 { color: var(--green-deep) !important; }
.project.cream h2 .it { color: var(--brand-ink-soft) !important; }
.project-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 32px;
align-items: center;
}
.project.reverse .project-grid {
grid-template-columns: 1fr 1.15fr;
}
.project.reverse .project-image-block { order: 2; }
.project.reverse .project-content { order: 1; }
.project-image-block {
position: relative;
}
.project-image {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
background: var(--green-mid);
}
.project-image > img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.8s ease;
filter: saturate(0.92) contrast(1.04);
}
.project:hover .project-image > img { transform: scale(1.04); }
/* image inner frame corners (gold) */
.project-image::before, .project-image::after {
content: '';
position: absolute;
width: 22px; height: 22px;
border-color: var(--gold-deep);
z-index: 2;
}
.project-image::before {
top: 14px; left: 14px;
border-top: 1px solid var(--gold);
border-left: 1px solid var(--gold);
}
.project-image::after {
bottom: 14px; right: 14px;
border-bottom: 1px solid var(--gold);
border-right: 1px solid var(--gold);
}
/* Project sub-image (small inset) */
.project-image-secondary {
position: absolute;
bottom: -40px;
right: -40px;
width: 38%;
aspect-ratio: 4/5;
background-size: cover;
background-position: center;
border: 4px solid var(--green-deep);
z-index: 3;
filter: saturate(0.88);
}
.project.reverse .project-image-secondary {
right: auto;
left: -40px;
}
/* "A Vamika Project" badge */
.av-badge {
position: absolute;
top: 20px; right: 20px;
z-index: 4;
background: rgba(8, 25, 14, 0.78);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(122, 99, 9, 0.5);
padding: 12px 18px;
display: flex;
align-items: center;
gap: 12px;
}
.av-badge .seal-circle {
width: 30px; height: 30px;
border: 1px solid var(--gold);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.av-badge .seal-circle svg { width: 18px; height: 18px; }
.av-badge .av-text {
display: flex; flex-direction: column; line-height: 1.2; gap: 2px;
}
.av-badge .av-text small {
font-family: var(--body);
font-weight: 500;
font-size: 8px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.6);
}
.av-badge .av-text strong {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-sm);
color: var(--gold-deep);
letter-spacing: 0.02em;
}
/* status pill */
.fp-status {
position: absolute;
bottom: 20px; left: 20px;
z-index: 3;
background: var(--gold);
color: var(--green-deep);
padding: 9px 16px;
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
}
.project-content {
position: relative;
}
.project-folio {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-xl);
color: var(--gold-deep);
margin-bottom: 16px;
display: flex; align-items: center; gap: 14px;
}
.project-folio::after {
content: ''; flex: 1; height: 1px; background: var(--rule); margin-left: 8px;
}
.project-cat {
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 22px;
}
.project-name {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.8vw, 52px);
line-height: 0.95;
margin-bottom: 16px;
color: var(--brand-ink);
letter-spacing: -0.022em;
}
.project-tag {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-xl);
color: rgba(14, 14, 14, 0.85);
line-height: 1.4;
margin-bottom: 24px;
border-left: 2px solid var(--gold);
padding-left: 18px;
}
.project-body {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.74);
margin-bottom: 32px;
max-width: 480px;
}
/* highlights row */
.project-highlights {
display: flex; flex-wrap: wrap; gap: 10px;
margin-bottom: 32px;
}
.project-highlight {
font-family: var(--body);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
border: 1px solid var(--rule-strong);
padding: 8px 14px;
}
/* Project intro grid — two-column layout for project body section
Left: text content (eyebrow, h2, tagline, body, highlights)
Right: a portrait-framed image of the project
Fills the previously-empty right column on Kasauli/Vilasa/Trillium/Magnum pages */
.project-intro-grid {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 28px;
align-items: center;
margin-bottom: 32px;
}
.project-intro-text { max-width: 720px; }
.project-intro-image {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--green-mid);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}
.project-intro-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.6s ease;
filter: saturate(0.92) contrast(1.04);
display: block;
}
.project-intro-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(8, 25, 14, 0.42));
pointer-events: none;
}
.project-intro-image-caption {
position: absolute;
bottom: 18px; left: 20px; right: 20px;
z-index: 2;
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-cream);
font-weight: 500;
text-shadow: 0 1px 6px rgba(8, 25, 14, 0.7);
}
.project:hover .project-intro-image img { transform: scale(1.03); }
@media (max-width: 968px) {
.project-intro-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.project-intro-image {
aspect-ratio: 16 / 10;
max-width: 100%;
}
}
.project-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 28px 44px;
border-top: 1px solid var(--rule);
padding-top: 36px;
margin-bottom: 28px;
}
.project-spec-label {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
margin-bottom: 6px;
}
.project-spec-value {
font-family: var(--display);
font-weight: 500;
font-size: 18px;
color: var(--brand-ink);
}
.project-spec-value.gold { color: var(--gold-deep); }
.project-actions {
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
}
/* Credentials strip — RERA + Architect (v9) */
.project-credentials {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 28px 56px;
margin-top: -8px;
margin-bottom: 28px;
padding-top: 28px;
border-top: 1px solid rgba(201, 164, 107, 0.22);
}
.project-cred {
display: flex; flex-direction: column; gap: 4px;
}
.project-cred-label {
font-family: var(--body);
font-size: 9px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(201, 164, 107, 0.7);
font-weight: 500;
}
.project-cred-value {
font-family: var(--body);
font-size: 12.5px;
letter-spacing: 0.02em;
color: rgba(14, 14, 14, 0.78);
font-weight: 400;
line-height: 1.5;
}
.project-cred-value em {
font-family: var(--display);
color: var(--gold-deep);
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: 0;
}
/* ============================================================
ANCHOR TENANTS — Featured signed-tenant strip
Shared across project pages (Magnum, Kasauli Green, etc.)
============================================================ */
.anchor-strip {
background: var(--cream, #f7f3ea);
padding: 88px 48px;
text-align: center;
position: relative;
border-top: 1px solid rgba(201, 164, 107, 0.22);
border-bottom: 1px solid rgba(201, 164, 107, 0.22);
}
.anchor-strip::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--gold-deep, #c9a84c);
opacity: 0.6;
}
.anchor-strip-inner {
max-width: 1100px;
margin: 0 auto;
}
.anchor-strip-label {
display: inline-block;
font-family: var(--body);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-deep, #c9a84c);
margin-bottom: 18px;
font-weight: 500;
}
.anchor-strip-title {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 400;
color: var(--green-deep, #1a2e1e);
margin: 0 0 40px;
line-height: 1.15;
letter-spacing: -0.005em;
}
.anchor-strip-title em {
font-style: italic;
color: #5A7C5B;
font-weight: 400;
}
.anchor-brands {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
flex-wrap: wrap;
margin: 0;
}
.anchor-brand {
padding: 0 60px;
text-align: center;
}
.anchor-brand-name {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 500;
color: var(--green-deep, #1a2e1e);
letter-spacing: 0.01em;
margin-bottom: 8px;
line-height: 1.1;
}
.anchor-brand-logo {
display: block;
width: 72px;
height: 72px;
margin: 0 auto;
transition: opacity 0.3s ease, transform 0.4s ease;
}
.anchor-brand-logo path { transition: fill 0.3s ease; }
.anchor-brand-logo--kfc path { fill: #E4002B; }
.anchor-brand-logo--mcdonalds { width: 84px; height: 84px; }
.anchor-brand-logo--mcdonalds path { fill: #FFC72C; }
.anchor-brand:hover .anchor-brand-logo { transform: translateY(-3px); }
.anchor-brand:hover .anchor-brand-logo { opacity: 0.9; }
/* ============================================================
ANCHOR WALL — Multi-tenant brand ecosystem grid
Used on Trillium (and any project with many anchor brands)
============================================================ */
.anchor-wall {
background: var(--cream, #f7f3ea);
padding: 96px 48px;
text-align: center;
position: relative;
border-top: 1px solid rgba(201, 164, 107, 0.22);
border-bottom: 1px solid rgba(201, 164, 107, 0.22);
}
.anchor-wall::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--gold-deep, #c9a84c);
opacity: 0.6;
}
.anchor-wall-inner {
max-width: 1200px;
margin: 0 auto;
}
.anchor-wall-label {
display: inline-block;
font-family: var(--body);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-deep, #c9a84c);
margin-bottom: 18px;
font-weight: 500;
}
.anchor-wall-title {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 400;
color: var(--green-deep, #1a2e1e);
margin: 0 0 18px;
line-height: 1.15;
letter-spacing: -0.005em;
}
.anchor-wall-title em {
font-style: italic;
color: var(--brand-ink-soft) !important;
font-weight: 400;
}
.anchor-wall-lede {
font-size: 14px;
line-height: 1.7;
color: rgba(8, 25, 14, 0.65);
max-width: 620px;
margin: 0 auto 56px;
}
.anchor-wall-grid {
display: flex;
flex-wrap: wrap;
gap: 14px;
max-width: 1100px;
margin: 0 auto;
justify-content: center;
}
.anchor-wall-grid .anchor-wall-brand {
flex: 1 1 200px;
min-width: 180px;
max-width: 240px;
}
.anchor-wall-brand {
background: #fff;
padding: 30px 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 110px;
border: 1px solid rgba(8, 25, 14, 0.06);
transition: border-color 0.3s ease, transform 0.4s ease, box-shadow 0.4s ease;
position: relative;
}
.anchor-wall-brand::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 1px;
background: var(--gold-deep, #c9a84c);
opacity: 0;
transition: opacity 0.3s ease, width 0.3s ease;
}
.anchor-wall-brand:hover {
border-color: rgba(201, 164, 107, 0.35);
transform: translateY(-3px);
box-shadow: 0 12px 24px -16px rgba(8, 25, 14, 0.18);
}
.anchor-wall-brand:hover::before {
opacity: 1;
width: 36px;
}
.anchor-wall-brand-name {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: 21px;
color: var(--green-deep, #1a2e1e);
letter-spacing: 0.015em;
font-weight: 500;
line-height: 1.1;
text-align: center;
}
.anchor-wall-brand-logo {
display: block;
max-height: 56px;
max-width: 88%;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.4s ease;
}
.anchor-wall-brand:hover .anchor-wall-brand-logo { transform: scale(1.04); }
/* ============================================================
LEASE ZONING — 8-zone destination strategy
Used on Vilasa (and any multi-zone destination project)
============================================================ */
.lease-zoning {
background: var(--cream, #f7f3ea);
padding: 96px 48px;
position: relative;
border-top: 1px solid rgba(201, 164, 107, 0.22);
border-bottom: 1px solid rgba(201, 164, 107, 0.22);
text-align: center;
}
.lease-zoning::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--gold-deep, #c9a84c);
opacity: 0.6;
}
.lease-zoning-inner {
max-width: 1200px;
margin: 0 auto;
}
.lease-zoning-label {
display: inline-block;
font-family: var(--body);
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--gold-deep, #c9a84c);
margin-bottom: 18px;
font-weight: 500;
}
.lease-zoning-title {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 400;
color: var(--green-deep, #1a2e1e);
margin: 0 0 18px;
line-height: 1.15;
letter-spacing: -0.005em;
}
.lease-zoning-title em {
font-style: italic;
color: var(--brand-ink-soft) !important;
font-weight: 400;
}
.lease-zoning-lede {
font-size: 14px;
line-height: 1.7;
color: rgba(8, 25, 14, 0.65);
max-width: 640px;
margin: 0 auto 56px;
}
.zoning-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
text-align: left;
}
.zone-card {
background: #fff;
padding: 30px 26px;
border: 1px solid rgba(8, 25, 14, 0.06);
position: relative;
transition: border-color 0.3s ease, transform 0.4s ease, box-shadow 0.4s ease;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 200px;
}
.zone-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 1px;
background: var(--gold-deep, #c9a84c);
opacity: 0;
transition: opacity 0.3s ease, width 0.3s ease;
}
.zone-card:hover {
border-color: rgba(201, 164, 107, 0.35);
transform: translateY(-3px);
box-shadow: 0 12px 24px -16px rgba(8, 25, 14, 0.18);
}
.zone-card:hover::before {
opacity: 1;
width: 38px;
}
.zone-num {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: 24px;
color: var(--gold-deep, #c9a84c);
font-style: italic;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1;
margin-bottom: 4px;
}
.zone-name {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: 22px;
color: var(--green-deep, #1a2e1e);
font-weight: 500;
line-height: 1.18;
letter-spacing: 0.005em;
}
.zone-name em {
font-style: italic;
color: #5A7C5B;
display: inline-block;
}
.zone-desc {
font-size: 13px;
line-height: 1.65;
color: rgba(8, 25, 14, 0.65);
margin: 4px 0 0;
}
.zone-brands {
font-size: 11.5px;
letter-spacing: 0.02em;
color: rgba(8, 25, 14, 0.55);
font-style: italic;
line-height: 1.65;
padding-top: 12px;
border-top: 1px dashed rgba(201, 164, 107, 0.35);
margin-top: auto;
}
.zone-brands-label {
display: block;
font-style: normal;
font-size: 9.5px;
letter-spacing: 2.2px;
text-transform: uppercase;
color: var(--gold-deep, #c9a84c);
margin-bottom: 6px;
font-weight: 500;
}
.lease-zoning-foot {
font-size: 12px;
font-style: italic;
color: rgba(8, 25, 14, 0.5);
margin: 32px 0 0;
text-align: center;
}
@media (max-width: 768px) {
.lease-zoning { padding: 60px 20px; }
.zoning-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.zone-card { padding: 22px 18px; min-height: 170px; }
.zone-name { font-size: 18px; }
.zone-num { font-size: 20px; }
}
@media (max-width: 480px) {
.zoning-grid { grid-template-columns: 1fr; }
}
.anchor-wall-foot {
font-family: var(--display, 'Cormorant Garamond', Georgia, serif);
font-size: 20px;
font-style: italic;
color: var(--gold-deep, #c9a84c);
margin: 44px 0 0;
letter-spacing: 0.01em;
}
@media (max-width: 768px) {
.anchor-wall { padding: 60px 20px; }
.anchor-wall-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.anchor-wall-brand { padding: 22px 12px; min-height: 86px; }
.anchor-wall-brand-name { font-size: 17px; }
.anchor-wall-foot { font-size: 17px; margin-top: 32px; }
}
.anchor-brand-meta {
font-size: 11px;
letter-spacing: 2.4px;
text-transform: uppercase;
color: rgba(8, 25, 14, 0.55);
font-weight: 500;
}
.anchor-divider {
width: 1px;
height: 70px;
background: var(--gold-deep, #c9a84c);
opacity: 0.35;
align-self: center;
}
.anchor-strip-note {
font-size: 13px;
line-height: 1.7;
color: rgba(8, 25, 14, 0.6);
max-width: 640px;
margin: 36px auto 0;
font-style: italic;
}
@media (max-width: 768px) {
.anchor-strip { padding: 56px 24px; }
.anchor-brands { flex-direction: column; gap: 32px; }
.anchor-brand { padding: 0; }
.anchor-divider { width: 60px; height: 1px; }
.anchor-strip-title { margin-bottom: 32px; }
}
@media (max-width: 968px) {
.project { padding: var(--section-padding-tight); }
.project-grid, .project.reverse .project-grid { grid-template-columns: 1fr; gap: 32px; }
.project.reverse .project-image-block { order: 1; }
.project.reverse .project-content { order: 2; padding-right: 0; }
.project-content, .project-image-block { padding-left: 0; }
.project-image-secondary { display: none; }
}
/* ===================================================================
APPROACH
=================================================================== */
.approach {
background: var(--sand);
color: var(--green-deep);
padding: var(--section-padding);
position: relative;
}
.approach::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.4;
pointer-events: none;
}
.approach-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: end;
margin-bottom: 40px;
position: relative;
}
.approach-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(30px, 4vw, 54px);
line-height: 0.95;
margin-top: 28px;
color: var(--green-deep);
letter-spacing: -0.018em;
}
.approach-head h2 .it { color: var(--brand-ink-soft); }
.approach-head p {
font-size: var(--text-base);
line-height: 1.7;
color: rgba(8, 25, 14, 0.74);
border-left: 1px solid var(--rule-dark-strong);
padding-left: 28px;
align-self: end;
}
.approach-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--rule-dark-strong);
position: relative;
}
.ap-col {
padding: 56px 32px;
border-right: 1px solid var(--rule-dark-strong);
}
.ap-col:last-child { border-right: none; }
.ap-num {
font-family: var(--display);
font-weight: 400;
font-size: 56px;
color: var(--gold-deep);
margin-bottom: 28px;
display: flex; align-items: baseline; gap: 14px;
line-height: 1;
}
.ap-numlabel {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
font-style: normal;
font-weight: 500;
}
.ap-title {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.15;
color: var(--green-deep);
margin-bottom: 22px;
letter-spacing: -0.01em;
}
.ap-body {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(8, 25, 14, 0.72);
margin-bottom: 28px;
font-weight: 300;
}
.ap-specs-title {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 18px;
padding-top: 22px;
border-top: 1px solid var(--rule-dark-strong);
}
.ap-specs { display: flex; flex-direction: column; gap: 10px; }
.ap-spec {
font-family: var(--body);
font-weight: 400;
font-size: var(--text-sm);
letter-spacing: 0.01em;
color: rgba(8, 25, 14, 0.86);
display: flex;
align-items: baseline;
gap: 12px;
}
.ap-spec::before {
content: '';
width: 16px; height: 1px;
background: var(--gold-deep);
flex-shrink: 0;
transform: translateY(-4px);
}
@media (max-width: 968px) {
.approach { padding: var(--section-padding-tight); }
.approach-head { grid-template-columns: 1fr; gap: 24px; }
.approach-head p { border-left: none; border-top: 1px solid var(--rule-dark-strong); padding: 24px 0 0; }
.approach-grid { grid-template-columns: 1fr; }
.ap-col { border-right: none; border-bottom: 1px solid var(--rule-dark-strong); padding: 36px 0; }
.ap-col:last-child { border-bottom: none; }
}
/* ===================================================================
FOUNDERS — magazine spread
=================================================================== */
.founders {
background: var(--brand-primary);
position: relative;
padding: 0;
overflow: hidden;
border-top: 1px solid var(--rule);
}
.founders-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
align-items: stretch;
min-height: 100vh;
}
.founders-image {
position: relative;
background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1600&q=85&auto=format&fit=crop');
background-size: cover;
background-position: center;
filter: saturate(0.85) contrast(1.05) brightness(0.9);
}
.founders-image::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(250,250,247,0.0) 60%, var(--brand-primary) 100%);
}
.founders-image-cap {
position: absolute;
bottom: 28px; left: 28px;
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.7);
background: rgba(8,25,14,0.6);
padding: 6px 12px;
}
.founders-content {
padding: 100px var(--pad-x) 100px;
display: flex; flex-direction: column; justify-content: center;
position: relative;
max-width: 760px;
}
.founders-folio {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-sm);
color: rgba(122, 99, 9, 0.6);
margin-bottom: 20px;
}
.founders-mark {
font-family: var(--display);
font-size: 86px;
color: var(--gold-deep);
line-height: 0.4;
margin-bottom: 14px;
opacity: 0.5;
}
.founders-quote {
font-family: var(--display);
font-weight: 400;
font-size: clamp(20px, 2vw, 28px);
line-height: 1.32;
color: var(--brand-ink);
margin-bottom: 40px;
letter-spacing: -0.005em;
}
.founders-quote .em { font-style: normal; color: var(--gold-deep); font-weight: 500; }
.founders-attrib {
border-top: 1px solid var(--rule-strong);
padding-top: 24px;
display: flex; flex-direction: column; gap: 4px;
margin-bottom: 32px;
}
.founders-attrib .name {
font-family: var(--display);
font-weight: 500;
font-size: 18px;
color: var(--brand-ink);
letter-spacing: 0.04em;
}
.founders-attrib .role {
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
}
.founders-signatures {
display: flex; gap: 40px;
}
.sig-col { display: flex; flex-direction: column; gap: 4px; }
.sig-cursive {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
color: var(--gold-deep);
line-height: 1;
}
.sig-name {
font-family: var(--body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.85);
}
.sig-title {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
}
@media (max-width: 968px) {
.founders-grid { grid-template-columns: 1fr; }
.founders-image { aspect-ratio: 16/10; min-height: auto; }
.founders-content { padding: 70px var(--pad-x); }
}
/* ===================================================================
PROCESS — buyer journey
=================================================================== */
.process {
background: var(--brand-primary);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
}
.process-head {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 36px;
align-items: start;
margin-bottom: 36px;
}
.process-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 48px);
line-height: 0.96;
margin-top: 24px;
letter-spacing: -0.018em;
}
.process-head-meta {
border-left: 1px solid var(--rule);
padding: 12px 0 0 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
.process-head-meta p {
font-size: var(--text-md);
line-height: 1.72;
color: rgba(14, 14, 14, 0.74);
font-weight: 300;
margin: 0;
}
.process-head-meta p:first-child {
font-family: var(--display);
font-size: var(--text-lg);
line-height: 1.42;
color: var(--gold-deep);
font-weight: 400;
letter-spacing: -0.005em;
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--rule);
}
.proc-col {
padding: 50px 30px 0;
border-right: 1px solid var(--rule);
position: relative;
}
.proc-col:last-child { border-right: none; }
.proc-num {
font-family: var(--display);
font-weight: 400;
font-size: 70px;
color: var(--gold-deep);
line-height: 0.85;
margin-bottom: 18px;
letter-spacing: -0.04em;
}
.proc-num span {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(122, 99, 9, 0.6);
display: block;
margin-bottom: 6px;
font-weight: 500;
}
.proc-time {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.55);
margin-bottom: 14px;
}
.proc-title {
font-family: var(--display);
font-weight: 500;
font-size: 24px;
line-height: 1.2;
color: var(--brand-ink);
margin-bottom: 14px;
}
.proc-body {
font-size: var(--text-sm);
line-height: 1.65;
color: rgba(14, 14, 14, 0.65);
font-weight: 300;
}
@media (max-width: 968px) {
.process-head { grid-template-columns: 1fr; gap: 24px; }
.process-head-meta { border-left: none; padding: 0; border-top: 1px solid var(--rule); padding-top: 24px; }
.process-grid { grid-template-columns: 1fr 1fr; }
.proc-col { padding: 40px 20px 0; }
.proc-col:nth-child(odd) { padding-left: 0; padding-right: 20px; }
.proc-col:nth-child(even) { padding-left: 20px; padding-right: 0; border-right: none; }
.proc-col:nth-child(1), .proc-col:nth-child(2) { border-bottom: 1px solid var(--rule); padding-bottom: 30px; }
}
/* ===================================================================
GEOGRAPHY
=================================================================== */
.geography {
padding: var(--section-padding);
background: var(--green);
border-top: 1px solid var(--rule);
}
.geo-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 36px;
align-items: center;
}
.geo-content h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(30px, 3.8vw, 52px);
line-height: 0.96;
margin: 28px 0 28px;
letter-spacing: -0.018em;
}
.geo-content p { max-width: 480px; margin-bottom: 36px; }
.geo-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--rule);
}
.geo-item {
padding: 16px 0;
border-bottom: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: center;
}
.geo-item .city {
font-family: var(--display);
font-weight: 500;
font-size: 18px;
color: var(--brand-ink);
}
.geo-item .city.featured { color: var(--gold-deep); }
.geo-item .country {
font-family: var(--body);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
}
.geo-map {
aspect-ratio: 1/1.05;
position: relative;
background: linear-gradient(135deg, #08190E 0%, #0D2014 100%);
border: 1px solid var(--rule);
overflow: hidden;
}
.geo-map-frame {
position: absolute;
inset: 16px;
border: 1px solid var(--rule);
pointer-events: none;
}
.geo-map-corner {
position: absolute;
width: 14px; height: 14px;
border-color: var(--gold-deep);
z-index: 2;
}
.geo-map-corner.tl { top: 10px; left: 10px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.geo-map-corner.tr { top: 10px; right: 10px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.geo-map-corner.bl { bottom: 10px; left: 10px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.geo-map-corner.br { bottom: 10px; right: 10px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.geo-map-label {
position: absolute;
font-family: var(--body);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.4);
}
.geo-map-label.top { top: 28px; left: 50%; transform: translateX(-50%); }
.geo-map-label.bot { bottom: 28px; left: 50%; transform: translateX(-50%); }
.geo-map-label.lft { top: 50%; left: 28px; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.geo-map-label.rgt { top: 50%; right: 28px; writing-mode: vertical-rl; transform: translateY(-50%); }
.geo-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.geo-pin { position: absolute; transform: translate(-50%, -50%); }
.geo-pin .pdot {
width: 8px; height: 8px;
background: var(--gold);
border-radius: 50%;
margin: 0 auto 6px;
box-shadow: 0 0 0 4px rgba(122, 99, 9, 0.18), 0 0 0 8px rgba(122, 99, 9, 0.06);
}
.geo-pin .pdot.featured {
width: 12px; height: 12px;
box-shadow: 0 0 0 6px rgba(122, 99, 9, 0.25), 0 0 0 14px rgba(122, 99, 9, 0.08);
animation: pinPulse 2.6s ease-in-out infinite;
}
@keyframes pinPulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(122, 99, 9, 0.25), 0 0 0 14px rgba(122, 99, 9, 0.08); }
50% { box-shadow: 0 0 0 10px rgba(122, 99, 9, 0.35), 0 0 0 22px rgba(122, 99, 9, 0.04); }
}
.geo-pin .plbl {
font-family: var(--body);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brand-cream);
background: rgba(8,25,14,0.85);
padding: 4px 9px;
border: 1px solid rgba(217, 182, 115, 0.4);
white-space: nowrap;
}
.geo-pin .plbl.gold { color: var(--brand-accent-warm); border-color: rgba(217, 182, 115, 0.6); }
@media (max-width: 968px) {
.geo-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ===================================================================
TESTIMONIALS — buyer voices
=================================================================== */
.testimonials {
padding: var(--section-padding);
background: var(--brand-primary);
border-top: 1px solid var(--rule);
}
.test-head {
text-align: center;
margin-bottom: 32px;
}
.test-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 46px);
line-height: 1;
margin-top: 24px;
letter-spacing: -0.018em;
}
.test-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.test-card {
border: 1px solid var(--rule);
padding: 36px 30px;
position: relative;
background: var(--green);
}
.test-card::before {
content: '"';
position: absolute;
top: 16px; right: 24px;
font-family: var(--display);
font-size: 80px;
color: var(--gold-deep);
line-height: 1;
opacity: 0.4;
}
.test-rating {
display: flex; gap: 4px;
margin-bottom: 18px;
}
.test-rating span {
color: var(--gold-deep);
font-size: var(--text-sm);
}
.test-quote {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-md);
line-height: 1.5;
color: var(--brand-ink);
margin-bottom: 28px;
}
.test-attrib {
display: flex; align-items: center; gap: 14px;
padding-top: 22px;
border-top: 1px solid var(--rule);
}
.test-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--gold);
color: var(--green-deep);
font-family: var(--display);
font-weight: 500;
font-size: var(--text-md);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.test-info {
display: flex; flex-direction: column; gap: 2px;
}
.test-info .tname {
font-family: var(--body);
font-weight: 500;
font-size: var(--text-sm);
color: var(--brand-ink);
}
.test-info .trole {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.55);
}
.test-info .tproject {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
margin-top: 4px;
}
@media (max-width: 968px) {
.test-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
PRESS — featured in
=================================================================== */
.press {
background: var(--green);
padding: var(--space-2xl) 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.press-head {
text-align: center;
margin-bottom: 36px;
}
.press-head .label {
color: rgba(14, 14, 14, 0.55);
letter-spacing: 0.36em;
}
.press-grid {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
gap: 50px;
}
.press-logo {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
letter-spacing: 0.04em;
color: rgba(14, 14, 14, 0.55);
text-transform: uppercase;
transition: color 0.3s;
}
.press-logo:hover { color: var(--gold-deep); }
.press-logo.italic { font-weight: 400; text-transform: none; }
.press-logo.serif-bold { font-weight: 500; }
.press-logo.cond { letter-spacing: 0.32em; font-size: var(--text-base); font-family: var(--body); font-weight: 500; }
/* ===================================================================
NRI HUB (v9 expansion) — international desks, why-invest, FAQ
=================================================================== */
.nri-hub { background: var(--sand); padding: var(--section-padding); color: var(--green-deep); }
.nri-head { max-width: 880px; margin: 0 auto 52px; text-align: center; }
.nri-head h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(32px, 4.2vw, 58px); line-height: 0.94;
margin: 26px 0 28px; color: var(--green-deep);
letter-spacing: -0.018em;
}
.nri-head p {
font-size: var(--text-base); line-height: 1.72;
color: rgba(8, 25, 14, 0.74);
font-weight: 300;
max-width: 720px;
margin: 0 auto;
}
.nri-section-label {
display: flex;
align-items: center;
gap: 16px;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--brand-ink-soft);
font-weight: 600;
margin-bottom: 28px;
}
.nri-section-label::before {
content: '';
flex: 0 0 24px;
height: 1.5px;
background: currentColor;
}
/* International Desks */
.nri-desks { margin-bottom: 40px; }
.nri-desks-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--rule-dark-strong);
}
.nri-desk {
padding: var(--card-padding);
border-right: 1px solid var(--rule-dark-strong);
border-bottom: 1px solid var(--rule-dark-strong);
}
.nri-desk:last-child { border-right: none; }
.nri-desk-where { color: rgba(14, 14, 14, 0.7); }
.nri-desk-name { color: var(--brand-ink); }
.nri-desk-contact { color: rgba(14, 14, 14, 0.85); }
.snapshot.sand .nri-desk-name { color: var(--green-deep) !important; }
.snapshot.sand .nri-desk-where { color: rgba(8,25,14,0.62) !important; }
.snapshot.sand .nri-desk-contact { color: rgba(8,25,14,0.82) !important; }
.snapshot.sand .nri-desks-grid { border-top-color: rgba(8,25,14,0.18) !important; }
.snapshot.sand .nri-desk { border-color: rgba(8,25,14,0.18) !important; }
.nri-desk-flag-wrap {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.nri-desk-flag-img {
width: 44px;
height: 30px;
object-fit: cover;
border: 1px solid rgba(8, 25, 14, 0.12);
border-radius: 2px;
flex-shrink: 0;
background: #fff;
}
.nri-desk-name {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
color: var(--green-deep);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.nri-desk-where {
font-family: var(--body);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(8, 25, 14, 0.56);
margin-bottom: 22px;
font-weight: 500;
}
.nri-desk-contact {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(8, 25, 14, 0.82);
}
.nri-desk-contact strong {
display: block;
margin-bottom: 4px;
color: var(--gold-deep);
}
.nri-desk-contact .nri-desk-address {
display: block;
}
.nri-desk-line {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.nri-desk-line:last-child { margin-bottom: 0; }
.nri-desk-line a { transition: color 0.2s ease; }
.nri-desk-line a:hover { color: var(--gold-deep); }
.nri-desk-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--gold-deep);
margin-top: 5px;
}
.snapshot.sand .nri-desk-icon { color: var(--gold-deep); }
.nri-desks-note {
margin-top: 28px;
color: rgba(8, 25, 14, 0.62);
font-size: var(--text-md);
line-height: 1.7;
max-width: 760px;
}
/* Contact page — Enquire section + form layout */
.contact-enquire { padding: var(--section-padding-tight); }
.contact-form-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
margin-top: 44px;
align-items: start;
}
.contact-form-grid .contact-form-intro {
color: rgba(14, 14, 14, 0.74);
line-height: 1.72;
font-weight: 300;
}
.snapshot.sand .contact-form-grid .contact-form-intro { color: rgba(8,25,14,0.82); }
.contact-form-grid h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(22px, 2.8vw, 34px);
line-height: 0.96;
margin: 22px 0 28px;
color: var(--green-deep);
letter-spacing: -0.018em;
}
.contact-careers-note {
color: rgba(14, 14, 14, 0.62);
line-height: 1.7;
font-weight: 300;
margin-top: 28px;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
.snapshot.sand .contact-careers-note {
color: rgba(8,25,14,0.62);
border-top-color: rgba(8,25,14,0.18);
}
.contact-careers-note a {
color: var(--gold-deep);
text-decoration: underline;
}
/* Careers / Vendor sub-row — streamlined under enquiry form */
.contact-careers-row {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 44px;
padding-top: 32px;
border-top: 1px solid rgba(8,25,14,0.12);
flex-wrap: wrap;
}
.contact-careers-label {
font-family: var(--body);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(8,25,14,0.55);
}
.contact-careers-mail {
font-family: var(--display);
font-size: var(--text-md);
color: var(--gold-deep);
text-decoration: underline;
text-decoration-color: rgba(176,144,78,0.4);
text-underline-offset: 4px;
transition: text-decoration-color 0.25s;
}
.contact-careers-mail:hover { text-decoration-color: var(--gold-deep); }
@media (max-width: 600px) {
.contact-careers-row { flex-direction: column; gap: 8px; text-align: center; }
}
/* ============================================================
SECTION-END CTA STRIPS — used between sections to drive
enquiries. Increases CTA density across the site.
============================================================ */
.cta-strip {
background: var(--brand-primary);
color: var(--brand-ink);
padding: var(--section-padding-y) 0;
text-align: center;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
position: relative;
}
.cta-strip::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 56px;
height: 1.5px;
background: var(--gold);
}
.cta-strip.sand { background: var(--sand); color: var(--green-deep); border-color: rgba(8,25,14,0.12); }
.cta-strip.sand::before { background: var(--gold-deep); }
.cta-strip .wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
}
.cta-strip-head {
font-family: var(--display);
font-weight: 400;
font-size: clamp(22px, 2.6vw, 34px);
letter-spacing: -0.012em;
line-height: 1.15;
margin: 0;
max-width: 720px;
}
.cta-strip-head .it { color: var(--brand-ink-soft); }
.cta-strip.sand .cta-strip-head .it { color: var(--brand-ink-soft); }
.cta-strip-actions { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 768px) {
.cta-strip { padding: 32px 0; }
.cta-strip .wrap { flex-direction: column; }
}
/* Inline mid-page "Reserve" / "Enquire" call-out (smaller than full strip) */
.cta-inline {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
color: var(--gold-deep);
border-bottom: 1px solid var(--gold-deep);
padding-bottom: 4px;
transition: gap 0.25s;
}
.cta-inline:hover { gap: 20px; }
/* Centred CTA wrapper — single button below sections */
.cta-center { text-align: center; margin-top: 36px; }
@media (max-width: 968px) {
.contact-form-grid { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
}
/* Why Invest */
.nri-why { margin-bottom: 40px; }
.nri-section-number {
font-family: var(--body);
font-weight: 600;
font-feature-settings: "tnum" 1, "lnum" 1;
letter-spacing: -0.01em;
}
/* FAQ */
.nri-faq { margin-bottom: 40px; }
.nri-faq-list {
border-top: 1px solid rgba(8, 25, 14, 0.18);
}
.nri-faq-item {
border-bottom: 1px solid rgba(8, 25, 14, 0.12);
padding: 28px 0;
cursor: pointer;
transition: border-color 0.25s ease;
}
.nri-faq-item:hover { border-bottom-color: rgba(8, 25, 14, 0.25); }
.nri-faq-item summary {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-lg);
color: var(--green-deep);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 48px;
letter-spacing: -0.01em;
line-height: 1.3;
}
.nri-faq-item summary::-webkit-details-marker { display: none; }
.nri-faq-item summary::after {
content: '+';
position: absolute;
right: 0; top: 0;
font-family: var(--body);
font-size: 20px;
font-weight: 300;
color: #08190E;
line-height: 1.3;
transition: opacity 0.2s ease;
}
.nri-faq-item[open] summary::after { content: '−'; }
.nri-faq-item p {
margin-top: 20px;
font-size: var(--text-md);
line-height: 1.78;
color: rgba(8, 25, 14, 0.68);
font-weight: 300;
max-width: 780px;
}
/* Download — reuses existing inv-grid which already has CSS */
.nri-download { margin-top: 0; padding-top: 16px; }
@media (max-width: 968px) {
.nri-hub { padding: 40px 0 32px; }
.nri-desks-grid { grid-template-columns: 1fr; }
.nri-desk { padding: 28px 0; border-right: none; }
.nri-desk:last-child { border-bottom: none; }
.nri-faq-item summary { font-size: var(--text-md); }
}
/* ===================================================================
INVESTOR — NRI section
=================================================================== */
.investor {
padding: var(--section-padding);
background: var(--sand);
color: var(--green-deep);
position: relative;
}
.investor::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
}
.inv-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
position: relative;
}
.inv-content h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 46px);
line-height: 0.98;
margin: 24px 0 26px;
color: var(--green-deep);
letter-spacing: -0.018em;
}
.inv-content p {
color: rgba(8,25,14,0.74);
font-size: var(--text-base);
margin-bottom: 32px;
max-width: 480px;
line-height: 1.7;
}
.inv-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.inv-tag {
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
border: 1px solid var(--rule-dark-strong);
padding: 8px 14px;
}
.inv-form {
background: var(--brand-primary);
color: var(--brand-ink);
padding: 44px;
position: relative;
}
.inv-form::before, .inv-form::after {
content: '';
position: absolute;
width: 26px; height: 26px;
border-color: var(--gold-deep);
}
.inv-form::before {
top: 0; left: 0;
border-top: 1px solid var(--gold);
border-left: 1px solid var(--gold);
}
.inv-form::after {
bottom: 0; right: 0;
border-bottom: 1px solid var(--gold);
border-right: 1px solid var(--gold);
}
.inv-form-folio {
font-family: var(--display);
font-size: var(--text-sm);
color: var(--gold-deep);
margin-bottom: 12px;
}
.inv-form-title {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
margin-bottom: 8px;
color: var(--brand-ink);
}
.inv-form-sub {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.55);
margin-bottom: 26px;
}
.inv-row { margin-bottom: 14px; }
.inv-input {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--rule);
padding: 11px 0;
font-family: var(--body);
font-size: var(--text-sm);
color: var(--brand-ink);
font-weight: 300;
transition: border-color 0.3s;
}
.inv-input::placeholder {
color: rgba(14, 14, 14, 0.4);
text-transform: uppercase;
font-size: var(--text-xs);
letter-spacing: 0.22em;
font-weight: 400;
}
.inv-input:focus { outline: none; border-bottom-color: var(--gold-deep); }
.inv-submit {
width: 100%;
margin-top: 18px;
padding: 16px;
background: var(--btn-bg);
color: var(--btn-text);
border: 1px solid var(--btn-border);
font-family: var(--body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
display: flex; align-items: center; justify-content: center; gap: 14px;
transition: background 0.3s ease, border-color 0.3s ease;
cursor: pointer;
}
.inv-submit:hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); }
.inv-disclaimer {
margin-top: 16px;
font-size: 10.5px;
color: rgba(14, 14, 14, 0.42);
line-height: 1.55;
}
/* Generic .inv-form bare label + input pattern (no .inv-input class needed) */
.inv-form h4 {
font-family: var(--display);
font-weight: 500;
font-size: 24px;
color: var(--brand-ink);
margin-bottom: 28px;
letter-spacing: -0.005em;
}
.inv-form label {
display: block;
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.65);
font-weight: 500;
margin-bottom: 16px;
}
.inv-form input,
.inv-form textarea,
.inv-form select {
display: block;
width: 100%;
margin-top: 8px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(14, 14, 14, 0.18);
padding: 14px 0;
font-family: var(--body);
font-size: var(--text-md);
color: var(--brand-ink);
font-weight: 300;
letter-spacing: 0.01em;
transition: border-color 0.3s ease;
outline: none;
}
.inv-form select {
background: rgba(14, 14, 14, 0.04);
border: 1px solid rgba(14, 14, 14, 0.18);
padding: 14px 16px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 16px;
cursor: pointer;
}
.inv-form select option { background: var(--brand-primary); color: var(--brand-ink); }
.inv-form textarea {
resize: vertical;
min-height: 90px;
border: 1px solid rgba(14, 14, 14, 0.18);
padding: 12px 14px;
background: rgba(14, 14, 14, 0.04);
}
.inv-form input:focus,
.inv-form textarea:focus,
.inv-form select:focus {
border-color: var(--gold-deep);
}
/* Form submit button — only structural overrides (full width, larger pad).
Colors inherit from the unified .btn-primary token system. */
.inv-form .btn {
width: 100%;
margin-top: 8px;
padding: 16px 22px;
justify-content: center;
}
.inv-form .btn .arrow { width: 14px; height: 14px; }
/* .inv-form on cream / sand bg */
.snapshot.sand .inv-form,
.cream .inv-form {
background: rgba(8,25,14,0.04);
color: var(--green-deep);
}
.snapshot.sand .inv-form h4,
.cream .inv-form h4 { color: var(--green-deep); }
.snapshot.sand .inv-form label,
.cream .inv-form label { color: rgba(8,25,14,0.7); }
.snapshot.sand .inv-form input,
.snapshot.sand .inv-form textarea,
.snapshot.sand .inv-form select,
.cream .inv-form input,
.cream .inv-form textarea,
.cream .inv-form select {
color: var(--brand-ink);
border: 1px solid rgba(8, 25, 14, 0.16);
background: #FFFFFF;
padding: 12px 14px;
}
.snapshot.sand .inv-form input::placeholder,
.cream .inv-form input::placeholder,
.snapshot.sand .inv-form textarea::placeholder,
.cream .inv-form textarea::placeholder { color: rgba(14, 14, 14, 0.42); }
.snapshot.sand .inv-form select,
.cream .inv-form select {
background-image: url("data:image/svg+xml;utf8,");
background-position: right;
background-repeat: no-repeat;
}
.snapshot.sand .inv-form input:focus,
.snapshot.sand .inv-form textarea:focus,
.snapshot.sand .inv-form select:focus,
.cream .inv-form input:focus,
.cream .inv-form textarea:focus,
.cream .inv-form select:focus { border-color: var(--gold-deep); }
.snapshot.sand .inv-form::before,
.cream .inv-form::before,
.snapshot.sand .inv-form::after,
.cream .inv-form::after { border-color: var(--gold-deep); }
@media (max-width: 968px) {
.inv-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ===================================================================
RECOGNITION
=================================================================== */
.recognition {
padding: var(--section-padding);
background: var(--brand-primary);
border-top: 1px solid var(--rule);
}
.rec-head {
text-align: center;
margin-bottom: 40px;
}
.rec-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(24px, 3.2vw, 40px);
line-height: 1;
margin-top: 24px;
letter-spacing: -0.018em;
}
.rec-list { border-top: 1px solid var(--rule); }
.rec-row {
display: grid;
grid-template-columns: 0.5fr 2fr 2fr 1fr;
gap: 30px;
padding: 26px 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
transition: background 0.3s, padding-left 0.3s;
}
.rec-row:hover { background: rgba(122, 99, 9, 0.04); padding-left: 12px; }
.rec-row .rec-year {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-xl);
color: var(--gold-deep);
}
.rec-row .rec-cred {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
color: var(--brand-ink);
}
.rec-row .rec-detail {
font-size: var(--text-sm);
color: rgba(14, 14, 14, 0.62);
font-weight: 300;
line-height: 1.6;
}
.rec-row .rec-status {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
text-align: right;
}
@media (max-width: 768px) {
.rec-row { grid-template-columns: auto 1fr; gap: 14px; }
.rec-row .rec-detail, .rec-row .rec-status { grid-column: 1 / -1; }
.rec-row .rec-status { text-align: left; padding-top: 4px; }
}
/* Cream variant for the Recognition section — flips to sand bg with dark text */
.recognition.cream { background: var(--sand) !important; }
.recognition.cream .rec-list,
.recognition.cream .rec-row { border-color: rgba(8,25,14,0.18); }
.recognition.cream .rec-row:hover { background: rgba(8,25,14,0.03); }
.recognition.cream .rec-row .rec-year { color: var(--gold-deep); }
.recognition.cream .rec-row .rec-cred { color: var(--green-deep); }
.recognition.cream .rec-row .rec-detail { color: rgba(8,25,14,0.74); }
.recognition.cream .rec-row .rec-status { color: var(--gold-deep); }
.recognition.cream .rec-section-label { color: var(--gold-deep); border-bottom-color: rgba(8,25,14,0.18); }
.recognition.cream .rec-head h2 { color: var(--green-deep); }
.recognition.cream .rec-head-note { color: rgba(8,25,14,0.7); }
/* ----- Recognition: sub-section dividers (v9) ----- */
.rec-head-note {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.62);
max-width: 680px;
margin: 22px auto 0;
text-align: center;
font-weight: 300;
}
.rec-section { margin-top: 44px; }
.rec-section:first-of-type { margin-top: 36px; }
.rec-section-label {
display: block;
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--brand-ink-soft);
font-weight: 500;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid var(--rule);
}
/* ===================================================================
JOURNAL
=================================================================== */
.journal {
padding: var(--section-padding);
background: var(--brand-primary);
border-top: 1px solid var(--rule);
}
.journal-head {
display: flex;
justify-content: space-between;
align-items: end;
margin-bottom: 50px;
padding-bottom: 28px;
border-bottom: 1px solid var(--rule);
}
.journal-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(26px, 3.4vw, 42px);
line-height: 1;
letter-spacing: -0.018em;
}
.journal-link {
font-family: var(--body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--gold-deep);
display: inline-flex; align-items: center; gap: 12px;
border-bottom: 1px solid var(--rule);
padding-bottom: 12px;
transition: gap 0.3s;
}
.journal-link:hover { gap: 22px; }
.journal-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 36px;
}
.article {
display: flex; flex-direction: column;
}
.article-image {
aspect-ratio: 4/3;
overflow: hidden;
background: var(--green-mid);
margin-bottom: 22px;
position: relative;
}
.article-image img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.4s ease;
filter: saturate(0.92);
}
.article:hover .article-image img { transform: scale(1.05); }
.article-folio {
position: absolute; top: 14px; right: 14px;
font-family: var(--display);
font-size: var(--text-sm);
color: var(--gold-deep);
background: rgba(8,25,14,0.7);
padding: 4px 10px;
}
.article-meta-top { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.article-cat {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
}
.article-time {
font-family: var(--body);
font-size: 10px;
color: rgba(14, 14, 14, 0.5);
letter-spacing: 0.18em;
text-transform: uppercase;
}
.article-title {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
line-height: 1.22;
margin-bottom: 12px;
color: var(--brand-ink);
letter-spacing: -0.005em;
}
.article.feature .article-title { font-size: 22px; line-height: 1.12; }
.article-excerpt {
font-size: var(--text-sm);
color: rgba(14, 14, 14, 0.65);
line-height: 1.65;
font-weight: 300;
margin-bottom: 18px;
}
.article-link {
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
display: inline-flex; align-items: center; gap: 10px;
padding-top: 14px;
border-top: 1px solid var(--rule);
}
@media (max-width: 968px) {
.journal-grid { grid-template-columns: 1fr; }
.journal-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ===================================================================
INVITATION
=================================================================== */
.invite {
padding: var(--section-padding-y-spacious) 0;
background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-soft) 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.invite::before {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(ellipse at 30% 30%, rgba(122, 99, 9, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(122, 99, 9, 0.08) 0%, transparent 50%);
}
.invite-watermark {
position: absolute;
bottom: -2%; left: 50%;
transform: translateX(-50%);
font-family: var(--display);
font-weight: 900;
font-size: clamp(160px, 20vw, 320px);
color: rgba(122, 99, 9, 0.05);
pointer-events: none;
letter-spacing: -0.04em;
line-height: 0.85;
}
.invite-inner {
position: relative;
max-width: 920px;
margin: 0 auto;
padding: 0 var(--pad-x);
}
.invite h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(34px, 4.5vw, 64px);
line-height: 0.95;
margin: 28px 0 32px;
letter-spacing: -0.022em;
}
.invite p {
font-size: var(--text-md);
color: rgba(14, 14, 14, 0.78);
max-width: 620px;
margin: 0 auto 44px;
line-height: 1.65;
}
.invite-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ===================================================================
FOOTER
=================================================================== */
.footer {
background: #08190E;
border-top: 1px solid rgba(250, 203, 63, 0.18);
padding: 60px 0 28px;
color: rgba(244, 236, 217, 0.88);
}
.footer-mast {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
align-items: start;
gap: 28px;
margin-bottom: 32px;
}
.footer-col-title {
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 22px;
}
.footer-col a, .footer-col p {
display: block;
font-size: 15px;
color: rgba(244, 236, 217, 0.72);
padding: 5px 0;
font-weight: 300;
transition: color 0.25s;
line-height: 1.6;
}
.footer-col a:hover { color: var(--gold); }
.footer-col strong {
display: block;
font-family: var(--display);
font-weight: 500;
font-size: var(--text-base);
color: var(--brand-cream);
margin-bottom: 4px;
}
.footer-col p + strong { margin-top: 22px; }
.footer-brand .vamika-logo { margin-bottom: 24px; }
.footer-brand p {
font-size: var(--text-md);
color: rgba(244, 236, 217, 0.7);
line-height: 1.7;
margin-bottom: 0px;
max-width: 320px;
}
.footer-brand .canon {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-md);
color: var(--gold);
margin-bottom: 22px;
line-height: 1.4;
}
.footer-pillars {
font-family: var(--display);
font-size: var(--text-md);
color: var(--gold);
letter-spacing: 0.04em;
margin: 0 0 14px;
white-space: nowrap;
line-height: 1.4;
}
.footer-brand-mail {
display: inline-block;
font-family: var(--body);
font-size: var(--text-md);
font-weight: 500;
color: var(--gold);
letter-spacing: 0.02em;
transition: color 0.2s ease;
}
.footer-brand-mail:hover { color: var(--gold-bright); }
.footer-projects { display: flex; flex-direction: column; gap: 8px; }
.fp-row {
padding: 12px 0;
border-bottom: 1px solid rgba(244, 236, 217, 0.12);
display: flex; justify-content: space-between; align-items: center;
transition: padding-left 0.3s, border-color 0.3s;
}
.fp-row:hover { padding-left: 8px; border-bottom-color: var(--gold); }
.fp-row-name {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-base);
color: var(--brand-cream);
}
.fp-row-loc {
font-family: var(--body);
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.5);
}
.footer-massive {
border-top: 1px solid rgba(244, 236, 217, 0.12);
padding: 36px 0 20px;
margin-bottom: 0;
text-align: center;
position: relative;
}
/* Footer manifesto — replaces oversized footer logo with a single brand-voice line */
.footer-manifesto {
text-align: center;
padding: 40px 0 32px;
font-family: var(--display);
font-weight: 400;
font-size: clamp(22px, 2.8vw, 34px);
line-height: 1.25;
color: var(--brand-cream);
letter-spacing: -0.01em;
display: none;
}
.footer-manifesto .it { color: var(--gold); }
.footer-manifesto-sub {
display: block;
color: rgba(244, 236, 217, 0.7);
font-size: 0.62em;
letter-spacing: 0.005em;
margin-top: 8px;
}
.footer-massive .vamika-logo {
display: inline-flex; align-items: center; justify-content: center;
width: 100%;
}
.footer-canon {
font-family: var(--display);
font-weight: 400;
font-size: clamp(26px, 3.6vw, 46px);
color: var(--gold);
line-height: 1.2;
margin-top: 26px;
letter-spacing: -0.005em;
}
.footer-bottom {
display: flex; justify-content: space-between; align-items: center;
padding-top: 28px;
border-top: 1px solid rgba(244, 236, 217, 0.12);
font-size: var(--text-xs);
color: rgba(244, 236, 217, 0.45);
flex-wrap: wrap;
gap: 16px;
letter-spacing: 0.05em;
}
.footer-legal { display: flex; gap: 24px; }
.footer-legal a {
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.5);
}
.footer-legal a:hover { color: var(--gold); }
.footer-disclaimer {
margin-top: 22px;
font-size: 10.5px;
color: rgba(244, 236, 217, 0.42);
line-height: 1.65;
max-width: 820px;
font-weight: 300;
}
@media (max-width: 1024px) {
.footer-mast { grid-template-columns: 1fr 1fr; gap: 40px; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 568px) {
.footer-mast { grid-template-columns: 1fr; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ===================================================================
HOSPITALITY / ESTATE SERVICES — second-home stewardship (v9)
=================================================================== */
.estate {
background: var(--sand);
color: var(--green-deep);
padding: var(--section-padding);
position: relative;
border-top: 1px solid rgba(8, 25, 14, 0.08);
}
.estate::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.45;
pointer-events: none;
}
.estate > .wrap { position: relative; }
.estate-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: end;
margin-bottom: 36px;
}
.estate-head h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(32px, 4.2vw, 58px); line-height: 0.94;
margin: 26px 0 0; color: var(--green-deep);
letter-spacing: -0.018em;
}
.estate-head .estate-lede {
font-size: var(--text-base); line-height: 1.72;
color: rgba(8, 25, 14, 0.74);
font-weight: 300;
align-self: end;
padding-bottom: 6px;
}
/* SLA strip */
.estate-sla {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 0;
border-top: 1px solid rgba(8, 25, 14, 0.28);
border-bottom: 1px solid rgba(8, 25, 14, 0.28);
padding: 36px 0;
margin-bottom: 36px;
}
.estate-sla-cell {
padding: 0 28px;
border-right: 1px solid rgba(8, 25, 14, 0.16);
}
.estate-sla-cell:last-child { border-right: none; }
.estate-sla-num {
font-family: var(--display);
font-weight: 400;
font-size: 44px;
color: var(--gold-deep);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.01em;
}
.estate-sla-num small {
font-size: var(--text-base);
font-weight: 400;
color: rgba(8, 25, 14, 0.62);
margin-left: 4px;
letter-spacing: 0;
}
.estate-sla-label {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(8, 25, 14, 0.66);
font-weight: 500;
}
/* Concierge note */
.estate-note {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 40px;
align-items: start;
padding-top: 16px;
}
.estate-note-label {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
margin-bottom: 18px;
display: block;
}
.estate-note-title {
font-family: var(--display);
font-weight: 500;
font-size: 22px;
color: var(--green-deep);
letter-spacing: -0.01em;
line-height: 1.15;
}
.estate-note-title em {
color: var(--gold-deep);
font-weight: 400;
}
.estate-note-body {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(8, 25, 14, 0.78);
font-weight: 300;
}
.estate-note-body p + p { margin-top: 16px; }
@media (max-width: 968px) {
.estate { padding: 40px 0 32px; }
.estate-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 36px; }
.estate-sla { grid-template-columns: 1fr 1fr; gap: 24px 0; padding: 24px 0; }
.estate-sla-cell { padding: 16px; border-right: 1px solid rgba(8,25,14,0.16); border-bottom: 1px solid rgba(8,25,14,0.16); }
.estate-sla-cell:nth-child(2n) { border-right: none; }
.estate-sla-cell:nth-last-child(-n+2) { border-bottom: none; }
.estate-note { grid-template-columns: 1fr; gap: 24px; }
.estate-note-title { font-size: 20px; }
}
/* ===================================================================
TENANTS — operating partners credibility band
=================================================================== */
.tenants {
background: var(--brand-primary);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
}
.tenants-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: center;
}
.tenants-content h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 0.96;
margin: 26px 0 28px;
letter-spacing: -0.018em;
}
.tenants-content p {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.74);
max-width: 480px;
}
.tenants-list {
border-top: 1px solid var(--rule);
}
.tenant-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 22px 0;
border-bottom: 1px solid var(--rule);
transition: padding-left 0.3s, border-color 0.3s;
}
.tenant-row:hover { padding-left: 12px; border-bottom-color: var(--gold-deep); }
.tenant-name {
font-family: var(--display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 32px);
letter-spacing: -0.005em;
color: var(--brand-ink);
}
.tenant-where {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
}
@media (max-width: 968px) {
.tenants-grid { grid-template-columns: 1fr; gap: 36px; }
}
/* ===================================================================
MAGAZINE SPREAD — image + text editorial pattern
Alternates image position per row. Used on estate pillars.
=================================================================== */
.magazine-spread-set { display: flex; flex-direction: column; }
.magazine-spread {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
padding: 40px 0;
align-items: center;
border-bottom: 1px solid rgba(8, 25, 14, 0.14);
}
.magazine-spread-set > .magazine-spread:first-child { padding-top: 16px; }
.magazine-spread-set > .magazine-spread:last-child { border-bottom: none; }
.magazine-spread__media {
position: relative;
aspect-ratio: 5 / 4;
background-size: cover;
background-position: center;
overflow: hidden;
}
.magazine-spread__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 65%, rgba(8, 25, 14, 0.32));
pointer-events: none;
}
.magazine-spread__media-tag {
position: absolute;
bottom: 18px;
left: 20px;
z-index: 2;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
padding: 6px 10px;
background: #2a4d38;
border: 1px solid rgba(217, 182, 115, 0.4);
backdrop-filter: blur(8px);
}
.magazine-spread__content {
display: grid;
grid-template-columns: 64px 1fr;
gap: 28px;
align-items: start;
}
.magazine-spread__index {
font-family: var(--display);
font-weight: 400;
font-size: 24px;
line-height: 1;
color: var(--brand-ink-soft);
letter-spacing: -0.01em;
opacity: 0.55;
}
.magazine-spread__icon {
width: 22px !important;
height: 22px !important;
color: var(--brand-ink-soft);
margin-bottom: 20px;
}
.magazine-spread__title {
font-family: var(--display);
font-weight: 500;
font-size: clamp(26px, 2.4vw, 34px);
line-height: 1.16;
letter-spacing: -0.01em;
color: var(--brand-ink);
margin: 0 0 18px;
}
.magazine-spread__title em {
font-style: normal;
color: var(--brand-ink-soft);
}
.magazine-spread__body {
font-family: var(--body);
font-weight: 300;
font-size: 16px;
line-height: 1.78;
color: rgba(8, 25, 14, 0.74);
margin: 0;
max-width: 52ch;
}
/* Alternate image side */
.magazine-spread--reverse .magazine-spread__media { order: 2; }
@media (max-width: 968px) {
.magazine-spread { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
.magazine-spread--reverse .magazine-spread__media { order: 0; }
.magazine-spread__content { grid-template-columns: 48px 1fr; gap: 18px; }
.magazine-spread__index { font-size: 20px; }
}
/* ===================================================================
PLACE CARD — image-headed location card
Used on foundation Places section.
=================================================================== */
.place-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.place-card {
display: flex;
flex-direction: column;
border: 1px solid rgba(8, 25, 14, 0.10);
background: #FFFFFF;
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}
.place-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(8, 25, 14, 0.14);
border-color: rgba(122, 99, 9, 0.35);
background: #FFFFFF;
}
.place-card__image {
position: relative;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
}
.place-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8, 25, 14, 0.55));
pointer-events: none;
}
.place-card__tag {
position: absolute;
bottom: 14px;
left: 16px;
z-index: 2;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
padding: 5px 9px;
background: rgba(8, 25, 14, 0.6);
border: 1px solid rgba(217, 182, 115, 0.5);
backdrop-filter: blur(6px);
}
.place-card__content { padding: 24px 22px 26px; }
.place-card__title {
font-family: var(--display);
font-weight: 500;
font-size: 22px;
line-height: 1.22;
letter-spacing: -0.008em;
color: var(--green-deep);
margin: 0 0 14px;
}
.place-card__body {
font-family: var(--body);
font-weight: 300;
font-size: 15px;
line-height: 1.7;
color: rgba(8, 25, 14, 0.74);
margin: 0;
}
@media (max-width: 968px) {
.place-card-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 568px) {
.place-card-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
ABOUT — cream variants for ab-origin, ab-verticals, ab-geo.
Color-only overrides (layout stays the same).
=================================================================== */
.ab-origin.cream { background: var(--sand); color: var(--green-deep); }
.ab-origin.cream .ab-section-mark { color: rgba(8, 25, 14, 0.65); }
.ab-origin.cream .ab-section-mark .ab-section-num,
.ab-origin.cream .ab-section-mark .ab-section-name { color: var(--brand-ink-soft); }
.ab-origin.cream .ab-section-mark .ab-section-rule { background: var(--gold-deep); }
.ab-origin.cream .ab-origin-title { color: var(--green-deep); }
.ab-origin.cream .ab-origin-title .it { color: var(--brand-ink-soft); }
.ab-origin.cream .ab-origin-prose p { color: rgba(8, 25, 14, 0.74); }
.ab-origin.cream .ab-figure dt { color: rgba(8, 25, 14, 0.55); }
.ab-origin.cream .ab-figure-num { color: var(--brand-ink); }
.ab-origin.cream .ab-figure-foot { color: rgba(8, 25, 14, 0.5); }
.ab-origin.cream .ab-origin-figures { border-color: rgba(8, 25, 14, 0.18); }
.ab-origin.cream::before { display: none; }
/* Refined pull quote — gold left rule + italic emphasis (cream surface) */
.ab-origin.cream .ab-origin-pull {
font-family: var(--display);
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 1.8vw, 26px);
line-height: 1.45;
color: var(--gold-deep);
border-left: 2px solid var(--gold-deep);
padding: 6px 0 6px 22px;
margin: 0 0 32px;
letter-spacing: -0.004em;
max-width: 56ch;
}
/* Tall image column — sits in the right grid cell, fills height */
.ab-origin-image {
position: relative;
margin: 0;
min-height: 480px;
overflow: hidden;
border: 1px solid rgba(8, 25, 14, 0.14);
background: var(--green-mid);
align-self: stretch;
}
.ab-origin-image__media {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.95) contrast(1.04);
}
.ab-origin-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(8, 25, 14, 0.35) 0%, transparent 30%, transparent 65%, rgba(8, 25, 14, 0.62) 100%);
pointer-events: none;
}
.ab-origin-image__year {
position: absolute;
top: 24px;
left: 26px;
z-index: 2;
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 3.4vw, 52px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--brand-cream);
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
}
.ab-origin-image__year-tag {
display: block;
font-family: var(--body);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-accent-warm);
margin-bottom: 8px;
opacity: 0.95;
}
.ab-origin-image__caption {
position: absolute;
bottom: 22px;
left: 26px;
right: 26px;
z-index: 2;
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.26em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
padding: 6px 12px;
background: rgba(8, 25, 14, 0.6);
border: 1px solid rgba(217, 182, 115, 0.5);
backdrop-filter: blur(8px);
width: fit-content;
}
.ab-origin.cream .ab-origin-figures {
margin-top: 32px;
padding-top: 40px;
border-top: 1px solid rgba(8, 25, 14, 0.18);
}
@media (max-width: 968px) {
.ab-origin-grid { grid-template-columns: 1fr; gap: 36px; }
.ab-origin-image { min-height: 360px; aspect-ratio: 4 / 3; }
}
@media (max-width: 568px) {
.ab-origin-image { min-height: 280px; aspect-ratio: unset; }
.ab-origin-image__year { font-size: 40px; top: 16px; left: 18px; }
.ab-origin-image__caption { bottom: 14px; left: 18px; }
}
.ab-verticals.cream { background: var(--sand); color: var(--green-deep); }
.ab-verticals.cream .ab-section-mark { color: rgba(8, 25, 14, 0.65); }
.ab-verticals.cream .ab-section-mark .ab-section-num,
.ab-verticals.cream .ab-section-mark .ab-section-name { color: var(--brand-ink-soft); }
.ab-verticals.cream .ab-section-mark .ab-section-rule { background: var(--gold-deep); }
.ab-verticals.cream .ab-verticals-headline h2 { color: var(--green-deep); }
.ab-verticals.cream .ab-verticals-headline h2 .it { color: var(--brand-ink-soft); }
.ab-verticals.cream .ab-verticals-headline p { color: rgba(8, 25, 14, 0.74); }
.ab-geo.cream { background: var(--sand); color: var(--green-deep); }
.ab-geo.cream .ab-section-mark { color: rgba(8, 25, 14, 0.65); }
.ab-geo.cream .ab-section-mark .ab-section-num,
.ab-geo.cream .ab-section-mark .ab-section-name { color: var(--brand-ink-soft); }
.ab-geo.cream .ab-section-mark .ab-section-rule { background: var(--gold-deep); }
.ab-geo.cream .ab-geo-headline h2 { color: var(--green-deep); }
.ab-geo.cream .ab-geo-headline h2 .it { color: var(--brand-ink-soft); }
.ab-geo.cream .ab-geo-headline p { color: rgba(8, 25, 14, 0.74); }
.ab-geo.cream .ab-geo-col-head {
color: var(--gold-deep);
border-bottom-color: rgba(8, 25, 14, 0.22);
}
.ab-geo.cream .ab-geo-list li { border-bottom-color: rgba(8, 25, 14, 0.14); }
.ab-geo.cream .ab-geo-city { color: var(--green-deep); }
.ab-geo.cream .ab-geo-flag { color: rgba(8, 25, 14, 0.55); }
.ab-geo.cream .ab-geo-note {
background: rgba(8, 25, 14, 0.04);
border-left-color: var(--gold-deep);
}
.ab-geo.cream .ab-geo-note-label { color: var(--gold-deep); }
.ab-geo.cream .ab-geo-note p { color: rgba(8, 25, 14, 0.74); }
.ab-geo.cream .ab-geo-note-link { color: var(--gold-deep); }
/* ===================================================================
ABOUT — vertical project card (3-up, image-headed)
Used inside .ab-verticals on the About page.
=================================================================== */
.ab-vertical-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 36px;
}
.ab-vertical-card {
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 1px solid rgba(8, 25, 14, 0.10);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}
.ab-vertical-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(8, 25, 14, 0.14);
border-color: rgba(122, 99, 9, 0.35);
background: #FFFFFF;
}
.ab-vertical-card__image {
position: relative;
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
}
.ab-vertical-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8, 25, 14, 0.55));
pointer-events: none;
}
.ab-vertical-card__tag {
position: absolute;
bottom: 16px;
left: 18px;
z-index: 2;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
padding: 5px 10px;
background: #2a4d38;
border: 1px solid rgba(217, 182, 115, 0.5);
backdrop-filter: blur(6px);
}
.ab-vertical-card__icon {
position: absolute;
top: 16px;
right: 18px;
z-index: 2;
width: 28px !important;
height: 28px !important;
color: var(--brand-accent-warm);
padding: 6px;
background: rgba(8, 25, 14, 0.55);
border: 1px solid rgba(217, 182, 115, 0.5);
backdrop-filter: blur(6px);
}
.ab-vertical-card__body {
padding: 26px 24px 24px;
display: flex;
flex-direction: column;
gap: 14px;
flex: 1;
}
.ab-vertical-card__title {
font-family: var(--display);
font-weight: 500;
font-size: 22px;
line-height: 1.22;
color: var(--green-deep);
margin: 0;
}
.ab-vertical-card__title em {
font-style: normal;
color: var(--gold-deep);
display: block;
font-size: 0.7em;
margin-top: 4px;
letter-spacing: 0;
}
.ab-vertical-card__body p {
font-family: var(--body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.7;
color: rgba(8, 25, 14, 0.74);
margin: 0;
flex: 1;
}
.ab-vertical-card__anchor {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-deep);
margin-top: 6px;
padding-top: 16px;
border-top: 1px solid rgba(8, 25, 14, 0.14);
transition: color 0.3s;
}
.ab-vertical-card__anchor:hover { color: var(--green-deep); }
.ab-vertical-card__anchor [data-lucide] { width: 14px; height: 14px; }
@media (max-width: 968px) {
.ab-vertical-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 568px) {
.ab-vertical-card-grid { grid-template-columns: 1fr; }
}
/* ===================================================================
ABOUT — founder magazine spread (portrait + content per founder)
Replaces dense ab-founder card. Each founder is a horizontal spread.
=================================================================== */
.ab-founder-spread-set { display: flex; flex-direction: column; gap: 0; margin-top: 32px; }
.ab-founder-spread {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 36px;
padding: 40px 0;
align-items: center;
border-bottom: 1px solid rgba(14, 14, 14, 0.16);
}
.ab-founder-spread-set > .ab-founder-spread:last-child { border-bottom: none; }
.ab-founder-spread--reverse .ab-founder-portrait-wrap { order: 2; }
.ab-founder-portrait-wrap {
position: relative;
width: fit-content;
margin: auto;
}
.ab-founder-portrait-wrap img {
height: 493px;
object-fit: cover;
display: block;
filter: saturate(0.9) contrast(1.05);
}
.ab-founder-portrait-wrap::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8, 25, 14, 0.45));
pointer-events: none;
}
.ab-founder-spread__monogram {
position: absolute;
bottom: 18px; left: 22px;
z-index: 2;
font-family: var(--display);
font-weight: 500;
font-size: 22px;
letter-spacing: 0.08em;
color: var(--brand-accent-warm);
padding: 6px 12px;
background: rgba(8, 25, 14, 0.6);
border: 1px solid rgba(122, 99, 9, 0.42);
backdrop-filter: blur(8px);
}
.ab-founder-spread__content { display: flex; flex-direction: column; gap: 18px; }
.ab-founder-spread__eyebrow {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-deep);
}
.ab-founder-spread__name {
font-family: var(--display);
font-weight: 400;
font-size: clamp(34px, 3.6vw, 52px);
line-height: 1;
letter-spacing: -0.018em;
color: var(--brand-ink);
margin: 4px 0 0;
}
.ab-founder-spread__quote {
font-family: var(--display);
font-style: italic;
font-size: 19px;
line-height: 1.5;
color: var(--gold-deep);
border-left: 2px solid var(--gold);
padding: 4px 0 4px 18px;
margin: 12px 0 0;
}
.ab-founder-spread__quote .it { font-style: normal; color: var(--brand-ink); }
.ab-founder-spread__bio {
font-family: var(--body);
font-weight: 300;
font-size: 15px;
line-height: 1.72;
color: rgba(14, 14, 14, 0.78);
margin: 0;
}
.ab-founder-spread__specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px 36px;
margin: 10px 0 0;
padding-top: 22px;
border-top: 1px solid rgba(14, 14, 14, 0.16);
}
.ab-founder-spread__specs > div { display: flex; flex-direction: column; gap: 4px; }
.ab-founder-spread__specs dt {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: rgba(122, 99, 9, 0.7);
}
.ab-founder-spread__specs dd {
font-family: var(--body);
font-size: 13px;
line-height: 1.5;
color: var(--brand-ink);
margin: 0;
}
@media (max-width: 968px) {
.ab-founder-spread { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
.ab-founder-spread--reverse .ab-founder-portrait-wrap { order: 0; }
.ab-founder-spread__specs { grid-template-columns: 1fr; gap: 14px; }
}
/* ===================================================================
ABOUT — ethos pillars: image-led 3-card grid (dark surface)
=================================================================== */
.ab-ethos-pillars-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 36px;
}
.ab-ethos-pillar {
position: relative;
display: flex;
flex-direction: column;
background: rgba(244, 236, 217, 0.06);
border: 1px solid rgba(244, 236, 217, 0.14);
overflow: hidden;
transition: transform 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.ab-ethos-pillar:hover {
transform: translateY(-3px);
border-color: var(--gold);
background: rgba(250, 203, 63, 0.06);
}
.ab-ethos-pillar__image {
position: relative;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
}
.ab-ethos-pillar__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(8, 25, 14, 0.75));
pointer-events: none;
}
.ab-ethos-pillar__icon {
position: absolute;
bottom: 14px; left: 16px;
z-index: 2;
width: 32px;
height: 32px;
padding: 7px;
background: rgba(8, 25, 14, 0.65);
border: 1px solid rgba(122, 99, 9, 0.4);
color: var(--brand-accent-warm);
backdrop-filter: blur(8px);
}
.ab-ethos-pillar__body { padding: 24px 22px 26px; }
.ab-ethos-pillar__title {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.22;
letter-spacing: -0.005em;
color: var(--brand-cream);
margin: 0 0 12px;
}
.ab-ethos-pillar__body p {
font-family: var(--body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.65;
color: rgba(244, 236, 217, 0.78);
margin: 0;
}
@media (max-width: 968px) {
.ab-ethos-pillars-grid { grid-template-columns: 1fr; gap: 16px; }
}
/* ===================================================================
EDITORIAL PAGE PRIMITIVES — used by foundation / estate / nri
Bigger hierarchy, asymmetric splits, generous spacing.
=================================================================== */
/* Asymmetric 2-col head: chapter+heading left, intro paragraph right */
.editorial-head {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 36px;
align-items: end;
margin-bottom: 36px;
}
.editorial-head__title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1;
letter-spacing: -0.022em;
margin: 22px 0 0;
color: var(--green-deep);
}
.editorial-head__title em,
.editorial-head__title .it {
font-style: normal;
color: var(--brand-ink-soft);
}
.editorial-head__lede {
font-family: var(--body);
font-weight: 300;
font-size: 17px;
line-height: 1.72;
color: rgba(8, 25, 14, 0.72);
border-left: 1px solid rgba(8, 25, 14, 0.2);
padding-left: 28px;
margin: 0;
align-self: end;
padding-bottom: 6px;
}
.editorial-head--dark .editorial-head__title { color: var(--brand-ink); }
.editorial-head--dark .editorial-head__title em,
.editorial-head--dark .editorial-head__title .it { color: var(--brand-ink-soft); }
.editorial-head--dark .editorial-head__lede {
color: rgba(14, 14, 14, 0.72);
border-left-color: rgba(14, 14, 14, 0.22);
}
@media (max-width: 968px) {
.editorial-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
.editorial-head__lede { border-left: none; padding-left: 0; padding-bottom: 0; }
}
/* Stat row — big editorial numbers (used on foundation Numbers, estate SLA) */
.editorial-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid rgba(8, 25, 14, 0.22);
border-bottom: 1px solid rgba(8, 25, 14, 0.22);
}
.editorial-stats__cell {
padding: 48px 32px 44px;
border-right: 1px solid rgba(8, 25, 14, 0.14);
position: relative;
display: flex;
flex-direction: column;
gap: 22px;
}
.editorial-stats__cell:last-child { border-right: none; }
.editorial-stats__index {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-ink-soft);
}
.editorial-stats__num {
font-family: var(--display);
font-weight: 500;
font-size: clamp(48px, 5vw, 78px);
line-height: 1;
letter-spacing: -0.022em;
color: var(--brand-ink);
}
.editorial-stats__num small {
font-size: 0.42em;
margin-left: 4px;
color: rgba(8, 25, 14, 0.55);
font-weight: 400;
}
.editorial-stats__label {
font-family: var(--body);
font-weight: 500;
font-size: 13px;
line-height: 1.5;
color: rgba(8, 25, 14, 0.65);
letter-spacing: 0.01em;
}
.editorial-stats--dark { border-color: rgba(14, 14, 14, 0.22); }
.editorial-stats--dark .editorial-stats__cell { border-right-color: rgba(14, 14, 14, 0.14); }
.editorial-stats--dark .editorial-stats__index { color: var(--brand-ink-soft); }
.editorial-stats--dark .editorial-stats__num { color: var(--brand-ink); }
.editorial-stats--dark .editorial-stats__num small { color: rgba(14, 14, 14, 0.55); }
.editorial-stats--dark .editorial-stats__label { color: rgba(14, 14, 14, 0.6); }
@media (max-width: 768px) {
.editorial-stats { grid-template-columns: 1fr 1fr; }
.editorial-stats__cell { padding: 32px 20px 28px; border-bottom: 1px solid rgba(8, 25, 14, 0.14); }
.editorial-stats__cell:nth-child(2n) { border-right: none; }
.editorial-stats__cell:nth-last-child(-n+2) { border-bottom: none; }
.editorial-stats--dark .editorial-stats__cell { border-bottom-color: rgba(14, 14, 14, 0.14); }
}
/* Dramatic pull quote — big gold marker + body */
.editorial-pull-quote {
display: grid;
grid-template-columns: 120px 1fr;
gap: 36px;
align-items: start;
}
.editorial-pull-quote__mark {
font-family: var(--display);
font-weight: 400;
font-size: 200px;
line-height: 0.6;
color: var(--gold-deep);
opacity: 0.7;
margin: -20px 0 0;
}
.editorial-pull-quote__body {
font-family: var(--display);
font-weight: 400;
font-size: clamp(24px, 2.6vw, 38px);
line-height: 1.32;
color: var(--green-deep);
letter-spacing: -0.012em;
margin: 0;
max-width: 920px;
}
.editorial-pull-quote__body .it,
.editorial-pull-quote__body em {
font-style: normal;
color: var(--gold-deep);
}
@media (max-width: 768px) {
.editorial-pull-quote { grid-template-columns: 1fr; gap: 8px; padding: 36px 0; }
.editorial-pull-quote__mark { font-size: 120px; }
}
/* Place / location card — used on foundation Places */
.editorial-place {
position: relative;
padding: 36px 0 0;
border-top: 2px solid var(--gold-deep);
}
.editorial-place__index {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-deep);
display: block;
margin-bottom: 22px;
}
.editorial-place__title {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.18;
color: var(--green-deep);
letter-spacing: -0.008em;
margin: 0 0 18px;
}
.editorial-place__body {
font-family: var(--body);
font-weight: 300;
font-size: 15.5px;
line-height: 1.72;
color: rgba(8, 25, 14, 0.74);
margin: 0;
}
/* Side-by-side note (asymmetric editorial spread) */
.editorial-note {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
align-items: start;
padding: clamp(36px, 5vw, 64px);
margin-top: 44px;
background: #08190E;
color: var(--brand-cream);
}
.editorial-note__label {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold);
display: block;
margin-bottom: 18px;
}
.editorial-note__title {
font-family: var(--display);
font-weight: 500;
font-size: clamp(26px, 2.4vw, 34px);
line-height: 1.18;
color: var(--brand-cream);
letter-spacing: -0.012em;
margin: 0;
}
.editorial-note__title em {
font-style: normal;
color: var(--brand-accent);
font-weight: 400;
}
.editorial-note__body {
font-family: var(--body);
font-weight: 300;
font-size: 16px;
line-height: 1.78;
color: rgba(244, 236, 217, 0.82);
}
.editorial-note__body p + p { margin-top: 18px; }
@media (max-width: 968px) {
.editorial-note { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px; margin-top: 32px; }
}
/* International desk card — bigger, more visual (NRI page) */
.desk-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid rgba(8, 25, 14, 0.18);
border-left: 1px solid rgba(8, 25, 14, 0.18);
margin-top: 32px;
}
.desk-card {
padding: 40px 32px;
background: transparent;
display: flex;
flex-direction: column;
gap: 16px;
border-right: 1px solid rgba(8, 25, 14, 0.18);
border-bottom: 1px solid rgba(8, 25, 14, 0.18);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.desk-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 48px rgba(8, 25, 14, 0.06);
}
.desk-card__flag-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.desk-card__flag-img {
width: clamp(48px, 4.6vw, 64px);
height: auto;
aspect-ratio: 3 / 2;
display: block;
object-fit: cover;
border: 1px solid rgba(8, 25, 14, 0.14);
border-radius: 3px;
box-shadow: 0 3px 10px rgba(8, 25, 14, 0.12);
}
.desk-card__role {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
font-weight: 600;
color: rgba(8, 25, 14, 0.45);
}
.desk-card__name {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.008em;
color: var(--green-deep);
}
.desk-card__where {
font-family: var(--body);
font-size: 12.5px;
line-height: 1.55;
color: rgba(8, 25, 14, 0.55);
}
.desk-card__contact {
font-family: var(--body);
font-size: 13px;
line-height: 1.65;
color: rgba(8, 25, 14, 0.75);
padding-top: 16px;
border-top: 1px solid rgba(8, 25, 14, 0.12);
margin-top: auto;
}
.desk-card__contact a:hover { color: var(--gold-deep); }
@media (max-width: 968px) {
.desk-grid { grid-template-columns: 1fr; border-left: none; }
.desk-card { border-right: none; }
}
/* Sharper NRI download split */
.dl-split {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 36px;
align-items: start;
padding: 40px 0 0;
border-top: 1px solid rgba(8, 25, 14, 0.18);
margin-top: 36px;
}
@media (max-width: 968px) {
.dl-split { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; margin-top: 28px; }
}
/* ===================================================================
EDITORIAL BLOCK — shared minimalist numbered-block pattern.
Used on foundation.html, estate.html, nri.html.
No boxes, no shadows. Hairline rule + index + content.
Cream context by default; --dark variant for dark bg.
=================================================================== */
.editorial-block-set {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 96px;
border-top: 1px solid rgba(8, 25, 14, 0.18);
margin-top: 16px;
}
.editorial-block-set--single { grid-template-columns: 1fr; }
.editorial-block {
display: grid;
grid-template-columns: 64px 1fr;
gap: 24px;
padding: 28px 0;
border-bottom: 1px solid rgba(8, 25, 14, 0.12);
align-items: start;
}
.editorial-block-set > .editorial-block:nth-last-child(-n+2) {
border-bottom: none;
}
.editorial-block-set--single > .editorial-block:last-child {
border-bottom: none;
}
.editorial-block-index {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 46px);
line-height: 1;
color: var(--brand-ink-soft);
letter-spacing: -0.03em;
opacity: 0.55;
}
.editorial-block-icon {
width: 22px !important;
height: 22px !important;
color: var(--brand-ink-soft);
margin-bottom: 18px;
}
.editorial-block-title {
font-family: var(--display);
font-weight: 500;
font-size: 22px;
line-height: 1.22;
color: var(--green-deep);
letter-spacing: -0.008em;
margin: 0 0 14px;
}
.editorial-block-title em {
font-style: normal;
color: var(--brand-ink-soft);
}
.editorial-block-body {
font-family: var(--body);
font-weight: 300;
font-size: 15.5px;
line-height: 1.72;
color: rgba(8, 25, 14, 0.74);
margin: 0;
max-width: 56ch;
}
/* Dark surface variant — same layout, light text */
/* --dark modifier — used inside dark-green editorial sections (e.g. nri "Frame", journal articles) */
.editorial-block-set--dark { border-top-color: rgba(244, 236, 217, 0.22); }
.editorial-block-set--dark .editorial-block { border-bottom-color: rgba(244, 236, 217, 0.14); }
.editorial-block-set--dark .editorial-block-index { color: var(--gold); opacity: 0.7; }
.editorial-block-set--dark .editorial-block-icon { color: var(--gold); }
.editorial-block-set--dark .editorial-block-title { color: var(--brand-cream); }
.editorial-block-set--dark .editorial-block-title em { color: var(--gold); }
.editorial-block-set--dark .editorial-block-body { color: rgba(244, 236, 217, 0.78); }
@media (max-width: 768px) {
.editorial-block-set { grid-template-columns: 1fr; gap: 0; }
.editorial-block-set > .editorial-block:nth-last-child(-n+2) {
border-bottom: 1px solid rgba(8, 25, 14, 0.12);
}
.editorial-block-set > .editorial-block:last-child { border-bottom: none; }
.editorial-block-set--dark > .editorial-block:nth-last-child(-n+2) {
border-bottom-color: rgba(14, 14, 14, 0.12);
}
.editorial-block { grid-template-columns: 44px 1fr; gap: 18px; padding: 32px 0; }
.editorial-block-index { font-size: 22px; }
}
/* ===================================================================
SUSTAINABILITY — eco-luxury, the brand's core differentiator
=================================================================== */
.sustain {
background: var(--brand-primary);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
position: relative;
overflow: hidden;
}
.sus-head {
max-width: 880px;
margin-bottom: var(--space-3xl);
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.sus-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 4.2vw, 58px);
line-height: 0.94;
margin-top: 28px;
letter-spacing: -0.018em;
}
.sus-head p {
font-size: var(--text-base);
line-height: 1.72;
color: rgba(14, 14, 14, 0.78);
border-left: 1px solid rgba(14, 14, 14, 0.22);
padding-left: 28px;
align-self: flex-start;
}
/* 4-pillar card grid */
.sus-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
z-index: 1;
}
.sus-pillar {
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 1px solid rgba(14, 14, 14, 0.10);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease, background 0.3s ease;
}
.sus-pillar:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(8, 25, 14, 0.12);
border-color: rgba(122, 99, 9, 0.35);
background: #FFFFFF;
}
.sus-pillar-image {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
}
.sus-pillar-image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(8, 25, 14, 0.55));
pointer-events: none;
}
.sus-pillar-icon-overlay {
position: absolute;
bottom: 14px;
left: 16px;
z-index: 2;
width: 32px;
height: 32px;
padding: 7px;
background: rgba(8, 25, 14, 0.65);
border: 1px solid rgba(122, 99, 9, 0.45);
color: var(--brand-accent-warm);
backdrop-filter: blur(8px);
}
.sus-pillar-body {
padding: 24px 22px 26px;
display: flex;
flex-direction: column;
flex: 1;
}
.sus-pillar-body h3 {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.22;
letter-spacing: -0.008em;
margin: 0 0 12px;
color: var(--brand-ink);
}
.sus-pillar-body h3 em {
font-style: normal;
color: var(--brand-ink-soft);
display: block;
}
.sus-pillar-body p {
font-family: var(--body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.65;
color: rgba(14, 14, 14, 0.78);
margin: 0;
}
/* Credentials — heading + 4 badge cards */
.sus-credentials {
margin-top: 44px;
padding-top: 36px;
border-top: 1px solid rgba(14, 14, 14, 0.18);
position: relative;
z-index: 1;
}
.sus-credentials-head {
text-align: center;
margin-bottom: 28px;
}
.sus-credentials-head .label {
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: rgba(14, 14, 14, 0.7);
}
.sus-cred-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.sus-cred-card {
padding: 22px 18px;
text-align: center;
background: rgba(14, 14, 14, 0.04);
border: 1px solid rgba(14, 14, 14, 0.16);
transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}
.sus-cred-card:hover {
border-color: rgba(122, 99, 9, 0.45);
background: rgba(122, 99, 9, 0.06);
transform: translateY(-2px);
}
.sus-cred-logo {
display: block;
max-height: 48px;
max-width: 80%;
width: auto;
height: auto;
object-fit: contain;
margin: 0 auto 14px;
transition: opacity 0.3s ease, transform 0.4s ease;
}
.sus-cred-card:hover .sus-cred-logo {
transform: translateY(-2px);
}
.sus-cred-key {
display: block;
font-family: var(--display);
font-weight: 500;
font-size: 24px;
letter-spacing: -0.01em;
line-height: 1;
margin-bottom: 8px;
color: var(--brand-ink);
}
.sus-cred-name {
display: block;
font-family: var(--body);
font-weight: 600;
font-size: 9.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--brand-ink-soft);
line-height: 1.4;
}
/* Cream variant — color-only overrides (layout is identical) */
.sustain.cream { background: var(--sand); color: var(--green-deep); }
.sustain.cream .sus-head h2 { color: var(--green-deep); }
.sustain.cream .sus-head h2 .it { color: var(--brand-ink-soft); }
.sustain.cream .sus-head p { color: rgba(8, 25, 14, 0.74); border-left-color: rgba(8, 25, 14, 0.22); }
.sustain.cream .sus-pillar { background: #FFFFFF; border-color: rgba(8, 25, 14, 0.10); }
.sustain.cream .sus-pillar:hover { box-shadow: 0 18px 40px rgba(8, 25, 14, 0.10); border-color: rgba(122, 99, 9, 0.35); background: #FFFFFF; }
.sustain.cream .sus-pillar-body h3 { color: var(--green-deep); }
.sustain.cream .sus-pillar-body h3 em { color: var(--brand-ink-soft); }
.sustain.cream .sus-pillar-body p { color: rgba(8, 25, 14, 0.74); }
.sustain.cream .sus-credentials { border-top-color: rgba(8, 25, 14, 0.18); }
.sustain.cream .sus-credentials-head .label { color: rgba(8, 25, 14, 0.65); }
.sustain.cream .sus-cred-card { background: #FFFFFF; border-color: rgba(8, 25, 14, 0.10); }
.sustain.cream .sus-cred-card:hover { background: #FFFFFF; border-color: rgba(122, 99, 9, 0.35); }
.sustain.cream .sus-cred-key { color: var(--green-deep); }
.sustain.cream .sus-cred-name { color: var(--brand-ink-soft); }
.sustain.cream .chapter,
.sustain.cream .chapter span,
.sustain.cream .chapter-icon { color: var(--brand-ink-soft); }
.sustain.cream .chapter-rule { background: var(--brand-ink-soft); }
.sustain.cream .eyebrow { color: var(--brand-ink-soft); }
/* ============================================================
CUMULATIVE NOTE — STAT CELLS WITH ICONS
============================================================ */
.found-numbers--iconed .found-num-cell {
padding-top: 8px;
}
.found-num-icon {
display: inline-flex !important;
width: 26px !important;
height: 26px !important;
color: var(--gold-deep);
margin-bottom: 18px;
stroke-width: 1.4;
}
/* ============================================================
SNAPSHOT IMAGE — FRAMED WITH CAPTION
============================================================ */
.snap-image--framed {
position: relative;
box-shadow: 0 28px 64px rgba(8, 25, 14, 0.16);
overflow: hidden;
}
.snap-image--framed::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(8, 25, 14, 0.55));
pointer-events: none;
}
.snap-image-caption {
position: absolute;
bottom: 20px; left: 22px; right: 22px;
z-index: 2;
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
text-shadow: 0 1px 6px rgba(8, 25, 14, 0.7);
}
@media (max-width: 968px) {
.sus-head p { border-left: none; padding: 0; }
.sus-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
.sus-pillar-image { aspect-ratio: 16 / 9; }
.sus-cred-list { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 568px) {
.sus-grid { grid-template-columns: 1fr; }
.sus-cred-list { grid-template-columns: 1fr; }
}
/* ===================================================================
ANIMATIONS / REVEALS
=================================================================== */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.45s cubic-bezier(0.2,0,0,1), transform 0.45s cubic-bezier(0.2,0,0,1); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.04s; }
.reveal.delay-2 { transition-delay: 0.08s; }
.reveal.delay-3 { transition-delay: 0.12s; }
.reveal.delay-4 { transition-delay: 0.16s; }
/* No-JS fallback */
.no-js .reveal { opacity: 1; transform: none; }
/* ===================================================================
V10 MULTI-PAGE SUPPLEMENTS
=================================================================== */
/* Active nav state */
.nav-link.active { color: var(--gold-deep); }
.nav-link.active::after { width: 100%; }
/* Page hero — slim banner used at top of inner pages */
/* Hidden SVG defs holder (gradients, symbols) */
.svg-defs { position: absolute; width: 0; height: 0; }
.page-hero {
position: relative;
background-color: var(--brand-primary);
background-image: linear-gradient(180deg, rgba(8,25,14,0.65), rgba(8,25,14,0.85)), var(--hero-bg, none);
background-size: cover;
background-position: center;
padding: 110px 0 60px;
border-bottom: 1px solid var(--rule);
}
.page-hero::after {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.35;
pointer-events: none;
mix-blend-mode: overlay;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero-inner { max-width: 920px; }
.page-hero h1 {
font-family: var(--display); font-weight: 400;
font-size: clamp(54px, 7.5vw, 116px);
line-height: 1.02;
margin: 36px 0 44px;
color: #fff;
letter-spacing: -0.022em;
}
.page-hero h1 .it { font-weight: 400; }
.page-hero h1 br { line-height: 1.1; }
.page-hero p {
font-size: 18px;
line-height: 1.7;
color: rgba(244, 236, 217, 0.82);
font-weight: 300;
max-width: 720px;
}
/* Home — Project tile cards (Vianaar pattern) */
.tile-grid-section {
background: var(--brand-primary);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
}
.tile-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: end;
margin-bottom: 32px;
}
.tile-head h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(32px, 4.2vw, 58px); line-height: 0.94;
margin: 26px 0 0; color: var(--brand-ink);
letter-spacing: -0.018em;
}
.tile-head h2 .it { color: var(--brand-ink-soft); font-weight: 400; }
.tile-head p {
padding-bottom: 8px;
font-size: var(--text-base); line-height: 1.7;
color: rgba(14, 14, 14, 0.72);
font-weight: 300;
}
.portfolio-bullets {
list-style: none;
padding: 0;
margin: 0 0 18px;
font-size: var(--text-base);
line-height: 1.7;
font-weight: 300;
}
.portfolio-bullets li {
position: relative;
padding-left: 22px;
margin-bottom: 10px;
}
.portfolio-bullets li::before {
content: '';
position: absolute;
left: 0;
top: 0.85em;
width: 12px;
height: 1px;
background: var(--gold-deep);
}
.portfolio-bullets-foot {
margin: 0;
font-style: italic;
padding-bottom: 8px;
}
.tile-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.tile {
background: rgba(14, 14, 14, 0.05);
border: 1px solid var(--rule);
position: relative;
overflow: hidden;
transition: border-color 0.4s ease, transform 0.4s ease;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
}
.tile:hover {
border-color: var(--gold-deep);
transform: translateY(-4px);
}
.tile-image {
aspect-ratio: 4 / 3;
background: var(--green-mid);
background-size: cover;
background-position: center;
position: relative;
}
.tile-image::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(8,25,14,0) 35%, rgba(8,25,14,0.55) 65%, rgba(8,25,14,0.92) 100%);
opacity: 1;
transition: opacity 0.3s ease;
}
.tile:hover .tile-image::after { opacity: 1; }
.tile-meta-row {
position: absolute; bottom: 18px; left: 20px; right: 20px;
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
z-index: 3;
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-ink);
font-weight: 500;
text-shadow: 0 1px 6px rgba(8,25,14,0.7);
}
.tile-status {
background: #2a4d38; color: #fff;
padding: 4px 10px;
letter-spacing: 0.28em;
}
.tile-body { padding: 28px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.tile-cat {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
margin-bottom: 14px;
}
.tile-name {
font-family: var(--display);
font-weight: 500;
font-size: 26px;
color: var(--brand-ink);
line-height: 1.12;
margin-bottom: 12px;
letter-spacing: -0.012em;
}
.tile-name .it-soft { color: rgba(14, 14, 14, 0.78); }
.tile-name .it { color: var(--brand-ink-soft); font-weight: 400; }
.tile-body p {
font-size: var(--text-md);
line-height: 1.65;
color: rgba(14, 14, 14, 0.85);
font-weight: 300;
margin-bottom: 24px;
}
.tile-link {
font-family: var(--body);
font-size: 11.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 10px;
}
/* (legacy hairline arrow rules removed — now using Lucide arrow-right SVG sized via [data-lucide]) */
/* Home — "Our Promise" 4-card strip (Vianaar pattern) */
.promise {
background: var(--sand);
color: var(--green-deep);
padding: var(--section-padding);
position: relative;
}
.promise::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.55; pointer-events: none;
}
.promise > .wrap { position: relative; }
.promise-head { text-align: center; max-width: 900px; margin: 0 auto 36px; }
.promise-head h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1;
margin: 14px 0 16px; color: var(--brand-ink);
letter-spacing: -0.014em;
}
.promise-head h2 .it { color: var(--brand-ink-soft); font-weight: 400; }
.promise-head p {
font-size: var(--text-base); line-height: 1.72;
color: rgba(8,25,14,0.74);
font-weight: 300;
margin: 0 auto;
}
/* 4-column architectural layout */
.promise-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(8, 25, 14, 0.18);
border-bottom: 1px solid rgba(8, 25, 14, 0.18);
margin-top: 32px;
}
.promise-card {
position: relative;
padding: 40px 32px 48px;
border-right: 1px solid rgba(8, 25, 14, 0.10);
border-top: 3px solid transparent;
background: transparent;
display: flex;
flex-direction: column;
transition: background 0.4s ease, border-top-color 0.4s ease, transform 0.4s ease;
}
.promise-card:last-child {
border-right: none;
}
.promise-card:hover {
background: rgba(250, 203, 63, 0.04);
border-top-color: var(--gold);
transform: translateY(-4px);
}
.promise-card:hover .promise-verify { color: var(--green-deep); }
.promise-card:hover .promise-index::after { width: 56px; }
.promise-asterisk {
color: var(--gold-deep);
font-size: 0.6em;
vertical-align: super;
margin-left: 4px;
font-weight: 500;
}
.promise-disclaimer {
margin-top: 28px;
text-align: center;
font-size: var(--text-sm);
color: rgba(8,25,14,0.55);
font-style: italic;
letter-spacing: 0.02em;
}
/* Editorial chapter number — top-left of each promise card. */
.promise-index {
font-family: var(--brand-font);
font-weight: 500;
font-size: clamp(28px, 3vw, 40px);
letter-spacing: -0.02em;
color: var(--gold);
line-height: 1;
display: block;
margin-bottom: 8px;
position: relative;
}
.promise-index::after {
content: '';
display: block;
width: 32px;
height: 1.5px;
background: var(--gold);
margin-top: 16px;
transition: width 0.4s ease;
}
.promise-card h4 {
font-family: var(--display); font-weight: 500;
font-size: clamp(20px, 1.8vw, 24px); line-height: 1.25;
color: var(--green-deep);
letter-spacing: -0.012em;
margin-bottom: 16px;
}
.promise-card h4 em { color: var(--brand-ink-soft); font-weight: 400; }
.promise-card p {
font-size: var(--text-sm); line-height: 1.6;
color: rgba(8,25,14,0.74);
font-weight: 300;
margin-bottom: 32px;
flex-grow: 1;
}
.promise-phone,
.promise-verify {
align-self: flex-start;
margin-top: auto;
}
@media (max-width: 568px) {
.promise-grid { margin-top: 16px; }
}
.promise-verify {
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
display: inline-block;
transition: color 0.4s ease;
}
.promise-phone {
display: block;
font-family: var(--display);
font-size: 22px;
font-weight: 500;
color: var(--green-deep);
letter-spacing: -0.01em;
margin-bottom: 14px;
}
/* Home — section snapshot bands (Sustainability/Estate/NRI hooks) */
.snapshot {
background: var(--brand-primary);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
position: relative;
}
.snapshot.sand {
background: var(--sand); color: var(--green-deep);
border-top-color: rgba(8,25,14,0.08);
}
.snap-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
}
.snap-image {
aspect-ratio: 5/4;
background: var(--green-mid);
background-size: cover;
background-position: center;
border: 1px solid var(--rule);
}
.snap-content h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(28px, 3.4vw, 50px); line-height: 0.96;
margin: 22px 0 28px;
letter-spacing: -0.018em;
color: var(--brand-ink);
}
.snapshot.sand .snap-content h2 { color: var(--green-deep); }
.snap-content h2 .it { color: var(--brand-ink-soft); font-weight: 400; }
.snapshot.sand .snap-content h2 .it { color: var(--brand-ink-soft); }
.snap-content p {
font-size: var(--text-md); line-height: 1.72;
color: rgba(14, 14, 14, 0.76);
font-weight: 300;
margin-bottom: 22px;
}
.snapshot.sand .snap-content p { color: rgba(8,25,14,0.86); }
.snap-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 28px 0;
border-top: 1px solid rgba(14, 14, 14, 0.18);
border-bottom: 1px solid rgba(14, 14, 14, 0.18);
margin: 24px 0 32px;
}
.snapshot.sand .snap-stats {
border-top-color: rgba(8,25,14,0.18);
border-bottom-color: rgba(8,25,14,0.18);
}
.snap-stat-num {
font-family: var(--display); font-weight: 500;
font-size: clamp(48px, 4.2vw, 60px); line-height: 1;
color: var(--brand-ink);
margin-bottom: 8px;
letter-spacing: -0.018em;
}
.snapshot.sand .snap-stat-num { color: var(--brand-ink); }
.snap-stat-label {
font-family: var(--body);
font-size: 9.5px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 500;
color: rgba(14, 14, 14, 0.55);
}
.snapshot.sand .snap-stat-label { color: rgba(8,25,14,0.55); }
@media (max-width: 968px) {
.tile-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
.tile-grid { grid-template-columns: 1fr; }
.promise-grid { grid-template-columns: 1fr 1fr; border-bottom: none; }
.promise-card { padding: 40px 32px; border-bottom: 1px solid rgba(8,25,14,0.10); }
.promise-card:nth-child(2n) { border-right: none; }
.snap-grid { grid-template-columns: 1fr; gap: 32px; }
.page-hero { padding: var(--section-padding); }
}
@media (max-width: 568px) {
.promise-grid { grid-template-columns: 1fr; border-bottom: none; }
.promise-card { padding: 40px 0; border-right: none; }
.promise-card:last-child { border-bottom: none; }
}
/* ===================================================================
V11 BOUTIQUE REFINEMENTS — cursor, authority, editorial detail
=================================================================== */
/* Custom cursor disabled — using OS default cursor site-wide */
.cursor-ring, .cursor-dot { display: none !important; }
/* Authority bar — under hero, Vianaar's "1000 homes" pattern */
.authority-bar {
background: url(../images/section-bg-shape-1.svg) no-repeat center;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: 60px 0;
background-size: cover;
background-attachment: fixed;
}
.authority-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.authority-cell {
padding: 0 32px;
border-right: 1px solid var(--brand-rule-light);
display: flex;
flex-direction: column;
gap: 22px;
}
.authority-cell:last-child { border-right: none; }
.authority-icon {
width: 26px !important;
height: 26px !important;
color: var(--brand-ink-soft);
stroke-width: 1.4;
opacity: 0.85;
}
.authority-num {
font-family: var(--display);
font-weight: 500;
font-size: 4rem;
color: var(--brand-ink);
line-height: 0.95;
margin-bottom: 22px;
letter-spacing: -0.02em;
}
.authority-num small {
font-size: 0.42em;
vertical-align: super;
margin-left: 4px;
color: var(--brand-ink-soft);
}
.authority-label {
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.65);
font-weight: 500;
display: block;
line-height: 1.55;
}
/* Editorial chapter mark — for boutique section openers */
.chapter {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 32px;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--brand-ink-soft);
font-weight: 600;
}
.chapter-num {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-sm);
letter-spacing: 0.04em;
color: var(--brand-ink-soft);
text-transform: none;
}
/* Hero contexts — dark photo overlay needs a brighter warm gold for visibility */
.page-hero .chapter,
.ab-hero .chapter,
.hero-boutique .chapter,
.page-hero .chapter-num,
.page-hero .chapter-icon,
.page-hero svg.chapter-icon {
color: var(--brand-accent-warm);
}
.page-hero .chapter-rule { background: var(--brand-accent-warm); }
/* Section-eyebrow icon — Lucide line-art only, all sections use the same
visual treatment so they read as a coordinated set. */
.chapter-icon,
svg.chapter-icon,
i.chapter-icon {
width: 18px !important;
height: 18px !important;
font-size: 18px !important;
line-height: 1 !important;
color: var(--brand-ink-soft);
stroke: currentColor;
stroke-width: 1.6;
flex-shrink: 0;
display: inline-block;
}
.cream .chapter-icon,
.cream svg.chapter-icon { color: var(--brand-ink-soft); }
/* Page-level pillar/section/vertical icons (still used: ab-section-num, ab-vertical-num) */
.ab-section-num, svg.ab-section-num,
.ab-vertical-num, svg.ab-vertical-num {
width: 30px !important;
height: 30px !important;
color: var(--gold-deep);
stroke: currentColor;
stroke-width: 1.5;
display: block;
margin-bottom: 22px;
}
.cream .ab-section-num, .cream svg.ab-section-num,
.cream .ab-vertical-num, .cream svg.ab-vertical-num { color: var(--brand-ink-soft) !important; }
.faq-cat-icon, svg.faq-cat-icon {
width: 16px !important;
height: 16px !important;
vertical-align: middle;
margin-right: 6px;
stroke-width: 1.5;
}
.chapter-rule {
flex: 0 0 24px;
height: 1.5px;
background: currentColor;
}
/* Editorial drop cap on opening paragraphs */
.drop-cap::first-letter {
font-family: var(--display);
font-weight: 400;
font-size: 5em;
float: left;
line-height: 0.85;
margin: 8px 16px 0 0;
color: var(--gold-deep);
}
/* Single elevated testimonial — boutique format */
.solo-testimonial {
background: var(--brand-primary);
padding: var(--section-padding-y-spacious) 0;
position: relative;
border-top: 1px solid var(--rule);
}
/* Cream variant — flips testimonial section to sand bg with dark text */
.solo-testimonial.cream { background: var(--sand) !important; color: var(--green-deep); }
.solo-testimonial.cream::before { opacity: 0.18; }
.solo-testimonial.cream .chapter,
.solo-testimonial.cream .chapter span,
.solo-testimonial.cream .chapter-icon { color: var(--brand-ink-soft); }
.solo-testimonial.cream .chapter-rule { background: var(--brand-ink-soft); }
.solo-testimonial.cream .solo-quote-mark { color: var(--gold-deep); opacity: 0.25; margin-bottom: 24px; }
.solo-testimonial.cream .solo-quote { color: var(--green-deep); font-weight: 300; }
.solo-testimonial.cream .solo-quote .it { color: var(--brand-ink-soft); font-style: italic; font-weight: 400; }
.solo-testimonial.cream .solo-attrib { border-top: none; margin-top: 16px; }
.solo-testimonial.cream .solo-attrib-name { color: var(--green-deep); font-weight: 600; letter-spacing: 0.02em; }
.solo-testimonial.cream .solo-attrib-role { color: rgba(8, 25, 14, 0.5); margin-top: 6px; display: inline-block; }
.solo-testimonial.cream .solo-disclosure { color: rgba(8, 25, 14, 0.42); }
/* Side-by-side testimonial cards on cream - Premium update */
.solo-testimonial.cream .testimonial-grid {
border-top: none;
padding-top: 36px;
gap: 28px;
}
.solo-testimonial.cream .t-quote {
background: #ffffff;
border: 1px solid rgba(8, 25, 14, 0.05);
border-left: 1px solid rgba(8, 25, 14, 0.05);
border-top: 4px solid var(--gold-deep);
border-radius: 12px;
box-shadow: 0 16px 40px rgba(8, 25, 14, 0.035);
padding: 44px 36px 36px;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.solo-testimonial.cream .t-quote::before {
color: var(--gold-deep);
opacity: 0.12;
font-size: 88px;
top: 12px;
right: 24px;
}
.solo-testimonial.cream .t-quote:hover {
background: #ffffff;
border-left-width: 1px;
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(8, 25, 14, 0.07);
}
.solo-testimonial.cream .t-quote blockquote {
color: rgba(8, 25, 14, 0.88);
font-size: 17px;
line-height: 1.7;
}
.solo-testimonial.cream .t-quote figcaption {
color: rgba(8, 25, 14, 0.6);
margin-top: 32px;
}
.solo-testimonial.cream .t-quote figcaption strong {
color: var(--green-deep);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
}
.solo-testimonial.cream .t-quote figcaption span {
color: rgba(8, 25, 14, 0.45);
display: block;
margin-top: 6px;
}
/* ============================================================
FEATURED TESTIMONIAL — image + quote 2-col magazine layout
============================================================ */
.testimonial-featured {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 28px;
align-items: stretch;
margin: 16px 0 64px;
}
.testimonial-featured__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--green-mid);
border: 1px solid rgba(8, 25, 14, 0.14);
}
.testimonial-featured__media-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.92) contrast(1.04);
transition: transform 1.6s ease;
}
.testimonial-featured:hover .testimonial-featured__media-img { transform: scale(1.04); }
.testimonial-featured__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8, 25, 14, 0.55));
pointer-events: none;
}
.testimonial-featured__media-tag {
position: absolute;
bottom: 18px;
left: 22px;
z-index: 2;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
padding: 6px 12px;
background: rgba(8, 25, 14, 0.6);
border: 1px solid rgba(217, 182, 115, 0.42);
backdrop-filter: blur(8px);
}
.testimonial-featured__content {
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
padding: 8px 0;
}
.testimonial-featured__mark {
font-family: var(--display);
font-weight: 400;
font-size: 120px;
line-height: 0.4;
color: var(--gold-deep);
opacity: 0.55;
display: block;
margin: 0;
}
.testimonial-featured__quote {
font-family: var(--display);
font-weight: 400;
font-style: normal;
font-size: clamp(22px, 2.2vw, 32px);
line-height: 1.4;
color: var(--green-deep);
letter-spacing: -0.008em;
margin: 0;
padding: 0;
border: none;
}
.testimonial-featured__quote .it {
font-style: normal;
color: var(--gold-deep);
}
/* Author block — monogram avatar + name + role + location */
.testimonial-author {
display: flex;
align-items: flex-start;
gap: 18px;
padding-top: 28px;
margin-top: 12px;
border-top: 1px solid rgba(8, 25, 14, 0.18);
}
.testimonial-author__avatar {
flex-shrink: 0;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(212, 169, 26, 0.12);
border: 1px solid rgba(212, 169, 26, 0.45);
font-family: var(--display);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--gold-deep);
}
.testimonial-author__info {
display: flex;
flex-direction: column;
gap: 5px;
}
.testimonial-author__name {
font-family: var(--display);
font-weight: 500;
font-size: 17px;
color: var(--green-deep);
letter-spacing: -0.004em;
}
.testimonial-author__role {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-deep);
}
.testimonial-author__location {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--body);
font-size: 12px;
color: rgba(8, 25, 14, 0.6);
margin-top: 2px;
}
.testimonial-author__location [data-lucide],
.testimonial-author__location svg {
width: 12px !important;
height: 12px !important;
color: var(--gold-deep);
stroke-width: 1.6;
}
/* Smaller secondary t-quote cards — restructured with monogram authors */
.solo-testimonial .testimonial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
margin-top: 0;
padding-top: 56px;
border-top: 1px solid rgba(8, 25, 14, 0.18);
max-width: none;
}
.solo-testimonial .t-quote {
padding: 32px 30px 28px;
}
.solo-testimonial .t-quote blockquote {
font-family: var(--display);
font-size: 16px;
line-height: 1.65;
margin: 0 0 24px;
padding: 0;
border: 0;
}
.solo-testimonial .t-quote .testimonial-author {
padding-top: 18px;
margin-top: 0;
border-top-color: rgba(8, 25, 14, 0.16);
}
.solo-testimonial .t-quote .testimonial-author__avatar {
width: 40px;
height: 40px;
font-size: 13px;
}
.solo-testimonial .t-quote .testimonial-author__name { font-size: 15px; }
@media (max-width: 968px) {
.testimonial-featured {
grid-template-columns: 1fr;
gap: 32px;
margin-bottom: 32px;
}
.testimonial-featured__media { aspect-ratio: 16 / 10; }
.solo-testimonial .testimonial-grid { grid-template-columns: 1fr; gap: 20px; }
}
.solo-testimonial::before {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.4; pointer-events: none;
}
.solo-testimonial > .wrap { position: relative; z-index: 2; }
.solo-quote-mark {
font-family: var(--display);
font-weight: 400;
font-size: 180px;
color: var(--gold-deep);
line-height: 0.6;
display: block;
margin: 0 auto 8px;
opacity: 0.4;
text-align: center;
letter-spacing: -0.02em;
}
.solo-quote {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 46px);
line-height: 1.32;
color: var(--brand-ink);
text-align: center;
max-width: 1080px;
margin: 0 auto 48px;
letter-spacing: -0.012em;
}
.solo-attrib {
text-align: center;
border-top: 1px solid var(--rule-strong);
padding-top: 28px;
max-width: 480px;
margin: 0 auto;
}
.solo-attrib-name {
font-family: var(--display);
font-weight: 500;
font-size: 18px;
color: var(--brand-ink);
letter-spacing: -0.005em;
margin-bottom: 6px;
display: block;
}
.solo-attrib-role {
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
font-weight: 500;
}
.solo-disclosure {
display: block;
margin-top: 18px;
font-family: var(--display);
font-size: 12.5px;
color: rgba(14, 14, 14, 0.42);
text-align: center;
}
.solo-testimonial .cta-center a svg{
color:unset;
}
/* Foundation/FAQ teaser bands — split editorial */
.split-band {
background: var(--sand);
color: var(--green-deep);
padding: 0;
border-top: 1px solid rgba(8,25,14,0.08);
}
.split-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 540px;
}
.split-half {
padding: var(--section-padding-y) var(--card-padding);
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
}
.split-half:first-child {
border-right: 1px solid rgba(8,25,14,0.18);
}
.split-half h3 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 4.4vw, 60px);
line-height: 0.98;
color: var(--green-deep);
letter-spacing: -0.018em;
margin: 28px 0 22px;
}
.split-half h3 .it { color: var(--brand-ink-soft); font-weight: 400; }
.split-half p {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(8,25,14,0.74);
font-weight: 300;
margin-bottom: 28px;
}
.split-eyebrow {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
display: flex;
align-items: center;
gap: 18px;
}
.split-eyebrow::before {
content: '';
width: 28px; height: 1px;
background: var(--gold-deep);
}
.split-link {
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none;
border-bottom: 1px solid var(--gold-deep);
padding-bottom: 4px;
align-self: flex-start;
margin-top: auto;
}
.split-link:hover { color: var(--green-deep); border-bottom-color: var(--green-deep); }
/* (legacy hairline split-link arrow rules removed — now using Lucide arrow-right SVG) */
/* Boutique press strip — honest "growing" treatment */
.honest-band {
background: var(--brand-primary);
padding: var(--section-padding-tight);
border-top: 1px solid var(--rule);
}
.honest-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 36px;
align-items: start;
}
.honest-content h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(34px, 3.8vw, 48px);
line-height: 1.04;
color: var(--brand-ink);
letter-spacing: -0.014em;
margin: 22px 0 0;
}
.honest-content h2 .it { color: var(--brand-ink-soft); font-weight: 400; }
.honest-list {
border-top: 1px solid var(--rule-strong);
}
.honest-row {
display: grid;
grid-template-columns: 100px 1fr 140px;
gap: 36px;
padding: 26px 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
}
.honest-year {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-md);
color: var(--gold-deep);
}
.honest-cred {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-md);
color: var(--brand-ink);
letter-spacing: -0.005em;
line-height: 1.4;
}
.honest-status {
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.55);
font-weight: 500;
text-align: right;
}
/* Refined hero — premium boutique feel */
.hero-boutique {
position: relative;
min-height: clamp(560px, 88svh, 880px);
display: flex;
align-items: flex-end;
background: var(--brand-primary);
overflow: hidden;
}
.hero-boutique-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center 30%;
}
.hero-boutique-bg::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
180deg,
rgba(8,25,14,0.55) 0%,
rgba(8,25,14,0.25) 35%,
rgba(8,25,14,0.55) 65%,
rgba(8,25,14,0.92) 100%
);
}
.hero-boutique-grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.3;
mix-blend-mode: overlay;
pointer-events: none;
}
.hero-boutique-inner {
position: relative;
z-index: 2;
width: 100%;
padding-bottom: 56px;
}
.hero-boutique-meta {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(244, 236, 217, 0.2);
padding-top: 28px;
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.7);
font-weight: 500;
margin-top: 36px;
}
.hero-boutique-edition { display: flex; align-items: center; gap: 14px; }
.hero-boutique-edition::before { content: '—'; color: var(--brand-accent-warm); font-size: 24px; line-height: 0.5; }
.hero-boutique h1 {
font-family: var(--display);
font-weight: 500;
font-size: clamp(2.75rem, 8vw, 8rem);
line-height: 1;
color: #fff;
letter-spacing: -0.035em;
margin: 0;
text-shadow: 0 2px 28px rgba(0,0,0,0.5);
}
.hero-boutique h1 .it { font-weight: 500; }
.hero-boutique-sub {
font-family: var(--display);
font-weight: 400;
font-size: clamp(18px, 2vw, 26px);
line-height: 1.4;
color: var(--brand-cream);
margin: 28px 0 0;
max-width: 620px;
letter-spacing: -0.005em;
text-shadow: 0 1px 16px rgba(0,0,0,0.45);
}
.hero-boutique-tag {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--brand-accent-warm);
font-weight: 600;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 16px;
}
.hero-boutique-tag::before {
content: ''; flex: 0 0 24px; height: 1.5px; background: currentColor;
}
/* Verticals - primary 3-card row */
.vert-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 16px 0 32px;
}
.vert-card {
position: relative;
display: flex;
flex-direction: column;
padding: 0;
background: #ffffff;
border: 1px solid rgba(8, 25, 14, 0.05);
border-radius: 16px;
text-decoration: none;
color: var(--green-deep);
overflow: hidden;
box-shadow: 0 12px 32px rgba(8, 25, 14, 0.03);
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.vert-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 56px rgba(8, 25, 14, 0.07);
}
.vert-card:hover .vert-index { color: var(--gold-deep); opacity: 1; }
.vert-card:hover .vert-card__image-bg { transform: scale(1.05); }
/* Image header for vert-card */
.vert-card__image {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--green-mid);
}
.vert-card__image-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.92) contrast(1.04);
transition: transform 1.6s ease;
}
.vert-card__image::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8, 25, 14, 0.55));
pointer-events: none;
}
.vert-card__tag {
position: absolute;
bottom: 14px;
left: 18px;
z-index: 2;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
padding: 5px 10px;
background: #2a4d38;
border: 1px solid rgba(217, 182, 115, 0.5);
backdrop-filter: blur(6px);
}
.vert-card__body {
padding: 32px 32px 36px;
display: flex;
flex-direction: column;
flex: 1;
}
/* Large editorial serial number, top-left.
Brand voice: confident, named, magazine-style index. */
.vert-index {
font-family: var(--brand-font);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.36em;
color: rgba(8, 25, 14, 0.42);
line-height: 1;
margin-bottom: 18px;
display: block;
transition: color 0.4s ease, opacity 0.4s ease;
}
/* Bare-icon fallback (kept for legacy callers that don't use the badge) */
.vert-num,
svg.vert-num,
i.vert-num {
width: 44px !important;
height: 44px !important;
font-size: 20px !important;
line-height: 1 !important;
color: var(--gold-deep);
stroke: currentColor;
stroke-width: 1.5;
margin-bottom: 6px;
display: block;
}
.vert-title {
font-family: var(--display);
font-weight: 500;
font-size: clamp(22px, 2vw, 26px);
color: var(--green-deep);
letter-spacing: -0.008em;
line-height: 1.15;
margin-bottom: 16px;
}
.vert-title em {
display: block;
margin-top: 2px;
color: var(--gold-deep);
font-weight: 400;
font-size: 0.72em;
}
.vert-body {
font-size: 15px;
line-height: 1.68;
color: rgba(8,25,14,0.78);
font-weight: 300;
margin-bottom: 24px;
}
.vert-cta {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(8, 25, 14, 0.12);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 10px;
}
/* Secondary callout strip — minimalist update */
.vert-secondary-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.vert-secondary {
padding: 40px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 32px;
text-decoration: none;
color: var(--green-deep);
background: rgba(8, 25, 14, 0.02);
border: 1px solid rgba(8, 25, 14, 0.05);
border-radius: 12px;
transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.vert-secondary:hover {
background: rgba(8, 25, 14, 0.035);
border-color: rgba(8, 25, 14, 0.08);
transform: translateY(-2px);
}
.vert-secondary:hover .arrow {
transform: translateX(4px);
color: var(--gold-deep);
}
.vert-secondary-eyebrow {
font-size: 10.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(8, 25, 14, 0.5);
font-weight: 500;
display: block;
margin-bottom: 16px;
}
.vert-secondary-title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(20px, 1.8vw, 24px);
color: var(--green-deep);
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0 0 12px;
}
.vert-secondary-body {
font-size: 14.5px;
line-height: 1.6;
color: rgba(8,25,14,0.65);
font-weight: 300;
max-width: 44ch;
margin: 0;
}
.vert-secondary .arrow {
color: rgba(8, 25, 14, 0.25);
flex-shrink: 0;
align-self: center;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}
@media (max-width: 880px) {
.vert-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 0 24px; }
.vert-card { padding: 0; border: 1px solid rgba(8,25,14,0.05); }
.vert-secondary-grid { grid-template-columns: 1fr; gap: 16px; }
.vert-secondary { padding: 32px 24px; border: 1px solid rgba(8,25,14,0.05); }
}
/* Hero founder credit */
.hero-boutique-credit {
font-family: var(--body);
font-size: 11.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.7);
font-weight: 500;
margin-top: 22px;
}
.hero-boutique-credit a {
color: var(--brand-accent-warm);
border-bottom: 1px solid rgba(217, 182, 115, 0.5);
padding-bottom: 1px;
}
.hero-boutique-credit a:hover { color: var(--brand-cream); }
/* Authority bar unit pill */
.authority-num { white-space: nowrap; }
.authority-unit {
font-family: var(--body);
font-size: 0.2em;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(176, 144, 78, 0.85);
font-weight: 500;
vertical-align: middle;
margin-left: 8px;
font-style: normal;
white-space: nowrap;
}
/* Vert-secondary section divider — minimalist */
.vert-secondary-divider {
display: flex; align-items: center; gap: 24px;
margin: 72px 0 40px;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: rgba(8, 25, 14, 0.4);
font-weight: 500;
}
.vert-secondary-divider::before,
.vert-secondary-divider::after {
content: ''; flex: 1; height: 1px; background: rgba(8,25,14,0.06);
}
/* Tile render flag (for renders/concept images) */
.tile-render-flag {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.85);
background: rgba(8, 25, 14, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
padding: 5px 10px;
border-radius: 2px;
border: 1px solid rgba(122, 99, 9, 0.25);
}
.tile-image { position: relative; }
.tile-meta-row { z-index: 3; }
/* Tile endorsement badge — "A Vamika Project" pill, top-right of image */
.tile-endorsement {
position: absolute;
top: 14px; right: 14px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-accent-warm);
background: rgba(8,25,14,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 6px 10px 6px 8px;
border: 1px solid rgba(122, 99, 9, 0.35);
font-weight: 500;
}
.tile-endorsement svg {
width: 14px; height: 14px;
color: var(--gold-deep);
flex-shrink: 0;
}
/* Tile factual line — sits above price */
.tile-fact {
display: block;
font-family: var(--body);
font-size: 11.5px;
letter-spacing: 0.06em;
color: rgba(14, 14, 14, 0.78);
font-weight: 400;
margin: 0 0 10px;
}
.cream .tile-fact { color: rgba(8,25,14,0.7) !important; }
/* Authority bar status cell (text-only variant) */
.authority-num-status {
font-family: var(--display);
font-size: clamp(22px, 2.8vw, 34px) !important;
line-height: 1.05 !important;
letter-spacing: -0.005em !important;
}
.authority-num-status span {
display: block;
font-size: 0.78em;
color: rgba(176,144,78,0.85);
margin-top: 2px;
}
/* Promise card phone link */
.promise-phone {
display: inline-block;
font-family: var(--display);
font-size: var(--text-xl);
color: var(--green-deep);
border-bottom: 1px solid var(--gold-deep);
padding-bottom: 2px;
margin: 8px 0 14px;
}
.promise-phone:hover { color: var(--gold-deep); }
/* Tile price tier */
.tile-price {
display: block;
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
margin: 0 0 12px;
padding-top: 8px;
border-top: 1px dashed rgba(14, 14, 14, 0.18);
}
.cream .tile-price {
color: var(--gold-deep) !important;
border-top-color: rgba(8,25,14,0.10) !important;
}
.promise-flag {
display: inline-block;
font-family: var(--body);
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--green-deep);
background: var(--gold);
padding: 4px 10px;
margin-bottom: 22px;
font-weight: 500;
}
.promise-verify {
display: inline-block;
margin-top: 14px;
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
border-bottom: 1px solid rgba(176,144,78,0.4);
padding-bottom: 2px;
}
.promise-verify:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
/* Sustainability meta note (cream-friendly) */
.snap-meta-note {
font-size: 12.5px;
line-height: 1.7;
color: rgba(8,25,14,0.6) !important;
margin-top: 20px;
margin-bottom: 28px;
}
.snap-meta-note a {
color: var(--gold-deep);
border-bottom: 1px solid rgba(176,144,78,0.4);
font-style: normal;
}
/* NRI band CTAs (paired) */
.nri-band-ctas {
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.nri-band-ctas .btn-primary {
background: var(--gold); color: var(--green-deep);
border: 1px solid var(--gold);
padding: 14px 24px;
font-family: var(--body);
font-size: 11.5px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 500;
}
.nri-band-ctas .btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
/* Testimonial grid (3-quote layout) */
.testimonial-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
margin-top: 32px;
padding-top: 56px;
border-top: 1px solid var(--rule-strong);
max-width: 1080px;
margin-left: auto; margin-right: auto;
}
.t-quote {
margin: 0;
padding: 36px 32px 30px;
background: rgba(250, 203, 63, 0.04);
border-left: 2px solid var(--gold);
transition: background 0.4s ease, border-left-width 0.4s ease, transform 0.4s ease;
position: relative;
}
.t-quote::before {
content: '\201C';
position: absolute;
top: 8px; right: 18px;
font-family: var(--display);
font-size: 64px;
line-height: 1;
color: var(--gold-deep);
opacity: 0.18;
pointer-events: none;
}
.t-quote:hover {
background: rgba(250, 203, 63, 0.08);
border-left-width: 4px;
transform: translateY(-2px);
}
.t-quote blockquote {
font-family: var(--display);
font-size: 17px;
line-height: 1.65;
color: var(--brand-ink);
margin: 0 0 22px;
padding: 0;
border: 0;
position: relative;
}
.t-quote figcaption {
font-family: var(--body);
font-size: 12px;
letter-spacing: 0.06em;
color: rgba(14, 14, 14, 0.65);
line-height: 1.6;
}
.t-quote figcaption strong {
color: var(--gold-deep);
font-weight: 500;
letter-spacing: 0.02em;
}
.t-quote figcaption span {
display: block;
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
margin-top: 4px;
}
@media (max-width: 768px) {
.testimonial-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Split-half: primary (FAQ) bigger weight than secondary (Foundation) */
.split-half-primary {
/* default — keep existing weight */
}
.split-half-secondary h3 {
font-size: clamp(28px, 3.2vw, 42px) !important;
opacity: 0.86;
}
.split-half-secondary p { font-size: 17px !important; opacity: 0.78; }
/* Journal article cards (with thumbnail) */
.journal-card {
display: flex;
flex-direction: column;
}
.journal-card-thumb {
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
margin-bottom: 22px;
border: 1px solid var(--rule);
}
.journal-card-meta {
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
margin-bottom: 14px;
display: block;
}
.journal-card-title {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.18;
color: var(--brand-ink);
letter-spacing: -0.008em;
margin: 0 0 14px;
}
.journal-card-body {
font-size: var(--text-md);
line-height: 1.72;
color: rgba(14, 14, 14, 0.78);
font-weight: 300;
margin: 0 0 18px;
flex: 1;
}
.journal-card-link {
font-family: var(--body);
font-size: var(--text-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
border-bottom: 1px solid rgba(122, 99, 9, 0.4);
padding-bottom: 2px;
align-self: flex-start;
}
.journal-card-link:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
/* Journal cards on cream surface (section-sand-tall, .cream containers) */
.section-sand-tall .journal-card-meta,
.cream .journal-card-meta { color: var(--gold-deep); }
.section-sand-tall .journal-card-title,
.cream .journal-card-title { color: var(--green-deep); }
.section-sand-tall .journal-card-body,
.cream .journal-card-body { color: rgba(8, 25, 14, 0.74); }
.section-sand-tall .journal-card-link,
.cream .journal-card-link { color: var(--gold-deep); border-bottom-color: rgba(212, 169, 26, 0.4); }
.section-sand-tall .journal-card-link:hover,
.cream .journal-card-link:hover { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }
.section-sand-tall .journal-card-thumb,
.cream .journal-card-thumb { border-color: rgba(8, 25, 14, 0.18); }
/* ============================================================
JOURNAL — MAGAZINE LAYOUT
1 featured (horizontal split) + 2 smaller below
============================================================ */
.journal-magazine-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.journal-card--featured {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 24px;
align-items: center;
padding-bottom: 40px;
border-bottom: 1px solid rgba(8, 25, 14, 0.16);
}
.journal-card--featured .journal-card-thumb {
aspect-ratio: 4 / 3;
margin-bottom: 0;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}
.journal-card--featured .journal-card-content {
display: flex;
flex-direction: column;
}
.journal-card--featured .journal-card-featured-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 600;
margin-bottom: 18px;
padding: 5px 10px;
background: rgba(212, 169, 26, 0.1);
border: 1px solid rgba(212, 169, 26, 0.3);
width: fit-content;
}
.journal-card--featured .journal-card-title {
font-size: clamp(28px, 2.8vw, 44px);
line-height: 1.1;
margin-bottom: 22px;
}
.journal-card--featured .journal-card-body {
font-size: 17px;
line-height: 1.75;
margin-bottom: 28px;
}
.journal-card--featured .journal-card-link {
font-size: var(--text-xs);
align-self: flex-start;
}
.journal-magazine-subgrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.journal-magazine-subgrid .journal-card-thumb {
aspect-ratio: 16 / 10;
}
.journal-magazine-subgrid .journal-card-title {
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.22;
}
.journal-magazine-subgrid .journal-card-body {
font-size: 15px;
line-height: 1.68;
}
@media (max-width: 968px) {
.journal-card--featured { grid-template-columns: 1fr; gap: 36px; padding-bottom: 48px; }
.journal-card--featured .journal-card-thumb { aspect-ratio: 16 / 10; }
.journal-magazine-grid { gap: 32px; }
.journal-magazine-subgrid { grid-template-columns: 1fr; gap: 32px; }
}
/* ============================================================
JOURNAL — IN PRINT / PRESS LIST
============================================================ */
.press-list {
border-top: 1px solid rgba(8, 25, 14, 0.22);
}
.press-row {
display: grid;
grid-template-columns: 160px 1fr 200px;
gap: 36px;
padding: 32px 0;
border-bottom: 1px solid rgba(8, 25, 14, 0.14);
align-items: center;
transition: background 0.3s ease, padding-left 0.3s ease;
}
.press-row:hover {
background: rgba(212, 169, 26, 0.04);
padding-left: 14px;
}
.press-status {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
background: rgba(212, 169, 26, 0.1);
color: var(--gold-deep);
border: 1px solid rgba(212, 169, 26, 0.32);
width: fit-content;
}
.press-status [data-lucide] { width: 12px; height: 12px; }
.press-text {
font-family: var(--body);
font-weight: 500;
font-size: 17px;
color: var(--green-deep);
line-height: 1.5;
letter-spacing: -0.005em;
}
.press-meta {
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(8, 25, 14, 0.55);
font-weight: 500;
text-align: right;
}
@media (max-width: 768px) {
.press-row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
.press-meta { text-align: left; }
}
.cream .journal-card-title { color: var(--green-deep) !important; }
.cream .journal-card-body { color: rgba(8,25,14,0.78) !important; }
.cream .journal-card-meta { color: var(--gold-deep) !important; }
.cream .journal-card-link { color: var(--gold-deep) !important; }
/* Footer legal links row + RERA pill */
.footer-legal-links {
display: flex; gap: 24px; flex-wrap: wrap;
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid rgba(14, 14, 14, 0.08);
}
.footer-legal-links a {
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 500;
transition: color 0.3s;
}
.footer-legal-links a:hover { color: var(--gold-deep); }
.rera-pill {
display: inline;
font-family: var(--body);
font-size: 10.5px;
letter-spacing: 0.04em;
color: rgba(14, 14, 14, 0.55);
white-space: nowrap;
}
/* Sticky CTA bar */
.sticky-cta {
position: fixed;
bottom: 24px; right: 24px;
z-index: 90;
display: inline-flex;
align-items: center;
gap: 18px;
background: #2a4d38;
color:#fff;
border: 1px solid var(--gold);
padding: 14px 22px 14px 24px;
text-decoration: none;
font-family: var(--body);
letter-spacing: 0.04em;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
box-shadow: 0 8px 32px rgba(8,25,14,0.4);
max-width: calc(100vw - 48px);
}
.sticky-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.sticky-cta-label {
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
font-weight: 500;
}
.sticky-cta-action {
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
}
.sticky-cta-action svg {
width: 14px; height: 14px;
transition: transform 0.3s ease;
color:var(--gold);
}
.sticky-cta:hover {
background: #2a4d38;
border-color: var(--gold);
box-shadow: 0 12px 36px rgba(122, 99, 9, 0.22);
}
.sticky-cta:hover .sticky-cta-label,
.sticky-cta:hover .sticky-cta-action { color: #fff; }
.sticky-cta:hover .sticky-cta-action{
color:var(--brand-accent);
}
.sticky-cta:hover .sticky-cta-action svg { transform: translateX(3px); }
@media (max-width: 568px) {
.sticky-cta { bottom: 12px; right: 12px; padding: 10px 16px; gap: 10px; }
.sticky-cta-label { font-size: 9.5px; letter-spacing: 0.18em; }
.sticky-cta-action { font-size: 10.5px; }
/* Push body content up so sticky CTA does not cover footer disclaimer */
body.sticky-cta-visible { padding-bottom: 78px; }
}
/* NRI full-bleed band — breaks repetitive split-grid sections */
.nri-band {
position: relative;
padding: var(--section-padding-y-spacious) 0;
background-size: cover;
background-position: center;
overflow: hidden;
}
.nri-band-overlay {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(8,25,14,0.62) 0%, rgba(8,25,14,0.78) 100%);
}
.nri-band-inner {
position: relative; z-index: 2;
max-width: 880px;
text-align: center;
}
.nri-band-inner .chapter { justify-content: center; margin-bottom: 28px; }
.nri-band-inner h2 {
font-family: var(--display); font-weight: 400;
font-size: clamp(28px, 3.8vw, 52px);
line-height: 1.04;
color: var(--brand-ink);
letter-spacing: -0.02em;
margin: 0 0 28px;
text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.nri-band-inner h2 .it-soft { color: var(--brand-ink); opacity: 0.92; }
.nri-band-inner > p {
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.86);
max-width: 640px;
margin: 0 auto 44px;
text-shadow: 0 1px 12px rgba(0,0,0,0.45);
}
.nri-band-stats {
display: flex; justify-content: center; gap: 28px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.nri-band-stats .snap-stat-num {
color: var(--gold-deep);
font-family: var(--display);
font-size: 44px;
}
.nri-band-stats .snap-stat-label { color: rgba(14, 14, 14, 0.7); }
.nri-band-inner .btn-ghost { color: var(--brand-ink); border-color: rgba(14, 14, 14, 0.55); }
.nri-band-inner .btn-ghost:hover { color: var(--brand-ink); border-color: var(--brand-ink); background: rgba(14, 14, 14, 0.04); }
@media (max-width: 768px) {
.nri-band { padding: var(--section-padding-tight); }
.nri-band-stats { gap: 32px; }
.nri-band-stats .snap-stat-num { font-size: 22px; }
}
/* Per-slide hero content (4 slides, 1 visible at a time) */
.hero-content {
display: none;
opacity: 0;
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-content.is-active {
display: block;
opacity: 1;
}
/* Hero CTA — boxed primary + ghost link */
.hero-boutique-cta {
display: flex;
align-items: center;
gap: 28px;
margin-top: 32px;
flex-wrap: wrap;
}
.btn-hero {
display: inline-block;
padding: 16px 30px;
background: var(--gold);
color: var(--green-deep);
font-family: var(--body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
border: 1px solid var(--gold);
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.btn-hero:hover {
background: var(--gold-bright);
border-color: var(--gold-bright);
transform: translateY(-1px);
}
.link-hero {
font-family: var(--body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-cream);
border-bottom: 1px solid rgba(244, 236, 217, 0.5);
padding-bottom: 4px;
transition: color 0.3s ease, border-color 0.3s ease;
}
.link-hero:hover { color: var(--brand-accent-warm); border-bottom-color: var(--brand-accent-warm); }
@media (max-width: 568px) {
.hero-boutique-cta { gap: 18px; }
.btn-hero, .link-hero { font-size: var(--text-xs); }
.btn-hero { padding: 14px 22px; }
}
/* Hero slide carousel — terrain rotation */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center 35%;
opacity: 0;
transform: scale(1.08);
transition: opacity 2.2s cubic-bezier(0.4, 0, 0.2, 1),
transform 2.2s cubic-bezier(0.4, 0, 0.2, 1);
will-change: opacity, transform;
}
.hero-slide.is-active {
opacity: 1;
transform: scale(1);
animation: heroKenBurns 9s ease-out 0.4s forwards;
}
.hero-slide::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(8,25,14,0.45) 0%, rgba(8,25,14,0.18) 45%, rgba(8,25,14,0) 75%),
linear-gradient(180deg,
rgba(8,25,14,0.32) 0%,
rgba(8,25,14,0.08) 35%,
rgba(8,25,14,0.32) 65%,
rgba(8,25,14,0.78) 100%
);
}
@keyframes heroKenBurns {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
.hero-caption {
position: absolute;
right: clamp(20px, 4vw, 56px);
bottom: clamp(120px, 13vh, 170px);
z-index: 3;
font-family: var(--body);
font-size: 12px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--brand-cream);
font-weight: 500;
padding: 10px 16px 10px 46px;
background: rgba(8, 25, 14, 0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(217, 182, 115, 0.5);
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
.hero-caption::before {
content: '';
position: absolute;
left: 14px; top: 50%;
width: 22px; height: 1px;
background: var(--brand-accent-warm);
}
.hero-caption.is-leaving { opacity: 0; transform: translateY(8px); }
.hero-dots {
position: absolute;
right: clamp(20px, 4vw, 56px);
bottom: clamp(80px, 9vh, 110px);
z-index: 3;
display: flex;
gap: 10px;
}
.hero-dot {
width: 28px; height: 2px;
background: rgba(255, 255, 255, 0.35);
border: 0; padding: 0;
cursor: pointer;
transition: background 0.4s ease, width 0.4s ease;
}
.hero-dot.is-active { background: var(--brand-accent); width: 44px; }
.hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
@media (max-width: 768px) {
.hero-caption { bottom: 130px; font-size: 10px; padding-left: 38px; }
.hero-caption::before { width: 18px; }
.hero-dots { bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-slide { transition: opacity 0.6s ease; }
.hero-slide.is-active { animation: none; transform: scale(1); }
}
/* All-4 portfolio tile grid (2x2 on home) */
.tile-grid.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 968px) {
.tile-grid.cols-2 { grid-template-columns: 1fr; }
}
/* Refined project image strip — different crops, not same image */
.project-detail-section {
background: #08190E;
padding: var(--section-padding);
color: var(--brand-cream);
}
.project-detail-section--continued { padding-top: 0; }
.project-detail-strip {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 12px;
height: 64vh;
min-height: 420px;
margin-bottom: 24px;
}
.project-detail-strip > div {
background-size: cover;
background-position: center;
position: relative;
}
.project-detail-strip > div::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(8,25,14,0.4));
}
.project-detail-caption {
text-align: center;
margin-top: 28px;
color: rgba(244, 236, 217, 0.7);
letter-spacing: 0.04em;
}
@media (max-width: 968px) {
.project-detail-strip {
grid-template-columns: 1fr;
height: auto;
}
.project-detail-strip > div { aspect-ratio: 16/10; }
}
/* Foundation page hero detail */
.found-numbers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(8,25,14,0.22);
border-bottom: 1px solid rgba(8,25,14,0.22);
padding: 40px 0;
margin-bottom: 36px;
}
.found-num-cell {
text-align: center;
padding: 0 28px;
border-right: 1px solid rgba(8,25,14,0.18);
}
.found-num-cell:last-child { border-right: none; }
.found-num {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 46px);
color: var(--gold-deep);
line-height: 1;
margin-bottom: 18px;
letter-spacing: -0.01em;
}
.found-num small {
font-size: 0.45em;
margin-left: 2px;
color: rgba(184, 147, 68, 0.85);
}
.found-num-label {
font-family: var(--body);
font-size: 12px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(8,25,14,0.85);
font-weight: 500;
line-height: 1.55;
display: block;
}
/* FAQ page styles */
.faq-list-wrap {
background: var(--brand-primary);
padding: var(--section-padding);
}
/* Cream variant — homepage FAQ on light surface, dark text */
.faq-list-wrap.cream { background: var(--sand); }
.faq-list-wrap.cream .faq-cat-list { border-top-color: rgba(8, 25, 14, 0.22); }
.faq-list-wrap.cream .faq-cat-item { border-bottom-color: rgba(8, 25, 14, 0.22); }
.faq-list-wrap.cream .faq-cat-item summary {
color: var(--green-deep) !important;
font-size: clamp(20px, 1.6vw, 26px);
}
.faq-list-wrap.cream .faq-cat-item summary::after { color: #08190E !important; }
.faq-list-wrap.cream .faq-cat-item p { color: rgba(8, 25, 14, 0.82) !important; }
.faq-list-wrap.cream .faq-cat-label { color: var(--gold-deep); }
.faq-cat {
margin-bottom: 36px;
}
.faq-cat-label {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
display: block;
margin-bottom: 32px;
padding-bottom: 18px;
border-bottom: 1px solid var(--rule-strong);
}
.faq-cat-list { border-top: 1px solid var(--rule); }
.faq-cat-item {
border-bottom: 1px solid var(--rule);
padding: 28px 0;
cursor: pointer;
transition: padding-left 0.3s ease;
}
.faq-cat-item:hover { padding-left: 12px; }
.faq-cat-item summary {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
color: var(--brand-ink);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 48px;
letter-spacing: -0.004em;
line-height: 1.32;
}
.faq-cat-item summary::-webkit-details-marker { display: none; }
.faq-cat-item summary::after {
content: '+';
position: absolute;
right: 0; top: -2px;
font-family: var(--display);
font-size: 22px;
font-weight: 400;
color: var(--gold-deep);
transition: transform 0.3s ease;
}
.faq-cat-item[open] summary::after { content: '−'; }
.faq-cat-item p {
margin-top: 18px;
font-size: var(--text-md);
line-height: 1.72;
color: rgba(14, 14, 14, 0.72);
font-weight: 300;
max-width: 880px;
}
/* Editorial spacer — pulled-quote moment between sections */
.editorial-pull {
background: var(--brand-primary);
padding: var(--section-padding-tight);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.editorial-pull p {
font-family: var(--display);
font-weight: 400;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.35;
color: var(--brand-ink);
text-align: center;
max-width: 920px;
margin: 0 auto;
letter-spacing: -0.008em;
}
.editorial-pull p .it { color: var(--brand-ink-soft); }
/* Magazine-spread variant — image + quote side-by-side */
.editorial-pull-spread {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 36px;
align-items: center;
}
.editorial-pull-spread__media {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--green-mid);
border: 1px solid rgba(14, 14, 14, 0.12);
}
.editorial-pull-spread__media-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.92) contrast(1.04);
}
.editorial-pull-spread__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(8, 25, 14, 0.5));
pointer-events: none;
}
.editorial-pull-spread__caption {
position: absolute;
bottom: 18px;
left: 22px;
z-index: 2;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
padding: 5px 10px;
background: rgba(8, 25, 14, 0.55);
border: 1px solid rgba(122, 99, 9, 0.4);
backdrop-filter: blur(8px);
}
.editorial-pull-spread__text {
display: flex;
flex-direction: column;
gap: 22px;
}
.editorial-pull-spread__eyebrow {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--gold-deep);
}
.editorial-pull-spread__quote-mark {
font-family: var(--display);
font-weight: 400;
font-size: 140px;
line-height: 0.5;
color: var(--gold-deep);
opacity: 0.55;
margin: 0 0 -12px;
}
.editorial-pull-spread p {
font-family: var(--display);
font-weight: 400;
font-size: clamp(26px, 2.8vw, 40px);
line-height: 1.32;
color: var(--brand-ink);
letter-spacing: -0.012em;
margin: 0;
text-align: left;
max-width: none;
}
.editorial-pull-spread p .it { color: var(--brand-ink-soft); font-style: normal; }
@media (max-width: 968px) {
.editorial-pull-spread { grid-template-columns: 1fr; gap: 36px; }
.editorial-pull-spread__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 968px) {
.authority-bar { padding: 40px 0; }
.authority-grid { grid-template-columns: 1fr 1fr; gap: 28px 0; }
.authority-cell { padding: 0 18px; border-bottom: 1px solid rgba(122, 99, 9, 0.12); padding-bottom: 22px; gap: 16px; min-width: 0; }
.authority-cell:nth-child(2n) { border-right: none; }
.authority-cell:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.authority-num { font-size: 2.6rem; white-space: normal; word-break: break-word; }
.authority-unit { display: block; margin-left: 0; margin-top: 4px; font-size: 11px; letter-spacing: 0.2em; }
.authority-num small { font-size: 0.5em; }
.authority-label { font-size: 9.5px; letter-spacing: 0.28em; }
.split-grid { grid-template-columns: 1fr; }
.split-half { padding: 70px 32px; min-height: auto; }
.split-half:first-child { border-right: none; border-bottom: 1px solid rgba(8,25,14,0.18); }
.honest-grid { grid-template-columns: 1fr; gap: 40px; }
.honest-row { grid-template-columns: 80px 1fr 100px; gap: 16px; }
.found-numbers { grid-template-columns: 1fr 1fr; gap: 32px 0; padding: 32px 0; }
.found-num-cell:nth-child(2n) { border-right: none; }
.hero-boutique { min-height: 90vh; }
.hero-boutique-inner { padding-bottom: 60px; }
}
@media (max-width: 480px) {
.authority-grid { grid-template-columns: 1fr; gap: 0; }
.authority-cell { padding: 22px 4px; border-right: none; border-bottom: 1px solid rgba(122, 99, 9, 0.12); }
.authority-cell:last-child { border-bottom: none; }
.authority-cell:nth-last-child(-n+2) { border-bottom: 1px solid rgba(122, 99, 9, 0.12); padding-bottom: 22px; }
.authority-cell:last-child { border-bottom: none; padding-bottom: 0; }
.authority-num { font-size: 3rem; }
}
/* =====================================================================
VIEW TRANSITIONS — cross-document (MPA)
Opt in via + meta tag in HTML.
Subtle gold-tinted fade between pages.
===================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 480ms;
animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
animation-fill-mode: both;
mix-blend-mode: normal;
}
::view-transition-old(root) { animation-name: vamika-fade-out; }
::view-transition-new(root) { animation-name: vamika-fade-in; }
@keyframes vamika-fade-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vamika-fade-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Persist nav across navigations — no flash */
.nav { view-transition-name: site-nav; }
.footer { view-transition-name: site-footer; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.001s; }
}
/* Lucide icon sizing inside existing `.arrow` slot and CTAs.
stroke: currentColor ensures the icon picks up the parent's text color
(e.g. ghost buttons render the arrow in dark ink, not the lucide default). */
[data-lucide],
svg[data-lucide],
.arrow[data-lucide] {
width: 1em;
height: 1em;
stroke: currentColor;
fill: none;
stroke-width: 1.5;
display: inline-block;
vertical-align: -0.12em;
}
.btn [data-lucide],
.btn .arrow,
.btn svg.arrow,
.tile-link [data-lucide],
.split-link [data-lucide] {
width: 14px;
height: 14px;
margin-left: 6px;
color: inherit;
stroke: currentColor;
transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
.btn:hover [data-lucide],
.tile:hover .tile-link [data-lucide],
.split-link:hover [data-lucide] { transform: translateX(4px); }
/* ===================================================================
ABOUT PAGE — architectural editorial register (Edition 2026)
Drafting-table aesthetic. Hairline rules. Roman numerals.
Spec sheets where most pages would put portraits.
=================================================================== */
/* ----- Section mark (folio + roman numeral + name) ----- */
.ab-section-mark {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--body);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.88);
}
.ab-section-mark .ab-section-num {
font-family: var(--display);
font-weight: 500;
font-size: 18px;
letter-spacing: 0;
text-transform: none;
color: var(--brand-ink-soft);
}
.ab-section-mark .ab-section-rule {
flex: 0 0 24px;
height: 1.5px;
background: currentColor;
opacity: 0.9;
margin: 0;
transform: none;
}
.ab-section-mark .ab-section-name {
color: var(--brand-ink-soft);
letter-spacing: 0.25em;
font-weight: 600;
}
.ab-section-mark.dark { color: rgba(8, 25, 14, 0.55); }
.ab-section-mark.dark .ab-section-num,
.ab-section-mark.dark .ab-section-name { color: var(--brand-ink-soft); }
.ab-section-mark.dark .ab-section-rule { background: var(--brand-ink-soft); }
/* ----- Hero (about-specific) ----- */
.ab-hero {
position: relative;
min-height: 88vh;
background: var(--brand-primary);
overflow: hidden;
display: flex;
align-items: flex-end;
padding: var(--section-padding);
}
.ab-hero-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: saturate(0.7) brightness(0.72) contrast(1.05);
}
.ab-hero-bg::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(8,25,14,0.55) 0%, rgba(8,25,14,0.35) 30%, rgba(8,25,14,0.85) 100%),
radial-gradient(ellipse at 30% 70%, rgba(122, 99, 9, 0.06) 0%, transparent 60%);
}
.ab-hero-grain {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.55;
mix-blend-mode: overlay;
pointer-events: none;
}
.ab-hero-inner {
position: relative;
z-index: 2;
width: 100%;
}
.ab-hero-frame {
max-width: 880px;
border-left: 1px solid rgba(217, 182, 115, 0.45);
padding: 40px 0 8px 44px;
position: relative;
}
.ab-hero-frame::before,
.ab-hero-frame::after {
content: ''; position: absolute;
left: -1px;
width: 14px; height: 1px;
background: var(--brand-accent-warm);
}
.ab-hero-frame::before { top: 40px; }
.ab-hero-frame::after { bottom: 8px; }
.ab-hero-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--body);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.65);
border-bottom: 1px solid rgba(244, 236, 217, 0.16);
padding-bottom: 18px;
margin-bottom: 36px;
max-width: 540px;
}
.ab-hero-folio { color: var(--brand-accent-warm); }
.ab-hero-edition { letter-spacing: 0.22em; text-transform: none; font-family: var(--display); font-weight: 400; font-size: var(--text-sm); color: rgba(244, 236, 217, 0.7); }
.ab-hero-title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(56px, 8vw, 124px);
line-height: 0.92;
letter-spacing: -0.025em;
color: #fff;
margin-bottom: 36px;
}
.ab-hero-title .it {
font-weight: 400;
}
.ab-hero-lede {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-base);
line-height: 1.65;
color: rgba(244, 236, 217, 0.8);
max-width: 580px;
margin-bottom: 28px;
}
.ab-hero-anchor a {
display: inline-flex;
align-items: center;
gap: 16px;
color: var(--brand-accent-warm);
font-family: var(--body);
font-weight: 500;
font-size: var(--text-xs);
letter-spacing: 0.32em;
text-transform: uppercase;
}
.ab-hero-anchor-rule {
width: 56px; height: 1px;
background: var(--brand-accent-warm);
display: inline-block;
transition: width 0.4s ease;
}
.ab-hero-anchor a:hover .ab-hero-anchor-rule { width: 84px; }
.ab-hero-anchor-icon { width: 14px; height: 14px; }
@media (max-width: 768px) {
.ab-hero { padding: 68px 0 52px; }
.ab-hero-frame { padding-left: 24px; }
.ab-hero-meta { font-size: 9.5px; flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ----- ORIGIN ----- */
.ab-origin {
background: var(--brand-primary);
padding: 52px 0 var(--section-padding-y);
position: relative;
border-top: 1px solid var(--rule);
}
.ab-origin::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 1px; height: 48px;
background: linear-gradient(180deg, transparent, var(--gold) 40%, var(--gold));
opacity: 0.85;
}
.ab-origin-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 32px;
align-items: stretch;
}
.ab-origin-content {
display: flex;
flex-direction: column;
gap: 32px;
}
.ab-origin-head { padding-top: 8px; }
.ab-origin-title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 48px);
line-height: 0.96;
letter-spacing: -0.022em;
color: var(--brand-ink);
margin-top: 28px;
}
.ab-origin-title .it { color: var(--brand-ink-soft); }
.ab-origin-pull {
font-family: var(--display);
font-weight: 400;
font-size: clamp(20px, 2vw, 26px);
line-height: 1.45;
color: var(--gold-deep);
letter-spacing: -0.005em;
padding-bottom: 32px;
margin-bottom: 36px;
border-bottom: 1px solid var(--rule-strong);
}
.ab-origin-prose p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.78;
color: rgba(14, 14, 14, 0.78);
margin-bottom: 22px;
}
.ab-origin-prose strong {
color: var(--brand-ink);
font-weight: 500;
letter-spacing: -0.005em;
}
.ab-origin-figures {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 36px;
padding-top: 36px;
border-top: 1px solid var(--rule-strong);
}
.ab-figure {
position: relative;
padding: 8px 32px;
border-right: 1px solid var(--rule);
}
.ab-figure:last-child { border-right: none; }
.ab-figure dt {
font-family: var(--body);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
margin-bottom: 14px;
}
.ab-figure dd {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 40px);
line-height: 0.95;
color: var(--gold-deep);
letter-spacing: -0.025em;
margin-bottom: 12px;
}
.ab-figure dd .ab-figure-num small {
font-size: 0.42em;
color: var(--gold-deep);
letter-spacing: 0;
vertical-align: top;
margin-left: 1px;
}
.ab-figure dd > small {
font-size: 0.42em;
color: var(--gold-deep);
letter-spacing: 0;
vertical-align: top;
margin-left: 1px;
}
.ab-figure-foot {
font-family: var(--body);
font-weight: 400;
font-size: 11.5px;
line-height: 1.5;
color: rgba(14, 14, 14, 0.55);
display: block;
}
@media (max-width: 968px) {
.ab-origin-grid { grid-template-columns: 1fr; gap: 50px; }
.ab-origin-head { position: static; }
.ab-origin-figures { grid-template-columns: 1fr 1fr; gap: 32px 0; }
.ab-figure { padding-right: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.ab-figure:nth-child(2n) { border-right: none; }
.ab-figure:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 8px; }
}
/* ----- FOUNDERS — spec-sheet cards ----- */
.ab-founders {
background: var(--green);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
position: relative;
}
.ab-founders::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
mix-blend-mode: overlay;
opacity: 0.4;
}
.ab-founders > .wrap { position: relative; z-index: 1; }
.ab-founders-head {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 36px;
align-items: end;
margin-bottom: 36px;
}
.ab-founders-headline h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 50px);
line-height: 0.96;
letter-spacing: -0.022em;
color: var(--brand-ink);
}
.ab-founders-headline h2 .it { color: var(--brand-ink-soft); }
.ab-founders-headline p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.72);
max-width: 620px;
}
.ab-founders-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.ab-founder {
position: relative;
padding: 0;
background: linear-gradient(180deg, rgba(20, 42, 28, 0.6), rgba(13, 32, 20, 0.6));
border: 1px solid rgba(122, 99, 9, 0.18);
display: flex;
flex-direction: column;
overflow: hidden;
}
.ab-founder-portrait {
position: relative;
margin: 0;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--green-mid);
border-bottom: 1px solid rgba(122, 99, 9, 0.18);
}
.ab-founder-portrait img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
filter: saturate(0.9) contrast(1.04);
display: block;
}
.ab-founder-portrait::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(8,25,14,0.05) 0%, rgba(8,25,14,0.0) 30%, rgba(8,25,14,0.7) 100%),
linear-gradient(90deg, rgba(8,25,14,0.18) 0%, transparent 14%, transparent 86%, rgba(8,25,14,0.18) 100%);
pointer-events: none;
}
.ab-founder-portrait-cap {
position: absolute;
bottom: 16px; left: 20px;
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
color: var(--gold-deep);
letter-spacing: 0.08em;
z-index: 2;
padding: 4px 10px;
background: rgba(8, 25, 14, 0.7);
backdrop-filter: blur(4px);
border: 1px solid rgba(122, 99, 9, 0.32);
}
.ab-founder > .ab-founder-mast,
.ab-founder > .ab-founder-quote,
.ab-founder > .ab-founder-spec,
.ab-founder > .ab-founder-bio {
margin-left: 44px;
margin-right: 44px;
}
.ab-founder > .ab-founder-mast { margin-top: 36px; }
.ab-founder > .ab-founder-quote { margin-top: 32px; }
.ab-founder > .ab-founder-spec { margin-top: 28px; }
.ab-founder > .ab-founder-bio { margin-top: 24px; margin-bottom: 28px; }
.ab-founder::before,
.ab-founder::after {
content: '';
position: absolute;
width: 18px; height: 18px;
border-color: var(--gold-deep);
border-style: solid;
border-width: 0;
}
.ab-founder::before {
top: -1px; left: -1px;
border-top-width: 1px; border-left-width: 1px;
}
.ab-founder::after {
bottom: -1px; right: -1px;
border-bottom-width: 1px; border-right-width: 1px;
}
.ab-founder-mast {
display: flex;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid var(--rule-strong);
}
.ab-founder-name-block { display: flex; flex-direction: column; gap: 4px; }
.ab-founder-name-block h3 {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.1;
color: var(--brand-ink);
letter-spacing: -0.005em;
}
.ab-founder-role {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
}
.ab-founder-quote {
font-family: var(--display);
font-weight: 400;
font-size: clamp(18px, 1.6vw, 21px);
line-height: 1.55;
color: rgba(14, 14, 14, 0.92);
letter-spacing: -0.005em;
position: relative;
padding-left: 32px;
}
.ab-founder-quote .it { color: var(--brand-ink-soft); }
.ab-founder-quote .ab-quote-mark {
position: absolute;
left: -4px; top: -16px;
font-size: 56px;
color: var(--gold-deep);
opacity: 0.35;
line-height: 1;
}
.ab-founder-spec {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--rule);
}
.ab-founder-spec > div {
display: grid;
grid-template-columns: 130px 1fr;
gap: 24px;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
align-items: baseline;
}
.ab-founder-spec dt {
font-family: var(--body);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(14, 14, 14, 0.5);
}
.ab-founder-spec dd {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-md);
line-height: 1.4;
color: var(--brand-ink);
letter-spacing: -0.005em;
}
.ab-founder-bio {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.7);
margin-top: -8px;
}
@media (max-width: 968px) {
.ab-founders-head { grid-template-columns: 1fr; gap: 32px; }
.ab-founders-grid { grid-template-columns: 1fr; gap: 28px; }
.ab-founder > .ab-founder-mast,
.ab-founder > .ab-founder-quote,
.ab-founder > .ab-founder-spec,
.ab-founder > .ab-founder-bio { margin-left: 28px; margin-right: 28px; }
.ab-founder > .ab-founder-bio { margin-bottom: 32px; }
}
/* ----- APPROACH (cream) ----- */
.ab-approach {
background: var(--sand);
color: var(--green-deep);
padding: var(--section-padding);
position: relative;
}
.ab-approach::before {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: multiply;
pointer-events: none;
}
.ab-approach > .wrap { position: relative; z-index: 1; }
.ab-approach-head {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 36px;
align-items: end;
margin-bottom: 40px;
}
.ab-approach-headline h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(30px, 3.8vw, 54px);
line-height: 0.94;
letter-spacing: -0.022em;
color: var(--green-deep);
margin-bottom: 24px;
}
.ab-approach-headline h2 .it { color: var(--brand-ink-soft); }
.ab-approach-headline p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.72;
color: rgba(8, 25, 14, 0.7);
max-width: 620px;
}
.ab-approach-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 2px solid var(--green-deep);
}
.ab-approach-cell {
position: relative;
padding: 48px 36px 44px;
border-right: 1px solid rgba(8, 25, 14, 0.18);
border-bottom: 1px solid rgba(8, 25, 14, 0.18);
background: var(--sand);
transition: background 0.3s ease;
}
.ab-approach-cell:nth-child(3n) { border-right: none; }
.ab-approach-cell:nth-last-child(-n+3) { border-bottom: none; }
.ab-approach-cell:hover { background: rgba(122, 99, 9, 0.08); }
.ab-approach-num {
position: relative;
display: flex;
align-items: baseline;
margin-bottom: 28px;
}
.ab-approach-num .num {
font-family: var(--display);
font-weight: 400;
font-size: clamp(56px, 5.6vw, 80px);
line-height: 0.85;
color: var(--gold-deep);
letter-spacing: -0.05em;
}
.ab-approach-num::after {
content: '';
flex: 1;
height: 1px;
background: rgba(8, 25, 14, 0.16);
margin-left: 18px;
transform: translateY(-12px);
}
.ab-approach-cell h3 {
font-family: var(--display);
font-weight: 500;
font-size: 24px;
line-height: 1.15;
color: var(--green-deep);
letter-spacing: -0.008em;
margin-bottom: 18px;
}
.ab-approach-cell h3 em { color: var(--brand-ink-soft); font-weight: 400; }
.ab-approach-cell p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(8, 25, 14, 0.74);
margin-bottom: 22px;
}
.ab-approach-tag {
font-family: var(--body);
font-weight: 500;
font-size: 9px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
display: inline-flex;
align-items: center;
gap: 8px;
padding-top: 16px;
border-top: 1px solid rgba(8, 25, 14, 0.16);
width: 100%;
}
.ab-approach-tag a { color: var(--gold-deep); display: inline-flex; align-items: center; gap: 6px; }
.ab-approach-tag a:hover { color: var(--green-deep); }
@media (max-width: 968px) {
.ab-approach-head { grid-template-columns: 1fr; gap: 32px; }
.ab-approach-grid { grid-template-columns: 1fr 1fr; }
.ab-approach-cell { padding: 40px 24px; }
.ab-approach-cell:nth-child(3n) { border-right: 1px solid rgba(8, 25, 14, 0.18); padding-right: 24px; }
.ab-approach-cell:nth-child(2n) { border-right: none; padding-right: 0; }
.ab-approach-cell:nth-child(2n+1) { padding-left: 0; }
.ab-approach-cell:nth-last-child(-n+3) { border-bottom: 1px solid rgba(8, 25, 14, 0.18); }
.ab-approach-cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 568px) {
.ab-approach-grid { grid-template-columns: 1fr; }
.ab-approach-cell { border-right: none !important; padding: 36px 0; }
.ab-approach-cell:not(:last-child) { border-bottom: 1px solid rgba(8,25,14,0.18) !important; }
}
/* ----- PROCESS — vertical rail ----- */
.ab-process {
background: var(--brand-primary);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
}
/* Cream variant — flips ab-process to sand bg with dark text */
.ab-process.cream { background: var(--sand) !important; color: var(--green-deep); }
.ab-process.cream .ab-section-mark { color: rgba(8, 25, 14, 0.65); }
.ab-process.cream .ab-section-mark .ab-section-num,
.ab-process.cream .ab-section-mark .ab-section-name { color: var(--brand-ink-soft); }
.ab-process.cream .ab-section-mark .ab-section-rule { background: var(--gold-deep); opacity: 0.9; }
.ab-process.cream .ab-process-headline h2 { color: var(--green-deep); }
.ab-process.cream .ab-process-headline h2 .it { color: var(--brand-ink-soft); }
.ab-process.cream .ab-process-meta { border-left-color: rgba(8, 25, 14, 0.22); }
.ab-process.cream .ab-process-pull { color: var(--gold-deep); }
.ab-process.cream .ab-process-pull .it { color: var(--brand-ink-soft); }
.ab-process.cream .ab-process-body { color: rgba(8, 25, 14, 0.74); }
.ab-process.cream .ab-process-rail { border-left-color: rgba(8, 25, 14, 0.22); }
.ab-process.cream .ab-process-rail::before,
.ab-process.cream .ab-process-rail::after { background: var(--gold-deep); }
.ab-process.cream .ab-process-step + .ab-process-step { border-top-color: rgba(8, 25, 14, 0.18); }
.ab-process.cream .ab-process-step::before { background: var(--gold-deep); opacity: 0.7; }
.ab-process.cream .ab-process-step-tag { color: rgba(8, 25, 14, 0.5); }
.ab-process.cream .ab-process-step-num { color: var(--brand-ink-soft); }
.ab-process.cream .ab-process-content h4 { color: var(--green-deep); }
.ab-process.cream .ab-process-content p { color: rgba(8, 25, 14, 0.74); }
.ab-process.cream .ab-process-content p .it { color: var(--brand-ink-soft); }
.ab-process.cream .ab-process-time { color: var(--gold-deep); border-color: rgba(8, 25, 14, 0.28); }
.ab-process-head {
margin-bottom: 36px;
}
.ab-process-headline {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
/* align-items: end; */
margin-top: 20px;
}
.ab-process-headline h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(30px, 3.8vw, 54px);
line-height: 0.94;
letter-spacing: -0.022em;
color: var(--brand-ink);
}
.ab-process-headline h2 .it { color: var(--brand-ink-soft); }
.ab-process-meta { display: flex; flex-direction: column; gap: 18px; padding-left: 28px; border-left: 1px solid rgba(122, 99, 9, 0.32); }
.ab-process-pull {
font-family: var(--display);
font-weight: 400;
font-style: normal;
font-size: var(--text-lg);
line-height: 1.5;
color: var(--gold-deep);
letter-spacing: -0.005em;
}
.ab-process-pull .it { }
.ab-process-body {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.7);
}
.ab-process-rail {
list-style: none;
position: relative;
margin-left: 80px;
padding-left: 60px;
border-left: 1px solid rgba(122, 99, 9, 0.32);
}
.ab-process-rail::before,
.ab-process-rail::after {
content: '';
position: absolute;
left: -4px;
width: 7px; height: 7px;
background: var(--gold);
border-radius: 50%;
}
.ab-process-rail::before { top: 0; }
.ab-process-rail::after { bottom: 0; }
.ab-process-step {
position: relative;
padding: 36px 0 56px;
display: grid;
grid-template-columns: 220px 1fr;
gap: 40px;
align-items: start;
}
.ab-process-step + .ab-process-step { border-top: 1px solid var(--rule); }
.ab-process-step::before {
content: '';
position: absolute;
left: -64px; top: 50px;
width: 36px; height: 1px;
background: var(--gold);
opacity: 0.55;
}
.ab-process-num {
display: flex;
flex-direction: column;
gap: 6px;
}
.ab-process-step-tag {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(122, 99, 9, 0.6);
}
.ab-process-step-num {
font-family: var(--display);
font-weight: 400;
font-size: clamp(56px, 5.4vw, 80px);
line-height: 0.85;
color: var(--brand-ink-soft);
letter-spacing: -0.04em;
opacity: 0.55;
}
.ab-process-content h4 {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.18;
color: var(--brand-ink);
letter-spacing: -0.005em;
margin-bottom: 14px;
}
.ab-process-content p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.75);
margin-bottom: 18px;
max-width: 620px;
}
.ab-process-content p .it { color: var(--brand-ink-soft); }
.ab-process-time {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--gold-deep);
padding: 6px 12px;
border: 1px solid rgba(122, 99, 9, 0.38);
}
.ab-process-time [data-lucide] {
width: 12px; height: 12px;
margin: 0;
}
@media (max-width: 968px) {
.ab-process-headline { grid-template-columns: 1fr; gap: 24px; }
.ab-process-meta { border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 24px; }
.ab-process-rail { margin-left: 0; padding-left: 36px; }
.ab-process-step { grid-template-columns: 1fr; gap: 16px; }
.ab-process-step::before { left: -40px; }
}
/* ----- GEOGRAPHY — register ----- */
.ab-geo {
background: var(--green);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
position: relative;
}
.ab-geo-head {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 36px;
align-items: end;
margin-bottom: 32px;
}
.ab-geo-headline h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.08;
letter-spacing: -0.016em;
color: var(--brand-ink);
margin-bottom: 24px;
}
.ab-geo-headline h2 .it { color: var(--brand-ink-soft); }
.ab-geo-headline p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.72;
color: rgba(14, 14, 14, 0.72);
max-width: 620px;
}
.ab-geo-register {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
border-top: 1px solid rgba(122, 99, 9, 0.32);
padding-top: 36px;
}
.ab-geo-col-head {
font-family: var(--body);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: 1px solid var(--rule);
}
.ab-geo-list {
list-style: none;
counter-reset: geo;
}
.ab-geo-list li {
counter-increment: geo;
display: grid;
grid-template-columns: 32px 1fr auto;
align-items: baseline;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid var(--rule);
position: relative;
}
.ab-geo-list li::before {
content: counter(geo, decimal-leading-zero);
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.28em;
color: rgba(14, 14, 14, 0.4);
}
.ab-geo-city {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
line-height: 1.2;
color: var(--brand-ink);
letter-spacing: -0.008em;
}
.ab-geo-flag {
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: #fff !important;
padding: 4px 10px;
border: 1px solid rgba(122, 99, 9, 0.32);
background: #2a4d38;
}
.ab-geo-active {
margin-top: 30px;
padding: 20px 24px;
background: rgba(122, 99, 9, 0.06);
border-left: 1px solid var(--gold);
}
.ab-geo-active-label {
display: block;
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 8px;
}
.ab-geo-active p {
font-family: var(--display);
font-weight: 400;
font-size: var(--text-base);
line-height: 1.5;
color: rgba(14, 14, 14, 0.85);
letter-spacing: -0.005em;
}
@media (max-width: 968px) {
.ab-geo-head { grid-template-columns: 1fr; gap: 28px; }
.ab-geo-register { grid-template-columns: 1fr; gap: 50px; }
}
/* ----- INVITE ----- */
.ab-invite {
background: #08190E;
color: var(--brand-cream);
padding: var(--section-padding-y) 0;
}
.ab-invite-frame {
text-align: center;
max-width: 720px;
margin: 0 auto;
padding: 80px 60px;
border: 1px solid rgba(250, 203, 63, 0.32);
position: relative;
}
.ab-invite-frame::before,
.ab-invite-frame::after {
content: '';
position: absolute;
width: 24px; height: 24px;
border-color: var(--gold);
border-style: solid;
border-width: 0;
}
.ab-invite-frame::before {
top: -1px; left: -1px;
border-top-width: 1px; border-left-width: 1px;
}
.ab-invite-frame::after {
bottom: -1px; right: -1px;
border-bottom-width: 1px; border-right-width: 1px;
}
.ab-invite-mark {
display: inline-block;
width: 32px; height: 1px;
background: var(--gold);
margin-bottom: 28px;
}
.ab-invite-title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 4.2vw, 56px);
line-height: 1.05;
color: var(--brand-cream);
letter-spacing: -0.018em;
margin-bottom: 24px;
}
.ab-invite-title .it { color: var(--gold); }
.ab-invite-body {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.72;
color: rgba(244, 236, 217, 0.78);
max-width: 480px;
margin: 0 auto 36px;
}
.ab-invite .btn-ghost { color: var(--brand-cream); border-color: rgba(244, 236, 217, 0.45); }
.ab-invite .btn-ghost:hover { color: var(--gold); border-color: var(--gold); background: rgba(250, 203, 63, 0.08); }
.ab-invite-actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.ab-invite-actions a svg {
color: unset;
}
@media (max-width: 568px) {
.ab-invite-frame { padding: 50px 28px; }
}
/* ===================================================================
ABOUT — VERTICALS section + post-redesign tweaks
=================================================================== */
.ab-hero-stats {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 36px;
padding-top: 28px;
border-top: 1px solid rgba(217, 182, 115, 0.45);
max-width: 720px;
}
.ab-hero-stats li {
padding: 0 24px;
border-right: 1px solid rgba(244, 236, 217, 0.14);
display: flex; flex-direction: column; gap: 4px;
}
.ab-hero-stats li:last-child { border-right: none; }
.ab-hero-stats span {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 2.6vw, 38px);
line-height: 1;
color: var(--brand-accent-warm);
letter-spacing: -0.02em;
}
.ab-hero-stats em {
font-family: var(--body);
font-style: normal;
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.55);
}
@media (max-width: 768px) {
.ab-hero-stats { grid-template-columns: 1fr 1fr; gap: 24px 0; }
.ab-hero-stats li:nth-child(2) { border-right: none; padding-right: 0; }
.ab-hero-stats li:nth-child(3) { padding-left: 0; }
}
/* VERTICALS */
.ab-verticals {
background: var(--brand-primary);
padding: var(--section-padding);
border-top: 1px solid var(--rule);
position: relative;
}
.ab-verticals::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 1px; height: 60px;
background: linear-gradient(180deg, transparent, var(--gold) 40%, var(--gold));
opacity: 0.5;
}
.ab-verticals-head {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
gap: 36px;
align-items: end;
margin-bottom: 32px;
}
.ab-verticals-headline h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.2vw, 48px);
line-height: 0.96;
letter-spacing: -0.022em;
color: var(--brand-ink);
margin-bottom: 24px;
}
.ab-verticals-headline h2 .it { color: var(--brand-ink-soft); }
.ab-verticals-headline p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.72;
color: rgba(14, 14, 14, 0.72);
max-width: 620px;
}
.ab-verticals-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 2px solid rgba(122, 99, 9, 0.55);
border-bottom: 1px solid rgba(122, 99, 9, 0.32);
}
.ab-vertical {
position: relative;
padding: var(--card-padding);
border-right: 1px solid rgba(14, 14, 14, 0.14);
display: flex;
flex-direction: column;
gap: 18px;
transition: background 0.3s ease;
}
.ab-vertical:last-child { border-right: none; }
.ab-vertical:hover { background: rgba(122, 99, 9, 0.04); }
.ab-vertical-num {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 4.4vw, 64px);
line-height: 1;
color: var(--brand-ink-soft);
letter-spacing: -0.04em;
opacity: 0.55;
margin-bottom: 8px;
}
.ab-vertical h3 {
font-family: var(--display);
font-weight: 500;
font-size: clamp(26px, 2.4vw, 34px);
line-height: 1.1;
color: var(--brand-ink);
letter-spacing: -0.012em;
margin-bottom: 6px;
}
.ab-vertical h3 em { color: var(--brand-ink-soft); font-weight: 400; }
.ab-vertical p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.72;
color: rgba(14, 14, 14, 0.72);
flex-grow: 1;
}
.ab-vertical-anchor {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(14, 14, 14, 0.14);
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
transition: color 0.3s;
}
.ab-vertical-anchor [data-lucide] {
width: 14px; height: 14px;
transition: transform 0.4s cubic-bezier(0.65,0,0.35,1);
}
.ab-vertical-anchor:hover [data-lucide] { transform: translate(2px, -2px); }
@media (max-width: 968px) {
.ab-verticals-head { grid-template-columns: 1fr; gap: 32px; }
.ab-verticals-grid { grid-template-columns: 1fr; }
.ab-vertical { padding: 44px 0; border-right: none; border-bottom: 1px solid rgba(14, 14, 14, 0.14); }
.ab-vertical:last-child { border-bottom: none; padding-bottom: 0; }
}
/* APPROACH 4-cell variant */
.ab-approach-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.ab-approach-grid--4 .ab-approach-cell:nth-child(3n) { border-right: 1px solid rgba(8, 25, 14, 0.18); }
.ab-approach-grid--4 .ab-approach-cell:nth-child(4n) { border-right: none; }
.ab-approach-grid--4 .ab-approach-cell:nth-last-child(-n+4) { border-bottom: none; }
.ab-approach-grid--4 .ab-approach-cell { padding: 44px 28px 40px; }
@media (max-width: 1100px) {
.ab-approach-grid--4 { grid-template-columns: 1fr 1fr; }
.ab-approach-grid--4 .ab-approach-cell:nth-child(2n) { border-right: none; }
.ab-approach-grid--4 .ab-approach-cell:nth-child(2n+1) { border-right: 1px solid rgba(8, 25, 14, 0.18); }
.ab-approach-grid--4 .ab-approach-cell:nth-last-child(-n+4) { border-bottom: 1px solid rgba(8, 25, 14, 0.18); }
.ab-approach-grid--4 .ab-approach-cell:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 568px) {
.ab-approach-grid--4 { grid-template-columns: 1fr; }
.ab-approach-grid--4 .ab-approach-cell { border-right: none !important; }
}
/* FOUNDERS — demoted: smaller portrait, lighter card */
.ab-founders { background: var(--green); } /* third tonal beat */
.ab-founder-portrait { aspect-ratio: 4 / 3; }
.ab-founder { padding: 0 0 36px; }
.ab-founder > .ab-founder-mast { margin-top: 28px; padding-bottom: 18px; }
.ab-founder > .ab-founder-quote {
margin-top: 24px;
font-size: clamp(16px, 1.4vw, 18px);
padding-left: 0;
}
.ab-founder > .ab-founder-quote .ab-quote-mark { display: none; }
.ab-founder > .ab-founder-spec { margin-top: 22px; }
.ab-founder-name-block h3 { font-size: var(--text-xl); }
/* GEOGRAPHY note (replaces active enquiries) */
.ab-geo-note {
margin-top: 36px;
padding: 24px 28px;
background: rgba(122, 99, 9, 0.05);
border-left: 1px solid var(--gold);
}
.ab-geo-note-label {
display: block;
font-family: var(--body);
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 10px;
}
.ab-geo-note p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(14, 14, 14, 0.78);
margin-bottom: 14px;
}
.ab-geo-note-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--body);
font-weight: 500;
font-size: 10px;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--gold-deep);
}
.ab-geo-note-link [data-lucide] { width: 13px; height: 13px; transition: transform 0.4s; }
.ab-geo-note-link:hover [data-lucide] { transform: translateX(4px); }
/* APPROACH eyebrow alignment fix — left rail */
.ab-approach-head {
grid-template-columns: 0.7fr 1.3fr;
}
.ab-approach-head .ab-section-mark { align-self: start; }
/* PROCESS rebalance — pull rail closer to center */
.ab-process-rail {
margin-left: 40px;
padding-left: 48px;
max-width: 980px;
}
/* GEO column balance — flex right column to match left */
.ab-geo-register {
align-items: stretch;
}
.ab-geo-col { display: flex; flex-direction: column; }
.ab-geo-col .ab-geo-list { flex: 0 0 auto; }
.ab-geo-note { margin-top: auto; }
/* Founders — Geography section break (gold rule top) */
.ab-process { border-top: 1px solid var(--rule); }
.ab-process::before {
content: '';
display: block;
width: 56px; height: 1px;
background: var(--gold);
margin: 0 auto;
position: relative;
top: -1px;
opacity: 0.6;
}
/* (legacy lockup-img footer rule removed — footer now uses .footer-mark + .footer-wordmark text) */
/* ===================================================================
ABOUT — HERO TERRAIN SLIDESHOW
=================================================================== */
.ab-hero-slides {
position: absolute;
inset: 0;
overflow: hidden;
z-index: 0;
}
.ab-hero-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1);
filter: saturate(0.7) brightness(0.72) contrast(1.05);
will-change: opacity, transform;
}
.ab-hero-slide.is-active {
opacity: 1;
transform: scale(1);
transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1), transform 7.2s linear;
}
.ab-hero-slide::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(8,25,14,0.55) 0%, rgba(8,25,14,0.35) 30%, rgba(8,25,14,0.85) 100%),
radial-gradient(ellipse at 30% 70%, rgba(122, 99, 9, 0.06) 0%, transparent 60%);
}
/* Terrain caption — bottom-left, folio style */
.ab-hero-terrain {
position: absolute;
bottom: 32px; left: var(--pad-x);
z-index: 5;
display: flex; flex-direction: column; gap: 4px;
font-family: var(--body);
pointer-events: none;
}
.ab-hero-terrain-label {
font-weight: 500;
font-size: 9.5px;
letter-spacing: 0.36em;
text-transform: uppercase;
color: rgba(122, 99, 9, 0.7);
}
.ab-hero-terrain-name {
font-family: var(--display);
font-weight: 400;
font-size: 20px;
color: var(--gold-deep);
line-height: 1;
letter-spacing: -0.005em;
transition: opacity 0.6s ease;
}
.ab-hero-terrain-place {
font-family: var(--body);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(244, 236, 217, 0.65);
margin-top: 6px;
transition: opacity 0.6s ease;
}
.ab-hero-terrain.is-changing .ab-hero-terrain-name,
.ab-hero-terrain.is-changing .ab-hero-terrain-place {
opacity: 0;
}
/* Dots — bottom-right */
.ab-hero-dots {
list-style: none;
position: absolute;
bottom: 38px; right: var(--pad-x);
z-index: 5;
display: flex; gap: 8px;
align-items: center;
}
.ab-hero-dots li button {
display: block;
width: 28px; height: 1px;
background: rgba(255, 255, 255, 0.22);
border: none;
padding: 8px 0;
cursor: pointer;
position: relative;
font-size: 0;
color: transparent;
background-clip: content-box;
transition: background 0.3s ease;
}
.ab-hero-dots li button:hover { background-color: rgba(255, 255, 255, 0.5); }
.ab-hero-dots li.is-active button { background-color: var(--brand-accent); }
.ab-hero-dots li.is-active button {
width: 44px;
}
/* Hero frame restored on top of slides */
.ab-hero-inner { z-index: 3; }
.ab-hero-grain { z-index: 2; }
@media (max-width: 768px) {
.ab-hero-terrain { bottom: 88px; }
.ab-hero-dots { bottom: 28px; right: var(--pad-x); }
.ab-hero-terrain-name { font-size: 20px; }
}
/* ============================================================
ABOUT — Vision / Mission / Pillars (.ab-ethos)
Matches existing .ab-* section pattern (origin, verticals etc.)
============================================================ */
.ab-ethos {
background: #08190E;
color: var(--brand-cream);
padding: var(--section-padding);
position: relative;
}
/* Section mark eyebrow — flip to gold on dark green */
.ab-ethos .ab-section-mark { color: rgba(244, 236, 217, 0.55); }
.ab-ethos .ab-section-mark .ab-section-num,
.ab-ethos .ab-section-mark .ab-section-name { color: var(--gold); }
.ab-ethos .ab-section-mark .ab-section-rule { background: var(--gold); }
/* Single-column head — eyebrow above headline, both left-aligned.
Fixes the empty-left-column issue when only the eyebrow lived there. */
.ab-ethos-head {
max-width: 880px;
margin-bottom: var(--space-2xl);
}
.ab-ethos-head .ab-section-mark { margin-bottom: var(--space-md); }
.ab-ethos-headline h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 50px);
line-height: 1;
letter-spacing: -0.018em;
color: var(--brand-cream);
margin: 0;
}
.ab-ethos-headline h2 .it { color: var(--brand-accent); }
.ab-ethos-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
border-top: 1px solid rgba(244, 236, 217, 0.18);
border-bottom: 1px solid rgba(244, 236, 217, 0.18);
padding: 56px 0;
margin-bottom: 32px;
}
.ab-ethos-block { display: flex; flex-direction: column; gap: 16px; }
.ab-ethos-label {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 500;
color: var(--gold);
}
.ab-ethos-block p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(244, 236, 217, 0.82);
margin: 0;
}
.ab-ethos-block p em { color: var(--gold); font-style: normal; }
.ab-pillars {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
padding: 0;
margin: 0;
counter-reset: pillar;
}
.ab-pillar {
display: flex;
flex-direction: column;
gap: 14px;
padding: var(--card-padding);
border: 1px solid rgba(244, 236, 217, 0.14);
background: rgba(244, 236, 217, 0.04);
transition: border-color 0.3s, background 0.3s;
}
.ab-pillar:hover { border-color: var(--gold); background: rgba(250, 203, 63, 0.06); }
.ab-pillar-icon {
width: 28px; height: 28px;
color: var(--gold);
}
.ab-pillar h4 {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-xl);
line-height: 1.2;
color: var(--brand-cream);
letter-spacing: -0.005em;
margin: 0;
}
.ab-pillar p {
font-family: var(--body);
font-weight: 300;
font-size: var(--text-md);
line-height: 1.7;
color: rgba(244, 236, 217, 0.78);
margin: 0;
}
@media (max-width: 968px) {
.ab-ethos-head { grid-template-columns: 1fr; gap: 28px; }
.ab-ethos-grid { grid-template-columns: 1fr; gap: 40px; padding: 40px 0; }
.ab-pillars { grid-template-columns: 1fr; gap: 20px; }
.ab-pillar { padding: 28px 22px; }
}
/* ============================================================
PROJECT AMENITIES — Kasauli Green and other residential
Reuses .project-* tokens; sits inside .project body section
============================================================ */
.project-amenities {
margin-top: 44px;
padding-top: 48px;
border-top: 1px solid var(--rule);
}
.project-amenities-label {
display: inline-block;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 500;
color: var(--gold-deep);
margin-bottom: 18px;
}
.project-amenities-title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(22px, 2.8vw, 34px);
line-height: 1.05;
letter-spacing: -0.018em;
color: var(--brand-ink);
margin: 0 0 36px;
}
.project-amenities-title .it { color: var(--brand-ink-soft); }
.project-amenities-grid {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
padding: 0;
margin: 0;
}
.project-amenities-grid li {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
border: 1px solid var(--rule);
background: rgba(14, 14, 14, 0.02);
font-family: var(--body);
font-size: 15px;
line-height: 1.4;
color: rgba(14, 14, 14, 0.82);
font-weight: 400;
transition: border-color 0.3s, background 0.3s;
}
.project-amenities-grid li:hover { border-color: var(--gold-deep); background: rgba(14, 14, 14, 0.04); }
.amenity-icon { width: 22px; height: 22px; color: var(--gold-deep); flex-shrink: 0; }
@media (max-width: 968px) {
.project-amenities-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
}
@media (max-width: 540px) {
.project-amenities-grid { grid-template-columns: 1fr; }
}
/* ============================================================
SECTION UTILITY CLASSES — for orphan blocks
Used by careers, foundation, journal etc. where there's no
project/snapshot/promise class providing rhythm
============================================================ */
.section {
padding: var(--section-padding);
border-top: 1px solid var(--color-rule-light);
}
.section--tight { padding: var(--section-padding-tight); }
.section--dark { background: var(--brand-primary); color: var(--brand-ink); }
.section--sand { background: var(--color-sand); color: var(--brand-ink); }
.section--cream { background: var(--color-canvas-light); color: var(--brand-ink); }
.section--ruled { border-top: 1px solid var(--color-rule-light); }
.section--first { border-top: none; }
.section--centered { text-align: center; }
.section--centered .wrap { max-width: 760px; }
/* ============================================================
ICON SYSTEM — brand-aligned tokens for ALL icons
Lucide icons inherit currentColor; we drive that here.
1.5px stroke, 24—24 default, gold accent.
============================================================ */
.icon,
[data-lucide] {
width: 24px;
height: 24px;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--color-accent);
flex-shrink: 0;
}
.icon-sm,
.icon-sm [data-lucide] { width: 18px; height: 18px; }
.icon-lg,
.icon-lg [data-lucide] { width: 36px; height: 36px; }
.icon-muted { color: var(--color-text-light-muted); }
.icon-on-light { color: var(--color-accent-deep); }
/* Inline SVG icons — keep stroke + currentColor */
svg.icon-inline { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* ============================================================
CUMULATIVE NOTE — sustainability.html closing stats section.
Dark-green editorial moment with brand-yellow accent.
============================================================ */
.cumulative-note { background: #08190E !important; color: var(--brand-cream); }
.cumulative-note .chapter, .cumulative-note .chapter span,
.cumulative-note .chapter-icon { color: var(--gold); }
.cumulative-note .chapter-rule { background: var(--gold); }
.cumulative-note__title {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3.6vw, 46px);
line-height: 0.96;
color: var(--brand-cream);
letter-spacing: var(--tracking-tight);
margin: var(--space-md) 0 var(--space-lg);
}
.cumulative-note__title .it { color: var(--brand-accent); }
.cumulative-note__intro {
max-width: 760px;
line-height: var(--leading-loose);
color: rgba(244, 236, 217, 0.78);
font-weight: 300;
margin-bottom: var(--space-xl);
}
.cumulative-note__foot {
text-align: center;
color: rgba(244, 236, 217, 0.55);
margin-top: var(--space-lg);
}
.cumulative-note .found-num { color: var(--brand-cream); }
.cumulative-note .found-num small { color: var(--gold); }
.cumulative-note .found-num-label { color: rgba(244, 236, 217, 0.7); }
.cumulative-note .found-num-icon { color: var(--gold); }
.cumulative-note .found-num-cell { border-right-color: rgba(244, 236, 217, 0.18); }
/* Chapter eyebrow on dark surfaces uses --gold; on light surfaces use --gold-deep */
.chapter--dark,
.chapter--dark .chapter-icon { color: var(--color-accent-deep); }
.chapter--dark .chapter-rule { background: var(--color-accent-deep); }
/* ============================================================
REDUCE TEMPLATED "AI-GENERATED" FEEL
---------------------------------------------------------------
The gold-italic accent (.it) was applied 30+ times on the
homepage alone — when everything is highlighted, nothing is.
Italic emphasis is enough on its own. Gold is reserved for
genuine hero moments only.
============================================================ */
/* Default .it — italic emphasis only, inherit colour */
.it { color: inherit; font-weight: inherit; }
/* Heading emphasis — refined warm gold (matches vamikabuilders editorial style).
Heroes use the same warm tone so colour family stays consistent with the
--gold-deep eyebrow accents used on light sections. */
.hero-boutique h1 .it,
.page-hero h1 .it,
.ab-hero-title .it {
color: var(--brand-accent);
}
.cta-strip:not(.sand) .cta-strip-head .it,
.solo-quote .it,
.footer-manifesto .it {
color: var(--color-accent-deep);
}
.cream .page-hero h1 .it,
.cta-strip.sand .cta-strip-head .it,
.snapshot.sand .cta-strip-head .it {
color: var(--color-accent-deep);
}
/* Card sub-line italic — quiet, inherit colour, slight tonal lift */
.vert-title em,
.tile-name em,
.promise-card h4 em,
.ab-vertical h3 em,
.ab-approach-cell h3 em {
color: inherit;
opacity: 0.72;
font-weight: inherit;
}
/* Chapter eyebrow — slight desaturation so it doesn't compete with heading */
.chapter { opacity: 0.82; }
.chapter:hover { opacity: 1; }
/* Reduce metronomic section borders. When two sections of same
surface follow each other, drop the top rule. */
.tile-grid-section + .tile-grid-section,
.tile-grid-section.cream + .promise.cream,
.promise.cream + .solo-testimonial,
.solo-testimonial + .split-band {
border-top: none;
}
/* Tile endorsement "A Vamika Project" badge — redundant visual noise.
Hidden visually but kept in DOM for the brand seal that occupies it. */
.tile-endorsement { display: none; }
/* Render flag — same — quieter, smaller, less screamy */
.tile-render-flag {
font-size: var(--text-xs) !important;
text-transform: none !important;
letter-spacing: 0.02em !important;
font-weight: 400 !important;
color: rgba(244, 236, 217, 0.6) !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
}
/* ============================================================
UNIFIED SECTION HEAD — single column editorial layout.
Fixes the empty-left-column issue across the entire site.
Eyebrow sits above headline (with body paragraph if any),
all left-aligned, capped at a readable width.
This overrides all the 2-col grid heads (0.7fr/1.3fr,
0.9fr/1.1fr, and same-column 1fr/1fr patterns) that
resulted in an orphaned eyebrow in the left column.
============================================================ */
.ab-founders-head,
.ab-approach-head,
.ab-geo-head,
.ab-verticals-head,
.ab-ethos-head,
.ab-process-head,
.sus-head,
.tile-head {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-md);
max-width: 920px;
margin-bottom: var(--space-2xl);
grid-template-columns: none;
}
/* Section-mark eyebrow inside the unified head — no extra alignment overrides */
.ab-founders-head .ab-section-mark,
.ab-approach-head .ab-section-mark,
.ab-geo-head .ab-section-mark,
.ab-verticals-head .ab-section-mark,
.ab-ethos-head .ab-section-mark,
.ab-process-head .ab-section-mark,
.sus-head .ab-section-mark { align-self: flex-start; }
/* Headline blocks (h2 + p) inside section heads */
.ab-founders-headline,
.ab-approach-headline,
.ab-geo-headline,
.ab-verticals-headline,
.ab-ethos-headline,
.ab-process-headline {
display: flex;
flex-direction: column;
gap: var(--space-md);
grid-template-columns: none;
width: 100%;
}
/* tile-head still has eyebrow+heading on left and supporting p on right -
that pattern works, but we make it flex column too if right col is empty */
.tile-head > * { width: 100%; }
/* Tile head h2 - editorial size for homepage What We Do / Portfolio heads */
.tile-head__title {
font-size: clamp(32px, 4vw, 54px);
line-height: 1.06;
}
/* Mobile already single column - nothing extra needed */
/* ============================================================
KASAULI GREEN PAGE — component classes (no inline styles)
Sections mirror the live vamikabuilders.com/kasauli-green/ layout.
============================================================ */
/* Shared: section heading centered above a grid */
.kg-section-head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--section-padding-y);
}
.kg-section-head h2 { margin: 16px 0 14px; }
.kg-section-head p {
line-height: 1.7;
color: rgba(14, 14, 14, 0.74);
font-weight: 300;
}
/* Benefits grid — 9-card editorial layout */
.kg-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--rule-strong);
}
.kg-benefit {
padding: var(--space-xl) var(--space-lg);
border-right: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.kg-benefit:nth-child(3n) { border-right: none; }
.kg-benefit:nth-last-child(-n+3) { border-bottom: none; }
.kg-benefit__num {
display: block;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-ink-soft);
margin-bottom: var(--space-sm);
}
.kg-benefit__title {
font-family: var(--display);
font-weight: 500;
font-size: 20px;
line-height: 1.22;
color: var(--brand-ink);
margin: 0 0 var(--space-xs);
}
.kg-benefit__title em {
color: var(--brand-ink-soft);
font-style: normal;
}
.kg-benefit__body {
font-family: var(--body);
font-weight: 300;
font-size: 14.5px;
line-height: 1.65;
color: rgba(14, 14, 14, 0.72);
margin: 0;
}
/* Residence (King/Prince Suite) — 2-col image + specs */
.kg-residence {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: start;
}
.kg-residence--reverse .kg-residence__media { order: 2; }
.kg-residence__media {
aspect-ratio: 4 / 3;
min-height: 360px;
background-size: cover;
background-position: center;
}
.kg-residence__specs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md) var(--space-lg);
margin: 0;
}
.kg-residence__spec-label {
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-ink-soft);
margin-bottom: 6px;
}
.kg-residence__spec-value {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-lg);
color: var(--brand-ink);
}
.kg-residence__dims-wrap {
margin-top: var(--space-xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--rule-strong);
}
.kg-residence__dims-label {
display: block;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-ink-soft);
margin-bottom: var(--space-md);
}
.kg-residence__dims {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-xs) var(--space-lg);
font-family: var(--body);
font-size: 14px;
line-height: 1.6;
color: rgba(14, 14, 14, 0.82);
}
.kg-residence__dims strong { color: var(--brand-ink); font-weight: 500; }
/* Location distance list — 2-col split */
.kg-location-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
border-top: 1px solid var(--rule-strong);
}
.kg-location-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--rule);
}
.kg-location-list li:nth-child(odd) { border-right: 1px solid var(--rule); }
.kg-location-list li:nth-last-child(-n+2) { border-bottom: none; }
.kg-location-list .place {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-md);
color: var(--brand-ink);
}
.kg-location-list .dist {
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
color: var(--brand-ink-soft);
}
/* Contact / Begin Your Journey split */
.kg-contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: start;
max-width: 1080px;
margin: 0 auto;
}
.kg-contact-grid h2 { margin: var(--space-md) 0 var(--space-md); }
.kg-contact-grid p { line-height: 1.7; color: rgba(14, 14, 14, 0.74); }
.kg-contact-card {
font-family: var(--body);
font-size: var(--text-md);
line-height: 1.7;
color: var(--brand-ink);
}
.kg-contact-card strong { font-weight: 500; }
.kg-contact-card a {
color: var(--gold-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Responsive */
@media (max-width: 968px) {
.kg-benefits-grid { grid-template-columns: 1fr 1fr; }
.kg-benefit:nth-child(3n) { border-right: 1px solid var(--rule); }
.kg-benefit:nth-child(2n) { border-right: none; }
.kg-benefit:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
.kg-benefit:nth-last-child(-n+2) { border-bottom: none; }
.kg-residence,
.kg-contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
.kg-residence--reverse .kg-residence__media { order: 0; }
.kg-location-list { grid-template-columns: 1fr; }
.kg-location-list li { border-right: none !important; }
.kg-location-list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.kg-location-list li:last-child { border-bottom: none; }
}
@media (max-width: 568px) {
.kg-benefits-grid { grid-template-columns: 1fr; }
.kg-benefit { border-right: none !important; }
.kg-benefit:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
.kg-benefit:last-child { border-bottom: none; }
.kg-residence__specs,
.kg-residence__dims { grid-template-columns: 1fr; }
}
/* ============================================================
KASAULI GREEN — RESTRUCTURED EDITORIAL LAYOUTS
Vertical-stack suite presentation + magazine gallery + map split.
============================================================ */
/* Residence v2 — vertical stack: full-width image, spec strip below, dims grid below */
.kg-suite { margin: 0 auto; max-width: 1240px; }
.kg-suite__media {
width: 100%;
aspect-ratio: 21 / 9;
background-size: cover;
background-position: center;
margin-bottom: var(--space-xl);
}
.kg-suite__specs {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border-top: 1px solid var(--rule-strong);
border-bottom: 1px solid var(--rule-strong);
margin-bottom: var(--space-xl);
}
.kg-suite__spec {
padding: var(--space-lg) var(--space-md);
text-align: center;
border-right: 1px solid var(--rule);
}
.kg-suite__spec:last-child { border-right: none; }
.kg-suite__spec-label {
display: block;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-ink-soft);
margin-bottom: var(--space-xs);
}
.kg-suite__spec-value {
font-family: var(--display);
font-weight: 500;
font-size: clamp(20px, 2vw, 26px);
color: var(--brand-ink);
letter-spacing: -0.01em;
}
.kg-suite__dims-head {
text-align: center;
margin-bottom: var(--space-lg);
}
.kg-suite__dims-eyebrow {
display: inline-block;
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-ink-soft);
}
.kg-suite__dims-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md) var(--space-2xl);
font-family: var(--body);
font-size: 14.5px;
line-height: 1.6;
color: rgba(14, 14, 14, 0.82);
max-width: 880px;
margin: 0 auto;
}
.kg-suite__dims-grid li {
display: flex;
justify-content: space-between;
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--rule);
}
.kg-suite__dims-grid strong { color: var(--brand-ink); font-weight: 500; letter-spacing: 0.01em; }
/* Style & Sophistication — magazine gallery */
.kg-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 240px;
gap: var(--space-sm);
}
.kg-gallery__item {
position: relative;
background-size: cover;
background-position: center;
overflow: hidden;
}
.kg-gallery__item--wide { grid-column: span 2; }
.kg-gallery__item--tall { grid-row: span 2; }
.kg-gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.kg-gallery__caption {
position: absolute;
bottom: var(--space-sm);
left: var(--space-sm);
font-family: var(--body);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
font-weight: 600;
color: var(--brand-cream);
background: rgba(8, 25, 14, 0.6);
border: 1px solid rgba(217, 182, 115, 0.4);
padding: 5px 10px;
backdrop-filter: blur(6px);
}
/* Community Club — image + amenities split */
.kg-club {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: var(--space-2xl);
align-items: start;
}
.kg-club__media {
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
min-height: 480px;
}
.kg-club__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.kg-club__item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
padding: var(--space-md);
border: 1px solid var(--rule);
background: var(--brand-cream-bone);
transition: border-color 0.3s ease, background 0.3s ease;
}
.kg-club__item:hover {
border-color: var(--gold-deep);
background: #FFFFFF;
}
.kg-club__icon {
flex: 0 0 28px;
width: 28px;
height: 28px;
color: var(--gold-deep);
}
.kg-club__label {
font-family: var(--display);
font-weight: 500;
font-size: var(--text-md);
color: var(--brand-ink);
line-height: 1.3;
}
.kg-club__sublabel {
display: block;
font-family: var(--body);
font-weight: 300;
font-size: 13px;
line-height: 1.5;
color: rgba(14, 14, 14, 0.7);
margin-top: 4px;
}
.kg-club__footnote {
margin-top: var(--space-xl);
font-family: var(--body);
font-style: italic;
font-size: 13px;
line-height: 1.65;
color: rgba(14, 14, 14, 0.65);
text-align: center;
}
/* Experience media block — video placeholder + stats below */
.kg-experience-media {
position: relative;
width: 100%;
aspect-ratio: 21 / 9;
background-size: cover;
background-position: center;
margin-bottom: var(--space-xl);
cursor: pointer;
}
.kg-experience-media::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(8, 25, 14, 0.55));
}
.kg-experience-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 84px;
height: 84px;
border-radius: 50%;
background: var(--brand-accent);
display: flex;
align-items: center;
justify-content: center;
border: none;
cursor: pointer;
transition: transform 0.3s ease;
z-index: 2;
}
.kg-experience-play:hover { transform: translate(-50%, -50%) scale(1.08); }
.kg-experience-play svg { width: 32px; height: 32px; color: var(--brand-ink); fill: currentColor; margin-left: 4px; }
/* Location map split */
.kg-location-split {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--space-xl);
align-items: stretch;
}
.kg-location-map {
width: 100%;
min-height: 460px;
border: 1px solid var(--rule-strong);
overflow: hidden;
}
.kg-location-map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
min-height: 460px;
}
/* When inside the split, the list collapses to a single column */
.kg-location-split .kg-location-list {
grid-template-columns: 1fr;
align-self: stretch;
}
.kg-location-split .kg-location-list li {
border-right: none;
}
.kg-location-split .kg-location-list li:last-child {
border-bottom: none;
}
/* Responsive */
@media (max-width: 968px) {
.kg-suite__specs { grid-template-columns: repeat(2, 1fr); }
.kg-suite__spec:nth-child(odd) { border-right: 1px solid var(--rule); }
.kg-suite__spec:nth-child(2n) { border-right: none; }
.kg-suite__spec { border-bottom: 1px solid var(--rule); }
.kg-suite__spec:nth-last-child(-n+1) { border-bottom: none; }
.kg-suite__dims-grid { grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-xl); }
.kg-gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
}
.kg-gallery__item--wide,
.kg-gallery__item--tall,
.kg-gallery__item--feature { grid-column: span 1; grid-row: span 1; }
.kg-club { grid-template-columns: 1fr; }
.kg-club__media { min-height: 360px; aspect-ratio: 16 / 10; }
.kg-location-split { grid-template-columns: 1fr; }
.kg-location-map { min-height: 320px; }
.kg-location-map iframe { min-height: 320px; }
.kg-experience-media { aspect-ratio: 16 / 9; }
}
@media (max-width: 568px) {
.kg-suite__media { aspect-ratio: 16 / 10; }
.kg-suite__specs { grid-template-columns: 1fr; }
.kg-suite__spec { border-right: none !important; }
.kg-suite__dims-grid { grid-template-columns: 1fr; }
.kg-gallery { grid-template-columns: 1fr; grid-auto-rows: 220px; }
.kg-club__list { grid-template-columns: 1fr; }
.kg-experience-play { width: 64px; height: 64px; }
.kg-experience-play svg { width: 24px; height: 24px; }
}
/* ============================================================
.post-body — Dynamic blog-post content (used by single.php)
Renders WordPress block-editor output (paragraphs, headings,
blockquotes, lists, images) with editorial v3 typography.
============================================================ */
.post-body p {
margin: 0 0 28px;
font-size: 17px;
line-height: 1.85;
color: rgba(8, 25, 14, 0.82);
}
.post-body p:first-of-type {
font-size: 19px;
line-height: 1.7;
color: rgba(8, 25, 14, 0.92);
}
.post-body h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 3vw, 38px);
line-height: 1.18;
color: var(--green-deep);
letter-spacing: -0.01em;
margin: 56px 0 24px;
}
.post-body h2 .it,
.post-body h2 em {
font-style: italic;
color: var(--brand-ink-soft);
font-weight: 400;
}
.post-body h3 {
font-family: var(--display);
font-weight: 500;
font-size: clamp(22px, 2.2vw, 26px);
line-height: 1.25;
color: var(--green-deep);
margin: 40px 0 16px;
}
.post-body h4 {
font-family: var(--body);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold-deep);
font-weight: 500;
margin: 36px 0 12px;
}
.post-body strong {
font-weight: 600;
color: var(--green-deep);
}
.post-body em {
font-style: italic;
color: rgba(8, 25, 14, 0.92);
}
.post-body a {
color: var(--gold-deep);
text-decoration: underline;
text-decoration-color: rgba(201, 164, 76, 0.4);
text-underline-offset: 3px;
transition: text-decoration-color 0.25s ease;
}
.post-body a:hover {
text-decoration-color: var(--gold-deep);
}
.post-body blockquote {
margin: 36px 0;
padding: 24px 28px;
border-left: 3px solid var(--gold-deep);
background: rgba(247, 243, 234, 0.6);
font-family: var(--display);
font-style: italic;
font-size: clamp(20px, 2.2vw, 24px);
line-height: 1.45;
color: var(--green-deep);
letter-spacing: -0.005em;
}
.post-body blockquote p { font-size: inherit; color: inherit; }
.post-body blockquote cite {
display: block;
margin-top: 14px;
font-family: var(--body);
font-style: normal;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brand-ink-soft);
}
.post-body ul,
.post-body ol {
margin: 0 0 28px;
padding-left: 24px;
}
.post-body li {
font-size: 17px;
line-height: 1.75;
color: rgba(8, 25, 14, 0.82);
margin-bottom: 10px;
}
.post-body img,
.post-body figure {
margin: 40px 0;
max-width: 100%;
height: auto;
}
.post-body figcaption {
margin-top: 12px;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(8, 25, 14, 0.55);
font-style: italic;
text-align: center;
}
.post-body hr {
border: 0;
height: 1px;
background: rgba(8, 25, 14, 0.12);
margin: 56px 0;
}
/* ============================================================
.journal-section — single-post template (single.php)
Multi-chapter editorial layout for dynamic blog posts.
============================================================ */
.journal-section { padding-block: clamp(64px, 8vw, 120px); }
.journal-section .chapter {
color: var(--brand-ink-soft);
margin-bottom: 36px;
display: flex;
align-items: center;
gap: 16px;
font-family: var(--display);
font-size: 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.journal-section .chapter-num {
font-style: italic;
font-weight: 500;
color: var(--gold-deep);
letter-spacing: 0;
text-transform: none;
font-size: 18px;
}
.journal-section .chapter-rule {
flex: 0 0 60px;
height: 1px;
background: var(--brand-ink-soft);
opacity: 0.5;
}
/* Lead paragraphs in the intro chapter — larger, editorial drop-in */
.post-body--lead p {
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.5;
letter-spacing: -0.005em;
color: var(--green-deep);
margin-bottom: 28px;
font-weight: 400;
}
.post-body--lead p:first-of-type { font-weight: 400; }
/* Forest-green sections: invert .post-body text to cream */
.journal-section--dark .chapter,
.section-dark-tall .post-body,
.section-dark-taller .post-body { color: rgba(244, 236, 217, 0.88); }
.journal-section--dark .chapter-num { color: var(--brand-accent); }
.journal-section--dark .chapter-rule { background: rgba(244, 236, 217, 0.4); }
.section-dark-tall .post-body p,
.section-dark-taller .post-body p { color: rgba(244, 236, 217, 0.88); }
.section-dark-tall .post-body h2,
.section-dark-tall .post-body h3,
.section-dark-taller .post-body h2,
.section-dark-taller .post-body h3 { color: var(--brand-cream); }
.section-dark-tall .post-body strong,
.section-dark-taller .post-body strong { color: #fff; font-weight: 600; }
.section-dark-tall .post-body em,
.section-dark-taller .post-body em { color: rgba(244, 236, 217, 0.95); }
.section-dark-tall .post-body a,
.section-dark-taller .post-body a {
color: var(--brand-accent);
text-decoration-color: rgba(250, 203, 63, 0.45);
}
.section-dark-tall .post-body a:hover,
.section-dark-taller .post-body a:hover { text-decoration-color: var(--brand-accent); }
.section-dark-tall .post-body li,
.section-dark-taller .post-body li { color: rgba(244, 236, 217, 0.88); }
.section-dark-tall .post-body blockquote,
.section-dark-taller .post-body blockquote {
background: rgba(244, 236, 217, 0.06);
border-left-color: var(--brand-accent);
color: var(--brand-cream);
}
.section-dark-tall .post-body blockquote cite,
.section-dark-taller .post-body blockquote cite { color: rgba(244, 236, 217, 0.55); }
.section-dark-tall .post-body hr,
.section-dark-taller .post-body hr { background: rgba(244, 236, 217, 0.18); }
/* Journal-card body — hard cap to 3 lines so cards stay uniform even if a
post's excerpt accidentally contains the full content. The PHP also
wp_trim_words() to ~28 words, this is the visual safety net. */
.journal-card-body {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.journal-card--featured .journal-card-body {
-webkit-line-clamp: 4;
}
.blog-details-page-hero h1{
color: #fff !important;
font-size: 46px !important;
line-height: 1.1em !important;
}