/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500;600;700&display=swap");

/* Global Theme Variables, Colors, Typography & Layout Settings */
:root {
--bs-breakpoint-xs: 0;
--bs-breakpoint-sm: 576px;
--bs-breakpoint-md: 768px;
--bs-breakpoint-lg: 992px;
--bs-breakpoint-xl: 1200px;
--bs-breakpoint-xxl: 1400px;

--forest: #0b2b26;
--gold: #c9a15d;
--gold-light: #F0D58A;
--gold-dark: #a87836;
--white: #f5f4f0;
--body: #d9d9d9;
--muted: #9d9d9d;
--marble-dark: #081714;
--marble-green: #143b34;

--serif: "Cormorant Garamond", serif;
--sans: "Inter", sans-serif;
--page-inset: clamp(18px, 1.5vw, 34px);
--content-left: clamp(92px, 8vw, 150px);

/* Equal spacing between detail sections */
--detail-section-gap: clamp(48px, 4vw, 64px);
}

/* Universal Box-Sizing Reset */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Root HTML Element */
html {
min-height: 100%;
background: var(--forest);
}

/* Base Page Styling */
body {
min-width: 320px;
min-height: 100%;
margin: 0;
overflow-x: hidden;
color: var(--white);
background: var(--forest);
font-family: var(--sans);
letter-spacing: 0.02em;
}

/* Default Link Styling */
a {
color: inherit;
text-decoration: none;
}

/* Accessible Keyboard Focus State */
a:focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 4px;
}

/* Main Coming Soon Hero Section */
.coming-soon {
position: relative;
display: grid;
min-height: 100vh;
min-height: 100svh;
overflow: hidden;
isolation: isolate;
background-color: var(--forest);
background-image:
linear-gradient(
90deg,
rgba(6, 28, 24, 0.99) 0%,
rgba(7, 35, 31, 0.97) 25%,
rgba(9, 39, 34, 0.76) 39%,
rgba(9, 39, 34, 0.34) 52%,
rgba(9, 39, 34, 0.05) 68%,
rgba(9, 39, 34, 0) 82%
),
radial-gradient(
ellipse at 21% 55%,
rgba(6, 37, 32, 0.88) 0%,
rgba(6, 37, 32, 0.46) 30%,
rgba(6, 37, 32, 0) 55%
),
linear-gradient(
180deg,
rgba(4, 18, 16, 0.1) 0%,
rgba(4, 18, 16, 0.34) 100%
),
url("images/jsv-group-real-estate-consultancy-coming-soon-faridabad-delhi-gurgaon-ncr.webp");
background-position: center right;
background-repeat: no-repeat;
background-size: cover;
}

/* Decorative Gold Screen Border */
.screen-border {
--notch-y: 92px;
position: absolute;
inset: var(--page-inset);
z-index: 30;
border: 0;
border-radius: 0;
background:
linear-gradient(var(--gold-light), var(--gold-light)) 0 0 / 100% 1.5px no-repeat,
linear-gradient(var(--gold-light), var(--gold-light)) 100% 0 / 1.5px 64% no-repeat,
linear-gradient(var(--gold-light), var(--gold-light)) 0 0 / 1.5px var(--notch-y) no-repeat;
pointer-events: none;
}

.screen-border::before {
content: "";
position: absolute;
top: var(--notch-y);
left: -42px;
width: 43px;
height: 1.5px;
background: var(--gold-light);
transform: rotate(-45deg);
transform-origin: right center;
}

/* Site Header & Logo Positioning */
.site-header {
display: none;
position: absolute;
top: clamp(54px, 7vh, 72px);
left: var(--content-left);
z-index: 10;
}

/* Brand Container */
.brand {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-transform: uppercase;
}

.brand-mark {
color: var(--gold-light);
font-family: var(--serif);
font-size: clamp(3rem, 3vw, 3.35rem);
font-weight: 600;
line-height: 0.78;
letter-spacing: 0;
text-shadow:
0 2px 0 var(--gold-dark),
0 10px 28px rgba(0, 0, 0, 0.34);
}

.brand-name {
padding-top: 0.66em;
padding-left: 0.66em;
color: var(--gold-light);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.66em;
}

.brand-line,
.corner-line {
display: block;
width: clamp(58px, 3.6vw, 86px);
height: 2px;
background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

/* Main Hero Content Area */
.hero-content {
position: absolute;
top: clamp(100px, 15vh, 180px);
left: var(--content-left);
z-index: 10;
width: min(660px, 48vw);
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.36);
}

