/* =========================================================
   HOMEPAGE
   ========================================================= */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  /* Reserve room for the fixed header, so on short/zoomed viewports the
     centered hero copy grows the section instead of sliding up behind it. */
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-32);
  overflow: hidden;
  background: radial-gradient(120% 90% at 78% 15%, #4d3627 0%, #2a241d 45%, #1a1611 100%);
  isolation: isolate;
}
.hero__glow {
  position: absolute; inset: -10%;
  background:
    radial-gradient(38% 45% at 82% 28%, rgba(198, 161, 95, 0.35), transparent 70%),
    radial-gradient(30% 35% at 15% 75%, rgba(198, 161, 95, 0.14), transparent 70%);
  z-index: 0;
  animation: hero-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  0% { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.05); }
}
.hero__bottle {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: min(34vw, 420px);
  opacity: 0.92;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,0.45));
  z-index: 1;
  animation: hero-float 7s ease-in-out infinite;
}
@keyframes hero-float { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-54%); } }
@media (max-width: 1279px) { .hero__bottle { width: min(26vw, 300px); right: 4%; } }
@media (max-width: 900px) { .hero__bottle { opacity: 0.18; width: 70vw; right: 50%; transform: translate(50%,-50%); } }

.hero__inner { position: relative; z-index: 2; max-width: 660px; }
/* Above the mobile breakpoint the bottle sits at the right edge, so cap the
   copy column by viewport share too — otherwise at mid widths the headline
   runs into the bottle. */
@media (min-width: 901px) { .hero__inner { max-width: min(660px, 66%); } }
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--c-gold-soft); font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase;
  margin-bottom: var(--sp-6);
}
.hero__eyebrow::before { content: ''; width: 32px; height: 1px; background: currentColor; }
.hero__title {
  font-size: var(--fs-display-xl);
  color: var(--c-text-on-dark);
  letter-spacing: var(--ls-tight);
}
.hero__title em { color: var(--c-gold-soft); font-style: italic; }
.hero__sub {
  margin-top: var(--sp-6);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  color: var(--c-text-on-dark-muted);
  max-width: 46ch;
  line-height: var(--lh-relaxed);
}
.hero__ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-10); }
/* Between 901px and 1279px the copy column is capped to clear the bottle;
   trim the CTA padding so both buttons still sit on one row. */
@media (min-width: 901px) and (max-width: 1279px) {
  .hero__ctas .btn { padding-inline: var(--sp-6); }
}

.hero__scroll {
  position: absolute; left: 50%; bottom: var(--sp-8); transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  color: var(--c-text-on-dark-muted); font-size: var(--fs-2xs); letter-spacing: var(--ls-widest); text-transform: uppercase;
}
.hero__scroll span { width: 1px; height: 34px; background: linear-gradient(var(--c-gold-soft), transparent); animation: hero-scroll-line 2s ease-in-out infinite; }
@keyframes hero-scroll-line { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* ---------- Featured collection tiles ---------- */
/* Shop by Type — Perfume / Attar / Bakhoor tiles */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px) { .type-grid { grid-template-columns: 1fr; } }
.type-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-8); border-radius: var(--r-lg); background: var(--c-ivory-2); border: 1px solid var(--c-line);
  color: var(--c-ink);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease-out);
}
.type-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-gold); border-color: var(--c-gold-soft); }
.type-tile__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: var(--r-full); border: 1px solid var(--c-gold-soft); color: var(--c-gold); background: var(--c-ivory);
}
.type-tile__icon svg { width: 26px; height: 26px; }
.type-tile__name { font-size: var(--fs-display-sm); margin-top: var(--sp-2); }
.type-tile__desc { color: var(--c-text-muted); font-weight: var(--fw-light); }
.type-tile__link { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-gold); }
.type-tile__link svg { width: 16px; height: 16px; }
.type-tile--soon .type-tile__link { color: var(--c-text-faint); }

.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px) { .collection-grid { grid-template-columns: 1fr; } }
.collection-tile {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--sp-8);
  color: var(--c-text-on-dark);
}
/* Photography here is bright and busy, so the scrim has to carry the label
   text on its own rather than relying on whatever happens to be behind it. */
.collection-tile::before {
  content:''; position:absolute; inset:0; z-index: 1;
  background: linear-gradient(180deg, rgba(26,22,17,0.10) 30%, rgba(26,22,17,0.62) 62%, rgba(26,22,17,0.92) 100%);
}
.collection-tile__art { position: absolute; inset: 0; }
.collection-tile__art img,
.collection-tile__art .placeholder-bottle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.collection-tile__art img.is-alt { display: none; }
.collection-tile__content { position: relative; z-index: 2; }
.collection-tile__label { font-size: var(--fs-2xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-gold-soft); }
/* Headings default to ink in base.css; on a dark tile they must take the
   tile's own on-dark colour or they vanish into the photograph. */
