/* =========================================================
   Neshka Savera — Phase 3 (2026-10-08)
   A. Homepage Offers strip          (front page)
   B. About Us / Contact Us polish   (Elementor "Full Width" pages,
      body.nsb-page-about / body.nsb-page-contact from inc/phase3.php)
   C. Branded contact form [nsb_contact_form]
   Loaded after style.css + responsive-fixes.css on those pages only.
   Elementor prints its own CSS later, so B uses body-class selectors.
   ========================================================= */

/* =========================================================
   A. OFFERS STRIP
   ========================================================= */
.nsb-offers-strip {
  position: relative;
  padding: 1.4rem 0 1.5rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,165,90,.10), transparent 60%),
    var(--clr-dark);
  border-top: 1px solid rgba(201,165,90,.18);
  border-bottom: 1px solid rgba(201,165,90,.18);
}
.nsb-offers-strip__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.nsb-offers-strip .nsb-offers-strip__eyebrow {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: .75rem;
  font-weight: var(--fw-medium);
  font-style: normal;
  letter-spacing: .25em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--clr-gold);
}
.nsb-offers-strip__all {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247,242,237,.82);
  text-decoration: none;
  white-space: nowrap;
}
.nsb-offers-strip__all:hover,
.nsb-offers-strip__all:focus-visible { color: var(--clr-gold); }

.nsb-offers-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.nsb-offers-strip__card {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "media body" "media btn";
  column-gap: 1.25rem;
  row-gap: .6rem;
  align-items: center;
  padding: .7rem;
  background: rgba(26,11,16,.9);
  border: 1px solid rgba(201,165,90,.22);
  transition: border-color var(--transition);
}
.nsb-offers-strip__card:hover { border-color: rgba(201,165,90,.55); }
.nsb-offers-strip__media { grid-area: media; display: block; align-self: center; overflow: hidden; }
.nsb-offers-strip__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s var(--ease, ease);
}
.nsb-offers-strip__card:hover .nsb-offers-strip__img { transform: scale(1.03); }
.nsb-offers-strip__body { grid-area: body; align-self: end; min-width: 0; }
.nsb-offers-strip .nsb-offers-strip__title {
  margin: 0 0 .3rem;
  font-family: var(--ff-serif);
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: 1.15;
  color: var(--clr-cream);
}
.nsb-offers-strip__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .9rem;
}
.nsb-offers-strip__sub {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247,242,237,.72);
}
.nsb-offers-strip__price { display: inline-flex; align-items: baseline; gap: .45rem; }
.nsb-offers-strip__price del { font-size: .85rem; color: rgba(247,242,237,.6); }
.nsb-offers-strip__price strong {
  font-family: var(--ff-serif);
  font-size: 1.45rem;
  font-weight: var(--fw-medium);
  color: var(--clr-gold);
}
.nsb-offers-strip .nsb-offers-strip__btn {
  grid-area: btn;
  align-self: start;
  justify-self: start;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1.3rem;
}

@media (max-width: 1099px) {
  .nsb-offers-strip__card {
    grid-template-columns: 168px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "media body" "btn btn";
    column-gap: 1rem;
    row-gap: .7rem;
  }
  .nsb-offers-strip__body { align-self: center; }
  .nsb-offers-strip .nsb-offers-strip__title { font-size: 1.3rem; }
  .nsb-offers-strip .nsb-offers-strip__btn { justify-self: stretch; width: 100%; padding-inline: .8rem; }
}

