/* ========== Naturally Beautiful — Clean Beauty ========== */
/* Design tokens */
:root {
  --cream: #F6F2EC;
  --cream-85: rgba(246, 242, 236, 0.85);
  --cream-70: rgba(246, 242, 236, 0.70);
  --cream-50: rgba(246, 242, 236, 0.50);
  --cream-40: rgba(246, 242, 236, 0.40);
  --cream-30: rgba(246, 242, 236, 0.30);
  --cream-15: rgba(246, 242, 236, 0.15);
  --olive: #2F3E2F;
  --olive-80: rgba(47, 62, 47, 0.80);
  --olive-75: rgba(47, 62, 47, 0.75);
  --olive-70: rgba(47, 62, 47, 0.70);
  --olive-60: rgba(47, 62, 47, 0.60);
  --olive-40: rgba(47, 62, 47, 0.40);
  --olive-30: rgba(47, 62, 47, 0.30);
  --olive-soft: #A8B39A;
  --beige: #D8C7B0;
  --beige-30: rgba(216, 199, 176, 0.30);
  --beige-20: rgba(216, 199, 176, 0.20);
  --border: #DCD3C4;
  --shadow-elegant: 0 30px 80px -40px rgba(47, 62, 47, 0.25);
  --serif: 'Playfair Display', serif;
  --script: 'Allura', cursive;
  --sans: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--olive);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.5;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* Utility */
.container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 768px) { .container { padding: 0 2.5rem; } }
.tracking-luxe { letter-spacing: 0.32em; text-transform: uppercase; }
.font-serif { font-family: var(--serif); }
.font-script { font-family: var(--script); font-weight: 400; font-style: normal; }
.font-sans { font-family: var(--sans); }
.italic { font-style: italic; }
.olive-soft { color: var(--olive-soft); }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); animation: reveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.reveal-d1 { animation-delay: 0.15s; }
.reveal-d2 { animation-delay: 0.3s; }
.reveal-d3 { animation-delay: 0.45s; }
.reveal-d4 { animation-delay: 0.6s; }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

/* ========== NAV ========== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 1.5rem 0; transition: all 0.5s ease;
}
.nav.scrolled {
  background: var(--cream-85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { height: 56px; transition: height 0.5s ease; }
.nav.scrolled .nav-logo { height: 40px; }
@media (min-width: 768px) {
  .nav-logo { height: 85px; }
  .nav.scrolled .nav-logo { height: 48px; }
}
.nav-links { display: none; gap: 2.5rem; }
.nav-links a {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--olive-80); transition: color 0.3s;
}
.nav-links a:hover { color: var(--olive); }
.nav-cta {
  display: none;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  border: 1px solid var(--olive); color: var(--olive);
  padding: 0.625rem 1.25rem; transition: all 0.5s;
}
.nav-cta:hover { background: var(--olive); color: var(--cream); }
@media (min-width: 768px) {
  .nav-links, .nav-cta { display: inline-flex; align-items: center; }
}

/* ========== HERO ========== */
.hero { padding: 2rem 0 5rem; }
@media (min-width: 768px) { .hero { padding: 5rem 0 8rem; } }
.hero-grid {
  display: grid; gap: 2.5rem; 
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 4rem; }
}
.eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.eyebrow .line { width: 2.5rem; height: 1px; background: var(--olive-60); }
.eyebrow span { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive-70); }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: 3.4rem; line-height: 0.95; letter-spacing: -0.02em;
}
@media (min-width: 640px) { .hero h1 { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 7.5rem; } }
.hero h1 .script {
  display: block; font-family: var(--script); font-style: italic; font-weight: 400;
  color: var(--olive-soft);
  font-size: 4rem; line-height: 0.85;
  margin-top: 0; margin-left: 0; 
/*   text-align: center;transform: translateX(-6%); */
}
@media (min-width: 640px) { .hero h1 .script { font-size: 6rem; } }
@media (min-width: 1024px) { .hero h1 .script { font-size: 9rem; margin-top:12px; margin-left: 0;} }
.hero p {
  margin-top: 2.5rem; max-width: 28rem;
  font-size: 1rem; line-height: 1.7; color: var(--olive-75);
}
@media (min-width: 768px) { .hero p { font-size: 1.125rem; } }
.cta-row { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .cta-row { flex-direction: row; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  padding: 1rem 2rem; transition: all 0.5s;
}
.btn-primary { background: var(--olive); color: var(--cream); }
.btn-primary:hover { background: var(--olive-soft); }
.btn-outline { border: 1px solid var(--olive-40); color: var(--olive); }
.btn-outline:hover { border-color: var(--olive); }
.hero-meta {
  margin-top: 4rem; display: flex; align-items: center; gap: 2rem;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive-60);
}
.hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--olive-30); }

