/* ============================================
   VELVET BLOOM — brand tokens
   ============================================ */
:root {
  --olive-deep: #2E3125;
  --olive-mid:  #454A38;
  --olive-line: #565c47;
  --cream:      #F3EEE0;
  --cream-dim:  #E7E0CC;
  --gold:       #C9A667;
  --gold-soft:  #a98f5c;
  --ember:      #C1663A;
  --ink:        #1C1E17;

  --font-display: "Cinzel", "Times New Roman", serif;
  --font-body: "Jost", -apple-system, "Segoe UI", sans-serif;

  --container: 1120px;
  --gap-section: clamp(4rem, 9vw, 8rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--olive-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
  color: var(--cream);
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

p { margin: 0 0 1rem; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.6rem;
}

/* ---------- signature emblem (arch + bloom) ---------- */
.emblem {
  width: 74px;
  height: auto;
  color: var(--gold);
}
.emblem-sprig {
  width: 46px;
  height: auto;
  color: var(--gold-soft);
  opacity: 0.85;
}

/* ---------- nav ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 1rem 0;
  background: rgba(46, 49, 37, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(201, 166, 103, 0.25);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.28em;
  color: var(--cream);
  line-height: 1;
}
/* Purely a grouping element for the mobile dropdown panel below;
   on desktop it should have no layout presence of its own, so
   .nav-links and .nav-socials go back to being direct flex children
   of .nav-inner (keeps the original centered nav-links look). */
.nav-menu { display: contents; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding-bottom: 4px;
  line-height: 1;
  opacity: 0.88;
  transition: opacity 0.2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ember);
}
.nav-socials {
  display: flex;
  gap: 0.9rem;
}
.nav-socials a {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid rgba(243, 238, 224, 0.28);
  border-radius: 50%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.nav-socials a:hover {
  border-color: var(--gold);
  background: rgba(201, 166, 103, 0.12);
}
.nav-socials svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(243,238,224,0.35);
  border-radius: 4px;
  color: var(--cream);
  width: 38px; height: 34px;
  align-items: center;
  justify-content: center;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.9rem;
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--cream);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.btn:hover {
  background: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}
.btn-solid {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--cream);
}
.btn-solid:hover {
  background: #a8552c;
  border-color: #a8552c;
  color: var(--cream);
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  /* object-fit:cover on .hero-photo crops symmetrically from top+bottom
     whenever this box is wider (relative to its height) than the photo
     itself (1675x939, ratio ~1.7838) -- real browser windows are often
     short enough (address bar, tabs, etc. eating vertical space) to hit
     that, cropping into the emblem near the top of the photo. Force the
     min-height up in that case so we always crop from the sides instead,
     matching the intended full-height framing consistently. */
  min-height: max(92vh, calc(100vw / 1.7838));
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201,166,103,0.16), transparent 55%),
    linear-gradient(180deg, rgba(28,30,23,0.05) 0%, rgba(28,30,23,0.15) 40%, rgba(28,30,23,0.58) 100%),
    var(--olive-deep);
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.62;
}
.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  animation: rise 1.1s ease both;
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Positioned to sit in front of the white cupboard in the photo. */
.hero-cta {
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 0;
  border-width: 2px;
  background: linear-gradient(180deg, rgba(28,30,23,0.35), rgba(28,30,23,0.75));
}
/* .btn:hover sets its own transform (translateY), which would otherwise
   replace the centering transform above and knock the button off-place. */