/* Phones: one row of two cards, swipe for the second (peek shows it). */
@media (max-width: 680px) {
  .nsb-offers-strip { padding: 1.1rem 0 1.2rem; }
  .nsb-offers-strip__head { margin-bottom: .5rem; }
  .nsb-offers-strip .nsb-offers-strip__eyebrow { letter-spacing: .18em; }
  .nsb-offers-strip__all { letter-spacing: .12em; }
  .nsb-offers-strip__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86%, 340px);
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(.8rem, 4vw, 1rem);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* bleed to the screen edges, keep the first card on the gutter */
    margin-inline: calc(-1 * clamp(.8rem, 4vw, 1rem));
    padding-inline: clamp(.8rem, 4vw, 1rem);
  }
  .nsb-offers-strip__list::-webkit-scrollbar { display: none; }
  .nsb-offers-strip__card {
    scroll-snap-align: start;
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "media body" "btn btn";
    column-gap: .8rem;
    row-gap: .7rem;
    padding: .6rem;
  }
  .nsb-offers-strip__media { align-self: center; }
  .nsb-offers-strip__body { align-self: center; }
  .nsb-offers-strip .nsb-offers-strip__title { font-size: 1.15rem; }
  .nsb-offers-strip__price strong { font-size: 1.3rem; }
  .nsb-offers-strip .nsb-offers-strip__btn { justify-self: stretch; width: 100%; }
}

/* =========================================================
   B0. PAGE HERO for Elementor pages (same look as .nsb-page-hero)
   ========================================================= */
.nsb-p3-hero {
  position: relative;
  padding: 4.5rem 0 2.6rem;
  background:
    radial-gradient(ellipse at 70% 0%, rgba(201,165,90,.14), transparent 55%),
    linear-gradient(180deg, var(--clr-dark-2) 0%, var(--clr-dark) 100%);
  border-bottom: 1px solid rgba(201,165,90,.12);
}
.nsb-p3-hero::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,165,90,.55), transparent);
}
.nsb-p3-hero .eyebrow { margin-bottom: .9rem; font-size: .75rem; }
.nsb-p3-hero .nsb-p3-hero__title {
  margin: 0 0 .9rem;
  color: var(--clr-cream);
  font-family: var(--ff-serif);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: 1.05;
}
.nsb-p3-hero__desc {
  margin: 0;
  max-width: 34rem;
  color: rgba(247,242,237,.75);
  font-size: 1rem;
  line-height: 1.7;
  text-wrap: pretty;
}
@media (max-width: 768px) {
  .nsb-p3-hero { padding: 2.6rem 0 2rem; }
}

/* Elementor wrappers on these two pages: no stray side padding / gaps. */
body.nsb-page-about #content,
body.nsb-page-contact #content { padding-top: 0; }
body.nsb-page-about .elementor > .e-con,
body.nsb-page-contact .elementor > .e-con { --padding-left: 0; --padding-right: 0; padding-left: 0; padding-right: 0; }

/* =========================================================
   B1. ABOUT US
   ========================================================= */
/* The first Elementor container on About is an empty spacer (≈100px). */
body.nsb-page-about .elementor-element-68ecbe5 { display: none; }

/* Same box as the page hero's .container (max 1300px incl. its gutter), so the
   portrait and text line up with the "About Us" title and never touch the
   viewport edge. Gutter values mirror style.css .container per breakpoint. */
body.nsb-page-about {
  --nsb-about-gutter: 2rem;
}
body.nsb-page-about .elementor > .e-con > .e-con-inner {
  box-sizing: border-box;
  width: 100%;
  max-width: 1300px;
  margin-inline: auto;
  padding: clamp(3rem, 7vw, 6rem) var(--nsb-about-gutter);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: flex-start;
}
body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con {
  padding: 0;
  --padding-top: 0; --padding-bottom: 0; --padding-left: 0; --padding-right: 0;
}
/* Image column: framed portrait, stays in view while reading. */
body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con:first-child {
  flex: 0 0 42%;
  position: sticky;
  top: 110px;
}
body.nsb-page-about .elementor .e-image-base {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 150px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 15%;
  outline: 1px solid rgba(201,165,90,.35);
  outline-offset: 12px;
}
/* Text column */
body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con:last-child {
  flex: 1 1 0;
  max-width: 600px;
  gap: 0;
}
body.nsb-page-about .elementor .e-heading-base {
  margin: 0 0 1.2rem;
  font-family: var(--ff-serif) !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: 1.1;
  color: var(--clr-cream);
}
body.nsb-page-about .elementor .e-heading-base ~ .e-heading-base {
  position: relative;
  margin-top: 3rem;
  padding-top: 2rem;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--clr-gold);
}
body.nsb-page-about .elementor .e-heading-base ~ .e-heading-base::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 1px;
  background: var(--clr-gold);
}
body.nsb-page-about .elementor .e-paragraph-base {
  margin: 0;
  font-family: var(--ff-sans) !important;
  font-size: 1.02rem;
  font-weight: var(--fw-light);
  line-height: 1.9;
  color: rgba(247,242,237,.84);
}
body.nsb-page-about .elementor .e-paragraph-base em {
  font-family: var(--ff-serif);
  font-size: 1.15em;
  color: var(--clr-gold-lt);
}

