/* ===========================================================================
   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 { color: var(--c-cream); }
.np-ctr-head__title,
.np-ctr-pk__title,
.np-ctr-extras__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);
}
/* Right side = the home hero's right side (.np-hero__quote / __cta / __down):
   same copy type, the shared spinning-circle button (.np-cbtn, same as "See
   the menu") and the same curved arrow, on the same vertical anchors (copy
   ends 40% up, CTA + arrow sit 15% up, arrow 6.5% in from the right). The
   column starts a little left of the home one so the longer "Start a catering
   order" label stays on one line beside the arrow. */
.np-ctr-hero__body {
  position: absolute; left: 50.7%; bottom: 40%;
  width: min(470px, 40vw); 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__actions {
  position: absolute; left: 50.7%; right: 6.5%; bottom: 15%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.np-ctr-hero__cta { min-width: 0; }
.np-ctr-hero__cta .np-cbtn__label { text-wrap: balance; }
.np-ctr-hero__down { flex: none; width: clamp(88px, 10vw, 133px); opacity: 0.9; }
.np-ctr-hero__down img { width: 100%; height: auto; }

/* ---- 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); }
/* Figma: all three are 267.7 x 370 (unrotated) on the 1512 x 1730 stage, tilted
   -2 / 4 / -4 deg. `rotate` (not transform) so the sticky-stack script's
   translate never overrides the tilt. */
.np-ctr-feat__img--1 { left: 41.16%; top: 7.2%;   width: 17.7%; aspect-ratio: 267.7 / 370; rotate: -2deg; }
.np-ctr-feat__img--2 { left: 42.8%;  top: 36.2%;  width: 17.7%; aspect-ratio: 267.7 / 370; rotate: 4deg; }
.np-ctr-feat__img--3 { left: 44.78%; top: 64.06%; width: 17.7%; aspect-ratio: 267.7 / 370; rotate: -4deg; }
.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); --global-palette-highlight-alt: var(--c-cream); /* same when focused/pressed (see home.css `a`) */ }
.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); }

/* ---- WHAT WE CATER: package card carousels (Figma 1104:2718 + 1104:3011) --
   Two sections with rounded bottoms: "events" on beige with white cards and
   "boxes" on cream with beige cards + Event Extras. The card track runs from
   the content's left edge to the screen's right edge, so the next card peeks
   in; its dots follow how far it's scrolled (data-np-progress, catering.js). */
