/* ==========================================================================
   Ivy Occasions — stylesheet
   Mobile-first. No frameworks, no build step.

   Contents
   01  Design tokens (colours, type, spacing)
   02  Reset and base elements
   03  Utilities (shell, eyebrow, rule, visually-hidden, reveal)
   04  Buttons, links and icons
   05  Header and navigation
   06  Hero
   07  Sections, service cards
   08  Gallery (filters, masonry, lightbox)
   09  Process steps
   10  About
   11  Testimonials
   12  Contact and form
   13  Footer
   14  Floating WhatsApp button
   15  404 page
   16  Reduced motion and print
   ========================================================================== */


/* 01  DESIGN TOKENS ======================================================== */
:root {
  /* Backgrounds — warm white, never pure white */
  --ivory:        #FDFCFA;
  --ivory-deep:   #F7F4EF;

  /* Gold. --gold is for solid shapes and large display type only.
     --gold-ink is the darkened gold used anywhere gold sits on ivory as
     readable text (it passes WCAG AA; #C9A227 on ivory does not).
     --gold-display is for LARGE gold type only (step numbers, the 404 code),
     where WCAG asks for 3:1 rather than 4.5:1. */
  --gold:         #C9A227;
  --gold-display: #AA8514;
  --gold-ink:     #856410;
  --gold-hair:    #D9C08B;

  /* Ink — soft charcoal, never pure black */
  --ink:          #2E2C29;
  --ink-soft:     #56524B;

  /* Tertiary, used sparingly */
  --sage:         #9AA88C;

  /* WhatsApp green, darkened so white text on it passes AA */
  --wa:           #0F7A4F;
  --wa-dark:      #0B5F3E;

  --shadow-sm: 0 1px 2px rgba(46, 44, 41, .05), 0 6px 18px rgba(46, 44, 41, .06);
  --shadow-md: 0 10px 40px rgba(46, 44, 41, .12);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shell:     1180px;
  --gutter:    1.25rem;   /* 20px at 320px up */
  --section-y: 4.5rem;

  --radius:    2px;       /* editorial: almost square */
  --ease:      cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 48em) {
  :root { --gutter: 2rem; --section-y: 6.5rem; }
}
@media (min-width: 75em) {
  :root { --gutter: 2.5rem; --section-y: 7.5rem; }
}


/* 02  RESET AND BASE ======================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.7;
  overflow-x: hidden;         /* belt and braces against horizontal scroll */
  -webkit-font-smoothing: antialiased;
}

/* Stop the sticky header covering anchor targets */
section[id], span[id] { scroll-margin-top: 5.5rem; }

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 .6em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-ink); }
a:hover { color: var(--ink); }

/* Visible focus for everyone who tabs, everywhere */
:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--ivory);
  padding: .75rem 1.25rem;
  font-size: .9rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus { left: .5rem; top: .5rem; }


/* 03  UTILITIES =========================================================== */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.eyebrow {
  margin: 0 0 .75rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

/* Thin gold hairline used under section titles and between bands */
.rule {
  display: block;
  width: 64px;
  height: 1px;
  margin: 1.25rem auto 1.5rem;
  background: var(--gold-hair);
}
.rule--left { margin-inline: 0; }

/* Fade-and-rise on scroll. Only applied when JS is running, so the site is
   fully readable with JavaScript disabled. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }


/* 04  BUTTONS, LINKS, ICONS =============================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--wa { background: var(--wa); color: #FFFFFF; }
.btn--wa:hover, .btn--wa:focus-visible { background: var(--wa-dark); color: #FFFFFF; }

.btn--ghost {
  background: transparent;
  border-color: var(--gold-hair);
  color: var(--ink);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

.btn--sm  { padding: .65rem 1.05rem; font-size: .72rem; }
.btn--block { display: flex; width: 100%; }

.icon-wa, .icon-ig {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

/* Text link with an arrow, used on service cards */
.link-wa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--gold-hair);
  padding-bottom: .25rem;
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.link-wa:hover, .link-wa:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
  gap: .7rem;
}

.link-ig {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
  font-size: .85rem;
  letter-spacing: .04em;
  text-decoration: none;
  color: var(--gold-ink);
}
.link-ig span { border-bottom: 1px solid var(--gold-hair); padding-bottom: .15rem; }
.link-ig:hover { color: var(--ink); }


/* 05  HEADER AND NAVIGATION =============================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  background: transparent;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* Once the page scrolls, the bar fills in so links stay readable.
   --solid is for pages with no dark hero behind the header (404): it stays
   filled in from the start. */
