/* Colours sampled from the supplied Herb Heaven logo. */
:root {
  --pine: #682828;
  --forest: #401314;
  --gold: #b74535;
  --cream: #f8f3ee;
  --paper: #fffdfb;
  --ink: #341719;
  --muted: #72615e;
  --line: #dfd6d3;
  --blush: #eae7d8;
  --plum: #85463e;
}

.wordmark {
  display: block;
  width: 205px;
  height: 62px;
  background: url('assets/herb-heaven-logo.png') center/contain no-repeat;
  color: transparent!important;
  text-decoration: none;
  font-size: 0!important;
}

.wordmark span, .wordmark i, .wordmark small {
  display: none;
}

.footer-mark {
  filter: brightness(0) invert(1) opacity(.92);
}

.hero:before {
  content: '✦';
  position: absolute;
  right: 11%;
  top: 25%;
  font-size: 70px;
  color: #f1d6d2;
  opacity: .7;
}

.section-cream {
  background: #f8f3ee;
}

.unique {
  position: relative;
}

.unique:after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  height: 42%;
  background: url('https://images.unsplash.com/photo-1631189944771-466264f05965?auto=format&fit=crop&w=900&q=85') center/cover;
  mix-blend-mode: multiply;
  opacity: .24;
}

.unique .wrap {
  position: relative;
  z-index: 1;
}

.testimonials {
  position: relative;
  overflow: hidden;
}

.testimonials-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(64,19,20,.94);
}

.testimonials .wrap {
  position: relative;
  z-index: 2;
}

.contact {
  position: relative;
}

.contact:after {
  content: 'SAFFRON • KAHWA • HONEY • KASHMIR';
  position: absolute;
  right: 0;
  bottom: 75px;
  writing-mode: vertical-rl;
  color: var(--blush);
  font-size: 10px;
  letter-spacing: .25em;
}

.button.green {
  background: var(--pine);
  border-color: var(--pine);
}

@media(max-width:850px) {
  .wordmark {
    width: 155px;
    height: 48px;
  }
  .hero:before, .contact:after {
    display: none;
  }
  .unique:after {
    width: 50%;
    height: 18%;
  }
}
/* Readability and dependable Kashmir photography. */

.nav {
  position: absolute;
  background: transparent;
  color: var(--pine);
}

.nav nav a {
  font-size: 15px;
  font-weight: 600;
}

.nav-cta {
  font-size: 13px;
  border-color: var(--pine);
  background: var(--pine);
  color: #fff;
}

.nav .menu b {
  background: var(--gold);
}

.intro {
  padding-top: 100px;
  padding-bottom: 100px;
}

.intro-img {
  height: 620px;
  background: var(--blush);
}

.intro-copy {
  padding: 38px 0;
  border-top: 3px solid var(--gold);
}

.story {
  padding-top: 95px;
  padding-bottom: 95px;
  background: linear-gradient(90deg,rgba(64,19,20,.98) 0%,rgba(64,19,20,.9) 49%,rgba(64,19,20,.25) 100%),url('https://images.unsplash.com/photo-1631189944256-c42fbe0f56d5?auto=format&fit=crop&w=1600&q=85') center/cover;
}

.story-visual {
  height: 490px;
  background: var(--plum);
}

.heritage-stamp {
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}

.landscape {
  position: relative;
  min-height: 540px;
  overflow: hidden;
}

.landscape-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landscape:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(64,19,20,.43);
}

.landscape>div {
  position: relative;
  z-index: 2;
  padding: 55px 90px;
  background: rgba(64,19,20,.28);
  border: 1px solid rgba(255,255,255,.44);
}

@media(max-width:850px) {
  .nav {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .nav.open {
    background: var(--warm-paper);
    color: var(--pine);
  }
  .nav.open .nav-cta {
    color: #fff;
  }
  .intro-img {
    height: 370px;
  }
  .story {
    background: var(--forest);
  }
  .story-visual {
    height: 330px;
  }
  .landscape>div {
    padding: 35px 25px;
  }
}
/* Balanced editorial layouts and a subtle hand-crafted motif for light surfaces. */

body {
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px,rgba(104,40,40,.08) 1px,transparent 1.2px);
  background-size: 24px 24px;
}

.hero, .story, .landscape, .testimonials, footer {
  background-color: transparent;
}

.intro, .experience, .collections, .quality, .contact, .about-content {
  position: relative;
  background: rgba(255,253,251,.93);
}

.intro:before, .experience:before, .collections:before, .quality:before, .contact:before, .about-content:before {
  content: '✦  ·  ✦';
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(104,40,40,.2);
  font-size: 13px;
  letter-spacing: 16px;
}

.intro {
  grid-template-columns: 1.08fr .92fr;
  gap: 9%;
  align-items: center;
  padding: 115px 56px;
  margin-top: 0;
}

.intro-img {
  height: 500px;
  border: 14px solid #fff;
  box-shadow: 20px 22px 0 var(--blush),0 16px 40px rgba(52,23,25,.16);
}

.intro-copy {
  padding: 25px 0 25px 15px;
  border-top: 0;
  border-left: 3px solid var(--gold);
}

.plum-button {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
  margin-top: 20px;
}

.plum-button:hover, .legacy-button:hover {
  background: var(--gold);
  border-color: var(--gold);
}

.story {
  padding: 82px 0;
  background: var(--forest);
}

.story-grid {
  grid-template-columns: .9fr 1.1fr;
  gap: 8%;
  align-items: center;
}

.story-copy {
  max-width: 440px;
}

.story-copy h2 {
  font-size: clamp(3.2rem,4.6vw,4.8rem);
  max-width: 420px;
}

.story-copy p:not(.eyebrow) {
  max-width: 420px;
}

.story-visual {
  height: 390px;
  border: 12px solid rgba(255,255,255,.12);
  box-shadow: 20px 20px 0 rgba(183,69,53,.55);
}

.heritage-stamp {
  width: 145px;
  height: 145px;
  bottom: -45px;
  left: -42px;
}

.heritage-stamp strong {
  font-size: 24px;
}

.legacy-button {
  background: transparent;
  border-color: #dbc389;
  color: #fff;
  margin-top: 22px;
}

.collection-grid {
  grid-template-columns: 1.45fr 1fr 1fr;
  grid-template-rows: 370px 330px;
}

.care {
  display: block;
}

.collections {
  padding-top: 85px;
}

.legacy-hero {
  position: relative;
  overflow: hidden;
}

.legacy-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legacy-hero:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(64,19,20,.54);
}

.legacy-hero>*:not(.legacy-hero-image) {
  position: relative;
  z-index: 2;
}

