/* ===========================================================================
   No1 Princess — About Us page (Figma 352-2083)
   Layered on home.css. Uses the np-abt prefix (the homepage's .np-about is a
   different section). Nav stays in its default cream variant (hero is dark).
   =========================================================================== */

/* Cream page background so the dark hero's rounded bottom reads as a U/arch. */
.np-about-page { background: var(--c-cream); }

/* ---- Story hero (dark, U-shaped) — headline + lead, then a big circular
        portrait with rotating "Tear · Schmear · Cheers" text + crown + play,
        framed by a dark arch with decorative line-art marks. --------------- */
.np-abt-hero {
  position: sticky;
  background: var(--c-dark);
  color: var(--c-cream);
  padding-top: clamp(118px, 15vh, 180px);
height: 1000px;
  border-radius: 0 0 100% 100%;
}
.np-abt-hero__top {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 64px); align-items: start;
}
.np-abt-hero__title {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(24px, 2.8vw, 40px); line-height: 1.12; letter-spacing: -0.005em;
  text-transform: uppercase; margin: 0;
}
.np-abt-hero__lead {
  margin: clamp(4px, 1vw, 12px) 0 0;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(14px, 1.05vw, 17px); line-height: 1.65; color: var(--c-beige);
}

/* the big circle */
.np-abt-circle {
  position: relative;
  width: min(720px, 88vw); aspect-ratio: 1;
  margin: clamp(26px, 4vw, 54px) auto 0;
  margin-top: 14%;
}
/* Wrapper */
.np-abt-circle{
    position:relative;
}

/* Capsule Image */
.np-abt-circle__img{
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
    width:620px;
    height:880px;
    aspect-ratio:420/650;
    border-radius:999px;
    overflow:hidden;
    background:#000;
    z-index:10;
}

.np-abt-circle__img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Text Border */
.np-abt-circle__ring{
    position:absolute;
    left:50%;
    top:60%;
    transform:translate(-50%,-50%);
   
    height:990px;
    overflow:visible;
    z-index:20;
    animation:ringRotate 25s linear infinite;
}

.np-abt-circle__ring text{
    fill:#fff;
    font-size:18px;
    font-weight:600;
    letter-spacing:4px;
    text-transform:uppercase;
}
/* White crown on a black rounded badge at the top of the circle. */
.np-abt-circle__crown {
  position: absolute; top: clamp(2px, 1.4%, 12px); left: 50%; transform: translateX(-50%);
  width: clamp(46px, 6.2vw, 64px); height: clamp(46px, 6.2vw, 64px);
  background: var(--c-dark); border-radius: clamp(9px, 1.3vw, 14px);
  display: grid; place-items: center; color: var(--c-cream); z-index: 5;
}
.np-abt-circle__crown svg { width: 58%; height: auto; }

/* Decorative line-art marks scattered around the hero circle (Figma). */
.np-abt-deco { position: absolute; pointer-events: none; z-index: 2; color: rgba(246, 244, 241, 0.55); }
.np-abt-deco svg { width: 100%; height: auto; display: block; }
.np-abt-deco--dots  { top: -3%;  left: -14%; width: clamp(72px, 10vw, 132px); }
.np-abt-deco--crown { top: 2%;   right: -11%; width: clamp(34px, 4.4vw, 58px); color: rgba(198, 146, 59, 0.85); }
.np-abt-deco--chevl { top: 34%;  left: -11%;  width: clamp(30px, 3.8vw, 52px); }
.np-abt-deco--chevr { top: 46%;  right: -12%; width: clamp(30px, 3.8vw, 52px); }
@media (max-width: 900px) {
  .np-abt-deco--dots, .np-abt-deco--crown, .np-abt-deco--chevl, .np-abt-deco--chevr { display: none; }
}

