/* ===== Variables ===== */
:root {
  --accent: #b08d57;
  --accent-solid: #8f6f3c; /* backgrounds with white text on them */
  --accent-dark: #75592e;
  --text: #2b2622;
  --muted: #776d64;
  --bg: #fbf8f4;
  --bg-alt: #f2ece4;
  --dark: #1c1916;
  --line: #e4dbd0;
  --radius: 4px;
  --shadow: 0 16px 40px rgba(28, 25, 22, 0.1);
  --header-h: 76px;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
}

/* ===== Base ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  max-width: 100%;
}

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Browsers don't pass the page font to form controls by default */
button,
input,
select,
textarea {
  font-family: inherit;
}

.container {
  width: min(1120px, 100% - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
  margin-inline: auto;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid var(--accent-solid);
  border-radius: var(--radius);
  background: var(--accent-solid);
  color: #fff;
  font: 500 0.85rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.btn:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-2px);
}

.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.btn--outline:hover {
  background: #fff;
  border-color: #fff;
  color: var(--dark);
}

.btn--small {
  padding: 10px 18px;
  font-size: 0.75rem;
}

.btn--full {
  width: 100%;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent-solid);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.eyebrow--light {
  color: #d6b98a;
}

/* ===== Header ===== */
.header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-h);
  z-index: 100;
  color: #fff;
  transition: background 0.3s, box-shadow 0.3s, color 0.3s;
}

.header.scrolled {
  background: rgba(251, 248, 244, 0.97);
  box-shadow: 0 1px 0 var(--line);
  color: var(--text);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.logo {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}

.logo span {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav a:not(.btn) {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}

.nav a:not(.btn):hover {
  opacity: 1;
  color: var(--accent);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle span {
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s;
}

.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Language switch ===== */
.nav {
  margin-left: auto;
}

.lang-switch {
  display: flex;
  align-items: center;
  margin-left: 24px;
  padding: 3px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.lang-switch:hover,
.lang-switch:focus-within {
  opacity: 1;
}

.lang-switch button {
  min-width: 32px;
  padding: 4px 8px;
  border: none;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: 600 0.7rem/1 var(--sans);
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s;
}

.lang-switch button[aria-pressed="true"] {
  background: var(--accent-solid);
  color: #fff;
}

.lang-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .lang-switch {
    order: 2;
    margin-left: auto;
    margin-right: 12px;
  }

  .menu-toggle {
    order: 3;
  }
}

/* Small laptops and tablets: tighten the menu so the logo never runs into it */
@media (min-width: 861px) and (max-width: 1060px) {
  .logo {
    font-size: 1.35rem;
    white-space: nowrap;
  }

  .nav {
    gap: 16px;
  }

  .nav a:not(.btn) {
    font-size: 0.75rem;
  }

  .lang-switch {
    margin-left: 12px;
  }
}

/* ===== Hero ===== */
.hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 40px) 0 80px;
  color: #fff;
  text-align: center;
  background: #2a241f;
  overflow: hidden;
  isolation: isolate;
}

/* Background photos that fade from one to the next (the list is in main.js) */
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(20, 17, 14, 0.55), rgba(20, 17, 14, 0.75));
}

.hero__slide {
  position: absolute;
  inset: 0;
  background: center 40% / cover no-repeat;
  opacity: 0;
  transition: opacity 1.6s ease;
  will-change: opacity, transform;
}

.hero__slide--first {
  background-image: url("../images/hero/wedding-27.jpg");
}

.hero__slide.is-active {
  opacity: 1;
}

/* Slow zoom while each photo is on screen */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide {
    transform: scale(1.08);
    transition: opacity 1.6s ease, transform 8s linear;
  }

  .hero__slide.is-active {
    transform: scale(1);
  }
}

.hero__inner {
  max-width: 820px;
}

.hero .eyebrow {
  color: #d6b98a;
}

.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin-bottom: 24px;
}

.hero h1 em {
  display: block;
  font-weight: 400;
  color: #e3c99c;
}

.hero p {
  max-width: 560px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.82);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* ===== Sections ===== */
.section {
  padding: 110px 0;
}

.section--alt {
  background: var(--bg-alt);
}

.section--dark {
  background: var(--dark);
  color: #fff;
}

.section__header {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 64px;
}

.section h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  margin-bottom: 16px;
}

.section__header p {
  color: var(--muted);
}

