@charset "utf-8";
/* ============================================================================
   Naya Savera — home page
   ----------------------------------------------------------------------------
   Loaded by the redesigned pages (index.php, team-naya-savera.php). The page carries its own header markup and its own
   `lx-` components, so almost nothing here fights the legacy theme. Rules that
   DO touch shared markup — footer.php and its "Our Awareness & Services" block
   — are scoped to body.ns-lx, so every other page renders as before.

   Brand hues only; the logo orange is reserved for actions.
     #ff6600 orange · #c9954a bronze · #9bc83c green · #0f1f16 forest
     #faf8f3 ivory  · #f2ece1 cream
   ========================================================================== */

body.ns-lx {
  --orange: #ff6600;
  --orange-600: #e65c00;
  --bronze: #c9954a;
  --bronze-dark: #a97a37;
  --green: #9bc83c;
  --forest: #0f1f16;
  --forest-2: #16291d;
  --ivory: #faf8f3;
  --cream: #f2ece1;
  --white: #fff;
  --ink: #16261c;
  --body: #55625a;
  --muted: #8c968f;
  --line: rgba(15, 31, 22, .12);
  --line-soft: rgba(15, 31, 22, .07);
  --line-light: rgba(255, 255, 255, .15);

  /* rounded language */
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15, 31, 22, .04), 0 8px 24px rgba(15, 31, 22, .06);
  --shadow-md: 0 2px 6px rgba(15, 31, 22, .05), 0 22px 50px rgba(15, 31, 22, .10);
  --shadow-lg: 0 6px 14px rgba(15, 31, 22, .06), 0 40px 80px rgba(15, 31, 22, .15);

  --display: 'Montserrat', sans-serif;
  --label: 'Montserrat', sans-serif;
  --text: 'Open Sans', sans-serif;

  --gutter: clamp(18px, 3.2vw, 60px);
  --bar-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  background: var(--ivory);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The legacy theme floats these; a floated ancestor puts descendants into a
   shrink-to-fit context, which collapses grids whose tracks can resolve to 0. */
body.ns-lx #wrapper,
body.ns-lx #main,
body.ns-lx #banner,
body.ns-lx .price-plans-section,
body.ns-lx #footer { float: none; width: 100%; }
/* `overflow-x: hidden` computes overflow-y to auto, which makes #main a scroll
   container and breaks position:sticky inside it. `clip` contains the same
   overflow without creating one. */
body.ns-lx #main { overflow-x: clip; background: var(--ivory); }

body.ns-lx .lx-wrap { width: 100%; padding: 0 var(--gutter); box-sizing: border-box; }
body.ns-lx .lx-section { padding: clamp(64px, 8vw, 132px) 0; position: relative; }

body.ns-lx a:focus-visible,
body.ns-lx button:focus-visible,
body.ns-lx input:focus-visible,
body.ns-lx textarea:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

/* reveal-on-scroll (targets are assigned by the inline script) */
body.ns-lx .lx-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms);
}
body.ns-lx .lx-reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------------
   HEADER — one line
   ------------------------------------------------------------------------- */

body.ns-lx .lx-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(250, 248, 243, .9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
body.ns-lx .lx-header.is-stuck {
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 30px rgba(15, 31, 22, .08);
}
body.ns-lx .lx-bar {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--bar-h);
  padding: 0 var(--gutter);
}
body.ns-lx .lx-logo { flex: none; margin: 0; display: block; line-height: 0; }
body.ns-lx .lx-logo img { display: block; height: 46px; width: auto; transition: opacity .25s ease; }
body.ns-lx .lx-logo a:hover img { opacity: .75; }

body.ns-lx .lx-nav { flex: 1 1 auto; min-width: 0; }
body.ns-lx .lx-nav > ul {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 2px; margin: 0; padding: 0; list-style: none;
}
body.ns-lx .lx-nav > ul > li { position: relative; }
body.ns-lx .lx-nav > ul > li > a {
  position: relative;
  display: block;
  padding: 11px 14px;
  border-radius: var(--r-pill);
  font: 600 10.5px/1 var(--label);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .24s ease, background .24s ease;
}
body.ns-lx .lx-nav > ul > li > a:hover,
body.ns-lx .lx-nav > ul > li.is-current > a { color: var(--bronze-dark); background: rgba(201, 149, 74, .12); }

body.ns-lx .lx-nav ul ul {
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 208px; margin: 0; padding: 8px; list-style: none;
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
body.ns-lx .lx-nav li.has-sub:hover > ul,
body.ns-lx .lx-nav li.has-sub:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
body.ns-lx .lx-nav ul ul a {
  display: block; padding: 11px 14px; border-radius: var(--r-sm);
  font: 400 13px/1.5 var(--text); color: var(--body); text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
body.ns-lx .lx-nav ul ul a:hover { background: var(--ivory); color: var(--ink); }

body.ns-lx .lx-bar__cta { flex: none; min-height: 46px; padding: 13px 24px; font-size: 10px; }

body.ns-lx .lx-burger {
  display: none; flex: none;
  width: 48px; height: 44px; margin-left: auto; padding: 0;
  border: 1px solid var(--line); background: none; border-radius: var(--r-pill); cursor: pointer;
}
body.ns-lx .lx-burger span {
  display: block; width: 20px; height: 1.5px; margin: 4px auto;
  background: var(--ink); transition: transform .3s ease, opacity .3s ease;
}
body.ns-lx .lx-header.is-open .lx-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.ns-lx .lx-header.is-open .lx-burger span:nth-child(2) { opacity: 0; }
body.ns-lx .lx-header.is-open .lx-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------------------------------------------------------------------------
   PRIMITIVES
   ------------------------------------------------------------------------- */

body.ns-lx .lx-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font: 600 10px/1 var(--label); letter-spacing: .3em; text-transform: uppercase;
  color: var(--bronze-dark); margin-bottom: 22px;
}
body.ns-lx .lx-eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--bronze); }
/* pale tone: at 10px this is small text needing 4.5:1, which full-strength
   bronze cannot reach over the brighter slides */
body.ns-lx .lx-eyebrow--light { color: #e8cfa4; }
/* Over the hero PHOTOGRAPHS even the pale bronze falls short. Measured against
   all five slides it bottoms out at 3.1:1 on hero-5 (the bright room) — white
   takes the same point to 5.6:1. Elsewhere the pale bronze sits on flat black
   and clears easily, so the accent is kept there and only overridden here.
   The 40px rule before it stays bronze: decoration is contrast-exempt. */
body.ns-lx .lx-hero .lx-eyebrow--light { color: #fff; }

/* custom.css hangs a grey 35px bar off EVERY h2 via `.campers-theme h2::before`.
   Kill it once for the whole page rather than per section. */
body.ns-lx #main h2::before,
body.ns-lx #main h2::after,
body.ns-lx .price-plans-section h2::before,
body.ns-lx .price-plans-section h2::after { display: none; }

body.ns-lx .lx-head { margin: 0 0 48px; }
/* The measure cap MUST live on the h2, not the wrapper: `ch` resolves against
   the element's own font-size, and the wrapper inherits 14px body text — so a
   cap here would squeeze a 42px headline into a ~200px column. */
body.ns-lx .lx-head h2 {
  font: 700 clamp(25px, 3.4vw, 42px) / 1.18 var(--display);
  letter-spacing: -.024em; color: var(--ink); text-transform: none; margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
body.ns-lx .lx-head--onDark h2 { color: var(--white); }
body.ns-lx .lx-head--center { text-align: center; }
body.ns-lx .lx-head--center h2 { max-width: 26ch; margin-left: auto; margin-right: auto; }
body.ns-lx .lx-head--center .lx-eyebrow::before { display: none; }

body.ns-lx .lx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 56px; padding: 17px 34px;
  border-radius: var(--r-pill);
  font: 600 11px/1.5 var(--label); letter-spacing: .17em; text-transform: uppercase;
  text-align: center; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
body.ns-lx .lx-btn:hover { text-decoration: none; transform: translateY(-2px); }
body.ns-lx .lx-btn--call {
  background: var(--orange); color: var(--white);
  box-shadow: 0 12px 30px rgba(255, 102, 0, .30);
}
body.ns-lx .lx-btn--call:hover { background: var(--orange-600); color: var(--white); box-shadow: 0 18px 40px rgba(255, 102, 0, .38); }
body.ns-lx .lx-btn--call .fa { font-size: 14px; }

body.ns-lx .lx-btn--onDark {
  /* own dark bed rather than a translucent white one: this button sits over a
     photograph that will change, so it must not depend on what is behind it */
  background: rgba(0, 0, 0, .42); color: var(--white);
  border-color: rgba(255, 255, 255, .34);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: pre-line;
}
body.ns-lx .lx-btn--onDark:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

body.ns-lx .lx-btn--outline {
  background: none; color: var(--ink); border-color: rgba(15, 31, 22, .22);
  min-height: 48px; padding: 14px 28px; font-size: 10px;
}
body.ns-lx .lx-btn--outline:hover { background: var(--forest); color: var(--white); border-color: var(--forest); }

/* ---------------------------------------------------------------------------
   HERO — full screen
   ------------------------------------------------------------------------- */

body.ns-lx .lx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--forest);
  min-height: calc(100vh - var(--bar-h));
  min-height: calc(100svh - var(--bar-h));
  display: flex;
  align-items: center;
  padding: 48px 0 76px;
}
/* The carousel itself is the background. Owl still drives the sliding; these
   rules just make it fill the hero and crop with object-fit instead of sitting
   in a frame. */
/* Layer order inside the hero (which is isolate, so this is self-contained):
     bg  = auto  -> images
     ::before = 1 -> the scrim
     __wrap   = 2 -> the copy
   The scrim used to be z-index:-1, the SAME as the background layer. With equal
   z-index paint order falls back to DOM order, and ::before is generated as the
   first child — so the images painted straight over the gradient and it was
   never visible. The bg layer deliberately takes no z-index of its own, so the
   Owl pagination inside it can still sit above the scrim. */
body.ns-lx .lx-hero__bg {
  position: absolute; inset: 0;
  background: url(../images/footer-bg.jpg) center 38% / cover no-repeat;
  transform: scale(1.05);
}
/* Copy sits bottom-left, the classic billboard position, with the gradient
   heaviest under it. */
body.ns-lx .lx-hero--bgslides {
  align-items: flex-end;
  padding-top: clamp(56px, 10vh, 120px);
  padding-bottom: clamp(56px, 9vh, 110px);
}
body.ns-lx .lx-hero--bgslides .lx-hero__bg {
  background: var(--forest);
  transform: none;
  overflow: hidden;
}
/* Height is forced to fill the hero; WIDTH is deliberately left to Owl, which
   sets a pixel width on each item. Overriding it with 100% resolves against
   the wrapper (items x count) and blew each slide up to ~10000px wide. */
body.ns-lx .lx-hero--bgslides .lx-hero__bg #banner,
body.ns-lx .lx-hero--bgslides .lx-hero__bg #home-banner,
body.ns-lx .lx-hero--bgslides .lx-hero__bg .owl-wrapper-outer,
body.ns-lx .lx-hero--bgslides .lx-hero__bg .owl-wrapper,
body.ns-lx .lx-hero--bgslides .lx-hero__bg .owl-item,
body.ns-lx .lx-hero--bgslides .lx-hero__bg .item {
  height: 100% !important;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  background: none;
}
body.ns-lx .lx-hero--bgslides .lx-hero__bg #banner,
body.ns-lx .lx-hero--bgslides .lx-hero__bg #home-banner { width: 100%; }
/* Shown whole — no zoom, no crop beyond what `cover` needs for the sides. */
body.ns-lx .lx-hero--bgslides .lx-hero__bg .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
body.ns-lx .lx-hero--bgslides .lx-hero__bg .caption { display: none; }
/* pagination sits bottom-right, clear of the headline */
body.ns-lx .lx-hero--bgslides .lx-hero__bg .owl-controls { margin: 0; }
body.ns-lx .lx-hero--bgslides .lx-hero__bg .owl-pagination {
  position: absolute; right: var(--gutter); bottom: 26px; left: auto;
  text-align: right; z-index: 2;
}
body.ns-lx .lx-hero--bgslides .lx-hero__bg .owl-page span {
  width: 7px; height: 7px; margin: 0 4px;
  border-radius: 999px; background: rgba(255,255,255,.5); opacity: 1;
  transition: background .3s ease, width .3s ease;
}
body.ns-lx .lx-hero--bgslides .lx-hero__bg .owl-page.active span { background: var(--bronze); width: 24px; }
body.ns-lx .lx-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(9, 18, 13, .94) 0%, rgba(9, 18, 13, .80) 40%, rgba(9, 18, 13, .46) 72%, rgba(9, 18, 13, .60) 100%);
}
/* Netflix billboard, their three layers in their order:
     1. a 77deg ramp, rgba(0,0,0,.6) -> transparent by 85%
     2. a second 90deg ramp, rgba(0,0,0,.4) -> transparent by 60%
     3. the signature bottom fade into the PAGE colour, so the hero melts into
        the section beneath instead of ending on a hard edge
   Netflix fades to #141414 because their page is dark; ours fades to ivory for
   the same reason. That is why the copy sits in the upper-left band — below
   the midpoint the fade is lifting toward ivory and white text would wash out.
   Image is never cropped or zoomed; the gradients do all the work. */