@media(max-width:850px) {
  .intro {
    padding: 75px 22px;
    gap: 45px;
  }
  .intro:before, .experience:before, .collections:before, .quality:before, .contact:before, .about-content:before {
    top: 22px;
  }
  .intro-copy {
    padding-left: 16px;
  }
  .intro-img {
    height: 350px;
    border-width: 8px;
    box-shadow: 12px 12px 0 var(--blush),0 14px 30px rgba(52,23,25,.14);
  }
  .story {
    padding: 70px 0;
  }
  .story-grid {
    gap: 38px;
  }
  .story-copy h2 {
    max-width: 100%;
    font-size: 3.1rem;
  }
  .story-visual {
    height: 275px;
    border-width: 7px;
    box-shadow: 10px 12px 0 rgba(183,69,53,.5);
  }
  .heritage-stamp {
    left: 14px;
    bottom: -32px;
    width: 120px;
    height: 120px;
  }
  .collection-grid {
    display: flex;
  }
  .care {
    display: block;
  }
  .collections {
    padding-top: 70px;
  }
}
/* Final sizing correction: no photo may stretch the story grid. */

.story-grid {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 65px;
}

.story-copy {
  min-width: 0;
  max-width: 480px;
}

.story-copy h2 {
  font-size: clamp(2.9rem,4vw,4.25rem);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.story-visual {
  min-width: 0;
  width: 100%;
  max-width: 570px;
  height: 330px;
  justify-self: end;
  overflow: visible;
}

.story-visual img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.heritage-stamp {
  left: -36px;
  bottom: -36px;
  width: 130px;
  height: 130px;
}

.heritage-stamp strong {
  font-size: 22px;
}

.legacy-button, .plum-button {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: 0 8px 18px rgba(183,69,53,.22);
}

.legacy-button:hover, .plum-button:hover {
  background: #922f28;
  border-color: #922f28;
}
/* A low-contrast Khatamband-inspired diamond texture, visible on all light sections. */

.intro, .experience, .collections, .quality, .contact, .about-content {
  background-color: #fffdfb;
  background-image: linear-gradient(30deg,rgba(104,40,40,.055) 12%,transparent 12.5%,transparent 87%,rgba(104,40,40,.055) 87.5%,rgba(104,40,40,.055)),linear-gradient(150deg,rgba(104,40,40,.055) 12%,transparent 12.5%,transparent 87%,rgba(104,40,40,.055) 87.5%,rgba(104,40,40,.055));
  background-size: 38px 66px;
  background-position: 0 0,19px 33px;
}

.intro:before, .experience:before, .collections:before, .quality:before, .contact:before, .about-content:before {
  background: #fffdfb;
  padding: 0 15px;
}

@media(max-width:850px) {
  .story-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .story-copy h2 {
    font-size: 3rem;
  }
  .story-visual {
    max-width: 100%;
    justify-self: stretch;
    height: 245px;
  }
  .heritage-stamp {
    left: 18px;
    bottom: -30px;
  }
}
/* Clean light surfaces and fine dividers — no background pattern. */

:root {
  --antique-gold: #c6a36a;
  --deep-gold: #9b783f;
  --warm-paper: #f7f0e6;
}

body {
  background: #fffdfb;
  background-image: none;
}

.intro, .experience, .collections, .quality, .contact, .about-content {
  background: #fffdfb;
  background-image: none;
}

.intro:before, .experience:before, .collections:before, .quality:before, .contact:before, .about-content:before {
  display: none;
}

main>section:not(.hero) {
  border-top: 1px solid rgba(155,120,63,.42);
}

main>section.intro {
  border-top: 0;
}

.section-cream {
  border-top: 1px solid rgba(155,120,63,.42);
  border-bottom: 1px solid rgba(155,120,63,.42);
}
/* Warmer, editorial About Us composition. */

.intro {
  width: min(1320px,calc(100% - 72px));
  padding: 86px 70px;
  background: var(--warm-paper);
  grid-template-columns: minmax(360px,.92fr) minmax(360px,1.08fr);
  gap: 82px;
}

.intro:after {
  content: 'HERB HEAVEN  •  FROM KASHMIR  •  HERB HEAVEN  •  FROM KASHMIR';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(104,40,40,.38);
}

.intro-img {
  height: 440px;
  border: 10px solid var(--antique-gold);
  box-shadow: 18px 18px 0 rgba(155,120,63,.2),0 15px 35px rgba(52,23,25,.12);
}

.intro-copy {
  position: relative;
  padding: 27px 30px;
  border: 0;
  background: rgba(255,253,251,.72);
}

.intro-copy:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 82px;
  height: 2px;
  background: var(--antique-gold);
}

.intro-copy h2 {
  font-size: clamp(3rem,4.3vw,4.65rem);
}
/* Antique-gold heritage accents. */

.story-visual {
  border: 10px solid var(--antique-gold);
  box-shadow: 18px 18px 0 rgba(155,120,63,.42);
}

.heritage-stamp {
  background: var(--antique-gold);
  color: var(--forest);
  box-shadow: 0 12px 28px rgba(0,0,0,.26);
}

.legacy-button, .plum-button {
  background: var(--antique-gold);
  border-color: var(--antique-gold);
  color: var(--forest);
  box-shadow: 0 8px 18px rgba(155,120,63,.25);
}

.legacy-button:hover, .plum-button:hover {
  background: var(--deep-gold);
  border-color: var(--deep-gold);
  color: #fff;
}

@media(max-width:850px) {
  .intro {
    width: calc(100% - 32px);
    padding: 55px 25px;
    grid-template-columns: 1fr;
    gap: 42px;
  }
  .intro:after {
    display: none;
  }
  .intro-img {
    height: 320px;
    border-width: 7px;
    box-shadow: 10px 10px 0 rgba(155,120,63,.18),0 12px 30px rgba(52,23,25,.12);
  }
  .intro-copy {
    padding: 22px 7px;
    background: transparent;
  }
  .story-visual {
    border-width: 7px;
    box-shadow: 10px 12px 0 rgba(155,120,63,.42);
  }
}
/* Remove the out-of-place decorative photo; retain a composed royal About panel. */

.unique:after {
  display: none;
}