/* ===== Service cards ===== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  padding: 40px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.card__number {
  display: block;
  margin-bottom: 20px;
  font-family: var(--serif);
  font-size: 2.4rem;
  font-style: italic;
  color: var(--accent);
}

.card h3 {
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.card p {
  color: var(--muted);
}

/* ===== What's included ===== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 48px;
}

.step {
  padding-top: 24px;
  border-top: 2px solid var(--accent);
}

.step h3 {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.step p {
  color: var(--muted);
}

@media (max-width: 1150px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .cards,
  .steps { grid-template-columns: 1fr; }
}

/* ===== Portfolio ===== */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 16px;
}

.gallery__item {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #2a241f center / cover no-repeat;
}

.gallery__item {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  color: #fff;
  isolation: isolate;
}

.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(transparent 40%, rgba(20, 17, 14, 0.7));
  transition: background 0.4s;
}

.gallery__item span {
  font-family: var(--serif);
  font-size: 1.8rem;
  font-style: italic;
  transition: transform 0.4s;
}

.gallery__item small {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #e3c99c;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s, transform 0.4s;
}

.gallery__item:hover::after {
  background: linear-gradient(rgba(20, 17, 14, 0.2), rgba(20, 17, 14, 0.8));
}

.gallery__item:hover span {
  transform: translateY(-6px);
}

.gallery__item:hover small {
  opacity: 1;
  transform: none;
}

.gallery__item--tall { grid-row: span 2; }

/* Cover photo for each portfolio tile */
.gallery__item--weddings { background-image: url("../images/thumbs/wedding-25.jpg"); }
.gallery__item--celebrations { background-image: url("../images/thumbs/birthday-14.jpg"); background-position: center 25%; }
.gallery__item--church { background-image: url("../images/thumbs/church-26.jpg"); background-position: center 30%; }
.gallery__item--business { background-image: url("../images/thumbs/business-04.jpg"); background-position: 55% 30%; }
.gallery__item--all { background-image: url("../images/thumbs/babyshower-12.jpg"); background-position: center 35%; }

/* ===== About ===== */
.about {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: center;
}

.about__image {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: #c9ae86;
}

.about__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.about__text p {
  color: var(--muted);
  margin-bottom: 20px;
}

.about__text .btn {
  margin-top: 12px;
}

/* ===== Contact ===== */
.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.contact__info p {
  color: #c9c0b6;
  margin-bottom: 32px;
}

.contact__list {
  list-style: none;
  display: grid;
  gap: 20px;
}

.contact__list li {
  display: grid;
  gap: 2px;
}

.contact__list span {
  color: #d6b98a;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.contact__list a {
  font-size: 1.15rem;
}

.contact__list a:hover {
  color: #e3c99c;
}

.form {
  display: grid;
  gap: 16px;
  padding: 36px;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form label {
  display: grid;
  gap: 6px;
  font-weight: 500;
  font-size: 0.85rem;
}

.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 400;
  resize: vertical;
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.18);
}

.form .invalid {
  border-color: #c2410c;
}

.form__status {
  min-height: 1.5em;
  font-size: 0.9rem;
  text-align: center;
}

.form__status.success { color: #4d7c0f; }
.form__status.error { color: #c2410c; }

/* ===== Footer ===== */
.footer {
  padding: 28px 0;
  background: #12100e;
  color: #9a9087;
  font-size: 0.85rem;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

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

/* ===== Scroll progress bar ===== */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* ===== Back to top ===== */
.to-top {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 90;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--accent-solid);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
}

.to-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.to-top:hover {
  background: var(--accent-dark);
}

/* ===== Hero extras ===== */
.hero {
  position: relative;
}

.rotator {
  display: inline-block;
  color: #e3c99c;
  font-family: var(--serif);
  font-size: 1.4em;
  font-style: italic;
  transition: opacity 0.4s, transform 0.4s;
}

.rotator.out {
  opacity: 0;
  transform: translateY(-10px);
}

.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
}

.scroll-hint span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: scroll-hint 1.8s infinite;
}

