/* ═══════════════════════════ Header ═══════════════════════════ */

nav.top{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:1.4rem 2.5rem;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;
  background:rgba(239,231,218,0.88);
  border-bottom-color:rgba(57,92,107,0.08);
  margin-bottom:2rem;
}
nav.top.scrolled{
  background:rgba(181, 168, 148, 0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:0.9rem 2.5rem;
}
nav.top.scrolled .logo,
nav.top.scrolled .menu a{color:var(--teal-deep)}
nav.top.scrolled .menu a::after{background:var(--teal-deep)}
nav.top .logo{
  font-family:var(--display);
  font-size:1.25rem;
  letter-spacing:0.35em;
  color:var(--teal-deep);
  justify-self:start;
  white-space:nowrap;
  transition:color 0.3s;
  text-decoration:none;
}
nav.top .menu{
  display:flex;gap:2.2rem;list-style:none;
}
nav.top .menu a{
  font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--teal-deep);text-decoration:none;font-weight:400;
  position:relative;transition:color 0.3s;
}
nav.top .menu a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--teal-deep);
  transition:right 0.4s ease;
}
nav.top .menu a:hover::after{right:0}
nav.top .nav-secondary{
  justify-self:end;
  font-family:var(--sans);
  font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--teal-deep);text-decoration:none;
  padding:0.55rem 1.1rem;
  border:1px solid rgba(57,92,107,0.4);border-radius:100px;
  transition:all 0.3s;
}

nav.top .nav-cta-primary{
  justify-self:end;
  font-family:var(--sans);
  font-size:0.7rem;letter-spacing:0.25em;text-transform:uppercase;
  color:var(--teal-deep);text-decoration:none;
  padding:0.55rem 1.1rem;
  border-radius:100px;
  transition:all 0.3s;
}

nav.top .nav-ctas{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:0.7rem;
}
nav.top .nav-secondary:hover{background:var(--teal-deep);color:var(--cream);border-color:var(--teal-deep)}
@media(max-width:820px){
  nav.top{grid-template-columns:1fr auto;padding:1rem 1.2rem}
  nav.top .menu{display:none}
}

.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{background:#fff;color:var(--teal-deep);transform:translateY(-2px);box-shadow:0 12px 30px rgba(247,154,211,0.35)}
.btn-pink svg{transition:transform 0.3s}
.btn-pink:hover svg{transform:translateX(4px)}

/* ═══════════════════════════ FOOTER ═══════════════════════════ */
footer.site{
  background:var(--ink);
  color:var(--cream);
  padding:5rem 2.5rem 2.5rem;
}
.footer-grid{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;
}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{
  font-family:var(--display);font-size:1.8rem;letter-spacing:0.25em;color:var(--cream);
  margin-bottom:1rem;
}
.footer-grid p{font-size:0.85rem;line-height:1.7;color:rgba(239,231,218,0.55)}
.footer-col h4{
  font-size:0.68rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--pink);
  margin-bottom:1.4rem;font-weight:400;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.8rem}