.hero-cta:hover {
  transform: translate(-50%, calc(-50% - 1px));
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- sections ---------- */
section { padding: var(--gap-section) 0; }

.section-divider {
  display: flex;
  justify-content: center;
  padding: 0 0 var(--gap-section);
}

.about-copy {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}
.about-copy h2 { margin-bottom: 1.4rem; }
.about-copy p {
  color: var(--cream-dim);
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- available-for strip ---------- */
.offerings {
  background: var(--olive-mid);
  border-top: 1px solid rgba(201,166,103,0.18);
  border-bottom: 1px solid rgba(201,166,103,0.18);
}
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem;
}
.offering {
  text-align: center;
  padding: 0.4rem;
}
.offering svg {
  width: 30px; height: 30px;
  color: var(--gold);
  margin: 0 auto 1rem;
}
.offering h3 {
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.offering p {
  font-size: 0.86rem;
  color: var(--cream-dim);
  margin: 0;
}

.cta-band {
  text-align: center;
}
.cta-band h2 { margin-bottom: 1rem; }
.cta-band p {
  color: var(--cream-dim);
  max-width: 42ch;
  margin: 0 auto 1.8rem;
}

/* ---------- videos page ---------- */
.page-header {
  padding: 5rem 0 3rem;
  text-align: center;
}
.page-header p {
  color: var(--cream-dim);
  max-width: 50ch;
  margin: 1rem auto 0;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.6rem 2.2rem;
}
.video-card {
  border: 1px solid rgba(201,166,103,0.28);
  padding: 10px;
  background: rgba(201,166,103,0.03);
}
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--ink);
  overflow: hidden;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1rem 0.4rem 0.3rem;
  gap: 1rem;
}
.video-caption h3 {
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  text-transform: none;
  font-weight: 600;
}
.video-caption span {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  white-space: nowrap;
}

.video-note {
  margin-top: 3rem;
  padding: 1.4rem 1.6rem;
  border-left: 2px solid var(--ember);
  background: rgba(193,102,58,0.08);
  color: var(--cream-dim);
  font-size: 0.9rem;
}
.video-note code {
  color: var(--gold);
  font-size: 0.85em;
}

/* ---------- contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact-info > p {
  color: var(--cream-dim);
  max-width: 40ch;
}
.contact-details {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.3rem;
}
.contact-details li {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.contact-details svg {
  width: 18px; height: 18px;
  color: var(--gold);
  margin-top: 3px;
  flex-shrink: 0;
}
.label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.15rem;
}
.contact-details a:hover { color: var(--gold); }

.label + .contact-socials { margin-top: 0.5rem; }
.contact-socials {
  display: flex;
  gap: 0.9rem;
}
.contact-socials a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid rgba(243,238,224,0.28);
  border-radius: 50%;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.contact-socials a:hover {
  border-color: var(--gold);
  background: rgba(201, 166, 103, 0.12);
}
.contact-socials svg { width: 16px; height: 16px; color: var(--cream); margin-top: 0; }

.contact-form {
  background: var(--cream);
  color: var(--ink);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border: 1px solid var(--gold);
}
.contact-form h3 {
  color: var(--ink);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
}
.field { margin-bottom: 1.3rem; }
.field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6a5a;
  margin-bottom: 0.5rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #c9c3ac;
  background: transparent;
  padding: 0.6rem 0.1rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ember);
}
.field textarea { resize: vertical; min-height: 100px; }
.contact-form .btn-solid {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid rgba(201,166,103,0.2);
  padding: 3.4rem 0 2.2rem;
  text-align: center;
}
.footer-emblem { margin: 0 auto 1.2rem; }
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1.2rem 0 1.6rem;
}
.footer-socials a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(243,238,224,0.25);
  border-radius: 50%;
}
.footer-socials a:hover { border-color: var(--gold); }
.footer-socials svg { width: 14px; height: 14px; }
.footer-fine {
  font-size: 0.76rem;
  color: var(--olive-line);
  letter-spacing: 0.06em;
}

/* ---------- focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .nav-menu { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.nav-open .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--olive-deep);
    padding: 1.6rem;
    border-bottom: 1px solid rgba(201,166,103,0.25);
  }
  .site-nav.nav-open .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.3rem;
  }
  .contact-grid { grid-template-columns: 1fr; }
  .offerings-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .video-grid { grid-template-columns: 1fr; }

  /* Hero: let the full photo scale down to fit the width instead of
     cropping it to fill 92vh, so the wordmark baked into the photo
     isn't cut off. The button drops below the image instead of
     overlaying it. */
  .hero {
    display: block;
    min-height: 0;
    background: none;
    padding-bottom: 0;
  }
  .hero-photo {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 1;
  }
  .hero-content {
    position: static;
    padding: 2rem 1.6rem 0;
  }
  .hero-cta {
    position: static;
    transform: none;
  }
  .hero-cta:hover {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-content { animation: none; }
}