/* NIPP hero banner — upload to: wp-content/themes/HighendWP-Child/css/nipp-hero.css */
/* ============================================================
   NIPP HERO BANNER — all classes prefixed "nipp-"
   ============================================================ */
.nipp-hero {
  --nipp-navy: #0b3a7e;
  --nipp-navy-dark: #08306b;
  --nipp-teal: #0d9cc4;
  --nipp-teal-dark: #0a86a9;
  --nipp-pink: #fcd9e6;
  --nipp-pink-strong: #f8c3d6;
  --nipp-heart: #ec6f9a;
  --nipp-text: #1c3561;
  --nipp-bg-1: #f5f9fe;
  --nipp-bg-2: #ebf3fb;

  position: relative;
  width: calc(100% - 32px);   /* small gap from the screen edges */
  max-width: 1600px;
  margin: 48px auto;
  border-radius: 28px;
  overflow: hidden;
  background: #eaf3fc url("https://facednatest.com/wp-content/uploads/2026/10/cloud-background.jpg") left center / cover no-repeat;  /* soft cloud background */
  color: var(--nipp-navy);
  font-family: 'Outfit', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
.nipp-hero *, .nipp-hero *::before, .nipp-hero *::after { box-sizing: border-box; }
.nipp-hero img { max-width: 100%; display: block; }
/* Keep Bootstrap and theme styles from leaking into the banner */
.nipp-hero h2, .nipp-hero p, .nipp-hero ul, .nipp-hero li { font-family: inherit; }
.nipp-hero a, .nipp-hero a:hover, .nipp-hero a:focus { text-decoration: none; color: #fff; }
.nipp-hero svg { vertical-align: baseline; }

/* Top row: text on the left, photo on the right */
.nipp-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  min-height: 600px;
}

/* ---------- LEFT CONTENT ---------- */
.nipp-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-areas:
    "badge badge"
    "title title"
    "copy  price"
    "cta   cta";
  column-gap: 24px;
  align-content: center;
  padding: clamp(24px, 3vw, 44px) 24px clamp(24px, 3vw, 44px) clamp(20px, 3vw, 48px);
}

.nipp-badge { grid-area: badge; display: inline-flex; align-items: center; justify-self: start; margin-bottom: 16px; }
.nipp-badge__icon {
  width: 64px; height: 64px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff; border-radius: 50%;
  box-shadow: 0 4px 14px rgba(11, 58, 126, .10);
  position: relative; z-index: 1;
}
.nipp-badge__icon svg { width: 38px; height: 38px; }
.nipp-badge__text {
  margin-left: -18px;
  padding: 10px 22px 10px 34px;
  background: #dcebf9;
  border-radius: 0 999px 999px 0;
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--nipp-navy);
}

.nipp-title {
  grid-area: title;
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 700; line-height: 1.1; letter-spacing: -.01em;
  color: var(--nipp-navy) !important;  /* page CSS forces heading colours with !important */
}
.nipp-title__script {
  display: inline-flex; align-items: flex-start; gap: 6px;
  margin-top: 4px;
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: 1.55em; font-weight: 600; line-height: 1;
  position: relative;
}
.nipp-title__script::after {
  content: ""; position: absolute;
  left: 58%; bottom: -4px; width: 36%; height: 4px;
  border-radius: 4px; background: #9fb7d6; transform: rotate(-3deg);
}
.nipp-title__script svg { width: .55em; height: .55em; margin-top: .05em; }

.nipp-copy {
  grid-area: copy;
  align-self: start;
  margin: 8px 0 0;
  max-width: 36ch;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.75;
  color: var(--nipp-text);
}

