/*
Theme Name: Yati Events
Theme URI: http://localhost/Yati%20Events
Author: Yati Group
Author URI: https://xper8.com
Description: An elegant, fully-featured WordPress theme for Yati Events — a premium events, exhibitions & weddings company. Cream-and-gold editorial aesthetic with custom post types for Services, Packages, Events, Exhibitions, Team, Vendors, Testimonials and FAQs.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yati-events
Tags: events, weddings, exhibitions, elegant, custom-post-types, full-width-template
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
	--cream:        #F6F1E7;
	--cream-2:      #EFE8DA;
	--sand:         #E7DDC9;
	--sand-2:       #DED2BC;
	--ink:          #2E2A26;
	--brown:        #4A3F35;
	--brown-dark:   #2C231C;
	--gold:         #8C6B2E;
	--gold-2:       #B98F4E;
	--muted:        #837767;
	--line:         #d8ccb6;
	--white:        #ffffff;

	--serif:   'Fraunces', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--sans:    'Mulish', 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--script:  'Pinyon Script', 'Cormorant Garamond', cursive;

	--container: 1200px;
	--radius: 4px;
	--shadow: 0 18px 40px rgba(44, 35, 28, 0.10);
	--shadow-sm: 0 8px 24px rgba(44, 35, 28, 0.08);
	--ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.7;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--brown-dark); }

h1, h2, h3, h4, h5 {
	font-family: var(--serif);
	font-weight: 500;
	color: var(--brown-dark);
	line-height: 1.18;
	margin: 0 0 .4em;
	letter-spacing: .01em;
	/* Fraunces has a descending capital "J" (and other flourishes); give it room
	   so the tail is never clipped by the tight line box. */
	padding-bottom: .04em;
}
h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h3 { font-size: 1.6rem; }
p { margin: 0 0 1.2em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.bg-cream2 { background: var(--cream-2); }
.bg-sand { background: var(--sand); }
.text-center { text-align: center; }

/* Decorative serif accent words */
.accent { color: var(--gold); }
strong { font-weight: 600; }

/* ==========================================================================
   3. Buttons & utilities
   ========================================================================== */
.btn {
	display: inline-block;
	font-family: var(--sans);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1;
	padding: 16px 38px;
	background: var(--brown);
	color: #fff;
	border: 1px solid var(--brown);
	border-radius: 8px;
	cursor: pointer;
	box-shadow: none;
	transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn:hover { background: var(--brown-dark); color: #fff; border-color: var(--brown-dark); transform: translateY(-2px); }
/* Premium gold CTA — matched to the theme's muted bronze-gold (--gold #8C6B2E),
   subtle depth gradient, white text and a defined darker-gold border. */
.btn--gold {
	background: linear-gradient(160deg,#9C7A38,#8C6B2E 58%,#6F521E);
	color: #fff;
	border: 1px solid #5F4718;
	box-shadow: none;
}
.btn--gold:hover {
	background: linear-gradient(160deg,#A9873F,#997634 58%,#7C5D24);
	color: #fff;
	border-color: #4d380f;
	box-shadow: none;
}
/* Outlined CTA — clean rounded border; on hover it fills with the theme gold. */
.btn--ghost { background: transparent; color: var(--brown-dark); border: 1.5px solid var(--brown); box-shadow: none; }
.btn--ghost:hover {
	background: linear-gradient(160deg,#9C7A38,#8C6B2E 58%,#6F521E);
	color: #fff;
	border-color: #5F4718;
	transform: translateY(-2px);
	box-shadow: none;
}
.btn--light { background: rgba(255,255,255,.95); color: var(--brown-dark); border-color: rgba(255,255,255,.95); }
/* On brand pages the gold CTA takes the brand colour — keep a matching border, no glow. */
body.yati-brand .site-main .btn--gold { box-shadow: none; }
body.yati-brand .site-main .btn--gold:hover { box-shadow: none; }

.link-more {
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brown-dark);
	border-bottom: 1px solid var(--gold);
	padding-bottom: 3px;
}

/* Eyebrow / section header */
.eyebrow {
	font-family: var(--sans);
	font-size: .78rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--gold);
	font-weight: 700;
	margin-bottom: 14px;
	display: block;
}
.section-head { margin-bottom: 56px; }
.section-head h2 { margin: 0; }
.section-head--center { text-align: center; max-width: 720px; margin-left:auto; margin-right:auto; margin-bottom:56px; }

/* Decorative divider with floral */
.floral-divider {
	text-align: center;
	margin: 0 auto 14px;
	color: var(--gold);
}
.floral-divider svg { width: 54px; height: auto; }

/* ==========================================================================
   4. Top bar + Header / nav
   ========================================================================== */
.topbar {
	background: var(--brown-dark);
	color: #e9dfca;
	font-size: .78rem;
	letter-spacing: .06em;
}
.topbar .container { display:flex; justify-content: space-between; align-items:center; gap:16px; padding-top:10px; padding-bottom:10px; }
.topbar a { color: #e9dfca; }
.topbar a:hover { color: #fff; }
.topbar__contact span { margin-right: 22px; }
.topbar__social a { margin-left: 16px; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(246,241,231,.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
	transition: background .3s var(--ease);
}
.site-header.is-transparent {
	position: absolute;
	left:0; right:0;
	background: transparent;
	border-bottom-color: transparent;
}
.site-header.is-transparent .nav-menu a,
.site-header.is-transparent .site-title a,
.site-header.is-transparent .nav-toggle span { color:#fff; }
.site-header.is-transparent .nav-menu a::after { background:#fff; }

.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 0; gap: 32px; }
.site-branding { grid-column: 2; text-align:center; padding: 0 24px; display:flex; justify-content:center; align-items:center; }
.site-title { font-family: var(--serif); font-size: 1.7rem; letter-spacing: .26em; margin:0; }
.site-title a { color: var(--brown-dark); }
.site-title small { display:block; font-family:var(--sans); font-size:.56rem; letter-spacing:.42em; color:var(--gold); margin-top:2px; }
.custom-logo { max-height: 54px; width:auto; }

/* Header brand image logo (official Yati Group lockup) */
.brand-lockup--img { display:inline-flex; align-items:center; }
.brand-img { height:58px; width:auto; max-width:100%; display:block; }
/* Default: dark-text logo (light/cream headers). Light-text version hidden. */
.brand-img--light { display:none; }
/* Dark brand-colour headers → swap to the white-text logo so it stays readable. */
body.yati-brand-naaribiz .brand-img--dark,
body.yati-brand-interior .brand-img--dark,
body.yati-brand-contento .brand-img--dark { display:none; }
body.yati-brand-naaribiz .brand-img--light,
body.yati-brand-interior .brand-img--light,
body.yati-brand-contento .brand-img--light { display:block; }

/* Brand lockup (gold Y mark + wordmark) */
.brand-lockup { display:inline-flex; align-items:center; gap:12px; }
.brand-lockup .brand-mark { width:38px; height:auto; flex:0 0 auto; filter: drop-shadow(0 2px 6px rgba(142,108,46,.35)); }
.brand-words { display:flex; flex-direction:column; line-height:1; text-align:left; }
.bw-top { font-family: var(--serif); font-size:1.5rem; font-weight:600; letter-spacing:.04em; color: var(--brown-dark); }
.bw-top b { font-weight:400; color: var(--gold); }
.bw-sub { font-family: var(--sans); font-size:.56rem; letter-spacing:.34em; text-transform:uppercase; color: var(--brown); font-weight:700; margin-top:4px; }
.site-header.is-transparent .brand-lockup .bw-top { color:#fff; }
.site-header.is-transparent .brand-lockup .bw-top b { color: var(--gold-2); }
.site-header.is-transparent .brand-lockup .bw-sub { color: rgba(255,255,255,.78); }
.brand-lockup--light .bw-top { color:#fff; }
.brand-lockup--light .bw-top b { color: var(--gold-2); }
.brand-lockup--light .bw-sub { color: #b7a98f; }

.nav-menu { list-style:none; margin:0; padding:0; display:flex; gap: 30px; align-items:center; }
.nav-menu.nav--left { grid-column:1; justify-content:flex-start; }
.nav-menu.nav--right { grid-column:3; justify-content:flex-end; }
.nav-menu > li { display:flex; align-items:center; }
.nav-menu a {
	font-family: var(--sans);
	font-size: .82rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brown-dark);
	font-weight: 700;
	position: relative;
	padding: 6px 0;
	white-space: nowrap;
	line-height: 1;
}
.nav-menu .menu-item-has-children > a { padding-right: 18px; }
.nav-menu .menu-item-has-children > a::before {
	content:'';
	position:absolute;
	right:2px;
	top:50%;
	width:6px;
	height:6px;
	border-right:1.5px solid currentColor;
	border-bottom:1.5px solid currentColor;
	transform:translateY(-75%) rotate(45deg);
	opacity:.75;
}
.nav-menu a::after {
	content:''; position:absolute; left:0; bottom:-2px; height:1px; width:0; background: var(--gold);
	transition: width .3s var(--ease);
}
.nav-menu a:hover::after, .nav-menu .current-menu-item > a::after { width:100%; }
.nav-menu .current-menu-item > a { color: var(--brown-dark); }

/* sub menu */
.nav-menu ul { display:none; position:absolute; top:100%; left:0; background:#fff; box-shadow: var(--shadow-sm); list-style:none; padding:10px 0; min-width: 230px; z-index:110; border:1px solid rgba(216,204,182,.8); }
.nav-menu li { position: relative; }
.nav-menu li:hover > ul, .nav-menu li:focus-within > ul { display:block; }
.nav-menu ul li a { display:block; padding:10px 20px; letter-spacing:.08em; white-space:normal; color:var(--brown-dark); border:0; }
.nav-menu ul li a::before, .nav-menu ul li a::after { display:none; }
.nav-menu ul li a:hover { color:var(--gold); background:var(--cream-2); }
.site-header.is-transparent .nav-menu ul a { color:var(--brown-dark); }
.site-header.is-transparent .nav-menu ul a:hover { color:var(--gold); }

.nav-toggle { display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span { width:24px; height:2px; background: var(--brown-dark); display:block; transition: .3s; }

/* ==========================================================================
   5. Page hero (inner pages) + breadcrumb
   ========================================================================== */
.page-hero {
	position: relative;
	min-height: 360px;
	display:flex; align-items:center; justify-content:center;
	text-align:center;
	color:#fff;
	background: linear-gradient(rgba(44,35,28,.55), rgba(44,35,28,.62)), var(--brown);
	background-size: cover; background-position:center;
	padding: 130px 0 90px;
	border-bottom-left-radius: 50% 22px;
	border-bottom-right-radius: 50% 22px;
}
.page-hero h1 { color:#fff; font-size: clamp(2.4rem,4.4vw,3.6rem); letter-spacing:.08em; text-transform: uppercase; }
.breadcrumb { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.85); margin-bottom:14px; }
.breadcrumb a { color:rgba(255,255,255,.85); }
.breadcrumb a:hover { color:#fff; }
.breadcrumb .sep { margin:0 10px; color: var(--gold-2); }

/* ==========================================================================
   6. Front page — Hero
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display:flex; align-items:center; justify-content:center; text-align:center;
	color:#fff;
	background: linear-gradient(rgba(60,48,38,.32), rgba(60,48,38,.42)), linear-gradient(135deg,#cdbfae,#9c8a76);
	background-size: cover; background-position:center;
	padding: 160px 0 120px;
	border-bottom-left-radius: 50% 40px;
	border-bottom-right-radius: 50% 40px;
}
.hero__inner { max-width: 860px; position:relative; z-index:2; }
/* Premium eyebrow with flanking gold rules */
.hero .eyebrow { display:inline-flex; align-items:center; gap:16px; color:#f0e6d0 !important; letter-spacing:.34em; font-size:.8rem; margin-bottom:22px; }
.hero .eyebrow::before, .hero .eyebrow::after { content:''; width:44px; height:1px; background:linear-gradient(90deg, transparent, var(--gold-2), transparent); display:inline-block; }
.hero h1 {
	color:#fff; text-transform:uppercase; letter-spacing:.04em; line-height:1.04;
	font-size: clamp(2.9rem, 6vw, 5rem);
	text-shadow: 0 2px 30px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.45);
	margin:0;
}
.hero p { font-size:1.12rem; max-width:560px; margin:26px auto 34px; color:rgba(255,255,255,.94); line-height:1.7; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero .btn--light { box-shadow:0 12px 34px rgba(0,0,0,.28); padding:16px 40px; letter-spacing:.16em; }

/* ==========================================================================
   7. Intro / about
   ========================================================================== */
.intro { text-align:center; }
.intro__lead { font-family:var(--serif); font-size: clamp(1.5rem,2.6vw,2.1rem); line-height:1.4; color:var(--brown-dark); max-width: 820px; margin:0 auto 36px; text-transform:uppercase; letter-spacing:.02em; }
.intro__cols { display:grid; grid-template-columns: 1fr 1fr; gap:48px; max-width:920px; margin:0 auto; text-align:left; }
.intro__cols p { color: var(--brown-dark); font-weight: 500; }
.signature { display:block; font-family: var(--script); font-size:2.4rem; line-height:1; color:var(--gold); margin-top:14px; }

.stats { display:flex; flex-wrap:wrap; gap:40px; justify-content:center; margin-top:56px; }
.stat { text-align:center; }
.stat__num { font-family:var(--serif); font-size:2.6rem; color:var(--gold); line-height:1; }
.stat__label { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brown-dark); font-weight:700; margin-top:6px; }

/* ==========================================================================
   8. Services (arch cards)
   ========================================================================== */
.arch-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.arch-card { text-align:center; }
.arch-card__media {
	position:relative;
	aspect-ratio: 3/4;
	border-radius: 50% 50% 0 0 / 38% 38% 0 0;
	overflow:hidden;
	background: linear-gradient(160deg,var(--sand),var(--sand-2));
	box-shadow: var(--shadow-sm);
}
.arch-card__media img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.yati-web-img { display:block; width:100%; height:100%; object-fit:cover; }
.arch-card:hover .arch-card__media img { transform: scale(1.06); }
.arch-card__title {
	font-family:var(--serif); font-size:1.32rem; letter-spacing:.12em; text-transform:uppercase;
	margin-top:18px; color:var(--brown-dark);
	overflow-wrap:anywhere;
}
.arch-card--highlight .arch-card__media {
	background: var(--cream-2);
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	padding: 30px; color: var(--brown);
	border: 1px solid var(--line);
}
.arch-card--highlight .arch-card__media h3 { letter-spacing:.2em; }
.arch-card--highlight .arch-card__media p { font-size:.85rem; color:var(--muted); }

/* ==========================================================================
   9. Service detail / two-column feature
   ========================================================================== */
.feature-row { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; margin-bottom: 64px; }
.feature-row:nth-child(even) .feature-row__media { order:2; }
.feature-row__media img { width:100%; box-shadow: var(--shadow); border:8px solid #fff; }
.feature-row__body { background: var(--cream-2); padding: 44px; }
.feature-row__body h3 { font-size:1.75rem; letter-spacing:.08em; text-transform:uppercase; overflow-wrap:anywhere; }

/* ==========================================================================
   10. Process (consultation/coordination/execution)
   ========================================================================== */
.process { display:grid; grid-template-columns: repeat(3,1fr); gap:40px; }
.process__item h3 { font-size:1.3rem; letter-spacing:.2em; text-transform:uppercase; padding-bottom:14px; border-bottom:1px solid var(--line); }
.process__item p { color:var(--brown-dark); font-size:.95rem; font-weight:500; }
.process__num { font-family:var(--serif); font-size:1.1rem; color:var(--gold); letter-spacing:.2em; }

/* ==========================================================================
   11. Vendors (arch line outlines)
   ========================================================================== */
.vendors { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.vendor { text-align:center; }
.vendor__frame {
	aspect-ratio: 3/4;
	border:1px solid var(--gold);
	border-radius: 50% 50% 0 0 / 40% 40% 0 0;
	display:flex; align-items:center; justify-content:center;
	overflow:hidden; color: var(--gold);
	background:#fbf8f1;
}
.vendor__frame img { width:100%; height:100%; object-fit:cover; }
.vendor__name { font-family:var(--serif); font-size:1.2rem; margin-top:16px; color:var(--brown-dark); }

/* ==========================================================================
   12. Cards grid (events / exhibitions / blog)
   ========================================================================== */
.card-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 34px; }
.card { background:#fff; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); display:flex; flex-direction:column; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__media { display:block; width:100%; aspect-ratio: 4/3; overflow:hidden; background: linear-gradient(160deg,var(--sand),var(--sand-2)); }
.section-cta { text-align:center; margin-top:54px; position:relative; z-index:1; clear:both; }
.card__media img { display:block; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 26px; flex:1 1 auto; }
.card__meta { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.card__title { font-size:1.4rem; margin-bottom:10px; }
.card__title a { color:var(--brown-dark); }
.card__title a:hover { color: var(--gold); }
.card__excerpt { color:var(--brown-dark); font-size:.92rem; font-weight:500; }

/* Upcoming Events (homepage) — live, dashboard-driven cards */
.upcoming .card--upcoming .card__media { position:relative; }
.upcoming .card__body { display:flex; flex-direction:column; gap:9px; }
/* Date + status now live in the content block under the title (not on the image). */
.upcoming-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0; }
.upcoming-date { display:inline-flex; align-items:center; gap:7px; color:var(--gold); font-family:var(--serif); font-weight:600; font-size:.92rem; letter-spacing:.02em; margin:0; }
.upcoming-date__icon { width:16px; height:16px; flex-shrink:0; }
/* Status badge sitting inline in a card body (vs. overlaid on an image). */
.upcoming-meta .yati-status,
.card__status .yati-status { box-shadow:none; font-size:.68rem; padding:6px 12px; }
.card__status { margin:2px 0 0; }
/* Reserve a consistent 2-line height for the title so the location, text and
   buttons line up across all cards regardless of how long each title is. */
.upcoming .card__title { min-height:2.5em; line-height:1.25; margin-bottom:0; }
.upcoming-place { color:var(--brown-dark); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin:0; min-height:1em; opacity:.8; }
.upcoming .card__excerpt { margin:0; }
.upcoming .card__cta { margin-top:auto; padding-top:16px; }
.upcoming .card__cta .btn { padding:12px 26px; font-size:.76rem; }
.upcoming-cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; }

/* Carousel (Upcoming Events slider) — horizontal scroll-snap with arrows */
.carousel { position:relative; }
.carousel__track { display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:6px 4px 14px; scrollbar-width:none; -ms-overflow-style:none; }
.carousel__track::-webkit-scrollbar { display:none; }
.carousel__track > .card { flex:0 0 calc((100% - 56px) / 3); scroll-snap-align:start; }
.carousel__arrow { position:absolute; top:36%; transform:translateY(-50%); z-index:4; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--brown-dark); font-size:1.6rem; line-height:1; cursor:pointer; box-shadow:0 10px 24px rgba(28,22,17,.18); display:flex; align-items:center; justify-content:center; transition:opacity .2s, background .2s, color .2s; }
.carousel__arrow:hover { background:var(--gold); color:#fff; border-color:var(--gold); }
.carousel__arrow--prev { left:-10px; }
.carousel__arrow--next { right:-10px; }
.carousel.no-overflow .carousel__arrow { display:none; }
.carousel.at-start .carousel__arrow--prev,
.carousel.at-end .carousel__arrow--next { opacity:0; pointer-events:none; }
@media (max-width:900px) { .carousel__track > .card { flex-basis:calc((100% - 28px) / 2); } .carousel__arrow--prev { left:-4px; } .carousel__arrow--next { right:-4px; } }
@media (max-width:600px) { .carousel__track > .card { flex-basis:86%; } }

/* Status badge (dashboard-editable: Sold Out / Completed / Booking Open …).
   Renders as a coloured pill; over a card image it overlays the top-right,
   and inline next to a page/exhibition title in the hero. */
.card .card__media { position:relative; }
.yati-status {
	display:inline-block; vertical-align:middle;
	font-family:var(--serif); font-size:.72rem; font-weight:700; letter-spacing:.06em;
	line-height:1; padding:7px 14px; border-radius:999px; white-space:nowrap;
	color:#fff; background:#5A6472; box-shadow:0 8px 18px rgba(28,22,17,.28);
}
.card__media .yati-status { position:absolute; top:14px; right:14px; z-index:3; }
.yati-status--open   { background:linear-gradient(135deg,#3AA65B,#2E7D46); }
.yati-status--warn   { background:linear-gradient(135deg,#E0A63A,#C9821B); color:#2E261D; }
.yati-status--closed { background:linear-gradient(135deg,#D0483A,#B0342A); }
.yati-status--done   { background:linear-gradient(135deg,#6B7482,#4E5763); }
.yati-status--soon   { background:linear-gradient(135deg,#E6C77E,#C9A24B); color:#2E261D; }
.page-hero h1 .yati-status { font-size:.9rem; margin-left:8px; box-shadow:none; }

/* A booking/register button that is closed for the current status. */
.btn.is-disabled { opacity:.55; cursor:not-allowed; pointer-events:none; filter:grayscale(.15); }

/* ==========================================================================
   13. Packages
   ========================================================================== */
.package {
	display:grid; grid-template-columns: 1.2fr 1fr; gap:0; background:#fff; box-shadow:var(--shadow-sm);
	margin-bottom:48px; overflow:hidden;
}
.package__media { background: linear-gradient(160deg,var(--sand),var(--sand-2)); min-height:340px; }
.package__media img { width:100%; height:100%; object-fit:cover; }
.package__body { padding: 44px; background: var(--cream-2); }
.package__name { font-size:2rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:24px; overflow-wrap:anywhere; }
.package__row { display:flex; gap:18px; padding:12px 0; border-bottom:1px dashed var(--line); }
.package__row strong { min-width:120px; color:var(--brown-dark); font-weight:600; }
.package__price { color: var(--gold); font-family:var(--serif); font-size:1.6rem; }
.package__list { list-style:none; padding:0; margin:0; }
.package__list li { padding:4px 0; color:var(--brown-dark); font-weight:500; }
.package__list li::before { content:'\2713'; color:var(--gold); margin-right:10px; font-weight:700; }

/* ==========================================================================
   14. Team
   ========================================================================== */
.team-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:34px; }
.member { text-align:center; }
.member__photo {
	aspect-ratio: 3/4;
	border-radius: 50% 50% 0 0 / 36% 36% 0 0;
	overflow:hidden; background:linear-gradient(160deg,var(--sand),var(--sand-2));
	box-shadow: var(--shadow-sm);
}
.member__photo img { width:100%; height:100%; object-fit:cover; }
.member__role { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:18px; }
.member__name { font-family:var(--serif); font-size:1.5rem; color:var(--brown-dark); margin-top:2px; }

/* ==========================================================================
   15. Testimonials
   ========================================================================== */
.testimonials { background: var(--brown-dark); color:#f1e8d6; }
.testimonials h2 { color:#fff; }
.quote { max-width:760px; margin:0 auto; text-align:center; }
.quote p { font-family:var(--serif); font-size:1.6rem; font-style:italic; line-height:1.5; color:#f1e8d6; }
.quote__author { font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-2); margin-top:18px; }

/* ==========================================================================
   16. FAQ accordion
   ========================================================================== */
/* Service "What's Included" checklist */
.service-includes { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:0 40px; max-width:840px; margin:0 auto; list-style:none; padding:0; }
.service-includes li { position:relative; padding:13px 0 13px 30px; border-bottom:1px solid var(--line); color:var(--brown); font-size:.97rem; }
.service-includes li::before { content:'\2713'; position:absolute; left:2px; top:13px; color:var(--gold); font-weight:700; }

.faq { max-width: 760px; }
.faq__item { border-bottom:1px solid var(--line); }
.faq__q {
	width:100%; text-align:left; background:none; border:0; cursor:pointer;
	font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.04em;
	color:var(--brown-dark); padding:22px 40px 22px 0; position:relative;
}
.faq__q::after { content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.4rem; color:var(--gold); transition: transform .3s; }
.faq__item.is-open .faq__q::after { content:'\00d7'; }
.faq__a { max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding-bottom:22px; color:var(--brown-dark); font-weight:500; margin:0; }

/* FAQ + image split */
.faq-split { display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:start; }
.faq-split__img img { width:100%; box-shadow:var(--shadow); border:8px solid #fff; }

/* ==========================================================================
   17. CTA band
   ========================================================================== */
.cta-band { text-align:center; background: linear-gradient(rgba(44,35,28,.6),rgba(44,35,28,.66)), var(--brown); color:#fff; background-size:cover; background-position:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color:rgba(255,255,255,.9); max-width:560px; margin:0 auto 26px; }

/* Why choose grid */
.why-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:26px; }
.why-item {
	position:relative; overflow:hidden; text-align:center;
	background:linear-gradient(180deg,#fff,#fffdf8);
	padding:46px 26px 38px;
	border:1px solid rgba(140,107,46,.16);
	border-radius:16px;
	box-shadow:0 14px 34px rgba(44,35,28,.07);
	transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
/* Subtle gold accent bar across the top */
.why-item::before {
	content:''; position:absolute; top:0; left:0; right:0; height:3px;
	background:linear-gradient(90deg, transparent, var(--gold), transparent); opacity:.55;
}
.why-item:hover {
	transform:translateY(-8px);
	box-shadow:0 28px 56px rgba(44,35,28,.16);
	border-color:rgba(140,107,46,.4);
}
.why-icon {
	font-family:var(--serif); font-weight:600; font-size:2.4rem; line-height:1;
	color:var(--gold); display:inline-block; margin-bottom:18px;
	position:relative; padding-bottom:14px;
}
.why-icon::after {
	content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
	width:26px; height:2px; background:var(--gold); opacity:.5;
}
.why-item h3 { font-family:var(--serif); font-size:1.22rem; letter-spacing:.02em; margin-bottom:12px; color:var(--brown-dark); }
.why-item p { color: var(--brown-dark); font-size:.92rem; font-weight:500; margin:0; line-height:1.75; }

/* Booking modal */
.yati-modal { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px; }
.yati-modal.is-open { display:flex; }
.yati-modal__overlay { position:absolute; inset:0; background:rgba(44,35,28,.62); backdrop-filter:blur(3px); }
.yati-modal__box { position:relative; background:var(--cream); max-width:540px; width:100%; max-height:92vh; overflow-y:auto; box-shadow:var(--shadow); padding:34px 38px 30px; border-top:4px solid var(--gold);
	scrollbar-width:thin; scrollbar-color:rgba(176,141,87,.55) transparent; }
.yati-modal__box::-webkit-scrollbar { width:7px; }
.yati-modal__box::-webkit-scrollbar-track { background:transparent; }
.yati-modal__box::-webkit-scrollbar-thumb { background:rgba(176,141,87,.5); border-radius:8px; }
.yati-modal__close { position:absolute; top:12px; right:16px; background:none; border:0; font-size:1.7rem; line-height:1; color:var(--brown); cursor:pointer; z-index:2; }
.yati-modal__eyebrow { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.yati-modal__title { font-family:var(--serif); font-size:1.65rem; color:var(--brown-dark); margin:3px 0 3px; line-height:1.1; }
.yati-modal__price { color:var(--gold); font-family:var(--serif); font-size:1.25rem; margin-bottom:14px; }
.yati-modal .wpcf-field { margin-bottom:12px; }
.yati-modal .contact-form input, .yati-modal .contact-form textarea, .yati-modal .contact-form select { padding:11px 14px; }
.yati-modal .contact-form textarea { min-height:96px; }
.yati-modal .contact-form label { margin-bottom:4px; }

/* Submission toast */
.yati-toast { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:1100; padding:14px 26px; box-shadow:var(--shadow); font-size:.92rem; letter-spacing:.02em; animation: yatiToast 6s forwards; }
.yati-toast--ok { background:#e8f0e3; color:#3a5a2e; border-left:4px solid #6c9a4e; }
.yati-toast--err { background:#f5e3e1; color:#8a3a32; border-left:4px solid #c0584c; }
@keyframes yatiToast { 0%{opacity:0;transform:translate(-50%,-12px)} 8%{opacity:1;transform:translate(-50%,0)} 88%{opacity:1} 100%{opacity:0} }

/* Brand socials list (footer) */
.brand-socials { list-style:none; padding:0; margin:14px 0 0; }
.brand-socials li { padding:3px 0; font-size:.9rem; }
.brand-socials a { display:inline-flex; align-items:center; gap:9px; }
.brand-socials a svg { width:17px; height:17px; flex:0 0 auto; color:var(--gold); }
.brand-socials a:hover svg { color:inherit; }

/* ==========================================================================
   18. Contact
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns: 1fr 1.1fr; gap:56px; align-items:start; }
.contact-info li { list-style:none; padding:14px 0; border-bottom:1px solid var(--line); }
.contact-info .label { font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); display:block; }
.contact-info ul { padding:0; margin:0; }
.wpcf-field { margin-bottom:18px; }
.contact-form input, .contact-form textarea {
	width:100%; padding:14px 16px; border:1px solid var(--line); background:#fff; font-family:var(--sans); font-size:.95rem; color:var(--ink);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
	outline:0;
	border-color:var(--gold);
	box-shadow:0 0 0 3px rgba(176,141,87,.16);
}
.contact-form textarea { min-height:150px; resize:vertical; }
.contact-form label { font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brown-dark); font-weight:700; display:block; margin-bottom:6px; }
.form-notice { padding:14px 18px; margin-bottom:18px; }
.form-notice--ok { background:#e8f0e3; color:#3a5a2e; }
.form-notice--err { background:#f5e3e1; color:#8a3a32; }

/* ==========================================================================
   19. Single / content
   ========================================================================== */
.entry { max-width: 820px; margin:0 auto; }
.entry__media img { width:100%; box-shadow:var(--shadow); border:8px solid #fff; margin-bottom:30px; }
.entry-content { line-height:1.85; color:var(--brown-dark); font-weight:500; }
.entry-content h2, .entry-content h3 { margin-top:1.4em; }
.entry-content img { margin:1.4em 0; box-shadow: var(--shadow-sm); }
.entry-content blockquote { border-left:3px solid var(--gold); padding-left:24px; font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--brown); }

/* Premium legal / policy pages (Privacy, Terms, Cancellation & Refund) */
.legal-page .section { padding-top:64px; }
.legal-page .entry {
	max-width:920px; margin:0 auto;
	background:#fff; border:1px solid rgba(142,108,46,.14); border-radius:16px;
	box-shadow:0 22px 54px rgba(28,22,17,.09);
	padding:56px 60px;
}
.legal-page .entry-content { line-height:1.9; color:var(--brown-dark); font-weight:500; }
.legal-page .entry-content > p { margin-bottom:1.1em; }
.legal-page .legal-updated {
	display:inline-block; margin-bottom:26px;
	font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
	color:#8a6c2e; background:#faf4e8; border:1px solid rgba(201,162,75,.3);
	padding:8px 16px; border-radius:999px;
}
.legal-page .entry-content h2 {
	font-family:var(--serif); font-weight:600; font-size:1.45rem; color:var(--brown-dark);
	margin:1.9em 0 .55em; padding-left:16px; border-left:3px solid var(--gold); line-height:1.3;
}
.legal-page .entry-content h2:first-of-type { margin-top:.4em; }
.legal-page .entry-content h3 { font-family:var(--serif); font-weight:600; font-size:1.12rem; color:var(--brown); margin:1.4em 0 .4em; }
.legal-page .entry-content ul { list-style:none; padding-left:0; margin:0 0 1.3em; }
.legal-page .entry-content ul li { position:relative; padding-left:28px; margin-bottom:12px; }
.legal-page .entry-content ul li::before {
	content:''; position:absolute; left:4px; top:.62em; width:8px; height:8px; border-radius:50%;
	background:linear-gradient(135deg,#E6C77E,#C9A24B);
}
.legal-page .entry-content a { color:#a9812f; text-decoration:underline; text-underline-offset:2px; }
.legal-page .entry-content a:hover { color:var(--brown); }
@media (max-width:640px){ .legal-page .entry { padding:34px 24px; } }

/* Footer legal links row */
.footer-bottom__inner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; }
.footer-legal { display:flex; flex-wrap:wrap; gap:6px 20px; }
.footer-legal a { color:#b6a688; transition:color .25s var(--ease); }
.footer-legal a:hover { color:#e9dfca; }
@media (max-width:600px){ .footer-bottom__inner { flex-direction:column; text-align:center; } }
.footer-credit { margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); text-align:center; font-size:.76rem; letter-spacing:.06em; color:#8a7c66; }
.footer-credit a { color:#b6a688; font-weight:600; transition:color .25s var(--ease); }
.footer-credit a:hover { color:var(--gold, #d8c08a); }
.footer-credit__heart { color:#c46b6b; }
.meta-list { display:flex; flex-wrap:wrap; gap:24px; margin:24px 0; padding:20px 24px; background:var(--cream-2); }
.meta-list .label { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); display:block; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:30px 0; }
.gallery-thumbs img { box-shadow:var(--shadow-sm); border:6px solid #fff; }

/* Single service image layout */
.service-title {
	text-align:center;
	margin:10px 0 30px;
	font-size:clamp(2.1rem, 4vw, 3.4rem);
	color:var(--brown-dark);
}
.service-showcase {
	max-width:1100px;
	margin:0 auto 54px;
}
.service-showcase__hero {
	position:relative;
	aspect-ratio:16/9;
	overflow:hidden;
	background:var(--sand);
	box-shadow:var(--shadow);
	border:8px solid #fff;
}
.service-showcase__hero img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.service-showcase__thumbs {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:16px;
	margin-top:16px;
}
.service-showcase__thumbs img {
	width:100%;
	aspect-ratio:4/3;
	object-fit:cover;
	display:block;
	background:var(--sand);
	box-shadow:var(--shadow-sm);
	border:6px solid #fff;
}

/* ==========================================================================
   20. Footer
   ========================================================================== */
.site-footer { background: var(--brown-dark); color:#cdbfa6; padding-top:72px; }
.site-footer h4 { color:#fff; font-family:var(--serif); letter-spacing:.06em; margin-bottom:18px; font-size:1.2rem; }
.footer-cols { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px; }
.footer-brand .site-title { color:#fff; }
.footer-brand .site-title a { color:#fff; }
.site-footer a { color:#cdbfa6; }
.site-footer a:hover { color:#fff; }
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer li { padding:5px 0; font-size:.92rem; }
.footer-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; text-align:center; border:1px solid rgba(255,255,255,.2); border-radius:50%; margin-right:8px; }
.footer-social a svg { width:18px; height:18px; }
.footer-social a:hover { background:var(--gold); border-color:var(--gold); color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); padding:22px 0; text-align:center; font-size:.82rem; letter-spacing:.04em; color:#9a8c74; }

/* ==========================================================================
   21. Misc WP
   ========================================================================== */
.screen-reader-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.pagination { display:flex; gap:10px; justify-content:center; margin-top:56px; }
.pagination .page-numbers { padding:10px 16px; border:1px solid var(--line); color:var(--brown); }
.pagination .current { background:var(--brown); color:#fff; border-color:var(--brown); }
.alignwide { width: 100%; }

/* Animated team avatar */
.team-avatar { position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#efe6d4,#e3d4b6); overflow:hidden; }
.team-avatar__ring { position:absolute; width:170%; height:170%; background:conic-gradient(from 0deg, transparent 0 18%, var(--gold-2) 34%, transparent 52% 100%); opacity:.5; animation: yatiSpin 7s linear infinite; }
.team-avatar__core { position:absolute; inset:16px; background:radial-gradient(circle at 50% 32%, #fff, #efe6d4); border-radius:50% 50% 46% 46%; }
.team-avatar__initials { position:relative; z-index:2; font-family:var(--serif); font-size:3rem; font-weight:600; color:var(--brown-dark); letter-spacing:.04em; animation: yatiFloat 4.5s ease-in-out infinite; }
@keyframes yatiSpin { to { transform: rotate(360deg); } }
@keyframes yatiFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .team-avatar__ring, .team-avatar__initials { animation: none; } }

/* Floating WhatsApp CTA */
.wa-float { position:fixed; right:22px; bottom:22px; z-index:900; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(37,211,102,.45); transition: transform .25s var(--ease); }
.wa-float:hover { transform:scale(1.08); color:#fff; }
.wa-float::after { content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation: waPulse 2.2s ease-out infinite; }
@keyframes waPulse { 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.7); opacity:0; } }

/* Media & Downloads */
.page-hero--media { min-height:300px; background-size:cover; background-position:center; }
.media-preview { padding:48px 0 10px; background:var(--cream); }
.media-preview__grid {
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	grid-template-rows:repeat(2, minmax(150px, 1fr));
	gap:14px;
}
.media-preview__item {
	position:relative;
	display:block;
	min-height:150px;
	overflow:hidden;
	background:var(--sand);
	box-shadow:var(--shadow-sm);
}
.media-preview__item--large {
	grid-row:span 2;
	min-height:314px;
}
.media-preview__item img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .6s var(--ease);
}
.media-preview__item:hover img { transform:scale(1.06); }
.media-section { padding-top:72px; padding-bottom:96px; }
.media-gallery { display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.media-gallery a { display:block; aspect-ratio:1; overflow:hidden; background:var(--sand); box-shadow:var(--shadow-sm); }
.media-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.media-gallery a:hover img { transform:scale(1.08); }

/* Premium filterable gallery */
.gallery-filter {
	display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
	gap:14px 16px; margin:0 auto 64px; max-width:1200px; padding-bottom:2px;
}
.gallery-filter__btn {
	appearance:none; cursor:pointer; white-space:nowrap; flex:0 0 auto;
	border:1px solid rgba(142,108,46,.22); background:#fff; color:var(--brown-dark);
	font-family:var(--serif); font-size:.86rem; letter-spacing:.1em; text-transform:uppercase; line-height:1;
	padding:15px 26px; border-radius:999px; box-shadow:0 3px 10px rgba(28,22,17,.05);
	transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery-filter__btn:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); box-shadow:0 8px 18px rgba(201,162,75,.22); }
.gallery-filter__btn.is-active {
	background:linear-gradient(135deg,#E6C77E,#C9A24B 55%,#8E6C2E); color:#2E261D; font-weight:600;
	border-color:transparent; box-shadow:0 8px 20px rgba(201,162,75,.4);
}

/* Clean, uniform premium grid — equal tiles keep the layout tidy and gap-free
   even when filtered (no jagged masonry / empty cells). */
/* Give the Gallery section a wider container so the tabs + image grid share
   the same full width and the tiles read big and premium. */
.media-section > .container { max-width:min(94vw, 1800px); }
/* The Gallery page (id 183) is Elementor-built but rendered through the theme's
   default page.php, which wraps the content in a narrow readable-width
   .entry-content — that's what shrank the photos. Let THIS page's content run
   wide and unbox the Elementor section so the gallery covers the full page. */
.page-id-183 .section > .container { max-width:min(96vw, 1840px); }
.page-id-183 .entry,
.page-id-183 .entry-content { max-width:none; }
.page-id-183 .elementor-element-yatisec1 > .elementor-container { max-width:none; }
.page-id-183 .media-gallery--masonry { max-width:min(96vw, 1800px); margin-inline:auto; }
.page-id-183 .gallery-filter { max-width:1200px; margin-inline:auto; }
.media-gallery--masonry {
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:40px;
	max-width:100%;
	margin:0 auto;
}
.media-gallery--masonry .media-gallery__item {
	display:block; position:relative;
	aspect-ratio:4/5;
	border-radius:16px;
	overflow:hidden;
	background:var(--sand);
	box-shadow:0 14px 38px rgba(28,22,17,.14);
	transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.media-gallery--masonry .media-gallery__item:hover {
	transform:translateY(-8px);
	box-shadow:0 30px 64px rgba(28,22,17,.26);
}
.media-gallery--masonry .media-gallery__item.is-hidden { display:none; }
.media-gallery--masonry .media-gallery__item img,
.media-gallery--masonry .yati-web-img {
	position:absolute; inset:0;
	width:100%; height:100%; object-fit:cover; display:block; margin:0;
	transition:transform .7s var(--ease);
}
.media-gallery--masonry .media-gallery__item:hover img,
.media-gallery--masonry .media-gallery__item:hover .yati-web-img { transform:scale(1.06); }
.media-gallery--masonry .media-gallery__item::after {
	content:''; position:absolute; inset:0; pointer-events:none;
	background:linear-gradient(to top, rgba(28,22,17,.72), rgba(28,22,17,.05) 55%, transparent);
	opacity:0; transition:opacity .45s var(--ease);
}
.media-gallery--masonry .media-gallery__item:hover::after { opacity:1; }
.media-gallery__tag {
	position:absolute; left:16px; bottom:16px; z-index:2;
	font-family:var(--serif); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#2E261D;
	background:linear-gradient(135deg,#E6C77E,#C9A24B); padding:7px 15px; border-radius:999px;
	box-shadow:0 8px 18px rgba(28,22,17,.28);
	opacity:0; transform:translateY(10px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.media-gallery--masonry .media-gallery__item:hover .media-gallery__tag { opacity:1; transform:translateY(0); }
.gallery-empty { text-align:center; color:var(--brown-dark); padding:30px 0; }
@media (max-width:960px){
	.media-gallery--masonry { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
}
@media (max-width:900px){
	/* Keep the tabs on one line — scroll horizontally instead of wrapping. */
	.gallery-filter { justify-content:flex-start; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 4px 12px; }
	.gallery-filter::-webkit-scrollbar { display:none; }
}
@media (max-width:520px){
	.media-gallery--masonry { grid-template-columns:1fr; gap:16px; }
	.gallery-filter__btn { padding:10px 16px; font-size:.72rem; letter-spacing:.08em; }
}

.brochure-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.brochure-card { background:#fff; padding:34px 26px; box-shadow:var(--shadow-sm); text-align:center; }
.brochure-card .ico { font-size:2.2rem; color:var(--gold); display:block; margin-bottom:12px; }
.brochure-card h3 { font-size:1.3rem; margin-bottom:8px; }
.brochure-card p { color:var(--brown-dark); font-size:.9rem; font-weight:500; }

/* Inquiry-type select on the enquiry form */
.contact-form select {
	width:100%;
	min-height:52px;
	padding:14px 46px 14px 16px;
	border:1px solid var(--line);
	border-radius:0;
	background-color:#fff;
	background-image:linear-gradient(45deg, transparent 50%, var(--brown-dark) 50%), linear-gradient(135deg, var(--brown-dark) 50%, transparent 50%);
	background-position:calc(100% - 21px) 50%, calc(100% - 15px) 50%;
	background-size:6px 6px, 6px 6px;
	background-repeat:no-repeat;
	color:var(--ink);
	font-family:var(--sans);
	font-size:.95rem;
	line-height:1.35;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
}
.yati-modal .contact-form select { min-height:44px; padding-right:42px; }
/* Form fields always render dark text on their white background — fixes invisible
   text/options on branded dark pages (e.g. NaariBiz) where --ink is a light colour. */
.contact-form input,
.contact-form textarea,
.contact-form select { color:#2E261D; background-color:#fff; }
.contact-form select option { color:#2E261D; background-color:#fff; }
/* Fixed dark dropdown arrow (SVG) — the default caret used var(--brown-dark),
   which turns invisible on branded pages where that variable is a light colour. */
.contact-form select {
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 1.5 L12 1.5 L6 7.5 Z' fill='%232E261D'/%3E%3C/svg%3E") !important;
	background-repeat:no-repeat !important;
	background-position:calc(100% - 16px) center !important;
	background-size:12px 8px !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:#8a7d6f; opacity:1; }
/* Enquiry CTA: always a high-contrast gold button with dark text, regardless of
   the page's brand palette (the brand CTA overrides are scoped to .site-main and
   don't reach the footer booking modal, leaving white-on-yellow = invisible). */
.yati-enquiry-form button[type="submit"],
.contact-form button[type="submit"] {
	background:linear-gradient(135deg,#E6C77E,#C9A24B 55%,#8E6C2E) !important;
	border-color:transparent !important;
	color:#2E261D !important;
	font-weight:700;
	letter-spacing:.14em;
}
.yati-enquiry-form button[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
	background:linear-gradient(135deg,#C9A24B,#8E6C2E) !important;
	color:#2E261D !important;
	transform:translateY(-2px);
}
.sticky, .gallery-caption, .bypostauthor { display:block; }

/* ==========================================================================
   22. Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.arch-grid, .card-grid, .team-grid, .process, .why-grid, .brochure-grid { grid-template-columns: repeat(2,1fr); }
	.vendors { grid-template-columns: repeat(2,1fr); }
	.feature-row, .intro__cols, .package, .faq-split, .contact-grid { grid-template-columns: 1fr; gap:32px; }
	.feature-row:nth-child(even) .feature-row__media { order:0; }
	.footer-cols { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
	.section { padding: 64px 0; }
	.topbar { display:none; }

	/* On mobile the header is always solid (never transparent) so the menu stays readable */
	.site-header, .site-header.is-transparent {
		position: sticky; top:0;
		background: rgba(246,241,231,.97);
		backdrop-filter: blur(8px);
		border-bottom: 1px solid var(--line);
	}
	.site-header.is-transparent .brand-lockup .bw-top { color: var(--brown-dark); }
	.site-header.is-transparent .brand-lockup .bw-top b { color: var(--gold); }
	.site-header.is-transparent .brand-lockup .bw-sub { color: var(--muted); }
	.site-header.is-transparent .nav-menu a { color: var(--brown); }
	.site-header.is-transparent .nav-toggle span { background: var(--brown-dark); }

	/* Flex bar: logo left, toggle right, menus drop full-width below (CSS order keeps it tidy) */
	.header-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:14px 0; gap:0; }
	.site-branding { order:1; text-align:left; }
	.brand-lockup { gap:9px; }
	.brand-lockup .brand-mark { width:28px; }
	.brand-img { height:46px; }
	.bw-top { font-size:1.18rem; }
	.bw-sub { font-size:.5rem; letter-spacing:.26em; }

	.nav-toggle { order:2; display:flex; }
	.nav-menu { display:none; }
	.nav-menu.nav--left  { order:3; }
	.nav-menu.nav--right { order:4; }
	.nav-menu.nav--left, .nav-menu.nav--right { flex:0 0 100%; flex-direction:column; gap:0; align-items:stretch; }

	/* the dropdown panel */
	.site-header.menu-open { box-shadow: var(--shadow-sm); }
	.site-header.menu-open .nav-menu { display:flex; }
	.site-header.menu-open .nav-menu.nav--left { margin-top:12px; border-top:1px solid var(--line); }
	.nav-menu a {
		display:block; padding:16px 4px; border-bottom:1px solid var(--line);
		font-size:.82rem; letter-spacing:.2em; color:var(--brown-dark);
	}
	.nav-menu a:hover { color: var(--gold); padding-left:10px; transition: padding .25s var(--ease); }
	.nav-menu a::after { display:none; }
	.nav-menu .menu-item-has-children > a::before { right:4px; }
	.nav-menu ul { position:static; box-shadow:none; padding:0 0 0 18px; display:block; background:transparent; border:0; min-width:0; }
	.nav-menu ul li a { padding:12px 4px; font-size:.78rem; color:var(--brown-dark); background:transparent; }

	/* hamburger → X */
	.nav-toggle span { transition: transform .3s var(--ease), opacity .2s; }
	.site-header.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.site-header.menu-open .nav-toggle span:nth-child(2) { opacity:0; }
	.site-header.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
	.arch-grid, .card-grid, .team-grid, .process, .vendors, .footer-cols, .why-grid, .brochure-grid { grid-template-columns: 1fr; }
	.media-preview__grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
	.media-preview__item--large { grid-column:1 / -1; grid-row:auto; min-height:260px; }
	.media-gallery { grid-template-columns: repeat(2,1fr); }
	.media-gallery--masonry { grid-template-columns:1fr; }
	.service-showcase { margin-bottom:38px; }
	.service-showcase__hero { aspect-ratio:4/5; border-width:4px; }
	.service-showcase__thumbs { gap:8px; margin-top:8px; }
	.service-showcase__thumbs img { border-width:3px; }
	.yati-modal__box { padding:30px 24px; }
	.wa-float { right:16px; bottom:16px; width:52px; height:52px; }
	.stats { gap:28px; }
	.gallery-thumbs { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   14. Per-brand sub-page palettes — match each brand's Instagram identity
   --------------------------------------------------------------------------
   Because headings/buttons/links/dividers all read from --brown-dark /
   --brown / --gold / --gold-2, overriding those variables recolours each
   brand page cohesively. Header/footer variables keep page chrome matched
   while preserving readable contrast.
   The homepage hero is untouched (front page never gets a .yati-brand class).
   ========================================================================== */

/* Brand-tinted wash over the inner-page photo hero (keeps white text legible). */
.yati-brand .page-hero { position: relative; overflow: hidden; }
.yati-brand .page-hero::before {
	content:''; position:absolute; inset:0; z-index:0;
	background: var(--brand, transparent);
	opacity:.4; mix-blend-mode: multiply; pointer-events:none;
}
.yati-brand .page-hero > .container { position:relative; z-index:1; }

/* Give the whole page a soft brand-tinted background (kept very light so dark
   body copy stays high-contrast). Cards/sections read their tints from the
   --cream / --cream-2 / --sand overrides below. */
.yati-brand .site-main { background: var(--cream); }

/* Majestic Mingals — royal magenta + gold (Weddings, Birthdays, Anniversaries, Corporate, Events hub). */
body.yati-brand-majestic {
	--brown-dark:#5A1236; --brown:#8E1B54; --gold:#A32E6E; --gold-2:#C85A97; --brand:#8E1B54;
	--cream:#FBF1F7; --cream-2:#F5E5EF; --sand:#EED7E6;
	--brand-header-bg:#FBF1F7; --brand-header-text:#5A1236; --brand-footer-bg:#5A1236; --brand-footer-text:#F5E5EF;
}
body.yati-brand-majestic .site-main {
	--brown-dark:#5A1236; --brown:#8E1B54; --gold:#A32E6E; --gold-2:#C85A97; --brand:#8E1B54;
	--cream:#FBF1F7; --cream-2:#F5E5EF; --sand:#EED7E6;
}
/* NaariBiz Expo — matches the official creative: mauve-pink text on deep wine-maroon.
   This page is a "dark" page: bg = wine, all text = light pink for full readability. */
body.yati-brand-naaribiz {
	--brown-dark:#F5E3EE; --brown:#B0447E; --gold:#E6A6C8; --gold-2:#EEC2DC; --brand:#5C1A3C;
	--cream:#5C1A3C; --cream-2:#521734; --sand:#4A1430; --ink:#F5E3EE; --line:rgba(255,255,255,.16);
	--brand-header-bg:#5C1A3C; --brand-header-text:#F5E3EE; --brand-footer-bg:#2F0B1F; --brand-footer-text:#F5E3EE;
}
body.yati-brand-naaribiz .site-main {
	--brown-dark:#F5E3EE; --brown:#B0447E; --gold:#E6A6C8; --gold-2:#EEC2DC; --brand:#5C1A3C;
	--cream:#5C1A3C; --cream-2:#521734; --sand:#4A1430; --ink:#F5E3EE; --line:rgba(255,255,255,.16);
	color:#F5E3EE;
}
/* Keep the CTA button readable (solid magenta + white) on the maroon page. */
body.yati-brand-naaribiz .site-main .btn--gold { background:#A2356E; border-color:#A2356E; color:#fff; }
body.yati-brand-naaribiz .site-main .btn--gold:hover { background:#872B5B; border-color:#872B5B; color:#fff; }
/* --brown is reused as a button colour, so force list/quote text light instead. */
body.yati-brand-naaribiz .site-main .service-includes li,
body.yati-brand-naaribiz .site-main .entry-content blockquote { color:#F5E3EE; }
/* NaariBiz Expo typography — matches its Instagram brand kit, scoped to page
   content so the Yati header/footer stay untouched:
   Headings = League Spartan (bold display) · Body = Montserrat · Serif accents = Prata. */
body.yati-brand-naaribiz .site-main {
	--sans:'Montserrat', system-ui, sans-serif;
	--serif:'Prata', 'Cormorant Garamond', Georgia, serif;
}
body.yati-brand-naaribiz .site-main h1,
body.yati-brand-naaribiz .site-main h2,
body.yati-brand-naaribiz .site-main h3,
body.yati-brand-naaribiz .site-main h4,
body.yati-brand-naaribiz .site-main .section-head h2 {
	font-family:'League Spartan', 'Montserrat', sans-serif;
	font-weight:800;
	letter-spacing:.012em;
}
/* White "boxes" like the Instagram slide so the dark-maroon serif text reads. */
body.yati-brand-naaribiz .site-main .meta-list {
	background:#ffffff;
	gap:16px;
}
body.yati-brand-naaribiz .site-main .meta-list > div {
	background:#ffffff;
}
/* Elegant serif accents (the "boxes" / fact values) = Prata.
   Spec: Prata Regular, dark maroon, normal letter spacing, tight line height. */
body.yati-brand-naaribiz .site-main .meta-list > div {
	font-family:'Prata', 'Cormorant Garamond', Georgia, serif;
	font-weight:400;
	font-size:1.25rem;
	color:#5C1A3C;
	letter-spacing:normal;
	line-height:1.15;
}
body.yati-brand-naaribiz .site-main .meta-list .label {
	font-family:'Montserrat', sans-serif;
	font-size:.72rem;
	color:#A2356E;
}
/* India Interior Expo — matches the DESIGN INDIA INTERIOR EXPO logo: vibrant
   raspberry-pink page, white text, festive yellow/blue accents. Dark page. */
body.yati-brand-interior {
	--brown-dark:#FFF6F8; --brown:#2E5AAC; --gold:#FFD84D; --gold-2:#FFE894; --brand:#D9264E;
	--cream:#CF1E48; --cream-2:#C01A41; --sand:#B2163A; --ink:#FFF6F8; --line:rgba(255,255,255,.2);
	--brand-header-bg:#CF1E48; --brand-header-text:#FFF6F8; --brand-footer-bg:#83112A; --brand-footer-text:#FFF6F8;
}
body.yati-brand-interior .site-main {
	--brown-dark:#FFF6F8; --brown:#2E5AAC; --gold:#FFD84D; --gold-2:#FFE894; --brand:#D9264E;
	--cream:#CF1E48; --cream-2:#C01A41; --sand:#B2163A; --ink:#FFF6F8; --line:rgba(255,255,255,.2);
	color:#FFF6F8;
}
/* Logo-blue CTA + light list/quote text on the raspberry page. */
body.yati-brand-interior .site-main .btn--gold { background:#2E5AAC; border-color:#2E5AAC; color:#fff; }
body.yati-brand-interior .site-main .btn--gold:hover { background:#24488C; border-color:#24488C; color:#fff; }
body.yati-brand-interior .site-main .service-includes li,
body.yati-brand-interior .site-main .entry-content blockquote { color:#FFF6F8; }
/* Contento Carnivale — matches the official "Jaipur Kids Festival" creative:
   playful teal-green page with cream/white text + sunny-yellow accents. Dark page. */
body.yati-brand-contento {
	--brown-dark:#FFFDF7; --brown:#E5641E; --gold:#F5C842; --gold-2:#FFDD70; --brand:#0C6157;
	--cream:#0C6157; --cream-2:#0A544B; --sand:#084840; --ink:#FFFDF7; --line:rgba(255,255,255,.18);
	--brand-header-bg:#0C6157; --brand-header-text:#FFFDF7; --brand-footer-bg:#063D37; --brand-footer-text:#FFFDF7;
}
body.yati-brand-contento .site-main {
	--brown-dark:#FFFDF7; --brown:#E5641E; --gold:#F5C842; --gold-2:#FFDD70; --brand:#0C6157;
	--cream:#0C6157; --cream-2:#0A544B; --sand:#084840; --ink:#FFFDF7; --line:rgba(255,255,255,.18);
	color:#FFFDF7;
}
/* Playful solid-orange CTA + light list/quote text on the teal page. */
body.yati-brand-contento .site-main .btn--gold { background:#E5641E; border-color:#E5641E; color:#fff; }
body.yati-brand-contento .site-main .btn--gold:hover { background:#C64E12; border-color:#C64E12; color:#fff; }
body.yati-brand-contento .site-main .service-includes li,
body.yati-brand-contento .site-main .entry-content blockquote { color:#FFFDF7; }
/* India Build Expoo — matches the official creative: deep navy title on warm ivory. */
body.yati-brand-build {
	--brown-dark:#21306E; --brown:#26377E; --gold:#2E4C9E; --gold-2:#4A6BC0; --brand:#21306E;
	--cream:#F4F1E9; --cream-2:#ECE7DA; --sand:#E4DECC;
	--brand-header-bg:#F4F1E9; --brand-header-text:#21306E; --brand-footer-bg:#21306E; --brand-footer-text:#F4F1E9;
}
body.yati-brand-build .site-main {
	--brown-dark:#21306E; --brown:#26377E; --gold:#2E4C9E; --gold-2:#4A6BC0; --brand:#21306E;
	--cream:#F4F1E9; --cream-2:#ECE7DA; --sand:#E4DECC;
}

/* Brand-aware navigation and footer chrome */
body.yati-brand .topbar {
	background:color-mix(in srgb, var(--brand-header-bg) 92%, #000 8%);
	color:var(--brand-header-text);
	border-bottom:1px solid color-mix(in srgb, var(--brand-header-text) 14%, transparent);
}
body.yati-brand .topbar a {
	color:var(--brand-header-text);
}
body.yati-brand .topbar a:hover {
	color:var(--gold-2);
}
body.yati-brand:not(.has-transparent-header) .site-header {
	background:var(--brand-header-bg);
	border-bottom-color:var(--line);
}
body.yati-brand:not(.has-transparent-header) .site-header .nav-menu > li > a,
body.yati-brand:not(.has-transparent-header) .site-header .brand-lockup .bw-top,
body.yati-brand:not(.has-transparent-header) .site-header .brand-lockup .bw-sub {
	color:var(--brand-header-text);
}
body.yati-brand:not(.has-transparent-header) .site-header .brand-lockup .bw-top b {
	color:var(--gold-2);
}
body.yati-brand:not(.has-transparent-header) .site-header .nav-menu a::after {
	background:var(--gold-2);
}
body.yati-brand:not(.has-transparent-header) .site-header .nav-menu .menu-item-has-children > a::before {
	border-top-color:var(--brand-header-text);
}
body.yati-brand:not(.has-transparent-header) .site-header .nav-menu ul {
	background:var(--brand-header-bg);
	border-color:var(--line);
}
body.yati-brand:not(.has-transparent-header) .site-header .nav-menu ul a {
	color:var(--brand-header-text);
}
body.yati-brand:not(.has-transparent-header) .site-header .nav-menu ul a:hover {
	color:var(--gold-2);
	background:rgba(255,255,255,.08);
}
body.yati-brand .site-footer {
	background:var(--brand-footer-bg);
	color:var(--brand-footer-text);
}
body.yati-brand .site-footer h4,
body.yati-brand .site-footer .brand-lockup--light .bw-top,
body.yati-brand .site-footer .brand-lockup--light .bw-sub {
	color:var(--brand-footer-text);
}
body.yati-brand .site-footer .brand-lockup--light .bw-top b,
body.yati-brand .site-footer a:hover {
	color:var(--gold-2);
}
body.yati-brand .site-footer a,
body.yati-brand .site-footer p,
body.yati-brand .site-footer li {
	color:color-mix(in srgb, var(--brand-footer-text) 82%, transparent);
}
body.yati-brand .footer-bottom {
	color:color-mix(in srgb, var(--brand-footer-text) 70%, transparent);
	border-top-color:color-mix(in srgb, var(--brand-footer-text) 16%, transparent);
}

/* ==========================================================================
   23. About page — purpose pillars, director, brand family, timeline, partners
   ========================================================================== */
/* Mission / Vision / Values pillars */
.pillars { display:grid; grid-template-columns: repeat(3,1fr); gap:30px; }
.pillar { background:#fff; padding:44px 34px; box-shadow: var(--shadow-sm); text-align:center; border-top:3px solid var(--gold); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.pillar__mark { display:block; color:var(--gold); margin-bottom:12px; }
.pillar__mark svg { width:46px; height:auto; margin:0 auto; }
.pillar h3 { font-size:1.45rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.pillar p { color:var(--brown-dark); font-weight:500; font-size:.95rem; margin:0; }

/* Director's message */
.director { display:grid; grid-template-columns: 260px 1fr; gap:48px; align-items:center; max-width:980px; margin:0 auto; }
.director__photo { aspect-ratio:3/4; border-radius: 50% 50% 0 0 / 30% 30% 0 0; overflow:hidden; box-shadow: var(--shadow); border:8px solid #fff; background:linear-gradient(160deg,var(--cream-2),var(--sand)); }
.director__photo img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.director__body .eyebrow { margin-bottom:16px; }
.director__quote { font-family:var(--serif); font-style:italic; font-size:1.5rem; line-height:1.5; color:var(--brown-dark); border:0; margin:0 0 22px; padding:0; }
.director__name { font-family:var(--script); font-size:2.4rem; line-height:1; color:var(--gold); margin:0; }
.director__role { font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:6px 0 0; }

/* Brand family cards */
.brand-family { display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.brand-card { background:#fff; padding:34px 30px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.brand-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.brand-card__mark { width:44px; margin-bottom:16px; }
.brand-card__mark .brand-mark { width:44px; height:auto; }
.brand-card__name { font-size:1.4rem; letter-spacing:.04em; margin-bottom:6px; }
.brand-card__tag { display:inline-block; align-self:flex-start; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; background:var(--cream-2); padding:5px 12px; margin-bottom:16px; }
.brand-card p { color:var(--brown-dark); font-weight:500; font-size:.92rem; flex:1 1 auto; margin-bottom:18px; }
.brand-card__links { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand-card__ig { color:var(--gold); display:inline-flex; }
.brand-card__ig svg { width:20px; height:20px; }
.brand-card__ig:hover { color:var(--brown-dark); }

/* Journey timeline */
.timeline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(4,1fr); gap:0; counter-reset: tl; }
.timeline__item { position:relative; padding:52px 22px 0; text-align:center; counter-increment: tl; }
.timeline__item::before { content:''; position:absolute; top:14px; left:0; right:0; height:2px; background:var(--line); }
.timeline__item:first-child::before { left:50%; }
.timeline__item:last-child::before { right:50%; }
.timeline__item::after { content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:15px; height:15px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px var(--cream-2); }
.timeline__year { display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px; }
.timeline__item h3 { font-size:1.2rem; margin-bottom:10px; }
.timeline__item p { color:var(--brown-dark); font-weight:500; font-size:.9rem; margin:0; }

/* Partner strip */
.partner-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.partner-strip__item { font-family:var(--serif); font-size:1.15rem; letter-spacing:.06em; color:var(--brown-dark); padding:16px 34px; border:1px solid var(--line); background:#fff; transition: all .25s var(--ease); }
.partner-strip__item:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }

@media (max-width:980px) {
	.pillars, .brand-family { grid-template-columns: repeat(2,1fr); }
	.director { grid-template-columns: 200px 1fr; gap:32px; }
	.timeline { grid-template-columns: 1fr 1fr; gap:34px 0; }
	.timeline__item::before, .timeline__item::after { display:none; }
	.timeline__item { padding-top:0; }
}
@media (max-width:640px) {
	.pillars, .brand-family, .timeline { grid-template-columns: 1fr; }
	.director { grid-template-columns: 1fr; text-align:center; }
	.director__photo { max-width:220px; margin:0 auto; }
}

/* ==========================================================================
   15. Gallery lightbox (Media / Gallery page)
   ========================================================================== */
.media-gallery__item { position:relative; cursor: zoom-in; }
.media-gallery__item--ph { aspect-ratio:1; overflow:hidden; box-shadow:var(--shadow-sm); cursor:default; }
.media-gallery__item--ph .yati-ph { min-height:0 !important; height:100%; }

/* Exhibition "Follow" pills — inherit each brand page's palette automatically. */
.exh-socials { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:6px; }
.exh-social { display:inline-flex; align-items:center; gap:9px; padding:12px 24px; border:1px solid var(--gold); color:var(--brown-dark); border-radius:40px; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; transition:all .25s var(--ease); }
.exh-social svg { width:17px; height:17px; flex:0 0 auto; }
.exh-social:hover { background:var(--brown); border-color:var(--brown); color:#fff; transform:translateY(-2px); }
.media-gallery__zoom {
	position:absolute; top:50%; left:50%; z-index:2; width:52px; height:52px; border-radius:50%;
	border:1px solid rgba(255,255,255,.75);
	background:rgba(44,35,28,.28); backdrop-filter:blur(2px); color:#fff;
	display:flex; align-items:center; justify-content:center;
	font-size:1.5rem; font-weight:300; line-height:1; pointer-events:none;
	opacity:0; transform:translate(-50%,-50%) scale(.7);
	transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.media-gallery__item:hover .media-gallery__zoom { opacity:1; transform:translate(-50%,-50%) scale(1); }

.yati-lightbox {
	position:fixed; inset:0; z-index:1000; display:none;
	align-items:center; justify-content:center;
	background:rgba(20,15,11,.92); padding:40px 64px;
}
.yati-lightbox.is-open { display:flex; }
.yati-lightbox__stage { margin:0; max-width:90vw; max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:14px; }
.yati-lightbox__img { max-width:90vw; max-height:78vh; width:auto; height:auto; box-shadow:0 24px 60px rgba(0,0,0,.5); }
.yati-lightbox__caption { color:rgba(255,255,255,.9); font-family:var(--serif); letter-spacing:.06em; font-size:1rem; text-align:center; }
.yati-lightbox__close, .yati-lightbox__nav {
	position:absolute; top:50%; transform:translateY(-50%);
	background:rgba(255,255,255,.12); color:#fff; border:0; cursor:pointer;
	width:52px; height:52px; border-radius:50%; font-size:1.6rem; line-height:1;
	display:flex; align-items:center; justify-content:center; transition:background .2s var(--ease);
}
.yati-lightbox__close:hover, .yati-lightbox__nav:hover { background:rgba(255,255,255,.28); }
.yati-lightbox__close { top:24px; right:24px; transform:none; width:46px; height:46px; }
.yati-lightbox__prev { left:20px; }
.yati-lightbox__next { right:20px; }
@media (max-width:640px) {
	.yati-lightbox { padding:20px 8px; }
	.yati-lightbox__prev { left:6px; }
	.yati-lightbox__next { right:6px; }
	.yati-lightbox__nav { width:44px; height:44px; }
}

/* ==========================================================================
   MOBILE FIXES (loaded last so they win) — nav toggle + heading overflow
   ========================================================================== */
@media (max-width:820px) {
	/* Header: guarantee logo-left / hamburger-right, and the toggle visible. */
	.header-inner { display:flex !important; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0; }
	.site-branding { order:1 !important; flex:1 1 auto; text-align:left; }
	.nav-toggle { order:2 !important; display:flex !important; margin-left:auto; }
	.nav-menu.nav--left, .nav-menu.nav--right { flex:0 0 100%; }

	/* Headings: never let a word overflow the viewport (this was pushing the
	   header wide and hiding the hamburger, and clipping the hero text). */
	h1, h2, h3, .hero h1, .page-hero h1 { overflow-wrap:break-word; word-break:break-word; }
	.hero { min-height:auto; padding:120px 0 84px; }
	.hero h1 { font-size:clamp(1.8rem, 8.5vw, 2.9rem) !important; letter-spacing:.02em; }
	.hero p { font-size:.96rem; }
	.hero .eyebrow { font-size:.62rem; letter-spacing:.16em; }
	h1 { font-size:clamp(1.9rem, 7.6vw, 2.9rem); }
	h2 { font-size:clamp(1.6rem, 6.6vw, 2.4rem); }
	.intro__lead { font-size:clamp(1.2rem, 5.2vw, 1.6rem); }
	.section-sub { font-size:.95rem; }
}
@media (max-width:430px) {
	.container { padding:0 18px; }
	.hero h1 { font-size:clamp(1.6rem, 8.5vw, 2.3rem) !important; }
	.btn { padding:14px 24px; font-size:.74rem; letter-spacing:.12em; }
}
/* When the mobile menu is open, hide the floating WhatsApp button so it never
   overlaps the last menu items (Gallery / Contact), and pad the menu bottom. */
body.nav-open .wa-float { opacity:0; visibility:hidden; pointer-events:none; }
@media (max-width:820px){
	.site-header.menu-open .nav-menu.nav--right { padding-bottom:14px; }
}