.hero-visual { position: relative; }
.blur-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.blob-1 { top: -1.5rem; left: -1.5rem; width: 10rem; height: 10rem; background: rgba(168, 179, 154, 0.3); }
.blob-2 { bottom: -2.5rem; right: -1.5rem; width: 14rem; height: 14rem; background: rgba(216, 199, 176, 0.4); }
.hero-img-wrap { position: relative; aspect-ratio: 4/5; overflow: hidden; box-shadow: var(--shadow-elegant); }
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.tag-tl, .tag-br { position: absolute; padding: 0.75rem 1rem; }
.tag-tl { top: 1.25rem; left: 1.25rem; background: var(--cream-85); backdrop-filter: blur(6px); }
.tag-tl .num { font-family: var(--script); font-size: 1.5rem; color: var(--olive); line-height: 1; }
.tag-tl .lbl { font-family: var(--serif); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive-80); margin-top: 0.25rem; }
.tag-br { bottom: 1.25rem; right: 1.25rem; background: var(--olive); color: var(--cream); }
.tag-br .lbl { font-family: var(--serif); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; }
.tag-br .big { font-family: var(--serif); font-style: italic; font-size: 1.125rem; line-height: 1; }
.edition-row {
  margin-top: 1rem; display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive-60);
}

/* ========== MARQUEE ========== */
.marquee-section {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 1.5rem 0; overflow: hidden; background: var(--cream);
}
.marquee {
  display: flex; white-space: nowrap; gap: 4rem; align-items: center;
  font-family: var(--serif); font-style: italic; color: var(--olive-70);
  font-size: 1.5rem; animation: marquee 40s linear infinite;
}
@media (min-width: 768px) { .marquee { font-size: 1.875rem; } }
.marquee-group { display: flex; gap: 4rem; padding-right: 4rem; align-items: center; flex-shrink: 0; }
.marquee .sep { color: var(--olive-soft); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ========== PROMISE ========== */
.promise { padding: 7rem 0; text-align: center; }
@media (min-width: 768px) { .promise { padding: 10rem 0; } }
.promise-inner { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
.eyebrow-center { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive-60); }
.promise h2 {
  margin-top: 2rem; font-family: var(--serif); font-weight: 400;
  font-size: 2.5rem; line-height: 1.05;
}
@media (min-width: 768px) { .promise h2 { font-size: 4rem; } }
@media (min-width: 1024px) { .promise h2 { font-size: 4.5rem; } }
.promise h2 .script {
  display: block; font-family: var(--script); font-style: italic;
  color: var(--olive-soft); font-size: 4rem; line-height: 1; margin: 0.5rem 0;
}
@media (min-width: 768px) { .promise h2 .script { font-size: 6rem; } }
@media (min-width: 1024px) { .promise h2 .script { font-size: 8rem; } }
.promise p {
  margin: 2.5rem auto 0; max-width: 32rem;
  font-size: 1rem; color: var(--olive-75); line-height: 1.7;
}
@media (min-width: 768px) { .promise p { font-size: 1.125rem; } }
.promise-grid {
  margin-top: 5rem; display: grid; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
}
@media (min-width: 768px) { .promise-grid { grid-template-columns: repeat(3, 1fr); } }
.promise-card { background: var(--cream); padding: 2.5rem; text-align: left; }
@media (min-width: 768px) { .promise-card { padding: 3rem; } }
.promise-card .num { font-family: var(--serif); font-style: italic; color: var(--olive-soft); font-size: 1.875rem; }
.promise-card h3 { margin-top: 1.5rem; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
@media (min-width: 768px) { .promise-card h3 { font-size: 1.875rem; } }
.promise-card p { margin-top: 1rem; font-size: 0.875rem; color: var(--olive-70); line-height: 1.7; }

/* ========== CATEGORIES ========== */
.shop { padding: 6rem 0; background: rgba(216, 199, 176, 0.3); }
@media (min-width: 768px) { .shop { padding: 8rem 0; } }
.shop-head {
  display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem;
}
@media (min-width: 768px) { .shop-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.shop-head h2 {
  margin-top: 1rem; font-family: var(--serif); font-weight: 400;
  font-size: 2.5rem; line-height: 1.1;
}
@media (min-width: 768px) { .shop-head h2 { font-size: 3rem; } }
.shop-head .script { font-family: var(--script); font-style: italic; color: var(--olive-soft); ;font-size: 90px;}
.shop-head p { max-width: 24rem; font-size: 0.875rem; color: var(--olive-70); line-height: 1.7; }
.cat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
@media (min-width: 768px) { .cat-grid { gap: 1.5rem; } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card {
  position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--cream);
}
.cat-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cat-card:hover img { transform: scale(1.05); }
.cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(47, 62, 47, 0.6), transparent 50%);
  opacity: 0.9;
}
.cat-num {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--serif); font-style: italic; color: var(--cream-80, rgba(246,242,236,0.8)); font-size: 0.875rem;
}
.cat-foot {
  position: absolute; bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
  display: flex; align-items: flex-end; justify-content: space-between; color: var(--cream);
}
.cat-foot h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.2; }
@media (min-width: 768px) { .cat-foot h3 { font-size: 1.5rem; } }
.cat-foot .more { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; opacity: 0.7; transition: opacity 0.3s; }
.cat-card:hover .cat-foot .more { opacity: 1; }

