/* ════════════════════════════════════════
   Larysa Stoilik · Shared Styles
   larysastoilik.com
════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

:root {
  --bg:         #F8F4EE;
  --bg-alt:     #EDE8DF;
  --bg-stone:   #E5DDD2;
  --bg-dark:    #2A2438;   /* deep plum-purple */
  --bg-foot:    #1E1A2C;   /* footer, deepest */

  --text:       #1E1B12;
  --text-mid:   #6A5D4E;
  --text-mut:   #9B8B78;
  --text-lgt:   #F0EAE0;

  --gold:       #A97830;
  --gold-lt:    #C49A4A;
  --gold-dim:   rgba(169,120,48,0.22);
  --gold-fnt:   rgba(169,120,48,0.07);

  --purple:     #8B72BE;
  --purple-lt:  #A990D4;
  --purple-dim: rgba(139,114,190,0.14);

  --border:     #D5CAB8;
  --border-dk:  rgba(240,234,224,0.1);

}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Cormorant Garamond', Georgia, serif;
  overflow-x: hidden;
}

/* ─── NAV ─── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.2rem 3rem;
  background: rgba(248,244,238,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-logo {
  font-family: 'Great Vibes', cursive;
  font-size: 1.7rem; line-height: 1;
  color: var(--text); text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.25s;
}
.nav-logo:hover { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 2.2rem; list-style: none; }
.nav-links a {
  font-family: 'Raleway', sans-serif; font-weight: 400;
  font-size: 0.58rem; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--text); text-decoration: none;
  transition: color 0.25s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }
.nav-links a.active { border-bottom: 1px solid var(--gold); padding-bottom: 0.15rem; }
.nav-cta {
  padding: 0.55rem 1.4rem !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
  transition: background 0.25s, color 0.25s !important;
}
.nav-cta:hover {
  background: var(--gold) !important;
  color: var(--bg) !important;
}

/* Hamburger button (desktop: hidden) */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px; height: 14px;
  background: none; border: none; cursor: pointer; padding: 0;
  flex-shrink: 0;
}
.nav-burger span {
  display: block; width: 100%; height: 1px;
  background: var(--text);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer (slides down from nav) */
.nav-drawer {
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(248,244,238,0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.nav-drawer.open { max-height: 380px; }
.nav-drawer-inner { padding: 1.5rem 3rem 2.5rem; }
.nav-drawer-links { list-style: none; }
.nav-drawer-links li { border-bottom: 1px solid var(--border); }
.nav-drawer-links li:last-child { border-bottom: none; }
.nav-drawer-links a {
  display: block; padding: 1.15rem 0;
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--text); text-decoration: none; transition: color 0.25s;
}
.nav-drawer-links a:hover { color: var(--gold); }
.nav-drawer-links .m-wt { color: var(--gold); }

/* ─── FOOTER ─── */
footer {
  background: var(--bg-foot);
  border-top: 1px solid rgba(240,234,224,0.06);
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 5rem 3rem 4rem;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 4rem;
}
.f-col-label {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.52rem; letter-spacing: 0.46em; text-transform: uppercase;
  color: var(--gold-lt); opacity: 0.55; display: block; margin-bottom: 1.5rem;
}
.f-col-brand {
  font-family: 'Great Vibes', cursive;
  font-size: 2.4rem; color: var(--text-lgt); opacity: 0.6;
  display: block; margin-bottom: 1.6rem; line-height: 1;
}
.f-col-list { list-style: none; }
.f-col-list li { margin-bottom: 0.85rem; }
.f-col-list a {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 1rem; color: var(--text-lgt); opacity: 0.45;
  text-decoration: none; transition: opacity 0.25s;
}
.f-col-list a:hover { opacity: 0.85; }
.f-col-val {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: 1rem; color: var(--text-lgt); opacity: 0.65;
  margin-bottom: 0.4rem; line-height: 1.5;
}
.f-col-sub {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: italic;
  font-size: 0.9rem; color: var(--text-lgt); opacity: 0.3;
  line-height: 1.6;
}
.f-bottom {
  max-width: 1200px; margin: 0 auto;
  padding: 2rem 3rem;
  border-top: 1px solid rgba(240,234,224,0.06);
}
.f-legal {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.5rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--text-lgt); opacity: 0.22;
}

/* ─── UTILITIES ─── */
.eyebrow {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.58rem; letter-spacing: 0.52em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: 0.9rem;
}
.sec-inner { max-width: 1200px; margin: 0 auto; width: 100%; }
.sec-pad { padding: 8rem 3rem; }
.sec-pad-sm { padding: 5rem 3rem; }

/* ─── BUTTONS ─── */
.btn-solid {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--text-lgt); background: var(--bg-dark);
  padding: 1.1rem 2.8rem; text-decoration: none;
  border: 1px solid var(--bg-dark); transition: all 0.3s;
  display: inline-block; cursor: pointer;
}
.btn-solid:hover { background: var(--gold); border-color: var(--gold); }

