/* ==========================================================================
   LOVELY EVENTS & DECORATION — Stylesheet
   Mobile-first. Breakpoints: 375 base, 768 tablet, 1024/1440 desktop.
   Plain CSS, no build step, no framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette (from the visiting card) */
  --color-primary: #0B0B0C;          /* matte black */
  --color-primary-alt: #141416;      /* alternate dark surface */
  --color-secondary: #D71920;        /* card red — decorative / large text (~4:1 on black) */
  --color-secondary-light: #FF4D4F;  /* lighter red for small text / links on black (~6.3:1) */
  --color-accent: #C9A45C;           /* gold — hairlines, blessing line, script accents */
  --color-bg-light: #FAF7F2;         /* warm off-white for light sections */
  --color-text: #F5F3EF;             /* text on dark */
  --color-text-muted: rgba(245, 243, 239, .72);
  --color-text-on-light: #1C1A19;    /* text on light sections */
  --color-text-on-light-muted: rgba(28, 26, 25, .68);
  --color-border-dark: rgba(245, 243, 239, .14);
  --color-border-gold: rgba(201, 164, 92, .45);
  --color-whatsapp: #25D366;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-wordmark: 'Cinzel Decorative', 'Cinzel', serif;
  --font-script: 'Great Vibes', cursive;

  --header-h: 74px;

  --container-w: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;
  --shadow-md: 0 16px 40px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .45);

  --damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23C9A45C' stroke-width='1'%3E%3Cpath d='M20 118C45 75 75 75 100 32'/%3E%3Ccircle cx='70' cy='70' r='20'/%3E%3Cpath d='M120 22C95 65 65 65 40 108'/%3E%3Ccircle cx='10' cy='10' r='8'/%3E%3Ccircle cx='130' cy='130' r='8'/%3E%3C/g%3E%3C/svg%3E");

  --dur-fast: .2s;
  --dur-med: .5s;
  --ease: cubic-bezier(.22, .8, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .01s; --dur-med: .01s; }
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body, h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* overflow-x: hidden on *both* html and body defeats position: sticky in
   Chromium (each becomes its own non-scrolling scroll container, so the
   sticky header never sees scroll progress and just scrolls away with the
   page). Keep the horizontal-overflow guard on the root element only. */
html { overflow-x: hidden; }

body {
  background: var(--color-primary);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) { .container { padding-inline: 32px; } }

.skip-link {
  position: absolute;
  left: -999px; top: 0;
  background: var(--color-secondary-light);
  color: #1a0000;
  padding: 12px 18px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(201, 164, 92, .25);
  border-radius: 3px;
}

.icon { width: 22px; height: 22px; flex: none; }
.icon-lg { width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   3. Typography helpers
   -------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.15; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: .6em;
}
.eyebrow-center { text-align: center; }
.eyebrow-red { color: var(--color-secondary-light); }
/* Gold is reserved for Hero, About, Welcome and Contact; every other section
   uses a muted off-white eyebrow paired with a short red rule instead, so the
   seven "centred eyebrow + h2 + subtitle" sections don't all read the same. */
.eyebrow-muted { color: rgba(245, 243, 239, .6); }

.section-head-rule {
  display: block;
  width: 46px; height: 3px;
  background: var(--color-secondary);
  border-radius: 2px;
  margin-bottom: .9rem;
}
.section-head-rule--center { margin-inline: auto; }
.section-head { margin-bottom: 1.4rem; }
@media (min-width: 1024px) {
  .section-head--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    column-gap: 2.4rem;
  }
  .section-head--split .section-sub { margin-bottom: 0; }
}

.section-title {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  margin-bottom: .4em;
}
.text-center { text-align: center; }
.section-sub {
  color: var(--color-text-muted);
  max-width: 60ch;
  font-size: 1.02rem;
}
.text-center.section-sub { margin-inline: auto; }
.section .section-sub { margin-bottom: 2.4rem; }

.script {
  font-family: var(--font-script);
  color: var(--color-accent);
  font-size: 1.6rem;
  line-height: 1;
}

.blessing {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}