/* Compact desktop / tablet landscape (style.css .container gutter = 1.5rem). */
@media (max-width: 1100px) {
  body.nsb-page-about { --nsb-about-gutter: 1.5rem; }
}

/* Tablet (768-1023): keep two columns instead of a 640px single column with a
   full-screen portrait. Portrait ~40%, text gets the rest; sizes scaled down. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.nsb-page-about .elementor > .e-con > .e-con-inner {
    flex-direction: row;
    padding-block: 3rem 4rem;
    gap: clamp(1.75rem, 4vw, 2.5rem);
  }
  body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con:first-child {
    flex: 0 0 40%;
    top: 96px;
  }
  body.nsb-page-about .elementor .e-image-base {
    max-height: calc(100vh - 140px);
    outline-offset: 8px;
  }
  body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con:last-child { min-width: 0; max-width: none; }
  body.nsb-page-about .elementor .e-heading-base { font-size: clamp(1.9rem, 4vw, 2.4rem); }
  body.nsb-page-about .elementor .e-heading-base ~ .e-heading-base { font-size: clamp(1.7rem, 3.5vw, 2.1rem); margin-top: 2.4rem; }
  body.nsb-page-about .elementor .e-paragraph-base { font-size: 1rem; line-height: 1.85; }
}
@media (max-width: 768px) {
  body.nsb-page-about { --nsb-about-gutter: 1.25rem; }
}

/* Phones (<= 767, Elementor's mobile breakpoint): editorial single column.
   1. Portrait full-bleed under the hero hairline, 4:5 crop focused on the face,
      gold frame drawn INSIDE the photo (never touches/leaves the screen edge).
   2. Text below on the hero's gutter; every section heading (Ancient Rituals…,
      About the Founder) gets the same short gold rule above it. */