/* Solved against the five slides in images/hero/, not eyeballed, and tuned so
   the photographs stay visible — they are the reason anyone trusts this page.
   Only applies at >=992px: the block below switches the hero to an uncropped
   band on phones and turns this ::before off entirely.

   KNOWN LIMITATION, accepted on purpose. These stops are percentages of the
   HERO, but the headline wraps to more lines as the window narrows, so the
   copy climbs into the light part of the ramp. Worst-case headline contrast:
   3.4:1 at 1920 (AA wants 3.0), but 2.0:1 at 1440 and 1.6:1 at 1280/1000.
   A scrim anchored to .lx-hero__copy fixes this at every width and was built,
   but it reads as a dark blob behind the text and was rejected on looks. If
   you revisit it, scope the fix to 992-1599px so ~1920 keeps this exact
   appearance, and note that a pseudo-element paints only inside its own box —
   a radial gradient must reach fully transparent BEFORE that box ends or the
   box edge shows up as a hard rectangle over the photograph. See README. */
body.ns-lx .lx-hero--bgslides::before {
  background:
    /* 1. horizontal ramp — holds on the left under the copy, then clears
       completely by 80%. Everything right of the headline is untouched
       photograph. */
    linear-gradient(90deg,
      rgba(0, 0, 0, .78) 0%,
      rgba(0, 0, 0, .74) 22%,
      rgba(0, 0, 0, .30) 50%,
      rgba(0, 0, 0, .02) 66%,
      rgba(0, 0, 0, 0) 80%),
    /* 2. vertical ramp, deliberately shallow through the middle. Its real job
       is the bottom fade that melts the hero into the black section beneath,
       and that starts at 90% rather than 80% — reclaiming a tenth of the frame
       height that used to be black for no legibility reason at all. */
    linear-gradient(180deg,
      rgba(0, 0, 0, .02) 0%,
      rgba(0, 0, 0, .02) 30%,
      rgba(0, 0, 0, .24) 40%,
      rgba(0, 0, 0, .88) 90%,
      rgb(0, 0, 0) 100%);
}
body.ns-lx .lx-hero__wrap { width: 100%; position: relative; z-index: 2; }
body.ns-lx .lx-hero__grid { display: grid; gap: 44px; align-items: center; }
body.ns-lx .lx-hero__copy, body.ns-lx .lx-hero__media { min-width: 0; }

body.ns-lx .lx-hero__title {
  font: 700 clamp(33px, 5.2vw, 66px) / 1.07 var(--display);
  letter-spacing: -.034em; color: var(--white); text-transform: none;
  margin: 0 0 38px; max-width: 15ch; text-wrap: balance;
}
body.ns-lx .lx-cta-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; }

body.ns-lx .lx-scrollcue {
  position: absolute; left: 50%; bottom: -46px;
  width: 42px; height: 42px; margin-left: -21px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-pill);
  color: rgba(255, 255, 255, .72); font-size: 20px;
  animation: lxBob 2.4s ease-in-out infinite;
}
@keyframes lxBob { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(7px); opacity: 1; } }

/* Campaign carousel — larger, rounded. The three images carry baked-in text,
   so they are shown whole at their native 2.81:1, never cropped or overlaid. */
body.ns-lx .lx-hero__media #banner {
  background: var(--forest);
  line-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5);
  outline: 1px solid rgba(255, 255, 255, .18);
  outline-offset: -1px;
}
body.ns-lx .lx-hero__media #banner .item img { width: 100%; height: auto; display: block; }
body.ns-lx .lx-hero__media #banner .caption { display: none; }
body.ns-lx .lx-hero__media #banner .owl-controls { margin: 0; position: relative; }
body.ns-lx .lx-hero__media #banner .owl-controls .owl-pagination {
  position: absolute; left: 0; right: 0; bottom: 14px; text-align: center;
}
body.ns-lx .lx-hero__media #banner .owl-controls .owl-page span {
  width: 7px; height: 7px; margin: 0 5px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .5); opacity: 1;
  transition: background .3s ease, width .3s ease;
}
body.ns-lx .lx-hero__media #banner .owl-controls .owl-page.active span { background: var(--bronze); width: 26px; }

/* ---------------------------------------------------------------------------
   INTRO
   ------------------------------------------------------------------------- */

/* The hero fades to black, so the band beneath it IS black — no seam. Text
   inverts to light for the whole dark run (intro + showcase). */