.intro {
  background: linear-gradient(112deg,#401314 0%,#5d2221 58%,#71443b 100%);
  box-shadow: 0 18px 50px rgba(64,19,20,.16);
}

.intro-copy {
  background: transparent;
  color: #fff;
}

.intro-copy .eyebrow {
  color: #dfc58f;
}

.intro-copy h2 {
  color: #fff;
}

.intro-copy p:not(.eyebrow) {
  color: #f0ebe8;
}

.intro-copy:before {
  background: var(--antique-gold);
}

.intro:after {
  color: rgba(255,255,255,.42);
}

.intro-img {
  border-color: var(--antique-gold);
  box-shadow: 18px 18px 0 rgba(198,163,106,.26),0 16px 36px rgba(0,0,0,.25);
}
/* Desktop editorial collection map: Skin Care is an intentional fifth, full-width feature. */

.collection-grid {
  grid-template-columns: 1.45fr 1fr 1fr;
  grid-template-rows: 370px 330px 310px;
  grid-auto-rows: 310px;
}

.care {
  grid-column: 2 / 4;
  grid-row: 3;
  display: block;
}

.collections {
  padding-bottom: 125px;
}
/* Accessible, visible mobile close control. */

@media(max-width:850px) {
  .menu {
    position: relative;
    z-index: 7;
    height: 38px;
  }
  .nav.open .menu {
    position: absolute;
    right: 22px;
    top: 20px;
  }
  .nav.open .menu b:first-child {
    transform: translateY(3.5px) rotate(45deg);
  }
  .nav.open .menu b:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
  }
  .nav.open .menu:after {
    content: 'Close';
    position: absolute;
    right: 40px;
    top: 3px;
    color: var(--pine);
    font: 600 10px 'DM Sans';
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .intro {
    background: linear-gradient(135deg,#401314,#682828);
  }
  .collection-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .care {
    grid-column: auto;
    grid-row: auto;
  }
  .collections {
    padding-bottom: 85px;
  }
}
/* Collections: five equally intentional expressions, not a forced final card. */

@media(min-width:851px) {
  .collection-grid {
    grid-template-columns: repeat(6,minmax(0,1fr));
    grid-template-rows: 330px 330px;
    grid-auto-rows: 330px;
    gap: 18px;
  }
  .collection, .saffron, .kahwa, .honey, .fruits, .care {
    grid-row: auto;
  }
  .saffron, .kahwa, .honey {
    grid-column: span 2;
  }
  .fruits, .care {
    grid-column: span 3;
  }
  .care {
    display: block;
  }
  .collection-info {
    left: 28px;
    bottom: 24px;
  }
  .collection-info h3 {
    font-size: 2rem;
  }
  .collections {
    padding-bottom: 105px;
  }
}
/* Complementary brand sections: royal heritage and warm, guiding storytelling. */

.intro {
  background: linear-gradient(112deg,#341011 0%,#5b1d1e 57%,#774540 100%);
}

.unique.section-cream {
  background: #eee4d3;
  background-image: linear-gradient(90deg,rgba(198,163,106,.21) 1px,transparent 1px),linear-gradient(rgba(198,163,106,.21) 1px,transparent 1px);
  background-size: 46px 46px;
}

.unique .section-heading {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0 45px;
}

.unique .eyebrow {
  color: #8d6832;
}

.values {
  border-color: rgba(155,120,63,.6);
}

.values article {
  padding: 32px 28px 22px;
  background: rgba(255,253,251,.48);
  border-right-color: rgba(155,120,63,.45);
}

.values h3 {
  color: var(--forest);
}

@media(max-width:850px) {
  .unique.section-cream {
    background: #eee4d3;
  }
  .values article {
    background: rgba(255,253,251,.35);
  }
}
/* Finished interior pages, using the same royal plum and antique-gold identity. */

.inner-page {
  background: #fffdfb;
}

.about-hero {
  padding: 155px 0 100px;
  color: #fff;
}


.about-hero h1 {
  max-width: 860px;
  margin-bottom: 22px;
}

.about-hero p:last-child {
  max-width: 480px;
  color: #eee5e1;
}

.about-lead {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 120px;
  padding: 120px 0;
}

.about-lead h2 {
  margin: 0;
}

.about-lead>div:last-child {
  font: 20px/1.75 'Playfair Display';
  color: #583b3a;
}

.about-number {
  color: #fff;
  background: #401314;
  border: 0!important;
  padding: 75px 0;
}

.about-number .wrap {
  display: flex;
  align-items: baseline;
  gap: 22px;
}

.about-number span {
  font-size: 12px;
  letter-spacing: .18em;
  color: #dfc58f;
}

.about-number strong {
  font: clamp(4rem,9vw,8.5rem)/.8 'Playfair Display';
  color: var(--antique-gold);
}

.about-number p {
  margin: 0;
  color: #e8dddc;
}

.about-pillars {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 90px;
  padding: 120px 0;
}

.about-pillars h2 {
  margin: 0;
}

.pillar-list {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 0;
  border-top: 1px solid var(--antique-gold);
}

.pillar-list article {
  padding: 25px 20px;
  border-right: 1px solid var(--line);
}

.pillar-list article:last-child {
  border: 0;
}

.pillar-list span {
  color: #a37c3e;
  font-size: 10px;
  letter-spacing: .15em;
}

.pillar-list h3 {
  font-size: 1.5rem;
  margin: 32px 0 10px;
}

.pillar-list p {
  font-size: 13px;
  color: var(--muted);
}

.about-closing {
  position: relative;
  padding: 120px 0;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.about-closing-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-closing-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(52,16,17,.88);
}

.about-closing .wrap {
  position: relative;
  z-index: 2;
}

.about-closing h2 {
  margin-bottom: 35px;
}












@media(max-width:850px) {
  .about-hero {
    padding: 130px 0 70px;
  }
  .about-lead, .about-pillars {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 75px 0;
  }
  .about-lead>div:last-child {
    font-size: 19px;
  }
  .about-number {
    padding: 55px 0;
  }
  .about-number .wrap {
    display: block;
  }
  .about-number strong {
    display: block;
    margin: 11px 0 20px;
  }
  .pillar-list {
    grid-template-columns: 1fr;
  }
  .pillar-list article {
    border-right: 0;
    border-bottom: 1px solid rgba(155,120,63,.45);
  }
  .about-closing {
    padding: 80px 0;
  }
}
/* Deliberately different homepage section identities. */

.intro {
  background: #391210;
  background-image: radial-gradient(circle at 85% 15%,rgba(198,163,106,.23),transparent 30%),linear-gradient(135deg,#310b0e 0%,#5a1619 62%,#703b33 100%);
}

.unique.section-cream {
  background: #f2e6cf;
  background-image: none;
}

.unique.section-cream .section-heading {
  background: #fff9ef;
  padding: 28px 34px;
  border: 1px solid rgba(155,120,63,.48);
  box-shadow: 8px 8px 0 rgba(198,163,106,.28);
}

.unique .values article {
  background: #fff9ef;
  border-top: 4px solid var(--antique-gold);
  box-shadow: 0 10px 22px rgba(75,46,39,.08);
}
/* High-contrast site footer used on every page. */

.site-footer, footer {
  background: #1d0809!important;
  color: #fff!important;
  border-top: 5px solid var(--antique-gold);
}

.site-footer .footer-grid {
  padding-top: 62px;
}

.site-footer .footer-grid p {
  color: #e7dfdc!important;
}

.site-footer h4 {
  color: #e2c98f!important;
}

.site-footer a:not(.wordmark), .site-footer .footer-email {
  color: #fff!important;
}

.site-footer a:not(.wordmark):hover {
  color: #e2c98f!important;
}

.site-footer .copyright {
  color: #d8cdc9!important;
  border-top-color: rgba(226,201,143,.4)!important;
}

.site-footer .copyright span {
  color: #e2c98f;
}

.site-footer .footer-mark {
  filter: brightness(0) invert(1) opacity(1);
}
/* Homepage contrast reset: About is light and regal; Legacy remains the only plum story band. */

#about.intro {
  background: #fbf6ec;
  background-image: linear-gradient(135deg,rgba(198,163,106,.12) 25%,transparent 25%),linear-gradient(45deg,rgba(198,163,106,.12) 25%,transparent 25%),linear-gradient(135deg,transparent 75%,rgba(198,163,106,.12) 75%),linear-gradient(45deg,transparent 75%,rgba(198,163,106,.12) 75%);
  background-size: 44px 44px;
  background-position: 0 0,0 22px,22px -22px,-22px 0;
  border: 1px solid rgba(155,120,63,.38);
  box-shadow: 0 20px 40px rgba(64,19,20,.09);
}

#about.intro .intro-copy {
  background: rgba(255,253,248,.93);
  color: var(--ink);
  padding: 48px 45px;
  border-left: 0;
  box-shadow: 0 16px 32px rgba(69,62,42,.1);
}

#about.intro .intro-copy .eyebrow {
  color: var(--deep-gold);
}

#about.intro .intro-copy h2 {
  color: var(--forest);
}