.np-ctr-cater {
  /* a size container, so the card row can span the section's full width with
     cqw (100vw would include the scrollbar, and on phones it feeds back into
     the viewport while GSAP measures the pin) */
  container-type: inline-size;
  color: var(--c-dark); overflow-x: clip;
  padding-block: clamp(64px, 7.67vw, 116px) clamp(60px, 7.47vw, 113px);
  border-radius: 0 0 clamp(28px, 3.84vw, 58px) clamp(28px, 3.84vw, 58px);
}
.np-ctr-cater-wrap { background: #f8f6f2; } /* Figma page colour, seen in the rounded corners */
.np-ctr-cater--events { background: var(--c-beige); }
.np-ctr-cater--boxes  { background: var(--c-cream); }
.np-ctr-cater__inner { width: 100%; max-width: calc(1280px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* Figma spaces these by the letters' cap height (trimmed text boxes), so the
   margins here are smaller than its 32px gaps to land the text in the same spots. */
.np-ctr-cater .np-ctr-head__eyebrow { line-height: 0.8; margin-bottom: clamp(12px, 1.25vw, 19px); letter-spacing: -0.1em; }
.np-ctr-cater .np-ctr-head__sub { margin-top: clamp(10px, 0.8vw, 12px); max-width: none; font-weight: 500; color: var(--c-dark); }

.np-ctr-pk-track {
  display: flex; align-items: stretch; gap: 8px;
  margin-top: clamp(40px, 4.23vw, 64px);
  /* full screen width, like What's On's "Fresh this month": cards slide out
     past both screen edges, while the matching side padding keeps the first
     card in line with the content at the start and the last one at the end.
     Vertical padding keeps the card shadows from being clipped. */
  margin-inline: calc((100% - 100cqw) / 2);
  padding: 4px calc((100cqw - 100%) / 2) 28px;
  scroll-padding-inline: calc((100cqw - 100%) / 2);
  margin-bottom: -28px;
  overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.np-ctr-pk-track::-webkit-scrollbar { display: none; }
.np-ctr-cater--boxes .np-ctr-pk-track { gap: 16px; }

.np-ctr-pk {
  /* relative: anchors the size picker's visually hidden legend, which would
     otherwise escape the track's clipping and widen the page on phones */
  position: relative;
  flex: 0 0 min(421px, 84vw); scroll-snap-align: start; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 522px; padding: 24px; border-radius: 12px; background: #fff;
}
.np-ctr-pk--boxes { flex-basis: min(419px, 84vw); min-height: 532px; background: var(--c-beige); box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.np-ctr-pk__body { display: flex; flex-direction: column; gap: 16px; }
.np-ctr-pk__head { display: flex; flex-direction: column; gap: 3px; } /* Figma 8px between cap-trimmed boxes */
.np-ctr-pk__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.65vw, 40px); line-height: 1; letter-spacing: -0.1em; text-transform: uppercase; }
.np-ctr-pk__sub { margin: 0; font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.4; }
.np-ctr-pk__list { margin: 0; padding: 0 0 0 24px; list-style: disc; font-family: var(--font-body); font-size: 16px; }
.np-ctr-pk--events .np-ctr-pk__list { font-weight: 800; line-height: 1.4; }
.np-ctr-pk--events .np-ctr-pk__list li + li { margin-top: 3.6px; }
.np-ctr-pk--boxes .np-ctr-pk__list { font-weight: 500; line-height: 1.6; color: rgba(29,29,27,.7); }
.np-ctr-pk--boxes .np-ctr-pk__list li + li { margin-top: 4px; }

/* Mini Bagel Party Box: its three size lines double as the size picker — a
   ring where the list has a bullet, filled + darker when chosen. */
.np-ctr-pk__sizes { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.np-ctr-pk__size {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.6; color: rgba(29,29,27,.7);
}
.np-ctr-pk__size input {
  appearance: none; -webkit-appearance: none; flex: none; box-sizing: border-box;
  width: 12px; height: 12px; margin: 0 0 0 2px; padding: 0;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer;
}
.np-ctr-pk__size input:checked { background: var(--c-dark); border-color: var(--c-dark); }
.np-ctr-pk__size input:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 2px; }
.np-ctr-pk__size:has(input:checked) { color: var(--c-dark); font-weight: 800; }
.np-ctr-pk__sizes + .np-ctr-pk__list { margin-top: -12px; } /* one list in Figma: 4px, not the 16px block gap */

.np-ctr-pk__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-ctr-pk__price {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2;
  letter-spacing: -0.1em; text-transform: uppercase; white-space: nowrap; color: var(--c-dark);
}
.np-ctr-pk--events .np-ctr-pk__price { color: #404040; }
/* "Add to Cart" — a WooCommerce AJAX add-to-cart link. Scoped under the card so
   it outranks the parent theme's global link/button rules. */
.np-ctr-pk .np-ctr-pk__add {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 14px; box-sizing: border-box; /* 48 x 176 like Figma (its border is inside) */
  border: 2px solid var(--c-dark); border-radius: 0; background: transparent; color: var(--c-dark);
  --global-palette-highlight-alt: var(--c-dark); /* same when focused/pressed (see home.css `a`) */
  font-family: var(--font-body); font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: 0;
  text-transform: uppercase; text-decoration: none; box-shadow: none;
  transition: background-color .2s ease, color .2s ease;
}
.np-ctr-pk .np-ctr-pk__add svg { display: block; flex: none; width: 24px; height: 24px; }
.np-ctr-pk .np-ctr-pk__add:hover,
.np-ctr-pk .np-ctr-pk__add:focus-visible { background: var(--c-dark); color: var(--c-cream); --global-palette-highlight-alt: var(--c-cream); }
.np-ctr-pk .np-ctr-pk__add.loading { opacity: .55; pointer-events: none; }
.np-ctr-pk .np-ctr-pk__add.added::after { display: none; } /* WooCommerce's tick */
.np-ctr-pk__foot .added_to_cart { display: none; } /* WooCommerce's "View cart" — the drawer opens instead */

.np-ctr-cater .np-ctr-dots { margin-top: clamp(32px, 4.23vw, 64px); }
.np-ctr-cater .np-ctr-dot { width: clamp(14px, 1.65vw, 25px); height: clamp(14px, 1.65vw, 25px); background: rgba(29,29,27,.3); }
.np-ctr-cater .np-ctr-dot.is-active { background: var(--c-dark); transform: none; }
.np-ctr-cater__carousel.is-static .np-ctr-dots { display: none; } /* every card fits: nothing to page through */

/* Pinned row (catering.js adds .is-pinrow — the What's On "Fresh this month"
   scroll): page scroll drives the track, so no snapping, smooth-scrolling or
   manual swiping while it's on. A section shorter than the screen reaches
   down to the fold, so nothing below shows through while it's pinned. */
.np-ctr-cater.is-pinrow .np-ctr-pk-track { overflow-x: hidden; scroll-snap-type: none; scroll-behavior: auto; }
.np-ctr-cater.is-pinrow { min-height: calc(100svh - var(--np-ctr-hdr, 92px)); }

/* Event Extras: 4 columns of bullets under the boxes */
.np-ctr-extras { margin-top: clamp(40px, 4.23vw, 64px); }
.np-ctr-extras__title { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.65vw, 40px); line-height: 1; letter-spacing: -0.1em; text-transform: uppercase; }
.np-ctr-extras__list {
  margin: 0; padding: 0; list-style: disc; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.6; color: rgba(29,29,27,.7);
}
.np-ctr-extras__list li { margin-left: 24px; }

/* 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__price .amount,
.np-ctr-addon__price bdi { font: inherit; color: inherit; text-decoration: none; }
/* Cart button — a WooCommerce AJAX add-to-cart link. Scoped under the card so
   it outranks the parent theme's global button/link rules (their padding
   pushed the icon off-centre and their hover turned it white-on-white).
   padding:0 keeps the icon dead centre; the ring is always drawn (dark on
   dark) so the hover swap doesn't shift anything. Hover: white fill, dark
   ring, dark icon. */
.np-ctr-addon .np-ctr-addon__add {
  flex: none; width: 44px; height: 44px; padding: 0; box-sizing: border-box;
  border-radius: 50%; border: 1.5px solid var(--c-dark);
  background: var(--c-dark); color: var(--c-cream);
  display: grid; place-items: center; box-shadow: none; text-decoration: none;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.np-ctr-addon .np-ctr-addon__add:hover,
.np-ctr-addon .np-ctr-addon__add:focus-visible {
  background: #fff; color: var(--c-dark); border-color: var(--c-dark);
  transform: scale(1.08); box-shadow: none;
}
.np-ctr-addon__add svg { display: block; width: 20px; height: 20px; }
.np-ctr-addon .np-ctr-addon__add.loading { opacity: .55; pointer-events: none; }
/* WooCommerce appends a "View cart" link after adding — the drawer opens instead */
.np-ctr-addon__foot .added_to_cart { display: none; }
.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; }
/* Centred crop by default; a step's own Figma crop is set inline from
   page-catering.php ($np_steps). */
.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);
  --global-palette-highlight-alt: var(--c-dark); /* same when focused/pressed */
  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); }