.site-header.is-stuck,
.site-header--solid {
  background: rgba(253, 252, 250, .96);
  box-shadow: 0 1px 0 var(--gold-hair), var(--shadow-sm);
  backdrop-filter: saturate(140%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: inherit;
}
.brand__mark { width: 38px; height: 38px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.02rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.brand__tagline {
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* On the hero (before scroll) the header sits on a dark photo, so its type
   goes light. Never on a --solid header, which sits on ivory. */
.site-header:not(.is-stuck):not(.site-header--solid) .brand__name    { color: var(--ivory); }
.site-header:not(.is-stuck):not(.site-header--solid) .brand__tagline { color: rgba(253, 252, 250, .8); }
.site-header:not(.is-stuck):not(.site-header--solid) .nav__link      { color: var(--ivory); }
.site-header:not(.is-stuck):not(.site-header--solid) .nav-toggle     { color: var(--ivory); }
.site-header:not(.is-stuck):not(.site-header--solid) .nav-toggle__bars span { background: var(--ivory); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 0;
  padding: .5rem .25rem;
  color: var(--ink);
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars { display: inline-block; width: 20px; }
.nav-toggle__bars span {
  display: block;
  height: 1px;
  background: var(--ink);
  margin: 4px 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile: the nav is a panel that drops from the header */
.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--ivory);
  border-top: 1px solid var(--gold-hair);
  box-shadow: var(--shadow-md);
  display: none;
}
.nav.is-open { display: block; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: .5rem var(--gutter) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.nav__link {
  display: block;
  padding: .75rem 0;
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(217, 192, 139, .45);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--gold-ink); }
.nav__cta-item { margin-top: .9rem; }

@media (min-width: 62em) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    display: block;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__list {
    flex-direction: row;
    align-items: center;
    gap: 1.9rem;
    padding: 0;
  }
  .nav__link { border: 0; padding: .35rem 0; }
  .nav__link:hover { color: var(--gold); }
  .site-header.is-stuck .nav__link:hover,
  .site-header--solid .nav__link:hover { color: var(--gold-ink); }
  .nav__cta-item { margin: 0; }
  .brand__mark { width: 44px; height: 44px; }
}


/* 06  HERO ================================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  min-height: 100vh;          /* fallback for older browsers */
  padding: 7rem 0 5rem;
  text-align: center;
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Warm scrim so white type stays legible on any photo */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(46, 44, 41, .60), rgba(46, 44, 41, .66) 45%, rgba(46, 44, 41, .74));
}

.hero__inner { position: relative; z-index: 2; }

.hero__logo {
  width: min(190px, 46vw);
  height: auto;
  margin: 0 auto 1.75rem;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35));
}

.hero__heading {
  color: var(--ivory);
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  font-weight: 400;
  letter-spacing: .02em;
  margin-bottom: .5rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .3);
}

.hero__sub {
  max-width: 34rem;
  margin: 0 auto 2.25rem;
  color: rgba(253, 252, 250, .92);
  font-size: 1.02rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: stretch;
  max-width: 21rem;
  margin: 0 auto;
}
.hero__actions .btn--ghost {
  border-color: rgba(253, 252, 250, .6);
  color: var(--ivory);
}
.hero__actions .btn--ghost:hover, .hero__actions .btn--ghost:focus-visible {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--ink);
}

.hero__scroll {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 2rem;
  height: 3rem;
  display: flex;
  justify-content: center;
}
.hero__scroll-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, rgba(253, 252, 250, 0), rgba(253, 252, 250, .9));
  animation: scroll-hint 2.4s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(.45); transform-origin: top; opacity: .5; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

@media (min-width: 40em) {
  .hero__actions { flex-direction: row; justify-content: center; max-width: none; }
  .hero__sub { font-size: 1.12rem; }
}


/* 07  SECTIONS AND SERVICE CARDS ========================================== */
.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--alt { background: var(--ivory-deep); }

/* Thin gold hairline between bands */
.section + .section::before,
.section--alt + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-hair) 22%, var(--gold-hair) 78%, transparent);
}
.section--alt::before { display: none; }

.section__head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 3rem;
}
.section__title {
  font-size: clamp(1.9rem, 6vw, 2.9rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}
.section__lead {
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0;
}
.section__foot { margin-top: 3rem; text-align: center; }

/* Service cards */
.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 40em) { .cards { grid-template-columns: repeat(2, 1fr); gap: 2.25rem; } }
@media (min-width: 62em) { .cards { grid-template-columns: repeat(3, 1fr); gap: 2.75rem 2.25rem; } }

.card { display: flex; flex-direction: column; }

.card__media {
  overflow: hidden;
  background: var(--ivory-deep);
  aspect-ratio: 4 / 3;
  margin-bottom: 1.25rem;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.card:hover .card__media img { transform: scale(1.06); }

.card__title {
  font-size: 1.5rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .55rem;
}
.card__text {
  color: var(--ink-soft);
  font-size: .96rem;
  margin-bottom: 1.15rem;
}
.card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.card__body .link-wa { margin-top: auto; }


/* 08  GALLERY ============================================================= */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 2.25rem;
}
.filter {
  background: transparent;
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius);
  padding: .55rem 1rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter:hover { border-color: var(--gold-ink); color: var(--ink); }