/* ========== PHILOSOPHY ========== */
.philosophy { padding: 7rem 0; }
@media (min-width: 768px) { .philosophy { padding: 0rem 0; } }
.philo-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .philo-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.philo-img { aspect-ratio: 4/5; overflow: hidden; }
.philo-img img { width: 100%; height: 100%; object-fit: cover; }
.philo-text h2 {
  margin-top: 1.5rem; font-family: var(--serif); font-weight: 400;
  font-size: 2.5rem; line-height:0.9;
}
@media (min-width: 768px) { .philo-text h2 { font-size: 4rem; } }
.philo-text h2 .script {
  display: block; font-family: var(--script); font-style: italic; color: var(--olive-soft);
  font-size: 4rem; margin-top:25px; margin-bottom:10px;
}
@media (min-width: 768px) { .philo-text h2 .script { font-size: 5.5rem; } }
.philo-text p {
  margin-top: 2rem; max-width: 28rem;
  font-size: 1rem; color: var(--olive-75); line-height: 1.7;
}
@media (min-width: 768px) { .philo-text p { font-size: 1.125rem; } }
.philo-list { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; max-width: 28rem; }
.philo-item { display: flex; align-items: flex-start; gap: 1rem; }
.philo-item .dash { margin-top: 0.625rem; width: 1.5rem; height: 1px; background: var(--olive); flex-shrink: 0; }
.philo-item p { margin: 0; font-size: 0.875rem; color: var(--olive-80); }
.philo-link {
  display: inline-block; margin-top: 3rem;
  font-family: var(--serif); font-style: italic;
  border-bottom: 1px solid var(--olive-40); padding-bottom: 2px; transition: border-color 0.3s;
}
.philo-link:hover { border-color: var(--olive); }