.brand-mark {
  font-family: var(--font-wordmark);
  font-size: 1.5rem;
  letter-spacing: .01em;
  color: var(--color-text);
  display: block;
  line-height: 1;
}
.brand-mark.small { font-size: 1.2rem; }
.brand-l { color: var(--color-secondary); }
.brand-sub {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.brand-sub.small { font-size: .5rem; }
.brand-sub .amp, .amp { color: var(--color-secondary-light); }

/* --------------------------------------------------------------------------
   4. Sections & damask surface
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(3rem, 2rem + 4vw, 6rem); position: relative; background: var(--color-primary); }
/* Sections are anchor-scroll targets; offset for the sticky header so headings
   aren't hidden underneath it when jumped to via nav links. */
section[id] { scroll-margin-top: calc(var(--header-h) + 10px); }
.section-dark { background: var(--color-primary-alt); }
.section-dark::before,
.damask-panel {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--damask);
  background-size: 140px 140px;
  opacity: .05;
  pointer-events: none;
}
.section-dark { position: relative; }
.section-dark::before { z-index: 0; }
.section-dark > .container { position: relative; z-index: 1; }
.damask-panel { z-index: 0; }

.section-welcome, .contact-section { position: relative; overflow: hidden; background: var(--color-primary); }
.section-welcome > .container, .contact-section > .container { position: relative; z-index: 1; }

hr.hairline, .hairline {
  border: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  margin-block: 1.2rem;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: 0 1.5em;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  border: 1.5px solid transparent;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-red { background: var(--color-secondary); color: #fff; box-shadow: 0 10px 24px rgba(215, 25, 32, .35); }
.btn-red:hover { background: #ED1F27; }

.btn-outline-light { background: transparent; color: var(--color-text); border-color: rgba(245, 243, 239, .5); }
.btn-outline-light:hover { background: rgba(245, 243, 239, .08); border-color: var(--color-text); }

.btn-ghost-gold { background: transparent; color: var(--color-accent); border-color: var(--color-border-gold); }
.btn-ghost-gold:hover { background: rgba(201, 164, 92, .1); }

.btn-whatsapp { background: var(--color-whatsapp); color: #05230f; }
.btn-whatsapp:hover { filter: brightness(1.07); }

.btn-pill { padding: 0 1.4em; min-height: 44px; }
.btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   6. Navbar
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  width: 100%;
  background: transparent;
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), backdrop-filter var(--dur-fast) var(--ease);
}
/* Permanent top scrim, independent of scroll state: the hero photo can be
   bright right under the navbar, so the header must never rely on scroll
   position alone to stay legible. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -24px 0;
  background: linear-gradient(180deg, rgba(11, 11, 12, .72), rgba(11, 11, 12, 0));
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-header.scrolled {
  background: rgba(11, 11, 12, .86);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
}
.site-header.scrolled::before { opacity: 0; }

.site-header .brand-mark,
.site-header .brand-sub,
.nav-link {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
.site-header.scrolled .brand-mark,
.site-header.scrolled .brand-sub,
.site-header.scrolled .nav-link {
  text-shadow: none;
}
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}
.brand { display: flex; flex-direction: column; }

.nav-links { display: none; }
@media (min-width: 900px) {
  .nav-links { display: flex; align-items: center; gap: 1.6rem; }
  .nav-link {
    font-size: .88rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    color: var(--color-text-muted);
    position: relative;
    padding-block: 6px;
    transition: color var(--dur-fast) var(--ease);
  }
  .nav-link::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
    background: var(--color-secondary-light);
    transition: right var(--dur-fast) var(--ease);
  }
  .nav-link:hover, .nav-link.active { color: var(--color-text); }
  .nav-link.active::after, .nav-link:hover::after { right: 0; }
  .nav-cta { margin-left: .5rem; }
}

.menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  color: var(--color-text);
}
@media (min-width: 900px) { .menu-toggle { display: none; } }

.drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .55);
  z-index: 70;
}
.mobile-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(85vw, 360px);
  background: var(--color-primary-alt);
  border-left: 1px solid var(--color-border-dark);
  z-index: 80;
  display: flex; flex-direction: column;
  padding: 20px;
  box-shadow: -18px 0 50px rgba(0, 0, 0, .5);
  transform: translateX(100%);
  transition: transform var(--dur-fast) var(--ease);
}
/* The [hidden] attribute must win over the unconditional `display: flex`
   above, otherwise the drawer renders open on every page load. */
.mobile-drawer[hidden] { display: none; }
.mobile-drawer.open { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; }
.drawer-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.drawer-links { display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.drawer-link {
  padding: 14px 6px; font-size: 1.05rem; font-weight: 600;
  border-bottom: 1px solid var(--color-border-dark);
  min-height: 44px; display: flex; align-items: center;
}
.drawer-cta { margin-top: 1rem; text-align: center; }
.drawer-contact { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; }
.drawer-contact a { display: flex; align-items: center; gap: .6em; min-height: 44px; color: var(--color-accent); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h)); /* sit under sticky header */
  padding-top: var(--header-h);
}
.hero-media { position: absolute; inset: 0; background: #1a1a1a; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .hero-media img { animation: none; } }

.hero-gradient {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.55) 0%, rgba(11,11,12,.5) 35%, rgba(11,11,12,.85) 100%),
    linear-gradient(90deg, rgba(11,11,12,.55), rgba(11,11,12,.15) 40%, rgba(11,11,12,.15) 60%, rgba(11,11,12,.55));
}