.footer-col a{
  color:rgba(239,231,218,0.7);text-decoration:none;font-size:0.88rem;
  transition:color 0.2s;
}
.footer-col a:hover{color:var(--cream)}
.footer-bottom{
  max-width:1280px;margin:4rem auto 0;padding-top:2rem;
  border-top:1px solid rgba(239,231,218,0.08);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:0.75rem;color:rgba(239,231,218,0.35);
  letter-spacing:0.08em;
}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--cream:#EFE7DA;--pink:#F79AD3;--pink-ink:#B86A92;--teal:#395C6B;--teal-deep:#223841;--sage:#498467;--sand:#E5D4C0;--ink:#1E2A30;--paper:#FAF5EA;--serif:'Cormorant Garamond',Georgia,serif;--display:'Italiana','Cormorant Garamond',serif;--sans:'Jost',sans-serif;--script:'Caveat',cursive}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;-webkit-font-smoothing:antialiased;padding-top:10.5rem}
::selection{background:var(--pink);color:#fff}


/* ── Hero ── */
.hero{min-height:52vh;display:flex;align-items:flex-end;justify-content:center;padding:9rem 2rem 5rem;position:relative;overflow:hidden;text-align:center}
.bb1{position:absolute;top:-15%;right:-10%;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,rgba(247,154,211,0.14),transparent 60%);animation:bbFloat 18s ease-in-out infinite alternate;pointer-events:none}
.bb2{position:absolute;bottom:-15%;left:-10%;width:50vw;height:50vw;border-radius:50%;background:radial-gradient(circle,rgba(57,92,107,0.08),transparent 60%);animation:bbFloat 22s ease-in-out infinite alternate-reverse;pointer-events:none}
@keyframes bbFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(4%,-4%) scale(1.1)}}
.hero-inner{position:relative;z-index:2;max-width:700px}
.hero-kicker{font-size:0.7rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:1.2rem;opacity:0;animation:rise 0.9s ease 0.4s forwards}
.hero-title{font-family:var(--display);font-size:clamp(2.8rem,6vw,5.5rem);line-height:1;color:var(--teal-deep);margin-bottom:1.2rem}
.hero-title .line{overflow:hidden}
.hero-title .line span{display:inline-block;opacity:0;transform:translateY(110%);animation:riseUp 1.1s cubic-bezier(0.22,0.95,0.3,1) forwards}
.hero-title .line:nth-child(1) span{animation-delay:0.5s}
.hero-title .line:nth-child(2) span{animation-delay:0.68s}
.hero-lede{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:rgba(30,42,48,0.6);max-width:480px;margin:0 auto;opacity:0;animation:rise 0.9s ease 1.1s forwards}
@keyframes riseUp{to{opacity:1;transform:translateY(0)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Contact section ── */
.contact-section{padding:0 2rem 8rem;display:flex;justify-content:center}
.contact-wrap{width:100%;max-width:900px;display:grid;grid-template-columns:1fr 1.6fr;gap:4rem;align-items:start}
@media(max-width:750px){.contact-wrap{grid-template-columns:1fr;gap:2.5rem}}

/* Left info panel */
.contact-info{opacity:0;transform:translateY(20px);transition:opacity 0.7s,transform 0.7s}
.contact-info.visible{opacity:1;transform:translateY(0)}
.info-label{font-size:0.65rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--pink-ink);margin-bottom:1.2rem}
.info-heading{font-family:var(--display);font-size:2.4rem;line-height:1.05;color:var(--teal-deep);margin-bottom:1.2rem}
.info-heading em{font-style:italic;color:var(--pink-ink)}
.info-body{font-family:var(--serif);font-size:1.05rem;line-height:1.7;color:rgba(30,42,48,0.65);margin-bottom:2.4rem}
.info-detail{display:flex;flex-direction:column;gap:1rem}
.detail-item{display:flex;align-items:flex-start;gap:0.8rem}
.detail-icon{width:36px;height:36px;border-radius:50%;background:var(--paper);border:1px solid rgba(57,92,107,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(30,42,48,0.06)}
.detail-icon svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:1.8}
.detail-text{font-size:0.85rem;color:rgba(30,42,48,0.6);line-height:1.5;padding-top:0.5rem}
.detail-text strong{display:block;font-size:0.68rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--teal);font-weight:400;margin-bottom:0.2rem}

/* Right form card */
.contact-card{background:var(--paper);border-radius:16px;padding:2.8rem;box-shadow:0 24px 60px rgba(30,42,48,0.08),0 2px 6px rgba(0,0,0,0.04);opacity:0;transform:translateY(24px);transition:opacity 0.7s 0.15s,transform 0.7s 0.15s}
.contact-card.visible{opacity:1;transform:translateY(0)}
@media(max-width:500px){.contact-card{padding:2rem 1.6rem}}
.field{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1.2rem}
.field label{font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--teal);font-weight:400}
.field input,.field textarea{background:var(--cream);border:1px solid rgba(57,92,107,0.18);border-radius:8px;padding:0.85rem 1rem;font-family:var(--sans);font-size:0.95rem;font-weight:300;color:var(--ink);transition:border-color 0.25s,box-shadow 0.25s;outline:none;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--pink);box-shadow:0 0 0 3px rgba(247,154,211,0.15)}
.field input::placeholder,.field textarea::placeholder{color:rgba(30,42,48,0.3)}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}
.btn-submit{width:100%;padding:1.1rem;border:none;border-radius:100px;background:var(--teal-deep);color:var(--cream);cursor:pointer;font-family:var(--sans);font-size:0.78rem;letter-spacing:0.25em;text-transform:uppercase;font-weight:500;transition:background 0.25s,transform 0.2s,box-shadow 0.25s;margin-top:0.4rem;display:flex;align-items:center;justify-content:center;gap:0.7rem}
.btn-submit:hover{background:var(--ink);transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,56,65,0.2)}
.btn-submit:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.btn-submit svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform 0.2s}
.btn-submit:hover:not(:disabled) svg{transform:translateX(4px)}
.alert-error{background:rgba(192,57,43,0.08);border:1px solid rgba(192,57,43,0.2);border-radius:8px;padding:0.9rem 1.2rem;margin-bottom:1.2rem;font-size:0.85rem;color:#c0392b;display:none}
.alert-error.visible{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.shake{animation:shake 0.35s ease}
.form-fields{transition:opacity 0.3s}
.form-fields.hidden{opacity:0;pointer-events:none;height:0;overflow:hidden;margin:0}

/* Success state */
.success-box{display:none;text-align:center;padding:1.5rem 0}
.success-box.visible{display:block}
.s-icon{width:52px;height:52px;border-radius:50%;background:rgba(73,132,103,0.12);display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem}
.s-icon svg{width:24px;height:24px;stroke:var(--sage);fill:none;stroke-width:2}
.success-box h3{font-family:var(--display);font-size:1.8rem;color:var(--teal-deep);margin-bottom:0.6rem}
.success-box p{font-family:var(--serif);font-style:italic;font-size:0.98rem;color:rgba(30,42,48,0.55)}


.contact-title {text-align: center; margin: 0px auto 40px;color: var(--teal-deep);font-size: clamp(2.6rem, 5vw, 4rem);line-height: 1.05;font-family: var(--display);}