body.ns-lx .lx-intro { background: #000; }
body.ns-lx .lx-lead { max-width: 1180px; margin: 0 auto; }
body.ns-lx .lx-lead em {
  display: block;
  font: italic 400 clamp(19px, 2.6vw, 32px) / 1.62 var(--text);
  color: rgba(255, 255, 255, .94);
  letter-spacing: -.008em;
}
body.ns-lx .lx-lead a {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 26px; padding: 13px 26px;
  border-radius: var(--r-pill);
  background: rgba(201, 149, 74, .18);
  font: 600 10.5px/1 var(--label); font-style: normal;
  letter-spacing: .17em; text-transform: uppercase;
  color: #e8cfa4; text-decoration: none; white-space: nowrap;
  transition: background .28s ease, color .28s ease, transform .28s ease;
  opacity: 1 !important; /* the reveal never dims the call to action */
}
body.ns-lx .lx-lead a:hover { background: var(--orange); color: var(--white); transform: translateY(-2px); }

/* Scroll-reveal words. Deliberately no opacity here: the dim value is written
   inline by the script on its first pass. That makes the effect inherently
   fail-safe — no script, no inline styles, paragraph reads at full contrast,
   and there is no CSS state that can strand it dim. */
body.ns-lx .lx-lead.is-split .lx-word {
  transition: opacity .18s linear;
  will-change: opacity;
}

/* 16:9. NOT the padding-bottom trick — percentage padding resolves against the
   PARENT's width, so any .lx-video with its own max-width (the programme one is
   capped at 1100px inside an 1880px wrap) came out far too tall. aspect-ratio
   resolves against the element's own width, which is what we want. The
   padding-bottom pair below is only a fallback for engines without it. */
body.ns-lx .lx-video {
  position: relative; overflow: hidden;
  padding-bottom: 56.25%; height: 0;
  background: var(--forest);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
@supports (aspect-ratio: 16 / 9) {
  body.ns-lx .lx-video { padding-bottom: 0; height: auto; aspect-ratio: 16 / 9; }
}
body.ns-lx .lx-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.ns-lx .lx-video--wide { max-width: 1100px; margin: 44px auto 0; border-radius: var(--r-xl); }

/* ---------------------------------------------------------------------------
   SHOWCASE — video grows from a contained card to full bleed on scroll
   ------------------------------------------------------------------------- */

body.ns-lx .lx-showcase { background: #000; padding-bottom: clamp(48px, 6vw, 96px); }
/* Without JS this is just a wide, contained video — no sticky, no tall track. */
body.ns-lx .lx-showcase__track { position: relative; }
body.ns-lx .lx-showcase__sticky {
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--gutter);
}
body.ns-lx .lx-showcase__frame {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  /* White matte. The section behind is #000 and the video's own footage is
     dark, so a rounded dark rectangle on black read as no corners at all.
     This is a box-shadow ring rather than a border or padding on purpose: the
     scroll-expand sizing solves --cap off this element's own width, and any
     change to its box model would feed straight back into that. A shadow
     paints outside the box and costs the layout nothing. Spread follows
     border-radius, so the ring is rounded too. */
  box-shadow: 0 0 0 clamp(6px, .62vw, 11px) #fff;
}
/* An iframe is composited on its own layer and is NOT reliably clipped by a
   rounded parent with overflow:hidden — the corners render square. Putting the
   radius on the iframe itself is the only dependable fix. */
/* White, not the default forest green: this is what shows in the instant
   before the YouTube iframe paints, and it keeps the matte reading as one
   continuous white frame rather than a white ring around a dark green box. */
body.ns-lx .lx-showcase__frame .lx-video { border-radius: inherit; box-shadow: none; background: #fff; }
body.ns-lx .lx-showcase__frame .lx-video iframe { border-radius: inherit; }
body.ns-lx .lx-video iframe { border-radius: inherit; }

/* Live version, switched on by the script. */
body.ns-lx .lx-showcase.is-live .lx-showcase__track { height: 210vh; }
body.ns-lx .lx-showcase.is-live .lx-showcase__sticky {
  position: sticky;
  top: var(--bar-h);
  height: calc(100vh - var(--bar-h));
  height: calc(100svh - var(--bar-h));
  overflow: hidden;
}
body.ns-lx .lx-showcase.is-live .lx-showcase__frame {
  --p: 0;
  /* Final size: fills the gutter-inset width, but never taller than the sticky
     panel allows, so the 16:9 frame is never cropped. */
  --cap: min(100%, calc((100svh - var(--bar-h) - 64px) * 1.7778));
  /* Scale from 62% OF THE FINAL SIZE, so the growth is the same proportion on
     every screen. Keying the start off the container width instead made the
     effect all but invisible on wide, short displays — on 2560x1080 it started
     at 1504px against a 1671px cap, about 11% of growth. */
  width: calc(var(--cap) * (0.62 + 0.38 * var(--p)));
  max-width: var(--cap);
  border-radius: var(--r-xl);
  /* Keep the white matte here too — this rule is more specific than the base
     .lx-showcase__frame and was silently dropping the ring. The soft drop
     shadow that used to be alone on this line is invisible against #000, so
     the ring is what actually defines the frame's shape. */
  box-shadow: 0 0 0 clamp(6px, .62vw, 11px) #fff, 0 40px 90px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------------------------
   WHAT WE TREAT — numbered editorial list over a photograph
   ------------------------------------------------------------------------- */

body.ns-lx .lx-treat {
  background:
    linear-gradient(180deg, rgba(9, 18, 13, .86) 0%, rgba(9, 18, 13, .78) 100%),
    url(../images/testimonials-bg-1.jpg) center / cover no-repeat;
  color: var(--white);
}
body.ns-lx .lx-list { list-style: none; margin: 0; padding: 0; counter-reset: lx; }
body.ns-lx .lx-list li { margin: 0 0 12px; padding: 0; counter-increment: lx; }
body.ns-lx .lx-list li:last-child { margin-bottom: 0; }
body.ns-lx .lx-list h3 { margin: 0; }
body.ns-lx .lx-list h3 a {
  position: relative;
  display: flex; align-items: center; gap: 22px;
  padding: 26px 28px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, .88);
  font: 700 clamp(14px, 1.7vw, 17px) / 1.4 var(--label);
  letter-spacing: .1em; text-decoration: none;
  transition: background .34s ease, border-color .34s ease, color .34s ease, transform .34s var(--ease);
}
/* generated numerals — presentational, not page content */
body.ns-lx .lx-list h3 a::before {
  content: "0" counter(lx);
  flex: none;
  font: 700 11px/1 var(--label);
  letter-spacing: .12em;
  color: var(--bronze);
  opacity: .85;
}
body.ns-lx .lx-list h3 a::after {
  content: "\f178"; /* fa-long-arrow-right */
  font-family: FontAwesome; font-size: 16px; color: var(--bronze);
  margin-left: auto; flex: none;
  opacity: 0; transform: translateX(-12px);
  transition: opacity .34s ease, transform .34s ease;
}
body.ns-lx .lx-list h3 a:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(201, 149, 74, .55);
  color: var(--white);
  transform: translateX(8px);
}
body.ns-lx .lx-list h3 a:hover::after { opacity: 1; transform: translateX(0); }

/* ---------------------------------------------------------------------------
   PROGRAMME
   ------------------------------------------------------------------------- */

body.ns-lx .lx-programme { background: var(--cream); text-align: center; }
body.ns-lx .lx-lede {
  font: 400 clamp(15px, 1.9vw, 17.5px) / 1.9 var(--text);
  color: var(--body); max-width: 700px; margin: 0 auto 12px;
}
body.ns-lx .lx-lede strong {
  display: inline-block; margin-top: 18px;
  padding: 9px 22px; border-radius: var(--r-pill);
  background: rgba(201, 149, 74, .16);
  font: 600 10px/1.6 var(--label); letter-spacing: .26em; text-transform: uppercase;
  color: var(--bronze-dark);
}

/* ---------------------------------------------------------------------------
   CENTRES — image cards with the name set over the photograph
   ------------------------------------------------------------------------- */

body.ns-lx .lx-centres { background: var(--ivory); position: relative; }
/* closes the dark run that starts at the hero */
body.ns-lx .lx-centres::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
body.ns-lx .lx-centres > .lx-wrap { position: relative; z-index: 1; }
body.ns-lx .lx-centres { padding-top: clamp(170px, 14vw, 230px); }
body.ns-lx .lx-centres__grid { display: grid; gap: 30px; }
body.ns-lx .lx-centre {
  background: var(--white);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: box-shadow .45s ease, transform .45s var(--ease);
}
body.ns-lx .lx-centre:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
body.ns-lx .lx-centre__media { position: relative; line-height: 0; background: var(--cream); overflow: hidden; }
body.ns-lx .lx-centre__media img {
  width: 100%; height: 300px; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
body.ns-lx .lx-centre:hover .lx-centre__media img { transform: scale(1.07); }
body.ns-lx .lx-centre__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 18, 13, 0) 38%, rgba(9, 18, 13, .82) 100%);
}
body.ns-lx .lx-centre__label {
  position: absolute; left: 26px; right: 26px; bottom: 22px; z-index: 1;
  line-height: 1.2;
}
body.ns-lx .lx-centre__kicker {
  display: block;
  font: 600 9.5px/1 var(--label); letter-spacing: .3em; text-transform: uppercase;
  color: var(--bronze); margin-bottom: 9px;
}
body.ns-lx .lx-centre__name {
  display: block;
  font: 700 30px/1.15 var(--display); letter-spacing: -.025em; color: var(--white);
}
body.ns-lx .lx-centre__body { padding: 22px 26px 26px; display: flex; }
body.ns-lx .lx-centre__body .lx-btn { width: 100%; }

/* ---------------------------------------------------------------------------
   CONTACT + ENQUIRY
   ------------------------------------------------------------------------- */

body.ns-lx .lx-contact { background: var(--forest); position: relative; overflow: hidden; }
body.ns-lx .lx-contact::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 100% 0%, rgba(201, 149, 74, .16) 0%, rgba(201, 149, 74, 0) 62%);
  pointer-events: none;
}
body.ns-lx .lx-contact__grid { position: relative; display: grid; gap: 44px; align-items: start; }
body.ns-lx .lx-contact__side, body.ns-lx .lx-contact__form { min-width: 0; }

body.ns-lx .lx-numbers { display: grid; gap: 16px; }
body.ns-lx .lx-number {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 28px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .3s ease, border-color .3s ease;
}
body.ns-lx .lx-number:hover { background: rgba(255, 255, 255, .08); border-color: rgba(201, 149, 74, .4); }
body.ns-lx .lx-number > span {
  font: 600 9.5px/1.5 var(--label); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
}
body.ns-lx .lx-number > strong { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
body.ns-lx .lx-number a {
  font: 700 clamp(20px, 2.3vw, 26px) / 1.2 var(--display); letter-spacing: -.02em;
  color: var(--white); text-decoration: none; transition: color .24s ease;
}
body.ns-lx .lx-number a:hover { color: var(--orange); }
body.ns-lx .lx-number .fa-whatsapp { color: #25d366; font-size: 24px; }

body.ns-lx .lx-social { margin-top: 30px; }
body.ns-lx .lx-social ul {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin: 0 0 20px; padding: 0; list-style: none;
}
body.ns-lx .lx-social ul li a {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-light); border-radius: var(--r-pill);
  color: rgba(255, 255, 255, .7); font-size: 15px; text-decoration: none;
  transition: background .26s ease, color .26s ease, border-color .26s ease, transform .26s ease;
}
body.ns-lx .lx-social ul li a:hover {
  background: var(--bronze); border-color: var(--bronze); color: var(--forest); transform: translateY(-3px);
}
body.ns-lx .lx-email {
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 15px/1.5 var(--text); color: rgba(255, 255, 255, .7);
  text-decoration: none; transition: color .24s ease;
}
body.ns-lx .lx-email:hover { color: var(--bronze); }

/* form sits on a lifted card so it reads as the primary action here */
body.ns-lx .lx-contact__form {
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .11);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* legacy theme hangs a grey 35px bar off every h2::before */
body.ns-lx .lx-contact__form h2::before,
body.ns-lx .lx-contact__form h2::after { display: none; }
body.ns-lx .lx-contact__form h2 {
  font: 700 clamp(23px, 3.2vw, 34px) / 1.24 var(--display); letter-spacing: -.024em;
  color: var(--white); text-transform: none; margin: 0 0 32px;
}
body.ns-lx .lx-form { display: grid; grid-template-columns: 1fr; gap: 22px 20px; }
body.ns-lx .lx-field { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
body.ns-lx .lx-field label {
  font: 600 9.5px/1 var(--label); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
body.ns-lx .lx-field input[type="text"],
body.ns-lx .lx-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  font: 400 16px/1.6 var(--text); color: var(--white);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
body.ns-lx .lx-field textarea { min-height: 104px; height: auto; resize: vertical; }
body.ns-lx .lx-field input[type="text"]::placeholder,
body.ns-lx .lx-field textarea::placeholder { color: rgba(255, 255, 255, .34); }
body.ns-lx .lx-field input[type="text"]:focus,
body.ns-lx .lx-field textarea:focus {
  outline: none;
  border-color: var(--bronze);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 4px rgba(201, 149, 74, .14);
}
body.ns-lx .lx-field .g-recaptcha { max-width: 100%; overflow-x: auto; }
body.ns-lx .lx-form input[type="submit"] {
  min-height: 56px; padding: 18px 46px;
  border: 0; border-radius: var(--r-pill);
  background: var(--orange); color: var(--white);
  font: 600 11px/1 var(--label); letter-spacing: .17em; text-transform: uppercase;
  cursor: pointer; justify-self: start;
  box-shadow: 0 12px 30px rgba(255, 102, 0, .30);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
body.ns-lx .lx-form input[type="submit"]:hover {
  background: var(--orange-600); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255, 102, 0, .38);
}

/* ---------------------------------------------------------------------------
   FAQ — native details/summary accordion, no JavaScript
   ------------------------------------------------------------------------- */

body.ns-lx .lx-faq { background: var(--cream); }
body.ns-lx .lx-faq__list {
  max-width: 940px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
  counter-reset: faq;
}
body.ns-lx .lx-faq__item {
  counter-increment: faq;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .28s ease, box-shadow .28s ease;
}
body.ns-lx .lx-faq__item[open] { border-color: rgba(201, 149, 74, .5); box-shadow: var(--shadow-sm); }

body.ns-lx .lx-faq__item > summary {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  font: 700 clamp(14.5px, 1.5vw, 16.5px) / 1.5 var(--display);
  letter-spacing: -.01em;
  color: var(--ink);
  transition: color .24s ease, background .24s ease;
}
/* hide the native disclosure marker in every engine */
body.ns-lx .lx-faq__item > summary::-webkit-details-marker { display: none; }
body.ns-lx .lx-faq__item > summary::marker { content: ""; }
body.ns-lx .lx-faq__item > summary:hover { color: var(--bronze-dark); background: rgba(201, 149, 74, .05); }

/* generated numeral — presentational, not page content */
body.ns-lx .lx-faq__item > summary::before {
  content: "0" counter(faq);
  flex: none;
  font: 700 11px/1.9 var(--label);
  letter-spacing: .12em;
  color: var(--bronze);
}
body.ns-lx .lx-faq__item > summary > span { flex: 1 1 auto; min-width: 0; }
/* the +/− indicator */
body.ns-lx .lx-faq__item > summary::after {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 4px;
  background:
    linear-gradient(var(--bronze-dark), var(--bronze-dark)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--bronze-dark), var(--bronze-dark)) center / 1.5px 100% no-repeat;
  transition: transform .32s var(--ease), opacity .28s ease;
}
body.ns-lx .lx-faq__item[open] > summary::after { transform: rotate(135deg); }
body.ns-lx .lx-faq__item[open] > summary { color: var(--bronze-dark); }

body.ns-lx .lx-faq__body { padding: 0 26px 24px calc(26px + 22px + 18px); }
body.ns-lx .lx-faq__body p {
  font: 400 15px/1.85 var(--text);
  color: var(--body);
  margin: 0 0 14px;
}
body.ns-lx .lx-faq__body p:last-child { margin-bottom: 0; }
body.ns-lx .lx-faq__body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
body.ns-lx .lx-faq__body ul li {
  position: relative;
  padding-left: 20px;
  font: 400 15px/1.7 var(--text);
  color: var(--body);
}
body.ns-lx .lx-faq__body ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: .68em;
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--bronze);
}