#about.intro .intro-copy p:not(.eyebrow) {
  color: #68544f;
}

#about.intro .intro-img {
  border-color: var(--antique-gold);
  box-shadow: 18px 18px 0 rgba(133,70,62,.22),0 16px 36px rgba(52,23,25,.16);
}

#about.intro:after {
  color: rgba(104,40,40,.56);
}
/* Legacy page detailing has its own unmistakable Khatamband wood-panel language. */

#unique.unique.section-cream {
  position: relative;
  isolation: isolate;
  background-color: #ead9b8;
  background-image: linear-gradient(30deg,transparent 24%,rgba(91,54,34,.26) 25%,rgba(91,54,34,.26) 26%,transparent 27%,transparent 74%,rgba(91,54,34,.26) 75%,rgba(91,54,34,.26) 76%,transparent 77%),linear-gradient(150deg,transparent 24%,rgba(91,54,34,.26) 25%,rgba(91,54,34,.26) 26%,transparent 27%,transparent 74%,rgba(91,54,34,.26) 75%,rgba(91,54,34,.26) 76%,transparent 77%);
  background-size: 60px 104px;
  background-position: 0 0,30px 52px;
  border-top: 9px solid #6e422f;
  border-bottom: 9px solid #6e422f;
}

#unique.unique.section-cream:before {
  content: '';
  position: absolute;
  inset: 25px;
  border: 1px solid rgba(91,54,34,.48);
  pointer-events: none;
  z-index: -1;
}

#unique.unique.section-cream .section-heading {
  background: #fff8e9;
  border: 3px double #9b783f;
  box-shadow: 12px 12px 0 rgba(104,62,42,.26);
}

#unique.unique.section-cream .values {
  gap: 14px;
  border: 0;
}

#unique.unique.section-cream .values article {
  border: 1px solid #b08a52;
  border-top: 7px solid #6e422f;
  background: #fff8e9;
  box-shadow: 8px 10px 0 rgba(104,62,42,.19);
}

@media(max-width:850px) {
  #about.intro .intro-copy {
    padding: 30px 24px;
  }
  #unique.unique.section-cream {
    background-size: 42px 73px;
    border-width: 5px;
  }
  #unique.unique.section-cream:before {
    inset: 12px;
  }
  #unique.unique.section-cream .values {
    gap: 16px;
  }
  #unique.unique.section-cream .values article {
    box-shadow: 5px 6px 0 rgba(104,62,42,.16);
  }
}
/* Calm solid colour fields: the pattern has been removed from both sections. */

#about.intro {
  background: #fff!important;
  background-image: none!important;
  border-color: #e5ddd4;
  box-shadow: none;
}

#about.intro .intro-copy {
  background: #fffdfa;
}

#about.intro:after {
  color: #8a6e5d;
}

#unique.unique.section-cream {
  background: #f2ecea!important;
  background-image: none!important;
  border-top-color: #a68b77;
  border-bottom-color: #a68b77;
}

#unique.unique.section-cream:before {
  display: none;
}

#unique.unique.section-cream .section-heading {
  background: #fff;
  box-shadow: 12px 12px 0 rgba(133,70,62,.15);
}

#unique.unique.section-cream .values article {
  background: #fff;
  box-shadow: 8px 10px 0 rgba(133,70,62,.12);
  border-color: #c7b0a6;
}
/* Sits on the same elegant deep-plum ground as the footer. */

#unique.unique.section-cream {
  background: #1d0809!important;
  border-top-color: #c6a36a;
  border-bottom-color: #c6a36a;
}

#unique.unique.section-cream .section-heading {
  background: #fffdfa;
  border-color: #c6a36a;
  outline-color: #eae7d8;
  box-shadow: 8px 9px 0 rgba(198,163,106,.24);
}

#unique.unique.section-cream .section-heading .eyebrow {
  color: #9b783f;
}

#unique.unique.section-cream .values article {
  background: #fffdfa;
  border-color: #c6a36a;
  border-top-color: #c6a36a;
  box-shadow: 6px 8px 0 rgba(198,163,106,.18);
}

.social-links {
  display: flex!important;
  gap: 9px;
  margin-top: 17px;
}

.social-links a {
  display: grid!important;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0!important;
  border: 1px solid rgba(226,201,143,.68);
  border-radius: 50%;
  color: #fff!important;
  font-size: 12px!important;
  font-weight: 600!important;
  letter-spacing: 0!important;
  transition: .2s;
}

.social-links a:hover {
  background: #c6a36a;
  color: #1d0809!important;
  border-color: #c6a36a;
}

.footer-email {
  display: block;
  margin: 6px 0;
  color: #fff;
  font-size: 12px;
}
/* Quieter image depth and a centred title plaque. */

#about.intro .intro-img {
  box-shadow: 7px 8px 0 rgba(133,70,62,.11),0 7px 18px rgba(52,23,25,.09);
}

.story-visual {
  box-shadow: 7px 8px 0 rgba(155,120,63,.2),0 7px 18px rgba(0,0,0,.12);
}

#unique.unique.section-cream .section-heading {
  width: min(850px,calc(100% - 48px));
  margin: 0 auto 62px!important;
  padding: 38px 52px 42px;
  text-align: center;
  border: 1px solid #a68b77;
  outline: 1px solid #cbbbb1;
  outline-offset: -6px;
  box-shadow: 7px 8px 0 rgba(133,70,62,.13);
}

#unique.unique.section-cream .section-heading .eyebrow {
  margin-bottom: 16px;
  text-align: center;
  color: #947e63;
}

#unique.unique.section-cream .section-heading h2 {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.04;
}

#unique.unique.section-cream .section-heading h2:after {
  content: '';
  display: block;
  width: 70px;
  height: 2px;
  margin: 26px auto 0;
  background: linear-gradient(90deg,transparent,#a68b77,transparent);
}