/* ========== JOURNAL ========== */
.journal { padding: 6rem 0; background: var(--olive); color: var(--cream); }
@media (min-width: 768px) { .journal { padding: 5rem 0; } }
.j-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 4rem; }
@media (min-width: 768px) { .j-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.j-head .eyebrow-center { color: var(--cream-50); }
.j-head h2 {
  margin-top: 1rem; font-family: var(--serif); font-weight: 400;
  font-size: 2.5rem; line-height: 1.1;
}
@media (min-width: 768px) { .j-head h2 { font-size: 4rem; } }
.j-head .script { font-family: var(--script); font-style: italic; color: #A8B39A;font-size: 110px; }
.j-stories {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  border: 1px solid var(--cream-30); padding: 0.75rem 1.5rem; transition: all 0.5s; align-self: flex-start;
}
.j-stories:hover { background: var(--cream); color: var(--olive); }
.j-grid { display: grid; gap: 1px; background: var(--cream-15); }
@media (min-width: 768px) { .j-grid { grid-template-columns: repeat(3, 1fr); } }
.j-card { background: var(--olive); padding: 2rem; transition: background 0.3s; }
@media (min-width: 768px) { .j-card { padding: 2.5rem; } }
.j-card:hover { background: rgba(47, 62, 47, 0.8); }
.j-meta {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cream-50);
}
.j-card h3 { margin-top: 2rem; font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.4; }
@media (min-width: 768px) { .j-card h3 { font-size: 1.875rem; } }
.j-card p { margin-top: 1.25rem; font-size: 0.875rem; color: var(--cream-70); line-height: 1.7; }
.j-read {
  margin-top: 2rem; display: inline-block;
  font-family: var(--serif); font-style: italic;
  border-bottom: 1px solid var(--cream-40); padding-bottom: 2px;
}
/* Mobile */
@media (max-width: 768px) {
    .j-head .script {
        font-size: 50px;
        line-height: 1;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .j-head .script {
        font-size: 38px;
    }
}
/* ========== EMAIL CAPTURE ========== */
.invite { position: relative; padding: 7rem 0; overflow: hidden; }
@media (min-width: 768px) { .invite { padding: 5rem 0; } }
.invite-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.invite-overlay { position: absolute; inset: 0; background: var(--cream-70); }
.invite-inner { position: relative; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; text-align: center; }
.invite h2 {
  margin-top: 1.5rem; font-family: var(--serif); font-weight: 400;
  font-size: 2.5rem; line-height: 1.05;
}
/* @media (min-width: 768px) { .invite h2 { font-size: 5rem; } }
.invite h2 .script {
  display: block; font-family: var(--script); font-style: italic; color: var(--olive-soft);
  font-size: 3rem; margin: 0.25rem 0;
} */
@media (min-width: 768px) {
  .invite h2 {
    font-size: 5rem;
    line-height: 0.9;
  }
}

.invite h2 .script {
  display: block;
  font-family: var(--script);
  font-style: italic;
  color: var(--olive-soft);
  font-size: 4.5rem; /* bigger font */
  line-height: 1;
  margin: 2rem 0; /* equal spacing */
  position: relative;
  top: 12px; /* center between lines */
}
@media (min-width: 768px) { .invite h2 .script { font-size: 7rem; } }
.invite p { margin: 2rem auto 0; max-width: 28rem; font-size: 1rem; color: var(--olive-75); }
.invite-form {
  margin: 3rem auto 0; max-width: 32rem;
  display: flex; flex-direction: column;
  background: var(--cream); border: 1px solid var(--olive-30);
}
@media (min-width: 640px) { .invite-form { flex-direction: row; } }
.invite-form input {
  flex: 1; background: transparent; padding: 1rem 1.25rem;
  font-family: var(--sans); font-size: 0.875rem; color: var(--olive); border: none; outline: none;
}
.invite-form input::placeholder { color: var(--olive-40); }
.invite-form button {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  background: var(--olive); color: var(--cream); padding: 1rem 2rem; transition: background 0.5s;
}
.invite-form button:hover { background: var(--olive-soft); }
.invite-fine { margin-top: 1.25rem; font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(47,62,47,0.5); }

/* ========== FINAL CTA ========== */
.final { padding: 7rem 0; text-align: center; background: rgba(168, 179, 154, 0.2); }
@media (min-width: 768px) { .final { padding: 5rem 0; } }
.final-inner { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; }
.final .script { font-family: var(--script); font-size: 3rem; color: var(--olive-soft); line-height: 1; }
@media (min-width: 768px) { .final .script { font-size: 8rem; } }
.final h2 { margin-top: 0.5rem; font-family: var(--serif); font-weight: 400; font-size: 2.5rem; letter-spacing: -0.02em; }
@media (min-width: 768px) { .final h2 { font-size: 4rem; } }
.final p { margin: 2rem auto 0; max-width: 32rem; font-size: 1rem; color: var(--olive-70); }

/* ========== FOOTER ========== */
.footer { background: var(--olive); color: var(--cream); padding: 5rem 0 2.5rem; }
.footer-grid { display: grid; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid var(--cream-15); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 5fr 2fr 2fr 3fr; } }
.footer-logo { height: 112px; width: auto; margin-left: -1rem; }
@media (min-width: 768px) { .footer-logo { height: 128px; } }
.footer-tagline { margin-top: 2rem; font-size: 0.875rem; color: var(--cream-70); max-width: 24rem; line-height: 1.7; }
.footer h4 { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cream-50); margin-bottom: 1.25rem; font-weight: 400; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; font-family: var(--serif); font-size: 1rem; }
.footer ul a:hover { color: var(--olive-soft); }
.footer-letters p { font-size: 0.875rem; color: var(--cream-70); margin-bottom: 1.25rem; }
.footer-form { display: flex; border-bottom: 1px solid var(--cream-30); }
.footer-form input { flex: 1; background: transparent; padding: 0.5rem 0; font-family: var(--sans); font-size: 0.875rem; color: var(--cream); border: none; outline: none; }
.footer-form input::placeholder { color: var(--cream-40); }
.footer-form button { font-family: var(--serif); font-style: italic; color: var(--cream); }
.footer-form button:hover { color: var(--olive-soft); }
.footer-bottom {
  margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem;
  align-items: center; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cream-50);
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; } }
.footer-social { display: flex; gap: 1.5rem; }
.footer-social a:hover { color: var(--cream); }
.nav {
  position: relative;
}

