/* GLOBAL */
body, html {
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	background: linear-gradient(to bottom, #0f0f0f, #1a1a1a);
	color: #eaeaea;
}

#fp-watermark {
	display: none !important;
}

/* NAVBAR (BIGGER + CLEAN) */
.gnb {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90px;
	padding: 0 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(10,10,10,0.85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	z-index: 999;
}

/* Language switcher */

.language-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 4px;
	border: 1px solid rgba(247,239,226,.2);
	border-radius: 999px;
	background: rgba(20,17,14,.38);
	transform: translateX(-70px);
}

.language-switcher button {
	min-width: 42px;
	border: 0;
	border-radius: 999px;
	padding: 8px 10px;
	color: rgba(247,239,226,.74);
	background: transparent;
	font: inherit;
	font-size: .74rem;
	font-weight: 800;
	cursor: pointer;
}

.language-switcher button:hover, .language-switcher button.is-active {
	color: #17120e;
	background: #d5b36d;
}

/* Logo */
.gnb .logo {
	color: white;
	font-weight: 500;
	text-decoration: none;
	font-size: 22px;
	letter-spacing: 2px;
	width: auto;
}

/* Center nav */
.gnb nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

/* Nav list */
.gnb nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 35px;
	align-items: center;
}

/* Nav links */
.gnb nav ul li a {
	color: #ccc;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	position: relative;
	padding: 6px 0;
	transition: 0.3s;
}

/* Accent color */
:root {
	--accent: #c6a96b;
}

.gnb nav ul li a:hover {
	color: white;
}

.gnb nav ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 1px;
	background: #c6a96b;
	transition: 0.3s;
}

.gnb nav ul li a:hover::after {
	width: 100%;
}

/* SECTIONS */
.section {
	position: relative;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	color: white;
	padding: 0 20px;
	overflow: hidden;
}

/* BACKGROUND LAYER (for zoom effect) */
.section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1);
	transition: transform 1.5s ease;
	z-index: 0;
}

/* DARK OVERLAY */
.section::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1;
}

/* KEEP TEXT ABOVE */
.section .text,
.section h1,
.section h2,
.section p,
.section a {
	position: relative;
	z-index: 2;
}

.section.active::before {
	transform: scale(1.08);
}