@media (max-width: 767px) {
  body.ns-lx .lx-faq__item > summary { padding: 18px 18px; gap: 12px; }
  body.ns-lx .lx-faq__body { padding: 0 18px 20px calc(18px + 22px + 12px); }
}

/* ---------------------------------------------------------------------------
   INNER PAGES — compact page head + team roster + shared sidebar form
   ------------------------------------------------------------------------- */

/* Keeps this page's own banner photograph (services-banner.jpg — verified as
   the one the original actually rendered; #inner-banner also declares
   inner-banner.jpg but .services-banner wins). It is soft and dated, so it is
   scrimmed the way the home hero is: the photo carries atmosphere, the
   gradient carries the legibility. */
body.ns-lx .lx-pagehead {
  position: relative;
  overflow: hidden;
  /* default banner; pages with their own use a --<page> modifier below */
  background-image: url(../images/services-banner.jpg);
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--forest);
  /* tall enough to give the photograph room; content sits low, magazine-style */
  min-height: 58vh;
  min-height: 58svh;
  display: flex;
  align-items: flex-end;
  padding: clamp(90px, 10vw, 150px) 0 clamp(48px, 5vw, 76px);
}
body.ns-lx .lx-pagehead > .lx-wrap { width: 100%; }
/* Each page keeps the banner the original rendered — verified in the browser,
   not inferred from selector specificity, which got it wrong once already. */
body.ns-lx .lx-pagehead--treatment { background-image: url(../images/treatment-banner.jpg); }
body.ns-lx .lx-pagehead--gallery { background-image: url(../images/gallery-banner.jpg); }
body.ns-lx .lx-pagehead--panchakarma { background-image: url(../images/panchkarma.jpg); }
body.ns-lx .lx-pagehead--contact { background-image: url(../images/contact-banner.jpg); }
body.ns-lx .lx-pagehead--faq { background-image: url(../images/faq-banner.jpg); }
body.ns-lx .lx-pagehead--centre { background-image: url(../images/centre-banner.jpg); }
body.ns-lx .lx-pagehead--enquiry { background-image: url(../images/enquiry-banner.jpg); }
body.ns-lx .lx-pagehead--faq { background-image: url(../images/faq-banner.jpg); }
body.ns-lx .lx-pagehead--centre { background-image: url(../images/centre-banner.jpg); }
body.ns-lx .lx-pagehead--enquiry { background-image: url(../images/enquiry-banner.jpg); }
/* panchkarma.jpg is far brighter than the other banners — measured 162 average
   luminance behind the text against 32-64 for the rest — so the shared scrim
   left white text at only ~3:1. Deeper at the foot where the breadcrumb and H1
   sit, still light across the top so the image reads. */
body.ns-lx .lx-pagehead--panchakarma::before {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, .04) 0%,
      rgba(0, 0, 0, .26) 32%,
      rgba(0, 0, 0, .78) 60%,
      rgba(0, 0, 0, .94) 84%,
      rgb(0, 0, 0) 100%),
    radial-gradient(65% 110% at 100% 0%, rgba(201, 149, 74, .10) 0%, rgba(201, 149, 74, 0) 55%);
}
/* Scrim sized from the images, not guessed. Measured over the bottom-left area
   where the H1 sits: treatment-banner is already 4.7:1 for white text bare, and
   services-banner needs only ~0.27 black for 4.5:1. So the wash is neutral
   black (not the green-black it was), nearly clear across the top so the
   photograph reads, and weighted to the foot where the text actually is —
   ~0.66 there, which puts both banners past 7:1. */
body.ns-lx .lx-pagehead::before {
  content: "";
  position: absolute; inset: 0;
  /* Decisive black ramp rather than a light even wash. Average contrast is not
     enough over a busy photograph — bright detail behind individual letters
     still breaks legibility — so the foot goes to solid black and the text sits
     on that, independent of whatever image is behind. The top stays fully clear
     so the photograph still reads. */
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, .16) 32%,
      rgba(0, 0, 0, .60) 60%,
      rgba(0, 0, 0, .90) 84%,
      rgb(0, 0, 0) 100%),
    radial-gradient(65% 110% at 100% 0%, rgba(201, 149, 74, .12) 0%, rgba(201, 149, 74, 0) 55%);
  pointer-events: none;
}

/* The black carries on into whatever section follows, so the hero bleeds into
   the page instead of stopping at a hard edge. */
body.ns-lx .lx-pagehead + .lx-section { position: relative; }
body.ns-lx .lx-pagehead + .lx-section::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 130px;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
/* content clears the bleed */
body.ns-lx .lx-pagehead + .lx-section > .lx-wrap { position: relative; z-index: 1; }
body.ns-lx .lx-pagehead + .lx-section { padding-top: clamp(150px, 13vw, 210px); }
body.ns-lx .lx-pagehead .lx-wrap { position: relative; }
body.ns-lx .lx-pagehead h1 {
  font: 700 clamp(28px, 4.2vw, 50px) / 1.14 var(--display);
  letter-spacing: -.032em;
  color: var(--white);
  text-transform: none;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
/* breadcrumb — legacy .breadcrumb is a bootstrap pill; strip it back */
body.ns-lx .lx-crumbs { margin: 0 0 20px; }
body.ns-lx .lx-crumbs .breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px;
  margin: 0; padding: 0; background: none; border-radius: 0; list-style: none;
}
body.ns-lx .lx-crumbs .breadcrumb > li {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 10px/1 var(--label); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
body.ns-lx .lx-crumbs .breadcrumb > li + li::before {
  content: "/"; padding: 0; color: rgba(255, 255, 255, .3);
}
/* Pale bronze rather than the full-strength accent: at 10px this is small text
   needing 4.5:1, and #c9954a cannot reach that over the lighter banners. */
body.ns-lx .lx-crumbs .breadcrumb > li > a { color: #e8cfa4; text-decoration: none; transition: color .22s ease; }
body.ns-lx .lx-crumbs .breadcrumb > li > a:hover { color: var(--white); }
body.ns-lx .lx-crumbs .breadcrumb > li.active { color: rgba(255, 255, 255, .78); }

/* --- Article pages (about) ------------------------------------------------ */

body.ns-lx .lx-article { background: var(--ivory); }
/* Contained, unlike the page head and the gallery. Running text cannot fill a
   full-bleed column — it caps out at a ~70-character measure — so a full-width
   grid left ~730px of dead space beside the prose. The block is centred and the
   column itself is now the measure. */
body.ns-lx .lx-article__grid {
  display: grid; gap: 44px; align-items: start;
  max-width: 1180px; margin-left: auto; margin-right: auto;
}
body.ns-lx .lx-article__main { min-width: 0; }
body.ns-lx .lx-article .lx-head { margin-bottom: 30px; }
body.ns-lx .lx-article .lx-head h2.title {
  font: 700 clamp(24px, 3.2vw, 36px) / 1.22 var(--display);
  letter-spacing: -.024em; color: var(--ink); text-transform: none; margin: 0;
  max-width: none; /* the generic .lx-head h2 caps at 22ch — not wanted here */
}
/* The font-size lives on the wrapper so `ch` resolves against the reading size.
   Putting the measure cap on a wrapper that inherits 14px body text would give
   ~529px instead of ~636px — the same trap as the section headings. */
body.ns-lx .lx-prose {
  font: 400 clamp(15.5px, 1.2vw, 18.5px) / 1.85 var(--text);
  max-width: none; /* the column is the measure — see .lx-article__grid */
}
body.ns-lx .lx-prose p {
  font: inherit;
  color: var(--body);
  margin: 0 0 22px;
}
body.ns-lx .lx-prose p:last-child { margin-bottom: 0; }
/* opening paragraph reads as a lead */
body.ns-lx .lx-prose p:first-child {
  font-size: clamp(17px, 1.4vw, 19.5px);
  line-height: 1.75;
  color: var(--ink);
  padding-left: 26px;
  border-left: 2px solid var(--bronze);
}
body.ns-lx .lx-prose a {
  color: var(--bronze-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 149, 74, .45);
  transition: color .24s ease, border-color .24s ease;
}
body.ns-lx .lx-prose a:hover { color: var(--orange); border-bottom-color: var(--orange); }

/* Lead image above an article */
body.ns-lx .lx-figure {
  float: none; width: 100%; margin: 0 0 36px; line-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--cream);
}
body.ns-lx .lx-figure img { width: 100%; height: auto; display: block; }

/* Service blocks: heading + its paragraphs, grouped. The source wraps these
   headings in <u>; the element is kept and the underline turned off here, so
   the markup and the document outline are untouched. */
body.ns-lx .lx-services { display: grid; gap: 0; }
body.ns-lx .lx-service {
  padding: 28px 0 30px;
  border-top: 1px solid var(--line-soft);
}
body.ns-lx .lx-service:first-child { padding-top: 0; border-top: 0; }
body.ns-lx .lx-service:last-child { padding-bottom: 0; }
body.ns-lx .lx-service u { text-decoration: none; }
body.ns-lx .lx-service h2 {
  position: relative;
  margin: 0 0 14px;
  padding-left: 20px;
  font: 700 clamp(17px, 1.45vw, 21px) / 1.35 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
  text-transform: none;
}
/* bronze rule standing in for the old underline. #main is in the selector to
   outrank the page-wide `#main h2::before { display:none }` reset, which kills
   the legacy grey bar but would otherwise kill this too. */
body.ns-lx #main .lx-service > h2::before,
body.ns-lx #main .lx-service > u > h2::before {
  content: "";
  display: block;
  position: absolute;
  left: 0; top: .28em; bottom: .28em;
  width: 3px;
  /* the legacy rule sets height:2px, and an explicit height beats top+bottom on
     an absolutely positioned box — without this the bar is a 3x2px dot */
  height: auto;
  border-radius: 2px;
  background: var(--bronze);
}
body.ns-lx .lx-service p:last-child { margin-bottom: 0; }

