/* ============================================================
   Bhumika Makeup — Design Tokens & Base Styles
   Editorial-luxury aesthetic, mobile-first, bilingual (EN/AR-RTL)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Colour palette (from brand brief) ---------- */
  --c-bg:          #F5EFE6;   /* warm off-white / champagne — primary surface */
  --c-bg-soft:     #EFE6D8;   /* slightly deeper champagne */
  --c-bg-card:    #FBF6EE;   /* card / elevated surface */
  --c-plum:        #5C2E2E;   /* deep muted plum — primary anchor */
  --c-plum-deep:   #4A2424;
  --c-plum-soft:   #6B3D43;
  --c-gold:        #B8956A;   /* antique gold accent */
  --c-gold-soft:   #C9A883;
  --c-rose:        #D9B5A6;   /* dusty rose */
  --c-rose-soft:   #E8CDC0;
  --c-ink:         #2A1F1A;   /* brown-black for text */
  --c-ink-soft:    #4A3B33;
  --c-ink-muted:   #6E5C52;
  --c-hairline:    #D9CCB9;   /* warm hairline divider */

  /* ---------- Type scale ---------- */
  --f-display: 'Playfair Display', 'Noto Naskh Arabic', Georgia, serif;
  --f-body:    'Inter', 'Noto Naskh Arabic', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-ar:      'Noto Naskh Arabic', 'Playfair Display', serif;

  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-base: 1rem;      /* 16 */
  --t-md:   1.125rem;  /* 18 */
  --t-lg:   1.375rem;  /* 22 */
  --t-xl:   1.75rem;   /* 28 */
  --t-2xl:  2.25rem;   /* 36 */
  --t-3xl:  3rem;      /* 48 */
  --t-4xl:  4rem;      /* 64 — desktop hero */
  --t-5xl:  5.5rem;    /* 88 — display */

  /* ---------- Spacing (4/8 rhythm) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* ---------- Other ---------- */
  --max-w: 1280px;
  --max-w-narrow: 880px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(42, 31, 26, 0.06);
  --shadow-md: 0 8px 28px -10px rgba(42, 31, 26, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(42, 31, 26, 0.25);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   Reset & base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
}

html[dir="rtl"] body {
  font-family: var(--f-ar);
  letter-spacing: 0;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  color: var(--c-plum);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
}

h1 { font-size: clamp(2.25rem, 6vw, var(--t-4xl)); font-weight: 400; }
h2 { font-size: clamp(1.75rem, 4.5vw, var(--t-2xl)); font-weight: 400; }
h3 { font-size: var(--t-xl); }
h4 { font-size: var(--t-lg); }

p { margin: 0 0 var(--s-4); max-width: 65ch; }

a {
  color: var(--c-plum);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
a:hover { border-bottom-color: var(--c-gold); }
a:focus-visible {
  outline: 2px solid var(--c-plum);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--c-rose); color: var(--c-plum-deep); }

/* ============================================================
   Layout utilities
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--s-6); }
}
@media (min-width: 1024px) {
  .container { padding: 0 var(--s-7); }
}

.section { padding: var(--s-8) 0; }
@media (min-width: 768px) { .section { padding: var(--s-9) 0; } }
@media (min-width: 1024px) { .section { padding: var(--s-10) 0; } }

.section--tight { padding: var(--s-7) 0; }
.section--cream { background: var(--c-bg-soft); }

/* ============================================================
   Typography helpers
   ============================================================ */

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin: 0 0 var(--s-4);
}

.lede {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 60ch;
}

.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-style: italic;
  color: var(--c-plum);
  letter-spacing: -0.015em;
}

.rule {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--c-gold);
  vertical-align: middle;
  margin: 0 var(--s-3);
}