.nav-links {
  z-index: 999;
}

.nav-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-links ul li {
  margin-bottom: 10px;
}
.founder-quote {
  background: #d9c6b04d; /* beige background */
  padding: 100px 20px;
  text-align: center;
}

.quote-container {
  max-width: 800px;
  margin: 0 auto;
}

/* top label */
.quote-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: #7a8774;
  margin-bottom: 30px;
}

/* main text */
.quote-text {
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  color: #243424;
  line-height: 1.4;
  font-size: clamp(28px, 4vw, 52px);
}

/* script middle line */
.quote-text .script {
  display: block;
  font-family: 'Allura', cursive;
  font-style: italic;
  color: #8fa089;
  margin: -10px;
  font-size: clamp(32px, 7vw, 96px);
  text-align:center;
}
.timeline {
  background: #f5f1ea;
  padding: 80px 20px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.timeline-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  color: #243424;
}

.timeline-range {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  color: #8a9485;
}

/* GRID */
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #cfc6b8;
  max-width: 1100px;
  margin: 0 auto;
}

.timeline-item {
  padding: 40px;
  border-bottom: 1px solid #cfc6b8;
  border-right: 1px solid #cfc6b8;
}

/* remove extra borders */
.timeline-item:nth-child(2n) {
  border-right: none;
}
.timeline-item:nth-last-child(-n+2) {
  border-bottom: none;
}

/* typography */
.year {
  font-family: 'Allura', cursive;
  font-size: clamp(22px, 3vw, 30px);
  color: #8fa089;
  display: block;
  margin-bottom: 10px;
}

.timeline-item h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  color: #243424;
  margin-bottom: 10px;
}

.timeline-item p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #5f6b5f;
  line-height: 1.6;
}

/* MOBILE */
@media (max-width: 768px) {
  .timeline-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

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

  .timeline-item {
    border-right: none;
  }

  .timeline-item:not(:last-child) {
    border-bottom: 1px solid #cfc6b8;
  }
}
.nb-founder-story{
  background:#2f3e2f;
  padding:120px 20px;
  position:relative;
  overflow:hidden;
}