.btn-text {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.6rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--text-mid); text-decoration: none;
  border-bottom: 1px solid var(--border); padding-bottom: 0.2rem;
  transition: color 0.25s, border-color 0.25s; display: inline-block;
}
.btn-text:hover { color: var(--gold); border-color: var(--gold); }

.btn-outline-light {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--text-lgt); border: 1px solid rgba(240,234,224,0.32);
  padding: 1rem 2.8rem; text-decoration: none;
  transition: all 0.3s; display: inline-block;
}
.btn-outline-light:hover {
  background: rgba(240,234,224,0.08);
  border-color: rgba(240,234,224,0.6);
}

/* ─── INNER PAGE HERO ─── */
.page-hero {
  padding: 9rem 3rem 5rem;
  background: var(--bg);
}
.page-hero-inner {
  max-width: 1200px; margin: 0 auto;
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--border);
}
.page-hero-label {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.58rem; letter-spacing: 0.52em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem; display: block;
}
.page-hero-title {
  font-family: 'Cormorant Garamond', serif; font-weight: 400;
  font-size: clamp(2.6rem, 5.2vw, 4rem);
  color: var(--text); line-height: 1.0;
  margin-bottom: 1.6rem;
}
.page-hero-sub {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  color: var(--text-mid); line-height: 1.95;
  max-width: 680px;
}

/* ─── REVEAL ─── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.85s ease, transform 0.85s ease; }
.reveal.in  { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.12s; }
.d2 { transition-delay: 0.24s; }
.d3 { transition-delay: 0.36s; }
.d4 { transition-delay: 0.48s; }

/* ─── SHARED FORM STYLES ─── */
.form-block { display: flex; flex-direction: column; gap: 1.8rem; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--text-mut);
}
.field input,
.field textarea,
.field select {
  background: transparent; border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text); font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem; font-weight: 300;
  padding: 0.75rem 0; outline: none; resize: none;
  transition: border-color 0.3s; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.field select { cursor: pointer; }
.field input:focus,
.field textarea:focus,
.field select:focus { border-bottom-color: var(--gold); }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-mut); opacity: 0.45; font-style: italic; }
.form-submit {
  align-self: flex-start;
  font-family: 'Raleway', sans-serif; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--text-lgt); background: var(--bg-dark);
  border: 1px solid var(--bg-dark);
  padding: 1.1rem 3rem; cursor: pointer; transition: all 0.3s;
}
.form-submit:hover { background: var(--gold); border-color: var(--gold); }

/* ─── RESPONSIVE ─── */
@media (max-width: 680px) {
  nav { padding: 1.1rem 1.5rem; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-drawer-inner { padding: 1.5rem 1.5rem 2.5rem; }
  .sec-pad { padding: 3.5rem 1.5rem; }
  .sec-pad-sm { padding: 2.5rem 1.5rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.5rem 3rem; }
  .f-bottom { padding: 1.5rem; }
  .page-hero { padding: 6rem 1.5rem 1.5rem; }
  .page-hero-inner { padding-bottom: 2rem; }
  .f-row { grid-template-columns: 1fr; }
}