@media (max-width: 767px) {
  body.nsb-page-about { --nsb-about-gutter: clamp(1.1rem, 5.5vw, 1.5rem); }
  /* Hero text on the same, slightly roomier gutter as the About text
     (style.css forces .container to clamp(.8rem,4vw,1rem) !important <=700px). */
  body.nsb-page-about .nsb-p3-hero .container {
    padding-inline: var(--nsb-about-gutter) !important;
  }
  body.nsb-page-about .elementor > .e-con > .e-con-inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    padding-block: 0 3.5rem;
    gap: 2.25rem;
  }
  /* Photo: always first, edge to edge. */
  body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con:first-child {
    order: -1;
    position: relative;
    top: auto;
    flex: none;
    width: calc(100% + 2 * var(--nsb-about-gutter));
    max-width: none;
    margin-inline: calc(-1 * var(--nsb-about-gutter));
  }
  body.nsb-page-about .elementor .e-image-base {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 560px;
    max-height: min(560px, 74svh);
    object-fit: cover;
    object-position: 50% 22%; /* face sits in the upper third of the 9:16 original */
    outline: 1px solid rgba(230,201,128,.6);
    outline-offset: -14px;   /* inner gold frame */
  }
  /* Soft fade of the photo into the page background below it. */
  body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con:first-child::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 22%;
    background: linear-gradient(180deg, rgba(13,5,8,0) 0%, rgba(13,5,8,.55) 100%);
    pointer-events: none;
  }
  /* Text column */
  body.nsb-page-about .elementor > .e-con > .e-con-inner > .e-con:last-child {
    flex: none;
    width: 100%;
    max-width: 34rem;      /* ~65 characters per line on large phones */
    margin-inline: auto;
  }
  body.nsb-page-about .elementor .e-heading-base,
  body.nsb-page-about .elementor .e-heading-base ~ .e-heading-base {
    position: relative;
    margin: 0 0 1rem;
    padding-top: 1.35rem;
    font-size: clamp(1.9rem, 8.2vw, 2.35rem);
    line-height: 1.12;
    letter-spacing: -.005em;
    text-wrap: balance;
  }
  body.nsb-page-about .elementor .e-heading-base ~ .e-heading-base {
    margin-top: 2.75rem;
    font-size: clamp(1.75rem, 7.4vw, 2.15rem);
  }
  body.nsb-page-about .elementor .e-heading-base::before,
  body.nsb-page-about .elementor .e-heading-base ~ .e-heading-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 1px;
    background: var(--clr-gold);
  }
  body.nsb-page-about .elementor .e-paragraph-base {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(247,242,237,.86);
    text-wrap: pretty;
  }
  body.nsb-page-about .elementor .e-paragraph-base em { font-size: 1.12em; }
  /* Any button/link-button placed in the About content later: full width, 48px. */
  body.nsb-page-about .elementor .e-button-base,
  body.nsb-page-about .elementor .elementor-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 48px;
    margin-top: 1.5rem;
  }
}

/* =========================================================
   B2. CONTACT US — details + map (left), form (right)
   ========================================================= */
@media (min-width: 1024px) {
  body.nsb-page-contact #content {
    display: grid;
    grid-template-columns: minmax(2rem, 1fr) minmax(0, 560px) 4rem minmax(0, 612px) minmax(2rem, 1fr);
    grid-auto-rows: auto;
    align-items: start;
  }
  body.nsb-page-contact #content > * { grid-column: 1 / -1; }
  body.nsb-page-contact #content > .elementor { grid-column: 2; grid-row: 2; }
  body.nsb-page-contact #content > .nsb-p3-contact-form-section { grid-column: 4; grid-row: 2; }
  body.nsb-page-contact #content > .elementor,
  body.nsb-page-contact #content > .nsb-p3-contact-form-section { padding-block: 4rem 5.5rem; }
  body.nsb-page-contact .nsb-p3-contact-form-section > .container { padding: 0; max-width: none; }
  body.nsb-page-contact .nsb-p3-contact-form-section .nsb-cf { position: sticky; top: 110px; }
}

body.nsb-page-contact .nsv-contact-page { background: transparent; }
body.nsb-page-contact .nsv-contact-page .nsv-contact-main {
  max-width: none;
  margin: 0;
  padding: 0;
}
body.nsb-page-contact .nsv-contact-main::before {
  content: 'Reach Us';
  display: block;
  margin-bottom: 1.2rem;
  font-family: var(--ff-sans);
  font-size: .75rem;
  font-weight: var(--fw-medium);
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--clr-gold);
}
body.nsb-page-contact .nsv-contact-page .nsv-contact-item {
  gap: 1.1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(201,165,90,.16);
}
body.nsb-page-contact .nsv-contact-page .nsv-contact-item:first-child {
  padding-top: 1.2rem;
  border-top: 1px solid rgba(201,165,90,.16);
}
body.nsb-page-contact .nsv-contact-page .nsv-contact-icon {
  width: 48px;
  min-width: 48px;
  height: 48px;
  border: 1px solid rgba(201,165,90,.35);
  border-radius: 50%;
}
body.nsb-page-contact .nsv-contact-page .nsv-contact-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--clr-gold);
  stroke-width: 1.5;
}
body.nsb-page-contact .nsv-contact-page .nsv-contact-title { margin-bottom: .2rem; color: var(--clr-cream); font-weight: var(--fw-regular); }
body.nsb-page-contact .nsv-contact-page .nsv-contact-value,
body.nsb-page-contact .nsv-contact-page .nsv-contact-link { color: rgba(247,242,237,.75) !important; line-height: 1.6; }
body.nsb-page-contact .nsv-contact-page .nsv-contact-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-color: rgba(201,165,90,.45);
  text-underline-offset: 4px;
}
body.nsb-page-contact .nsv-contact-page .nsv-map-wrap {
  margin-top: 1.75rem;
  border: 1px solid rgba(201,165,90,.22);
  padding: 6px;
  background: var(--clr-dark-2);
}
body.nsb-page-contact .nsv-contact-page .nsv-map-wrap iframe { height: 300px; }