.hero-frame { position: absolute; inset: 18px; pointer-events: none; z-index: 2; }
.frame-corner { position: absolute; width: 46px; height: 46px; border-color: rgba(245,243,239,.55); }
.frame-corner.tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; }
.frame-corner.tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; }
.frame-corner.bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; }
.frame-corner.br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; }

.hero-content {
  position: relative; z-index: 3;
  padding-bottom: clamp(2.5rem, 4vw, 5rem);
  padding-top: 4rem;
  width: 100%;
}
.hero-blessing { text-align: center; margin-bottom: .8rem; }
.hero-title { text-align: center; }
.hero-title-mark {
  display: block;
  font-family: var(--font-wordmark);
  font-size: clamp(2.6rem, 1.6rem + 6vw, 5.6rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.hero-title-sub {
  display: block;
  margin-top: .5rem;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: clamp(.12em, .1em + .3vw, .35em);
  font-size: clamp(.85rem, .6rem + 1vw, 1.3rem);
  color: var(--color-text);
}
.hero-title-sub .amp { color: var(--color-secondary-light); }
.hero-style { text-align: center; margin-top: .6rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.4rem); }
.hero-tagline {
  text-align: center;
  max-width: 46ch;
  margin: 1.1rem auto 0;
  color: var(--color-text-muted);
  font-size: clamp(.95rem, .85rem + .3vw, 1.1rem);
}
.hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
  margin-top: 2rem;
}

.scroll-cue {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px; border: 2px solid rgba(245,243,239,.6); border-radius: 999px;
  z-index: 3;
}
.scroll-cue span {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 999px; background: var(--color-accent);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue { 0% { top: 6px; opacity: 1; } 70% { top: 22px; opacity: 0; } 100% { top: 22px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* reveal entrance */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.hero-content .reveal { transition-delay: calc(var(--i, 0) * 90ms); }
/* Safety net: if JS never runs (disabled/blocked/errors before init), content
   marked .reveal in the static HTML must still be visible, never stuck at opacity:0. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   8. Media (picture) helper
   -------------------------------------------------------------------------- */
.media {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-md);
  background: var(--media-color, #1c1c1e);
}
.media picture, .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media img { transition: transform .6s var(--ease); }
.media-fallback {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: .5rem;
  color: rgba(245,243,239,.65);
  background: var(--media-color, #1c1c1e);
}
.media-fallback .icon-lg { opacity: .8; }
.media.media--broken img { display: none; }
.media.media--broken .media-fallback { display: flex; }

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */
.about-grid { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; } }
.about-copy h2 { margin-bottom: .7rem; }
.about-copy p { color: var(--color-text-muted); margin-bottom: 1rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  border: 1px solid var(--color-border-gold);
  color: var(--color-accent);
  padding: .5em 1em; border-radius: 999px; font-size: .85rem; font-weight: 600;
  min-height: 40px;
}
.chip .icon { width: 18px; height: 18px; }

.about-collage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .8rem;
  min-height: 320px;
}
.about-collage .media:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; aspect-ratio: 3/4; }
.about-collage .media:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; aspect-ratio: 4/3; }
.about-collage .media:nth-child(3) { grid-column: 2 / 3; grid-row: 2 / 3; aspect-ratio: 4/3; }

/* --------------------------------------------------------------------------
   10. Services grid
   -------------------------------------------------------------------------- */
