/* =========================================================
   NURAYN — Where Faith Meets Fragrance
   -----------------------------------------------------------
   CONTENTS
     01  Design tokens (colours, both themes)
     02  Base & typography
     03  Reusable pieces (buttons, section headings)
     04  Announcement bar
     05  Header & navigation
     06  Cart drawer
     07  Order-inquiry modal
     08  Hero
     09  Occasion strip
     10  Products
     11  The Essence (fragrance notes)
     12  Promise / values
     13  Story
     14  Gifting
     15  Newsletter
     16  Contact
     17  Footer
     18  Toast + scroll reveal
     19  Responsive
   ========================================================= */


/* ============ 01  DESIGN TOKENS ============ */

:root{
  /* Light — cream sand ground, warm charcoal ink, rose-gold accent */
  --bg:            #FBF8F3;
  --bg-sand:       #F3ECE1;
  --surface:       #FFFFFF;
  --border:        #E6DCCC;
  --ink:           #241F1A;
  --ink-soft:      #6A6055;
  --accent:        #B0754A;
  --accent-deep:   #8A5733;
  --accent-wash:   #F0E1D2;
  --on-accent:     #FFFFFF;
  --shadow:        rgba(48,34,20,.10);
  --shadow-lift:   rgba(48,34,20,.16);
  --veil:          rgba(28,22,16,.45);

  --shell:         1280px;
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
  --ease:          cubic-bezier(.16,1,.3,1);
  --swap:          background-color .35s ease, color .35s ease, border-color .35s ease;
}

:root[data-theme="dark"]{
  /* Dark — candlelit room: warm black ground, gold flame accent */
  --bg:            #141110;
  --bg-sand:       #1C1815;
  --surface:       #201B18;
  --border:        #362D25;
  --ink:           #F4EEE4;
  --ink-soft:      #ADA294;
  --accent:        #E0A164;
  --accent-deep:   #EFBB84;
  --accent-wash:   #33281D;
  --on-accent:     #1B1309;
  --shadow:        rgba(0,0,0,.45);
  --shadow-lift:   rgba(0,0,0,.6);
  --veil:          rgba(0,0,0,.65);
}


/* ============ 02  BASE & TYPOGRAPHY ============ */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Jost', system-ui, -apple-system, sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  transition:var(--swap);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--accent); color:var(--on-accent); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

h1,h2,h3{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
}

.shell{ max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* ============ 03  REUSABLE PIECES ============ */

.eyebrow{
  font-size:.72rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-deep);
}

.section-head{ text-align:center; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.9rem, 4vw, 2.6rem); margin:.7rem 0 .6rem; }
.section-head p{ color:var(--ink-soft); max-width:52ch; margin-inline:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.78rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:1.05rem 2.3rem; border-radius:1px;
  transition:background-color .3s ease, color .3s ease, transform .2s var(--ease), box-shadow .3s ease;
}
.btn--solid{ background:var(--ink); color:var(--bg); }
.btn--solid:hover{ background:var(--accent-deep); color:#fff; transform:translateY(-2px); box-shadow:0 10px 26px var(--shadow-lift); }
.btn--ghost{ border:1px solid currentColor; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--bg); }
.btn--accent{ background:var(--accent); color:var(--on-accent); }
.btn--accent:hover{ background:var(--accent-deep); transform:translateY(-2px); box-shadow:0 10px 26px var(--shadow-lift); }
.btn--wide{ width:100%; }
.btn:active{ transform:scale(.985); }


/* ============ 04  ANNOUNCEMENT BAR ============ */

.announce{
  background:var(--ink); color:var(--bg);
  text-align:center; padding:.7rem 1rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  transition:var(--swap);
}
.announce__track{ display:grid; }
.announce__track span{ grid-area:1/1; opacity:0; animation:announce 12s infinite; }
.announce__track span:nth-child(2){ animation-delay:4s; }
.announce__track span:nth-child(3){ animation-delay:8s; }
@keyframes announce{
  0%,2%   { opacity:0; transform:translateY(4px); }
  6%,28%  { opacity:1; transform:translateY(0); }
  32%,100%{ opacity:0; transform:translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){
  .announce__track span{ animation:none; opacity:1; }
  .announce__track span:not(:first-child){ display:none; }
}


/* ============ 05  HEADER & NAVIGATION ============ */

.masthead{
  position:sticky; top:0; z-index:120;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:var(--swap);
}
.masthead__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding-block:1.05rem;
}