/* BACKGROUNDS */
.idx_story01 {
	background-image: url("../images/SPW60.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.idx_story02 {
	background-image: url("../images/VM909.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.idx_story03 {
	background-image: url("../images/NS823.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story01 {
	position: relative;
	overflow: hidden;
}

.hero-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.story01 .content {
	position: relative;
	z-index: 1;
}

.story01 .text {
	max-width: 600px;
	margin-left: 80px; /* adjust this to match your screenshot */
	text-align: left;
}

.story02 {
	background: #0d0b09;
	padding: 120px 80px;
	color: #f3eee8;
}

.story02-top {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 50px;
	align-items: center;
	margin-bottom: 60px;
}

.story02 .eyebrow {
	display: block;
	width: 100%;
	text-align: center !important;
	margin-left: auto;
	margin-right: auto;
}
.story02 .intro-text {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 30px auto;
}

.eyebrow {
	color: #b89457;
	font-size: .75rem;
	letter-spacing: 3px;
	margin-bottom: 20px;
}

.story02-copy h2 {
	font-family: "Cormorant Garamond", serif;
	font-size: clamp(3rem,5vw,6rem);
	line-height: .95;
	font-weight: 400;
	margin-bottom: 30px;
}

.intro-text {
	max-width: 700px;
	color: rgba(255,255,255,.7);
	line-height: 1.8;
	margin-bottom: 40px;
}

.story02-stats {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	border: 1px solid rgba(198,169,107,.25);
}

.stat {
	padding: 22px 28px;
	border-right: 1px solid rgba(198,169,107,.15);
}

.stat:last-child {
	border-right: none;
}

.stat strong {
	display: block;
	color: #c6a96b;
	font-size: 1.8rem;
	margin-bottom: 4px;
}

.stat span {
	font-size: .75rem;
	letter-spacing: 1px;
	color: rgba(255,255,255,.65);
}

.story02-image {
	border: 1px solid rgba(198,169,107,.2);
	border-radius: 8px;
	overflow: hidden;
}

.story02-image img {
	width: 100%;
	display: block;
}

.story02-features {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}

.story02-features article {
	padding: 30px;
	border: 1px solid rgba(198,169,107,.15);
	border-radius: 8px;
	background: rgba(255,255,255,.02);
}

.story02-features h3 {
	margin-bottom: 15px;
	font-size: 1.1rem;
}

.story02-features p {
	color: rgba(255,255,255,.7);
	line-height: 1.7;
}

.intro-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin-top: 30px;
	overflow: hidden;
	border: 1px solid rgba(247,239,226,.16);
	border-radius: 8px;
	background: rgba(247,239,226,.16);
}

.intro-stats span {
	display: grid;
	gap: 4px;
	padding: 18px;
	color: #c9bca6;
	background: #211c17;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.intro-stats strong {
	color: #c7a365;
	font-family: Georgia, serif;
	font-size: 1.45rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.product-structure-visual {
	margin: 0;
	overflow: hidden;
	background: #0f0d0a;
	border: 1px solid rgba(247,239,226,.18);
	border-radius: 8px;
	box-shadow: 0 32px 90px rgba(0,0,0,.34);
}

.product-structure-visual img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.product-structure-visual figcaption {
	padding: 12px 14px;
	color: #c9bca6;
	font-size: .86rem;
	border-top: 1px solid rgba(247,239,226,.12);
}

.story02-feature .intro-panel {
	grid-column: 1 / -1;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 8px;
}

.intro-panel {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.intro-panel article {
	min-height: 150px;
	padding: 22px;
	background: rgba(33,28,23,.82);
	border: 1px solid rgba(247,239,226,.16);
	border-radius: 8px;
}

.intro-panel strong, .intro-panel span {
	display: block;
}

.intro-panel strong {
	color: #f7efe2;
	font-size: 1.15rem;
}

.intro-panel span {
	margin-top: 8px;
	color: #c9bca6;
	line-height: 1.55;
}

.story03 {
	background-image: url("../example-photos/PM017 PNC50_example.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story04 {
	background-image: url("../example-photos/SPW41 SPW42_example.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story05 {
	background-image: url("../example-photos/VM909_example.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story06 {
	background-image: url("../example-photos/PM014_example.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story07 {
	background-image: url("../images/LW120.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* TEXT */
h1 {
	font-size: 64px;
	font-family: 'Playfair Display', serif;
	letter-spacing: 2px;
}

h2 {
	font-size: 42px;
	font-family: 'Playfair Display', serif;
}

p {
	font-size: 18px;
	max-width: 600px;
	color: #bbb;
}

/* FOOTER */

.footer {
	background: #111;
	color: #d6d6d6;
	padding: 60px 80px;
	border-top: 1px solid rgba(255,255,255,.08);
}

.footer-content {
	max-width: 1200px;
	margin: 0 auto 0 0;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 50px;
}

.footer article {
	flex: 1;
	max-width: 600px;
}


.footer article p:first-child {
	color: #c9a96e; /* warm luxury gold */
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .85rem;
	margin-bottom: 20px;
}

.footer article ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer article li {
	margin-bottom: 14px;
	line-height: 1.7;
}

.footer a {
	color: #f2f2f2;
	text-decoration: none;
	transition: .3s;
}

.footer a:hover {
	color: #c9a96e;
}

.map-card {
	width: 360px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 10px 30px rgba(0,0,0,.3);
	padding-left: 0;
}

.map-card iframe {
	width: 100%;
	height: 260px;
	border: 0;
	display: block;
}

.footer .logo {
	display: block;
	margin-top: 50px;
	padding-top: 25px;
	border-top: 1px solid rgba(255,255,255,.08);
	color: #888;
	text-decoration: none;
	letter-spacing: 3px;
	text-transform: uppercase;
	font-size: .8rem;
}

/* COMMON SECTIONS */
.gallery-common-section,
.simulation-common-section,
.product-common-section,
.help-common-section {
	padding: 100px 20px;
	background: #0f0f0f;
}

/* SECTION HEADERS */
.gallery-section__header,
.simulation-section__header,
.product-section__header,
.help-section__header {
	text-align: center;
	margin-bottom: 50px;
	border-radius: 6px;
	background: transparent;
	padding: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	width: 500px;
	margin: 0 auto 50px auto;
}

.gallery-section__header h2,
.simulation-section__header h2,
.product-section__header h2,
.help-section__header h2 {
	font-size: 2.2rem;
	color: white;
}

/* GRID */
.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap: 25px;
	max-width: 1600px;
	margin: 0 auto;
}

/* ITEMS */

.simulation__item,
.product__item,
.help__item {
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* IMAGES */

.simulation__item img,
.product__item img,
.help__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}


.simulation__item:hover img,
.product__item:hover img,
.help__item:hover img {
	transform: scale(1.05);
}

/* CAPTION */

.simulation__item figcaption,
.product__item figcaption,
.help__item figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
	color: white;
	padding: 20px;
	opacity: 0;
	transition: 0.3s;
	font-size: 14px;
}


.simulation__item:hover figcaption,
.product__item:hover figcaption,
.help__item:hover figcaption {
	opacity: 1;
}

/* GALLERY ONLY */
.gallery__item {
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: zoom-in;
}

/* remove default figure spacing if using <figure> */
.gallery__item figure {
	margin: 0;
}

/* gallery images */
.gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}

.gallery__item:hover img {
	transform: scale(1.05);
}

.gallery-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.92);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	visibility: hidden;
	transition: .25s ease;
	z-index: 9999;
}

.gallery-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.gallery-lightbox figure {
	margin: 0;
	max-width: 95vw;
	max-height: 95vh;
}

.gallery-lightbox img {
	display: block;
	max-width: 95vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	object-fit: contain; /* show full image */
	transition: transform .2s ease;
}

.gallery-lightbox figcaption {
	color: white;
	text-align: center;
	margin-top: 12px;
}

/* TABS */
.tabs {
	display: flex;
	justify-content: center;
	margin: 30px 0;
}

.tab-btn {
	padding: 12px 25px;
	border: 1px solid rgba(255,255,255,0.2);
	cursor: pointer;
	background: transparent;
	color: white;
	margin: 0 5px;
	transition: 0.3s;
}

.tab-btn.active,
.tab-btn:hover {
	background: #c6a96b;
	color: black;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

/* TECH DATA */
.tech-data {
	width: 90%;
	margin: 80px auto;
	font-size: 20px;
	color: #ccc;
}

.tech-list {
	border-top: 1px solid rgba(255,255,255,0.1);
}

.tech-row {
	display: grid;
	grid-template-columns: 50px 150px 1fr 40px;
	align-items: center;
	padding: 15px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	transition: 0.2s;
}

.tech-row:hover {
	background: rgba(255,255,255,0.03);
}

.col-title {
	color: white;
}

.col-download {
	color: #aaa;
}

.col-download:hover {
	color: #c6a96b;
}

/* Search Bar */
.search-wrapper {
	display: flex;
	justify-content: center; /* center horizontally */
	align-items: center;
	width: 100%;
	/* FUTURE CONTROL */
	transform: translateX(0px); /* change this later to move left/right */
	margin-top: 60px; /* vertical spacing */
}

.autocomplete-container {
	position: relative;
	width: 700px; /* slightly tighter = more premium feel */
}

.input-group {
	display: flex;
	gap: 10px;
}

#autocomplete-input {
	flex: 1;
	padding: 14px 16px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px;
	background: #fafafa;
	transition: all 0.25s ease;
}

#autocomplete-input:focus {
	outline: none;
	border-color: #999;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.input-group button {
	padding: 0 22px;
	border: none;
	border-radius: 8px;
	background: #c6a96b; /* luxury = dark, minimal */
	color: white;
	font-weight: 500;
	letter-spacing: 0.5px;
	transition: all 0.25s ease;
}

.input-group button:hover {
	background: #333;
}

.autocomplete-suggestions {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	background: white;
	border-radius: 10px;
	border: 1px solid #eee;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	overflow: hidden;
	max-height: 280px;
	overflow-y: auto;
	z-index: 1000;
}

/* ITEMS */
.autocomplete-suggestion {
	padding: 14px 16px;
	font-size: 14px;
	color: #333;
	transition: background 0.2s ease;
}

.autocomplete-suggestion:hover {
	background: #f5f5f5;
}

.autocomplete-suggestion.highlight {
	background: #111;
	color: white;
}

/* INQUIRIES */

#inquire.active {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 80vh;
	background: #0f0f0f;
	position: relative;
}

/* Container */
#inquire .inquiry-wrap {
	width: 100%;
	max-width: 750px;
	padding: 60px 50px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(12px);
	border-radius: 12px;
}

/* Layout */
#inquire .grid-container {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

#inquire .input-group {
	position: relative;
}

/* Inputs (scoped) */
#inquire .form-control {
	width: 100%;
	padding: 14px 10px;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 14px;
	letter-spacing: 0.5px;
	transition: all 0.3s ease;
}