.collection-tile__name { font-size: var(--fs-display-sm); margin-top: var(--sp-2); color: inherit; }
.collection-tile__link { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.collection-tile__link svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.collection-tile:hover .collection-tile__link svg { transform: translateX(4px); }

/* ---------- Brand story split ---------- */
.story-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
@media (max-width: 900px) { .story-split { grid-template-columns: 1fr; gap: var(--sp-8); } }
.story-split__media { position: relative; aspect-ratio: 4/5; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(160deg,#e3c491,#8a5a34); }
.story-split__media .placeholder-bottle { position:absolute; inset:0; }
.story-split__text p { margin-top: var(--sp-5); color: var(--c-text-muted); line-height: var(--lh-relaxed); font-weight: var(--fw-light); }
.story-stats { display: flex; gap: var(--sp-10); margin-top: var(--sp-8); }
.story-stat__num { font-family: var(--font-display); font-size: var(--fs-display-sm); color: var(--c-espresso); }
.story-stat__label { font-size: var(--fs-xs); color: var(--c-text-faint); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-top: 4px; }

/* ---------- Discovery teaser ---------- */
.discovery-band {
  background: var(--c-espresso); color: var(--c-text-on-dark);
  border-radius: var(--r-xl); padding: var(--sp-16) var(--sp-10);
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center;
  position: relative; overflow: hidden;
}
@media (max-width: 760px) { .discovery-band { grid-template-columns: 1fr; text-align: left; padding: var(--sp-10) var(--sp-6); } }
.discovery-band::before {
  content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(198,161,95,0.28), transparent 70%);
}
.discovery-band__title { font-size: var(--fs-display-sm); position: relative; z-index: 1; color: inherit; }
.discovery-band__text { color: var(--c-text-on-dark-muted); margin-top: var(--sp-3); max-width: 46ch; font-weight: var(--fw-light); position: relative; z-index: 1; }
.discovery-band__steps { display: flex; gap: var(--sp-6); margin-top: var(--sp-6); position: relative; z-index: 1; flex-wrap: wrap; }
.discovery-band__step { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-on-dark-muted); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.discovery-band__step-num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--c-gold-soft); color: var(--c-gold-soft); display: flex; align-items: center; justify-content: center; font-size: 11px; }

/* ---------- Featured perfume spotlight ---------- */
.spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
@media (max-width: 900px) { .spotlight { grid-template-columns: 1fr; gap: var(--sp-8); } }
.spotlight__media { position: relative; aspect-ratio: 1/1; border-radius: var(--r-xl); overflow: hidden; }
.spotlight__notes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

/* ---------- Why us grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }
.why-card { text-align: left; }
.why-card__icon {
  width: 56px; height: 56px; border-radius: 50%; background: var(--c-champagne);
  display: flex; align-items: center; justify-content: center; color: var(--c-espresso); margin-bottom: var(--sp-5);
}
.why-card__icon svg { width: 24px; height: 24px; }
.why-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-family: var(--font-body); }
.why-card__text { color: var(--c-text-muted); margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-light); line-height: var(--lh-relaxed); }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card { background: var(--c-offwhite); border-radius: var(--r-lg); padding: var(--sp-8); }
.review-card .rating__stars { margin-bottom: var(--sp-4); }
.review-card p.quote { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--c-text); font-weight: var(--fw-light); }
.review-card__author { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }
.review-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c-champagne); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); color: var(--c-espresso); font-weight: var(--fw-bold); }
.review-card__name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.review-card__loc { font-size: var(--fs-xs); color: var(--c-text-faint); }

/* ---------- Editorial band ---------- */
.editorial-band {
  background: var(--c-ivory-2);
  text-align: center;
  padding: var(--sp-24) var(--sp-6);
}
.editorial-band blockquote {
  font-family: var(--font-display); font-style: italic; font-weight: var(--fw-semibold);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  max-width: 800px; margin: 0 auto; color: var(--c-espresso); line-height: 1.4;
}
.editorial-band cite { display: block; margin-top: var(--sp-6); font-style: normal; font-size: var(--fs-xs); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-text-faint); }

/* ---------- Newsletter ---------- */
.newsletter-band { background: var(--c-espresso); color: var(--c-text-on-dark); text-align: center; padding: var(--sp-20) var(--sp-6); }
.newsletter-band h2 { color: var(--c-text-on-dark); font-size: var(--fs-display-sm); }
.newsletter-band p { color: var(--c-text-on-dark-muted); margin-top: var(--sp-3); font-weight: var(--fw-light); }
.newsletter-band form { display: flex; gap: var(--sp-3); max-width: 460px; margin: var(--sp-8) auto 0; }
.newsletter-band input {
  flex: 1; min-height: 52px; padding: 0 var(--sp-5); border-radius: var(--r-full);
  border: 1px solid rgba(243,234,217,0.25); background: rgba(255,255,255,0.06); color: var(--c-text-on-dark);
}
.newsletter-band input::placeholder { color: var(--c-text-on-dark-muted); }
@media (max-width: 480px) { .newsletter-band form { flex-direction: column; } }

/* ---- Custom & inspired teaser ---- */
.custom-band { background: var(--c-espresso); color: var(--c-ivory); padding: var(--sp-20) 0; }
.custom-band__inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-12); align-items: center; }
.custom-band .eyebrow { color: var(--c-gold); }
.custom-band__title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--c-ivory); margin: var(--sp-3) 0 var(--sp-4); }
.custom-band__text { color: rgba(250, 247, 242, 0.78); font-weight: var(--fw-light); line-height: var(--lh-relaxed); max-width: 52ch; }
.custom-band__form { display: flex; gap: var(--sp-3); }
.custom-band__form .input { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .custom-band__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .custom-band__form { flex-direction: column; }
}