/* ============================================================
   Header / nav
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 239, 230, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--c-hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--s-5);
}

.brand {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-plum);
  border: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.brand__mark {
  display: inline-block;
  width: 22px;
  height: 22px;
  transform: translateY(3px);
}
.brand__suffix {
  font-family: var(--f-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.nav {
  display: none;
  gap: var(--s-6);
}
@media (min-width: 900px) { .nav { display: flex; } }

.nav a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink-soft);
  letter-spacing: 0.04em;
  border: 0;
  padding: 4px 0;
  position: relative;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease);
}
.nav a:hover { color: var(--c-plum); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--c-plum); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  border: 1px solid var(--c-hairline);
  padding: 6px 12px;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lang-toggle:hover { background: var(--c-bg-card); color: var(--c-plum); }
.lang-toggle__sep { color: var(--c-hairline); }

.menu-btn {
  display: inline-flex;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--c-hairline);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--c-plum);
}
@media (min-width: 900px) { .menu-btn { display: none; } }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 28px;
  font-family: var(--f-body);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--c-plum);
  background: var(--c-plum);
  color: var(--c-bg);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease),
              transform 200ms var(--ease), box-shadow 240ms var(--ease);
}
.btn:hover {
  background: var(--c-plum-deep);
  color: var(--c-bg);
  border-color: var(--c-plum-deep);
  box-shadow: var(--shadow-md);
  border-bottom: 1px solid var(--c-plum-deep);
}
.btn:active { transform: translateY(1px); }

.btn--ghost {
  background: transparent;
  color: var(--c-plum);
}
.btn--ghost:hover {
  background: var(--c-plum);
  color: var(--c-bg);
}

.btn--gold {
  border-color: var(--c-gold);
  background: transparent;
  color: var(--c-plum);
}
.btn--gold:hover {
  background: var(--c-gold);
  color: var(--c-bg);
  border-color: var(--c-gold);
}

.btn--whatsapp {
  background: #128C7E;
  border-color: #128C7E;
  color: #fff;
}
.btn--whatsapp:hover {
  background: #0e6e63;
  border-color: #0e6e63;
}

.btn svg { width: 16px; height: 16px; }

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  padding: 0;
  background: var(--c-bg);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
  min-height: 78vh;
  padding: var(--s-8) 0;
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-9);
    padding: var(--s-9) 0;
  }
}

.hero__copy h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  margin-bottom: var(--s-5);
}
.hero__copy h1 em {
  font-style: italic;
  color: var(--c-plum-soft);
}

.hero__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--c-rose-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(184, 149, 106, 0.35), transparent 55%),
    linear-gradient(160deg, var(--c-rose) 0%, var(--c-rose-soft) 40%, var(--c-bg-soft) 100%);
}
.hero__media-tag {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  z-index: 2;
  background: rgba(245, 239, 230, 0.92);
  backdrop-filter: blur(8px);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-plum);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-hairline);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.hero__meta strong { color: var(--c-plum); font-weight: 600; }

/* ============================================================
   Three pillars
   ============================================================ */

.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 768px) { .pillars { grid-template-columns: repeat(3, 1fr); } }

.pillar {
  padding: var(--s-6);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
  background: var(--c-bg-card);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.pillar:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.pillar__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--c-gold);
  display: block;
  margin-bottom: var(--s-3);
  line-height: 1;
}
.pillar h3 {
  font-size: var(--t-lg);
  margin-bottom: var(--s-3);
}
.pillar p { margin: 0; color: var(--c-ink-soft); font-size: var(--t-sm); line-height: 1.65; }