/* Placeholder */
#inquire .form-control::placeholder {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 300;
}

/* Focus */
#inquire .form-control:focus {
	outline: none;
	border-bottom: 1px solid #d4af37;
}

/* TEXTAREA (big inquiry box) */
#inquire textarea.form-control {
	min-height: 160px;
	padding: 16px 10px;
	resize: vertical; /* allow resize but controlled */
	line-height: 1.6;
}


/* Title */
#inquire::before {
	content: "INQUIRY";
	position: absolute;
	top: 40px;
	font-size: 12px;
	letter-spacing: 4px;
	color: rgba(255, 255, 255, 0.25);
}

/* GUIDE */
/* ---------- HERO ---------- */

.resource-hero {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 60px;
	padding: 40px 20px;
}

.resource-hero h1 {
	font-size: 2.5rem;
	margin: 10px 0 20px;
}

.resource-hero p {
	max-width: 700px;
	margin: 0 auto 25px;
	line-height: 1.6;
	color: #666;
}

/* ---------- VIDEO GRID ---------- */

.guide-wrap {
	margin-bottom: 80px;
}

.guide-wrap .grid-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.guide-wrap article {
	background: #111;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	overflow: hidden;
}

.guide-wrap video {
	display: block;
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
}

.guide-wrap strong {
	display: block;
	padding: 15px 15px 5px;
	font-size: 1.1rem;
}