@keyframes scroll-hint {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ===== Before / after ===== */
.compare {
  --before: url("../images/hero/wedding-36.jpg");
  --after: var(--before);
  position: relative;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  user-select: none;
  cursor: ew-resize;
  touch-action: pan-y;
}

.compare:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.compare__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.compare__after {
  background-image: var(--after);
}

/* The "before" side: an outer box slides left and the photo inside slides back the same
   amount, so the photo stays still while only its visible part changes. Both moves are
   transforms, which phones handle without redrawing the filtered photo. */
.compare__before {
  overflow: hidden;
  transform: translateX(calc(var(--pos) - 100%));
  will-change: transform;
}

.compare__before-photo {
  position: absolute;
  inset: 0;
  background: var(--before) center / cover;
  filter: saturate(0.35) brightness(0.8) contrast(0.85);
  transform: translateX(calc(100% - var(--pos)));
  will-change: transform;
}

.compare__label {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 12px;
  border-radius: var(--radius);
  background: rgba(20, 17, 14, 0.6);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.compare__label--right {
  left: auto;
  right: 16px;
}

/* Full-size invisible layer whose left edge is the divider; moving it is a transform */
.compare__handle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(var(--pos));
  will-change: transform;
}

.compare__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #fff;
}

.compare__handle span {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 600;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Kept only for keyboard users; mouse and touch are handled by the container */
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.compare__handle span {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.compare:hover .compare__handle span,
.compare.dragging .compare__handle span {
  transform: translate(-50%, -50%) scale(1.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* ===== FAQ ===== */
.faq__list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 300;
  transition: transform 0.3s;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  padding-bottom: 22px;
  color: var(--muted);
  animation: fade-down 0.35s ease;
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ===== Gallery page ===== */
.page-hero {
  padding: calc(var(--header-h) + 72px) 0 72px;
  background:
    radial-gradient(circle at 20% 30%, #6b5440, transparent 55%),
    radial-gradient(circle at 80% 70%, #3d4a52, transparent 55%),
    #2a241f;
  color: #fff;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  margin-bottom: 12px;
}

.page-hero p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.8);
}

.section--tight {
  padding-top: 56px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 40px;
}

.filter {
  padding: 10px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: 500 0.85rem var(--sans);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.filter[hidden] { display: none; }

.filter span {
  margin-left: 4px;
  color: var(--muted);
  font-size: 0.75rem;
}

.filter:hover {
  border-color: var(--accent);
}

.filter.active {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}

.filter.active span {
  color: rgba(255, 255, 255, 0.8);
}

.masonry {
  columns: 3 260px;
  column-gap: 16px;
}

.masonry__item {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 16px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  break-inside: avoid;
  cursor: zoom-in;
  background: none;
  animation: pop-in 0.5s ease both;
}

.masonry__item img,
.masonry__item .placeholder {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}

.masonry__item:hover img,
.masonry__item:hover .placeholder {
  transform: scale(1.06);
}

.masonry__caption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(20, 17, 14, 0.8));
  color: #fff;
  font-family: var(--serif);
  font-size: 1.15rem;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}

.masonry__caption small {
  color: #e3c99c;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.masonry__item:hover .masonry__caption,
.masonry__item:focus-visible .masonry__caption {
  opacity: 1;
  transform: none;
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.gallery-cta {
  margin-top: 72px;
  text-align: center;
}

.gallery-cta p {
  color: var(--muted);
  margin-bottom: 24px;
}

/* ===== Lightbox ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: rgba(12, 10, 9, 0.94);
  opacity: 0;
  transition: opacity 0.25s;
}

.lightbox.open {
  opacity: 1;
}

/* display: flex above would override the hidden attribute and leave an invisible
   layer blocking every click on the page */
.lightbox[hidden] {
  display: none;
}

.lightbox__figure {
  display: grid;
  gap: 14px;
  min-width: 0;
  max-width: min(1100px, 100%);
}

.lightbox__media img,
.lightbox__media .placeholder {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  margin: 0 auto;
  border-radius: var(--radius);
}

.lightbox__media .placeholder {
  width: min(calc(100vw - 48px), 52vh);
  height: auto;
  max-height: 70vh;
}

.lightbox figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.lightbox__count {
  color: #9a9087;
  font-family: var(--sans);
  font-size: 0.85rem;
}

.lightbox__close,
.lightbox__nav {
  flex-shrink: 0;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
}

.lightbox__nav {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
}

/* ===== Interactive extras ===== */

/* Ripple + press effect on every button */
.btn,
.filter,
.chip-btn {
  position: relative;
  overflow: hidden;
}

.btn:active,
.filter:active,
.chip-btn:active,
.to-top:active {
  transform: scale(0.96);
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

.filter:not(.active) .ripple {
  background: rgba(176, 141, 87, 0.3);
}

@keyframes ripple {
  to { transform: scale(2.5); opacity: 0; }
}

.btn--ghost {
  background: transparent;
  color: var(--accent-dark);
}

.btn--ghost:hover {
  color: #fff;
}

.center {
  margin-top: 56px;
  text-align: center;
}

/* Active link in the menu while scrolling */
.nav a:not(.btn) {
  position: relative;
}

.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s;
}

.nav a:not(.btn):hover::after,
.nav a.active::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav a.active,
.nav a[aria-current="page"] {
  opacity: 1;
  color: var(--accent);
}

/* Arrow links */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.link-arrow::after {
  content: "→";
  transition: transform 0.25s;
}

.link-arrow:hover::after {
  transform: translateX(5px);
}

.link-arrow:hover {
  color: var(--accent);
}

/* Service cards */
.card {
  display: flex;
  flex-direction: column;
}

.card p {
  flex: 1;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.card__number {
  transition: transform 0.4s;
}

.card:hover .card__number {
  transform: translateX(8px);
}

/* What's included */
.step {
  padding: 24px 20px 20px;
  border-radius: var(--radius);
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}

.step:hover {
  background: #fff;
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.step__icon {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 1.8rem;
  transition: transform 0.4s;
}

.step:hover .step__icon {
  transform: scale(1.2) rotate(-8deg);
}

.count {
  color: var(--accent);
}

/* Contact actions */
.contact__list .contact__item {
  gap: 6px;
}

.contact__item strong {
  font-size: 1.15rem;
  font-weight: 500;
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 500 0.82rem var(--sans);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.contact__list a.chip-btn {
  font-size: 0.82rem;
}

.chip-btn:hover {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}

/* Event type choices */
.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: none;
}

.choices legend {
  width: 100%;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 500;
}

.form .choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choice input {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.choice span {
  display: block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 400;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.choice:hover span {
  border-color: var(--accent);
  background: #fdf9f3;
}

.choice input:checked + span {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}

.choice input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.3);
}

/* Form success state */
.form {
  position: relative;
}

.form.highlight {
  animation: pulse 1.2s ease;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0); }
  30% { box-shadow: 0 0 0 8px rgba(176, 141, 87, 0.45); }
}

.form__success {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--bg);
  text-align: center;
  animation: fade-down 0.4s ease;
}

.form__success[hidden] {
  display: none;
}

.form__check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent-solid);
  color: #fff;
  font-size: 1.8rem;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

.form__success h3 {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.form__success p {
  max-width: 320px;
  margin-bottom: 20px;
  color: var(--muted);
}

.form__success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Toast notifications */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 400;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--dark);
  color: #fff;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* WhatsApp */
/* A darker green than the logo's, so the white text stays readable */
.btn--whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0f8043;
  border-color: #0f8043;
}

.btn--whatsapp:hover {
  background: #0c6b38;
  border-color: #0c6b38;
}

.wa-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.chip-btn--whatsapp {
  background: #0f8043;
  border-color: #0f8043;
}

.chip-btn--whatsapp:hover {
  background: #0c6b38;
  border-color: #0c6b38;
}

/* The form's three send buttons: WhatsApp on top, text message and email below */
.form__send-label {
  margin-bottom: -6px;
  font-size: 0.85rem;
  font-weight: 500;
}

.form__send {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form__send .btn {
  padding-inline: 10px;
  line-height: 1.2;
}

.form__send .btn--whatsapp {
  grid-column: 1 / -1;
}

.form__send .btn--ghost {
  border-color: var(--accent-solid);
}

.form__send .btn--ghost:hover {
  background: var(--accent-solid);
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.wa-float {
  position: fixed;
  left: calc(20px + env(safe-area-inset-left));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform 0.25s;
}

.wa-float::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #25d366;
  animation: wa-pulse 2.4s ease-out infinite;
}

.wa-float .wa-icon {
  width: 30px;
  height: 30px;
}

.wa-float:hover {
  transform: scale(1.1);
}

@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* Lightbox extras */
.lightbox__book {
  justify-self: center;
}

.lb-enter {
  animation: lb-enter 0.35s ease;
}

@keyframes lb-enter {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Service card checklist */
.card p {
  flex: none;
}

.card__list {
  flex: 1;
  align-content: start;
  display: grid;
  gap: 8px;
  margin-top: 18px;
  list-style: none;
  color: var(--text);
  font-size: 0.92rem;
}

.card__list li {
  position: relative;
  padding-left: 22px;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

/* Booking timeline */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  list-style: none;
  counter-reset: step;
}

.timeline li {
  position: relative;
  padding-top: 64px;
  counter-increment: step;
}

.timeline li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg-alt);
  color: var(--accent-dark);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}

/* Line connecting the numbers */
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 22px;
  left: 56px;
  right: -20px;
  height: 1px;
  background: var(--line);
}

.timeline li:hover::before {
  background: var(--accent-solid);
  color: #fff;
  transform: scale(1.1);
}

.timeline h3 {
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.timeline p {
  color: var(--muted);
  font-size: 0.95rem;
}

@media (max-width: 860px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .timeline li {
    padding: 0 0 0 64px;
  }

  .timeline li:not(:last-child)::after {
    top: 52px;
    bottom: -20px;
    left: 22px;
    right: auto;
    width: 1px;
    height: auto;
  }
}

/* ===== Device adjustments ===== */

/* Footer clears the iPhone home bar */
.footer {
  padding-bottom: calc(28px + env(safe-area-inset-bottom));
}

/* Tablets and small laptops: booking steps in a 2x2 grid */
@media (min-width: 861px) and (max-width: 1100px) {
  .timeline {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }

  .timeline li:nth-child(2)::after {
    display: none;
  }
}

/* Big screens: a bit more room and slightly larger text */
@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }

  .container {
    width: min(1280px, 100% - 64px);
  }
}