/* the three centre links at the foot of the article */
body.ns-lx .lx-linkcards {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; gap: 12px;
}
body.ns-lx .lx-linkcards li { margin: 0; padding: 0; background: none; }
body.ns-lx .lx-linkcards li::before,
body.ns-lx .lx-linkcards li::after { display: none; }
body.ns-lx .lx-linkcards li a {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px; padding: 18px 22px;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  font: 600 14.5px/1.45 var(--text);
  text-decoration: none;
  transition: border-color .28s ease, transform .28s var(--ease), box-shadow .28s ease;
}
body.ns-lx .lx-linkcards li a::before {
  content: "\f105"; font-family: FontAwesome; font-size: 16px; line-height: 1;
  color: var(--bronze); flex: none; transition: transform .28s ease;
}
body.ns-lx .lx-linkcards li a:hover {
  border-color: rgba(201, 149, 74, .5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
body.ns-lx .lx-linkcards li a:hover::before { transform: translateX(4px); }

/* --- Panchakarma page -----------------------------------------------------
   Uses the article shell, plus three components: a tick list, therapy cards
   built around the existing bronze line-art icons, and quote cards. */

/* headings inside the prose keep the document's own h3/h4 levels */
body.ns-lx .lx-prose h3,
body.ns-lx .lx-therapy h4 {
  margin: 30px 0 12px;
  font: 700 clamp(17px, 1.5vw, 21px) / 1.35 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
  text-transform: none;
}
body.ns-lx .lx-prose h3:first-child { margin-top: 0; }
body.ns-lx .lx-prose h3 strong,
body.ns-lx .lx-therapy h4 strong { font-weight: inherit; }
body.ns-lx .lx-prose ul {
  margin: 0 0 20px; padding: 0 0 0 22px; list-style: none;
}
body.ns-lx .lx-prose ul > li {
  position: relative; margin: 0 0 9px; padding: 0;
  background: none; border: 0;
}
body.ns-lx .lx-prose ul > li::before {
  content: ""; position: absolute; left: -18px; top: .62em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--bronze);
}
body.ns-lx .lx-prose--lead p {
  font-size: clamp(17px, 1.4vw, 19.5px);
  line-height: 1.75;
  color: var(--ink);
  padding-left: 26px;
  border-left: 2px solid var(--bronze);
}

/* tick list — the "signs" and "why choose" lists */
body.ns-lx .lx-checks {
  list-style: none; margin: 0 0 6px; padding: 0;
  display: grid; gap: 10px;
}
body.ns-lx .lx-checks > li {
  position: relative;
  margin: 0;
  padding: 15px 18px 15px 50px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  font: 400 clamp(15px, 1.1vw, 16.5px) / 1.6 var(--text);
  color: var(--body);
  transition: border-color .28s ease, transform .28s var(--ease);
}
body.ns-lx .lx-checks > li::before {
  content: "\f00c"; /* fa-check */
  font-family: FontAwesome;
  font-size: 11px;
  position: absolute; left: 17px; top: 50%;
  width: 20px; height: 20px; margin-top: -10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(201, 149, 74, .16);
  color: var(--bronze-dark);
}
body.ns-lx .lx-checks > li:hover { border-color: rgba(201, 149, 74, .5); transform: translateX(3px); }

/* text beside the vertical video */
body.ns-lx .lx-panch__split { display: grid; gap: 30px; align-items: start; margin: 8px 0 6px; }
body.ns-lx .lx-panch__video { min-width: 0; }
body.ns-lx .lx-panch__video iframe {
  display: block; width: 100%; max-width: 320px; margin: 0 auto;
  border: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  background: var(--forest);
}

/* therapy cards */
body.ns-lx .lx-therapies { display: grid; gap: 16px; margin: 6px 0 10px; }
body.ns-lx .lx-therapy {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: 1fr;
  padding: 24px 24px 22px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}
body.ns-lx .lx-therapy:hover {
  border-color: rgba(201, 149, 74, .5);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
body.ns-lx .lx-therapy__icon {
  flex: none;
  width: 74px; height: 74px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(201, 149, 74, .12);
}
body.ns-lx .lx-therapy__icon img {
  float: none !important;
  width: 46px; height: 46px; display: block; max-width: none;
}
body.ns-lx .lx-therapy__body { min-width: 0; }
body.ns-lx .lx-therapy__body h4 { margin-top: 0; }
body.ns-lx .lx-therapy__body p,
body.ns-lx .lx-therapy__body li {
  font: 400 clamp(14.5px, 1.05vw, 16px) / 1.7 var(--text);
  color: var(--body);
}
body.ns-lx .lx-therapy__body p { margin: 0 0 12px; }
body.ns-lx .lx-therapy__body ul { margin: 0; padding: 0 0 0 22px; list-style: none; }
body.ns-lx .lx-therapy__body ul > li { position: relative; margin: 0 0 8px; background: none; border: 0; }
body.ns-lx .lx-therapy__body ul > li:last-child { margin-bottom: 0; }
body.ns-lx .lx-therapy__body ul > li::before {
  content: ""; position: absolute; left: -18px; top: .62em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--bronze);
}

/* testimonials band */
body.ns-lx .lx-quotes { background: var(--cream); }
body.ns-lx .lx-quotes .lx-head h3 {
  margin: 0;
  font: 700 clamp(23px, 3.2vw, 34px) / 1.24 var(--display);
  letter-spacing: -.024em; color: var(--ink); text-transform: none;
}
body.ns-lx .lx-quotes .lx-head h3 strong { font-weight: inherit; }
body.ns-lx .lx-quotes__grid { display: grid; gap: 22px; }
body.ns-lx .lx-quote {
  position: relative;
  margin: 0;
  padding: 34px 30px 30px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
body.ns-lx .lx-quote::before {
  content: "\f10d"; /* fa-quote-left */
  font-family: FontAwesome;
  font-size: 20px;
  color: var(--bronze);
  opacity: .5;
  display: block;
  margin-bottom: 12px;
}
body.ns-lx .lx-quote p {
  margin: 0;
  font: italic 400 clamp(14.5px, 1.05vw, 16px) / 1.8 var(--text);
  color: var(--body);
}
body.ns-lx .lx-quotes__cta { margin: 34px 0 0; text-align: center; }
body.ns-lx .lx-quotes__cta a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 17px 34px;
  border-radius: var(--r-pill);
  background: var(--orange); color: var(--white);
  font: 600 11px/1.5 var(--label); letter-spacing: .17em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(255, 102, 0, .26);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
body.ns-lx .lx-quotes__cta a:hover {
  background: var(--orange-600); color: var(--white);
  transform: translateY(-2px); box-shadow: 0 18px 40px rgba(255, 102, 0, .34);
}

@media (min-width: 620px) {
  body.ns-lx .lx-therapy { grid-template-columns: auto minmax(0, 1fr); }
}
@media (min-width: 900px) {
  body.ns-lx .lx-panch__split { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 36px; }
}
@media (min-width: 992px) {
  body.ns-lx .lx-quotes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
}

/* --- Generic article content ----------------------------------------------
   The bulk-converted pages keep their own markup inside .lx-prose, so these
   rules cover whatever the legacy content happens to contain. */

body.ns-lx .lx-prose h2 {
  margin: 34px 0 14px;
  font: 700 clamp(19px, 1.8vw, 25px) / 1.3 var(--display);
  letter-spacing: -.02em; color: var(--ink); text-transform: none;
}
body.ns-lx .lx-prose h2:first-child { margin-top: 0; }
body.ns-lx .lx-prose h2.title {
  font-size: clamp(23px, 3vw, 34px); letter-spacing: -.024em; margin-bottom: 22px;
}
body.ns-lx .lx-prose h4 {
  margin: 24px 0 10px;
  font: 700 clamp(15px, 1.25vw, 17px) / 1.4 var(--display);
  letter-spacing: -.01em; color: var(--ink); text-transform: none;
}
body.ns-lx .lx-prose h2 u,
body.ns-lx .lx-prose h3 u,
body.ns-lx .lx-prose h4 u { text-decoration: none; }
body.ns-lx .lx-prose h1 {
  margin: 30px 0 14px;
  font: 700 clamp(21px, 2vw, 27px) / 1.28 var(--display);
  letter-spacing: -.02em; color: var(--ink); text-transform: none;
}
body.ns-lx .lx-prose ol { margin: 0 0 20px; padding-left: 22px; }
body.ns-lx .lx-prose ol > li { margin: 0 0 9px; }
body.ns-lx .lx-prose img {
  max-width: 100%; height: auto;
  border-radius: var(--r-md);
}
body.ns-lx .lx-prose .frame { margin: 0 0 26px; line-height: 0; }
body.ns-lx .lx-prose table {
  width: 100%; margin: 0 0 24px;
  border-collapse: collapse;
  font: 400 15px/1.7 var(--text);
}
body.ns-lx .lx-prose table td,
body.ns-lx .lx-prose table th {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  vertical-align: top;
}
body.ns-lx .lx-prose strong { color: var(--ink); }
body.ns-lx .lx-prose .tips-detail-list { list-style: none; padding-left: 0; }
body.ns-lx .lx-prose .tips-detail-list > li::before { display: none; }

/* --- 404 ------------------------------------------------------------------- */

body.ns-lx .lx-notfound { background: var(--ivory); text-align: center; }
body.ns-lx .lx-notfound__inner { max-width: 760px; margin: 0 auto; }
body.ns-lx .lx-notfound h1 {
  margin: 0 0 18px;
  font: 700 clamp(24px, 3.4vw, 38px) / 1.24 var(--display);
  letter-spacing: -.024em; color: var(--ink); text-transform: none;
}
body.ns-lx .lx-notfound h3 {
  margin: 22px 0 12px;
  font: 700 clamp(17px, 1.6vw, 21px) / 1.35 var(--display);
  letter-spacing: -.015em; color: var(--ink); text-transform: none;
}
body.ns-lx .lx-notfound h3 br { display: none; }
body.ns-lx .lx-notfound .lx-prose { max-width: none; }
body.ns-lx .lx-notfound .lx-prose p { margin: 0 0 12px; }
body.ns-lx .lx-notfound a {
  color: var(--bronze-dark); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(201, 149, 74, .45);
  transition: color .24s ease, border-color .24s ease;
}
body.ns-lx .lx-notfound a:hover { color: var(--orange); border-bottom-color: var(--orange); }
/* the carousel on this page is a plain full-width band, not the hero frame */
body.ns-lx .lx-notfound ~ * #banner,
body.ns-lx #main > #banner { border-radius: 0; box-shadow: none; outline: 0; }

/* --- Enquiry page (full width, no sidebar) --------------------------------- */

body.ns-lx .lx-enquiry { background: var(--ivory); }
body.ns-lx .lx-enquiry__card {
  max-width: 940px; margin: 0 auto;
  padding: clamp(28px, 3.4vw, 52px);
  background: var(--forest);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
body.ns-lx .lx-enquiry__card .lx-head { margin-bottom: 30px; }
body.ns-lx .lx-enquiry__card h2.title {
  margin: 0;
  font: 700 clamp(22px, 3vw, 32px) / 1.24 var(--display);
  letter-spacing: -.024em; color: var(--white); text-transform: none;
  max-width: none;
}
body.ns-lx .lx-enquiry__card h2::before,
body.ns-lx .lx-enquiry__card h2::after { display: none; }
body.ns-lx .lx-enquiry form {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  float: none; width: 100%; margin: 0;
}
body.ns-lx .lx-enquiry form::before,
body.ns-lx .lx-enquiry form::after { display: none; }
body.ns-lx .lx-enquiry form > [class*="col-"] {
  float: none; width: auto; padding: 0; min-width: 0;
}
body.ns-lx .lx-enquiry form label {
  display: block; margin: 0 0 9px;
  font: 600 9.5px/1 var(--label); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
body.ns-lx .lx-enquiry form input[type="text"],
body.ns-lx .lx-enquiry form textarea {
  width: 100%; box-sizing: border-box; float: none; height: auto;
  padding: 15px 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  font: 400 16px/1.6 var(--text); color: var(--white);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
body.ns-lx .lx-enquiry form textarea { min-height: 130px; resize: vertical; }
body.ns-lx .lx-enquiry form input[type="text"]::placeholder,
body.ns-lx .lx-enquiry form textarea::placeholder { color: rgba(255, 255, 255, .34); }
body.ns-lx .lx-enquiry form input[type="text"]:focus,
body.ns-lx .lx-enquiry form textarea:focus {
  outline: none; border-color: var(--bronze);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 4px rgba(201, 149, 74, .14);
}
body.ns-lx .lx-enquiry .g-recaptcha { max-width: 100%; overflow-x: auto; }
body.ns-lx .lx-enquiry form input[type="submit"] {
  float: none !important;
  min-height: 56px; padding: 18px 44px;
  border: 0; border-radius: var(--r-pill);
  background: var(--orange); color: var(--white);
  font: 600 11px/1 var(--label); letter-spacing: .17em; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255, 102, 0, .26);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
body.ns-lx .lx-enquiry form input[type="submit"]:hover {
  background: var(--orange-600); transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(255, 102, 0, .34);
}
body.ns-lx .lx-enquiry p { color: rgba(255, 255, 255, .8); }
body.ns-lx .lx-enquiry p strong { color: var(--white); }

@media (min-width: 700px) {
  body.ns-lx .lx-enquiry form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ns-lx .lx-enquiry form > .col-md-12 { grid-column: 1 / -1; }
}

/* --- Contact page ---------------------------------------------------------
   One card per centre. The source paragraphs are untouched, including their
   inline style="color:#000" on the tel links, which is overridden here. */

body.ns-lx .lx-places { display: grid; gap: 16px; margin: 4px 0 0; }
body.ns-lx .lx-place {
  padding: 26px 26px 24px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}
body.ns-lx .lx-place:hover {
  border-color: rgba(201, 149, 74, .5);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
body.ns-lx .lx-place p {
  margin: 0;
  font: 400 clamp(14.5px, 1.05vw, 16px) / 1.9 var(--text);
  color: var(--body);
}
body.ns-lx .lx-place strong {
  display: block;
  margin-bottom: 10px;
  font: 700 clamp(16px, 1.3vw, 18px) / 1.4 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
}
body.ns-lx .lx-place strong u { text-decoration: none; }
body.ns-lx .lx-place .fa,
body.ns-lx .lx-place__email .fa {
  width: 26px; height: 26px;
  margin-right: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(201, 149, 74, .14);
  color: var(--bronze-dark);
  font-size: 12px;
  vertical-align: middle;
}
/* the tel links carry an inline colour in the source, so it needs !important */
body.ns-lx .lx-place a[href^="tel:"],
body.ns-lx .lx-place__email a {
  color: var(--ink) !important;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 149, 74, .45);
  transition: color .24s ease, border-color .24s ease;
}
body.ns-lx .lx-place a[href^="tel:"]:hover,
body.ns-lx .lx-place__email a:hover {
  color: var(--orange) !important;
  border-bottom-color: var(--orange);
}
body.ns-lx .lx-place__email {
  margin: 22px 0 0;
  font: 400 clamp(14.5px, 1.05vw, 16px) / 1.9 var(--text);
  color: var(--body);
}

@media (min-width: 620px) {
  body.ns-lx .lx-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.ns-lx .lx-place:first-child { grid-column: 1 / -1; }
}

/* --- Photo gallery page ---------------------------------------------------
   Full-bleed, unlike the article pages: a wall of images has no measure to
   respect, so here the width is worth using. Thumbnails are 333x250, shown at
   their native 4:3 so nothing is cropped. */

body.ns-lx .lx-gallerypage { background: var(--ivory); }
body.ns-lx .lx-gallerypage__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
/* the anchors are the original markup, kept verbatim, so they are styled by
   their existing .link class rather than a new one */
body.ns-lx .lx-gallerypage__grid > a.link {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--cream);
  box-shadow: var(--shadow-sm);
  transition: transform .38s var(--ease), box-shadow .38s ease, z-index 0s;
}
body.ns-lx .lx-gallerypage__grid > a.link img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1s var(--ease);
}
body.ns-lx .lx-gallerypage__grid > a.link::after {
  content: "\f00e"; /* fa-search-plus */
  font-family: FontAwesome;
  font-size: 19px;
  color: #fff;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(9, 18, 13, .18) 0%, rgba(9, 18, 13, .55) 100%);
  opacity: 0;
  transition: opacity .3s ease;
}
body.ns-lx .lx-gallerypage__grid > a.link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
body.ns-lx .lx-gallerypage__grid > a.link:hover img { transform: scale(1.08); }
body.ns-lx .lx-gallerypage__grid > a.link:hover::after,
body.ns-lx .lx-gallerypage__grid > a.link:focus-visible::after { opacity: 1; }

@media (min-width: 560px)  { body.ns-lx .lx-gallerypage__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 900px)  { body.ns-lx .lx-gallerypage__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1300px) { body.ns-lx .lx-gallerypage__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1750px) { body.ns-lx .lx-gallerypage__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* --- Contact band (contact-lx.php) ---------------------------------------
   Restores the phone numbers and social row that the one-line header dropped.
   Reuses .lx-numbers / .lx-social / .lx-email from the home contact section. */

body.ns-lx .lx-contactband {
  background: var(--forest);
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 5vw, 78px) 0;
}
body.ns-lx .lx-contactband::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 100% 0%, rgba(201, 149, 74, .18) 0%, rgba(201, 149, 74, 0) 62%);
  pointer-events: none;
}
body.ns-lx .lx-contactband__grid {
  position: relative;
  display: grid;
  gap: 34px;
  align-items: center;
}
body.ns-lx .lx-contactband .lx-numbers { grid-template-columns: 1fr; }
body.ns-lx .lx-contactband .lx-social { margin-top: 0; }

@media (min-width: 700px) {
  body.ns-lx .lx-contactband .lx-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  body.ns-lx .lx-contactband__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; }
  body.ns-lx .lx-contactband .lx-social { text-align: right; }
  body.ns-lx .lx-contactband .lx-social ul { justify-content: flex-end; }
}