/* ============================================================
   Service tiles
   ============================================================ */

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--c-rose-soft);
  border: 0;
  transition: transform 350ms var(--ease);
}
.tile:hover { transform: translateY(-4px); }
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(42, 31, 26, 0.55) 100%);
  z-index: 1;
}
.tile__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.tile__bg--southasian { background: linear-gradient(160deg, #B85C5C 0%, #6B2B33 100%); }
.tile__bg--khaleeji   { background: linear-gradient(160deg, #C9A883 0%, #5C2E2E 100%); }
.tile__bg--arab       { background: linear-gradient(160deg, #8B5A4A 0%, #3A2018 100%); }
.tile__bg--editorial  { background: linear-gradient(160deg, #6E5C52 0%, #2A1F1A 100%); }

.tile__label {
  position: absolute;
  left: var(--s-5); right: var(--s-5); bottom: var(--s-5);
  z-index: 2;
  color: var(--c-bg);
}
.tile__label h3 {
  color: var(--c-bg);
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 500;
}
.tile__label small {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-rose-soft);
  margin-bottom: var(--s-2);
}

/* ============================================================
   Gallery
   ============================================================ */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (min-width: 600px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } }

.gallery__item {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-rose-soft);
  transition: transform 300ms var(--ease), filter 300ms var(--ease);
  cursor: pointer;
}
.gallery__item:nth-child(7n+1) { background: linear-gradient(135deg, #B85C5C, #5C2E2E); }
.gallery__item:nth-child(7n+2) { background: linear-gradient(135deg, #C9A883, #6B3D43); }
.gallery__item:nth-child(7n+3) { background: linear-gradient(135deg, #D9B5A6, #8B5A4A); }
.gallery__item:nth-child(7n+4) { background: linear-gradient(135deg, #8B5A4A, #2A1F1A); }
.gallery__item:nth-child(7n+5) { background: linear-gradient(135deg, #6E5C52, #4A3B33); }
.gallery__item:nth-child(7n+6) { background: linear-gradient(135deg, #B8956A, #5C2E2E); }
.gallery__item:nth-child(7n+7) { background: linear-gradient(135deg, #E8CDC0, #B85C5C); }
.gallery__item:hover { transform: scale(1.02); filter: brightness(1.05); }

.gallery--portrait .gallery__item { aspect-ratio: 4 / 5; }

/* ============================================================
   Testimonials
   ============================================================ */

.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 768px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  padding: var(--s-6);
  background: var(--c-bg-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
}
.testimonial__quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--c-plum);
  margin: 0 0 var(--s-5);
  position: relative;
}
.testimonial__quote::before {
  content: '\201C';
  position: absolute;
  left: -12px;
  top: -12px;
  font-size: 3rem;
  color: var(--c-gold);
  line-height: 1;
  opacity: 0.5;
}
.testimonial__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.testimonial__avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-rose), var(--c-gold-soft));
  flex-shrink: 0;
}
.testimonial__name {
  color: var(--c-plum);
  font-weight: 500;
}

/* ============================================================
   Instagram feed
   ============================================================ */

.ig-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  gap: var(--s-4);
}
.ig-handle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-plum);
  border: 0;
}
.ig-handle svg { width: 18px; height: 18px; }

.ig-feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
@media (min-width: 600px) { .ig-feed { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ig-feed { grid-template-columns: repeat(6, 1fr); } }

.ig-tile {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.ig-tile:nth-child(6n+1) { background: linear-gradient(135deg, #B85C5C, #5C2E2E); }
.ig-tile:nth-child(6n+2) { background: linear-gradient(135deg, #C9A883, #6B3D43); }
.ig-tile:nth-child(6n+3) { background: linear-gradient(135deg, #D9B5A6, #8B5A4A); }
.ig-tile:nth-child(6n+4) { background: linear-gradient(135deg, #8B5A4A, #2A1F1A); }
.ig-tile:nth-child(6n+5) { background: linear-gradient(135deg, #6E5C52, #4A3B33); }
.ig-tile:nth-child(6n+6) { background: linear-gradient(135deg, #B8956A, #5C2E2E); }
.ig-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(42, 31, 26, 0);
  transition: background 200ms var(--ease);
}
.ig-tile:hover::after { background: rgba(42, 31, 26, 0.2); }

/* ============================================================
   Floating WhatsApp button
   ============================================================ */

.fab-wa {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 60px; height: 60px;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.6), 0 4px 12px rgba(0,0,0,0.12);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
  border: 0;
}
.fab-wa:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 36px -8px rgba(37, 211, 102, 0.7), 0 6px 16px rgba(0,0,0,0.16);
}
.fab-wa:focus-visible {
  outline: 3px solid var(--c-plum);
  outline-offset: 4px;
}
.fab-wa svg { width: 28px; height: 28px; }

html[dir="rtl"] .fab-wa { right: auto; left: 24px; }

/* ============================================================
   Bridal page — sub-services
   ============================================================ */

.sub-service {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: start;
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--c-hairline);
}
.sub-service:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .sub-service { grid-template-columns: 1fr 1.4fr; gap: var(--s-8); }
}

.sub-service__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
.sub-service__media .gallery__item:first-child {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

/* ============================================================
   Price tiers
   ============================================================ */

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 768px) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier {
  padding: var(--s-6);
  background: var(--c-bg-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  position: relative;
}
.tier--featured {
  background: var(--c-plum);
  color: var(--c-bg);
  border-color: var(--c-plum);
}
.tier--featured h3,
.tier--featured .tier__price,
.tier--featured .tier__tagline { color: var(--c-bg); }
.tier--featured .tier__features li { color: var(--c-rose-soft); }
.tier--featured .tier__features svg { color: var(--c-gold-soft); }
.tier__badge {
  position: absolute;
  top: -12px; right: var(--s-5);
  background: var(--c-gold);
  color: var(--c-bg);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.tier h3 { font-size: var(--t-xl); margin-bottom: var(--s-2); }
.tier__tagline {
  font-size: var(--t-sm);
  color: var(--c-ink-muted);
  margin-bottom: var(--s-5);
}
.tier__price {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  color: var(--c-plum);
  font-weight: 500;
  margin-bottom: var(--s-1);
}
.tier__price small {
  font-family: var(--f-body);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-left: 6px;
}
.tier__features {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0;
  flex: 1;
}
.tier__features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: var(--t-sm);
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.tier__features svg {
  width: 16px; height: 16px;
  color: var(--c-gold);
  margin-top: 4px;
  flex-shrink: 0;
}

/* ============================================================
   Process steps
   ============================================================ */

.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  counter-reset: step;
}
@media (min-width: 768px) { .process { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-hairline);
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-2xl);
  color: var(--c-gold);
  display: block;
  margin-bottom: var(--s-3);
  line-height: 1;
}
.step h4 { margin-bottom: var(--s-2); font-size: var(--t-md); }
.step p { font-size: var(--t-sm); color: var(--c-ink-soft); line-height: 1.6; }

/* ============================================================
   FAQ
   ============================================================ */

.faq-list { max-width: var(--max-w-narrow); margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--c-hairline);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-5) 0;
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--c-plum);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--c-gold);
  transition: transform 240ms var(--ease);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '\2013'; }
.faq-item p {
  padding: 0 0 var(--s-5);
  color: var(--c-ink-soft);
  font-size: var(--t-base);
  max-width: 60ch;
}

/* ============================================================
   About — split
   ============================================================ */

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
.split--reverse > :first-child { order: 2; }
@media (min-width: 900px) {
  .split--reverse > :first-child { order: 1; }
}

.portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--c-rose) 0%, var(--c-plum) 100%);
  position: relative;
  overflow: hidden;
}
.portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, rgba(245, 239, 230, 0.25), transparent 60%);
}

.pull-quote {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, var(--t-2xl));
  line-height: 1.35;
  color: var(--c-plum);
  max-width: 28ch;
  margin: 0 auto;
  text-align: center;
}
.pull-quote::before,
.pull-quote::after {
  content: '';
  display: block;
  width: 36px; height: 1px;
  background: var(--c-gold);
  margin: var(--s-5) auto;
}

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}
.timeline li {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--c-hairline);
}
.timeline li:last-child { border-bottom: 0; }
.timeline__year {
  font-family: var(--f-display);
  font-size: var(--t-md);
  color: var(--c-gold);
  font-weight: 500;
}
.timeline__event h4 { margin: 0 0 4px; font-size: var(--t-md); }
.timeline__event p { margin: 0; font-size: var(--t-sm); color: var(--c-ink-soft); }

/* ============================================================
   Contact / form
   ============================================================ */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--s-8); }
}

.contact-card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.contact-method {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-hairline);
}
.contact-method:last-child { border-bottom: 0; }
.contact-method__icon {
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-bg);
  border-radius: 999px;
  color: var(--c-plum);
  flex-shrink: 0;
}
.contact-method__label {
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin: 0;
}
.contact-method__value {
  font-family: var(--f-display);
  font-size: var(--t-md);
  color: var(--c-plum);
  margin: 0;
}

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
/* Only split into 2 columns once we have real tablet width — phone
   landscape (667-844px) still gets a single column so date / select
   pairs don't visually crash into each other. */
@media (min-width: 820px) {
  .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field label {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: var(--t-base);
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  min-height: 48px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-plum);
  box-shadow: 0 0 0 3px rgba(92, 46, 46, 0.12);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--c-ink-muted);
  opacity: 0.7;
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--c-ink);
  color: var(--c-bg);
  padding: var(--s-8) 0 var(--s-6);
  margin-top: var(--s-9);
}
.site-footer h4 {
  color: var(--c-bg);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: var(--f-body);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  margin-bottom: var(--s-7);
}
@media (min-width: 600px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }

.site-footer a {
  color: var(--c-rose-soft);
  font-size: var(--t-sm);
  display: block;
  padding: 4px 0;
  border: 0;
}
.site-footer a:hover { color: var(--c-bg); }

.site-footer__brand {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--c-bg);
  margin-bottom: var(--s-3);
}
.site-footer__tag {
  font-size: var(--t-sm);
  color: var(--c-rose-soft);
  max-width: 36ch;
  margin: 0 0 var(--s-5);
}