.filter.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ivory);
}

/* Masonry via CSS columns — no library, no layout maths */
.masonry { column-count: 1; column-gap: 1rem; }
@media (min-width: 34em) { .masonry { column-count: 2; column-gap: 1.1rem; } }
@media (min-width: 62em) { .masonry { column-count: 3; column-gap: 1.4rem; } }

.masonry__item {
  break-inside: avoid;
  margin: 0 0 1rem;
  display: block;
}
@media (min-width: 62em) { .masonry__item { margin-bottom: 1.4rem; } }
.masonry__item[hidden] { display: none; }

.masonry__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ivory-deep);
  cursor: zoom-in;
  overflow: hidden;
  position: relative;
}
.masonry__btn img { width: 100%; height: auto; transition: transform 1.1s var(--ease); }
.masonry__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(46, 44, 41, 0);
  transition: background-color .4s var(--ease);
}
.masonry__btn:hover img, .masonry__btn:focus-visible img { transform: scale(1.05); }
.masonry__btn:hover::after, .masonry__btn:focus-visible::after { background: rgba(46, 44, 41, .12); }

.gallery__empty {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 2rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 1rem 1rem;
  background: rgba(30, 28, 26, .94);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  margin: 0;
  max-width: 62rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.lightbox__img {
  max-width: 100%;
  max-height: 68vh;
  width: auto;
  object-fit: contain;
  box-shadow: var(--shadow-md);
  background: var(--ivory-deep);
}
.lightbox__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  color: rgba(253, 252, 250, .92);
  font-size: .9rem;
  text-align: center;
}
.lightbox__count { font-size: .72rem; letter-spacing: .18em; color: var(--gold-hair); }
.lightbox__wa { margin-top: .25rem; }

.lightbox__close, .lightbox__nav {
  position: absolute;
  background: rgba(253, 252, 250, .1);
  border: 1px solid rgba(253, 252, 250, .25);
  color: var(--ivory);
  cursor: pointer;
  line-height: 1;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(253, 252, 250, .22); }

.lightbox__close {
  top: 1rem; right: 1rem;
  width: 2.75rem; height: 2.75rem;
  font-size: 1.75rem;
  border-radius: 50%;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem; height: 3.5rem;
  font-size: 2rem;
  border-radius: var(--radius);
}
.lightbox__nav--prev { left: .5rem; }
.lightbox__nav--next { right: .5rem; }

@media (min-width: 48em) {
  .lightbox { padding: 4.5rem 5rem 2rem; }
  .lightbox__nav--prev { left: 1.25rem; }
  .lightbox__nav--next { right: 1.25rem; }
  .lightbox__img { max-height: 72vh; }
}


/* 09  PROCESS STEPS ======================================================= */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  counter-reset: step;
}
@media (min-width: 40em) { .steps { grid-template-columns: repeat(2, 1fr); gap: 3rem 2.5rem; } }
@media (min-width: 62em) { .steps { grid-template-columns: repeat(4, 1fr); gap: 2.25rem; } }

.step { position: relative; padding-top: 2.75rem; }
.step__num {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--gold-display);
  letter-spacing: .06em;
  line-height: 1;
}
.step::before {
  content: "";
  position: absolute;
  top: 2.6rem;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--gold-hair);
}
.step__title {
  font-size: 1.22rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.step__text { color: var(--ink-soft); font-size: .95rem; margin: 0; }


/* 10  ABOUT =============================================================== */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 56em) {
  .about { grid-template-columns: 5fr 6fr; gap: 4rem; }
}

.about__media { overflow: hidden; }
.about__media img { width: 100%; height: auto; }
.about__body .section__title { text-align: left; }
.about__body p { color: var(--ink-soft); }


/* 11  TESTIMONIALS ======================================================== */
.quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 56em) { .quotes { grid-template-columns: repeat(3, 1fr); gap: 2.25rem; } }

.quote {
  background: var(--ivory-deep);
  border: 1px solid rgba(217, 192, 139, .5);
  padding: 2rem 1.6rem 1.75rem;
  position: relative;
}
.section--alt .quote { background: var(--ivory); }
.quote blockquote { margin: 0 0 1.25rem; }
.quote blockquote p {
  font-family: var(--serif);
  font-size: 1.16rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.quote__by {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--gold-hair);
}
.quote__name {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.quote__event { font-size: .82rem; color: var(--ink-soft); }


/* 12  CONTACT AND FORM ==================================================== */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 62em) {
  .contact { grid-template-columns: 5fr 7fr; gap: 3.5rem; }
}

