/* ===========================================================================
   No1 Princess — Ordering & Catering page (Figma node 450-1466)
   Loads AFTER home.css (tokens + shared header/drawer/contact/footer).
   Section prefix: np-ctr
   =========================================================================== */

/* The active theme colors bare <h2> via a global rule; our headings rely on
   inherited section colors, so set them explicitly to win the cascade. */
.np-ctr-feat__title,
.np-ctr-box__name { color: var(--c-cream); }
.np-ctr-head__title,
.np-ctr-addon__title,
.np-ctr-slide__big,
.np-ctr-slide__steptitle { color: var(--c-dark); }

/* ---- HERO: "Feed the Office. Feed the Party." over a dark cafe photo ----- */
.np-ctr-hero { position: relative; min-height: 100svh; background: var(--c-dark); overflow: hidden; }
.np-ctr-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.np-ctr-hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.10) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%);
}
.np-ctr-hero__inner { position: relative; z-index: 2; min-height: 100svh; }
.np-ctr-hero__head { position: absolute; left: var(--gutter); bottom: 8%; max-width: 760px; }
.np-ctr-hero__eyebrow {
  margin: 0 0 14px; font-family: var(--font-display); font-weight: 400; color: var(--c-cream);
  font-size: clamp(16px, 1.6vw, 24px); letter-spacing: -0.06em; text-transform: uppercase;
}
.np-ctr-hero__title {
  margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--c-cream);
  font-size: clamp(46px, 8.46vw, 128px); line-height: 0.8; letter-spacing: -0.1em;
  text-transform: uppercase; text-shadow: 0 2px 30px rgba(0,0,0,.3);
}
.np-ctr-hero__body {
  position: absolute; left: 50.7%; top: 52%;
  width: min(470px, 38vw); margin: 0; color: #fff;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(15px, 1.32vw, 20px); line-height: 1.6; text-shadow: 0 1px 18px rgba(0,0,0,.4);
}
.np-ctr-hero__cta { position: absolute; left: 50.7%; top: 80%; }
.np-ctr-hero__down { position: absolute; right: 6.5%; top: 64%; width: clamp(96px, 13.2vw, 200px); height: auto; color: #fff; opacity: .9; }

/* Reusable circular CTA used in the hero (light on dark) */
.np-ctr-circle-cta { display: inline-flex; align-items: center; gap: 18px; color: #fff; }
.np-ctr-circle-cta .np-ctr-c {
  width: clamp(86px, 8.4vw, 120px); height: clamp(86px, 8.4vw, 120px); flex: none; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.8); display: grid; place-items: center;
  transition: background-color .3s ease, color .3s ease;
}
.np-ctr-circle-cta:hover .np-ctr-c { background: #fff; color: var(--c-dark); }
.np-ctr-c svg { width: clamp(24px, 2.4vw, 32px); height: clamp(24px, 2.4vw, 32px); }
.np-ctr-circle-cta__label { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.06em; text-transform: uppercase; }

/* ---- FEATURES: 01 / 02 / 03 staggered over dark ------------------------- */
.np-ctr-feats { background: var(--c-dark); color: var(--c-cream); position: relative; overflow: hidden; }
.np-ctr-feats__stage {
  position: relative; width: 100%; max-width: 1512px; margin-inline: auto;
  /* keep the Figma aspect (1512 x 1730) so the absolute placements track */
  aspect-ratio: 1512 / 1730;
}
.np-ctr-feat { position: absolute; width: 24.5%; }      /* 370 / 1512 */
.np-ctr-feat--1 { left: 4.4%;  top: 6.9%; }
.np-ctr-feat--2 { left: 71.2%; top: 35.7%; }
.np-ctr-feat--3 { left: 4.4%;  top: 63.5%; }
.np-ctr-feat__num { font-family: var(--font-display); font-weight: 400; margin: 0; font-size: clamp(56px, 8.46vw, 128px); line-height: 0.9; letter-spacing: -0.1em; }
.np-ctr-feat__title { font-family: var(--font-display); font-weight: 400; margin: 8px 0 0; font-size: clamp(30px, 3.77vw, 57px); line-height: 0.85; letter-spacing: -0.1em; text-transform: uppercase; }
.np-ctr-feat__body { margin: 18px 0 0; font-family: var(--font-body); font-size: clamp(15px, 1.32vw, 20px); line-height: 1.6; color: rgba(246,244,241,.78); }
.np-ctr-feat__img { position: absolute; border-radius: 14px; object-fit: cover; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.np-ctr-feat__img--1 { left: 34.1%; top: 6.9%;  width: 31.7%; aspect-ratio: 1/1; }
.np-ctr-feat__img--2 { left: 42%;   top: 35.7%; width: 19.4%; aspect-ratio: 293/388; }
.np-ctr-feat__img--3 { left: 44%;   top: 63.5%; width: 19.4%; aspect-ratio: 293/388; }
.np-ctr-feats__see { position: absolute; left: 4.4%; bottom: 7%; }

/* ---- A reusable ink circle-link (dark on light / cream on dark) ---------- */
.np-ctr-clink { display: inline-flex; align-items: center; gap: 18px; }
.np-ctr-clink .np-ctr-c2 {
  width: clamp(76px, 7.4vw, 100px); height: clamp(76px, 7.4vw, 100px); flex: none; border-radius: 50%;
  border: 1.5px solid currentColor; display: grid; place-items: center;
  transition: background-color .3s ease, color .3s ease;
}
.np-ctr-clink .np-ctr-c2 svg { width: 24px; height: 24px; }
.np-ctr-clink__label { font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.06em; text-transform: uppercase; }
.np-ctr-feats .np-ctr-clink { color: var(--c-cream); }
.np-ctr-feats .np-ctr-clink:hover .np-ctr-c2 { background: var(--c-cream); color: var(--c-dark); }

/* ---- Generic centred section header ------------------------------------- */
.np-ctr-head { text-align: center; max-width: 870px; margin: 0 auto; }
.np-ctr-head__eyebrow { margin: 0 0 18px; font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: -0.06em; text-transform: uppercase; }
.np-ctr-head__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 4.76vw, 72px); line-height: 1; letter-spacing: -0.1em; text-transform: uppercase; }
.np-ctr-head__sub { margin: 18px auto 0; max-width: 720px; font-family: var(--font-body); font-size: clamp(15px, 1.32vw, 20px); line-height: 1.6; color: rgba(29,29,27,.72); }

/* ---- CATERING BOXES carousel -------------------------------------------- */
.np-ctr-boxes { background: var(--c-cream); color: var(--c-dark); padding-block: clamp(56px, 7.8vw, 118px); }
.np-ctr-boxes__inner { width: 100%; max-width: 1396px; margin-inline: auto; padding-inline: var(--gutter); }
.np-ctr-track {
  display: flex; gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(36px, 4.4vw, 64px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.np-ctr-track::-webkit-scrollbar { display: none; }
.np-ctr-box {
  position: relative; flex: 0 0 92%; max-width: 1280px; scroll-snap-align: center;
  aspect-ratio: 1280 / 900; border-radius: 38px; overflow: hidden;
  background: var(--c-dark); color: var(--c-cream);
}
.np-ctr-box__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.np-ctr-box__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(22px, 3vw, 48px) clamp(24px, 3.4vw, 50px);
  display: flex; align-items: flex-end; gap: 20px;
  background: linear-gradient(180deg, rgba(29,29,27,0) 0%, rgba(29,29,27,.55) 28%, rgba(29,29,27,.94) 70%);
}
.np-ctr-box__txt { flex: 1 1 auto; min-width: 0; }
.np-ctr-box__serves { margin: 0; font-family: var(--font-body); font-size: clamp(13px, 1.05vw, 16px); color: rgba(246,244,241,.7); }
.np-ctr-box__name { margin: 8px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.1vw, 32px); line-height: 1; letter-spacing: -0.1em; text-transform: uppercase; }
.np-ctr-box__desc { margin: 12px 0 0; font-family: var(--font-body); font-size: clamp(14px, 1.32vw, 20px); line-height: 1.6; color: rgba(246,244,241,.78); max-width: 70%; }
.np-ctr-box__price { display: block; margin-top: 16px; font-family: var(--font-body); font-weight: 800; font-size: clamp(18px, 1.6vw, 24px); }
.np-ctr-box__add {
  flex: none; width: clamp(64px, 6.3vw, 96px); height: clamp(64px, 6.3vw, 96px); border-radius: 50%;
  background: #fff; color: var(--c-dark); border: none; display: grid; place-items: center;
  transition: transform .2s ease, background-color .2s ease;
}
.np-ctr-box__add:hover { transform: scale(1.06); background: var(--c-cream); }
.np-ctr-box__add svg { width: 34%; height: 34%; }

/* carousel dots (shared) */
.np-ctr-dots { display: flex; justify-content: center; gap: 12px; margin-top: clamp(28px, 3.4vw, 48px); }
.np-ctr-dot { width: 14px; height: 14px; border-radius: 50%; border: none; padding: 0; background: rgba(29,29,27,.22); cursor: pointer; transition: background-color .2s ease, transform .2s ease; }
.np-ctr-dot.is-active { background: var(--c-dark); transform: scale(1.1); }

/* ---- ROUND OUT THE TABLE: 4 add-on cards -------------------------------- */
.np-ctr-round { background: var(--c-cream); color: var(--c-dark); padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7.8vw, 110px); }
.np-ctr-round__inner { width: 100%; max-width: 1512px; margin-inline: auto; padding-inline: var(--gutter); }
.np-ctr-round__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 22px); margin-top: clamp(36px, 4.4vw, 64px); }
.np-ctr-addon { display: flex; flex-direction: column; }
.np-ctr-addon__media { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 354 / 400; }
.np-ctr-addon__img { width: 100%; height: 100%; object-fit: cover; }
.np-ctr-addon__new {
  position: absolute; top: 14px; right: 14px;
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-cream); color: var(--c-dark);
  font-family: var(--font-display); font-size: 13px; letter-spacing: -0.06em; text-transform: uppercase;
}
.np-ctr-addon__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 18px; }
.np-ctr-addon__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.45vw, 22px); line-height: 1; letter-spacing: -0.08em; text-transform: uppercase; }
.np-ctr-addon__list { margin: 12px 0 0; padding: 0; list-style: none; font-family: var(--font-body); font-size: clamp(13px, 1vw, 14px); line-height: 1.45; color: rgba(29,29,27,.74); }
.np-ctr-addon__price { margin: 10px 0 0; font-family: var(--font-display); font-size: clamp(15px, 1.2vw, 16px); letter-spacing: -0.06em; }
.np-ctr-addon__add {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-dark); color: var(--c-cream);
  border: none; display: grid; place-items: center; transition: transform .2s ease;
}
.np-ctr-addon__add:hover { transform: scale(1.08); }
.np-ctr-addon__add svg { width: 20px; height: 20px; }
.np-ctr-round__more { display: flex; justify-content: center; margin-top: clamp(36px, 4.4vw, 60px); color: var(--c-dark); }
.np-ctr-round .np-ctr-clink:hover .np-ctr-c2 { background: var(--c-dark); color: var(--c-cream); }