.emirates {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--c-rose-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.emirates li::after {
  content: '\2022';
  margin-left: var(--s-3);
  color: var(--c-gold);
}
.emirates li:last-child::after { content: ''; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(245, 239, 230, 0.12);
  font-size: var(--t-xs);
  color: var(--c-rose-soft);
  letter-spacing: 0.08em;
}

/* ============================================================
   Page header (non-home pages)
   ============================================================ */

.page-head {
  padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--c-hairline);
}
@media (min-width: 768px) { .page-head { padding: var(--s-9) 0 var(--s-8); } }

.page-head h1 {
  font-size: clamp(2.5rem, 6vw, var(--t-4xl));
  max-width: 18ch;
}
.page-head .lede { margin-top: var(--s-4); }

.crumbs {
  display: flex;
  gap: 10px;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: var(--s-5);
}
.crumbs a { border: 0; color: var(--c-ink-muted); }
.crumbs a:hover { color: var(--c-plum); }

/* ============================================================
   Section header
   ============================================================ */

.section-head {
  margin-bottom: var(--s-7);
  max-width: 60ch;
}
.section-head--center { margin: 0 auto var(--s-7); text-align: center; }

/* ============================================================
   Misc
   ============================================================ */

.muted { color: var(--c-ink-muted); }
.center { text-align: center; }