/* --- Gallery grid --------------------------------------------------------- */

body.ns-lx .lx-gallery { background: var(--cream); }
body.ns-lx .lx-gallery .lx-head { margin-bottom: 44px; }
body.ns-lx .lx-gallery__grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.ns-lx .lx-shot {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--forest);
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s ease;
}
body.ns-lx .lx-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--ease);
}
body.ns-lx .lx-shot::after {
  content: "\f00e"; /* fa-search-plus */
  font-family: FontAwesome; font-size: 20px; color: #fff;
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9, 18, 13, .45);
  opacity: 0;
  transition: opacity .32s ease;
}
body.ns-lx .lx-shot:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
body.ns-lx .lx-shot:hover img { transform: scale(1.07); }
body.ns-lx .lx-shot:hover::after,
body.ns-lx .lx-shot:focus-visible::after { opacity: 1; }

@media (min-width: 768px) {
  body.ns-lx .lx-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 992px) {
  body.ns-lx .lx-article__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 72px; }
  body.ns-lx .lx-article aside { position: sticky; top: calc(var(--bar-h) + 28px); }
  body.ns-lx .lx-linkcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.ns-lx .lx-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.ns-lx .lx-teampage { background: var(--ivory); }
body.ns-lx .lx-teampage__grid { display: grid; gap: 44px; align-items: start; }
body.ns-lx .lx-teampage__main { min-width: 0; }
body.ns-lx .lx-teampage .lx-head { margin-bottom: 34px; }
body.ns-lx .lx-teampage .lx-head h2.title {
  font: 700 clamp(24px, 3.4vw, 38px) / 1.2 var(--display);
  letter-spacing: -.024em; color: var(--ink); text-transform: none; margin: 0;
  max-width: none; /* the generic .lx-head h2 caps at 22ch — not wanted here */
}

body.ns-lx .lx-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
body.ns-lx .lx-person {
  display: flex; align-items: flex-start; gap: 20px;
  margin: 0; padding: 24px 26px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}
body.ns-lx .lx-person:hover {
  border-color: rgba(201, 149, 74, .5);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}
body.ns-lx .lx-person__no {
  flex: none;
  min-width: 2.2ch;
  font: 700 12px/1.7 var(--label);
  letter-spacing: .1em;
  color: var(--bronze);
}
body.ns-lx .lx-person__body { min-width: 0; }
body.ns-lx .lx-person__name {
  margin: 0;
  font: 700 clamp(15px, 1.6vw, 17px) / 1.45 var(--display);
  letter-spacing: -.012em;
  color: var(--ink);
  text-transform: none;
}
body.ns-lx .lx-person__name::before,
body.ns-lx .lx-person__name::after { display: none; }
body.ns-lx .lx-person__meta {
  margin: 7px 0 0;
  font: 400 14px/1.65 var(--text);
  color: var(--muted);
}

/* Sidebar enquiry form (sidebar.php, shared) restyled to match the home form */
/* .sidebar-box is floated by the legacy theme, so aside/.sidebar collapse to a
   few pixels unless they contain it — same trap as #footer. */