/* ---- Pinned horizontal scroll ([data-np-hscroll] carousels) ---------------
   catering.js adds .is-hscroll to the section on desktop/tablet screens tall
   enough to fit a card: the carousel pins just under the fixed header,
   vertical scrolling slides the track sideways, and once the last card is in
   place the page scrolls on. The track moves by transform, so native
   overflow + scroll-snap are switched off. --np-ctr-hdr = header height. */
.is-hscroll [data-np-track] { position: relative; overflow: visible; scroll-snap-type: none; scroll-behavior: auto; }

/* Process: each slide fills the screen under the header. Every slide already
   shows its own 01 / 02 / 03, so the dots step aside; type also scales with
   the viewport height so a whole slide fits on shorter screens. */
.np-ctr-process.is-hscroll .np-ctr-slide { min-height: 0; height: calc(100svh - var(--np-ctr-hdr, 92px)); }
.np-ctr-process.is-hscroll .np-ctr-dots { display: none; }
.np-ctr-process.is-hscroll .np-ctr-slide__panel { padding-block: clamp(28px, min(4.2vw, 6vh), 64px); }
.np-ctr-process.is-hscroll .np-ctr-slide__big { font-size: clamp(54px, min(6.35vw, 10.7vh), 96px); }
.np-ctr-process.is-hscroll .np-ctr-slide__steptitle { font-size: clamp(34px, min(4.23vw, 7.1vh), 64px); }