.divider {
  width: 60px;
  height: 1px;
  background: var(--c-gold);
  margin: var(--s-5) 0;
  border: 0;
}
.divider--center { margin: var(--s-5) auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* RTL adjustments */
html[dir="rtl"] .nav a::after { transform-origin: right; }
html[dir="rtl"] .testimonial__quote::before { left: auto; right: -12px; }
html[dir="rtl"] .emirates li::after { margin-left: 0; margin-right: var(--s-3); }
html[dir="rtl"] .tier__badge { right: auto; left: var(--s-5); }
html[dir="rtl"] .tier__price small { margin-left: 0; margin-right: 6px; }
html[dir="rtl"] .pillar__num,
html[dir="rtl"] .step::before { font-style: normal; }

/* ============================================================
   DEFENSIVE: ensure any <img> in a fixed-aspect container
   fills it via object-fit: cover (preserves aspect ratio, crops
   overflow — never squashes). Applies broadly across concepts.
   ============================================================ */
.gallery__item > img,
.tile > img,
.tile > img.tile__bg,
.portrait > img,
.hero__media > img,
.va-card > img,
.va-cover__img,
.va-spread__media > img,
.vb-tile > img,
.vc-chapter__img,
.vd-panel__media > img,
.ve-stage > img,
.ve-stage > img.ve-stage__slide,
.vf-entry__media figure > img,
.vg-row__media > img,
.vh-card > img,
.vh-stage__portrait > img,
.vh-feature__media > img,
.vi-piece__media > img,
.vi-bouquet__portrait > img,
.vj-piece__media > img,
.vk-item__media > img,
.vl-plate > img,
.vl-gallery figure > img,
.sub-service__media .gallery__item > img,
.ig-tile > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block;
}

/* Specific override for hero — face should sit higher */
.hero__media > img,
.va-cover__img,
.vc-chapter__img {
  object-position: center 30% !important;
}

/* For figures (Daybook plates) we want contain at most — they're
   inline editorial plates not aspect-locked tiles. Leave as is. */
.vl-plate > img:not([style*="aspect-ratio"]) {
  height: auto !important;
  object-fit: cover !important;
}

/* ============================================================
   ENQUIRY FORM — multi-section quotation intake
   ============================================================ */
.enquiry-form { gap: var(--s-7); }