.wordmark{ display:inline-flex; align-items:center; gap:.65rem; }
.wordmark__mark{ width:32px; height:32px; flex:none; object-fit:contain; }
.wordmark__text{
  font-family:'Playfair Display', serif; font-size:1.35rem;
  font-weight:600; letter-spacing:.16em;
}

.nav{ display:flex; gap:2.2rem; list-style:none; }
.nav a{
  position:relative; font-size:.83rem; letter-spacing:.06em; padding-block:.35rem;
}
.nav a::after{
  content:''; position:absolute; inset:auto 0 0 0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.masthead__tools{ display:flex; align-items:center; gap:.6rem; }

.iconbtn{
  position:relative; width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background-color .25s ease;
}
.iconbtn:hover{ background:var(--bg-sand); }
.iconbtn svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.5; }

.cart-pip{
  position:absolute; top:1px; right:1px;
  min-width:18px; height:18px; padding-inline:4px; border-radius:99px;
  background:var(--accent); color:var(--on-accent);
  font-size:.66rem; font-weight:600; line-height:18px; text-align:center;
}
.cart-pip[hidden]{ display:none; }

.themetoggle{
  width:48px; height:26px; border-radius:99px; flex:none;
  border:1px solid var(--border); background:var(--bg-sand);
  display:inline-flex; align-items:center; padding:2px; transition:var(--swap);
}
.themetoggle__dot{
  width:20px; height:20px; border-radius:50%; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font-size:.62rem;
  transition:transform .35s var(--ease), background-color .35s ease;
}
:root[data-theme="dark"] .themetoggle__dot{ transform:translateX(22px); }

.navtoggle{ display:none; width:24px; height:16px; position:relative; }
.navtoggle i, .navtoggle i::before, .navtoggle i::after{
  content:''; position:absolute; left:0; width:100%; height:1.5px;
  background:var(--ink); transition:transform .25s ease, opacity .25s ease;
}
.navtoggle i{ top:7px; }
.navtoggle i::before{ top:-7px; }
.navtoggle i::after{ top:7px; }
.navtoggle[aria-expanded="true"] i{ background:transparent; }
.navtoggle[aria-expanded="true"] i::before{ top:0; transform:rotate(45deg); }
.navtoggle[aria-expanded="true"] i::after{ top:0; transform:rotate(-45deg); }


/* ============ 06  CART DRAWER ============ */

.veil{
  position:fixed; inset:0; z-index:200; background:var(--veil);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.veil.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed; inset:0 0 0 auto; z-index:210;
  width:min(420px, 100vw); background:var(--surface);
  display:flex; flex-direction:column;
  transform:translateX(101%); transition:transform .4s var(--ease);
  box-shadow:-16px 0 50px var(--shadow-lift);
}
.drawer.is-open{ transform:translateX(0); }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem 1.6rem; border-bottom:1px solid var(--border);
}
.drawer__head h2{ font-size:1.05rem; letter-spacing:.1em; text-transform:uppercase; }
.drawer__body{ flex:1; overflow-y:auto; padding:.5rem 1.6rem; }
.drawer__foot{ padding:1.4rem 1.6rem 1.7rem; border-top:1px solid var(--border); }
.drawer__foot[hidden]{ display:none; }

.cart-empty{ text-align:center; color:var(--ink-soft); padding:3.5rem 1rem; font-size:.92rem; }