.nb-founder-container{
  max-width:1100px;
  margin:0 auto;
}

.nb-founder-content{
  max-width:850px;
  margin:0 auto;
  text-align:center;
}

.nb-founder-label{
  display:inline-block;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:#F6F2EC;
  opacity:.7;
  margin-bottom:22px;
  font-family:'Montserrat', sans-serif;
}

.nb-founder-heading{
  font-family:'Playfair Display', serif;
  font-size:58px;
  line-height:1.15;
  color:#F6F2EC;
  font-weight:500;
  margin-bottom:45px;
}

.nb-belief-script{
  font-family:'Allura', cursive;
  font-size:82px;
  color:#d8c3a5;
  font-weight:400;
}

.nb-founder-text p{
  font-size:17px;
  line-height:1.95;
  color:#F6F2EC;
  opacity:.88;
  margin-bottom:24px;
  font-family:'Montserrat', sans-serif;
  font-weight:300;
}

.nb-founder-highlight{
  font-size:24px !important;
  line-height:1.5 !important;
  font-weight:600 !important;
  color:#ffffff !important;
  margin:45px 0 !important;
  font-family:'Playfair Display', serif !important;
}

.nb-founder-signature{
/*   display:flex; */
  align-items:center;
  gap:14px;
  margin-top:50px;
  flex-wrap:wrap;
}

.nb-founder-line{
  width:45px;
  height:1px;
  background:#F6F2EC;
  opacity:.5;
}

.nb-founder-name{
  font-family:'Allura', cursive;
  font-size:34px;
  color:#F6F2EC;
}

.nb-founder-role{
  font-size:11px;
  letter-spacing:4px;
  color:#F6F2EC;
  opacity:.7;
  font-family:'Montserrat', sans-serif;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

  .nb-founder-story{
    padding:90px 24px;
  }

  .nb-founder-heading{
    font-size:46px;
  }

  .nb-belief-script{
    font-size:68px;
  }

}

@media(max-width:767px){

  .nb-founder-story{
    padding:75px 18px;
  }

  .nb-founder-heading{
    font-size:34px;
    line-height:1.25;
    margin-bottom:30px;
  }

  .nb-belief-script{
    font-size:52px;
  }

  .nb-founder-text p{
    font-size:15px;
    line-height:1.85;
  }

  .nb-founder-highlight{
    font-size:21px !important;
  }

  .nb-founder-signature{
    margin-top:35px;
    gap:10px;
  }

  .nb-founder-name{
    font-size:28px;
  }

}

@media(max-width:480px){

  .nb-founder-heading{
    font-size:29px;
  }

  .nb-belief-script{
    font-size:44px;
  }

  .nb-founder-text p{
    font-size:14px;
  }

}

.luxury-hero{
display:grid;
grid-template-columns:50% 50%;
min-height:100vh;
background:#f5f1ea;
overflow:hidden;
align-items:center;
}

/* LEFT SIDE */

.luxury-hero__left{
padding:120px 60px 60px 80px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
background:#f5f1ea;
}

/* RIGHT IMAGE */