.enquiry-section {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-lg);
  background: var(--c-bg-card);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin: 0;
}
@media (min-width: 700px) {
  .enquiry-section { padding: var(--s-7); }
}
.enquiry-section legend {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin: 0;
  padding: 0 0 var(--s-5);
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--c-plum);
  width: 100%;
  border-bottom: 1px solid var(--c-hairline);
  margin-bottom: 0;
}
.enquiry-num {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-lg);
  color: var(--c-gold);
  line-height: 1;
}

.enquiry-form .req {
  color: var(--c-gold);
  font-weight: 600;
  margin-left: 2px;
}
.enquiry-form .opt {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 0.75em;
  color: var(--c-ink-muted);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
}

/* Radio cards grid (event type, tradition, budget) */
.radio-grid,
.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 600px) {
  .radio-grid     { grid-template-columns: repeat(2, 1fr); }
  .checkbox-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .radio-grid     { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .checkbox-grid  { grid-template-columns: repeat(3, 1fr); }
}

.radio-card,
.check-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease), transform 200ms var(--ease);
  position: relative;
  min-width: 0;
}
.radio-card:hover,
.check-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-1px);
}
.radio-card input,
.check-card input {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  margin: 0;
  accent-color: var(--c-plum);
  cursor: pointer;
}
.check-card input { grid-row: 1; }

.radio-card > span,
.check-card > span {
  grid-column: 2;
  grid-row: 1;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.35;
  min-width: 0;
}
.radio-card em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-plum);
}
.radio-card > small {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--t-xs);
  color: var(--c-ink-muted);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  min-width: 0;
}
.radio-card:has(input:checked),
.check-card:has(input:checked) {
  border-color: var(--c-plum);
  background: var(--c-bg-soft);
  box-shadow: inset 0 0 0 1px var(--c-plum);
}

/* Actions row */
.enquiry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
.enquiry-actions .btn {
  white-space: nowrap;
}

.form-status {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-gold);
  color: var(--c-plum);
  font-size: var(--t-sm);
  font-weight: 500;
  margin-top: var(--s-4) !important;
}

/* ============================================================
   ENQUIRY FORM — progressive disclosure (more-detail toggles)
   ============================================================ */
.more-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 8px 0;
  margin-top: var(--s-2);
  font: inherit;
  color: var(--c-plum);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  border-bottom: 1px solid currentColor;
  transition: color 200ms var(--ease), border-color 200ms;
}
.more-toggle:hover {
  color: var(--c-gold);
}
.more-toggle:focus-visible {
  outline: 2px solid var(--c-plum);
  outline-offset: 4px;
  border-radius: 2px;
}

.more-detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-3);
}
.more-detail[hidden] {
  display: none;
}

/* ------------------------------------------------------------------
   Mobile navigation (shared across all concepts)
   Injected by assets/js/mobile-nav.js
------------------------------------------------------------------ */

/* Hamburger button — hidden on desktop, visible under 900px */
.bm-mnav__btn {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  z-index: 70;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.bm-mnav__bar {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}

@media (max-width: 899px) {
  .bm-mnav__btn { display: inline-flex; }
  /* Hide every concept's desktop nav on mobile (broadcasts to all v*-header__nav and generic .nav inside a header) */
  header nav[aria-label="Primary"] { display: none !important; }
}

/* Lock body scroll while drawer is open */
.bm-mnav-locked,
.bm-mnav-locked body { overflow: hidden; }

/* Drawer overlay */
.bm-mnav__drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 14, 10, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.bm-mnav__drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s;
}

/* Drawer panel — full-height, slide from right */
.bm-mnav__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: #FAF7F1;
  color: #2A1F18;
  padding: 88px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.65, 0, 0.35, 1);
  overflow-y: auto;
}
.bm-mnav__drawer.is-open .bm-mnav__inner {
  transform: translateX(0);
}

/* Close button — X icon top-right of drawer */
.bm-mnav__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
.bm-mnav__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
}
.bm-mnav__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.bm-mnav__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Link list */
.bm-mnav__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid rgba(42, 31, 24, 0.12);
  padding-top: 24px;
}
.bm-mnav__list a {
  display: block;
  padding: 14px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #2A1F18;
  text-decoration: none;
  border-bottom: 1px solid rgba(42, 31, 24, 0.08);
  transition: color 160ms ease, padding-left 160ms ease;
}
.bm-mnav__list a:hover,
.bm-mnav__list a:focus-visible {
  color: #B8956A;
  padding-left: 6px;
}