/* Primary Headline */
.hero-title {
margin: 0;
color: var(--white);
font-family: var(--serif);
font-size: clamp(3rem, 3.5vw, 3.75rem);
font-weight: 500;
line-height: 0.96;
letter-spacing: 0;
text-transform: uppercase;
}

.hero-title span {
display: block;
white-space: nowrap;
}

.hero-title em {
background: linear-gradient(
180deg,
#fff4c7 0%,
#f6d98c 25%,
#e6c87a 50%,
#c99b3b 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-style: normal;
}

/* Service Categories / Business Types */
.category {
display: flex;
flex-wrap: wrap;
gap: 0.45em 0.75em;
margin: 22px 0 0;
color: var(--gold-light);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.55;
letter-spacing: 0.3em;
text-transform: uppercase;
}

/* Introductory Description Text */
.intro {
max-width: 600px;
margin: 22px 0 0;
color: var(--white);
font-size: 0.9375rem;
line-height: 1.58;
letter-spacing: 0.04em;
}

/* Decorative Gold Divider */
.gold-rule {
width: 210px;
height: 2px;
margin: 28px 0 var(--detail-section-gap);
background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
}

/* Launch / Coming Soon Notice */
.launch-note {
display: flex;
align-items: center;
gap: 20px;
color: var(--gold-light);
text-transform: uppercase;
}

.launch-note p {
margin: 0;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.65;
letter-spacing: 0.5em;
}

.mini-building {
display: inline-flex;
width: 42px;
height: 42px;
flex: 0 0 auto;
}

svg {
display: block;
width: 100%;
height: 100%;
}

svg path,
svg rect,
svg circle {
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}

/* Service Locations Display */
.locations {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.8em 1em;
margin: var(--detail-section-gap) 0 0;
color: var(--white);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1.6;
letter-spacing: 0.36em;
text-transform: uppercase;
}

.pin-icon {
display: inline-flex;
width: 26px;
height: 26px;
flex: 0 0 auto;
color: var(--gold-light);
}

.pin-icon svg path {
fill: currentColor;
stroke: currentColor;
}

.pin-icon svg circle {
fill: var(--forest);
stroke: var(--forest);
}

/* Contact Information Grid */
.contact-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(22px, 2.7vw, 48px);
width: min(850px, calc(100vw - var(--content-left) - 40px));
margin: var(--detail-section-gap) 0 0;
font-style: normal;
}

/* Individual Contact Item */
.contact-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 16px;
min-width: 0;
}

.contact-icon {
display: inline-grid;
width: 46px;
height: 46px;
place-items: center;
color: var(--gold-light);
border: 1px solid var(--gold-light);
border-radius: 50%;
}

.contact-icon svg {
width: 23px;
height: 23px;
}

.contact-copy {
display: grid;
min-width: 0;
padding-left: 18px;
border-left: 1px solid rgba(215, 178, 106, 0.74);
}

.label {
margin-bottom: 7px;
color: var(--gold-light);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
}

.contact-copy a {
color: var(--white);
font-size: 0.8125rem;
line-height: 1.35;
overflow-wrap: anywhere;
}

.contact-copy a:hover,
.site-footer a:hover {
color: var(--gold-light);
}

/* Decorative Bottom Corner Panel */
.corner-panel {
position: absolute;
right: 0;
bottom: 0;
z-index: 8;
display: flex;
width: min(23.5vw, 460px);
min-width: 390px;
height: 33vh;
min-height: 290px;
flex-direction: column;
align-items: center;
justify-content: flex-end;
padding: 0 22px 32px 178px;
color: var(--gold-light);
background: rgba(11, 43, 38, 0.5);
clip-path: polygon(100% 0, 100% 100%, 0 100%);
pointer-events: none;
}

.corner-panel::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: var(--gold-light);
clip-path: polygon(0 100%, 100% 0, 100% 2px, 2px 100%);
}

.corner-building,
.corner-panel p,
.corner-line {
position: relative;
z-index: 2;
}

.corner-building {
display: block;
width: 48px;
height: 58px;
margin-bottom: 12px;
}

.corner-panel p {
max-width: 240px;
margin: 0;
font-size: 0.625rem;
font-weight: 600;
line-height: 1.75;
letter-spacing: 0.28em;
text-align: center;
text-transform: uppercase;
}

.corner-line {
width: 74px;
margin-top: 18px;
}

