/* ==========================================================================
   NeoYug Site Pages — shared design system.

   The seven pages this drives (About Us, Neo Rise, Refund, Privacy, T&Cs,
   Contact, FAQs) are exactly the site's footer columns: Site, Policies,
   Support. They are the TRUST LAYER, not the funnel. So they borrow the
   landing page's vocabulary (sunset hero, purple, Poppins, pill buttons,
   18/24px radii) but run it quieter: shorter heroes, more air, one colour
   moment per page instead of a gradient every band.

   Tokens are lifted verbatim from the landing plugin's assets/css/landing.css
   so the two systems can never drift:
     purple #8D22C3 · deep #261A48 · orange #E96F46 · lilac #F4E9F9
     peach #FDF1ED · ink #0A0813 · cream #F7EEDD · text #2B2240
   Header/footer chrome matches the neoyug-header-map plugin (#20153F footer,
   101px desktop header, 72px mobile).

   Everything is namespaced under .nysp, mirroring the landing plugin's .nypl,
   so dropping this into the live theme cannot touch host-theme styles.

   NO Elementor. Every element here is hand-authored semantic markup that maps
   one-to-one onto a native PHP template.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --purple:#8D22C3; --purple-2:#A93BE0; --purple-soft:rgba(141,34,195,.08);
  --deep:#261A48;   --deep-2:#302256;
  --orange:#E96F46; --orange-2:#F2A14B;
  --lilac:#F4E9F9;  --lilac-2:#FAF5FE;
  --peach:#FDF1ED;  --cream:#F7EEDD;  --cream-2:#FBF5E9;
  --ink:#0A0813;
  --text:#2B2240;   --muted:#6B6480;  --grey-head:#BCB6C7;
  --gold:#F6B81E;
  --line:rgba(38,26,72,.10);
  --line-2:rgba(38,26,72,.16);
  --radius:18px; --radius-sm:14px; --radius-lg:24px;
  --max:1180px;
  --header-h:101px; --header-h-mobile:72px;

  /* HOW MUCH ROOM AN OPENING LEAVES FOR THE HEADER -- which is NOT the same
     number as how tall the header is.

     Every opening band on these pages is full-bleed and sits under a
     position:fixed header, so each one padded itself by --header-h to keep its
     first line out from behind the bar. That was right when this plugin was
     the only thing reserving the space.

     It is not right any more. neoyug-header-map now pads the body itself --
     `body.nyhs-pad`, switched on with the solid-bar tick -- and it only ever
     does that when the bar is opaque, so nothing shows through the padding.
     With both of us reserving the space the openings were pushed down twice:
     about 101px of dead band on every page, which is the gap on About Us.

     That plugin publishes --ny-clear for exactly this, and says to read it as
     `var(--ny-clear, <what you used to do>)`: it is 0 when the header has
     already padded the body, and the full bar height when it has not. The
     gift shop, masterclasses and the program landing were all stacking the
     same way and were fixed against the same variable.

     --header-h stays as it was and is still read directly by everything that
     needs the BAR'S HEIGHT rather than the clearance -- scroll-padding-top,
     scroll-margin-top on prose headings, and the three sticky rails. Zeroing
     those would drop every anchor jump behind the header.

     Namespaced, and resolved lazily, so the mobile --header-h below and the
     header plugin's own mobile --ny-clear both still apply. */
  --nysp-clear:var(--ny-clear, var(--header-h));
  --footer-bg:#20153F;
  /* THE DARK GROUND. One token, every dark band on the site: the bento
     opening, the split openings, the banner, the paths rail. They used to be
     two different colours -- the openings sat on --ink (#0A0813, which is all
     but black) and the banner on a deep indigo gradient -- so a visitor moving
     between pages saw the brand change temperature for no reason.

     Lighter than either, and violet rather than black. #0A0813 is a colour
     with no hue left in it; at that darkness the purple glows had nothing to
     lift and the bands read as grey. This sits in the brand's own violet
     family, next to --deep, and the two glows now have somewhere to go.

     Still measured for white text. Worked through: the lightest stop is
     #341B62, both glows at full strength over it composite to about #5F299B,
     and white on that is 9.2:1 -- past AAA for the display sizes these bands
     carry, and past AA for everything else on them. */
  --hero-purple:
    radial-gradient(58% 52% at 4% 96%,rgba(141,34,195,.34) 0%,rgba(141,34,195,0) 68%),
    radial-gradient(46% 42% at 98% 4%,rgba(130,70,215,.28) 0%,rgba(130,70,215,0) 70%),
    linear-gradient(168deg,#2C1656 0%,#341B62 46%,#26134A 100%);
  --sunset:linear-gradient(178deg,#2a1846 0%,#391f4f 16%,#5b3656 36%,#965a61 56%,#cd836e 76%,#efad8c 100%);
  --nightfall:linear-gradient(100deg,#3a1f5e 0%,#241640 40%,#141019 72%,#1a1410 100%);
}
@media (max-width:767px){:root{--header-h:72px}}

/* Keep this in step with the contents-rail trigger line in scripts.html
   (--header-h + 56). A heading landing at +28 sits comfortably above the line,
   so a clicked clause registers as current rather than just short of it. */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 28px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.5; color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* THE SAME RESET AGAIN, ONE CLASS HEAVIER.
   WordPress block themes emit this in their global styles:

       a:where(:not(.wp-element-button)){text-decoration:underline}

   :where() contributes nothing to specificity, so that rule and the bare `a`
   above are BOTH (0,0,1) -- a dead tie, settled by whichever stylesheet the
   page happens to print last. The global-styles block goes out in wp_head and
   on neoyug.com it lands after this file, so the theme won: every card, every
   button and every heading inside a card link came out underlined, including
   the copy inside them, because the underline inherits down from the <a>.

   Winning the tie by load order is not something this plugin can rely on, so
   this takes the rule out of the tie entirely: (0,1,1) beats (0,0,1) whatever
   the order, and it cannot be undone by re-enqueuing or by a theme update.

   Everything that SHOULD be underlined -- prose links, form notes, accordion
   body links, the print stylesheet -- is either more specific than this or
   comes later in this file, so all of it still wins. Keep that true when
   adding rules: an underline set on a plain `.nysp-something a` must live
   below this line. */
.nysp a{color:inherit;text-decoration:none}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
.nysp-wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 26px}
@media (max-width:640px){.nysp-wrap{padding:0 16px}}
.nysp-section{padding:clamp(44px,5.5vw,84px) 0}
.nysp-section--tight{padding:clamp(32px,4vw,56px) 0}

.nysp-white{background:#fff}
.nysp-lilac{background:var(--lilac-2)}
.nysp-peach{background:var(--peach)}
.nysp-cream{background:var(--cream-2)}
.nysp-dark{background:var(--ink);color:#fff}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
.nysp-display{font-weight:800;letter-spacing:-.02em;line-height:1.12;color:var(--deep);margin:0}
h1.nysp-display{font-size:clamp(32px,5vw,54px)}
.nysp-h2{font-size:clamp(25px,3.1vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.16;color:var(--deep);margin:0}
.nysp-h3{font-size:clamp(18px,1.9vw,22px);font-weight:700;line-height:1.3;color:var(--deep);margin:0}
.nysp-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin:0 0 14px}
.nysp-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--muted);margin:14px 0 0}
.nysp-head{max-width:760px;margin:0 auto clamp(32px,4vw,52px);text-align:center}
.nysp-head .nysp-lead{margin-left:auto;margin-right:auto}
.nysp-dark .nysp-display,.nysp-dark .nysp-h2,.nysp-dark .nysp-h3{color:#fff}
.nysp-dark .nysp-lead{color:#C9C2DD}
.nysp-dark .nysp-eyebrow{color:var(--orange-2)}

/* Visually hidden, but read by screen readers and counted in the document
   outline. Used for headings that the design shows another way (a tab label,
   say) but that the outline still needs. */
.nysp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.nysp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;line-height:1;
  padding:15px 30px;border-radius:999px;text-align:center;
  transition:transform .15s ease,box-shadow .15s ease;
}
.nysp-btn:hover{transform:translateY(-2px)}
.nysp-btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.nysp-btn--purple{background:var(--purple);color:#fff;box-shadow:0 10px 24px rgba(141,34,195,.30)}
.nysp-btn--white{background:#fff;color:var(--deep);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.nysp-btn--ghost{background:transparent;color:var(--deep);box-shadow:inset 0 0 0 1.5px var(--line-2)}
/* Ghost buttons sit on the dark surfaces: the .nysp-dark band and the slim
   hero. The closing panel used to be one of them and is not any more -- it is
   lilac now, and a white ghost button on lilac is an invisible button. */
.nysp-dark .nysp-btn--ghost,
.nysp-hero .nysp-btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.30)}
.nysp-dark .nysp-btn--ghost:hover,
.nysp-hero .nysp-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
/* Hold each button's text colour through every link state.
   Buttons are <a> elements, and the theme styles `a:hover{color:…}` with a
   darker shade. That selector is (0,1,1) and `.nysp-btn--purple` is only
   (0,1,0), so the theme won a hover it was never meant to be part of and the
   label went dark-on-purple. Qualifying with the `.nysp` root and the element
   takes these to (0,2,1), which is enough, and listing the states explicitly
   means :visited and :active cannot leak either. This is the same fix the
   landing plugin carries, for the same reason. */
.nysp a.nysp-btn--purple,
.nysp a.nysp-btn--purple:link,
.nysp a.nysp-btn--purple:visited,
.nysp a.nysp-btn--purple:hover,
.nysp a.nysp-btn--purple:focus,
.nysp a.nysp-btn--purple:active{color:#fff}

.nysp a.nysp-btn--white,
.nysp a.nysp-btn--white:link,
.nysp a.nysp-btn--white:visited,
.nysp a.nysp-btn--white:hover,
.nysp a.nysp-btn--white:focus,
.nysp a.nysp-btn--white:active{color:var(--deep)}

.nysp a.nysp-btn--ghost,
.nysp a.nysp-btn--ghost:link,
.nysp a.nysp-btn--ghost:visited,
.nysp a.nysp-btn--ghost:hover,
.nysp a.nysp-btn--ghost:focus,
.nysp a.nysp-btn--ghost:active{color:var(--deep)}

/* …except on the dark surfaces, where ghost buttons are white. The closing
   panel is no longer one of them. */
.nysp .nysp-dark a.nysp-btn--ghost,
.nysp .nysp-dark a.nysp-btn--ghost:hover,
.nysp .nysp-dark a.nysp-btn--ghost:focus,
.nysp .nysp-dark a.nysp-btn--ghost:active,
.nysp .nysp-hero a.nysp-btn--ghost,
.nysp .nysp-hero a.nysp-btn--ghost:hover,
.nysp .nysp-hero a.nysp-btn--ghost:focus,
.nysp .nysp-hero a.nysp-btn--ghost:active{color:#fff}

.nysp-btn--lg{padding:17px 36px;font-size:16px}
@media (max-width:480px){
  .nysp-btn{width:100%}
  .nysp-btn-row{display:flex;flex-direction:column;gap:12px;width:100%}
}
.nysp-btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.nysp-btn-row--center{justify-content:center}

/* --------------------------------------------------------------------------
   HERO.

   Structure, type and decoration are the landing plugin's .nypl-hero, value
   for value: the white highlight at 50% 4%, the two dot strips at .32 opacity
   in screen blend mode (hidden under 768px, exactly as the plugin hides them),
   the same type scale, and the eyebrow BELOW the title, which is the live DOM
   order.

   What differs is the gradient and the height, and the two are the same
   decision. The sunset ended in peach, so white copy was only legible over its
   dark upper half, which forced an 860px banner to hold the text up there. The
   purple gradient (--hero-purple) is dark from top to bottom, so the copy is
   legible wherever it lands and the banner is free to be exactly as tall as
   its own text. The sunset is still defined as --sunset for the landing pages
   that use it.
   -------------------------------------------------------------------------- */
.nysp-hero{
  position:relative;overflow:hidden;text-align:center;color:#fff;margin:0;
  background:var(--hero-purple);
  /* Contain the multiply blend used by the hero image so it can never reach
     the page behind the banner. */
  isolation:isolate;
  /* The header height is added to the top padding because the header in these
     previews is opaque and these pages lead with a breadcrumb. Behind a
     transparent header you would drop the calc() and keep the clamp alone. */
  /* Generous, but not so generous that a three-line headline pushes the band
     past 850px. Measured across all nine pages at 1440 after this: 610-760. */
  padding:calc(var(--nysp-clear) + clamp(52px,5.4vw,96px)) 0 clamp(56px,5.6vw,100px);
  /* No min-height. The banner is exactly its copy plus its padding, which is
     what "size it to the text" means. The old 860px floor existed only to keep
     the copy above the sunset's peach end; with a gradient that is dark all the
     way down, that floor buys nothing and cost a screenful of empty colour on
     pages whose hero is three short lines. */
  /* Content sits at the TOP of the banner, not centred in it. On a landing
     page the copy runs from the top padding down and the white video card
     fills the space beneath, which is why the copy is always over the dark
     half of the sunset and the peach only ever appears below it. Centring the
     copy here dropped it into the warm middle and took the sub-heading down
     to 3.5:1. Top-aligning reproduces the live geometry exactly, and takes it
     back to 5.7:1 without touching a single colour. */
}
.nysp-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 50% 4%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%);
}
.nysp-hero .nysp-wrap{position:relative;z-index:3;width:100%}
/* width:100%, and it is load-bearing. .nysp-hero--media makes the SECTION a
   flex container, and the wrapper is now the flex item that used to be
   .nysp-wrap. A flex item sizes to its content, so without this the whole
   banner's copy shrank to its longest line and sat left of centre on every
   page with a hero photograph. On the bands that are not flex it is the same
   as auto and does nothing. */
.nysp-hero__inner{width:100%;min-width:0}

.nysp-hero__dots{
  position:absolute;top:0;bottom:0;width:150px;
  background-repeat:no-repeat;background-position:top center;background-size:cover;
  mix-blend-mode:screen;opacity:.32;pointer-events:none;z-index:1;
}
.nysp-hero__dots--l{left:0;background-image:url(../img/hero-dots-l.jpg)}
.nysp-hero__dots--r{right:0;background-image:url(../img/hero-dots-r.jpg)}
@media (max-width:767px){
  /* The plugin hides these below 768px because full-height decorative strips
     otherwise become the LCP element on a phone. Same reasoning, same rule. */
  .nysp-hero__dots{display:none}
  /* Phones: tighter clearance above and below, since the copy wraps to more
     lines and the banner grows with it on its own. */
  .nysp-hero{padding-top:calc(var(--nysp-clear) + 44px);padding-bottom:52px}
}

/* Type. Bigger, tighter and quieter than the landing plugin's hero.

   This is a deliberate departure from the value-for-value port of .nypl-hero.
   A premium hero is mostly space and one confident line; the plugin's 44px
   cap and normal letter-spacing read as a section heading, not as an opening
   statement. If the landing pages should feel the same, they need the same
   treatment -- otherwise these pages will read as the more considered ones. */
.nysp-hero .nysp-wrap{display:flex;flex-direction:column;align-items:center}
.nysp-hero .nysp-crumb  {order:1}
.nysp-hero .nysp-eyebrow{order:2}
.nysp-hero h1           {order:3}
.nysp-hero .nysp-lead   {order:4}
.nysp-hero .nysp-stamp  {order:5}
.nysp-hero .nysp-btn-row{order:6}

.nysp-hero h1{
  font-weight:700;
  font-size:clamp(33px,4.6vw,60px);
  line-height:1.05;
  letter-spacing:-.035em;
  margin:0;
  max-width:17ch;
  color:#fff;
  text-wrap:balance;
}
.nysp-hero .nysp-eyebrow{
  font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 20px;
}
.nysp-hero .nysp-lead{
  font-size:clamp(17px,1.7vw,22px);line-height:1.45;letter-spacing:-.005em;
  color:rgba(255,255,255,.88);max-width:46ch;margin:22px auto 0;
}
/* FAQs: the sentence sits on two lines, not three.
   46ch broke "Everything on booking a session, how payment and rescheduling
   work, and what to do when something goes wrong." across three, which under
   a two-line headline made the band mostly type. At 58ch the same sentence
   takes two lines at every width the banner is ever drawn at, and the tab bar
   below comes up into view. */
.nysp-hero--faq .nysp-lead{max-width:58ch}
/* Policy pages: the sub is a single short sentence per page (refund, privacy,
   terms) and they read as a set, so the cap is lifted to let each sit on one
   line on desktop. It still wraps naturally once the viewport is too narrow. */
.nysp-page-legal .nysp-hero .nysp-lead{max-width:none}
.nysp-hero .nysp-btn-row{margin-top:34px;justify-content:center}
.nysp-hero .nysp-btn{padding:17px 40px;font-size:17px}
.nysp-hero .nysp-crumb{margin:0 0 26px}
.nysp-hero .nysp-stamp{justify-content:center;margin-top:28px}

/* Breadcrumb */
.nysp-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.66);margin:0 0 16px}
.nysp-crumb span[aria-hidden]{opacity:.5}