/* Language toggle inside drawer */
.bm-mnav__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #2A1F18;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 0;
}

/* WhatsApp shortcut */
.bm-mnav__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  margin-top: auto;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: #25D366;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
}

/* RTL drawer slides from left instead */
html[dir="rtl"] .bm-mnav__inner {
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
html[dir="rtl"] .bm-mnav__drawer.is-open .bm-mnav__inner {
  transform: translateX(0);
}
html[dir="rtl"] .bm-mnav__close { right: auto; left: 22px; }

/* ------------------------------------------------------------------
   Mobile form overflow fix
   The enquiry form sits inside a `.contact-split` grid track that
   defaults to `minmax(auto, 1fr)`.  Long radio-card labels force the
   form column to its intrinsic min-content size, which blows out the
   viewport on phones.  Setting min-width: 0 on grid items lets them
   shrink to their assigned track.
------------------------------------------------------------------ */
.contact-split,
.contact-split > * { min-width: 0; }
.contact-split { grid-template-columns: minmax(0, 1fr); }

.enquiry-form,
.enquiry-section,
.form-row,
.field,
.field > *,
.radio-card,
.check-card { min-width: 0; }

.enquiry-form, .enquiry-section { max-width: 100%; }

/* Inputs / selects / textareas — never spill out of their column */
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea,
[data-enquiry-mount] input,
[data-enquiry-mount] select,
[data-enquiry-mount] textarea {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Long unbroken option labels (e.g. "Anywhere worldwide — I travel")
   should wrap, not expand the card. */
.radio-card span,
.radio-card small,
.check-card span,
.check-card small {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* On phones, drop section padding so we don't lose horizontal real estate */
@media (max-width: 600px) {
  .enquiry-section { padding: 20px; }
  .contact-split { gap: 28px; }
}

/* ------------------------------------------------------------------
   Phone-width tightening for the contact section
   The contact pages wrap the form in an inline-styled <section> with
   32px horizontal padding.  On a 320-360px phone that eats 64px of
   horizontal room — enough to push field labels off the right edge
   and make two stacked date fields read like one tangled block.
   Reclaim that space.
------------------------------------------------------------------ */
@media (max-width: 600px) {
  /* Outer section padding — the contact page wraps the split in a
     <section style="padding: clamp(60px, 8vw, 120px) 32px"> */
  section[style*="32px"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Tighter card padding so the form has more horizontal room */
  .contact-split aside { padding: 24px !important; }

  /* The two date inputs ("Main event date" and "Preferred trial date")
     never share a row on phones — force vertical stacking. */
  .field { gap: 10px; }
  .form-row { gap: var(--s-4); }

  /* Each form field gets a comfortable bottom margin to prevent any
     visual run-on between adjacent date / select fields. */
  .enquiry-section .field { margin-bottom: 6px; }
}

/* ------------------------------------------------------------------
   iOS Safari date input fix
   On iOS, an empty <input type="date"> renders as a totally blank
   pale box — no "dd/mm/yyyy" placeholder, no calendar icon — so two
   empty date fields look indistinguishable from each other.
   Strategy:
   1. Always show a calendar icon on the right of every date input.
   2. enquiry-form.js swaps the input to type="text" while empty so
      the placeholder "dd/mm/yyyy" actually renders, then back to
      type="date" on focus so the native picker opens.
------------------------------------------------------------------ */
.enquiry-form input[type="date"],
.enquiry-form input[type="text"][data-was-date],
[data-enquiry-mount] input[type="date"],
[data-enquiry-mount] input[type="text"][data-was-date] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E5C52' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M8 3v4M16 3v4M3 11h18'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 44px !important;
}

/* RTL — icon on the left */
html[dir="rtl"] .enquiry-form input[type="date"],
html[dir="rtl"] .enquiry-form input[type="text"][data-was-date],
html[dir="rtl"] [data-enquiry-mount] input[type="date"],
html[dir="rtl"] [data-enquiry-mount] input[type="text"][data-was-date] {
  background-position: left 14px center;
  padding-right: 16px !important;
  padding-left: 44px !important;
}

/* Make sure the iOS native date format text in a filled date input
   uses the same colour as other inputs (and isn't washed out). */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--c-ink);
}

/* ------------------------------------------------------------------
   Portfolio lightbox — assets/js/lightbox.js
   Click any portfolio image to morph it into a fullscreen view with
   an editorial caption.  Uses the View Transitions API where the
   browser supports it (Chrome / Safari 18+ / Edge); falls back to a
   short cross-fade on older browsers.
------------------------------------------------------------------ */

.bm-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(12, 8, 5, 0.94);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 260ms;
  color: #fff;
}
.bm-lb.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Lock scroll while open */
html.bm-lb-locked,
html.bm-lb-locked body { overflow: hidden; }