.guide-wrap span {
	display: block;
	padding: 0 15px 15px;
	color: #666;
}


/* PDF SECTION */

.catalog-viewer {
	margin-top: 80px;
	padding-top: 50px;
	border-top: 1px solid #ddd;
}

.section-head {
	text-align: center;
	margin-bottom: 25px;
}

.catalog-viewer {
	max-width: 1500px;
	margin: 80px auto 0;
	padding-top: 50px;
	border-top: 1px solid #ddd;
}

.catalog-viewer h2 {
	margin-top: 10px;
	font-size: 2rem;
}

.pdf-actions {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 25px;
	flex-wrap: wrap;
}

.pdf-frame {
	width: 100%;
	height: 1000px;
	border: 1px solid #ddd;
	border-radius: 12px;
	background: #fff;
}
/* Button */
.btn-primary {
	margin-top: 20px;
	padding: 14px;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	transition: all 0.3s ease;
	cursor: pointer;
	border: none;
	border-radius: 8px;
	background: #c6a96b; /* luxury = dark, minimal */
	color: white;
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* Button hover (premium feel) */
.btn-primary:hover {
	background: #d4af37;
	color: #0f0f0f;
}

/* Back button for color sim */

.back_sim {
	display: flex;
	justify-content: center;
	/* move content upward instead of dead-center */
	align-items: flex-start;
}

/* OVERLAY */

/* MAIN LAYOUT */
.viewer-layout {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding: 40px;
	margin-left: 300px;
}

/* ROOM AREA */
.room-scene {
	position: relative;
	width: 900px;
	overflow: hidden;
}

/* ORIGINAL IMAGE */
.original-room {
	width: 100%;
	display: block;
}

/* MATERIAL MODE */
.material-view {
	position: absolute;
	inset: 0;
	/* hidden by default */
	display: none;
}

/* MATERIAL TEXTURE */
.material-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	mix-blend-mode: normal;
	opacity: 0.95;
	z-index: 1;
}

/* ROOM CUTOUT PNG */
.room-top {
	position: relative;
	width: 100%;
	display: block;
	z-index: 2;
}

/* RIGHT PANEL */
.materials-panel {
	width: 220px;
	margin-left: 100px;
	/* move slightly upward */
	margin-top: -15px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* MATERIAL CARD */
.overlay {
	margin-bottom: 20px;
	cursor: pointer;
}

/* MATERIAL IMAGE */
.overlay img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
	transition: transform 0.2s ease;
}

.overlay img:hover {
	transform: scale(1.03);
}

/* MATERIAL NAME */
.overlay figcaption {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	color: white;
}


/* ==========================================
   MOBILE & RESPONSIVE NAVIGATION STYLES
   ========================================== */

/* Tablet & Smaller Desktops (Shrink fonts to prevent overlapping) */
@media screen and (max-width: 1024px) {
	.gnb {
		padding: 0 24px;
		height: 75px;
	}

	.gnb .logo {
		font-size: 18px;
		letter-spacing: 1px;
	}

	.gnb nav {
		position: static; /* Remove absolute centering */
		transform: none;
	}

	.gnb nav ul {
		gap: 20px; /* Tighten standard spacing */
	}
}