.services-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 2rem; }
.service-card {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: #17171A; border: 1px solid var(--color-border-dark);
  display: flex; flex-direction: column;
}
/* Thin red accent line across the top of the card on hover, in place of the
   old floating circular icon badge. */
.service-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-secondary);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-med) var(--ease);
  z-index: 2;
}
.service-card:hover::before { transform: scaleX(1); }
.service-card .media { border-radius: 0; aspect-ratio: 4/3; }
.service-card .media img { transition: transform .6s var(--ease); }
.service-card:hover .media img { transform: scale(1.08); }
.service-card-body { padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.service-card-title {
  display: flex; align-items: center; gap: .5em;
  font-size: 1.2rem;
}
.service-card-title .icon { width: 20px; height: 20px; color: var(--color-secondary-light); flex: none; }
.service-card p { color: var(--color-text-muted); font-size: .92rem; flex: 1; }
.service-card::after {
  content: ''; height: 2px; width: 0; background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  transition: width var(--dur-med) var(--ease);
}
.service-card:hover::after { width: 100%; }
.service-link {
  align-self: flex-start; color: var(--color-secondary-light); font-weight: 700; font-size: .88rem;
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px;
}
.service-link .icon { width: 16px; height: 16px; }
.service-card--icon-only .media-fallback,
.service-card--icon-only .media { display: flex; align-items: center; justify-content: center; }

/* --------------------------------------------------------------------------
   11. Event categories (bento)
   -------------------------------------------------------------------------- */
.categories-grid {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .categories-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; }
  .categories-grid .category-tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .categories-grid .category-tile:nth-child(4) { grid-column: span 2; }
  .categories-grid .category-tile:nth-child(7) { grid-column: span 2; grid-row: span 2; }
}
.category-tile {
  position: relative; border-radius: var(--radius-md); overflow: hidden;
  min-height: 170px; display: block;
  background: #17171A;
}
/* mediaMarkup() sets an inline aspect-ratio on every .media span (from the
   photo's real dimensions) so it can reserve space before the image loads.
   For most cards that's exactly what's wanted, but here the tile is meant to
   be filled edge-to-edge (`inset: 0`) with the caption overlaid on top — an
   absolutely positioned box with all four insets set still resolves aspect-
   ratio before treating width/height as stretched, so the inline aspect-
   ratio was winning and leaving the image short with the caption stranded in
   plain background below it. Force it to actually fill the tile. */
.category-tile .media { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.category-tile-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; padding: 1rem;
  background: linear-gradient(180deg, rgba(11,11,12,0) 40%, rgba(11,11,12,.85) 100%);
}
.category-tile-overlay h3 { font-size: 1.15rem; color: #fff; display: flex; align-items: center; gap: .5em; }
.category-tile-overlay .icon { color: var(--color-accent); }
.category-tile:hover .media img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   12. Welcome section
   -------------------------------------------------------------------------- */
.section-welcome { background: var(--color-primary); }
/* Signature statement section: keep it centred but distinct from the other
   centred sections — flanking gold hairlines around the eyebrow and a much
   larger heading. */
.welcome-eyebrow-row { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .5em; }
.welcome-eyebrow-row .eyebrow { margin-bottom: 0; }
.hairline-flank { width: 64px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent), transparent); }
@media (max-width: 480px) { .hairline-flank { width: 30px; } }
.welcome-title { color: var(--color-text); font-size: clamp(2rem, 1.3rem + 3.6vw, 3.4rem); }
.welcome-title .accent { color: var(--color-secondary-light); }
.welcome-title::after {
  content: ''; display: block; width: 70px; height: 3px; margin: .6rem auto 0;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
}
.welcome-grid { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .welcome-grid { grid-template-columns: repeat(3, 1fr); } }
.welcome-card {
  background: #151517; border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-md);
}
.welcome-card .media { border-radius: 0; aspect-ratio: 4/3; }
.welcome-illustration {
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-alt); position: relative; overflow: hidden;
}
.welcome-illustration::before {
  content: ''; position: absolute; inset: 0; background-image: var(--damask); background-size: 140px 140px; opacity: .07;
}
.welcome-illustration svg { width: 46%; max-width: 190px; color: var(--color-accent); position: relative; z-index: 1; }
.welcome-illustration svg .accent-red { color: var(--color-secondary-light); }
.welcome-card-body { padding: 1.6rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.welcome-card-body h3 { font-size: 1.4rem; }
.welcome-card-body p { color: var(--color-text-muted); flex: 1; }
/* Match .service-link / .popular-card .btn: the CTA is sized to its own
   label, not stretched edge-to-edge (flex column's default align-items:
   stretch was otherwise the one card type on the page where the button
   spanned the full card width, right up under the fixed Call/WhatsApp FABs
   on narrow phones). */
.welcome-card-body .btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   12b. Quote / divider band (sits between Welcome and Featured)
   -------------------------------------------------------------------------- */
.quote-band { position: relative; padding-block: 2.2rem; background: var(--color-primary-alt); overflow: hidden; }
.quote-band::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--damask); background-size: 140px 140px; opacity: .06;
  pointer-events: none;
}
.quote-band-inner {
  position: relative; z-index: 1;
  max-width: 760px; margin-inline: auto; padding-inline: 20px;
  display: flex; align-items: center; justify-content: center; gap: 1.2rem;
}
.quote-rule { flex: 1 1 auto; max-width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-secondary), transparent); }
.quote-band-text {
  flex: none;
  font-family: var(--font-heading); font-style: italic; font-weight: 600;
  font-size: clamp(1.05rem, .9rem + 1vw, 1.5rem);
  text-align: center; color: var(--color-text);
}
@media (max-width: 560px) {
  .quote-band-inner { flex-direction: column; gap: .7rem; }
  .quote-rule { max-width: 80px; }
}