/* Process "dissolve" (catering.js adds .is-dissolve): the section pins under
   the header and the three slides sit stacked in one grid cell. The first
   slide draws everything; slides 2-3 only add their photo and step text (which
   the script cross-fades) — their copies of the eyebrow, 01/02/03, heading and
   button are hidden and their panels are see-through and not clickable. */
.np-ctr-process.is-dissolve [data-np-track] { display: grid; overflow: visible; scroll-snap-type: none; scroll-behavior: auto; }
.np-ctr-process.is-dissolve .np-ctr-slide { grid-area: 1 / 1; min-height: 0; height: calc(100svh - var(--np-ctr-hdr, 92px)); }
.np-ctr-process.is-dissolve .np-ctr-slide + .np-ctr-slide { pointer-events: none; }
.np-ctr-process.is-dissolve .np-ctr-slide + .np-ctr-slide .np-ctr-slide__panel { background: none; }
.np-ctr-process.is-dissolve .np-ctr-slide + .np-ctr-slide :is(.np-ctr-slide__eyebrow, .np-ctr-steps, .np-ctr-slide__big, .np-ctr-slide__btn) { visibility: hidden; }
.np-ctr-process.is-dissolve .np-ctr-dots { display: none; }
.np-ctr-process.is-dissolve .np-ctr-slide__panel { padding-block: clamp(28px, min(4.2vw, 6vh), 64px); }
.np-ctr-process.is-dissolve .np-ctr-slide__big { font-size: clamp(54px, min(6.35vw, 10.7vh), 96px); }
.np-ctr-process.is-dissolve .np-ctr-slide__steptitle { font-size: clamp(34px, min(4.23vw, 7.1vh), 64px); }

/* Phones: the same dissolve on the stacked layout (photo above, text below),
   filling the screen under the header. The track's two rows are shared by all
   three slides (subgrid), so every photo is the same height and every text
   panel the same size whatever each step's text length: only the photo and
   step text change as they cross-fade. The photo takes the height the text
   leaves. Tall phones (~844px) get the phone carousel's type and spacing;
   shorter screens tighten the spacing and the two headings first (svh), and
   only then does catering.js zoom the text panels, so the photo keeps 30%. */