@media(max-width:850px) {
  #about.intro .intro-img {
    box-shadow: 5px 6px 0 rgba(133,70,62,.09),0 6px 14px rgba(52,23,25,.08);
  }
  #unique.unique.section-cream .section-heading {
    width: calc(100% - 28px);
    padding: 30px 20px 32px;
    margin-bottom: 38px!important;
  }
  #unique.unique.section-cream .section-heading h2 {
    font-size: 2.85rem;
  }
}
/* Hero carousel. */

.hero-slider {
  background: var(--warm-paper);
  color: var(--ink);
  overflow: hidden;
}

.hero-slides, .hero-slide {
  height: 100%;
}

.hero-slide {
  display: flex;
  align-items: center;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .75s ease,visibility .75s;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
}

.hero-slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-slide picture {
  display: contents;
}

.hero-slide .hero-content {
  position: relative;
  z-index: 1;
}

.hero-slider-controls {
  position: absolute;
  z-index: 2;
  left: 10vw;
  bottom: 39px;
  display: flex;
  gap: 16px;
  align-items: center;
}

.hero-arrow {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,.65);
  background: transparent;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.hero-arrow:hover {
  background: #c6a36a;
  border-color: #c6a36a;
  color: #1d0809;
}

.hero-dots {
  display: flex;
  gap: 8px;
}

.hero-dots button {
  width: 26px;
  height: 2px;
  border: 0;
  background: rgba(255,255,255,.4);
  padding: 0;
  cursor: pointer;
}

.hero-dots button.active {
  background: #fff;
}

.hero-slider .scroll-note {
  bottom: 40px;
}

@media(max-width:850px) {
  .hero-slider-controls {
    left: 22px;
    bottom: 25px;
  }
  .hero-slider .scroll-note {
    display: none;
  }
  .hero-slide .hero-content {
    margin-left: 22px;
  }
  .hero-dots button {
    width: 18px;
  }
}
/* Keep carousel controls clear of slide copy and CTAs. */

.hero-slider-controls {
  left: auto;
  right: 7vw;
  bottom: 42px;
  z-index: 4;
  gap: 12px;
  padding: 9px 11px;
  background: rgba(29,8,9,.38);
  backdrop-filter: blur(5px);
}

@media(max-width:850px) {
  .hero-slider-controls {
    left: auto;
    right: 18px;
    bottom: 20px;
    padding: 6px 8px;
  }
  .hero-arrow {
    width: 32px;
    height: 32px;
  }
}
/* On mobile, the tall portrait photography (blank space up top, product lower down)
   is used exactly like the desktop treatment: one continuous full-bleed image with
   copy overlaid on top, just anchored higher to sit within that upper blank area. */

@media(max-width:850px) {
  .hero-slide {
    align-items: flex-start;
  }
  .hero-slide .hero-content {
    margin-left: 22px;
    margin-top: 115px;
  }
  .hero-slide h1 {
    font-size: 2.6rem;
    margin-bottom: 16px;
  }
  .hero-slide .hero-copy {
    margin: 14px 0;
  }
  .hero-slide .actions {
    margin-top: 16px;
  }
}
/* Opening mark: a brief, refined brand reveal. */

.site-loader {
  position: fixed;
  z-index: 99;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  background: #fff;
  transition: opacity .45s ease,visibility .45s ease;
}

.site-loader:before, .site-loader:after {
  display: none;
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-mark {
  position: relative;
  width: min(245px,58vw);
  padding: 12px 8px;
}

.loader-mark img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: translateY(5px);
  animation: loaderLogo .5s ease .08s forwards;
}

.loader-mark span {
  position: absolute;
  bottom: 1px;
  left: 25%;
  width: 50%;
  height: 1px;
  background: #682828;
  transform: scaleX(0);
  transform-origin: center;
  animation: loaderLine .5s ease .38s forwards;
}

.site-loader p {
  position: relative;
  margin: 14px 0 0;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2em;
  color: #7f5a55;
  opacity: 0;
  animation: loaderCopy .4s ease .5s forwards;
}