/* Phones in landscape and other short screens */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --header-h: 60px;
  }

  .logo {
    font-size: 1.35rem;
  }

  .hero {
    min-height: auto;
    padding: calc(var(--header-h) + 32px) 0 48px;
  }

  .hero h1 {
    font-size: clamp(2rem, 5vw, 2.8rem);
    margin-bottom: 14px;
  }

  .hero p {
    margin-bottom: 24px;
  }

  .scroll-hint {
    display: none;
  }

  .page-hero {
    padding: calc(var(--header-h) + 32px) 0 40px;
  }

  .section {
    padding: 64px 0;
  }

  .compare {
    max-width: 640px;
  }

  .lightbox {
    padding: 12px 64px;
  }

  .lightbox__media img,
  .lightbox__media .placeholder {
    max-height: 62vh;
  }

  .lightbox__media .placeholder {
    width: min(calc(100vw - 160px), 46vh);
  }

  .lightbox__book {
    display: none;
  }
}

/* Small phones (iPhone SE and similar): keep the buttons on the first screen */
@media (max-width: 380px) {
  .hero {
    padding-top: calc(var(--header-h) + 24px);
  }

  .hero h1 {
    font-size: 2.1rem;
  }

  .hero p {
    font-size: 1rem;
    margin-bottom: 28px;
  }

  .hero__actions .btn {
    padding: 13px 22px;
  }
}

