/* ===========================================================================
   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;
}
#imageCrown{
  z-index: 1000;
  position: relative;
  max-width: 100px;
  height: auto;
  left:42%;
  top: 5%;
}
/* 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: 6%; width: clamp(34px, 4.4vw, 58px); color:#737373; rotate: 37deg;}
.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;
  /* same colours while focused/pressed (Kadence focus colours; see home.css `a`) */
  --global-palette-btn-bg-hover: rgba(255, 255, 255, 0.08); --global-palette-btn-hover: #fff;
  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; } }

/* ---- Mobile: the circle portrait + rotating text ring used fixed 620/880/990px
        sizes that overflowed small screens. Scale them to the viewport. ------ */
        .np-abt-story{
          margin-top: 400px;
        }
@media (max-width: 700px) {
  .np-abt-hero { height: auto; padding-bottom: 20px; border-radius: 0 0  100% 100%; }
  .np-abt-circle { width: min(360px, 86vw); margin-bottom: -30%;  }
  .np-abt-circle__img { width: min(230px, 60vw); height: auto; aspect-ratio: 420 / 650; }
  .np-abt-circle__ring { height: min(500px, 105vw); }
  .np-abt-circle__ring text { font-size: 18px; letter-spacing: 4px; }
  #imageCrown { max-width: 64px; }
  /* the portrait only pokes a little below the small circle here, so the big
     desktop clearance leaves a huge empty gap — tighten it. Block-only spacing
     (all-sides padding cramped the text on top of the container gutter). */
  .np-abt-story { margin-top: 180px; padding-block: clamp(28px, 8vw, 48px) clamp(40px, 10vw, 64px); margin-bottom: -52px; }
  #how-it-expanded{
    margin-top: -30px;
  }
  .np-abt-mile__cta {
   padding-left: 20px;
   padding-bottom: 20px;
  }

}

/* ---- Story timeline (cream) with the winding connector line ----------- */
#idea-originated{
  bottom:60px;
}

#how-it-began{
  bottom:35px;
}

#how-it-expanded{
  top: 60px;
}

#what-will-be-next{
  top: 60px;
}
.np-abt-story {
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Solid cream so the rounded bottom actually paints. The section was
       transparent (the cream came from the <body>), so border-radius had no
       background to round — that's why the rounding wasn't visible. */
    background: var(--c-cream);
    /* Dark text: the milestone headings are forced to color:inherit !important
       by the Kadence override in home.css, so they inherit THIS colour. Without
       it they inherited cream from <body> and vanished on the cream background. */
    color: var(--c-dark);
    border-radius: 0 0 52px 52px;
    /* Tuck the dark contact section up under the rounded bottom so the dark
       shows through the corners (otherwise they just reveal the same cream). */
    margin-bottom: -52px;
    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; border-radius: 52px; }

/* 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;
  /* Centre text column caps at 600px (the 1440+ design) but shrinks with the
     viewport below that, so the side lanes + alternating images don't get
     squeezed tiny on laptops (~900–1300px). No layout switch / extra breakpoint. */
  grid-template-columns: 1fr minmax(0, min(600px, 44vw)) 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;
  /* 28px floor (was 36) so long words like ORIGINATED/EXPANDED don't clip on
     ≤360px screens; the 5.4vw growth + 84px cap keep the desktop size identical. */
  font-size: clamp(28px, 5.4vw, 84px); line-height: 1.0; letter-spacing: -0.02em;
  text-transform: uppercase; margin: 0 0 clamp(18px, 2.2vw, 28px);
  overflow-wrap: break-word;
  color: #000;
  z-index: 1000;
  position: relative;
}
/* "How it began": the stacked title with a square photo beside it (Figma frame
   79: 340px square at the right of the 770px column → 44%; square corners). */
.np-abt-mile__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(14px, 2vw, 32px); margin: 0 0 clamp(18px, 2.2vw, 28px);
}
.np-abt-mile__head .np-abt-mile__title { margin-bottom: 0; }
.np-abt-mile__inline { flex: none; width: 44%; max-width: 340px; aspect-ratio: 1; object-fit: cover; display: block; }
.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: 42px ;margin-bottom: -2%; margin-left: -6.5%;}
.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: 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; }
  /* The winding timeline line is hidden here, so hide its travelling progress
     dot too — without the line the JS can't place it and it was stuck half
     off-screen at the top-left. */
  .np-abt-progress { display: none; }
  /* Hide the corner "NO.1" badge once the milestones stack (it overlapped the
     single-column content between 700–900px). */
  .np-abt-badge { display: none; }
  /* Single column: image stacks ABOVE text (was overlapping — both kept
     grid-row:1 from the desktop rules and collided in the same cell). */
  .np-abt-mile { grid-template-columns: minmax(0, 1fr); row-gap: clamp(18px, 4vw, 30px); }
  .np-abt-mile + .np-abt-mile { margin-top: clamp(56px, 11vw, 90px); }
  .np-abt-mile__media,
  .np-abt-mile--rev .np-abt-mile__media { grid-column: 1; grid-row: 1; justify-self: start; }
  .np-abt-mile__text { grid-column: 1; grid-row: 2; }
}

/* Tablet range (701–900px): the hero is still its desktop height with the big
   circle, so keep the desktop top clearance (margin-top from base), but use
   block-only padding so the container gutter isn't doubled up horizontally. */
@media (min-width: 701px) and (max-width: 900px) {
  .np-abt-story { padding-block: clamp(32px, 6vw, 56px) clamp(48px, 8vw, 80px); }
}

/* 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; }


/* 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; }


.np-abt-story{
    position:relative;
    border-radius: 52px !important;
}
.np-abt-line{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
    z-index:1;
}
.np-abt-progress{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:5;
    border-radius: 52px !important;
}
.np-abt-progress__dot{
    position:absolute;
    width:80px;
    height:80px;
    margin-top: -30px;
    margin-left: -30px;

   
}