/* ---------- PRICE + SEZZLE (brush-stroke block) ---------- */
.nipp-price {
  grid-area: price;
  position: relative;
  display: grid;
  grid-template-columns: auto 2px minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 1.6vw, 26px);
  margin-top: -10px;
  padding: clamp(22px, 2vw, 32px) clamp(30px, 2.8vw, 48px) clamp(40px, 3.4vw, 54px);
  isolation: isolate;          /* keeps the brush shape behind the text */
}
/* Soft painted brush stroke behind the price block */
.nipp-price__brush {
  position: absolute;
  top: -6px; left: -14px;
  width: calc(100% + 28px); height: calc(100% + 12px);
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.nipp-price__label { margin: 0; font-size: clamp(14px, 1.15vw, 18px); font-weight: 600; color: var(--nipp-navy); }
.nipp-price__amount {
  margin: 2px 0 0;
  font-size: clamp(44px, 4.6vw, 74px);
  font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--nipp-navy-dark);
}
.nipp-price__divider { align-self: stretch; width: 2px; margin: 4px 0; background: linear-gradient(180deg, rgba(120,146,177,0) 0%, #7892b1 18%, #7892b1 82%, rgba(120,146,177,0) 100%); border-radius: 2px; }
.nipp-sezzle__logo { display: block; height: clamp(30px, 2.7vw, 42px); width: auto; margin-bottom: 8px; }
.nipp-sezzle__title {
  margin: 0 0 6px;
  font-size: clamp(14px, 1.1vw, 17px); font-weight: 600;
  color: var(--nipp-navy);
}
.nipp-sezzle__text { margin: 0; font-size: clamp(13px, 1vw, 16px); line-height: 1.5; color: var(--nipp-text); }
.nipp-price__pill {
  position: absolute;
  right: 9%; bottom: -14px;
  padding: 9px clamp(28px, 3vw, 46px);
  background: linear-gradient(180deg, #fdd5e4 0%, #fecbdf 100%);
  box-shadow: 0 2px 6px rgba(236, 111, 154, .12);
  border-radius: 999px;
  font-size: clamp(17px, 1.6vw, 24px); font-weight: 700;
  color: var(--nipp-navy-dark);
}

/* ---------- CTA BUTTONS ---------- */
.nipp-ctas {
  grid-area: cta;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 40px;
}
.nipp-btn {
  display: flex; align-items: center; gap: 18px;
  min-height: 84px;
  padding: 14px 28px 14px 30px;
  border-radius: 999px;
  color: #fff; text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.nipp-btn--call { background: var(--nipp-navy-dark); }
.nipp-btn--call:hover { background: #062658; }
.nipp-btn--book { background: var(--nipp-teal); }
.nipp-btn--book:hover { background: var(--nipp-teal-dark); }
.nipp-btn:active { transform: scale(.98); }
.nipp-btn:focus-visible { outline: 3px solid var(--nipp-heart); outline-offset: 3px; }
.nipp-btn__icon { width: 40px; height: 40px; flex-shrink: 0; }
.nipp-btn__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.nipp-btn__title { font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; line-height: 1.2; }
.nipp-btn__sub { font-size: clamp(13px, 1.1vw, 16px); opacity: .9; }
.nipp-btn__arrow { width: 18px; height: 18px; flex-shrink: 0; }


/* ---------- RIGHT PHOTO ---------- */
/* Force the photo to fill its box. Theme/Bootstrap img rules (height:auto, max-width, etc.)
   were overriding this and showing the photo at its full natural size. */
.nipp-hero .nipp-photo img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  object-fit: cover !important;
  display: block !important;
}
.nipp-media { position: relative; min-height: 100%; }
.nipp-photo { position: absolute; top: 0; bottom: 0; left: 0; right: 150px; }  /* room for the feature card */
.nipp-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 100% 50%;   /* keeps the woman pinned to the right edge */
  /* fades the photo's left edge into the clouds */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 90%, transparent 100%);
}
.nipp-note {
  display: none;   /* shown on tablet only, where it has empty space beside the woman */
  position: absolute;
  left: 2%; top: 46%;
  transform: translateY(-50%) rotate(-10deg);
  z-index: 2; margin: 0; max-width: 200px;
  font-family: 'Caveat', 'Brush Script MT', cursive;
  font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; line-height: 1.15;
  color: var(--nipp-navy); text-align: center;
}
.nipp-note svg { display: block; margin: 6px auto 0; width: 32px; height: 32px; }

/* ---------- FEATURE CARD (right side) ---------- */
.nipp-features {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 290px;
  margin: 0; padding: 26px 20px;
  list-style: none;
  display: flex; flex-direction: column; gap: 26px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 26px;
  box-shadow: 0 10px 30px rgba(11, 58, 126, .10);
}
.nipp-feature { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nipp-feature__icon {
  width: 56px; height: 56px; flex-shrink: 0;
  display: grid; place-items: center;
  background: #fff; border-radius: 50%;
  box-shadow: 0 3px 12px rgba(11, 58, 126, .12);
}
.nipp-feature__icon svg { width: 28px; height: 28px; }
.nipp-feature__title { margin: 0; font-size: 17px; font-weight: 600; color: var(--nipp-navy); }
.nipp-feature__text { margin: 2px 0 0; font-size: 14px; color: var(--nipp-text); }

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

/* Laptop (1101px - 1599px), e.g. 1280, 1366, 1440, 1536 screens:
   same layout as the design (text | photo | feature card on the right),
   just scaled down so it fits */
@media (max-width: 1599px) {
  .nipp-top { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); min-height: 560px; }
  .nipp-content {
    grid-template-columns: minmax(240px, 300px) auto;   /* copy | price block, side by side */
    grid-template-areas: "badge badge" "title title" "copy price" "cta cta";
    column-gap: 18px;
    align-content: center;
    padding: 28px 12px 30px 36px;
  }
  .nipp-badge { margin-bottom: 12px; }
  .nipp-badge__icon { width: 52px; height: 52px; }
  .nipp-badge__icon svg { width: 30px; height: 30px; }
  .nipp-badge__text { font-size: 12px; padding: 8px 18px 8px 28px; }
  .nipp-title { font-size: clamp(28px, 2.5vw, 38px); margin-bottom: 12px; }
  .nipp-title__script { font-size: 1.45em; }
  .nipp-copy { max-width: none; margin: 4px 0 0; font-size: 14px; line-height: 1.7; align-self: center; }
  .nipp-price {
    justify-self: start; align-self: center; margin-top: 0;
    padding: 18px 26px 34px; column-gap: 16px;
  }
  .nipp-price__amount { font-size: clamp(40px, 3.6vw, 54px); }
  .nipp-sezzle__logo { height: 30px; margin-bottom: 6px; }
  .nipp-sezzle__title { font-size: 14px; white-space: nowrap; }
  .nipp-sezzle__text { font-size: 13px; }
  .nipp-price__pill { font-size: 17px; padding: 6px 26px; bottom: -14px; }
  .nipp-ctas { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
  .nipp-btn { min-height: 62px; padding: 8px 18px; gap: 12px; }
  .nipp-btn__icon { width: 28px; height: 28px; }
  .nipp-btn__title { font-size: 18px; }
  .nipp-btn__sub { font-size: 13px; }
  .nipp-btn__arrow { width: 14px; height: 14px; }

  .nipp-photo { right: 140px; }   /* the feature card overlaps the photo's right edge */
  .nipp-photo img { object-position: 74% 50%; }   /* keeps face, hands and bump in view */

  .nipp-features {
    right: 14px;
    width: 240px;
    padding: 18px 14px;
    gap: 18px;
    border-radius: 22px;
  }
  .nipp-feature { gap: 10px; }
  .nipp-feature__icon { width: 42px; height: 42px; }
  .nipp-feature__icon svg { width: 21px; height: 21px; }
  .nipp-feature__title { font-size: 14px; }
  .nipp-feature__text { font-size: 12.5px; }
}

/* Smaller laptops: stack the copy above the price so nothing is cramped */
@media (max-width: 1240px) {
  .nipp-content { grid-template-columns: 1fr; grid-template-areas: "badge" "title" "copy" "price" "cta"; }
  .nipp-copy { max-width: 60ch; margin-bottom: 18px; }
}

/* Tablet: photo goes under the content */
@media (max-width: 1100px) {
  .nipp-hero { border-radius: 22px; }
  .nipp-top { grid-template-columns: 1fr; min-height: 0; }
  .nipp-title { font-size: clamp(28px, 4.4vw, 40px); }
  .nipp-btn { min-height: 74px; padding: 14px 24px; gap: 16px; }
  .nipp-btn__icon { width: 36px; height: 36px; }
  .nipp-btn__title { font-size: 20px; }
  .nipp-btn__sub { font-size: 14px; }
  .nipp-content {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    grid-template-areas: "badge badge" "title title" "copy price" "cta cta";
    padding: 28px;
  }
  .nipp-copy { margin: 0; }
  .nipp-ctas { grid-template-columns: 1fr 1fr; gap: 18px; }
  .nipp-media { min-height: 0; }
  .nipp-photo { position: relative; inset: auto; width: 100%; aspect-ratio: 1.4 / 1; }
  .nipp-photo img { position: static; }
  .nipp-photo img {
    object-position: 100% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%), linear-gradient(90deg, transparent 0%, #000 18%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 14%), linear-gradient(90deg, transparent 0%, #000 18%);
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
  }
  .nipp-note { display: block; left: 3%; top: 48%; font-size: clamp(22px, 3.6vw, 30px); max-width: 190px; }
  .nipp-photo { right: auto; }
  .nipp-photo img { object-position: 100% 50%; }
  .nipp-features {
    position: relative; top: auto; right: auto; transform: none;
    width: auto; margin: -40px 16px 16px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px 24px;
  }
  .nipp-feature { gap: 14px; }
  .nipp-feature__icon { width: 52px; height: 52px; }
  .nipp-feature__icon svg { width: 26px; height: 26px; }
  .nipp-feature__title { font-size: 16px; }
  .nipp-feature__text { font-size: 14px; }
}

/* Mobile */
@media (max-width: 640px) {
  .nipp-hero { border-radius: 18px; }
  .nipp-content {
    grid-template-columns: 1fr;
    grid-template-areas: "badge" "title" "copy" "price" "cta";
    padding: 20px 18px 8px;
  }
  .nipp-badge__icon { width: 48px; height: 48px; }
  .nipp-badge__icon svg { width: 28px; height: 28px; }
  .nipp-badge__text { margin-left: -14px; padding: 8px 14px 8px 24px; font-size: 11px; letter-spacing: .04em; }
  .nipp-copy { margin-bottom: 22px; line-height: 1.65; }
  .nipp-price {
    width: 100%;
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding: 24px 26px 42px;
  }
  .nipp-price__divider { width: 100%; height: 2px; margin: 0; background: linear-gradient(90deg, rgba(120,146,177,0) 0%, #7892b1 15%, #7892b1 85%, rgba(120,146,177,0) 100%); }
  .nipp-price__pill { right: 50%; transform: translateX(50%); }
  .nipp-ctas { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .nipp-btn { min-height: 72px; padding: 12px 22px; gap: 14px; }
  .nipp-btn__icon { width: 32px; height: 32px; }
  .nipp-photo { margin-top: 16px; aspect-ratio: 1.05 / 1; }
  .nipp-photo img { object-position: 92% 50%; }
  .nipp-note { display: none; }
  .nipp-features { grid-template-columns: 1fr; margin: -24px 12px 12px; padding: 20px 16px; gap: 16px; }
  .nipp-feature__icon { width: 50px; height: 50px; }
  .nipp-feature__icon svg { width: 26px; height: 26px; }
}

@media (prefers-reduced-motion: reduce) { .nipp-btn { transition: none; } }