.luxury-hero__right{
height:100vh;
overflow:hidden;
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

.luxury-hero__right img{
width:100%;
height:100vh;
object-fit:cover;
object-position:center;
display:block;
}

/* LOGO */

.logo{
margin-bottom:90px;
color:#183126;
}

.logo__script{
font-family:'Dancing Script',cursive;
font-size:72px;
line-height:1;
font-weight:600;
color:#183126;
}

.logo__sub{
display:flex;
align-items:center;
gap:12px;
margin-top:8px;
}

.logo__sub .line{
width:28px;
height:1px;
background:#183126;
}

.logo__name{
font-family:'Cormorant Garamond',serif;
font-size:24px;
letter-spacing:8px;
color:#183126;
}

.logo__tag{
font-size:11px;
letter-spacing:5px;
margin-top:10px;
padding-left:42px;
color:#183126;
}

/* HERO CONTENT */

.hero__content{
max-width:620px;
width:100%;
}

.hero__content h1{
font-family:'Cormorant Garamond',serif;
font-weight:500;
font-size:72px;
line-height:1.08;
color:#183126;
margin-bottom:28px;
letter-spacing:-1px;
max-width:580px;
}

.divider{
width:90px;
height:1px;
background:#183126;
margin-bottom:35px;
}

.hero__content p{
font-size:18px;
line-height:1.9;
color:#4c4c4c;
margin-bottom:36px;
max-width:500px;
}

/* FORM */

.signup{
display:flex;
width:100%;
max-width:560px;
gap:10px;
background:transparent;
border:none;
overflow:visible;
}

.signup input{
flex:1;
min-width:0;
height:52px;
padding:0 16px;
border:1px solid #d8d2c6;
background:#fff;
font-size:14px;
outline:none;
font-family:inherit;
color:#2b2b2b;
}

.signup input::placeholder{
color:#9a958c;
font-size:13px;
}

.signup button{
width:220px;
height:52px;
background:#183126;
border:none;
color:#fff;
font-size:11px;
letter-spacing:1.5px;
font-weight:600;
cursor:pointer;
font-family:inherit;
transition:all .3s ease;
flex-shrink:0;
}

.signup button:hover{
background:#10241b;
}

/* NOTE */

.note{
margin-top:20px;
font-size:13px;
color:#7a7a7a;
display:flex;
align-items:center;
gap:10px;
}

/* FEATURES */

.features{
background:#fbfaf8;
padding:100px 60px;
text-align:center;
}

.features h2{
font-size:18px;
letter-spacing:5px;
font-weight:500;
color:#183126;
margin-bottom:20px;
}

.features__divider{
width:60px;
height:1px;
background:#cfc8bb;
margin:0 auto 70px;
}

.features__grid{
display:grid;
grid-template-columns:repeat(4,1fr);
max-width:1300px;
margin:auto;
}

.feature{
padding:0 30px;
border-right:1px solid #ece7dc;
}

.feature:last-child{
border-right:none;
}

.feature svg{
width:60px;
height:60px;
margin:0 auto 30px;
stroke:#183126;
}

.feature h3{
font-size:14px;
letter-spacing:2px;
margin-bottom:20px;
color:#183126;
font-weight:600;
}

.feature p{
font-size:15px;
line-height:1.8;
color:#666;
}

/* RESPONSIVE */

@media(max-width:1200px){

.hero__content h1{
font-size:58px;
}

}

@media(max-width:991px){

.luxury-hero{
grid-template-columns:1fr;
min-height:auto;
}

.luxury-hero__left{
padding:29px 24px 50px;
order:1;
}

.luxury-hero__right{
height:auto;
order:2;
}

.luxury-hero__right img{
width:100%;
height:auto;
object-fit:cover;
display:block;
}

.logo{
margin-bottom:50px;
}

.logo__script{
font-size:52px;
}

.logo__name{
font-size:18px;
letter-spacing:5px;
}

.hero__content{
max-width:100%;
}

.hero__content h1{
font-size:46px;
line-height:1.1;
max-width:100%;
}

.hero__content p{
font-size:15px;
line-height:1.8;
}

.signup{
display:flex;
flex-direction:column;
width:100%;
max-width:100%;
gap:10px;
}

.signup input{
width:100%;
height:52px;
padding:0 14px;
border:1px solid #d8d2c6;
font-size:36px;
}

.signup button{
width:100%;
height:52px;
font-size:11px;
letter-spacing:1.5px;
}

.features{
padding:70px 24px;
}

.features__grid{
grid-template-columns:1fr 1fr;
gap:40px 20px;
}

.feature{
border:none;
padding:0;
}

}

@media(max-width:600px){

.luxury-hero__left{
padding:10px 20px 40px;
}

.hero__content h1{
font-size:38px;
}

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

.feature{
border-bottom:1px solid #ece7dc;
padding-bottom:30px;
margin-bottom:30px;
}

.feature:last-child{
border-bottom:none;
margin-bottom:0;
}

}