@media (max-width: 760px) {
  .np-ctr-process.is-dissolve [data-np-track] { grid-template-rows: minmax(0, 1fr) auto; height: calc(100svh - var(--np-ctr-hdr, 92px)); }
  .np-ctr-process.is-dissolve .np-ctr-slide { grid-area: 1 / 1 / 3 / 2; grid-template-rows: subgrid; height: auto; }
  .np-ctr-process.is-dissolve .np-ctr-slide__media { min-height: 0; }
  .np-ctr-process.is-dissolve .np-ctr-slide__panel { gap: clamp(12px, 2.8svh, 24px); padding-block: clamp(18px, 3.8svh, 32px); }
  .np-ctr-process.is-dissolve .np-ctr-slide__eyebrow { margin-bottom: clamp(8px, 1.9svh, 16px); }
  .np-ctr-process.is-dissolve .np-ctr-steps { margin-bottom: clamp(10px, 2.6svh, 22px); }
  .np-ctr-process.is-dissolve .np-ctr-slide__big { font-size: clamp(40px, 6.4svh, 54px); }
  .np-ctr-process.is-dissolve .np-ctr-slide__steptitle { margin-bottom: clamp(8px, 1.9svh, 16px); font-size: clamp(28px, 4svh, 34px); }
  .np-ctr-process.is-dissolve .np-ctr-slide__body { margin-bottom: clamp(14px, 3.1svh, 26px); }
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 1024px) {
  /* same tablet placement + 84px circle as the home hero */
  .np-ctr-hero__body { left: 50%; top: 30%; bottom: auto; width: min(42vw, 320px); }
  .np-ctr-hero__actions { left: 50%; top: 54%; bottom: auto; align-items: center; }
  .np-ctr-hero__cta .np-cbtn__circle { width: 84px; height: 84px; }

  /* 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); padding-inline: var(--gutter); }
  .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%); margin-top: 24px; box-shadow: none; }
  .np-ctr-feats__see { align-self: flex-start; }

  .np-ctr-round__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .np-ctr-extras__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* too narrow for the label + arrow side by side (the Events hero does the same) */
  .np-ctr-hero__down { display: none; }
}
@media (max-width: 760px) {
  .np-ctr-slide { grid-template-columns: 1fr; }
  .np-ctr-slide__media { min-height: 300px; }
  .np-ctr-round__grid { grid-template-columns: 1fr 1fr; }
  /* cards size to their content; the row still matches the tallest card */
  .np-ctr-pk, .np-ctr-pk--boxes { min-height: 0; }
}
@media (max-width: 480px) {
  .np-ctr-round__grid { grid-template-columns: 1fr; }
  .np-ctr-extras__list { grid-template-columns: 1fr; }
  /* price + "Add to Cart" (~290px) don't fit side by side in a phone-width
     card, so the button takes its own full-width row under the price */
  .np-ctr-pk__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .np-ctr-pk .np-ctr-pk__add { width: 100%; }
}

/* ---- Phones: the 01 / 02 / 03 features take the home page's After Hours menu
        layout (#afterhours-menu, home.css at ≤900 / ≤700px): number, title and
        text, then the photo below it — full width up to 320px, 3:4, straight —
        24px apart, same type sizes. Home's rows carry 10px padding, so items
        are 48 + 2×10 = 68px apart, the first starts 80 + 10px down and the
        closing link sits 10 + 7px under the last photo, back at the gutter.
        The section keeps its dark colours. -------------------------------- */
@media (max-width: 700px) {
  .np-ctr-feats__stage { gap: 24px; padding-block: 90px 80px; padding-inline: calc(var(--gutter) + 10px); }
  .np-ctr-feat--2, .np-ctr-feat--3 { margin-top: 44px; }
  .np-ctr-feats__see { margin: -7px 0 0 -10px; }
  .np-ctr-feat { max-width: 100%; }
  .np-ctr-feat__num { font-size: clamp(56px, 16vw, 100px); letter-spacing: -0.05em; }
  .np-ctr-feat__title { margin-top: 6px; font-size: 34px; line-height: 1; letter-spacing: -0.05em; }
  .np-ctr-feat__body { margin-top: 20px; font-size: 16px; font-weight: 500; }
  .np-ctr-feat__img {
    width: 100%; max-width: 320px; aspect-ratio: 3 / 4; margin-top: 0;
    rotate: 0deg; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18);
  }
}

/* ---- Phones: the hero is an absolute "collage" tuned only down to 1024px, so
        below that the body text floats in a cramped 40vw column and the CTA /
        down-arrow overlap. Convert the hero to a normal stacked flow anchored to
        the bottom of the photo (over the darkest part of the scrim). ---------- */
@media (max-width: 600px) {
  .np-ctr-hero__inner {
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--gutter) clamp(40px, 12vw, 72px);
    gap: clamp(16px, 5vw, 26px);
  }
  .np-ctr-hero__head,
  .np-ctr-hero__body,
  .np-ctr-hero__actions {
    position: static; left: auto; right: auto; top: auto; bottom: auto;
  }
  .np-ctr-hero__head { max-width: 100%; }
  .np-ctr-hero__title { font-size: clamp(44px, 15vw, 76px); }
  .np-ctr-hero__body { width: 100%; max-width: 100%; }
  /* keep the circle + label on one comfortable row at phone widths */
  .np-ctr-hero__cta { gap: 14px; }
  .np-ctr-hero__cta .np-cbtn__circle { width: 72px; height: 72px; }
  .np-ctr-hero__cta .np-cbtn__label { font-size: clamp(16px, 4.8vw, 22px); }
}