/* Image stage — figure covers the viewport but lets clicks fall through
   to the backdrop so the "click outside to close" pattern works.  The
   image and caption opt back in to pointer-events. */
.bm-lb__stage {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 56px 64px 32px;
  gap: 24px;
  pointer-events: none;
}
.bm-lb__img,
.bm-lb__cap { pointer-events: auto; }
.bm-lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  transform: scale(1);
  transition: opacity 160ms ease;
  view-transition-name: bm-lb-img;
}
.bm-lb__img--fading { opacity: 0; }

/* Caption — sits below the image, editorial-styled */
.bm-lb__cap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: min(900px, 90vw);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: center;
}
.bm-lb__cap-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #fff;
  flex: 1 1 100%;
}
.bm-lb__cap-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  transition: color 200ms ease, border-color 200ms ease;
}
.bm-lb__cap-link:hover { color: #fff; border-bottom-color: #fff; }
.bm-lb__counter {
  font-feature-settings: 'tnum';
  color: rgba(255,255,255,0.5);
}

/* Close button — top right */
.bm-lb__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  padding: 0;
  transition: background 200ms ease, border-color 200ms ease;
  z-index: 3; /* above the stage figure (inset: 0) so taps land on it */
}
.bm-lb__close:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
}
.bm-lb__close span {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
}
.bm-lb__close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.bm-lb__close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Prev / next navigation */
.bm-lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, border-color 200ms ease;
  z-index: 2;
}
.bm-lb__nav:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
}
.bm-lb__nav svg { width: 20px; height: 20px; }
.bm-lb__nav--prev { left: 22px; }
.bm-lb__nav--next { right: 22px; }
/* RTL — flip prev/next sides */
html[dir="rtl"] .bm-lb__nav--prev { left: auto; right: 22px; }
html[dir="rtl"] .bm-lb__nav--next { right: auto; left: 22px; }

/* Mobile sizing */
@media (max-width: 720px) {
  .bm-lb__stage { padding: 80px 16px 24px; }
  .bm-lb__nav {
    top: auto;
    bottom: 24px;
    transform: none;
    width: 48px; height: 48px;
  }
  .bm-lb__nav--prev { left: 24px; }
  .bm-lb__nav--next { right: 24px; }
  .bm-lb__close { top: 16px; right: 16px; }
  .bm-lb__cap-text { font-size: 0.9rem; }
}

/* Make every portfolio trigger feel interactive */
a.vm-frame,
a.vn-rail__item,
a.vo-card,
a.va-card, a.va-frame,
a.vb-cell, a.vb-tile,
a.vc-chapter, a.vc-frame, a.vc-cell, a.vc-card,
a.vd-spread, a.vd-frame, a.vd-plate,
a.ve-plate,
a.vf-entry, a.vf-cover,
a.vg-frame, a.vg-tile,
a.vh-card, a.vh-cell,
a.vi-piece,
a.vj-plate,
a.vk-piece, a.vk-tile, a.vk-item,
a.vl-plate,
img.vc-chapter__img,
.vd-panel__media img,
img.ve-stage__slide,
.vf-entry img,
.vg-row__media img,
.vg-section .vg-section__media img,
a.vj-piece,
.vl-gallery img { cursor: zoom-in; }

/* View Transitions — give the lightbox image a name and the source
   image the SAME name (set in JS) so the browser can morph them. */
::view-transition-old(bm-lb-img),
::view-transition-new(bm-lb-img) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .bm-lb { transition: none; }
  .bm-lb__img--fading { opacity: 1; }
}