.contact__wa {
  background: var(--ivory);
  border: 1px solid var(--gold-hair);
  padding: 2rem 1.6rem;
}
.section--alt .contact__wa { background: var(--ivory); }
.contact__wa-title {
  font-size: 1.4rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.contact__wa-text { color: var(--ink-soft); font-size: .95rem; }

.contact__meta { margin: 1.75rem 0 0; }
.contact__meta > div + div { margin-top: 1.1rem; }
.contact__meta dt {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .2rem;
}
.contact__meta dd { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.contact__meta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-hair); }
.contact__meta a:hover { color: var(--gold-ink); }

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
}
@media (min-width: 44em) { .form { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1.5rem; } }

.form__intro, .field--full, .form__actions { grid-column: 1 / -1; }
.form__intro { color: var(--ink-soft); font-size: .95rem; margin: 0; }

.field { display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.req { color: var(--gold-ink); }

.field input, .field select, .field textarea {
  font-family: var(--sans);
  font-size: 1rem;              /* 16px stops iOS zooming on focus */
  font-weight: 300;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(133, 100, 16, .12);
  outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #78736A; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #A33A2B; }

.field__error {
  margin: 0;
  font-size: .8rem;
  color: #A33A2B;
}

/* Honeypot — hidden from people, visible to bots */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__actions { display: flex; flex-direction: column; gap: .75rem; }
.form__note { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.form__note.is-error { color: #A33A2B; }
.form__note.is-success { color: var(--wa-dark); }


/* 13  FOOTER ============================================================== */
.site-footer {
  background: var(--ink);
  color: rgba(253, 252, 250, .78);
  padding-top: 3.5rem;
  font-size: .92rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 44em) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2.5rem; } }

.site-footer__brand img {
  width: 150px;
  height: auto;
  /* the logo PNG is gold on transparent; lifting it slightly keeps it warm
     against the charcoal footer */
  filter: brightness(1.12);
  margin-bottom: 1rem;
}
.site-footer__blurb { color: rgba(253, 252, 250, .66); max-width: 26rem; }

.site-footer__title {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-hair);
  margin: 0 0 .9rem;
}
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer__col a {
  color: rgba(253, 252, 250, .82);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.site-footer__col a:hover, .site-footer__col a:focus-visible { color: var(--gold-hair); }
.site-footer__hours { margin: 1.1rem 0 0; color: rgba(253, 252, 250, .6); font-size: .85rem; }

.site-footer__base {
  border-top: 1px solid rgba(217, 192, 139, .28);
  padding-block: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(253, 252, 250, .55);
}
.site-footer__base p { margin: 0; }
@media (min-width: 44em) {
  .site-footer__base { flex-direction: row; justify-content: space-between; }
}
/* Keep the last row clear of the floating WhatsApp button on small screens */
@media (max-width: 43.99em) { .site-footer__base { padding-bottom: 5rem; } }


/* 14  FLOATING WHATSAPP BUTTON ============================================ */
.wa-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem;
  background: var(--wa);
  color: #FFFFFF;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(15, 122, 79, .35);
  /* subtle entrance: fades and rises in once the page has settled */
  animation: wa-in .7s var(--ease) .9s both;
  transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wa-float .icon-wa { width: 1.6rem; height: 1.6rem; }
.wa-float__label {
  display: none;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-right: .35rem;
}
.wa-float:hover, .wa-float:focus-visible {
  background: var(--wa-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15, 122, 79, .45);
}
@keyframes wa-in {
  from { opacity: 0; transform: translateY(18px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@media (min-width: 62em) {
  .wa-float { right: 1.5rem; bottom: 1.5rem; padding: .85rem 1.25rem; }
  .wa-float__label { display: inline; }
}


/* 15  404 PAGE ============================================================ */
.page-404 {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 0 5rem;
}
.page-404__logo { width: min(180px, 44vw); height: auto; margin: 0 auto 2rem; }
.page-404__code {
  font-family: var(--serif);
  font-size: clamp(3.5rem, 16vw, 7rem);
  color: var(--gold-display);
  line-height: 1;
  margin: 0 0 .25rem;
  letter-spacing: .1em;
}
.page-404__title {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-404__text { color: var(--ink-soft); max-width: 32rem; margin: 0 auto 2rem; }
.page-404__actions {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  max-width: 21rem;
  margin: 0 auto;
}
@media (min-width: 40em) {
  .page-404__actions { flex-direction: row; justify-content: center; max-width: none; }
}


/* 16  REDUCED MOTION AND PRINT =========================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* Show revealed content immediately rather than animating it in */
  .js .reveal { opacity: 1; transform: none; }
  .card:hover .card__media img,
  .masonry__btn:hover img { transform: none; }
  .hero__scroll-line { animation: none; opacity: .8; }
  .wa-float { animation: none; }
}

@media print {
  .site-header, .wa-float, .filters, .hero__scroll, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
}