/* --------------------------------------------------------------------------
   13. Featured masonry
   -------------------------------------------------------------------------- */
.featured-grid { margin-top: 2rem; column-count: 2; column-gap: 1rem; }
@media (min-width: 700px) { .featured-grid { column-count: 3; } }
@media (min-width: 1100px) { .featured-grid { column-count: 4; } }
.featured-item {
  position: relative; break-inside: avoid; margin-bottom: 1rem; border-radius: var(--radius-md); overflow: hidden;
  display: block;
}
.featured-item .media { border-radius: 0; }
.featured-item[data-orientation="portrait"] .media { aspect-ratio: 3/4; }
.featured-item[data-orientation="landscape"] .media { aspect-ratio: 4/3; }
.featured-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem;
  background: linear-gradient(180deg, rgba(11,11,12,0) 45%, rgba(11,11,12,.88) 100%);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease);
}
.featured-item:hover .featured-overlay, .featured-item:focus-visible .featured-overlay { opacity: 1; }
.featured-item:hover .media img { transform: scale(1.06); }
.featured-category { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: .3rem; }
.featured-view {
  display: inline-flex; align-items: center; gap: .4em; align-self: flex-start;
  color: #fff; font-weight: 700; font-size: .85rem;
  border: 1px solid rgba(255,255,255,.6); border-radius: 999px; padding: .35em 1em; min-height: 38px;
}

/* --------------------------------------------------------------------------
   14. Popular services
   -------------------------------------------------------------------------- */
.popular-grid { display: grid; gap: 1.1rem; margin-top: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .popular-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .popular-grid { grid-template-columns: repeat(5, 1fr); } }
.popular-card {
  background: #17171A; border: 1px solid var(--color-border-dark); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column;
}
.popular-card .media { border-radius: 0; aspect-ratio: 1/1; }
.popular-card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.popular-card h3 {
  font-family: var(--font-body); font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.3;
}
.popular-card .btn { font-size: .78rem; min-height: 44px; padding: 0 1em; align-self: flex-start; }

/* --------------------------------------------------------------------------
   15. Gallery + lightbox
   -------------------------------------------------------------------------- */