.np-abt-circle__play {
  position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%);
  width: clamp(52px, 6.6vw, 70px); height: clamp(52px, 6.6vw, 70px);
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s ease, transform .25s ease; z-index: 4;
}
.np-abt-circle__play:hover { background: rgba(255, 255, 255, 0.92); color: var(--c-dark); transform: translate(-50%, -50%) scale(1.07); }
.np-abt-circle__play svg { width: 38%; height: 38%; margin-left: 3px; }
@keyframes np-abt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .np-abt-circle__ring { animation: none; } }

/* ---- Story timeline (cream) with the winding connector line ----------- */
.np-abt-story {
  position: relative; overflow: hidden;
  background: var(--c-cream);
  color: var(--c-dark);
  margin-top: 440px;
  padding-block: clamp(40px, 6vw, 90px) clamp(56px, 8vw, 120px);
}
.np-abt-line {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: rgba(29, 29, 27, 0.85); z-index: 0; pointer-events: none;
}
.np-abt-story .np-container { position: relative; z-index: 1; }

/* Each milestone: a 3-column grid. The TEXT always sits in the centred column;
   the IMAGE alternates to the left or right page edge; the empty outer column
   is the lane the dotted connector line runs through (opposite the image). */
.np-abt-mile {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 600px) 1fr;
  align-items: start;
  column-gap: clamp(16px, 2.4vw, 44px);
}
.np-abt-mile + .np-abt-mile { margin-top: clamp(100px, 13vw, 220px); }
.np-abt-mile__text { grid-column: 2; grid-row: 1; }
.np-abt-mile__media { grid-column: 1; grid-row: 1; justify-self: start; display: flex; }   /* image LEFT */
.np-abt-mile--rev .np-abt-mile__media { grid-column: 3; justify-self: end; }  /* image RIGHT */
.np-abt-mile__title {
  font-family: var(--font-body); font-weight: 800;
  font-size: clamp(36px, 5.4vw, 84px); line-height: 1.0; letter-spacing: -0.02em;
  text-transform: uppercase; margin: 0 0 clamp(18px, 2.2vw, 28px);
}
.np-abt-mile__body {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(14px, 1.05vw, 17px); line-height: 1.7; color: #2b2b29; max-width: 52ch;
}
.np-abt-mile__body p { margin: 0 0 1.05em; }
.np-abt-mile__body p:last-child { margin-bottom: 0; }
.np-abt-mile__cta { margin-top: clamp(24px, 3vw, 34px); }
.np-abt-mile__img {
  width: 100%; max-width: 320px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.14);
}

/* "NO.1" black circle badge near the top-right of the story (Figma). */
.np-abt-badge {
  position: absolute; top: clamp(16px, 3vw, 54px); right: clamp(14px, 5vw, 80px);
  width: clamp(54px, 5.4vw, 72px); height: clamp(54px, 5.4vw, 72px);
  border-radius: 50%; background: var(--c-dark); color: var(--c-cream);
  display: grid; place-items: center; align-content: center; gap: 1px; z-index: 2; text-align: center;
}
.np-abt-badge__crown { width: 38%; height: auto; }
.np-abt-badge span { font-family: var(--font-body); font-weight: 800; font-size: clamp(8px, 0.9vw, 11px); letter-spacing: 1.5px; line-height: 1; }
@media (max-width: 700px) { .np-abt-badge { display: none; } }

@media (max-width: 900px) {
  .np-abt-hero__top { grid-template-columns: 1fr; gap: 22px; }
  .np-abt-hero { border-radius: 0 0 28% 28% / 0 0 6% 6%; }
  .np-abt-line { display: none; }
  .np-abt-mile { grid-template-columns: 1fr; row-gap: 26px; }
  .np-abt-mile + .np-abt-mile { margin-top: clamp(56px, 11vw, 90px); }
  .np-abt-mile__text { grid-column: 1; }
  .np-abt-mile__media,
  .np-abt-mile--rev .np-abt-mile__media { grid-column: 1; justify-self: start; }
}

/* Neutralise Kadence's default blue link colour on the About page. Brand links
   keep their own colours; plain links inherit the section's text colour. */
:where(body.np-about-page) a { color: inherit; }
:where(body.np-about-page) a:hover,
:where(body.np-about-page) a:focus { color: inherit; }