@keyframes loaderLogo {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderLine {
  to {
    transform: scaleX(1);
  }
}

@keyframes loaderCopy {
  to {
    opacity: 1;
  }
}

@media(prefers-reduced-motion:reduce) {
  .site-loader, .site-loader * {
    animation: none!important;
    transition: none!important;
  }
  .loader-mark img, .site-loader p {
    opacity: 1;
  }
  .loader-mark span {
    transform: scaleX(1);
  }
}
/* Mobile collection reset: one card at a time, never overlapping. */

@media(max-width:850px) {
  .collections {
    padding: 72px 0 78px;
  }
  .collection-grid {
    display: flex!important;
    flex-direction: column!important;
    gap: 18px!important;
    grid-template-columns: none!important;
    grid-template-rows: none!important;
  }
  .collection, .saffron, .kahwa, .honey, .fruits, .care {
    display: block!important;
    position: relative!important;
    grid-column: auto!important;
    grid-row: auto!important;
    min-height: 0!important;
    height: 355px!important;
    width: 100%!important;
    flex: none!important;
  }
  .saffron, .kahwa {
    height: 390px!important;
  }
  .collection img {
    position: absolute!important;
    inset: 0!important;
    width: 100%!important;
    height: 100%!important;
    object-fit: cover!important;
  }
  .collection-info {
    left: 24px!important;
    right: 24px!important;
    bottom: 23px!important;
  }
  .collection-info h3 {
    font-size: 2rem!important;
  }
  .collection-info p {
    font-size: 13px!important;
  }
  .collection-info a {
    font-size: 10px!important;
  }
}
/* Botanical, layered motifs inspired by the reference's editorial treatment.
   These remain specific to Herb Heaven: saffron-petal curves and valley contours. */

:root {
  --motif-plum: rgba(104,40,40,.12);
  --motif-gold: rgba(198,163,106,.28);
}

.hero-slider:after {
  content: '';
  position: absolute;
  z-index: 2;
  right: -38px;
  bottom: -42px;
  width: 310px;
  height: 310px;
  pointer-events: none;
  opacity: .8;
  background: radial-gradient(ellipse at 50% 100%,transparent 0 43%,rgba(226,201,143,.5) 43.5% 44%,transparent 44.5% 54%,rgba(226,201,143,.35) 54.5% 55%,transparent 55.5% 66%,rgba(226,201,143,.23) 66.5% 67%,transparent 67.5%);
  transform: rotate(-20deg);
}

.hero-slider-controls {
  z-index: 5;
}

.intro, .experience, .collections, .quality, .contact, .about-content, .about-lead, .about-pillars {
  isolation: isolate;
}

.intro:before, .experience:before, .collections:before, .quality:before, .contact:before, .about-content:before, .about-lead:before, .about-pillars:before {
  content: '';
  display: block!important;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.intro:before {
  width: 160px;
  height: 160px;
  left: -45px;
  bottom: 26px;
  border: 1px solid var(--motif-gold);
  border-radius: 50% 0 50% 50%;
  transform: rotate(28deg);
  box-shadow: 20px -20px 0 -19px var(--motif-gold),40px -40px 0 -39px var(--motif-gold);
}

.experience:before {
  width: 180px;
  height: 130px;
  right: -55px;
  top: 38px;
  background: repeating-radial-gradient(ellipse at 0 100%,transparent 0 19px,var(--motif-plum) 20px 21px,transparent 22px 39px);
  transform: rotate(-12deg);
}

.collections:before {
  width: 145px;
  height: 225px;
  left: -68px;
  top: 160px;
  background: linear-gradient(72deg,transparent 48%,var(--motif-gold) 49% 50%,transparent 51%),linear-gradient(108deg,transparent 48%,var(--motif-gold) 49% 50%,transparent 51%);
  background-size: 36px 52px;
  opacity: .75;
}

.quality:before {
  width: 205px;
  height: 205px;
  right: -74px;
  bottom: 60px;
  border: 1px solid var(--motif-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 18px transparent,0 0 0 19px var(--motif-gold),0 0 0 38px transparent,0 0 0 39px var(--motif-gold);
}

.section-dark, .about-closing {
  position: relative;
  overflow: hidden;
}

.section-dark:before, .about-closing:before {
  content: '✦';
  position: absolute;
  right: 7%;
  top: 16%;
  color: rgba(226,201,143,.25);
  font-size: 150px;
  font-family: 'Playfair Display',serif;
}

.section-dark:after, .about-closing:after {
  content: '';
  position: absolute;
  left: -95px;
  bottom: -115px;
  width: 310px;
  height: 310px;
  border: 1px solid rgba(226,201,143,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 28px transparent,0 0 0 29px rgba(226,201,143,.12),0 0 0 58px transparent,0 0 0 59px rgba(226,201,143,.08);
}

.about-hero {
  position: relative;
  overflow: hidden;
}

.about-hero-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg,rgba(52,16,17,.94),rgba(94,33,31,.69));
}

.about-hero:after {
  content: '';
  position: absolute;
  right: -70px;
  bottom: -85px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(226,201,143,.35);
  border-radius: 50%;
  box-shadow: 0 0 0 28px transparent,0 0 0 29px rgba(226,201,143,.23),0 0 0 58px transparent,0 0 0 59px rgba(226,201,143,.14);
}

.about-hero .wrap {
  position: relative;
  z-index: 2;
}



@media(max-width:850px) {
  .hero-slider:after {
    width: 190px;
    height: 190px;
    right: -50px;
    bottom: -52px;
  }
  .intro:before, .collections:before, .quality:before {
    opacity: .55;
    transform: scale(.65);
  }
  .experience:before {
    right: -92px;
    transform: scale(.6) rotate(-12deg);
  }
  .section-dark:before, .about-closing:before {
    font-size: 90px;
  }
  .section-dark:after, .about-closing:after {
    transform: scale(.62);
    transform-origin: bottom left;
  }
  .about-hero:after {
    transform: scale(.6);
    transform-origin: bottom right;
  }
}
/* Category-led collection explorer: inspired by the reference's discoverability,
   tailored to Herb Heaven's five Kashmir collections. */

.collection-nav {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin: -10px 0 18px;
  padding: 12px 0;
  border-top: 1px solid rgba(155,120,63,.45);
  border-bottom: 1px solid rgba(155,120,63,.45);
}

.collection-nav button {
  border: 0;
  background: transparent;
  color: var(--pine);
  padding: 8px 13px;
  font: 600 10px 'DM Sans';
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s,color .25s,transform .25s;
}

.collection-nav button:hover {
  transform: translateY(-2px);
  color: var(--gold);
}

.collection-nav button.active {
  background: var(--pine);
  color: #fff;
}

.collection-intro {
  max-width: 420px;
  margin: 0 0 35px;
  color: var(--muted);
  font: italic 18px/1.5 'Playfair Display';
}

.collection {
  transition: opacity .35s ease,transform .35s ease,filter .35s ease;
}

.collection-hidden {
  display: none!important;
}

.collection-grid.is-filtered {
  grid-template-columns: minmax(0,1fr)!important;
  grid-template-rows: 460px!important;
}

.collection-grid.is-filtered .collection:not(.collection-hidden) {
  grid-column: auto!important;
  grid-row: auto!important;
  max-width: 800px;
  width: 100%;
  margin: auto;
}

.collection-grid.is-filtered .collection:not(.collection-hidden) .collection-info {
  left: 40px;
  bottom: 34px;
}

.collection-grid.is-filtered .collection:not(.collection-hidden) .collection-info h3 {
  font-size: 2.6rem;
}

.collection-grid .collection:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 19px;
  right: 19px;
  width: 30px;
  height: 30px;
  border-top: 1px solid rgba(255,255,255,.75);
  border-right: 1px solid rgba(255,255,255,.75);
  opacity: 0;
  transform: translate(6px,-6px);
  transition: .35s;
}

.collection-grid .collection:hover:before {
  opacity: 1;
  transform: translate(0);
}

.collection-grid .collection-info {
  transition: transform .35s ease;
}

.collection-grid .collection:hover .collection-info {
  transform: translateY(-6px);
}

@media(max-width:850px) {
  .collection-nav {
    flex-wrap: wrap;
    padding: 11px 0;
    gap: 8px;
  }
  .collection-nav button {
    padding: 7px 11px;
  }
  .collection-intro {
    font-size: 16px;
  }
  .collection-grid.is-filtered {
    display: flex!important;
    grid-template-columns: none!important;
    grid-template-rows: none!important;
  }
  .collection-grid.is-filtered .collection:not(.collection-hidden) {
    max-width: none!important;
    margin: 0;
  }
  .collection-grid.is-filtered .collection:not(.collection-hidden) .collection-info {
    left: 24px;
    bottom: 23px;
  }
  .collection-grid.is-filtered .collection:not(.collection-hidden) .collection-info h3 {
    font-size: 2rem;
  }
}
/* Lively, editorial best sellers built from actual Herb Heaven product photography. */

.best-sellers {
  position: relative;
  overflow: hidden;
  padding: 125px 0;
  background: linear-gradient(125deg,#350d0f,#642721);
  color: #fff;
  border-top: 5px solid var(--antique-gold)!important;
}

.best-sellers:before {
  content: '';
  position: absolute;
  right: -75px;
  top: -82px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(226,201,143,.27);
  border-radius: 50%;
  box-shadow: 0 0 0 26px transparent,0 0 0 27px rgba(226,201,143,.16),0 0 0 54px transparent,0 0 0 55px rgba(226,201,143,.1);
}

.best-sellers .section-heading {
  position: relative;
  z-index: 1;
}

.best-sellers .section-heading>p {
  color: #eee6df;
}

.best-seller-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 20px;
}

.best-seller {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  background: #1e0808;
  border: 1px solid rgba(226,201,143,.5);
  transition: transform .35s ease,box-shadow .35s ease;
}

.best-seller:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 30px rgba(0,0,0,.3);
}

.best-seller img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.best-seller:hover img {
  transform: scale(1.06);
}