.cart-line{ display:flex; gap:1rem; padding:1.15rem 0; border-bottom:1px solid var(--border); }
.cart-line img{ width:70px; height:70px; object-fit:cover; border-radius:3px; background:var(--bg-sand); flex:none; }
.cart-line__name{ font-weight:500; margin-bottom:.15rem; }
.cart-line__price{ color:var(--accent-deep); font-weight:500; font-size:.9rem; }
.cart-line__qty{ display:flex; align-items:center; gap:.75rem; margin-top:.6rem; }
.qty{
  width:26px; height:26px; border:1px solid var(--border); border-radius:3px;
  display:grid; place-items:center; font-size:.95rem; line-height:1;
  transition:border-color .2s ease, color .2s ease;
}
.qty:hover{ border-color:var(--accent); color:var(--accent-deep); }
.cart-line__drop{ margin-top:.5rem; font-size:.75rem; color:var(--ink-soft); text-decoration:underline; }
.cart-line__drop:hover{ color:var(--accent-deep); }

.subtotal{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:1.1rem; font-size:1.05rem; font-weight:500;
}
.subtotal span:last-child{ font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--accent-deep); }
.drawer__note{ font-size:.75rem; color:var(--ink-soft); text-align:center; margin-top:.8rem; }


/* ============ 07  ORDER-INQUIRY MODAL ============ */

.modal-veil{
  position:fixed; inset:0; z-index:300; background:var(--veil);
  display:grid; place-items:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal-veil.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--surface); border-radius:4px; padding:2.2rem;
  width:min(470px,100%); max-height:88vh; overflow-y:auto;
  transform:translateY(14px); transition:transform .35s var(--ease);
}
.modal-veil.is-open .modal{ transform:translateY(0); }
.modal h2{ font-size:1.4rem; margin-bottom:.4rem; }
.modal__hint{ color:var(--ink-soft); font-size:.88rem; margin-bottom:1.5rem; }
.modal__x{ float:right; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; margin:-.6rem -.6rem 0 0; }
.modal__x:hover{ background:var(--bg-sand); }
.modal__done{ text-align:center; padding:1rem 0; }
.modal__done svg{ width:56px; height:56px; stroke:var(--accent); fill:none; stroke-width:1.4; margin:0 auto 1.1rem; }

.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:.78rem; letter-spacing:.05em; margin-bottom:.4rem; }
.field input, .field textarea{
  width:100%; padding:.8rem .95rem; border:1px solid var(--border); border-radius:2px;
  background:var(--bg); color:var(--ink); font-family:'Jost', sans-serif; font-size:.95rem;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash);
}
.field textarea{ resize:vertical; min-height:96px; }


/* ============ 08  HERO ============ */

.hero{ background:var(--bg-sand); overflow:hidden; transition:var(--swap); }
.hero__inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem);
  align-items:center; padding-block:clamp(3rem,7vw,5.5rem);
}
.hero h1{ font-size:clamp(2.5rem, 6vw, 4rem); margin:1rem 0 1.2rem; }
.hero__lede{ color:var(--ink-soft); font-size:1.06rem; max-width:46ch; margin-bottom:2.2rem; }
.hero__ctas{ display:flex; gap:.9rem; flex-wrap:wrap; }
.hero__art{ position:relative; display:grid; place-items:center; }
.hero__art::before{
  content:''; position:absolute; width:82%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, var(--accent-wash) 0%, transparent 70%);
}
.hero__art img{
  position:relative; width:min(100%, 380px); height:auto; border-radius:6px;
  box-shadow:0 26px 50px var(--shadow-lift);
  animation:rise 1s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }


/* ============ 09  OCCASION STRIP ============ */

.occasions{ border-bottom:1px solid var(--border); padding-block:2.8rem; }
.occasions__row{ display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(1.5rem,5vw,4rem); }
.occasion{ display:grid; justify-items:center; gap:.7rem; width:92px; text-align:center; }
.occasion__ring{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-sand); border:1px solid var(--border); font-size:1.5rem;
  transition:transform .3s var(--ease), border-color .3s ease;
}
.occasion:hover .occasion__ring{ transform:translateY(-4px); border-color:var(--accent); }
.occasion span:last-child{ font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }


/* ============ 10  PRODUCTS ============ */

.products{ padding-block:clamp(3.5rem,7vw,6rem); }
.products__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }

.card{ position:relative; }
.card__media{
  position:relative; aspect-ratio:1/1.08; border-radius:3px; overflow:hidden;
  background:var(--bg-sand); margin-bottom:1.2rem;
}
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__tag{
  position:absolute; top:1rem; left:1rem; z-index:2;
  background:var(--ink); color:var(--bg);
  font-size:.63rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.35rem .7rem; border-radius:1px;
}
.card__add{
  position:absolute; inset:auto 1rem 1rem; z-index:2;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s var(--ease);
}
.card:hover .card__add, .card:focus-within .card__add{ opacity:1; transform:none; }
.card__name{ font-size:1.15rem; margin-bottom:.2rem; }
.card__note{ color:var(--ink-soft); font-size:.87rem; margin-bottom:.5rem; }
.card__price{ font-family:'Playfair Display',serif; font-size:1.2rem; font-weight:600; color:var(--accent-deep); }

@media (hover: none){
  .card__add{ opacity:1; transform:none; }
}


/* ============ 11  THE ESSENCE ============ */

.essence{ background:var(--bg-sand); padding-block:clamp(3.5rem,7vw,6rem); transition:var(--swap); }
.essence__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.essence__art img{ width:100%; border-radius:4px; box-shadow:0 24px 50px var(--shadow); }
.essence h2{ font-size:clamp(1.8rem,4vw,2.4rem); margin:.7rem 0 1rem; }
.essence__lede{ color:var(--ink-soft); margin-bottom:2rem; max-width:46ch; }

.notes{ display:grid; gap:1.4rem; }
.note{ display:flex; gap:1.1rem; align-items:flex-start; }
.note__mark{
  width:44px; height:44px; flex:none; border-radius:50%;
  display:grid; place-items:center; font-size:1.15rem;
  background:var(--surface); border:1px solid var(--border);
}
.note h3{ font-family:'Jost',sans-serif; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:.2rem; }
.note p{ font-size:.95rem; }
.note p span{ display:block; color:var(--ink-soft); font-size:.87rem; }


/* ============ 12  PROMISE / VALUES ============ */

.promise{ padding-block:clamp(3.5rem,7vw,5.5rem); }
.promise__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.5rem; }
.promise__item{ text-align:center; }
.promise__ring{
  width:56px; height:56px; margin:0 auto .9rem; border-radius:50%;
  display:grid; place-items:center; font-size:1.3rem;
  background:var(--bg-sand); border:1px solid var(--border);
}
.promise__item h3{ font-family:'Jost',sans-serif; font-size:.82rem; font-weight:500; letter-spacing:.06em; margin-bottom:.3rem; }
.promise__item p{ font-size:.8rem; color:var(--ink-soft); }


/* ============ 13  STORY ============ */

.story{ padding-block:clamp(3.5rem,7vw,6rem); }
.story__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
/* The logo file has its own cream ground baked in, so it's framed as a
   printed logo card — deliberate on both the light and dark themes. */
.story__art img{
  width:100%; max-width:390px; margin-inline:auto; display:block;
  border-radius:6px; border:1px solid var(--border);
  box-shadow:0 18px 44px var(--shadow);
}
.story__arabic{
  font-family:'Playfair Display',serif; font-size:clamp(2.6rem,6vw,3.6rem);
  color:var(--accent); line-height:1; margin-bottom:.8rem;
}
.story h2{ font-size:clamp(1.8rem,4vw,2.4rem); margin-bottom:1.1rem; }
.story p{ color:var(--ink-soft); margin-bottom:1.1rem; max-width:58ch; }
.story__quotes{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.story__quotes span{
  font-size:.78rem; font-style:italic; color:var(--ink-soft);
  border:1px solid var(--border); border-radius:99px; padding:.5rem 1.1rem;
}


/* ============ 14  GIFTING ============ */

.gifting{ background:var(--ink); color:var(--bg); padding-block:clamp(3.5rem,7vw,6rem); transition:var(--swap); }
.gifting__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.gifting .eyebrow{ color:var(--accent); }
.gifting h2{ font-size:clamp(1.9rem,4vw,2.6rem); margin:.7rem 0 1rem; }
.gifting p{ opacity:.76; margin-bottom:2rem; max-width:46ch; }
.gifting__art img{ width:100%; border-radius:4px; }
.gifting .btn--accent:hover{ box-shadow:0 10px 26px rgba(0,0,0,.4); }


/* ============ 15  NEWSLETTER ============ */

.signup{ padding-block:clamp(3.5rem,7vw,5.5rem); text-align:center; }
.signup h2{ font-size:clamp(1.7rem,3.5vw,2.2rem); margin:.7rem 0 .6rem; }
.signup p{ color:var(--ink-soft); margin-bottom:2rem; }
.signup__form{ display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; max-width:460px; margin-inline:auto; }
.signup__form input{
  flex:1 1 240px; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:1px;
  background:var(--bg); color:var(--ink); font-family:'Jost',sans-serif;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.signup__form input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash); }