body.ns-lx .lx-section aside,
body.ns-lx .lx-section .sidebar { float: none; width: 100%; display: flow-root; }
body.ns-lx .lx-teampage__grid > [class*="col-"],
body.ns-lx .lx-article__grid > [class*="col-"] {
  float: none; width: auto; padding: 0; min-width: 0;
}
body.ns-lx .lx-section .sidebar-box {
  float: none; width: 100%; display: flow-root;
  padding: clamp(26px, 2.6vw, 34px);
  background: var(--forest);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
body.ns-lx .lx-section .sidebar-box h3 {
  font: 700 20px/1.3 var(--display);
  letter-spacing: -.02em;
  color: var(--white);
  text-transform: none;
  margin: 0 0 22px;
}
body.ns-lx .lx-section .sidebar-box h3::before,
body.ns-lx .lx-section .sidebar-box h3::after { display: none; }
/* the legacy theme floats this form, which stops .sidebar-box containing it */
body.ns-lx .lx-section .sidebar-box form { display: grid; gap: 18px; margin: 0; float: none; width: 100%; }
body.ns-lx .lx-section .sidebar-box form::before,
body.ns-lx .lx-section .sidebar-box form::after { display: none; }
body.ns-lx .lx-section .sidebar-box form > [class*="col-"] {
  float: none; width: auto; padding: 0; min-width: 0;
}
body.ns-lx .lx-section .sidebar-box .input-box { float: none; width: 100%; margin: 0; }
body.ns-lx .lx-section .sidebar-box label {
  display: block;
  font: 600 9.5px/1 var(--label); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin: 0 0 9px;
}
body.ns-lx .lx-section .sidebar-box input[type="text"],
body.ns-lx .lx-section .sidebar-box textarea {
  width: 100%; box-sizing: border-box; float: none;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .05);
  font: 400 16px/1.6 var(--text);
  color: var(--white);
  height: auto;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
body.ns-lx .lx-section .sidebar-box textarea { min-height: 104px; resize: vertical; }
body.ns-lx .lx-section .sidebar-box input[type="text"]::placeholder,
body.ns-lx .lx-section .sidebar-box textarea::placeholder { color: rgba(255, 255, 255, .34); }
body.ns-lx .lx-section .sidebar-box input[type="text"]:focus,
body.ns-lx .lx-section .sidebar-box textarea:focus {
  outline: none; border-color: var(--bronze);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 4px rgba(201, 149, 74, .14);
}
body.ns-lx .lx-section .sidebar-box .g-recaptcha { max-width: 100%; overflow-x: auto; }
body.ns-lx .lx-section .sidebar-box .btn-row { float: none; width: 100%; }
/* the legacy green submit is styled inline in sidebar.php — override it */
body.ns-lx .lx-section .sidebar-box input[type="submit"] {
  width: 100%;
  min-height: 56px;
  padding: 18px 32px !important;
  border: 0 !important;
  border-radius: var(--r-pill) !important;
  background: var(--orange) !important;
  color: var(--white) !important;
  font: 600 11px/1 var(--label) !important;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(255, 102, 0, .30);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
body.ns-lx .lx-section .sidebar-box input[type="submit"]:hover {
  background: var(--orange-600) !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(255, 102, 0, .38);
}

@media (min-width: 768px) {
  body.ns-lx .lx-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  body.ns-lx .lx-teampage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; }
  body.ns-lx .lx-teampage aside { position: sticky; top: calc(var(--bar-h) + 28px); }
}
@media (min-width: 1500px) {
  body.ns-lx .lx-teampage__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 72px; }
}

/* ---------------------------------------------------------------------------
   "Our Awareness & Services" — lives in footer.php, restyled on this page only
   ------------------------------------------------------------------------- */

body.ns-lx .price-plans-section {
  background: var(--ivory);
  padding: clamp(60px, 7.5vw, 120px) 0 !important;
  border-top: 1px solid var(--line-soft);
}
body.ns-lx .price-plans-section .container {
  width: 100%; max-width: none; padding: 0 var(--gutter); box-sizing: border-box;
}
body.ns-lx .price-plans-section .container::before,
body.ns-lx .price-plans-section .container::after { display: none; }
/* Grid each .row rather than flattening them: the container's clearfix
   pseudo-elements would otherwise take grid cells and stagger the links. */
body.ns-lx .price-plans-section .container > .row {
  display: grid; grid-template-columns: 1fr; gap: 10px 20px; margin: 0;
  /* the first row's cols carry .col-sm-12 (width:100%), which makes the grid
     width circular and collapses the row to 0 without this */
  width: 100%;
}
body.ns-lx .price-plans-section .container > .row::before,
body.ns-lx .price-plans-section .container > .row::after { display: none; }
body.ns-lx .price-plans-section .container > .row > [class*="col-"] { float: none; width: auto; padding: 0; min-width: 0; }
body.ns-lx .price-plans-section .btn-row:empty { display: none; }
body.ns-lx .price-plans-section .container > .row > [class*="col-"]:not(:has(a)) { display: none; }

body.ns-lx .price-plans-section .heading-style-2 { margin: 0 0 26px; text-align: center; }
body.ns-lx .price-plans-section h2::before,
body.ns-lx .price-plans-section h2::after { display: none; }
body.ns-lx .price-plans-section .heading-style-2 h2 {
  font: 700 clamp(22px, 3.2vw, 34px) / 1.25 var(--display); letter-spacing: -.024em;
  color: var(--ink); text-transform: none; margin: 0;
}
body.ns-lx .price-plans-section a.btn-style-5 {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 62px;
  padding: 18px 22px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: none;
  color: var(--body);
  font: 400 14.5px/1.45 var(--text);
  text-transform: none; text-align: left; text-decoration: none;
  transition: color .28s ease, background .28s ease, border-color .28s ease, transform .28s var(--ease), box-shadow .28s ease;
}
/* the theme draws corner brackets on these buttons with bordered, absolutely
   positioned pseudo-elements — reset both before reusing ::before */
body.ns-lx .price-plans-section a.btn-style-5::after { display: none; }
body.ns-lx .price-plans-section a.btn-style-5::before {
  content: "\f105"; /* fa-angle-right */
  position: static;
  width: auto; height: auto;
  margin: 0;
  border: 0;
  background: none;
  font-family: FontAwesome; font-size: 16px; line-height: 1; color: var(--bronze);
  flex: none; transition: transform .28s ease;
}
body.ns-lx .price-plans-section a.btn-style-5:hover {
  color: var(--ink);
  border-color: rgba(201, 149, 74, .5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
body.ns-lx .price-plans-section a.btn-style-5:hover::before { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   Footer (shared markup, scoped to this page)
   ------------------------------------------------------------------------- */

/* The sunrise photograph is restored here, as in the original design. It is the
   same file the hero uses, so the two are cropped differently — the hero shows
   the sun, the footer the darker valley and prayer flags — and carry different
   overlays so they read as a pair rather than a repeat.
   flow-root: clearing #footer's legacy float left it not containing its floated
   sections, so it collapsed to 80px and leaked the photo as a stray strip. */
/* Matches the original treatment: the photograph shows through directly, with
   no tint over it. The image is already dark enough to read white text on.
   flow-root because clearing #footer's legacy float left it not containing its
   floated sections, which collapsed it to 80px. */
/* Neutral black scrim, NOT the green tint that was here before — that is what
   made the footer read as "green" rather than as the photograph. Measured off
   the image: the middle third sits at ~65 luminance, which gives white text
   only 3.4:1. A flat 45-55% black lifts that past 5:1 while leaving the sunrise
   clearly visible. */
body.ns-lx #footer {
  display: flow-root;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .58) 100%),
    url(../images/footer-bg.jpg) left top / cover no-repeat;
  background-color: #000;
  padding: clamp(48px, 5vw, 72px) 0 30px;
}
body.ns-lx #footer .footer-section-1 {
  background: none;
  padding: 0 0 clamp(28px, 3vw, 44px);
}
body.ns-lx #footer .footer-section-2 {
  background: none;
  border-top: 1px solid rgba(255, 255, 255, .3);
  padding: 30px 0 6px;
}
body.ns-lx #footer .container {
  width: 100%; max-width: none;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
body.ns-lx #footer .container::before,
body.ns-lx #footer .container::after { display: none; }
body.ns-lx #footer a { transition: color .22s ease, padding-left .22s ease; }

/* --- top row: brand · quick links · contact ------------------------------ */
body.ns-lx #footer .footer-section-1 > .container > .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  margin: 0;
}
body.ns-lx #footer .footer-section-1 > .container > .row::before,
body.ns-lx #footer .footer-section-1 > .container > .row::after { display: none; }
body.ns-lx #footer .footer-section-1 > .container > .row > [class*="col-"] {
  float: none; width: auto; padding: 0; min-width: 0;
}
body.ns-lx #footer .footer-logo { display: block; float: none; margin: 0 0 22px; }
body.ns-lx #footer .footer-logo img { max-height: 62px; width: auto; }
body.ns-lx #footer .footer-section-1 p {
  font: 400 14.5px/1.85 var(--text);
  color: rgba(255, 255, 255, .8);
  max-width: 46ch;
  margin: 0;
}
body.ns-lx #footer h3 {
  font: 600 10px/1 var(--label); letter-spacing: .28em; text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 24px;
}
body.ns-lx #footer .footer-box { float: none; width: 100%; }

/* Quick links: bootstrap's .navbar-nav floats every li, which is what made
   "About Us"/"Services" collide. Two clean vertical columns instead. */
body.ns-lx #footer .footer-box > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 0;
}
body.ns-lx #footer .footer-box > .row::before,
body.ns-lx #footer .footer-box > .row::after { display: none; }
body.ns-lx #footer .footer-box > .row > [class*="col-"] { float: none; width: auto; padding: 0; min-width: 0; }
body.ns-lx #footer .footer-box ul.nav {
  display: block; float: none; width: 100%; margin: 0; padding: 0;
}
body.ns-lx #footer .footer-box ul.nav > li {
  float: none; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none;
}
body.ns-lx #footer .footer-box ul.nav > li > a {
  display: block;
  padding: 9px 0;
  border: 0; background: none; border-radius: 0;
  font: 400 14.5px/1.55 var(--text);
  color: rgba(255, 255, 255, .82);
  text-transform: none;
  letter-spacing: 0;
}
body.ns-lx #footer .footer-box ul.nav > li > a::before,
body.ns-lx #footer .footer-box ul.nav > li > a::after { display: none; }
body.ns-lx #footer .footer-box ul.nav > li > a:hover { color: var(--bronze); background: none; padding-left: 6px; }