/* Very short landscape screens */
@media (orientation: landscape) and (max-height: 360px) {
  .hero .eyebrow {
    display: none;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 0.95rem;
    margin-bottom: 18px;
  }
}

/* Touch screens have no hover, so show what is normally revealed on hover */
@media (hover: none) {
  .gallery__item small,
  .masonry__caption {
    opacity: 1;
    transform: none;
  }

  .card:hover,
  .step:hover {
    transform: none;
  }
}

/* ===== Scroll reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .wa-float::before,
  .scroll-hint span { animation: none; }
}

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .menu-toggle {
    display: flex;
  }

  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 10px 20px rgba(28, 25, 22, 0.1);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    z-index: -1;
  }

  .nav.open {
    transform: translateY(0);
  }

  .about,
  .contact {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about__image {
    max-width: 420px;
  }

  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
  }

  .gallery__item--tall { grid-row: auto; }
  .gallery__item--last { grid-column: span 2; }

  .section {
    padding: 80px 0;
  }
}

@media (max-width: 520px) {
  .gallery {
    grid-template-columns: 1fr;
  }

  .gallery__item--tall { grid-row: auto; }
  .gallery__item--last { grid-column: auto; }

  .form__row {
    grid-template-columns: 1fr;
  }

  .form {
    padding: 24px;
  }

  .compare {
    aspect-ratio: 4 / 5;
  }

  .masonry {
    columns: 2;
    column-gap: 10px;
  }

  .masonry__item {
    margin-bottom: 10px;
  }

  /* Bottom padding keeps the photo, caption and button clear of the arrows */
  .lightbox {
    padding: 72px 12px 92px;
  }

  .lightbox__media img {
    max-height: calc(100vh - 270px);
    max-height: calc(100svh - 270px);
  }

  .lightbox__nav {
    position: absolute;
    bottom: 24px;
  }

  .lightbox__nav--prev { left: calc(50% - 64px); }
  .lightbox__nav--next { right: calc(50% - 64px); }

  .lightbox__media .placeholder {
    width: calc(100vw - 24px);
    max-height: 58vh;
  }
}