.formnote{ margin-top:1rem; font-size:.85rem; color:var(--accent-deep); min-height:1.3em; }


/* ============ 16  CONTACT ============ */

.contact{ background:var(--bg-sand); padding-block:clamp(3.5rem,7vw,6rem); transition:var(--swap); }
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); }
.contact h2{ font-size:clamp(1.8rem,4vw,2.3rem); margin:.7rem 0 1rem; }
.contact__lede{ color:var(--ink-soft); margin-bottom:2rem; max-width:42ch; }
.contact__line{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.3rem; }
.contact__line svg{ width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.5; flex:none; margin-top:.2rem; }
.contact__line .label{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.contact__line a:hover{ color:var(--accent-deep); }
.contact__form{ background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:clamp(1.5rem,3vw,2.3rem); }


/* ============ 17  FOOTER ============ */

.foot{ padding-block:3.5rem 2rem; }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.8rem; }
.foot__blurb{ color:var(--ink-soft); font-size:.9rem; max-width:34ch; margin-top:.9rem; }
.foot h3{ font-family:'Jost',sans-serif; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
.foot ul{ list-style:none; display:grid; gap:.6rem; }
.foot ul a{ font-size:.9rem; color:var(--ink-soft); }
.foot ul a:hover{ color:var(--accent-deep); }
.foot__base{
  border-top:1px solid var(--border); padding-top:1.6rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.7rem;
  font-size:.8rem; color:var(--ink-soft);
}


/* ============ 18  TOAST + SCROLL REVEAL ============ */

.toast{
  position:fixed; left:50%; bottom:1.8rem; z-index:400;
  background:var(--ink); color:var(--bg);
  padding:.9rem 1.7rem; border-radius:99px; font-size:.85rem;
  transform:translate(-50%, 18px); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s var(--ease);
}
.toast.is-shown{ opacity:1; transform:translate(-50%, 0); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }


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

@media (max-width: 1000px){
  .hero__inner{ grid-template-columns:1fr; text-align:center; }
  .hero__art{ order:-1; }
  .hero__lede{ margin-inline:auto; }
  .hero__ctas{ justify-content:center; }
  .essence__grid,
  .story__grid,
  .gifting__grid,
  .contact__grid{ grid-template-columns:1fr; }
  .essence__art, .story__art{ order:-1; }
  .products__grid{ grid-template-columns:repeat(2,1fr); }
  .promise__grid{ grid-template-columns:repeat(3,1fr); row-gap:2.2rem; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 720px){
  .nav{
    display:none; position:absolute; inset:100% 0 auto 0;
    flex-direction:column; gap:0; padding:.5rem 0;
    background:var(--bg); border-bottom:1px solid var(--border);
  }
  .nav.is-open{ display:flex; }
  .nav a{ padding:.95rem var(--gutter); }
  .nav a::after{ display:none; }
  .navtoggle{ display:block; }
  .masthead__inner{ position:relative; }
  .products__grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .promise__grid{ grid-template-columns:repeat(2,1fr); }
  .foot__grid{ grid-template-columns:1fr; }
}