/* The "Home" link in brand orange.

   It only ever set the container's colour, so the LINK took whatever the theme
   gives links, which on NeoYug is a magenta that belongs to no part of this
   palette. Same class of problem as the button hover and the tab bar: a theme
   rule reaching into a component. Declared here, through every state, and
   scoped under .nysp so it outranks a plain a:hover.

   --orange-2, not --orange. At the top of the hero, where the crumb sits, the
   gradient composites to about #482D6B: brand orange measures 3.66:1 there,
   which fails AA for 13px text, and --orange-2 measures 5.35:1. --orange-2 is
   already the token for orange on dark for exactly this reason. */
.nysp .nysp-crumb a,
.nysp .nysp-crumb a:link,
.nysp .nysp-crumb a:visited,
.nysp .nysp-crumb a:hover,
.nysp .nysp-crumb a:focus,
.nysp .nysp-crumb a:active{color:var(--orange-2);text-decoration:none}
.nysp .nysp-crumb a:hover,
.nysp .nysp-crumb a:focus-visible{text-decoration:underline;text-underline-offset:2px}

/* Stamp row (last updated / reading time) */
.nysp-stamp{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.nysp-stamp em{
  font-style:normal;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.nysp-grid{display:grid;gap:clamp(16px,2vw,24px)}
.nysp-grid--2{grid-template-columns:repeat(2,1fr)}
.nysp-grid--3{grid-template-columns:repeat(3,1fr)}
.nysp-grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.nysp-grid--3,.nysp-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.nysp-grid--2,.nysp-grid--3,.nysp-grid--4{grid-template-columns:1fr}}

.nysp-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);
  box-shadow:0 12px 30px rgba(38,26,72,.05);
  transition:transform .18s ease,box-shadow .18s ease;
}
.nysp-card--hover:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(38,26,72,.10)}
.nysp-card h3{margin:0 0 8px}
.nysp-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}