.gallery-head { margin-bottom: .4rem; }
@media (min-width: 1024px) {
  .gallery-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
  .gallery-head .section-head { margin-bottom: 0; flex: none; }
  .gallery-head .gallery-filters { margin-top: 0; justify-content: flex-end; flex: 1 1 auto; min-width: 0; }
}
.gallery-filters { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.6rem; }
.filter-btn {
  border: 1px solid var(--color-border-gold);
  color: var(--color-text-muted);
  padding: .5em 1.1em; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  min-height: 44px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.filter-btn:hover { color: var(--color-text); border-color: var(--color-text); }
.filter-btn[aria-pressed="true"] { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }
.gallery-count { text-align: center; margin-top: 1rem; color: var(--color-text-muted); font-size: .85rem; }

.gallery-grid { margin-top: 1.4rem; column-count: 2; column-gap: .9rem; }
@media (min-width: 700px) { .gallery-grid { column-count: 3; } }
@media (min-width: 1100px) { .gallery-grid { column-count: 4; } }
.gallery-item {
  break-inside: avoid; margin-bottom: .9rem; border-radius: var(--radius-sm); overflow: hidden; display: block;
  position: relative;
  animation: fadein var(--dur-med) var(--ease);
}
@keyframes fadein { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
.gallery-item .media { border-radius: 0; }
.gallery-item:hover .media img { transform: scale(1.06); }
.gallery-item-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(11,11,12,.45); opacity: 0; transition: opacity var(--dur-fast) var(--ease);
  color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase;
}
.gallery-item:hover .gallery-item-overlay, .gallery-item:focus-visible .gallery-item-overlay { opacity: 1; }
.gallery-empty { text-align: center; color: var(--color-text-muted); padding: 3rem 1rem; }

.lightbox {
  border: 0; padding: 0; margin: auto; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%;
  background: rgba(6,6,7,.97); color: #fff;
}
.lightbox::backdrop { background: rgba(0,0,0,.9); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.lightbox-stage { max-width: min(92vw, 1200px); max-height: 72vh; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img { max-width: 100%; max-height: 72vh; border-radius: var(--radius-sm); object-fit: contain; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
@media (min-width: 700px) { .lightbox-prev { left: 28px; } .lightbox-next { right: 28px; } }
.lightbox-info { text-align: center; margin-top: 1rem; padding-inline: 1rem; }
.lightbox-caption { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; }
.lightbox-counter { color: var(--color-text-muted); font-size: .85rem; margin-top: .2rem; }

/* --------------------------------------------------------------------------
   16. Why choose us
   -------------------------------------------------------------------------- */
.why-grid { display: grid; gap: 1.2rem; margin-top: 2rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.why-card {
  background: #17171A; border: 1px solid var(--color-border-dark); border-radius: var(--radius-md);
  padding: 1.6rem 1.3rem; text-align: center;
}
.why-card .icon-lg { color: var(--color-accent); margin-bottom: .8rem; }
.why-card h3 { font-size: 1.2rem; margin-bottom: .4rem; }
.why-card p { color: var(--color-text-muted); font-size: .88rem; }

/* --------------------------------------------------------------------------
   17. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: 2.4rem; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; } }
.contact-info .section-title { margin-top: .2rem; }
.contact-card {
  margin-top: 2rem; background: var(--color-primary-alt); border: 1px solid var(--color-border-gold);
  border-radius: var(--radius-lg); padding: 1.8rem; position: relative;
}
.person-name { font-family: var(--font-heading); font-weight: 600; color: var(--color-text); line-height: 1.2; }
.contact-person-label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: .3rem;
}
.contact-person { font-size: 1.5rem; margin-bottom: .8rem; }
.contact-list { display: flex; flex-direction: column; gap: .7rem; margin-bottom: .9rem; }
.contact-list li { display: flex; align-items: center; gap: .7em; color: var(--color-text-muted); }
.contact-list a { color: var(--color-text); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.contact-list .icon { color: var(--color-accent); }
.maps-link { display: inline-flex; align-items: center; gap: .4em; color: var(--color-secondary-light); font-weight: 700; min-height: 44px; }
.contact-buttons { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.4rem; }

.quote-form {
  background: var(--color-bg-light); color: var(--color-text-on-light);
  border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-md);
}
.quote-form h3 { font-size: 1.5rem; margin-bottom: 1.2rem; }
.form-row { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.form-row label { font-weight: 700; font-size: .88rem; }
.form-row input, .form-row select, .form-row textarea {
  min-height: 46px; padding: .6em .9em; border-radius: var(--radius-sm);
  border: 1.5px solid rgba(28,26,25,.25); background: #fff; color: var(--color-text-on-light);
}
.form-row textarea { min-height: 90px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--color-secondary); }
.form-row input[aria-invalid="true"], .form-row select[aria-invalid="true"] { border-color: var(--color-secondary); }
.form-error { color: #B0141B; font-size: .82rem; min-height: 1.1em; }
.quote-form .btn-red { margin-top: .4rem; }
.form-success { text-align: center; margin-top: 1.4rem; display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.form-success[hidden] { display: none; }
.form-success .icon-lg { color: #1a7a3c; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: #050506; padding-top: 3.5rem; padding-bottom: 6.5rem; position: relative; }
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; } }
.footer-style { margin-top: .4rem; }
.footer-brand .blessing { margin-top: .5rem; }
.footer-col h4 { color: var(--color-accent); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9rem; }
.footer-col .footer-contact-name { color: var(--color-text); font-size: 1.05rem; }
.footer-col { display: flex; flex-direction: column; gap: .55rem; }
.footer-col a, .footer-col p { color: var(--color-text-muted); font-size: .92rem; }
.footer-col a:hover { color: var(--color-text); }
.footer-copy { text-align: center; color: var(--color-text-muted); font-size: .8rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border-dark); }

/* --------------------------------------------------------------------------
   19. Floating contact
   -------------------------------------------------------------------------- */
.floating-contact {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: .7rem; z-index: 55;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.floating-contact.is-hidden { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
/* .fab royal jewel buttons live in royal-buttons.css */

/* --------------------------------------------------------------------------
   20. Hover-only interactions
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .service-card, .category-tile, .featured-item, .popular-card, .gallery-item { transition: transform var(--dur-fast) var(--ease); }
}

/* --------------------------------------------------------------------------
   21. Responsive fine-tuning
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .why-grid, .popular-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .hero-title-mark { font-size: clamp(2.2rem, 1.4rem + 8vw, 3.2rem); }
  .contact-buttons .btn, .hero-actions .btn { font-size: .88rem; }
  .brand-sub { letter-spacing: .18em; }
}

/* The hero is bottom-aligned and fills the viewport on mobile, so its last
   CTA row would otherwise sit directly under the fixed floating Call/WhatsApp
   buttons. Reserve extra bottom space so nothing is covered/unreachable. */
@media (max-width: 560px) {
  .hero-content { padding-bottom: calc(clamp(2.5rem, 4vw, 5rem) + 112px); }
}

/* --------------------------------------------------------------------------
   Stats strip (owner-provided figures; see LOVELY.business.stats)
   -------------------------------------------------------------------------- */
.stats {
  position: relative; overflow: hidden;
  background: var(--color-primary);
  border-block: 1px solid var(--color-border-gold);
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.stats::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--damask); background-size: 140px 140px; opacity: .07;
}
.stats::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(233, 207, 142, .16), transparent);
  transform: translateX(-120%); opacity: 0;
}
.stats.is-done::after { animation: stats-shimmer 1.4s var(--ease) 1 forwards; }
@keyframes stats-shimmer {
  0% { transform: translateX(-120%); opacity: 1; }
  100% { transform: translateX(320%); opacity: 1; }
}
.stats .container { position: relative; z-index: 2; }
.stats-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
}
.stat {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: .35rem; padding: .9rem .5rem; min-height: 44px;
}
.stat-num {
  font-family: var(--font-wordmark); font-weight: 700;
  --stat-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem);
  font-size: var(--stat-size); line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
  background: linear-gradient(180deg, #E9CF8E, #C9A45C);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #C9A45C;
  white-space: nowrap;
  /* Fixed value row so numeric and text stats share one baseline. */
  display: flex; align-items: flex-end; justify-content: center;
  height: calc(var(--stat-size) * 1.15);
}
.stat-num--text { font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem); line-height: 1; }
.stat-amp { -webkit-text-fill-color: #FF4D4F; color: #FF4D4F; margin-inline: .3em; }
.stat-plus { -webkit-text-fill-color: var(--color-secondary-light); color: var(--color-secondary-light); margin-left: .04em; }
.stat-label {
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-text);
}
@media (min-width: 768px) {
  .stats-list { grid-template-columns: repeat(4, 1fr); }
  .stat { position: relative; padding: .5rem 1rem; }
  .stat + .stat::before {
    content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px;
    background: linear-gradient(180deg, transparent, var(--color-border-gold) 30%, var(--color-secondary) 50%, var(--color-border-gold) 70%, transparent);
  }
  .stat-label { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .stats.is-done::after { animation: none; } }