.best-seller:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,rgba(17,4,5,.9),rgba(17,4,5,.03) 72%);
}

.best-seller span {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 20px;
  padding: 6px 8px;
  background: rgba(29,8,9,.57);
  color: #ead29c;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
}

.best-seller div {
  position: absolute;
  z-index: 1;
  right: 24px;
  bottom: 22px;
  left: 24px;
}

.best-seller h3 {
  margin: 0 0 12px;
  font-size: clamp(1.7rem,2.5vw,2.35rem);
}

.best-seller a {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}

.best-seller a b {
  color: #e2c98f;
  font-size: 16px;
  line-height: .6;
}

.best-seller.featured {
  min-height: 500px;
}

.best-seller.featured h3 {
  font-size: 2.8rem;
}

@media(max-width:850px) {
  .best-sellers {
    padding: 78px 0;
  }
  .best-seller-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .best-seller, .best-seller.featured {
    min-height: 400px;
  }
  .best-seller.featured h3 {
    font-size: 2.2rem;
  }
}
/* Video carousel: preview first, player loaded only on selection. */

.video-slider {
  position: relative;
}

.video-slider .video-card {
  margin: 0;
  height: 520px;
}

.video-slider-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.video-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid var(--pine);
  color: var(--pine);
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  transition: .2s;
}

.video-arrow:hover {
  background: var(--pine);
  color: #fff;
}

.video-dots {
  display: flex;
  gap: 7px;
}

.video-dots button {
  width: 22px;
  height: 2px;
  border: 0;
  background: var(--line);
  padding: 0;
  cursor: pointer;
}

.video-dots button.active {
  background: var(--gold);
}

.video-note code {
  font: inherit;
  color: var(--pine);
  font-weight: 600;
}

@media(max-width:850px) {
  .video-slider .video-card {
    height: 380px;
  }
  .video-slider-controls {
    margin-top: 12px;
  }
  .video-arrow {
    width: 35px;
    height: 35px;
  }
}
/* Homepage journey: product discovery comes before brand films. */

#home-main {
  display: flex;
  flex-direction: column;
}

#home-main>.hero {
  order: 1;
}

#home-main>.provenance-ribbon {
  order: 2;
}

#home-main>.intro {
  order: 3;
}

#home-main>.quote-strip {
  order: 4;
}

#home-main>.collections {
  order: 5;
}

#home-main>.best-sellers {
  order: 6;
}

#home-main>.experience {
  order: 7;
}

#home-main>.unique {
  order: 8;
}

#home-main>.landscape {
  order: 9;
}

#home-main>.quality {
  order: 10;
}

#home-main>.testimonials {
  order: 11;
}

#home-main>.press {
  order: 12;
}

#home-main>.contact {
  order: 13;
}

@media(max-width:850px) {
  .nav.open .menu {
    display: block;
    width: auto;
    height: auto;
    padding: 7px 0;
  }
  .nav.open .menu b {
    display: none;
  }
  .nav.open .menu:after {
    content: 'Close';
    position: static;
    display: block;
    color: var(--pine);
    font: 600 11px 'DM Sans';
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .nav.open .menu:hover:after {
    color: var(--gold);
  }
}
/* Bespoke campaign photography brings the opening experience directly into the Herb Heaven world. */

.quality-image {
  border: 1px solid rgba(198,163,106,.65);
  padding: 10px;
  background: #fffdfb;
  box-shadow: 9px 10px 0 rgba(198,163,106,.16),0 12px 28px rgba(48,22,18,.08);
}

.quality-image img {
  transform: scale(1.01);
  transform-origin: center;
}

.quality-image:hover img {
  transform: scale(1.045);
}

.provenance-ribbon {
  position: relative;
  z-index: 6;
  background: #fffdfb;
  border-bottom: 1px solid rgba(198,163,106,.58);
  color: #442521;
}

.provenance-ribbon .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 16px 0;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.provenance-ribbon i {
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 50%;
  background: #c6a36a;
  box-shadow: 0 0 0 4px rgba(198,163,106,.12);
}

.quality-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding: 14px 18px;
  border: 1px solid #c6a36a;
  background: #fdf8ee;
  color: #401314;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .25s ease,background .25s ease;
}