/* Footer Information */
.site-footer {
position: absolute;
right: clamp(34px, 4vw, 76px);
bottom: 28px;
left: var(--content-left);
z-index: 12;
max-width: 720px;
color: rgba(245, 244, 240, 0.78);
font-size: 0.625rem;
line-height: 1.55;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.site-footer p {
margin: 0;
}

.site-footer a {
color: var(--gold-light);
}

/* ========================================
RESPONSIVE BREAKPOINTS
======================================== */

/* Large desktop */
@media (min-width: 1401px) {
.contact-list {
width: min(850px, calc(100vw - var(--content-left) - 40px));
}
}

/* Desktop and small laptop */
@media (max-width: 1400px) {
:root {
--content-left: 64px;
}

.hero-content {
width: min(610px, 50vw);
}

.contact-list {
grid-template-columns: 1fr;
gap: 18px;
width: min(430px, 100%);
}

.corner-panel {
width: 29vw;
min-width: 360px;
padding-left: 156px;
}
}

@media (max-width: 1200px) {
.hero-content {
width: min(570px, 56vw);
}

.hero-title {
font-size: clamp(3rem, 4.5vw, 3.5rem);
}
}

/* Tablet and below */
@media (max-width: 1024px) {
:root {
--content-left: 52px;
--detail-section-gap: 44px;
}

.coming-soon {
display: flex;
min-height: 100svh;
flex-direction: column;
overflow: hidden;
background-image:
linear-gradient(
180deg,
rgba(11, 43, 38, 0.38) 0%,
rgba(11, 43, 38, 0.7) 38%,
rgba(11, 43, 38, 0.97) 75%,
var(--forest) 100%
),
url("images/jsv-group-property-advisory-coming-soon-mobile.webp");
background-position: center top;
background-size: cover;
}

.screen-border {
position: absolute;
inset: 20px;
}

.site-header {
display: block;
top: 54px;
left: var(--content-left);
}

.brand-mark {
font-size: 3.75rem;
}

.brand-name {
font-size: 0.625rem;
}

.hero-content {
position: relative;
top: auto;
left: auto;
width: auto;
max-width: 760px;
margin: 0;
padding: clamp(280px, 34vh, 400px) var(--content-left) 40px;
}

.hero-title {
font-size: clamp(3.25rem, 7vw, 4rem);
}

.hero-title span {
white-space: normal;
}

.category,
.locations {
max-width: 650px;
}

.contact-list {
grid-template-columns: 1fr;
width: 100%;
max-width: 460px;
}

.corner-panel {
display: none;
}

.site-footer {
position: relative;
right: auto;
bottom: auto;
left: auto;
width: auto;
max-width: none;
margin: -18px 44px 42px;
text-align: center;
}
}

/* Short desktop/laptop viewport */
@media (min-width: 1025px) and (max-height: 820px) {
:root {
--detail-section-gap: 36px;
}

.site-header {
top: 42px;
}

.hero-title {
font-size: 3rem;
}

.category,
.intro {
margin-top: 14px;
}

.gold-rule {
margin-top: 18px;
}

.contact-list {
gap: 14px;
}
}

/* Small tablet / large phone */
@media (max-width: 768px) {
:root {
--content-left: 32px;
--detail-section-gap: 40px;
}

.coming-soon {
overflow: hidden auto;
}

.screen-border {
inset: 16px;
}

.screen-border::before {
left: -34px;
width: 35px;
}

.site-header {
top: 40px;
left: 36px;
}

.brand {
gap: 7px;
}

.brand-mark {
font-size: 3.2rem;
}

.brand-name {
padding-left: 0.55em;
font-size: 0.525rem;
letter-spacing: 0.55em;
}

.brand-line {
width: 46px;
}

.hero-content {
padding: 180px 32px 34px;
}

.hero-title {
max-width: 620px;
font-size: clamp(2.65rem, 8.5vw, 3.5rem);
}

.category {
margin-top: 22px;
font-size: 0.6875rem;
line-height: 1.7;
letter-spacing: 0.3em;
}

.intro {
max-width: 550px;
margin-top: 24px;
font-size: 0.8125rem;
}

.gold-rule {
width: min(210px, 60vw);
margin-top: 32px;
}

.launch-note {
gap: 18px;
}

.launch-note p {
font-size: 0.625rem;
letter-spacing: 0.32em;
}

.locations {
gap: 0.65em 0.78em;
font-size: 0.625rem;
line-height: 1.8;
letter-spacing: 0.28em;
}

.contact-list {
gap: 20px;
}

.contact-item {
gap: 18px;
}

.contact-icon {
width: 44px;
height: 44px;
}

.contact-copy {
padding-left: 20px;
}

.corner-panel {
min-height: 270px;
padding-top: 96px;
padding-bottom: 56px;
}

.site-footer {
margin: -10px 34px 38px;
font-size: 0.6875rem;
line-height: 1.7;
}
}

/* Compact phones */
@media (max-width: 640px) {
.site-header {
left: 32px;
}

.hero-content {
padding-right: 30px;
padding-left: 30px;
}

.hero-title {
max-width: 520px;
font-size: clamp(2.45rem, 9vw, 3.1rem);
}

.category {
display: block;
}

.category span {
display: inline;
}

.contact-list {
max-width: 420px;
}
}

/* Phone */
@media (max-width: 480px) {
:root {
--detail-section-gap: 36px;
}

.screen-border {
inset: 14px;
}

.site-header {
top: 34px;
left: 30px;
}

.brand-mark {
font-size: 3rem;
}

.brand-name {
font-size: 0.475rem;
}

.hero-content {
padding: 170px 28px 32px;
}

.hero-title {
font-size: clamp(2.15rem, 10vw, 2.75rem);
}

.category {
font-size: 0.5625rem;
letter-spacing: 0.24em;
}

.intro {
font-size: 0.75rem;
}

.launch-note {
align-items: flex-start;
gap: 15px;
}

.mini-building {
width: 38px;
height: 38px;
}

.launch-note p {
font-size: 0.6875rem;
line-height: 1.7;
letter-spacing: 0.24em;
}

.locations {
align-items: flex-start;
font-size: 0.625rem;
letter-spacing: 0.2em;
}

.pin-icon {
width: 23px;
height: 23px;
}

.contact-item {
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px;
}

.contact-icon {
width: 48px;
height: 48px;
}

.contact-icon svg {
width: 21px;
height: 21px;
}

.contact-copy {
padding-left: 16px;
}

.label {
margin-bottom: 5px;
font-size: 10px;
}

.contact-copy a {
font-size: 0.75rem;
}

.corner-panel {
min-height: 245px;
padding: 88px 26px 48px;
}

.corner-building {
width: 52px;
height: 62px;
margin-bottom: 14px;
}

.corner-panel p {
font-size: 10px;
letter-spacing: 0.24em;
}

.corner-line {
width: 62px;
}

.site-footer {
margin-right: 24px;
margin-bottom: 38px;
margin-left: 24px;
font-size: 0.625rem;
line-height: 1.75;
letter-spacing: 0.04em;
}
}

/* Very small phone */
@media (max-width: 360px) {
.screen-border {
inset: 10px;
}

.screen-border::before {
left: -30px;
width: 31px;
}

.site-header {
top: 30px;
left: 25px;
}

.brand-mark {
font-size: 2.65rem;
}

.hero-content {
padding: 185px 24px 30px;
}

.hero-title {
font-size: 2rem;
}

.category {
font-size: 0.525rem;
letter-spacing: 0.19em;
}

.launch-note p {
font-size: 0.625rem;
letter-spacing: 0.19em;
}

.locations {
font-size: 0.5625rem;
letter-spacing: 0.16em;
}

.contact-item {
grid-template-columns: 42px minmax(0, 1fr);
gap: 10px;
}

.contact-icon {
width: 42px;
height: 42px;
}

.contact-copy {
padding-left: 12px;
}
}

/* Landscape phones / very short screens */
@media (max-height: 500px) and (orientation: landscape) {
:root {
--detail-section-gap: 32px;
}

.coming-soon {
overflow: hidden auto;
background-position: center;
}

.screen-border {
position: absolute;
inset: 10px;
}

.site-header {
top: 24px;
left: 38px;
}

.brand-mark {
font-size: 2.35rem;
}

.brand-name {
font-size: 0.425rem;
}

.hero-content {
padding: 130px 38px 32px;
}

.hero-title {
font-size: 2.25rem;
}

.category,
.intro {
margin-top: 14px;
}

.gold-rule {
margin-top: 20px;
margin-bottom: var(--detail-section-gap);
}

.locations,
.contact-list {
margin-top: var(--detail-section-gap);
}

.corner-panel {
margin-top: -60px;
}
}

/* Line extend on mobile */
@media (max-width: 768px) {

.screen-border{
position: absolute;
top: 16px;
left: 16px;
right: 16px;
}

}