/* ---- HOW TO ORDER: 3-slide process carousel ----------------------------- */
.np-ctr-process { background: var(--c-beige); overflow: hidden; }
.np-ctr-process__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.np-ctr-process__track::-webkit-scrollbar { display: none; }
.np-ctr-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(560px, 64.8vw, 980px); }
.np-ctr-slide__media { position: relative; }
.np-ctr-slide__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.np-ctr-slide__panel { background: var(--c-beige); color: var(--c-dark); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(40px, 4.2vw, 64px) clamp(34px, 4.2vw, 64px); }
.np-ctr-slide__eyebrow { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(16px, 1.6vw, 24px); letter-spacing: -0.06em; text-transform: uppercase; }
.np-ctr-steps { display: flex; gap: 14px; margin: 0 0 22px; }
.np-ctr-step-n { font-family: var(--font-display); font-size: clamp(16px, 1.45vw, 22px); letter-spacing: -0.04em; opacity: .35; }
.np-ctr-step-n.is-active { opacity: 1; }
.np-ctr-slide__big { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(54px, 6.35vw, 96px); line-height: 0.9; letter-spacing: -0.1em; text-transform: uppercase; }
.np-ctr-slide__steptitle { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4.23vw, 64px); line-height: 0.95; letter-spacing: -0.1em; text-transform: uppercase; }
.np-ctr-slide__body { margin: 0 0 26px; font-family: var(--font-body); font-size: clamp(15px, 1.32vw, 20px); line-height: 1.6; color: rgba(29,29,27,.78); max-width: 520px; }
.np-ctr-slide__btn {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  padding: 14px 34px; border: 1.5px solid var(--c-dark); color: var(--c-dark);
  font-family: var(--font-body); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.np-ctr-slide__btn:hover { background: var(--c-dark); color: var(--c-cream); }
.np-ctr-process .np-ctr-dots { padding-bottom: clamp(32px, 4vw, 56px); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  .np-ctr-hero__body { left: 50%; top: 30%; width: min(40vw, 320px); }
  .np-ctr-hero__cta  { left: 50%; top: 58%; }
  .np-ctr-hero__down { top: 44%; }

  /* features: drop the absolute stage, stack in flow */
  .np-ctr-feats__stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: clamp(40px, 8vw, 72px); padding-block: clamp(56px, 9vw, 96px); }
  .np-ctr-feat, .np-ctr-feat__img, .np-ctr-feats__see { position: static; }
  .np-ctr-feat { width: 100%; max-width: 560px; }
  .np-ctr-feat__img { width: min(420px, 80%) !important; margin-top: 24px; box-shadow: none; }
  .np-ctr-feats__see { align-self: flex-start; }

  .np-ctr-box { flex-basis: 94%; }
  .np-ctr-round__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 760px) {
  .np-ctr-slide { grid-template-columns: 1fr; }
  .np-ctr-slide__media { min-height: 300px; }
  .np-ctr-box__desc { max-width: 100%; }
  .np-ctr-round__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .np-ctr-round__grid { grid-template-columns: 1fr; }
  .np-ctr-box { flex-basis: 100%; }
}