.quality-link:hover {
  background: #c6a36a;
  transform: translateY(-3px);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease,transform .7s cubic-bezier(.2,.65,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.best-seller.reveal:nth-child(2) {
  transition-delay: .1s;
}

.best-seller.reveal:nth-child(3) {
  transition-delay: .2s;
}

@media(max-width:850px) {
  .provenance-ribbon .wrap {
    gap: 10px;
    padding: 13px 18px;
    font-size: 7px;
    line-height: 1.45;
  }
  .provenance-ribbon .wrap span:nth-of-type(3) {
    display: none;
  }
  .provenance-ribbon i {
    width: 3px;
    height: 3px;
  }
  .quality-image {
    padding: 7px;
    box-shadow: 5px 6px 0 rgba(198,163,106,.14),0 8px 18px rgba(48,22,18,.07);
  }
  .quality-link {
    margin-top: 27px;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media(prefers-reduced-motion:reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* A quiet break between the intro and the video/press content below it. */

.quote-strip {
  background: var(--pine);
  padding: 42px 6%;
  text-align: center;
}

.quote-strip p {
  max-width: 760px;
  margin: 0 auto;
  font: italic 500 1.4rem/1.5 'Playfair Display',serif;
  color: #f7ede9;
}

.quote-strip cite {
  display: block;
  margin-top: 14px;
  font: 600 11px 'DM Sans',sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--antique-gold);
}

@media(max-width:850px) {
  .quote-strip {
    padding: 34px 22px;
  }
  .quote-strip p {
    font-size: 1.15rem;
  }
}
/* Interactive press feature slider, built the same way as the hero slider:
   plain HTML slides, script.js swaps which one is "active". */

.press {
  padding: 130px 0;
}

.press-slides {
  position: relative;
  min-height: 260px;
}

.press-page {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.press-page.active {
  display: grid;
  animation: pressFade .4s ease;
}

.press-slide {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 9px 10px 0 rgba(198,163,106,.16),0 12px 28px rgba(48,22,18,.08);
  overflow: hidden;
}

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

.press-thumb {
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center top;
}

.press-content {
  display: flex;
  flex-direction: column;
  padding: 30px 32px 34px;
  text-align: left;
}

.press-outlet {
  margin: 0 0 14px;
  font: 700 11px 'DM Sans',sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.press-slide h3 {
  margin: 0 0 14px;
  font-size: 1.28rem;
  line-height: 1.32;
}

.press-excerpt {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

.press-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--pine);
  color: #fff;
  font: 700 12px 'DM Sans',sans-serif;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .25s ease,transform .25s ease;
}

.press-link:hover {
  background: var(--gold);
  transform: translateY(-2px);
}

.press-link span {
  transition: transform .25s ease;
}

.press-link:hover span {
  transform: translate(2px,-2px);
}

.press-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.press-controls[hidden] {
  display: none;
}

.press-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: none;
  color: var(--pine);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background .2s ease,border-color .2s ease;
}

.press-arrow:hover {
  background: var(--pine);
  border-color: var(--pine);
  color: #fff;
}

.press-dots {
  display: flex;
  gap: 8px;
}

.press-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line);
  cursor: pointer;
}

.press-dots button.active {
  background: var(--pine);
}

@media(max-width:850px) {
  .press {
    padding: 85px 0;
  }
  .press-page, .press-page.active {
    display: contents;
  }
  .press-slide {
    display: none;
  }
  .press-slide.active {
    display: flex;
    animation: pressFade .4s ease;
  }
  .press-thumb {
    height: 220px;
  }
  .press-content {
    padding: 26px 22px 30px;
  }
  .press-slide h3 {
    font-size: 1.2rem;
  }
}
/* Legacy page timeline: a vertical thread of milestones, each with a year,
   a connecting line and a short description. Dates and copy are placeholders. */

.timeline {
  padding: 60px 0 145px;
  border-top: 1px solid var(--line);
}

.timeline-list {
  margin-top: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 110px 24px 1fr;
  column-gap: 28px;
  padding-bottom: 44px;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-year {
  padding-top: 1px;
  font: 700 1.15rem 'Playfair Display',serif;
  color: var(--pine);
}

.timeline-track {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline-track:before {
  content: '';
  position: absolute;
  top: 14px;
  bottom: -44px;
  width: 1px;
  background: var(--line);
}

.timeline-item:last-child .timeline-track:before {
  display: none;
}

.timeline-dot {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 5px var(--paper);
}

.timeline-content h3 {
  margin: 0 0 10px;
  font: 600 1.35rem 'Playfair Display',serif;
  color: var(--ink);
}

.timeline-content p {
  max-width: 600px;
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

@media(max-width:850px) {
  .timeline {
    padding: 45px 0 90px;
  }
  .timeline-item {
    grid-template-columns: 66px 20px 1fr;
    column-gap: 16px;
    padding-bottom: 34px;
  }
  .timeline-year {
    font-size: 1rem;
  }
  .timeline-track:before {
    bottom: -34px;
  }
  .timeline-content h3 {
    font-size: 1.15rem;
  }
  .timeline-content p {
    font-size: .92rem;
  }
}
/* Saffron guide page: reuses .about-content, .about-columns, .timeline and .values
   from elsewhere in the site, plus a handful of guide-specific components below. */

.guide-section {
  padding: 90px 0;
  border-top: 1px solid var(--line);
}

.guide-section:first-of-type {
  border-top: 0;
}

.guide-section.tint {
  background: var(--warm-paper);
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.guide-heading {
  max-width: 620px;
  margin: 0 0 45px;
}

.guide-heading p.eyebrow {
  margin-bottom: 14px;
}

.guide-heading p:last-child {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
}

.guide-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
}

.compound-card {
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
}

.compound-card span {
  font: 700 11px 'DM Sans',sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.compound-card h3 {
  margin: 12px 0 10px;
  font-size: 1.5rem;
}

.compound-card p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
}

.type-card {
  padding: 32px 30px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 8px 9px 0 rgba(198,163,106,.14);
}

.type-card h3 {
  margin: 0 0 6px;
  font-size: 1.5rem;
  color: var(--pine);
}

.type-card p.type-tag {
  margin: 0 0 16px;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.type-card dl {
  margin: 0 0 16px;
  font-size: .85rem;
}

.type-card dt {
  display: inline;
  font-weight: 700;
  color: var(--ink);
}

.type-card dt:after {
  content: ": ";
}

.type-card dd {
  display: inline;
  margin: 0;
  color: var(--muted);
}

.type-card dd:after {
  content: "";
  display: block;
  margin-bottom: 8px;
}

.param-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 40px;
}

.param-grid div {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .92rem;
}

.param-grid strong {
  color: var(--ink);
  font-weight: 700;
}

.icon-list {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px 26px;
}

.icon-list.cols-4 {
  grid-template-columns: repeat(4,1fr);
}

.icon-list div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.icon-list .icon-emoji {
  display: block;
  margin-bottom: 10px;
  font-size: 1.5rem;
}

.icon-list h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}

.icon-list p {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.6;
}

.test-list {
  counter-reset: test;
}

.test-item {
  position: relative;
  padding: 28px 0 28px 62px;
  border-bottom: 1px solid var(--line);
}

.test-item:first-child {
  padding-top: 0;
}

.test-item:before {
  counter-increment: test;
  content: "0" counter(test);
  position: absolute;
  left: 0;
  top: 26px;
  font: 700 1.05rem 'Playfair Display',serif;
  color: var(--gold);
}

.test-item:first-child:before {
  top: -2px;
}

.test-item h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.test-item p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.7;
}

.test-item p:last-child {
  margin-bottom: 0;
}

.test-item .caution {
  color: var(--pine);
  font-weight: 600;
}

.callout {
  padding: 24px 28px;
  background: var(--warm-paper);
  border-left: 3px solid var(--gold);
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.75;
}

.callout strong {
  color: var(--pine);
}

.storage-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 24px;
}

.storage-grid div {
  text-align: center;
}

.storage-grid h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.storage-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.6;
}

.guide-closing {
  padding: 110px 0;
  text-align: center;
  color: #fff;
  background: var(--forest);
}

.guide-closing p.eyebrow {
  color: var(--antique-gold);
}

.guide-closing h2 {
  max-width: 680px;
  margin: 0 auto 20px;
  color: #fff;
}

.guide-closing p:not(.eyebrow) {
  max-width: 560px;
  margin: 0 auto 36px;
  color: #e0d3d8;
  font-size: .95rem;
  line-height: 1.8;
}

@media(max-width:850px) {
  .guide-section {
    padding: 60px 0;
  }
  .guide-grid-3, .icon-list, .icon-list.cols-4 {
    grid-template-columns: 1fr;
  }
  .param-grid {
    grid-template-columns: 1fr;
  }
  .storage-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 20px;
  }
  .guide-closing {
    padding: 75px 0;
  }
}
/* Four Generations cards on the Legacy page — distinct from the .timeline component
   below it (bordered cards vs. a connected line) so the two chronological sections
   on the same page read differently from one another. */

.generation-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 26px;
}

.generation-card {
  padding: 34px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--pine);
}

.generation-card .gen-era {
  font: 700 11px 'DM Sans',sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.generation-card h3 {
  margin: 12px 0 4px;
  font-size: 1.55rem;
  color: var(--ink);
}

.generation-card .gen-role {
  margin: 0 0 16px;
  color: var(--pine);
  font-size: .85rem;
  font-weight: 700;
}

.generation-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.75;
}

.generation-card .gen-line {
  margin: 0;
  font: italic 600 1.05rem 'Playfair Display',serif;
  color: var(--pine);
}

@media(max-width:850px) {
  .generation-grid {
    grid-template-columns: 1fr;
  }
}