/* Contact block */
body.ns-lx #footer address { margin: 0; font-style: normal; }
body.ns-lx #footer address ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
body.ns-lx #footer address ul li {
  display: flex; align-items: flex-start; gap: 16px;
  border: 0; padding: 0; margin: 0; float: none; background: none;
}
body.ns-lx #footer address ul li > span {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-light); border-radius: var(--r-pill);
  color: var(--bronze); font-size: 15px;
  background: none;
}
body.ns-lx #footer address ul li > span::before,
body.ns-lx #footer address ul li > span::after { display: none; }
body.ns-lx #footer address .text-box { min-width: 0; }
body.ns-lx #footer address .text-box p {
  font: 400 14.5px/1.7 var(--text);
  color: rgba(255, 255, 255, .8);
  margin: 0 0 2px;
  max-width: none;
}
body.ns-lx #footer address .text-box a,
body.ns-lx #footer address a {
  font: 600 16px/1.6 var(--text);
  color: var(--white);
  text-decoration: none;
}
body.ns-lx #footer address .text-box a:hover,
body.ns-lx #footer address a:hover { color: var(--bronze); }

/* --- bottom row --------------------------------------------------------- */
body.ns-lx #footer .footer-section-2 > .container > .row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px 30px; margin: 0;
}
body.ns-lx #footer .footer-section-2 > .container > .row::before,
body.ns-lx #footer .footer-section-2 > .container > .row::after { display: none; }
body.ns-lx #footer .footer-section-2 > .container > .row > [class*="col-"] {
  float: none; width: auto; padding: 0; min-width: 0;
}
body.ns-lx #footer .footer-socila { float: none; }
body.ns-lx #footer .footer-socila ul {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none;
}
body.ns-lx #footer .footer-socila ul li { float: none; border: 0; margin: 0; padding: 0; }
body.ns-lx #footer .footer-socila ul li a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-pill);
  border: 1px solid var(--line-light);
  color: rgba(255, 255, 255, .7);
  transition: background .26s ease, color .26s ease, border-color .26s ease, transform .26s ease;
}
body.ns-lx #footer .footer-socila ul li a:hover {
  background: var(--bronze); border-color: var(--bronze); color: var(--forest); transform: translateY(-2px);
}
body.ns-lx #footer .copy {
  display: block;
  font: 400 13.5px/1.7 var(--text);
  color: rgba(255, 255, 255, .78);
  text-align: right;
}
/* the keyword list is its own full-width row under the social/copyright line */
body.ns-lx #footer .footer-section-2 > .container > .row + .row { display: block; margin-top: 22px; }
body.ns-lx #footer .footer-section-2 > .container > .row + .row > [class*="col-"] { width: 100%; }
body.ns-lx #footer .tags {
  display: block;
  font: 400 12px/2.1 var(--text);
  color: rgba(255, 255, 255, .32);
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
}
body.ns-lx #footer .tags a { color: rgba(255, 255, 255, .42); }
body.ns-lx #footer .tags a:hover { color: var(--bronze); }

@media (min-width: 992px) {
  body.ns-lx #footer .footer-section-1 > .container > .row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
  }
}

/* Dated floating call graphic: the header CTA is sticky and the mobile bar
   carries the same number, so it is redundant. */
body.ns-lx .call { display: none; }

/* The floating WhatsApp bubble is pinned bottom-LEFT, where it sat on top of
   the footer's social row and keyword list. Moved to the right margin, which is
   clear now that the call graphic is gone. */
@media (min-width: 901px) {
  body.ns-lx .whatsapp { left: auto !important; right: 22px; bottom: 22px !important; }
  body.ns-lx .whatsapp img { width: 58px; height: 58px; }
}

/* ---------------------------------------------------------------------------
   Sticky mobile action bar
   ------------------------------------------------------------------------- */

body.ns-lx .lx-callbar { display: none; }

@media (max-width: 900px) {
  body.ns-lx .lx-callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6000;
    gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 248, 243, .94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -8px 30px rgba(15, 31, 22, .13);
  }
  body.ns-lx .lx-callbar__call {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 54px; padding: 12px 16px; border-radius: var(--r-pill);
    background: var(--orange); color: var(--white);
    font: 600 11px/1.3 var(--label); letter-spacing: .13em; text-transform: uppercase;
    text-decoration: none; box-shadow: 0 10px 24px rgba(255, 102, 0, .28);
  }
  body.ns-lx .lx-callbar__call:hover,
  body.ns-lx .lx-callbar__call:focus { color: var(--white); text-decoration: none; }
  body.ns-lx .lx-callbar__wa {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: var(--r-pill);
    background: #25d366; color: var(--white); font-size: 26px; text-decoration: none;
  }
  body.ns-lx .lx-callbar__wa:hover,
  body.ns-lx .lx-callbar__wa:focus { color: var(--white); }

  body.ns-lx #wrapper { padding-bottom: 86px; }
  body.ns-lx .whatsapp { display: none; }
}

/* ---------------------------------------------------------------------------
   Breakpoints
   ------------------------------------------------------------------------- */

/* Ten nav items need real room; collapse well before they would wrap. */
@media (max-width: 1150px) {
  body.ns-lx .lx-burger { display: block; }
  body.ns-lx .lx-bar__cta { display: none; }
  body.ns-lx .lx-bar { gap: 14px; min-height: 66px; }
  body.ns-lx .lx-logo img { height: 40px; }
  body.ns-lx { --bar-h: 66px; }

  body.ns-lx .lx-nav {
    position: absolute; top: 100%; left: 0; right: 0; flex: none;
    max-height: 0; overflow: hidden;
    background: var(--ivory);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
    transition: max-height .4s var(--ease);
  }
  body.ns-lx .lx-header.is-open .lx-nav {
    max-height: 78vh; overflow-y: auto;
    box-shadow: 0 22px 50px rgba(15, 31, 22, .16);
  }
  body.ns-lx .lx-nav > ul { display: block; padding: 10px var(--gutter) 20px; }
  body.ns-lx .lx-nav > ul > li > a { padding: 15px 14px; font-size: 11px; letter-spacing: .16em; }
  body.ns-lx .lx-nav ul ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 6px 18px; background: none; box-shadow: none;
  }
  body.ns-lx .lx-nav ul ul a { padding: 10px 14px; color: var(--muted); }
}

/* Below the two-column breakpoint the billboard copy spans the full width, so
   the left-to-right ramp no longer sits under it. Netflix switches to a
   top-down fade at this size for the same reason. */
/* Phones and small tablets get a different composition entirely.
   Forcing the slides to fill a ~100svh, 375px-wide hero with `cover` throws
   away most of the frame — the reason the mobile hero looked so bad. Here the
   image runs as a band at the masters' own 16:9, nothing cropped, and the copy
   sits beneath it on solid black. No scrim is needed over the copy at all, so
   it is white on black: maximum legibility and the photograph is fully
   visible. */
@media (max-width: 991px) {
  body.ns-lx .lx-hero--bgslides {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: clamp(34px, 8vw, 56px);
    background: #000;
  }
  body.ns-lx .lx-hero--bgslides .lx-hero__bg {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    transform: none;
  }
  body.ns-lx .lx-hero--bgslides .lx-hero__bg .item img { object-fit: cover; }
  /* The fade belongs at the foot of the BAND, where the photograph meets the
     black copy area — not at the foot of the hero, which is already black.
     z-index 1 keeps it under the Owl dots (z-index 2). */
  body.ns-lx .lx-hero--bgslides .lx-hero__bg::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
    z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 62%, rgb(0, 0, 0) 100%);
  }
  body.ns-lx .lx-hero--bgslides::before { display: none; }
  body.ns-lx .lx-hero--bgslides .lx-hero__wrap { padding-top: clamp(26px, 6vw, 40px); }
  body.ns-lx .lx-hero--bgslides .lx-scrollcue { display: none; }
}

@media (max-width: 767px) {
  body.ns-lx .lx-cta-row { flex-direction: column; }
  body.ns-lx .lx-cta-row .lx-btn { width: 100%; }
  body.ns-lx .lx-btn--onDark { white-space: normal; }
  /* On phones the sticky expand costs more than it gives — plain wide video. */
  body.ns-lx .lx-showcase.is-live .lx-showcase__track { height: auto; }
  body.ns-lx .lx-showcase.is-live .lx-showcase__sticky { position: static; height: auto; overflow: visible; padding: 0 var(--gutter); }
  body.ns-lx .lx-showcase.is-live .lx-showcase__frame {
    width: 100%; max-width: 100%; border-radius: var(--r-lg);
    /* thinner matte than desktop, but keep it — this rule used to reset the
       ring away and leave a dark frame invisible against the black section */
    box-shadow: 0 0 0 5px #fff;
  }
  body.ns-lx .lx-hero__bg { background-position: center 42%; }
  body.ns-lx .lx-hero:not(.lx-hero--bgslides) { padding: 34px 0 68px; }
  body.ns-lx .lx-scrollcue { bottom: -40px; }
  body.ns-lx .lx-list h3 a { padding: 20px 20px; gap: 16px; }
  body.ns-lx .lx-centre__media img { height: 240px; }
  body.ns-lx .lx-centre__name { font-size: 25px; }
}

@media (min-width: 600px) {
  body.ns-lx .lx-centres__grid { grid-template-columns: repeat(2, 1fr); }
  body.ns-lx .lx-form { grid-template-columns: repeat(2, 1fr); }
  body.ns-lx .lx-field--full { grid-column: 1 / -1; }
  body.ns-lx .price-plans-section .container > .row { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
  /* the carousel gets the larger share of the hero */
  /* copy occupies the left band the gradient covers, as on a Netflix billboard */
  body.ns-lx .lx-hero--bgslides .lx-hero__grid { grid-template-columns: minmax(0, 1fr); }
  body.ns-lx .lx-hero--bgslides .lx-hero__copy { max-width: 46%; }
  body.ns-lx .lx-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr); gap: 56px; }
  body.ns-lx .lx-centres__grid { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  body.ns-lx .lx-contact__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; }
  body.ns-lx .price-plans-section .container > .row { grid-template-columns: repeat(3, 1fr); }
}

/* Wide laptops: a single full-width column of five short rows reads as empty
   space, so the heading and the list sit side by side. */
@media (min-width: 1200px) {
  body.ns-lx .lx-treat .lx-wrap {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 72px;
    align-items: start;
  }
  body.ns-lx .lx-treat .lx-head { margin-bottom: 0; }
}

@media (min-width: 1500px) {
  body.ns-lx .lx-form { grid-template-columns: repeat(3, 1fr); }
  body.ns-lx .lx-centre__media img { height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  body.ns-lx *, body.ns-lx *::before, body.ns-lx *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  body.ns-lx .lx-reveal { opacity: 1; transform: none; }
  body.ns-lx .lx-btn:hover,
  body.ns-lx .lx-centre:hover,
  body.ns-lx .lx-list h3 a:hover { transform: none; }
  body.ns-lx .lx-centre:hover .lx-centre__media img { transform: none; }
  body.ns-lx .lx-scrollcue { animation: none; }
}