/* Icon medallion, matching the landing page's .nypl-tshift__badge */
.nysp-medal{
  flex:none;width:48px;height:48px;border-radius:50%;background:var(--purple);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.nysp-medal svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nysp-medal--soft{background:var(--purple-soft);border:1px solid rgba(141,34,195,.16)}
.nysp-medal--soft svg{stroke:var(--purple)}
/* WhatsApp is the one brand logo in the set, so it is a filled glyph rather
   than a stroked line icon: fill it white and drop the stroke the rule above
   applies to everything else. */
.nysp-medal svg.nysp-i--whatsapp{fill:#fff;stroke:none}
.nysp-medal--soft svg.nysp-i--whatsapp{fill:var(--purple);stroke:none}

/* Numbered list, ported from .nypl-tshift (Dosis ghosted numerals) */
.nysp-numbered{max-width:1040px;margin:0 auto;background:#fff;
  border:1px solid rgba(141,34,195,.16);border-radius:var(--radius-lg);
  box-shadow:0 4px 74px rgba(0,0,0,.07);padding:clamp(22px,3vw,34px) clamp(20px,3.4vw,42px)}
.nysp-numbered__row{display:flex;align-items:baseline;gap:16px;padding:15px 0;border-top:1px solid rgba(141,34,195,.14)}
.nysp-numbered__row:first-child{border-top:0}
.nysp-numbered__num{flex:0 0 42px;font-family:'Dosis',sans-serif;font-weight:700;font-size:30px;line-height:1;color:rgba(141,34,195,.45)}
.nysp-numbered__text strong{display:block;font-weight:700;font-size:17px;line-height:1.35;color:var(--deep);margin-bottom:4px}
.nysp-numbered__text span{font-size:15px;line-height:1.6;color:var(--muted)}

/* Pills */
.nysp-pills{display:flex;flex-wrap:wrap;gap:10px}
.nysp-pill{font-weight:600;font-size:14px;color:var(--purple);background:var(--purple-soft);
  border:1px solid rgba(141,34,195,.16);padding:11px 18px;border-radius:40px;line-height:1}

/* Stat block */

/* --------------------------------------------------------------------------
   PROSE — the legal pages. Optimised for reading, not for conversion.
   ~68ch measure, 1.75 line-height, generous heading rhythm.
   -------------------------------------------------------------------------- */
.nysp-prose{font-size:16.5px;line-height:1.75;color:var(--text);max-width:68ch}
.nysp-prose > *:first-child{margin-top:0}
.nysp-prose p{margin:0 0 18px}
.nysp-prose h2{font-size:clamp(21px,2.2vw,27px);font-weight:800;letter-spacing:-.01em;line-height:1.25;
  color:var(--deep);margin:44px 0 14px}
.nysp-prose h2:first-child{margin-top:0}
.nysp-prose h3{font-size:17.5px;font-weight:700;color:var(--deep);margin:28px 0 10px}

/* EVERY LEVEL, NOT JUST H2.
   The contents rail now links to whichever level a page's clauses actually
   use, and on the policy pages that is H5 -- they were pasted out of Word and
   Word's outline came with them. So all six need the offset, or a clicked
   clause lands underneath the fixed bar.

   H4 to H6 also need to look like clause headings rather than browser default
   bold-and-tiny: they ARE the clauses on those pages, they are what the rail
   names, and a reader following a link should arrive at something that reads
   as a heading. Sized just under H3 and sharing its colour, so a policy that
   uses H2/H3 properly is untouched and one that starts at H5 still has a
   visible structure. */
.nysp-prose h2,
.nysp-prose h3,
.nysp-prose h4,
.nysp-prose h5,
.nysp-prose h6{scroll-margin-top:calc(var(--header-h) + 28px)}
.nysp-prose h4,
.nysp-prose h5,
.nysp-prose h6{
  font-size:16.5px;font-weight:700;line-height:1.4;color:var(--deep);
  margin:30px 0 10px;text-transform:none;letter-spacing:0;
}
.nysp-prose h4:first-child,
.nysp-prose h5:first-child,
.nysp-prose h6:first-child{margin-top:0}
/* A CLAUSE LOOKS LIKE A CLAUSE AT WHATEVER LEVEL IT ARRIVED AT.
   The rail links to one rank of heading, but the three policies disagree about
   which tag that rank is: dev wrote H2, the privacy paste came in as H5, and
   its clause 7 arrived as a one-item list that the renderer promotes to an H2.
   So one page could show two sizes for the same rank -- "Consent to use of
   platforms" at 27px sitting between "Limitation of liability" and "Reporting
   of grievances" at 16.5px. The renderer marks every rail-linked heading with
   .nysp-clause and the size comes from that, not from the tag. Sub-headings
   keep the smaller H4-H6 treatment, which is what they should have had all
   along.

   Flex, so the number holds its own column: a clause title that wraps lines up
   under its first word rather than under the digit. */
.nysp-prose .nysp-clause{
  display:flex;gap:.55ch;align-items:baseline;
  font-size:clamp(21px,2.2vw,27px);font-weight:800;letter-spacing:-.01em;line-height:1.25;
  color:var(--deep);margin:44px 0 14px;text-transform:none;
}
.nysp-prose .nysp-clause:first-child{margin-top:0}
.nysp-prose .nysp-cn{
  flex:none;font-family:'Dosis',sans-serif;font-weight:700;color:var(--purple);
  font-variant-numeric:tabular-nums;
}

/* The paste leaves empty headings behind; an empty heading is 30px of nothing. */
.nysp-prose h1:empty,
.nysp-prose h2:empty,
.nysp-prose h3:empty,
.nysp-prose h4:empty,
.nysp-prose h5:empty,
.nysp-prose h6:empty{display:none}
.nysp-prose ul,.nysp-prose ol{margin:0 0 18px;padding-left:22px}
.nysp-prose li{margin:0 0 10px}
.nysp-prose ul li::marker{color:var(--purple)}
.nysp-prose ol li::marker{color:var(--purple);font-weight:700}
.nysp-prose a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
.nysp-prose strong{font-weight:700;color:var(--deep)}
.nysp-prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
/* A defined term / callout inside legal copy */
.nysp-prose .nysp-note{
  background:var(--lilac-2);border-left:3px solid var(--purple);border-radius:0 12px 12px 0;
  padding:16px 20px;margin:0 0 20px;font-size:15.5px;line-height:1.65;color:var(--deep);
}
.nysp-prose .nysp-note strong{display:block;margin-bottom:4px}

/* Legal two-column shell: sticky contents rail + prose */
/* ── NEVER name a layout class after a template file ──────────────────────────
   This rule used to be .nysp-legal, and the template file is nysp-legal.php.
   WordPress (with the theme) puts a class derived from the template filename
   on the BODY element, so body itself carried "nysp-legal" and this two-column
   grid was applied to the whole document: the body became a 248px + 725px grid,
   the page rendered inside a narrow strip with white either side, and the
   header and footer were pushed into the first column. .nysp-contact had the
   same latent collision waiting for the Contact page.

   Both are renamed so they cannot match a template-derived class, and both are
   scoped under .nysp, which is on <main>. Body is never a descendant of main,
   so even a future template named nysp-policygrid.php could not reach these
   rules. Any new layout wrapper should follow the same two rules. */
.nysp .nysp-policygrid{display:grid;grid-template-columns:248px minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:start}
@media (max-width:900px){.nysp .nysp-policygrid{grid-template-columns:1fr;gap:26px}}

/* NO RAIL: ONE COLUMN, NOT AN EMPTY ONE.
   The two-column rule above assumed the rail is always there, because it used
   to be: the rail was built from H2s and every policy has at least the H2 that
   titles it, so it always had one entry and always rendered.
   Now that a page with no clause structure gets no rail -- which Refund and
   T&Cs both are, one H2 and then plain paragraphs -- the prose became the
   FIRST grid item and inherited the 248px rail column. A full policy squeezed
   into a quarter of the page.
   The grid follows the markup instead: no rail, one column, and the prose
   keeps its own 68ch measure rather than stretching to the full width, which
   is what makes a long policy readable in the first place. */
.nysp .nysp-policygrid--plain{grid-template-columns:minmax(0,1fr)}
.nysp .nysp-policygrid--plain .nysp-prose{margin-inline:auto}

.nysp-toc{position:sticky;top:calc(var(--header-h) + 22px)}
.nysp-toc__title{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.nysp-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.nysp-toc li{counter-increment:toc}
.nysp-toc a{
  display:flex;gap:10px;padding:8px 12px;border-radius:10px;font-size:13.5px;line-height:1.45;
  color:var(--muted);border-left:2px solid transparent;transition:background .15s ease,color .15s ease;
  /* A clause like "Live Online Workshops/Webinars/Sadhanas" is one long token
     with no spaces the browser is obliged to break at, so it ran straight out
     of the highlighted pill. anywhere lets it break mid-token when it has to;
     min-width:0 lets the anonymous text flex item shrink at all, which it
     will not do by default. */
  overflow-wrap:anywhere;min-width:0;
}
.nysp-toc a::before{content:counter(toc);font-family:'Dosis',sans-serif;font-weight:700;font-size:14px;color:rgba(141,34,195,.5);flex:none}
.nysp-toc a:hover{background:var(--lilac-2);color:var(--deep)}
.nysp-toc a.is-active{background:var(--lilac);color:var(--deep);font-weight:600;border-left-color:var(--purple)}
.nysp-toc a.is-active::before{color:var(--purple)}

/* On phones the rail becomes a horizontal pill scroller pinned under the header. */
@media (max-width:900px){
  .nysp-toc{position:sticky;top:0;z-index:20;background:#fff;margin:0 -16px;padding:12px 0 10px;
    border-bottom:1px solid var(--line)}
  .nysp-toc__title{display:none}
  .nysp-toc ol{display:flex;gap:8px;overflow-x:auto;padding:0 16px;scrollbar-width:none;-ms-overflow-style:none}
  .nysp-toc ol::-webkit-scrollbar{display:none}
  .nysp-toc li{flex:none}
  .nysp-toc a{white-space:nowrap;border:1px solid var(--line);border-left-width:1px;border-radius:999px;padding:9px 15px}
  .nysp-toc a.is-active{border-color:var(--purple)}
}

/* --------------------------------------------------------------------------
   ACCORDION — FAQs. Light variant on white, dark variant on ink.
   Ported from .nypl-faq, with a real <button> + aria-expanded so it is
   keyboard and screen-reader correct (the Elementor nested accordion was not).
   -------------------------------------------------------------------------- */
.nysp-acc{border-top:1px solid var(--line)}
.nysp-acc__item{border-bottom:1px solid var(--line)}
.nysp-acc__q{
  width:100%;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  color:var(--deep);font-size:16px;font-weight:600;line-height:1.45;
  padding:20px 2px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
}
.nysp-acc__q:hover{color:var(--purple)}
.nysp-acc__q:focus-visible{outline:3px solid var(--orange);outline-offset:-3px;border-radius:6px}
.nysp-acc__ic{flex:none;width:18px;height:18px;position:relative;margin-top:3px}
.nysp-acc__ic::before,.nysp-acc__ic::after{content:"";position:absolute;background:var(--orange);border-radius:2px;transition:transform .25s ease}
.nysp-acc__ic::before{top:8px;left:1px;right:1px;height:2px}
.nysp-acc__ic::after{left:8px;top:1px;bottom:1px;width:2px}
.nysp-acc__q[aria-expanded="true"] .nysp-acc__ic::after{transform:scaleY(0)}
.nysp-acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.nysp-acc__item.is-open .nysp-acc__a{grid-template-rows:1fr}
.nysp-acc__a > div{overflow:hidden}
.nysp-acc__a p{margin:0 0 20px;padding-right:36px;color:var(--muted);font-size:15.5px;line-height:1.7;max-width:74ch}
@media (max-width:600px){.nysp-acc__a p{padding-right:0}}

.nysp-dark .nysp-acc{border-top-color:rgba(255,255,255,.10)}
.nysp-dark .nysp-acc__item{border-bottom-color:rgba(255,255,255,.10)}
.nysp-dark .nysp-acc__q{color:#fff}
.nysp-dark .nysp-acc__q:hover{color:var(--orange-2)}
.nysp-dark .nysp-acc__a p{color:#B8B2C8}

/* Tab bar (FAQ categories) — real buttons, no Elementor nested tabs.

   ONE ROW, ALWAYS. Wrapping put four pills on one line and the fifth alone
   underneath, which reads as a mistake rather than a choice. The bar is a
   single strip instead: at desktop widths all five fit, and where they cannot
   the strip scrolls sideways, which is the ordinary behaviour for a tab bar and
   keeps the set readable as one group.

   `safe center` matters here. Plain `center` on a scroll container whose
   content is wider than the box overflows equally in both directions, which
   puts the first pill off the left edge where it cannot be scrolled back to.
   `safe` falls back to flex-start exactly in that case. */
.nysp-tabs{
  display:flex;flex-wrap:nowrap;gap:10px;
  justify-content:center;justify-content:safe center;
  margin:0 0 clamp(26px,3vw,40px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
}
.nysp-tabs::-webkit-scrollbar{display:none}
@media (max-width:700px){
  /* Bleed to the screen edges so a scrolled strip does not look clipped. */
  .nysp-tabs{margin-left:-16px;margin-right:-16px;padding:2px 16px}
}
.nysp-tab{
  flex:none;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:12px 18px;border-radius:999px;border:1px solid var(--line-2);background:#fff;color:var(--muted);
  /* The theme uppercases and letter-spaces every button, which is what pushed
     this bar past the width it was drawn for: "One on one sessions" is a third
     wider set that way. The look is right, so it is kept, but it is pinned here
     with a tighter tracking so the width of the bar belongs to this stylesheet
     rather than to whatever the theme does to buttons next. */
  text-transform:uppercase;letter-spacing:.06em;
  transition:all .15s ease;
}
.nysp-tab:hover{border-color:var(--purple);color:var(--purple)}
.nysp-tab[aria-selected="true"]{background:var(--purple);border-color:var(--purple);color:#fff;box-shadow:0 8px 20px rgba(141,34,195,.24)}
.nysp-tab:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* --------------------------------------------------------------------------
   CONTACT channels
   -------------------------------------------------------------------------- */
.nysp-channel{
  display:flex;gap:18px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:0 12px 30px rgba(38,26,72,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.nysp-channel:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(38,26,72,.10);border-color:rgba(141,34,195,.30)}
.nysp-channel .nysp-medal{margin-bottom:0}
.nysp-channel h2,.nysp-channel h3{margin:0 0 4px;font-size:17px}
.nysp-channel p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.nysp-channel__val{display:block;margin-top:8px;font-weight:700;font-size:16px;color:var(--purple);word-break:break-word}

/* Form */
.nysp-form{display:grid;gap:16px}
.nysp-field{display:grid;gap:7px}
.nysp-field label{font-size:13.5px;font-weight:600;color:var(--deep)}
.nysp-field label span{color:var(--orange)}
.nysp-field input,.nysp-field select,.nysp-field textarea{
  font-family:inherit;font-size:15px;color:var(--text);
  padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;width:100%;
}
.nysp-field textarea{min-height:130px;resize:vertical}
.nysp-field input:focus,.nysp-field select:focus,.nysp-field textarea:focus{
  outline:0;border-color:var(--purple);box-shadow:0 0 0 3px rgba(141,34,195,.14)
}
.nysp-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:600px){.nysp-form__row{grid-template-columns:1fr}}
.nysp-form__note{font-size:12.5px;color:var(--muted);line-height:1.55;margin:0}
.nysp-form__note a{color:var(--purple);text-decoration:underline}

/* --------------------------------------------------------------------------
   CLOSING BAND — every page ends the same way, so the trust layer always
   routes back into the path.
   -------------------------------------------------------------------------- */
/* White, not ink.

   It was a dark band on every page, which meant every page finished on a
   colour change and a second dark block a screen after the opening one. On
   the pages that already end light -- the wall of photographs, the policy
   prose -- that reversal read as the footer arriving early.

   The panel stays, because the band is a call to action and a call to action
   needs an edge to sit inside. It is the brand lilac rather than white on
   white, with the purple lift kept and taken right down: enough to say the
   panel is lit, not enough to tint the type. */
.nysp-close{background:#fff;color:var(--text);padding:clamp(46px,5.5vw,80px) 0}
.nysp-close__panel{
  background:var(--lilac-2);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,52px);text-align:center;max-width:920px;margin:0 auto;position:relative;overflow:hidden;
  box-shadow:0 18px 44px rgba(38,26,72,.07);
}
.nysp-close__panel::after{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;
  background:radial-gradient(46% 58% at 50% 50%,rgba(141,34,195,.07) 0%,rgba(141,34,195,0) 72%);
}
.nysp-close__panel > *{position:relative;z-index:2}
.nysp-close__panel h2{color:var(--deep);margin:0 0 12px}
.nysp-close__panel p{color:var(--muted);font-size:clamp(15px,1.5vw,17px);line-height:1.6;margin:0 auto 28px;max-width:52ch}
/* Contact only: its closing sentence is short enough to hold on one line, so
   the shared 52ch cap is lifted here to stop it wrapping onto a second line on
   desktop. Other pages keep the cap so their longer closings still wrap. */
.nysp-page-contact .nysp-close__panel p{max-width:none}

/* The site header and footer come from the neoyug-header-map plugin. The
   preview reproductions that used to live here are gone; only the header
   HEIGHT matters to this stylesheet, and that is --header-h at the top.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Print — the legal pages get printed and emailed. Strip the chrome.
   -------------------------------------------------------------------------- */
@media print{
  /* Anything still waiting to be revealed must print. Without this a page
     printed before it has been scrolled comes out with blank gaps where the
     un-revealed blocks are. */
  [data-reveal]{opacity:1 !important;transform:none !important}
  .nysp-toc,.nysp-close,.nysp-btn{display:none !important}
  .nysp-hero{background:none !important;color:#000;padding:0 0 18px;min-height:0;display:block}
  .nysp-hero__dots,.nysp-hero::before{display:none !important}
  .nysp-hero h1,.nysp-hero .nysp-lead,.nysp-hero .nysp-eyebrow,.nysp-hero .nysp-crumb{color:#000 !important}
  .nysp-hero .nysp-stamp{display:none}
  .nysp .nysp-policygrid{display:block}
  .nysp-prose{max-width:none;font-size:11pt;line-height:1.55}
  .nysp-prose h2{margin-top:22px}
  /* The rail is not printed, so on paper the clause number is the only thing
     left saying where in the document you are. It stays, and it stays black. */
  .nysp-prose .nysp-clause{margin-top:22px;font-size:14pt;break-after:avoid;page-break-after:avoid}
  .nysp-prose .nysp-cn{color:#000}
  body{background:#fff}
  /* One class heavier than the bare `a`, to match the reset at the top of this
     file. On paper a link is worth showing as a link. */
  .nysp a{text-decoration:underline}
}

/* --------------------------------------------------------------------------
   STORY — sticky heading beside flowing prose. Used for editorial sections on
   About Us and Neo Rise: the heading holds its place while the copy scrolls,
   which keeps long-form text anchored without a second hero.
   -------------------------------------------------------------------------- */
.nysp-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:start}
.nysp-story__aside{position:sticky;top:calc(var(--header-h) + 34px)}
.nysp-story__aside .nysp-h2{max-width:17ch}
@media (max-width:860px){
  .nysp-story{grid-template-columns:1fr;gap:22px}
  .nysp-story__aside{position:static}
  .nysp-story__aside .nysp-h2{max-width:none}
}
.nysp-seekers{max-width:940px;margin:0 auto}


/* Roman-numeral marker kept on legal sub-headings (cross-referenced in copy) */
.nysp-prose .nysp-rn{color:var(--purple);font-weight:800;margin-right:2px}

/* FAQ page specifics */
.nysp-faqwrap{max-width:860px}
.nysp-tab__n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:var(--purple-soft);color:var(--purple);
  font-size:11.5px;font-weight:700;line-height:1;margin-left:2px}
.nysp-tab[aria-selected="true"] .nysp-tab__n{background:rgba(255,255,255,.22);color:#fff}
.nysp-acc h3{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
a.nysp-card h3{transition:color .15s ease}
a.nysp-card:hover h3{color:var(--purple)}
/* A card that is a link says so, in the one place a reader looks for the
   answer: the bottom of the card. Without this the card hovers and lifts like
   the others and nothing tells anyone it goes anywhere. The cards in a row are
   stretched to a common height by the grid, so the affordance is pushed to the
   foot of each one and the two line up whatever their copy runs to. */
.nysp-card--link{display:flex;flex-direction:column}
.nysp-card--link p{flex:1}
/* A button, not a text link. The card is the anchor -- a real <button> or a
   second <a> inside it would be invalid markup and a second tab stop for one
   destination -- so this is a span that looks like the call to action it is.
   As a coloured text link it was being read as a caption: the whole card lifts
   on hover like the non-linked cards do, and nothing else said it went
   anywhere. */
.nysp-card__go{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  padding:12px 24px;border-radius:999px;
  background:var(--purple);color:#fff;
  font-weight:700;font-size:14.5px;line-height:1;
  box-shadow:0 8px 20px rgba(141,34,195,.26);
  transition:transform .15s ease,box-shadow .15s ease;
}
.nysp-card__go span{font-size:17px;line-height:1;transition:transform .15s ease}
a.nysp-card:hover .nysp-card__go{transform:translateY(-2px);box-shadow:0 12px 26px rgba(141,34,195,.34)}
a.nysp-card:hover .nysp-card__go span{transform:translateX(3px)}
a.nysp-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  a.nysp-card:hover .nysp-card__go,
  a.nysp-card:hover .nysp-card__go span{transform:none}
}

/* Contact page layout */
.nysp .nysp-contactgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(26px,4vw,56px);align-items:start}
@media (max-width:900px){.nysp .nysp-contactgrid{grid-template-columns:1fr;gap:28px}}
.nysp-contact__form{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3.4vw,40px);box-shadow:0 14px 40px rgba(38,26,72,.07)}
.nysp-contact__form .nysp-lead{margin-bottom:26px}
.nysp-contact__aside{display:grid;gap:18px}
.nysp-card--quiet{background:transparent;box-shadow:none;border-style:dashed}
.nysp-linklist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:2px}
.nysp-linklist a{display:flex;align-items:center;gap:9px;padding:10px 0;font-size:14.5px;font-weight:600;
  color:var(--deep);border-bottom:1px solid var(--line)}
.nysp-linklist li:last-child a{border-bottom:0}
.nysp-linklist a::after{content:"›";margin-left:auto;color:var(--purple);font-size:18px;line-height:1;
  transition:transform .15s ease}
.nysp-linklist a:hover{color:var(--purple)}
.nysp-linklist a:hover::after{transform:translateX(3px)}
/* Channel cards are anchors wrapping spans, so restore block flow inside them. */
/* The text column. Named rather than matched as :last-child -- the card grew
   a trailing arrow, and a positional selector would have started styling that
   instead, silently, which is exactly what it did once. */
.nysp-channel__body{display:block;min-width:0}

/* --------------------------------------------------------------------------
   Grid children must be allowed to shrink.
   A grid item's default `min-width:auto` refuses to go narrower than its
   content, so on a phone the contents rail (a horizontal pill scroller) and
   the long unbroken URLs in the policy text pushed the whole document wider
   than the viewport: 2240px of page in a 1500px window, and every band
   scrolling sideways. The single-column mobile overrides were written `1fr`,
   which is `minmax(auto,1fr)` and inherits exactly that floor. Pinning the
   floor to 0 on every grid child is the general fix; the explicit
   minmax(0,1fr) below keeps the intent visible at each call site.
   -------------------------------------------------------------------------- */
.nysp .nysp-policygrid > *, .nysp-story > *, .nysp .nysp-contactgrid > *,
.nysp-grid > *{min-width:0}

@media (max-width:900px){
  .nysp .nysp-policygrid{grid-template-columns:minmax(0,1fr)}
  .nysp .nysp-contactgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){.nysp-story{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  .nysp-grid--2,.nysp-grid--3,.nysp-grid--4{grid-template-columns:minmax(0,1fr)}
}

/* Long URLs and e-mail addresses appear inline throughout the policies and are
   the other thing that can force a phone to scroll sideways. */
.nysp-prose{overflow-wrap:break-word}
.nysp-prose a{word-break:break-word}


/* --------------------------------------------------------------------------
   Two measured contrast fixes on white / purple surfaces.

   1. The required-field asterisk used brand orange #E96F46, which is 3.08:1 on
      white. It marks a required field, so it is information, not decoration.
      --orange-deep is the same hue darkened to clear 4.5:1 (measured 5.45:1);
      it is used ONLY for orange text on light backgrounds. The orange on dark
      surfaces (accordion icons, focus rings) is already well clear and keeps
      the brighter brand value.
   2. A selected tab's count badge was white on rgba(255,255,255,.22) over
      purple, which composites to 4.42:1 -- just under AA for 11.5px text.
      Dropping the wash to .18 darkens the pill to 4.77:1.
   -------------------------------------------------------------------------- */
:root{--orange-deep:#B8431A}
.nysp-field label span{color:var(--orange-deep)}
.nysp-tab[aria-selected="true"] .nysp-tab__n{background:rgba(255,255,255,.18)}

/* Two contact channels sit centred rather than stretched across three columns. */
.nysp-channels{max-width:880px;margin:0 auto}

/* ==========================================================================
   IMAGE SLOTS — ported from the landing plugin's .nypl-ph.

   Every slot renders a placeholder until someone supplies a real image, so the
   layout is already the right shape and adding art later is a one-line content
   change rather than a redesign. Same lilac gradient and centred uppercase
   label the landing plugin uses for its own un-filled media, so an empty page
   here looks like an empty course page there rather than like a broken one.

   In a content file:
       @story.image                     -> leave blank for the placeholder
       https://neoyug.com/wp-content/…  -> or paste a URL to fill it
   ========================================================================== */
.nysp-ph{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(135deg,#cdb8e6 0%,#e7d6f4 45%,#f5e3ec 100%);
}
.nysp-ph::after{
  content:attr(data-label);position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:rgba(38,26,72,.40);
}
.nysp-figure{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--lilac);
  box-shadow:0 16px 40px rgba(38,26,72,.10)}
.nysp-figure img{width:100%;height:100%;object-fit:cover;display:block}
.nysp-figure--wide{aspect-ratio:16/9}
.nysp-figure--tall{aspect-ratio:4/5}
.nysp-figure--square{aspect-ratio:1/1}
/* A media band: image on one side, copy on the other, alternating. */
.nysp-media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4.5vw,64px);align-items:center}
/* No picture to put beside the copy: the copy takes the full width rather than
   sitting in half of it next to a hole. Set by PHP, not by :has(), so the
   layout does not depend on selector support. */
.nysp-media--solo{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto;text-align:center}
.nysp-media > *{min-width:0}
.nysp-media--flip .nysp-media__fig{order:2}
@media (max-width:860px){
  .nysp-media{grid-template-columns:minmax(0,1fr);gap:28px}
  .nysp-media--flip .nysp-media__fig{order:0}
}

/* ==========================================================================
   MOTION — the landing pages animate on scroll; these do the same, without
   pulling in GSAP. An IntersectionObserver adds .is-in once and the element
   rises into place. Elements are only hidden if the observer exists AND the
   viewer has not asked for reduced motion, so with JS off or motion reduced
   the page renders fully visible rather than blank. That ordering matters:
   the failure mode of a reveal animation should never be invisible content.
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .js-reveal [data-reveal]{
    opacity:0;transform:translateY(18px);
    transition:opacity .62s cubic-bezier(.22,.7,.25,1),transform .62s cubic-bezier(.22,.7,.25,1);
    transition-delay:var(--reveal-delay,0ms);
  }
  .js-reveal [data-reveal].is-in{opacity:1;transform:none}
  /* Cards in a grid arrive one after another rather than all at once. */
  .js-reveal .nysp-grid > *{transition-delay:calc(var(--i,0) * 70ms)}
}
/* Hover lifts already exist on cards; calm them for reduced motion. */
@media (prefers-reduced-motion:reduce){
  .nysp-card--hover:hover,.nysp-channel:hover,.nysp-btn:hover{transform:none}
}

/* Inline WhatsApp mark inside FAQ answers: the logo instead of a bare number. */
.nysp-wa{display:inline-flex;align-items:center;gap:7px;vertical-align:baseline;
  font-weight:600;color:var(--purple);text-decoration:none;
  background:var(--purple-soft);border:1px solid rgba(141,34,195,.18);
  padding:3px 11px 3px 9px;border-radius:999px;line-height:1.5;
  transition:background .15s ease,border-color .15s ease}
.nysp-wa:hover{background:rgba(141,34,195,.14);border-color:rgba(141,34,195,.34)}
.nysp-wa svg{width:15px;height:15px;flex:none;fill:#25D366;stroke:none}
.nysp-acc__a p a{color:var(--purple);text-decoration:underline;text-underline-offset:2px}
.nysp-acc__a p a.nysp-wa{text-decoration:none}

/* --------------------------------------------------------------------------
   THE FOUR PATHS (Co-Creator).

   The live page showed these roles in a Premium Addons "media wheel": one
   panel visible, the rest hidden in the DOM behind a rotating dial. That cost
   the hidden roles their search visibility and made them unreachable by
   keyboard. They are real tab panels here, on the pattern already used by the
   FAQ, so every path is in the markup and every path is reachable.

   What changed in 1.3.0 is the shape, not the semantics. A row of pills gives
   four destinations equal, anonymous weight and leaves the panel starting
   halfway down the page; a vertical rail reads as what it is -- a list of four
   different applications -- keeps all four labels visible while you read one,
   and hands the panel the rest of the width. The rail is sticky, so the other
   three paths stay one click away however long a panel runs.

   Dark ground on purpose. This is the page's centrepiece and the only band on
   it that is: the opening is ink, the qualities are white, and this sits
   between them as the thing the page is actually for.
   -------------------------------------------------------------------------- */
.nysp-paths{background:var(--hero-purple);color:#fff;position:relative;overflow:hidden}
.nysp-paths::before{content:none}
.nysp-paths > *{position:relative;z-index:2}
.nysp-paths .nysp-h2,.nysp-paths .nysp-h3{color:#fff}
.nysp-paths .nysp-lead{color:#C9C2DD}
.nysp-paths .nysp-eyebrow{color:var(--orange-2)}

.nysp-paths__grid{
  display:grid;grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(22px,3vw,44px);align-items:start;
}

/* The rail. Sticky so the four labels are still there at the foot of a long
   panel, which is the whole reason for putting them in a column. */
.nysp-paths__rail{display:flex;flex-direction:column;position:sticky;top:calc(var(--header-h) + 30px)}
.nysp-path{
  display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;
  font:inherit;font-weight:600;font-size:clamp(15px,1.5vw,17px);letter-spacing:-.01em;
  background:transparent;border:0;border-left:2px solid rgba(255,255,255,.13);
  padding:12px 15px;color:rgba(255,255,255,.60);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.nysp-path:hover{color:#fff;border-left-color:rgba(255,255,255,.42)}
.nysp-path[aria-selected="true"]{
  color:#fff;border-left-color:var(--orange);
  background:linear-gradient(90deg,rgba(255,255,255,.07),rgba(255,255,255,0));
}
.nysp-path:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
/* The numbers carry the same orange as the benefit icons below them and the
   eyebrow above them, so the section reads as one accent rather than three.

   They used to be white at 34% and turned orange only on the selected path,
   which made 02, 03 and 04 look switched off -- a numbered list where three
   of the four numbers are greyed reads as three unavailable options. The
   selected path is already marked three other ways: the label goes white, the
   left border turns orange and the row lifts, so the number does not need to
   carry the state as well and can just be the number. */
.nysp-path__n{
  flex:none;font-family:'Dosis',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.14em;color:var(--orange-2);
}

/* Below 860 the column would be taller than the panel it labels, so it becomes
   the horizontal scroller the FAQ already uses. Same control, same semantics. */
@media (max-width:860px){
  .nysp-paths__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .nysp-paths__rail{
    position:static;flex-direction:row;gap:9px;overflow-x:auto;
    -ms-overflow-style:none;scrollbar-width:none;
    margin:0 -26px;padding:2px 26px 8px;
  }
  .nysp-paths__rail::-webkit-scrollbar{display:none}
  .nysp-path{
    flex:none;width:auto;border-left:0;border:1px solid rgba(255,255,255,.20);
    border-radius:999px;padding:11px 18px;background:transparent;
  }
  .nysp-path[aria-selected="true"]{background:var(--purple);border-color:var(--purple)}
}

/* The panel. A glass plate rather than a card, so it belongs to the dark band
   instead of sitting on it. */
.nysp-paths__panels{min-width:0}
.nysp-role{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg);padding:clamp(20px,2.4vw,32px);
}
/* No max-width, and a step down in size. 20ch broke "Become a Mentor at
   NeoYug" -- 25 characters -- across two lines, and the longest of the four,
   "Become a Product and Community Affiliate", needs about 40. At this size all
   four sit on one line on a laptop and wrap only when the panel genuinely
   runs out of room. */
.nysp-role .nysp-h2{font-size:clamp(20px,2.1vw,28px);max-width:none;text-wrap:balance}

.nysp-role .nysp-lead{max-width:56ch;margin-top:9px;font-size:clamp(15px,1.35vw,17px)}
.nysp-role .nysp-btn-row{margin-top:clamp(14px,1.7vw,20px)}

/* The benefits, as hairline rows rather than four more boxes. Boxes inside a
   box is the thing that made the old panel read as a form. */
.nysp-perks{
  list-style:none;margin:clamp(24px,3vw,34px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,40px);
}
@media (max-width:700px){.nysp-perks{grid-template-columns:minmax(0,1fr)}}
.nysp-perk{display:flex;gap:15px;align-items:flex-start;padding:18px 0;border-top:1px solid rgba(255,255,255,.11)}
.nysp-perk > span:last-child{display:flex;flex-direction:column;gap:5px;min-width:0}
.nysp-perk strong{font-size:15.5px;font-weight:700;color:#fff;line-height:1.35}
.nysp-perk > span:last-child > span{font-size:14px;line-height:1.6;color:#A9A2C0}
/* The medallion is a filled purple disc on white; on the dark plate it becomes
   an outlined one, so it reads as a mark rather than as a blob of brand. */
.nysp-paths .nysp-medal{
  width:40px;height:40px;margin-bottom:0;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
}
.nysp-paths .nysp-medal svg{width:19px;height:19px;stroke:var(--orange-2)}
/* Card with a picture on top (Find Your Tribe, the three qualities).

   The picture runs nearly the full width of the card, held off the edge by a
   thin white margin on all three sides and given its own rounded corners. The
   inset is one value, --bleed: the side margins are negative by exactly the
   card's own horizontal padding, so changing the padding cannot break the
   alignment. The radius is a little tighter than the card's so the two curves
   sit concentrically rather than looking like one curve drawn twice. */
.nysp-card--media{padding-top:0;overflow:hidden}
.nysp-card--media .nysp-figure{
  --bleed:10px;
  --pad:clamp(20px,2.4vw,28px);
  width:auto;
  margin:var(--bleed) calc(var(--bleed) - var(--pad)) 18px;
  border-radius:calc(var(--radius) - 7px);
  box-shadow:none;
}
@media (max-width:480px){.nysp-card--media .nysp-figure{--bleed:8px}}

/* People grid (Our Co-Creators). */
.nysp-people{--gap:clamp(18px,2.4vw,30px)}
.nysp-person{text-align:center}
.nysp-person__fig{position:relative;aspect-ratio:1/1;border-radius:50%;overflow:hidden;margin:0 auto 16px;
  width:min(100%,190px);background:var(--lilac);box-shadow:0 12px 30px rgba(38,26,72,.10)}
.nysp-person__fig img{width:100%;height:100%;object-fit:cover;display:block}
.nysp-person__name{font-size:16.5px;font-weight:700;color:var(--deep);margin:0 0 4px;line-height:1.3}
.nysp-person__role{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}

/* --------------------------------------------------------------------------
   COMMUNITY page blocks.
   -------------------------------------------------------------------------- */
/* The five "why join" items are labels with no body copy on the live page, so
   they are laid out as an icon row rather than forced into cards that would be
   three quarters empty. A body: line in the content file fills in underneath. */
/* One row, however many reasons there are. auto-fit with a flexible track keeps
   them on a single line on desktop (five reasons used to wrap 4 + 1, which read
   as a mistake) and drops to two columns, then one, as the width runs out.
   minmax(0,1fr) rather than minmax(0,230px) so the row fills the width evenly
   instead of leaving a gap on the right. */
.nysp-tribe{display:flex;flex-direction:column}
.nysp-tribe__status{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple);background:var(--purple-soft);
  border:1px solid rgba(141,34,195,.18);padding:5px 11px;border-radius:999px;margin-bottom:12px}
.nysp-tribe p{flex:1}
.nysp-tribe__go{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-weight:700;font-size:14px;color:var(--purple)}
.nysp-tribe:hover .nysp-tribe__go span{transform:translateX(3px)}
.nysp-tribe__go span{transition:transform .15s ease;font-size:17px;line-height:1}

/* Testimonials. */
.nysp-stories{max-width:980px;margin:0 auto}
/* The cards are grid items, so they are already the same height; the names sat
   at different heights only because each caption followed its own quote. Making
   the figure a column and pushing the caption down with margin-top:auto pins
   every caption to the bottom of the card, so the names line up across the row
   however long the quotes are. The blockquote keeps its own bottom margin as
   the minimum gap for the case where the quotes happen to be the same length. */
.nysp-quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3vw,34px);box-shadow:0 14px 36px rgba(38,26,72,.07);position:relative;
  display:flex;flex-direction:column;height:100%}
/* The rule down the left of each card, in brand orange.

   It used to be the blockquote's own left border, so it was exactly as tall as
   the quote: two cards side by side with a long quote and a short one drew two
   rules of noticeably different lengths, which read as a mistake rather than as
   a mark. The rule is now the CARD's, positioned between the card's top and
   bottom padding, so it is the same length in every card in the row whatever
   the quotes do -- the cards are grid items and already share a height.

   Brand orange rather than --orange-2: this sits on the white card, where
   #E96F46 measures 3.08:1, over the 3:1 a non-text graphic needs, and it is
   the true brand colour.

   The large opening quotation glyph that used to sit behind the top-left
   corner is gone. Two marks doing the same job in the same corner is one too
   many, and the quote already announces itself as a quote. */
.nysp-quote::before{
  content:"";position:absolute;left:clamp(24px,3vw,34px);
  top:clamp(24px,3vw,34px);bottom:clamp(24px,3vw,34px);
  width:3px;border-radius:3px;background:var(--orange);
}
.nysp-quote blockquote{
  margin:0 0 18px;font-size:16.5px;line-height:1.65;color:var(--deep);position:relative;
  border:0;padding-left:18px;
  border-radius:0;quotes:none;
}
.nysp-quote blockquote::before,
.nysp-quote blockquote::after{content:none}
/* The caption clears the rule too, so the name and the quote share one edge. */
.nysp-quote figcaption{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-left:18px}
.nysp-quote__name{font-weight:700;font-size:15px;color:var(--deep)}
.nysp-quote__role{font-size:13.5px;color:var(--muted)}
/* The program a quote is about, linked to its page. Muted so it reads as an
   attribution rather than competing with the name, but underlined on hover so
   it is obviously a link and not a label. */
.nysp-quote__prog{font-size:13.5px;color:var(--muted);line-height:1.5}
.nysp-quote__prog a{color:var(--purple);text-decoration:none;text-underline-offset:2px}
.nysp-quote__prog a:hover,.nysp-quote__prog a:focus-visible{text-decoration:underline}

/* --------------------------------------------------------------------------
   VIDEO, as a click-to-play facade.

   The still frame and the play button are ours; the player only arrives when
   somebody presses it. So a page carrying a video costs nothing until it is
   wanted, and YouTube is not told about visitors who never watch.
   -------------------------------------------------------------------------- */
.nysp-video{cursor:pointer}
.nysp-video__play{
  position:absolute;inset:0;margin:auto;width:76px;height:76px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--purple);
  box-shadow:0 10px 30px rgba(38,26,72,.28);
  transition:transform .18s ease,background .18s ease;
}
.nysp-video__play svg{width:34px;height:34px;fill:currentColor;margin-left:4px}
.nysp-video:hover .nysp-video__play{transform:scale(1.07);background:#fff}
.nysp-video__play:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.nysp-video iframe,
.nysp-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.nysp-video video{object-fit:cover;background:#000}
/* When nothing on the device can play the stream, say so rather than leaving a
   black rectangle that looks like a bug. */
.nysp-video__fail{position:absolute;inset:0;margin:0;display:flex;align-items:center;
  justify-content:center;text-align:center;padding:24px;color:#fff;background:var(--nightfall);
  font-size:15px;line-height:1.5}
.nysp-video__fail a{color:var(--orange-2);text-decoration:underline}
/* No image set: the slot still needs to read as a video, not as a blank box. */
.nysp-video:not(:has(img)){background:var(--nightfall)}
@media (prefers-reduced-motion:reduce){
  .nysp-video:hover .nysp-video__play{transform:none}
}

/* Prose sitting inside a media band: it has the column, not the page, to fill,
   and it follows a heading rather than opening a section. */
.nysp-prose--tight{max-width:none;font-size:16px;margin-top:16px}
.nysp-prose--tight p{margin:0 0 14px}
.nysp-prose--tight > *:last-child{margin-bottom:0}

/* A tall portrait beside a block of copy should not tower over it. */
.nysp-media .nysp-figure--tall{max-height:560px;margin-inline:auto;width:100%}
@media (max-width:860px){.nysp-media .nysp-figure--tall{max-height:420px}}

/* ==========================================================================
   HERO IMAGERY.

   The banner can carry a full-bleed photograph. The thing that makes that
   safe is the blend mode, not a guess at how dark the picture is:

     .nysp-hero__media::after paints the SAME purple gradient over the image
     in mix-blend-mode:multiply, and multiply can never return a channel
     lighter than the layer it blends with. The gradient on its own is already
     measured to carry white text at AA. So any photograph under it lands at
     that contrast or darker, whatever it is. A white product shot becomes
     exactly the gradient; a dark one goes darker still.

   That is also what makes it look like one brand rather than a stock photo
   with text on top: every image resolves to the same purple duotone.

   With no image the banner is the gradient alone, which is a finished state,
   not a gap. Paste a URL into @hero.image in the content file to fill it.
   ========================================================================== */
.nysp-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;isolation:isolate}
.nysp-hero__media img{width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:0}
/* The brand duotone. */
.nysp-hero__media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--hero-purple);mix-blend-mode:multiply;
}
/* A gentle vertical scrim: deepens the top so the fixed header always has
   something to sit on, and the bottom so the band meets the next section
   cleanly. Sits above the duotone, below the copy. */
.nysp-hero__media::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(9,5,20,.52) 0%,rgba(9,5,20,.10) 34%,
                                    rgba(9,5,20,.16) 62%,rgba(9,5,20,.46) 100%);
}
/* A hero carrying a picture earns more height; it is the one place on these
   pages where the image is the message. */
.nysp-hero--media{min-height:min(68vh,620px);display:flex;align-items:center}
@media (max-width:767px){.nysp-hero--media{min-height:min(76vh,560px)}}

/* Preview affordance: a discreet marker showing where art will go. It only
   renders when the slot is empty. Delete .nysp-hero__slot from the template
   when the real images land. */
.nysp-hero__slot{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.18);
  padding:6px 14px;border-radius:999px;white-space:nowrap;pointer-events:none;
}

/* ---- Hero motion ------------------------------------------------------
   The picture settles rather than arrives, and the copy rises under it. Both
   are load animations, not scroll ones, because the hero is already on screen.
   Nothing here hides content if it does not run. */
@media (prefers-reduced-motion:no-preference){
  .nysp-hero__media img{animation:nysp-hero-settle 1.5s cubic-bezier(.16,.8,.24,1) both}
  .nysp-hero .nysp-wrap > *{animation:nysp-hero-rise .85s cubic-bezier(.16,.8,.24,1) both}
  .nysp-hero .nysp-crumb  {animation-delay:.05s}
  .nysp-hero .nysp-eyebrow{animation-delay:.12s}
  .nysp-hero h1           {animation-delay:.18s}
  .nysp-hero .nysp-lead   {animation-delay:.28s}
  .nysp-hero .nysp-stamp  {animation-delay:.36s}
  .nysp-hero .nysp-btn-row{animation-delay:.42s}
}
@keyframes nysp-hero-settle{from{transform:scale(1.07);opacity:.55}to{transform:scale(1);opacity:1}}
@keyframes nysp-hero-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* An editor-only notice, shown when a policy page has no text in the editor.
   Not a design element: it exists so the failure explains itself instead of
   presenting an empty page and leaving someone to guess why. */
.nysp-admin-notice{
  max-width:820px;margin:0 auto;padding:22px 26px;
  background:#FFF8E6;border:1px solid #F3D78B;border-left:4px solid #E0A526;
  border-radius:12px;color:#5A4413;font-size:15px;line-height:1.6;
}
.nysp-admin-notice p{margin:0 0 10px}
.nysp-admin-notice p:last-child{margin:0;font-size:13px;opacity:.75}

/* ==========================================================================
   OPENING BANDS.

   Not every page should arrive the same way. The shared hero (.nysp-hero) is
   right for the pages whose opening is a sentence; it is wrong for the four
   whose opening is a THING -- the film on About Us, the four applications on
   Co-Creator, the photographs on Community, the work itself on Neo Rise.

   All four use this band: the statement on an ink ground on one side, the
   thing on the other. That split is also what makes the contrast trivially
   safe. The hero can carry a photograph because the brand gradient is
   multiplied over it, a guarantee that costs the picture its own colour --
   fine behind a headline, wrong for footage or for a wall of faces. Here the
   copy never sits over the image at all, so the pictures keep the colour they
   were shot in and the type keeps its 15:1 against #0A0813 without anything
   being measured.
   ========================================================================== */
.nysp-open{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--hero-purple);color:#fff;
}
/* A brand lift under the copy, so the ink reads as lit rather than as black. */
.nysp-open::before{content:none}
.nysp-open__inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  align-items:stretch;
  /* A floor, not a driver. The band used to be 760px tall whatever was in it,
     which left a 16:9 card floating in a screenful of empty ink. The two
     columns size themselves now and the taller one wins. */
  min-height:min(62vh,560px);
}

/* The copy column is padded, not wrapped, so its left edge lands exactly where
   .nysp-wrap's does further down the page while the media beside it still
   reaches the viewport edge. One expression, so the two cannot drift. */
.nysp-open__copy{
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:
    calc(var(--nysp-clear) + clamp(44px,5vw,76px))
    clamp(26px,3.4vw,58px)
    clamp(48px,5.5vw,84px)
    max(26px, calc(50vw - (var(--max) / 2) + 26px));
}
.nysp-open .nysp-eyebrow{
  font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.66);margin:0 0 18px;max-width:34ch;
}
/* 52px, not the 60px this started at. The cap has to suit the LONGEST
   headline in the set, not the shortest: "Transformation is Personal" is two
   lines at 60px, but "We transform your business, while you transform lives"
   is six, and six lines of 60px type is a page that opens on a wall of
   words. At 52px the long ones come back to four and the short ones lose
   nothing anyone would notice. */
.nysp-open h1{
  font-weight:700;font-size:clamp(32px,4.1vw,52px);line-height:1.06;
  letter-spacing:-.03em;margin:0;max-width:17ch;color:#fff;text-wrap:balance;
}
.nysp-open .nysp-lead{
  font-size:clamp(16px,1.6vw,20px);line-height:1.55;letter-spacing:-.005em;
  color:rgba(255,255,255,.80);max-width:42ch;margin:22px 0 0;
}
.nysp-open .nysp-crumb{margin:0 0 22px}
.nysp-open .nysp-btn-row{margin-top:clamp(26px,3vw,36px)}

/* ---- The media card -------------------------------------------------------
   WHY 16:9 AND NOT EDGE TO EDGE.

   This column used to be filled by the picture, which meant object-fit:cover
   cropped roughly 290px off each side of a 16:9 film -- including any words
   burnt into the footage -- and stranded the native control bar at the bottom
   of a 780px frame, a long way below the picture people were watching. The
   card is the film's own shape now. Nothing is cropped, and the controls sit
   along the bottom edge of the film, which is where everyone looks for them.

   It still runs off the right edge of the viewport, so the band keeps its
   scale; only the left corners are rounded, because the right ones are never
   on screen. */
.nysp-open__frame{
  position:relative;display:flex;align-items:center;min-width:0;
  /* Clears the fixed header, then centres the card in what is left, so the
     card is centred in the part of the band you can actually see. */
  padding:
    calc(var(--nysp-clear) + clamp(16px,2vw,28px))
    0
    clamp(20px,2.4vw,34px)
    clamp(4px,1.2vw,20px);
}
.nysp-open__card{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  background:#07040F;box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.nysp-open__card > img{width:100%;height:100%;object-fit:cover;display:block}
/* A film is never cropped, whatever it was shot at: contain letterboxes an
   unusual ratio onto black rather than cutting the sides off it. An <img>
   poster may crop, because a poster is a picture and a film is not. */
.nysp-open__card video{object-fit:contain;background:#000}
/* A vignette so the play control always has something to sit on, whatever the
   still is. Gated on [data-src], which pages.js strips the moment the player
   is inserted, so nothing is tinted once the film is running. */
.nysp-open__card[data-src]::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(54% 54% at 50% 50%,rgba(6,3,14,.40) 0%,rgba(6,3,14,0) 74%);
}
/* Glass rather than the solid white puck used on in-page video plates: on a
   card this size the solid disc reads as a control stuck onto a picture, and
   this reads as part of it. */
.nysp-open .nysp-video__play{
  z-index:3;width:84px;height:84px;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 50px rgba(0,0,0,.34);
}
.nysp-open .nysp-video:hover .nysp-video__play{background:rgba(255,255,255,.24)}

/* No media at all: the copy takes the whole band, centred, rather than sitting
   in half of it next to a hole. A finished state, not a gap. */
.nysp-open--solo .nysp-open__inner{grid-template-columns:minmax(0,1fr);min-height:0}
.nysp-open--solo .nysp-open__copy{
  align-items:center;text-align:center;max-width:var(--max);margin:0 auto;
  padding-left:26px;padding-right:26px;
  /* TIGHTER THAN THE SPLIT OPENING ON PURPOSE.
     The split opening needs the room because its copy is vertically centred
     against a picture, and starting it high would leave the picture hanging.
     A centred statement has nothing to line up with, so the 44-76px this
     inherited just read as a gap under the bar. */
  padding-top:calc(var(--nysp-clear) + clamp(26px,3.6vw,54px));
}

/* THE SECTION'S OWN TOP PADDING, WHICH IS NOT OURS.
   Measured on the live About Us at 1440: the <section> carried 80px of padding
   top AND bottom that no rule in this stylesheet sets -- the host theme pads
   bare <section> elements. Nothing here matched it, so the first fix at this
   only halved the part this file controls and the band still opened 106px
   below the bar.
   The two centred openings assert their own value: the copy already carries
   the clearance plus its own breathing room, so the section adds nothing on
   top. Only the TOP is zeroed; the theme's bottom padding is the band's
   bottom margin and is doing no harm.
   After this, About Us opens 52px under the bar, from 106. */
.nysp .nysp-open--marquee,
.nysp .nysp-open--solo{padding-top:0}

/* THE MARQUEE'S BOTTOM, FOR A DIFFERENT REASON.
   The overhang is the whole point of this opening: the card hangs out of the
   purple onto the white below, so the band does not read as a banner with a
   video stuck under it. The theme's 80px of bottom padding sat underneath the
   card and pushed the band's bottom edge past it, so the card overhung by
   6px instead of the 86px --marquee-lift asks for. The purple ran 80px longer
   than it should and the lift was, in effect, switched off.
   Measured on the live page at 1440: band 874px with a 6px overhang, and 184px
   of nothing between the video and "Our origin". With this, 794px, an 86px
   overhang, and 74px. */
.nysp .nysp-open--marquee{padding-bottom:0}
.nysp-open--solo h1{max-width:22ch}
.nysp-open--solo .nysp-lead{max-width:46ch;margin-left:auto;margin-right:auto}
.nysp-open--solo .nysp-btn-row{justify-content:center}

@media (max-width:900px){
  .nysp-open__inner{grid-template-columns:minmax(0,1fr);min-height:0}
  .nysp-open__copy{
    padding:calc(var(--nysp-clear) + 40px) 26px 34px;
    justify-content:flex-start;
  }
  .nysp-open h1{max-width:18ch}
  .nysp-open__frame{padding:0 26px clamp(34px,6vw,48px)}
  .nysp-open__card{border-radius:var(--radius)}
  .nysp-open .nysp-video__play{width:64px;height:64px}
}

/* ---- Co-Creator: the four ways in, as the opening's right-hand column ------
   A contents list, not decoration. The first thing on the page is also the
   fastest way off it, and each entry deep-links to its panel: pages.js selects
   the matching tab before scrolling, because a hidden panel cannot be scrolled
   to and the link would otherwise appear to do nothing. */
.nysp-open--index .nysp-open__inner{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
/* A second, quieter lift behind the list, so the index side is lit rather
   than a flat black panel next to a lit one. */
.nysp-open--index::after{content:none}
.nysp-open--index .nysp-open__frame{
  display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid rgba(255,255,255,.10);
  padding:
    calc(var(--nysp-clear) + clamp(44px,5vw,76px))
    max(26px, calc(50vw - (var(--max) / 2) + 26px))
    clamp(48px,5.5vw,84px)
    clamp(26px,3.6vw,60px);
}
.nysp-index__wrap{width:100%}
.nysp-index__label{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.44);margin:0 0 4px;
}
.nysp-index{list-style:none;margin:0;padding:0}
.nysp-index li + li{border-top:1px solid rgba(255,255,255,.11)}
/* Declared through every state and scoped under .nysp: the theme styles a
   bare a:hover in a magenta that belongs to no part of this palette, and that
   selector would otherwise win over a single class. */
.nysp .nysp-index a,
.nysp .nysp-index a:link,
.nysp .nysp-index a:visited,
.nysp .nysp-index a:focus,
.nysp .nysp-index a:active{color:rgba(255,255,255,.84);text-decoration:none}
.nysp .nysp-index a:hover{color:#fff;text-decoration:none}
.nysp-index a{
  display:flex;align-items:center;gap:16px;padding:clamp(15px,1.7vw,21px) 2px;
  transition:padding-left .22s cubic-bezier(.22,.7,.25,1);
}
.nysp-index a:hover{padding-left:10px}
.nysp-index a:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.nysp-index__n{
  flex:none;font-family:'Dosis',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.14em;color:var(--orange-2);
}
.nysp-index__name{font-size:clamp(17px,1.9vw,22px);font-weight:600;letter-spacing:-.015em;line-height:1.25}
.nysp-index__go{margin-left:auto;font-size:19px;opacity:.36;transition:transform .22s ease,opacity .22s ease}
.nysp-index a:hover .nysp-index__go{opacity:1;transform:translateX(5px)}
@media (max-width:900px){
  .nysp-open--index .nysp-open__inner{grid-template-columns:minmax(0,1fr)}
  .nysp-open--index .nysp-open__frame{
    border-left:0;border-top:1px solid rgba(255,255,255,.10);
    padding:6px 26px clamp(38px,6vw,56px);
  }
}
@media (prefers-reduced-motion:reduce){
  .nysp-index a:hover{padding-left:2px}
  .nysp-index a:hover .nysp-index__go{transform:none}
}
/* ==========================================================================
   CHAPTER — the About Us story.

   A media band sets a picture and a block of copy at equal weight. This is not
   that: it is the page's one piece of long-form writing, so the portrait is
   staged on its own plate and the first paragraph opens at a larger size, the
   way a printed chapter does. Same two fields as before; only the treatment
   is different.
   ========================================================================== */
.nysp-chapter{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(30px,5vw,78px);align-items:center;
}
.nysp-chapter--solo{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
.nysp-chapter > *{min-width:0}
.nysp-chapter__fig{position:relative}
/* The plate behind the portrait: offset down and left, in brand lilac, so the
   picture has a shadow with a colour instead of a grey one. */
.nysp-chapter__fig::before{
  content:"";position:absolute;left:-16px;bottom:-16px;width:66%;height:58%;
  border-radius:var(--radius);background:var(--lilac);z-index:0;
}
.nysp-chapter__fig > *{position:relative;z-index:1}
.nysp-chapter .nysp-figure--tall{max-height:580px;width:100%;margin-inline:auto}
@media (max-width:860px){
  .nysp-chapter{grid-template-columns:minmax(0,1fr);gap:30px}
  .nysp-chapter .nysp-figure--tall{max-height:430px}
  .nysp-chapter__fig::before{left:-10px;bottom:-10px}
}
/* An eyebrow with a rule running out of it: the mark that says a section is
   editorial rather than another card grid. */
.nysp-eyebrow--rule{display:flex;align-items:center;gap:12px}
.nysp-eyebrow--rule::before{content:"";width:28px;height:2px;background:var(--orange);flex:none;border-radius:2px}
/* The opening paragraph carries the weight; the rest recede behind it. */
.nysp-prose--open > p:first-child{
  font-size:clamp(17px,1.7vw,19px);line-height:1.6;color:var(--deep);font-weight:500;
}

/* ==========================================================================
   TRIPTYCH — "what we look for" (Co-Creator).

   Three tall pictures with the copy beneath them, no card chrome. Boxing the
   three qualities made them read as features of a product; unboxed, with the
   picture doing the talking, they read as the people we are describing.
   ========================================================================== */
/* A compact section: less air above and below, a smaller heading, and a
   shorter picture. Nothing is removed -- it simply stops being laid out as
   though it were the only thing on the page. */
.nysp-section--compact{padding:clamp(30px,3.4vw,50px) 0}
.nysp-section--compact .nysp-head{margin-bottom:clamp(20px,2.2vw,28px)}
.nysp-section--compact .nysp-h2{font-size:clamp(23px,2.6vw,32px)}
.nysp-section--compact .nysp-lead{font-size:clamp(15px,1.3vw,17px);margin-top:10px}

.nysp-trip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.nysp-trip__item{min-width:0}
/* 16:10, not 4:5. Upright was costing about 120px of height per card for a
   picture nobody is studying, and it is the wrong shape for the photographs
   that go in it. */
.nysp-trip__fig{
  margin:0 0 18px;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--radius-lg);background:var(--lilac);
  box-shadow:0 16px 38px rgba(38,26,72,.12);
}
.nysp-trip__fig img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,.8,.24,1);
}
.nysp-trip__item:hover .nysp-trip__fig img{transform:scale(1.045)}
.nysp-trip__n{
  display:flex;align-items:center;gap:12px;margin:0 0 9px;
  font-family:'Dosis',sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.16em;color:var(--orange);
}
.nysp-trip__n::after{content:"";flex:1;height:1px;background:var(--line-2)}
.nysp-trip__item h3{margin:0 0 8px;font-size:clamp(17px,1.7vw,19px)}
.nysp-trip__item p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
@media (max-width:980px){
  .nysp-trip{grid-template-columns:minmax(0,1fr);gap:30px;max-width:560px;margin-inline:auto}
  /* Three portrait frames stacked is a very long section; landscape at this
     width keeps the same pictures and a third of the scrolling. */
  .nysp-trip__fig{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .nysp-trip__item:hover .nysp-trip__fig img{transform:none}
}

/* ==========================================================================
   CONTACT — the two routes, lifted into the banner.

   The page has exactly two useful things on it. Sitting them below a full
   section of reassurance put both of them under the fold on a laptop, which is
   a strange thing to do to a contact page. They are now pulled up into the
   foot of the banner, so the banner and the answer are one view.
   ========================================================================== */
.nysp-hero--seam{padding-bottom:clamp(92px,9vw,152px)}
/* No top padding: the cards bring their own clearance by hanging into the
   banner, and air above them as well would undo the overlap. The bottom is
   given a little more than a standard section instead, so the white strip
   below the cards does not read as a gap the closing band is pressing on. */
.nysp-section--seam{padding-top:0;padding-bottom:clamp(64px,7vw,112px)}
.nysp-channels--lift{
  max-width:1000px;margin:clamp(-112px,-7vw,-60px) auto 0;
  position:relative;z-index:4;
}
.nysp-channels--lift .nysp-channel{
  padding:clamp(26px,3.2vw,38px);border-radius:var(--radius-lg);gap:20px;
  box-shadow:0 28px 64px rgba(38,26,72,.18);align-items:flex-start;
}
/* The heading is now an h2 -- with the "here to help" band gone there is no
   h2 between the page title and these, and a contact page should not be the
   one that skips a heading level. Styled as the label it reads as, with the
   address itself promoted to the line the eye lands on. */
.nysp-channels--lift .nysp-channel h2{
  margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.nysp-channels--lift .nysp-channel__val{
  margin-top:7px;font-size:clamp(17px,1.9vw,21px);letter-spacing:-.015em;color:var(--deep);
}
.nysp-channels--lift .nysp-channel p{margin-top:10px;font-size:14.5px}
.nysp-channels--lift .nysp-medal{width:54px;height:54px}
.nysp-channels--lift .nysp-medal svg{width:25px;height:25px}
.nysp-channel__go{
  margin-left:auto;align-self:center;flex:none;font-size:20px;line-height:1;
  color:var(--purple);opacity:.38;transition:transform .2s ease,opacity .2s ease;
}
.nysp-channel:hover .nysp-channel__go{opacity:1;transform:translateX(4px)}
@media (max-width:600px){
  .nysp-channels--lift{margin-top:-46px}
  .nysp-channels--lift .nysp-channel{gap:16px}
  .nysp-channel__go{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nysp-channel:hover .nysp-channel__go{transform:none}
}

/* ==========================================================================
   COMMUNITY — the tribes.

   The photograph WAS the card: a 3:4.2 frame with the copy lying on top of it.
   That shape is the problem. Every picture of a room is landscape -- 16:9, or
   4:3 off a phone -- and object-fit:cover pushed into a frame that tall threw
   away more than half the width of the frame. A group of thirty came out as
   six people and a wall.

   So the picture sits on top at 4:3, close to the shape it was taken at, and
   the words sit under it on the card's own ground. Same rule as the opening
   and the wall: nothing is written across a photograph, which also means no
   scrim, which also means the pictures keep the colour they were shot in.
   ========================================================================== */
.nysp-tribes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
@media (max-width:1100px){.nysp-tribes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nysp-tribes{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}}

/* A white card, like the triptych on Co-Creator. The dark plate made four
   photographs of bright rooms sit on a block of ink, so the section read as a
   band of its own rather than as part of the white page it is on -- and the
   copy under a picture does not need a dark ground to be legible, which was
   the only argument for it once the words came off the photograph. */
.nysp-tribecard{
  --tribe-inset:clamp(8px,.8vw,11px);
  position:relative;display:flex;flex-direction:column;overflow:hidden;min-width:0;
  border-radius:var(--radius-lg);
  background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 38px rgba(38,26,72,.10);
  transition:transform .22s ease,box-shadow .22s ease;
}
.nysp-tribecard:hover{transform:translateY(-4px);box-shadow:0 26px 58px rgba(38,26,72,.18)}
.nysp-tribecard:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* The photograph is inset and framed rather than bleeding to the card's edge.
   On a white card a full-bleed picture reads as the card's lid; framed, it
   reads as a photograph ON the card, which is what the rest of the set does. */
.nysp-tribecard > img{
  width:calc(100% - 2 * var(--tribe-inset));margin:var(--tribe-inset) var(--tribe-inset) 0;
  aspect-ratio:4/3;object-fit:cover;display:block;flex:none;
  border-radius:var(--radius-sm);border:1px solid var(--line-2);
  transition:transform .8s cubic-bezier(.16,.8,.24,1);
}

.nysp-tribecard:hover > img{transform:scale(1.05)}
/* No picture: the space the picture would have taken is the brand gradient
   rather than a grey box, so a tribe added before its photograph still looks
   finished. */
.nysp-tribecard--plain::before{
  content:"";display:block;flex:none;aspect-ratio:4/3;background:var(--hero-purple);
  width:calc(100% - 2 * var(--tribe-inset));margin:var(--tribe-inset) var(--tribe-inset) 0;
  border-radius:var(--radius-sm);
}
/* static, not relative: the status pill is positioned against the CARD so it
   can sit on the photograph, and a relative body would have made itself the
   containing block instead -- which put the pill at the top of the copy,
   on top of the heading. */
.nysp-tribecard__body{
  position:static;display:flex;flex-direction:column;align-items:flex-start;flex:1;
  padding:clamp(14px,1.5vw,18px) clamp(15px,1.6vw,20px) clamp(16px,1.7vw,21px);gap:7px;
}
/* The pill moves onto the picture: on the white body it was a grey chip under
   a heading, which is a label, and it is meant to be a door sign. */
.nysp-tribecard .nysp-tribe__status{
  position:absolute;z-index:2;
  top:calc(var(--tribe-inset) + clamp(9px,.9vw,13px));
  left:calc(var(--tribe-inset) + clamp(9px,.9vw,13px));
  color:#fff;background:rgba(12,6,24,.58);border-color:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin:0;
}
.nysp-tribecard h3{color:var(--deep);margin:0;font-size:clamp(17px,1.8vw,20px)}
.nysp-tribecard__text{
  font-size:13.5px;line-height:1.55;color:var(--muted);
  /* Three lines, then it stops. The descriptions are written to different
     lengths and the cards are stretched to a common height by the grid;
     clamping is what keeps the link on the card rather than pushing it off
     the bottom of the longest one. */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.nysp-tribecard .nysp-tribe__go{color:var(--purple);margin-top:auto;padding-top:12px}
.nysp-tribecard:hover .nysp-tribe__go span{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .nysp-tribecard:hover{transform:none}
  .nysp-tribecard:hover > img{transform:none}
}

/* ==========================================================================
   THE WALL — offline events, justified.

   Pictures at their own proportions, in rows that are each exactly full
   width. Landscape frames come out wide, upright phone photographs come out
   narrow, nothing is cropped, and every row -- including the last -- runs
   flush from the left edge to the right.

   This is what a masonry could not do. Columns give varied heights and a
   ragged bottom by construction: the last picture in each column ends
   wherever it ends. Rows give varied WIDTHS instead, and a row can always be
   made to fill its line, so the block is square on all four sides.

   HOW IT WORKS
   Each tile grows in proportion to its picture's aspect ratio, so at any row
   height the widths come out right. CSS cannot read an image's ratio, so
   pages.js measures each one on load and writes it to --ar; until then the
   tiles fall back to a sensible flat ratio and the wall still reads. The row
   height is a floor, not a fixed value -- flex-grow stretches the last row to
   the full width rather than leaving it short.

   Wider than .nysp-wrap on purpose. A wall of faces should not be the same
   measure as a paragraph.
   ========================================================================== */
.nysp-wall{
  display:flex;flex-wrap:wrap;
  gap:clamp(10px,1.1vw,16px);
  max-width:1460px;margin:0 auto;padding:0 clamp(14px,2vw,30px);
  --wall-row:clamp(150px,15vw,215px);
}
.nysp-wall__item{
  /* grow in proportion to the picture's shape, and start at the width that
     shape would take at the row height */
  --ar:1.5;
  flex:var(--ar) 1 calc(var(--ar) * var(--wall-row));
  display:flex;flex-direction:column;min-width:0;margin:0;
  border-radius:var(--radius);overflow:hidden;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(38,26,72,.07);
  transition:transform .22s ease,box-shadow .22s ease;
}
a.nysp-wall__item:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(38,26,72,.14)}
a.nysp-wall__item:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.nysp-wall__item img,
.nysp-wall__ph{
  width:100%;height:var(--wall-row);object-fit:cover;display:block;flex:none;
}
.nysp-wall__body{
  display:block;flex:1;
  padding:clamp(9px,.95vw,12px) clamp(11px,1.1vw,14px) clamp(11px,1.1vw,14px);
}
.nysp-wall__title{
  display:block;font-weight:700;font-size:13.5px;line-height:1.3;
  letter-spacing:-.01em;color:var(--deep);
}
.nysp-wall__cap{
  display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--muted);
}
a.nysp-wall__item .nysp-wall__title{transition:color .15s ease}
a.nysp-wall__item:hover .nysp-wall__title{color:var(--purple)}

@media (max-width:1100px){.nysp-wall{--wall-row:clamp(130px,17vw,180px)}}
@media (max-width:700px){
  /* Two up, at a common shape. Below this width a justified row is one and a
     half pictures, which is not a row. */
  .nysp-wall{--wall-row:auto;gap:9px}
  .nysp-wall__item{flex:1 1 calc(50% - 9px);min-width:0}
  .nysp-wall__item img,
  .nysp-wall__ph{height:auto;aspect-ratio:4/3}
  .nysp-wall__title{font-size:12.5px}
  .nysp-wall__cap{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  a.nysp-wall__item:hover{transform:none}
}

/* ==========================================================================
   BENTO OPENING — Community.

   Three columns of tiles: five photographs, one standing block of copy, one
   button and the paging control.

   COLUMNS, NOT A GRID OF EQUAL CELLS
   The pictures NeoYug has are 16:9, or they came off a phone at 4:3 and 3:4.
   A grid of equal cells has to crop everything to whatever shape the cell
   happens to be, which is how a landscape group shot became a tall slice with
   half the room cut off. Each column is its own flex column here, and each
   picture tile carries the ratio it was shot at: the big one 16:9, the named
   one 4:3, the upright one 3:4. Exactly one tile per column is allowed to
   stretch, and that is what keeps the three columns ending level whatever the
   copy runs to.

   HOW THE TRANSITION WORKS
   Every tile that changes carries a shutter: a solid panel clipped away to
   nothing, which sweeps across the tile and back out the far side. Each is
   clipped from a different edge and started at a different moment, so the band
   resolves in several small passes rather than one big fade. The content is
   swapped at the midpoint, while the shutters are closed, so nothing is ever
   seen changing -- which is what makes it read as a cut rather than a
   crossfade.

   The headline tile has no shutter and no fade. It is the page's own words,
   not the slide's, so it stays put: wiping it every time somebody pages would
   say it had changed when it has not.

   WHY THE PICTURES CARRY NO GRADIENT
   Nothing is written across a photograph here. The two tiles that carry words
   put the picture above them, on the tile's own dark ground, so a wall of
   faces looks like the room rather than like a duotone.
   ========================================================================== */
.nysp-bh{
  --bh-ease:cubic-bezier(.7,0,.15,1);
  --bh-wipe:850ms;
  --bh-content:420ms;
  --bh-gap:clamp(8px,.9vw,12px);
  /* THE BENTO'S SURFACES, derived from the band rather than beside it.

     They used to be #0C0718 behind the tiles and #1B1430 on them -- two
     near-blacks with a trace of blue in them, chosen when the band itself was
     #0A0813. Against the lighter violet ground the band carries now, that
     blue read as a different family: two purples in the same composition,
     neither agreeing with the other.

     These are the same hue as the band, stepped in lightness. The frame is
     darker than the band so the tiles have something to sit against; the
     tiles are between the two, so they read as raised off the frame without
     competing with the ground. One hue, three values, which is what stops it
     clashing. */
  --bh-frame:#1B0E38;
  --bh-card:#271552;
  --bh-edge:rgba(255,255,255,.09);

  position:relative;background:var(--hero-purple);
  padding:calc(var(--nysp-clear) + clamp(12px,1.2vw,16px)) 0 clamp(26px,3.2vw,46px);
  isolation:isolate;
}
/* The same brand lift the other dark bands carry, so the set reads as one site. */
.nysp-bh::before{content:none}
.nysp-bh__crumb{
  position:relative;z-index:1;
  width:min(calc(var(--max) + 130px),94vw);margin:0 auto clamp(10px,1.2vw,16px);
}
.nysp-bh__crumb .nysp-crumb{margin:0}
/* Narrower than it was, and narrower again on a short screen.

   The band is meant to be taken in at once, and its height is a function of
   its width: the pictures are sized by ratio, so every pixel of width is
   roughly half a pixel of height. Capping the width is therefore the only
   honest way to cap the height without hard-coding one, and the two height
   queries below are what stop a laptop with a short viewport from finishing
   the band below the fold. */
.nysp-bh__viewport{
  position:relative;z-index:1;
  width:min(calc(var(--max) + 130px),94vw);margin:0 auto;
  background:var(--bh-frame);border:1px solid var(--bh-edge);border-radius:var(--radius);
  box-shadow:0 34px 90px rgba(0,0,0,.52);
  overflow:hidden;isolation:isolate;
}

/* ---- The composition ---------------------------------------------------- */
.nysp-bh__grid{
  display:flex;align-items:stretch;
  gap:var(--bh-gap);padding:var(--bh-gap);
}
.nysp-bh__col{display:flex;flex-direction:column;gap:var(--bh-gap);min-width:0}
/* 16/9, 4/3 and 3/4 -- the ratios of the pictures at the top of each column,
   used as the column widths. Width divided by ratio is height, so with the
   widths in proportion to the ratios all three top pictures resolve to
   exactly the same height and the row starts and finishes on two straight
   lines. Nothing is hard-coded: change a ratio below and its column changes
   width to keep the line. */
.nysp-bh__col--a{flex:1.7778 1 0}
.nysp-bh__col--b{flex:1.3333 1 0}
.nysp-bh__col--c{flex:0.75 1 0}

.nysp-bh__card{
  position:relative;min-width:0;overflow:hidden;
  border-radius:var(--radius-sm);
  background:var(--bh-card);border:1px solid var(--bh-edge);
}
/* The ratios the photographs were actually shot at, and the three that set
   the column widths above. */
.nysp-bh__card--hero{flex:none;aspect-ratio:16/9}
.nysp-bh__card--cap .nysp-bh__img{aspect-ratio:4/3}
.nysp-bh__card--tall{flex:none;aspect-ratio:3/4}
.nysp-bh__card--cap{flex:none}
/* One stretcher per column, so the three end level. */
.nysp-bh__card--say{flex:1 1 auto;min-height:0}
.nysp-bh__card--mid{flex:1 1 auto;min-height:120px}
.nysp-bh__card--tag{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.nysp-bh__card--tag .nysp-bh__img{position:relative;inset:auto;width:100%;flex:1;min-height:60px}
.nysp-bh__card--tag .nysp-bh__img img{position:absolute;inset:0}
.nysp-bh__card--bar{flex:none;min-height:clamp(46px,3.8vw,54px);display:flex}

/* A picture slot. With no picture in it the tile is the brand gradient rather
   than an empty frame, which is what lets a slide of two photographs still
   look composed instead of half-built. */
.nysp-bh__img{position:absolute;inset:0;background:var(--hero-purple)}
/* The named tile's picture is in the flow rather than filling the card, so
   that the caption can sit under it. Two things are load-bearing here.

   min-height:0, because a flex item's automatic minimum size is its content,
   and the content is an <img> whose natural height at this width was taller
   than the ratio asked for -- so the tile came out at the photograph's own
   proportions and ignored aspect-ratio entirely.

   position:absolute on the <img>, so it contributes no intrinsic height at
   all and aspect-ratio is left to decide on its own. */
.nysp-bh__card--cap .nysp-bh__img{position:relative;inset:auto;width:100%;min-height:0}
.nysp-bh__card--cap .nysp-bh__img img{position:absolute;inset:0}

.nysp-bh__img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--bh-ease);
}
.nysp-bh__card:hover .nysp-bh__img img{transform:scale(1.035)}

/* ---- The words ---------------------------------------------------------- */
.nysp-bh__pad{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,1.6vw,22px);
}
.nysp-bh .nysp-eyebrow{
  font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.70);margin:0 0 12px;
}
.nysp-bh h1{
  margin:0;color:#fff;font-weight:700;
  font-size:clamp(24px,2.5vw,34px);line-height:1.1;letter-spacing:-.03em;
  max-width:22ch;text-wrap:balance;
}
.nysp-bh__lead{
  margin:11px 0 0;color:rgba(255,255,255,.74);
  font-size:clamp(13.5px,1.1vw,15px);line-height:1.5;max-width:52ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* The strip under the named picture. */
.nysp-bh__capbody{
  position:relative;z-index:2;flex:none;
  padding:clamp(11px,1.2vw,15px) clamp(13px,1.4vw,18px) clamp(13px,1.4vw,17px);
}
.nysp-bh__capname{
  margin:0;color:#fff;font-weight:600;
  font-size:clamp(13px,1.1vw,15px);line-height:1.3;letter-spacing:-.01em;
}
.nysp-bh__cap{
  margin:4px 0 0;color:rgba(255,255,255,.66);
  font-size:clamp(11.5px,.95vw,12.5px);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nysp-bh__card--cap{display:flex;flex-direction:column}
/* The bottom-right panel is built like the named tile: a picture with its
   words under it, so the corner the eye finishes on has something in it. */
.nysp-bh__card--tag .nysp-bh__capname{font-size:clamp(13px,1.15vw,15.5px)}
.nysp-bh__card--tag .nysp-bh__cap{-webkit-line-clamp:3}

/* ---- The two control tiles ---------------------------------------------- */
.nysp-bh__go,
.nysp-bh__btn{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:clamp(11px,.92vw,12.5px);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;text-align:center;padding:10px;
  transition:background .25s ease;
}
.nysp .nysp-bh__go,
.nysp .nysp-bh__go:link,
.nysp .nysp-bh__go:visited,
.nysp .nysp-bh__go:hover,
.nysp .nysp-bh__go:focus,
.nysp .nysp-bh__go:active{color:#fff;text-decoration:none}
.nysp-bh__go:hover,
.nysp-bh__btn:hover{background:rgba(255,255,255,.09)}
.nysp-bh__go:focus-visible,
.nysp-bh__btn:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
/* Brand purple, and solid. At 22% alpha over the old near-black this landed on
   a muted violet a shade off the band -- close enough to look like a mistake
   rather than a choice, which is the worst place for two purples to be. Solid
   --purple is unmistakably the button, and unmistakably the brand. */
.nysp-bh__card--bar{background:linear-gradient(135deg,var(--purple) 0%,#6E1A9C 100%);border-color:transparent}
.nysp-bh__card--bar:hover{background:linear-gradient(135deg,var(--purple-2) 0%,#7B1FAD 100%)}
.nysp-bh__go:hover{background:rgba(255,255,255,.12)}

.nysp-bh__go{flex:1 1 auto;min-width:0}
.nysp-bh__go:hover{background:rgba(255,255,255,.10)}
.nysp-bh__nav{position:relative;z-index:2;display:flex;flex:0 0 auto}
.nysp-bh__nav[hidden]{display:none}
.nysp-bh__btn{padding-left:clamp(14px,1.6vw,26px);padding-right:clamp(14px,1.6vw,26px)}

/* "PREVIOUS" was breaking across two lines and pushing the bar taller than
   the button beside it.

   The cause is width:100% on .nysp-bh__btn, which is right for the single
   button the rule was written for and circular for two of them: both buttons
   ask their flex parent for its full width, the parent is flex:0 0 auto so
   its width comes from its children, and the browser settles it by squeezing
   both until the longer label wraps.

   Inside the nav they size to their own label instead. nowrap because the
   label is one word and a paging control that changes height as you use it
   is worse than one that is slightly wide. */
.nysp-bh__nav .nysp-bh__btn{width:auto;flex:none;white-space:nowrap}
.nysp-bh__nav,
.nysp-bh__btn + .nysp-bh__btn{border-left:1px solid rgba(255,255,255,.16)}

.nysp-bh__dots{
  position:absolute;z-index:6;right:clamp(16px,1.8vw,24px);top:clamp(16px,1.8vw,24px);
  display:flex;gap:5px;padding:6px 8px;border-radius:999px;
  background:rgba(8,4,18,.46);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.nysp-bh__dots button{
  position:relative;
  width:6px;height:6px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.44);
  cursor:pointer;transition:width .25s ease,background .25s ease;
}
/* The thumb-sized target around a dot-sized dot. */
.nysp-bh__dots button::after{content:"";position:absolute;inset:-19px -7px}
.nysp-bh__dots button[aria-current="true"]{width:20px;background:#fff;border-radius:5px}
.nysp-bh__dots button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---- The shutters -------------------------------------------------------
   Each one is a solid panel clipped to nothing until the band is animating.
   inset() is animated rather than transform, because the panel has to stay
   square to the tile as it crosses it. */
.nysp-bh__shutter{
  position:absolute;inset:0;z-index:5;background:var(--bh-frame);
  pointer-events:none;will-change:clip-path;
}
.nysp-bh__shutter--top   {clip-path:inset(0 0 100% 0)}
.nysp-bh__shutter--bottom{clip-path:inset(100% 0 0 0)}
.nysp-bh__shutter--left  {clip-path:inset(0 100% 0 0)}
.nysp-bh__shutter--right {clip-path:inset(0 0 0 100%)}
.is-bh-animating .nysp-bh__shutter--top   {animation:nysp-bh-top    var(--bh-wipe) var(--bh-ease) forwards}
.is-bh-animating .nysp-bh__shutter--bottom{animation:nysp-bh-bottom var(--bh-wipe) var(--bh-ease) forwards}
.is-bh-animating .nysp-bh__shutter--left  {animation:nysp-bh-left   var(--bh-wipe) var(--bh-ease) forwards}
.is-bh-animating .nysp-bh__shutter--right {animation:nysp-bh-right  var(--bh-wipe) var(--bh-ease) forwards}
@keyframes nysp-bh-top{
  0%{clip-path:inset(0 0 100% 0)} 48%,52%{clip-path:inset(0)} 100%{clip-path:inset(100% 0 0 0)}
}
@keyframes nysp-bh-bottom{
  0%{clip-path:inset(100% 0 0 0)} 48%,52%{clip-path:inset(0)} 100%{clip-path:inset(0 0 100% 0)}
}
@keyframes nysp-bh-left{
  0%{clip-path:inset(0 100% 0 0)} 48%,52%{clip-path:inset(0)} 100%{clip-path:inset(0 0 0 100%)}
}
@keyframes nysp-bh-right{
  0%{clip-path:inset(0 0 0 100%)} 48%,52%{clip-path:inset(0)} 100%{clip-path:inset(0 100% 0 0)}
}
/* The stagger. Small numbers: past about 250ms the tiles stop reading as one
   movement and start reading as several separate ones. */
.is-bh-animating .nysp-bh__d1{animation-delay:0ms}
.is-bh-animating .nysp-bh__d3{animation-delay:100ms}
.is-bh-animating .nysp-bh__d4{animation-delay:150ms}
.is-bh-animating .nysp-bh__d5{animation-delay:200ms}
.is-bh-animating .nysp-bh__d6{animation-delay:250ms}

.nysp-bh__fade{
  transition:opacity var(--bh-content) ease,transform var(--bh-content) var(--bh-ease);
  opacity:1;transform:translateY(0);
}
.is-bh-animating .nysp-bh__fade{opacity:0;transform:translateY(12px)}

/* A short viewport gets a narrower band, which is a shorter one. */
/* The band's height follows its width -- the pictures are sized by ratio, so
   a pixel of width is roughly half a pixel of height. That makes width the
   only honest lever for "fit the screen", and these steps are it. A 15in
   laptop keeps the full 1310; a 13in one gives up a little width to finish
   the band above the fold, which is the better trade. */
@media (min-width:861px) and (max-height:900px){
  .nysp-bh__viewport{width:min(1180px,92vw)}
}
@media (min-width:861px) and (max-height:820px){
  .nysp-bh__viewport{width:min(1060px,90vw)}
  /* The extra room under the band is a luxury a short screen cannot afford. */
  .nysp-bh{padding-bottom:clamp(20px,2.4vw,30px)}
}
@media (min-width:861px) and (max-height:730px){
  .nysp-bh__viewport{width:min(940px,88vw)}
  .nysp-bh__lead{display:none}
}


/* ---- Phones: one picture, not five ----------------------------------------
   Stacked, the bento was a column two and a half screens tall -- an opening
   nobody reaches the end of, on the device most people arrive on. A bento is
   a composition that depends on seeing its pieces against each other, and a
   phone cannot show them that way at any size worth looking at.

   So it stops being a bento. The band becomes the headline, ONE photograph,
   and the controls: the five pictures are still there, one per slide, and the
   carousel advances by itself, so a phone sees the same photographs over time
   that a laptop sees at once. The four other tiles are not hidden decoration,
   they are simply the wrong shape for this screen.
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .nysp-bh{padding-bottom:clamp(14px,3vw,22px)}
  .nysp-bh__viewport{width:min(100%,560px)}
  .nysp-bh__grid{flex-direction:column}
  .nysp-bh__col{flex:none !important}

  /* Everything but the words, one picture and the controls. */
  .nysp-bh__col--b,
  .nysp-bh__col--c{display:none}

  .nysp-bh__card--say{flex:none}
  .nysp-bh__card--hero{flex:none;aspect-ratio:4/3}
  .nysp-bh__card--bar{min-height:52px}
  .nysp-bh__go,
  .nysp-bh__btn{min-height:52px;font-size:12px}
  .nysp-bh__pad{padding:18px}
  .nysp-bh h1{font-size:clamp(23px,6.4vw,29px);max-width:none}
  .nysp-bh__lead{
    margin-top:10px;font-size:13.5px;
    /* Three lines on a phone. The band is an opening, not the page. */
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .nysp-bh__dots{position:static;margin:0 auto var(--bh-gap);width:max-content}
}
@media (max-width:420px){
  .nysp-bh__card--hero{aspect-ratio:1/1}
}

@media (prefers-reduced-motion:reduce){
  /* The swap still happens, and at the same moment; it simply is not drawn.
     Killing the JavaScript instead would leave the band on slide one. */
  .nysp-bh__shutter{display:none}
  .nysp-bh__fade,
  .nysp-bh__img img{transition:none}
  .is-bh-animating .nysp-bh__fade{opacity:1;transform:none}
  .nysp-bh__card:hover .nysp-bh__img img{transform:none}
}
@media print{
  .nysp-bh{padding:0 0 18px;background:none}
  .nysp-bh__viewport{box-shadow:none;border:0;background:none}
  .nysp-bh__grid{flex-direction:column}
  .nysp-bh__shutter,.nysp-bh__dots,.nysp-bh__card--bar{display:none}
  .nysp-bh h1,.nysp-bh__lead,
  .nysp-bh__capname,.nysp-bh__cap{color:#000 !important}
}

/* ==========================================================================
   THE OTHER TWO BANNERS.

   Five pages share partials/hero.php, and left alone that is five pages
   arriving identically. The three policy pages should: they are one template
   serving one kind of document, and only the photograph changes between them.
   FAQs and Contact should not, because neither of them opens on a sentence.

   FAQs opens on a question somebody already has, so the categories and their
   counts are in the band. Contact and the policy pages keep the plain centred
   banner: their opening IS a sentence, and four pages that say one thing each
   should look like four pages that say one thing each.

   .nysp-hero__inner is a plain static div on every other band: full width, no
   containing block, so the absolutely positioned media and dot strips still
   resolve against the section exactly as they did. The panel modifier is the
   only thing that turns it into anything.
   ========================================================================== */

/* ---- FAQs: the categories, in the band ---------------------------------- */
.nysp-hero .nysp-railchips{order:7}
.nysp-railchips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
  margin-top:clamp(26px,3vw,38px);max-width:760px;
}
.nysp-railchip{
  display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:999px;
  font-size:14px;font-weight:600;line-height:1;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
/* Declared through every state and scoped under .nysp: the theme styles a bare
   a:hover in a magenta that belongs to no part of this palette, and a single
   class would lose to it. Same reason as the breadcrumb and the path index. */
.nysp .nysp-railchip,
.nysp .nysp-railchip:link,
.nysp .nysp-railchip:visited,
.nysp .nysp-railchip:focus,
.nysp .nysp-railchip:active{color:#fff;text-decoration:none}
.nysp .nysp-railchip:hover{color:#fff;text-decoration:none}
.nysp-railchip:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.44);transform:translateY(-2px)}
.nysp-railchip:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* The count, in the same pill rather than beside it: a number on its own next
   to a word reads as a price. */
.nysp-railchip em{
  font-style:normal;font-size:12px;font-weight:700;line-height:1;
  padding:3px 7px;border-radius:999px;
  background:rgba(255,255,255,.20);color:#fff;
}
/* The rail adds a band of its own height, so the padding below it comes back
   down: without this the FAQ banner ran a clear 90px taller than the others
   and the first question went under the fold on a laptop. */
.nysp-hero--rail{padding-bottom:clamp(44px,4.4vw,72px)}
@media (max-width:600px){
  /* One row that scrolls, rather than four rows that stack: at this width the
     chips wrap into a block deep enough to push the headline off the screen. */
  .nysp-railchips{
    flex-wrap:nowrap;justify-content:flex-start;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    width:100%;padding-bottom:4px;
  }
  .nysp-railchips::-webkit-scrollbar{display:none}
  .nysp-railchip{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .nysp-railchip:hover{transform:none}
}


/* ==========================================================================
   ABOUT US — the marquee.

   Three pages used to open on the same split band: words on ink, the thing
   beside them. That is one layout doing three jobs, and it made About Us,
   Neo Rise and Co-Creator read as one page with the copy swapped. Only
   Co-Creator keeps it now, because its right-hand column is a contents list
   and the split is what makes it a contents list.

   About Us opens on the film, so the film is given the width of the page
   rather than half of it: the statement centred above, the footage in a 21:9
   card below, hanging out of the bottom of the ink and onto the white section
   underneath. The overhang is the point -- it is what stops this reading as a
   banner with a video stuck under it, and it puts the play control at the
   seam between the two bands, which is where the eye already is.

   The words still never sit over the footage, for the same reason as before:
   the banner can carry any photograph only because the brand gradient is
   multiplied over it, and that guarantee costs the picture its own colour.
   ========================================================================== */
:root{--marquee-lift:clamp(40px,6vw,110px)}

.nysp-open--marquee{overflow:visible}
.nysp-open--marquee .nysp-open__inner{grid-template-columns:minmax(0,1fr);min-height:0}
.nysp-open--marquee .nysp-open__copy{
  align-items:center;text-align:center;
  max-width:var(--max);margin:0 auto;
  /* Same reasoning as the solo opening: this statement is centred and has
     nothing to line up against, so it starts close to the bar. Paired with
     the section's padding-top being zeroed above -- the two together are what
     took About Us from 106px under the bar to 52px. */
  padding:calc(var(--nysp-clear) + clamp(26px,3.6vw,54px)) 26px clamp(30px,3.6vw,50px);
}
.nysp-open--marquee h1{max-width:20ch}
.nysp-open--marquee .nysp-lead{max-width:54ch;margin-left:auto;margin-right:auto}
.nysp-open--marquee .nysp-btn-row{justify-content:center}

/* The card runs to the text column's width, not to the viewport's: a film
   bleeding off both edges has no shape of its own, and this one is the
   subject of the page. */
.nysp-open--marquee .nysp-open__frame{
  position:relative;z-index:3;
  padding:0 max(26px,calc(50vw - (var(--max) / 2) + 26px));
  margin-bottom:calc(-1 * var(--marquee-lift));
}
.nysp-open--marquee .nysp-open__card{
  aspect-ratio:21/9;
  border-radius:var(--radius-lg);
  box-shadow:0 40px 90px rgba(0,0,0,.50);
}
/* The band the card hangs into makes room for it, rather than the card
   covering the first thing anybody reads. */
/* The lift reserves room for the card that hangs into this section; the clamp
   is the breathing space BELOW that card. It was tuned when the overhang was
   not working, so it was carrying the gap on its own. With the card actually
   overhanging again the two stack, so the clamp comes down: 184px between the
   video and "Our origin" is now 74px. */
.nysp-section--lift{padding-top:calc(clamp(30px,3.4vw,52px) + var(--marquee-lift))}

@media (max-width:900px){
  /* The overhang goes: at this width the card is most of the screen and the
     section below starts with a third of itself already scrolled past. */
  :root{--marquee-lift:0px}
  .nysp-open--marquee .nysp-open__copy{padding-left:26px;padding-right:26px}
  .nysp-open--marquee .nysp-open__frame{
    padding:0 26px clamp(34px,6vw,48px);margin-bottom:0;
  }
  .nysp-open--marquee .nysp-open__card{aspect-ratio:16/9;border-radius:var(--radius)}
}
@media print{
  .nysp-open--marquee .nysp-open__frame{margin-bottom:0}
  .nysp-section--lift{padding-top:0}
}

/* ==========================================================================
   NEO RISE — the figures band.

   The one opening on the site with no photograph in it, deliberately. Neo
   Rise is a pitch to people deciding whether to bring us a business, and its
   argument is a number: the market is $55 billion and the wellness market
   around it is $5 trillion. A photograph of a circle is evidence for the
   Community page's argument and decoration for this one.

   So the band is type and figures. The copy runs left rather than centre --
   this is a proposal, not a statement -- and the figures sit along the foot
   behind a rule, which is the shape a proposal's numbers take on paper.

   The figures are read from the same rows the page already had under "Market
   figures", so there is one place to edit them and the band cannot disagree
   with the section that used to sit below it. That section is gone: it was
   the same three numbers, twice, forty pixels apart.
   ========================================================================== */
.nysp-hero--figures{
  text-align:left;
  padding-bottom:clamp(38px,4vw,62px);
}
.nysp-hero--figures .nysp-wrap{align-items:flex-start}
.nysp-hero--figures h1{max-width:19ch}
.nysp-hero--figures .nysp-lead{margin-left:0;margin-right:0;max-width:44ch}
.nysp-hero--figures .nysp-btn-row{justify-content:flex-start}
.nysp-hero--figures .nysp-crumb{margin-bottom:22px}

.nysp-hero .nysp-figrail{order:7}
.nysp-figrail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(20px,2.6vw,44px);
  width:100%;margin-top:clamp(38px,4.4vw,66px);
  padding-top:clamp(24px,2.6vw,36px);
  border-top:1px solid rgba(255,255,255,.22);
}
.nysp-fig{min-width:0}
.nysp-fig__n{
  font-family:'Dosis',sans-serif;font-weight:700;
  font-size:clamp(30px,3.6vw,46px);line-height:1;letter-spacing:-.02em;
  color:#fff;
}
.nysp-fig__l{
  margin:10px 0 0;font-size:14px;line-height:1.45;
  color:rgba(255,255,255,.80);max-width:26ch;
}
.nysp-fig__note{margin:6px 0 0;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.58)}
@media (max-width:640px){
  .nysp-figrail{grid-template-columns:minmax(0,1fr);gap:22px}
  .nysp-fig__l{max-width:none}
}
@media print{
  .nysp-figrail{border-top-color:#999}
  .nysp-fig__n,.nysp-fig__l,.nysp-fig__note{color:#000 !important}
}

/* The label over a path's list of what we bring. Small and quiet: it is a
   signpost for the list under it, not a second heading competing with the
   panel's own. */
.nysp-perks__label{
  margin:clamp(16px,1.8vw,22px) 0 11px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.nysp-dark .nysp-perks__label,
.nysp-paths .nysp-perks__label{color:rgba(255,255,255,.56)}

/* The four benefit rows, tightened so the whole "four ways in" band is one
   screen. They were spaced like a section of their own inside a panel that is
   already inside a section. */
.nysp-paths .nysp-perks{gap:clamp(10px,1.2vw,16px) clamp(20px,2.4vw,34px)}
.nysp-paths .nysp-perk{padding-top:clamp(8px,1vw,11px)}
.nysp-paths .nysp-perk strong{font-size:15px}
.nysp-paths .nysp-perk span span{font-size:13.5px;line-height:1.5}
.nysp-paths .nysp-medal{width:38px;height:38px}
.nysp-paths .nysp-medal svg{width:18px;height:18px}

/* A button row centred under a grid rather than left under a column. */
.nysp-btn-row--centre{justify-content:center;margin-top:clamp(28px,3.4vw,44px)}

/* The two contact routes on a phone. The medal was sized for a card sitting
   beside another one; alone at full width it read as the main event, with the
   address it belongs to set smaller beneath it. */
@media (max-width:600px){
  .nysp-channels--lift .nysp-medal{width:42px;height:42px;flex:none}
  .nysp-channels--lift .nysp-medal svg{width:19px;height:19px}
  .nysp-channels--lift .nysp-channel{padding:20px 18px;gap:14px}
  .nysp-channels--lift .nysp-channel__val{font-size:17px}
  .nysp-channels--lift .nysp-channel p{font-size:13.5px;margin-top:7px}
}

/* The marquee's eyebrow on one line.

   .nysp-open caps the eyebrow at 34ch so a long one does not run the width of
   the band. Centred above a headline that is the widest thing on the page,
   that cap was breaking "Ancient wisdom, modern integration, proven impact"
   across two lines for no reason: there is room, it simply was not allowed to
   use it. */
.nysp-open--marquee .nysp-eyebrow{max-width:none;text-wrap:balance}
@media (max-width:680px){
  /* On a phone it genuinely does not fit, so let it wrap rather than shrink
     to something unreadable. */
  .nysp-open--marquee .nysp-eyebrow{max-width:30ch;margin-inline:auto}
}