/* Mobile Devices (Under 768px) */
@media screen and (max-width: 768px) {
	.gnb {
		height: 65px;
		padding: 0 20px;
	}

	/* Wrap long text to prevent layout-breaking spillover */
	.gnb .logo {
		font-size: 15px;
		letter-spacing: 1px;
		max-width: 60%;
		line-height: 1.3;
		display: block;
	}

	/* Target the container wrapping your ul list */
	.menu-toggle {
		position: fixed;
		top: 65px; /* Directly below header */
		left: 0;
		width: 100%;
		background: rgba(10, 10, 10, 0.96);
		backdrop-filter: blur(20px);
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		padding: 20px 0;
		/* Hidden state by default */
		display: none;
	}

	/* Quick Class to Toggle via JS later */
	.menu-toggle.is-open {
		display: block;
	}

	/* Change flex direction from row to stack vertically */
	.gnb nav ul {
		flex-direction: column;
		gap: 0;
		width: 100%;
	}

	.gnb nav ul li {
		width: 100%;
		text-align: center;
	}

	.gnb nav ul li a {
		display: block;
		padding: 15px 0;
		font-size: 15px;
		width: 100%;
	}

	.gnb nav ul li a::after {
		display: none; /* Hide desktop bottom-line animations */
	}

	/* Global Typography adjustments for mobile readability */
	h1 {
		font-size: 36px !important;
	}

	h2 {
		font-size: 28px !important;
	}

	p {
		font-size: 15px !important;
	}

	/* Structural grids down to single column layout */
	.grid-container,
	.guide-wrap .grid-container,
	.footer-content {
		grid-template-columns: 1fr !important;
		flex-direction: column;
		gap: 30px;
	}

	.map-card {
		width: 100%;
	}
}

/* --- Dropdown Menu Engine --- */
/* --- Dropdown Menu Engine --- */

/* Ensure the parent list item serves as the structural base */
.gnb nav ul li.dropdown {
	position: relative;
	display: inline-block;
}

/* Hide the container by default and strip parent global flex mechanics */
.gnb nav ul li.dropdown .dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%); /* Centers the dropdown perfectly under the link */
	background: rgba(15, 15, 15, 0.98); /* Deep dark luxury background */
	min-width: 220px;
	box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	z-index: 1000;
	list-style: none;
	padding: 8px 0;
	margin: 0;
	/* Explicitly reset the global horizontal flex layout back to a stack */
	display: none;
	flex-direction: column;
	gap: 0;
}

/* Hard reset to prevent dropdown list items from acting like parent elements */
.gnb nav ul li.dropdown .dropdown-content li {
	width: 100%;
	text-align: left;
	padding: 0;
	margin: 0;
}

/* Reset and style link elements inside the dropdown box */
.gnb nav ul li.dropdown .dropdown-content li a {
	color: #bbb !important;
	padding: 12px 20px !important;
	text-decoration: none !important;
	display: block !important;
	font-size: 13px !important;
	letter-spacing: 1px !important; /* Cleaner look for secondary options */
	text-transform: none !important; /* Removes forced uppercase */
	transition: all 0.2s ease !important;
	width: 100%;
	box-sizing: border-box;
}

/* Remove the animated bottom line accent from dropdown links */
.gnb nav ul li.dropdown .dropdown-content li a::after {
	display: none !important;
}

/* Smooth hover state tracking premium aesthetic */
.gnb nav ul li.dropdown .dropdown-content li a:hover {
	color: #fff !important;
	background-color: rgba(198, 169, 107, 0.15) !important; /* Soft tint of your --accent gold */
	padding-left: 24px !important; /* Elegant slight shift right on hover */
}

	/* Target and unhide the specific container element on hover */
	.gnb nav ul li.dropdown:hover .dropdown-content {
		display: flex !important;
	}
/* Ensure the parent link holds the context for absolute positioning */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Hide the menu by default, position it right below the link */
.dropdown-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #ffffff; /* Change to match your luxury aesthetic */
	min-width: 200px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
	z-index: 999;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Style the links inside the dropdown container */
.dropdown-content a {
	color: #333333;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	font-size: 14px;
	transition: background-color 0.2s ease;
}

/* Hover effect for individual dropdown items */
.dropdown-content a:hover {
	background-color: #f5f5f5; /* Subtle background change */
}

/* SHOW the dropdown menu when hovering over the container block */
.dropdown:hover .dropdown-content {
	display: block;
}