@media (max-width: 1023px) {
  body.nsb-page-contact #content > .elementor { padding: 2.4rem clamp(.8rem, 4vw, 1rem) 0; max-width: 640px; margin-inline: auto; }
  body.nsb-page-contact .nsb-p3-contact-form-section { padding: 2.75rem 0 3.5rem; }
  body.nsb-page-contact .nsb-p3-contact-form-section > .container { max-width: 640px; }
  body.nsb-page-contact .nsv-contact-page .nsv-map-wrap iframe { height: 240px; }
}

/* =========================================================
   C. CONTACT FORM  [nsb_contact_form]
   ========================================================= */
.nsb-cf {
  scroll-margin-top: 110px;
  padding: clamp(1.4rem, 4vw, 2.5rem);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(201,165,90,.12), transparent 60%),
    var(--clr-dark-2);
  border: 1px solid rgba(201,165,90,.25);
}
.nsb-cf__head .eyebrow { margin-bottom: .6rem; font-size: .75rem; }
.nsb-cf .nsb-cf__title {
  margin: 0 0 1.5rem;
  font-family: var(--ff-serif);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: 1.1;
  color: var(--clr-cream);
}
.nsb-cf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.nsb-cf__field { margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.nsb-cf__field label {
  font-size: .75rem;
  font-weight: var(--fw-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,242,237,.78);
}
.nsb-cf__field .req { color: var(--clr-gold); }
.nsb-cf input[type="text"],
.nsb-cf input[type="email"],
.nsb-cf input[type="tel"],
.nsb-cf select,
.nsb-cf textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem 1rem;
  background: var(--clr-dark);
  border: 1px solid rgba(201,165,90,.28);
  border-radius: 0;
  color: var(--clr-cream);
  font-family: var(--ff-sans);
  font-size: 1rem; /* 16px: no zoom-on-focus on iOS */
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.nsb-cf textarea { min-height: 150px; resize: vertical; }
.nsb-cf select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c9a55a' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}
.nsb-cf select option { background: var(--clr-dark); color: var(--clr-cream); }
.nsb-cf input:focus,
.nsb-cf select:focus,
.nsb-cf textarea:focus {
  outline: none;
  border-color: var(--clr-gold);
  box-shadow: 0 0 0 3px rgba(201,165,90,.18);
}
.nsb-cf__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.nsb-cf__actions { margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.nsb-cf .nsb-cf__submit { min-height: 52px; padding-inline: 2.2rem; justify-content: center; border: 0; }
.nsb-cf__note { font-size: .8rem; color: rgba(247,242,237,.65); }
.nsb-cf__notice {
  margin: 0 0 1.4rem;
  padding: .9rem 1.1rem;
  border: 1px solid;
  font-size: .95rem;
  line-height: 1.6;
}
.nsb-cf__notice--success { border-color: rgba(201,165,90,.55); background: rgba(201,165,90,.1); color: var(--clr-cream); }
.nsb-cf__notice--error { border-color: rgba(196,122,146,.6); background: rgba(139,58,82,.18); color: var(--clr-cream); }

@media (max-width: 600px) {
  .nsb-cf__row { grid-template-columns: 1fr; }
  .nsb-cf .nsb-cf__submit { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nsb-offers-strip__img, .nsb-offers-strip__card { transition: none; }
}