/* ============================================================================
   Narmer Cosmetics — public site theme
   ----------------------------------------------------------------------------
   App-owned stylesheet (public/css/narmer/site.css), NOT a fork of the plugin's
   compiled Tailwind bundle. It is loaded for the customer panel only, via the
   HEAD_END render hook in App\Providers\Filament\CustomerPanelProvider.

   No brand value is written here: every colour comes from the custom properties
   emitted by resources/views/site/head.blade.php, which reads the `site_theme`
   settings group in the database.

     --nr-beige     Warm Nude Beige      --nr-taupe     Deep Taupe
     --nr-sand      Soft Sand            --nr-rose      Muted Rose Nude
     --nr-cream     Light Nude Cream     --nr-olive     Soft Olive Grey
     --nr-offwhite  Soft Off-White       --nr-warmgrey  Light Warm Grey
     --nr-white     Pure Soft White
     --nr-font-heading / --nr-font-body / --nr-font-heading-ar / --nr-font-body-ar
   ========================================================================== */

/* ---------- base ---------- */

/* The site theme must win over Filament's panel background regardless of sheet order,
   so the body selector is qualified with the panel class rather than left at .fi-body. */
body.fi-body.fi-panel-customer {
    background-color: var(--nr-offwhite);
    color: var(--nr-taupe);
    font-family: var(--nr-font-body);
    font-size: 1.0625rem;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html[dir="rtl"] body.fi-body.fi-panel-customer {
    font-family: var(--nr-font-body-ar);
    line-height: 1.95;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nr-font-heading);
    color: var(--nr-taupe);
    /* 500 = Beatrix Antiqua Medium, the headline weight in the design. The family
       ships only medium/bold/italic, so 600 would resolve up to Bold — heavier than
       the brand look. Bold stays available for explicit emphasis. */
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.2;
    margin: 0 0 0.6em;
}

html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
    font-family: var(--nr-font-heading-ar);
    letter-spacing: 0;
}

p { margin: 0 0 1.15em; }

a {
    color: var(--nr-taupe);
    text-decoration-color: var(--nr-sand);
    text-underline-offset: 0.18em;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
    color: var(--nr-beige);
    text-decoration-color: var(--nr-beige);
}

img { max-width: 100%; height: auto; }

/* ---------- top bar / brand ---------- */

.fi-topbar {
    background-color: var(--nr-white);
    border-bottom: 1px solid var(--nr-warmgrey);
}

.fi-topbar .fi-logo,
.fi-topbar .fi-brand-name {
    font-family: var(--nr-font-heading);
    letter-spacing: 0.06em;
    text-transform: none;
    color: var(--nr-taupe);
}

.fi-topbar nav li a,
.fi-topbar .fi-topbar-item-btn {
    font-family: var(--nr-font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nr-taupe);
}

.fi-topbar nav li a:hover,
.fi-topbar .fi-topbar-item-btn:hover {
    color: var(--nr-beige);
}

html[dir="rtl"] .fi-topbar nav li a,
html[dir="rtl"] .fi-topbar .fi-topbar-item-btn {
    font-family: var(--nr-font-body-ar);
    letter-spacing: 0;
}

/* ---------- page shell ---------- */

.nr-content,
.fi-page {
    --nr-gutter: clamp(1.25rem, 4vw, 4rem);
}

.nr-content {
    max-width: 68rem;
    margin: 0 auto;
}

/* Interior pages keep the framework's page frame; give it breathing room. */
.fi-page > header + div,
.fi-page .fi-page-content {
    padding-block: 0;
}

/* ---------- hero band (first heading + lead paragraph of a page) ---------- */

.nr-content > h1:first-of-type {
    font-size: clamp(2.35rem, 5.2vw, 3.75rem);
    margin: 0;
    padding: 3.25rem var(--nr-gutter) 0.85rem;
    box-shadow: 0 0 0 100vmax var(--nr-cream);
    clip-path: inset(0 -100vmax);
}

.nr-content > h1:first-of-type + p {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    color: var(--nr-taupe);
    margin: 0;
    padding: 0 var(--nr-gutter) 3.25rem;
    box-shadow: 0 0 0 100vmax var(--nr-cream);
    clip-path: inset(0 -100vmax);
}

.nr-content > *:not(h1):not(h1 + p):first-of-type {
    margin-top: 3rem;
}

/* ---------- sections ---------- */

.nr-content .nr-section {
    margin: 3rem 0;
}

.nr-content .nr-section > h2 {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
}

.nr-content .nr-section > h3 {
    font-size: 1.25rem;
}

/* The lead paragraph that used to sit under a section heading */
.nr-content .nr-section > p:first-of-type {
    color: var(--nr-taupe);
    max-width: 46rem;
}

/* ---------- grids + cards ---------- */

.nr-grid {
    display: grid;
    gap: 1.5rem;
    margin: 2rem 0;
}

.nr-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nr-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .nr-grid--2, .nr-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

.nr-content .nr-card {
    background-color: var(--nr-white);
    border: 1px solid var(--nr-warmgrey);
    border-radius: 0.75rem;
    padding: 1.6rem 1.5rem 1.4rem;
    box-shadow: 0 1px 2px rgb(111 94 82 / 0.05);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nr-content .nr-card:hover {
    border-color: var(--nr-sand);
    box-shadow: 0 6px 20px rgb(111 94 82 / 0.09);
    transform: translateY(-2px);
}

.nr-content .nr-card > h3,
.nr-content .nr-card > h2 {
    font-size: 1.2rem;
    margin-bottom: 0.45em;
}

.nr-content .nr-card > p:last-child { margin-bottom: 0; }

.nr-content .nr-card > p:last-child:not(:first-child) { margin-bottom: 0; }

/* secondary line inside a card (e.g. contact hints) */
.nr-content .nr-card > p + p {
    font-size: 0.9375rem;
    color: color-mix(in oklab, var(--nr-taupe) 72%, var(--nr-offwhite));
}

/* ---------- lists ---------- */

.nr-content .nr-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
    max-width: 52rem;
}

.nr-content .nr-list > li {
    position: relative;
    padding-inline-start: 1.6rem;
    margin-bottom: 0.65rem;
}

.nr-content .nr-list > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0.72em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background-color: var(--nr-beige);
}

/* ---------- buttons ---------- */

.nr-content .nr-btn {
    display: inline-block;
    font-family: var(--nr-font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.95rem 1.9rem;
    border-radius: 999px;
    border: 1px solid var(--nr-taupe);
    background-color: var(--nr-taupe);
    color: var(--nr-white);
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

html[dir="rtl"] .nr-content .nr-btn {
    font-family: var(--nr-font-body-ar);
    letter-spacing: 0;
}

.nr-content .nr-btn:hover {
    background-color: var(--nr-beige);
    border-color: var(--nr-beige);
    color: var(--nr-white);
}

.nr-content .nr-btn--ghost {
    background-color: transparent;
    color: var(--nr-taupe);
}

.nr-content .nr-btn--ghost:hover {
    background-color: var(--nr-cream);
    border-color: var(--nr-sand);
    color: var(--nr-taupe);
}

/* ---------- small print ---------- */

.nr-content .nr-meta {
    font-size: 0.875rem;
    color: color-mix(in oklab, var(--nr-taupe) 62%, var(--nr-offwhite));
    border-top: 1px solid var(--nr-warmgrey);
    padding-top: 1rem;
    margin-top: 3rem;
}

/* ---------- footer ---------- */

.nr-footer {
    background-color: var(--nr-taupe);
    color: var(--nr-offwhite);
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem) 1.75rem;
    margin-top: 4rem;
}

.nr-footer__inner {
    max-width: 68rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
}

@media (max-width: 900px) {
    .nr-footer__inner { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.nr-footer h3 {
    font-family: var(--nr-font-heading);
    color: var(--nr-white);
    font-size: 1.15rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.9rem;
}

html[dir="rtl"] .nr-footer h3 { font-family: var(--nr-font-heading-ar); }

.nr-footer__tagline {
    font-family: var(--nr-font-heading);
    font-size: 1.35rem;
    color: var(--nr-white);
    margin-bottom: 0.5rem;
}

html[dir="rtl"] .nr-footer__tagline { font-family: var(--nr-font-heading-ar); }

.nr-footer p,
.nr-footer a,
.nr-footer li {
    color: color-mix(in oklab, var(--nr-offwhite) 88%, var(--nr-taupe));
    font-size: 0.9375rem;
}

.nr-footer a {
    text-decoration-color: color-mix(in oklab, var(--nr-sand) 60%, transparent);
    text-decoration-line: none;
}

.nr-footer a:hover {
    color: var(--nr-white);
    text-decoration-line: underline;
    text-decoration-color: var(--nr-sand);
}

.nr-footer__links { list-style: none; padding: 0; margin: 0; }
.nr-footer__links li { margin-bottom: 0.5rem; }

.nr-footer__contact { margin-bottom: 1.5rem; }

.nr-footer__contact a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.nr-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.nr-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, var(--nr-sand) 45%, transparent);
    color: var(--nr-offwhite);
    background-color: transparent;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.nr-footer__social a:hover {
    background-color: var(--nr-beige);
    border-color: var(--nr-beige);
    color: var(--nr-white);
    text-decoration-line: none;
}

.nr-footer__bottom {
    max-width: 68rem;
    margin: 2.5rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid color-mix(in oklab, var(--nr-sand) 30%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: space-between;
    font-size: 0.875rem;
}

.nr-footer__bottom,
.nr-footer__bottom a {
    color: color-mix(in oklab, var(--nr-offwhite) 70%, var(--nr-taupe));
}

/* ============================================================================
   Editorial sections used by the home page and the product page.
   Same rule as everything above: colour only ever comes from --nr-* tokens.
   ========================================================================== */

/* ---------- eyebrow / actions / pills ---------- */

.nr-content .nr-eyebrow {
    display: block;
    font-family: var(--nr-font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--nr-taupe) 62%, var(--nr-offwhite));
    margin: 0 0 1rem;
}

html[dir="rtl"] .nr-content .nr-eyebrow {
    font-family: var(--nr-font-body-ar);
    letter-spacing: 0;
}

.nr-content .nr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 2rem;
}

.nr-content .nr-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
}

.nr-content .nr-pill {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--nr-warmgrey);
    background-color: var(--nr-white);
    color: color-mix(in oklab, var(--nr-taupe) 85%, var(--nr-offwhite));
}

/* ---------- hero ---------- */

.nr-content .nr-hero {
    display: grid;
    grid-template-columns: 1.04fr 1fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(2.75rem, 5vw, 4.5rem) var(--nr-gutter);
    background-color: var(--nr-cream);
    box-shadow: 0 0 0 100vmax var(--nr-cream);
    clip-path: inset(0 -100vmax);
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.nr-content .nr-hero h1 {
    font-size: clamp(2.5rem, 5.4vw, 4rem);
    line-height: 1.05;
    margin-bottom: 1.1rem;
}

.nr-content .nr-hero__lead {
    font-size: clamp(1.02rem, 1.6vw, 1.22rem);
    max-width: 33rem;
    margin-bottom: 0;
}

.nr-content .nr-hero__media img {
    display: block;
    width: 100%;
    border-radius: 1rem;
}

.nr-content .nr-hero__media {
    filter: drop-shadow(0 22px 44px rgb(111 94 82 / 0.16));
}

@media (max-width: 900px) {
    .nr-content .nr-hero { grid-template-columns: minmax(0, 1fr); }
    .nr-content .nr-hero__media { order: -1; }
}

/* ---------- product spotlight ---------- */

.nr-content .nr-product {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
    margin: clamp(2.5rem, 5vw, 4rem) 0;
}

.nr-content .nr-product__media img {
    display: block;
    width: 100%;
    border-radius: 1rem;
}

.nr-content .nr-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.nr-content .nr-thumbs img {
    display: block;
    width: 100%;
    border-radius: 0.7rem;
}

.nr-content .nr-product h2 { margin-bottom: 0.35em; }

.nr-content .nr-tagline {
    font-family: var(--nr-font-heading);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    color: var(--nr-beige);
    margin: 0 0 1rem;
}

html[dir="rtl"] .nr-content .nr-tagline { font-family: var(--nr-font-heading-ar); }

.nr-content .nr-price {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--nr-font-heading);
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    color: var(--nr-taupe);
    margin: 1.25rem 0 0.25rem;
}

html[dir="rtl"] .nr-content .nr-price { font-family: var(--nr-font-heading-ar); }

.nr-content .nr-price small {
    font-family: var(--nr-font-body);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--nr-taupe) 70%, var(--nr-offwhite));
}

html[dir="rtl"] .nr-content .nr-price small { font-family: var(--nr-font-body-ar); }

.nr-content .nr-pack {
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--nr-taupe) 78%, var(--nr-offwhite));
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .nr-content .nr-product { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- credential band ---------- */

.nr-content .nr-band {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background-color: var(--nr-warmgrey);
    border: 1px solid var(--nr-warmgrey);
    border-radius: 0.9rem;
    overflow: hidden;
    margin: 2rem 0;
}

.nr-content .nr-band__item {
    background-color: var(--nr-white);
    padding: 1.6rem 1.5rem;
}

.nr-content .nr-band__label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--nr-taupe) 60%, var(--nr-offwhite));
    margin-bottom: 0.6rem;
}

.nr-content .nr-band__value {
    display: block;
    font-family: var(--nr-font-heading);
    font-size: 1.35rem;
    line-height: 1.25;
    color: var(--nr-taupe);
    letter-spacing: 0.01em;
}

html[dir="rtl"] .nr-content .nr-band__value { font-family: var(--nr-font-heading-ar); }

.nr-content .nr-band__note {
    display: block;
    font-size: 0.88rem;
    color: color-mix(in oklab, var(--nr-taupe) 74%, var(--nr-offwhite));
    margin-top: 0.5rem;
}

@media (max-width: 900px) {
    .nr-content .nr-band { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- numbered steps ---------- */

.nr-content .nr-steps {
    list-style: none;
    counter-reset: nrsteps;
    padding: 0;
    margin: 1.75rem 0;
    display: grid;
    gap: 1.25rem;
    max-width: 52rem;
}

.nr-content .nr-steps > li {
    counter-increment: nrsteps;
    position: relative;
    padding-inline-start: 3.4rem;
    margin: 0;
}

.nr-content .nr-steps > li::before {
    content: counter(nrsteps, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    top: 0.1rem;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background-color: var(--nr-cream);
    border: 1px solid var(--nr-sand);
    font-family: var(--nr-font-body);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    color: var(--nr-taupe);
}

/* ---------- quotes / reviews ---------- */

.nr-content .nr-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 1.75rem 0 0;
}

@media (max-width: 900px) {
    .nr-content .nr-quotes { grid-template-columns: minmax(0, 1fr); }
}

.nr-content .nr-quote {
    background-color: var(--nr-white);
    border: 1px solid var(--nr-warmgrey);
    border-radius: 0.9rem;
    padding: 1.5rem 1.4rem 1.25rem;
}

.nr-content .nr-quote__rating {
    display: block;
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    color: var(--nr-beige);
    margin-bottom: 0.6rem;
}

.nr-content .nr-quote h3 {
    font-size: 1.08rem;
    margin-bottom: 0.5rem;
}

.nr-content .nr-quote p { margin-bottom: 0.75rem; }

.nr-content .nr-quote__meta {
    font-size: 0.82rem;
    color: color-mix(in oklab, var(--nr-taupe) 65%, var(--nr-offwhite));
    margin-bottom: 0;
}

/* ---------- faq ---------- */

.nr-content .nr-faq {
    margin: 1.5rem 0 0;
    max-width: 54rem;
}

.nr-content .nr-faq > div {
    padding: 1.15rem 0;
    border-top: 1px solid var(--nr-warmgrey);
}

.nr-content .nr-faq h3 {
    font-family: var(--nr-font-body);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
}

html[dir="rtl"] .nr-content .nr-faq h3 { font-family: var(--nr-font-body-ar); }

.nr-content .nr-faq p:last-child { margin-bottom: 0; }

/* ---------- closing cta band ---------- */

.nr-content .nr-cta {
    text-align: center;
    padding: clamp(2.5rem, 5vw, 3.75rem) var(--nr-gutter);
    background-color: var(--nr-taupe);
    box-shadow: 0 0 0 100vmax var(--nr-taupe);
    clip-path: inset(0 -100vmax);
    margin: clamp(3rem, 6vw, 4.5rem) 0;
}

.nr-content .nr-cta h2 { color: var(--nr-white); }
.nr-content .nr-cta p { color: color-mix(in oklab, var(--nr-offwhite) 88%, var(--nr-taupe)); }

.nr-content .nr-cta .nr-actions { justify-content: center; }

.nr-content .nr-cta .nr-btn {
    background-color: var(--nr-white);
    border-color: var(--nr-white);
    color: var(--nr-taupe);
}

.nr-content .nr-cta .nr-btn:hover {
    background-color: var(--nr-beige);
    border-color: var(--nr-beige);
    color: var(--nr-white);
}

.nr-content .nr-cta .nr-btn--ghost {
    background-color: transparent;
    color: var(--nr-offwhite);
    border-color: color-mix(in oklab, var(--nr-offwhite) 45%, transparent);
}

.nr-content .nr-cta .nr-btn--ghost:hover {
    background-color: color-mix(in oklab, var(--nr-white) 12%, transparent);
    color: var(--nr-white);
    border-color: var(--nr-white);
}

/* ---------- small print / note ---------- */

.nr-content .nr-note {
    font-size: 0.88rem;
    line-height: 1.6;
    color: color-mix(in oklab, var(--nr-taupe) 72%, var(--nr-offwhite));
    border-inline-start: 2px solid var(--nr-sand);
    padding-inline-start: 1rem;
    margin: 1.75rem 0 0;
    max-width: 52rem;
}

/* ============================================================================
   Journal (blogs plugin): listing cards + article page.
   These views are app-level overrides; colour still comes only from --nr-* tokens.
   ========================================================================== */

/* ---------- listing ---------- */

.nr-content .nr-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem;
    margin: 2.5rem 0 0;
}

@media (max-width: 900px) {
    .nr-content .nr-posts { grid-template-columns: minmax(0, 1fr); }
}

.nr-content .nr-post {
    background-color: var(--nr-white);
    border: 1px solid var(--nr-warmgrey);
    border-radius: 0.9rem;
    overflow: hidden;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nr-content .nr-post:hover {
    border-color: var(--nr-sand);
    box-shadow: 0 6px 20px rgb(111 94 82 / 0.09);
    transform: translateY(-2px);
}

.nr-content .nr-post__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.nr-content .nr-post__image {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background-color: var(--nr-cream);
}

.nr-content .nr-post__image--empty {
    background-image: linear-gradient(135deg, var(--nr-cream), var(--nr-rose));
}

.nr-content .nr-post__body {
    display: block;
    padding: 1.35rem 1.35rem 1.5rem;
}

.nr-content .nr-post__category {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--nr-taupe) 62%, var(--nr-offwhite));
    margin-bottom: 0.65rem;
}

.nr-content .nr-post__title {
    display: block;
    font-family: var(--nr-font-heading);
    font-size: 1.28rem;
    line-height: 1.25;
    color: var(--nr-taupe);
    margin-bottom: 0.65rem;
}

html[dir="rtl"] .nr-content .nr-post__title { font-family: var(--nr-font-heading-ar); }

.nr-content .nr-post__excerpt {
    display: block;
    font-size: 0.95rem;
    color: color-mix(in oklab, var(--nr-taupe) 80%, var(--nr-offwhite));
    margin-bottom: 1rem;
}

.nr-content .nr-post__meta {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: color-mix(in oklab, var(--nr-taupe) 62%, var(--nr-offwhite));
}

.nr-content .nr-posts__pagination { margin-top: 2rem; }

.nr-content .nr-empty {
    text-align: center;
    padding: 3rem 1.25rem;
    border: 1px dashed var(--nr-warmgrey);
    border-radius: 0.9rem;
    margin-top: 2rem;
}

.nr-content .nr-empty__title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.nr-content .nr-empty__text { margin-bottom: 0; }

/* ---------- topic filters ---------- */

.nr-content .nr-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.75rem 0 0;
}

.nr-content .nr-filter {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--nr-warmgrey);
    background-color: var(--nr-white);
    font-size: 0.82rem;
    text-decoration: none;
    color: color-mix(in oklab, var(--nr-taupe) 82%, var(--nr-offwhite));
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.nr-content .nr-filter:hover {
    border-color: var(--nr-sand);
    background-color: var(--nr-cream);
    color: var(--nr-taupe);
}

.nr-content .nr-filter--active {
    background-color: var(--nr-taupe);
    border-color: var(--nr-taupe);
    color: var(--nr-white);
}

/* ---------- article ---------- */

.nr-article {
    max-width: 44rem;
    margin: 0 auto;
}

.nr-article__header { margin-bottom: 2rem; }

.nr-article__title {
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1.08;
    margin: 0.35rem 0 1rem;
}

.nr-article__meta {
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    color: color-mix(in oklab, var(--nr-taupe) 64%, var(--nr-offwhite));
    margin-bottom: 0;
}

.nr-article__figure { margin: 0 0 2.5rem; }

.nr-article__image {
    display: block;
    width: 100%;
    border-radius: 1rem;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    background-color: var(--nr-cream);
}

.nr-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.nr-article .nr-content { max-width: none; }

/* Standfirst: used in article headers and inside page content. */
.nr-lede {
    font-size: clamp(1.08rem, 1.7vw, 1.28rem);
    line-height: 1.65;
    color: color-mix(in oklab, var(--nr-taupe) 90%, var(--nr-offwhite));
    margin-bottom: 0;
}

/* ---------- sources ---------- */

.nr-content .nr-sources {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    max-width: 52rem;
}

.nr-content .nr-sources > li {
    position: relative;
    padding-inline-start: 1.15rem;
    margin-bottom: 0.55rem;
    font-size: 0.9rem;
    color: color-mix(in oklab, var(--nr-taupe) 76%, var(--nr-offwhite));
}

.nr-content .nr-sources > li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: var(--nr-beige);
}


/* ============================================================================
   Animated hero, trust strip, facts band, section nav — added 2026-10-04
   ----------------------------------------------------------------------------
   Every colour still comes from the --nr-* tokens (settings table); nothing here
   hardcodes a brand value. The hero motion is deliberately CSS-only: the layers
   animate transform/opacity (GPU composited, no paint, no JS, no image request),
   so it costs nothing at LCP and nothing on the main thread. All motion is
   disabled under prefers-reduced-motion.

   Structure of an animated hero (same markup in every locale):
     .nr-hero
       .nr-hero__bg            layer stack (full-bleed like the hero itself)
         span.nr-hero__blob x3 soft brand-tinted gradients drifting slowly
       .nr-hero__body          the content, lifted above the stack
   ========================================================================== */

.nr-content .nr-hero {
    position: relative;
    isolation: isolate;
    /* The animated stack is tinted with the nudes, and tinting costs contrast: measured
       worst case on a cream base is 4.27:1 (below the 4.5 AA floor for body text), while an
       off-white base holds 4.88:1 even at full blob opacity. The hero therefore sits on
       off-white and the band edge is redrawn with a hairline instead of a colour change. */
    background-color: var(--nr-offwhite);
    box-shadow: 0 0 0 100vmax var(--nr-offwhite);
}

/* Full-bleed hairline closing the hero band (the box-shadow trick clips it horizontally) */
.nr-content .nr-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -100vmax;
    right: -100vmax;
    height: 1px;
    background: color-mix(in oklab, var(--nr-warmgrey) 75%, transparent);
    z-index: 1;
}

.nr-content .nr-hero__body,
.nr-content .nr-hero__media {
    /* Both of the hero's in-flow children sit above the decorative stack: the background
       layer is opaque, so anything left unpositioned would be painted underneath it. */
    position: relative;
    z-index: 1;
}

/* The hero fakes full-bleed with a 100vmax box-shadow; the background stack has to
   cover exactly the same span and is clipped by the same clip-path. */
.nr-content .nr-hero__bg {
    position: absolute;
    inset-block: 0;
    left: -100vmax;
    right: -100vmax;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(150deg,
            var(--nr-offwhite) 0%,
            var(--nr-white) 48%,
            var(--nr-offwhite) 100%);
}

/* Soft, pre-blurred radial gradients: no filter: blur() (which would repaint the whole
   layer every frame), just a large soft gradient the compositor can move cheaply. */
.nr-content .nr-hero__blob {
    position: absolute;
    display: block;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    opacity: 0.62;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.nr-content .nr-hero__blob--a {
    top: -34vmax;
    left: -12vmax;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--nr-sand) 52%, transparent), transparent 62%);
    animation: nr-drift-a 26s ease-in-out infinite alternate;
}

.nr-content .nr-hero__blob--b {
    bottom: -38vmax;
    right: -10vmax;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--nr-rose) 50%, transparent), transparent 60%);
    animation: nr-drift-b 30s ease-in-out infinite alternate;
    animation-delay: -9s;
}

.nr-content .nr-hero__blob--c {
    top: 18vmax;
    right: 16vmax;
    width: 46vmax;
    height: 46vmax;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--nr-olive) 40%, transparent), transparent 64%);
    animation: nr-drift-c 34s ease-in-out infinite alternate;
    animation-delay: -17s;
}

/* A slow light sweep. This is the part of the animation the eye actually catches: the
   drifting blobs are huge and soft, so on their own they read as a static tint (measured:
   a 4-second window moved them by under 1/255 of pixel value). A narrow band of light
   travelling across the surface every ~16s reads clearly and is what makes the hero feel
   alive; it only adds white, so text contrast can only improve. */
.nr-content .nr-hero__bg::before {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -55%;
    width: 38%;
    background: linear-gradient(100deg, transparent 0%, color-mix(in oklab, var(--nr-white) 70%, transparent) 45%, transparent 100%);
    transform: rotate(9deg);
    opacity: 0;
    animation: nr-sweep 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform, opacity;
}

/* Fine grain: flat nude gradients band badly on 8-bit screens, and a touch of noise
   is what makes the surface read as paper rather than plastic. Inline SVG, no request. */
.nr-content .nr-hero__bg::after {
    content: "";
    position: absolute;
    inset: -140px;
    opacity: 0.05;
    animation: nr-grain 90s linear infinite;
    will-change: transform;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}

@keyframes nr-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    to   { transform: translate3d(13vmax, 7vmax, 0) scale(1.22) rotate(9deg); }
}

@keyframes nr-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.1); }
    to   { transform: translate3d(-15vmax, -9vmax, 0) scale(1); }
}

@keyframes nr-drift-c {
    from { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    to   { transform: translate3d(-9vmax, 11vmax, 0) scale(1.3) rotate(-7deg); }
}

@keyframes nr-sweep {
    0%        { transform: translate3d(0, 0, 0) rotate(9deg); opacity: 0; }
    10%       { opacity: 0.6; }
    50%       { opacity: 0.45; }
    68%, 100% { transform: translate3d(430%, 0, 0) rotate(9deg); opacity: 0; }
}

/* the grain drifts by exactly one tile over its cycle, so the loop is quiet */
@keyframes nr-grain {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(140px, 140px, 0); }
}

/* Phone: two blobs instead of three, and shorter travel — cheaper fill rate on the
   devices least able to afford it. */
@media (max-width: 700px) {
    .nr-content .nr-hero__blob { width: 78vmax; height: 78vmax; opacity: 0.5; }
    .nr-content .nr-hero__blob--c { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nr-content .nr-hero__blob,
    .nr-content .nr-hero__bg::before,
    .nr-content .nr-hero__bg::after {
        animation: none !important;
        will-change: auto;
    }

    /* no sweep at all when motion is unwanted */
    .nr-content .nr-hero__bg::before { opacity: 0; }
}

/* ---------- "jump to" chips inside the hero ---------- */

.nr-content .nr-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.9rem;
    padding: 0;
    list-style: none;
}

.nr-content .nr-jump > li { margin: 0; }

.nr-content .nr-jump a {
    display: inline-block;
    padding: 0.4rem 0.95rem;
    border: 1px solid color-mix(in oklab, var(--nr-sand) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in oklab, var(--nr-white) 62%, transparent);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: color-mix(in oklab, var(--nr-taupe) 88%, var(--nr-offwhite));
    backdrop-filter: blur(3px);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nr-content .nr-jump a:hover {
    border-color: var(--nr-taupe);
    background: var(--nr-taupe);
    color: var(--nr-white);
}

/* Anchored sections must clear the sticky chrome when jumped to. */
.nr-content .nr-section[id],
.nr-content .nr-hero[id] {
    scroll-margin-top: var(--nr-sticky-offset, 6.5rem);
}

/* ---------- trust strip (real credentials, straight under the hero) ---------- */

.nr-content .nr-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
    padding: 0;
    list-style: none;
    background: var(--nr-warmgrey);
    border: 1px solid var(--nr-warmgrey);
    border-radius: 0.75rem;
    overflow: hidden;
}

.nr-content .nr-trust > li {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0;
    padding: 1.15rem 1.25rem;
    background: var(--nr-white);
}

.nr-content .nr-trust__label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--nr-taupe) 62%, var(--nr-offwhite));
}

.nr-content .nr-trust__value {
    font-family: var(--nr-font-heading);
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--nr-taupe);
}

html[dir="rtl"] .nr-content .nr-trust__value { font-family: var(--nr-font-heading-ar); }

@media (max-width: 900px) {
    .nr-content .nr-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .nr-content .nr-trust { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- facts band (counters) ---------- */

.nr-content .nr-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 2.5rem);
    margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
    padding: clamp(1.6rem, 3vw, 2.4rem) 0;
    border-top: 1px solid var(--nr-warmgrey);
    border-bottom: 1px solid var(--nr-warmgrey);
    text-align: center;
}

.nr-content .nr-fact__num {
    display: block;
    font-family: var(--nr-font-heading);
    font-size: clamp(2rem, 4vw, 2.85rem);
    line-height: 1.05;
    color: var(--nr-taupe);
    font-variant-numeric: tabular-nums;
}

.nr-content .nr-fact__label {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--nr-taupe) 66%, var(--nr-offwhite));
}

@media (max-width: 760px) {
    .nr-content .nr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}

/* ---------- progressive reveal (class added by site.js) ---------- */

.js .nr-reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .nr-reveal.nr-reveal--in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .nr-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- skip link + visible focus ---------- */

.nr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 50;
    padding: 0.65rem 1.1rem;
    background: var(--nr-taupe);
    color: var(--nr-white);
    border-radius: 0 0 0.5rem 0;
    font-size: 0.85rem;
    text-decoration: none;
}

.nr-skip:focus {
    left: 0;
}

body.fi-body.fi-panel-customer :focus-visible {
    outline: 2px solid var(--nr-taupe);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Anchors glide instead of jumping — unless the visitor asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ---------- sticky section navigation ---------- */

/* Sits directly under the panel top bar and follows the reader through the page.
   The offset is measured at runtime (site.js) so it always clears the real chrome,
   and anchored sections read the same variable through scroll-margin-top. */
.nr-content .nr-subnav {
    position: sticky;
    top: var(--nr-sticky-offset, 4.25rem);
    z-index: 5;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin: 0 calc(-1 * var(--nr-gutter)) clamp(2rem, 4vw, 2.9rem);
    padding: 0.5rem var(--nr-gutter);
    background: color-mix(in oklab, var(--nr-offwhite) 86%, transparent);
    backdrop-filter: blur(10px) saturate(1.08);
    border-block: 1px solid color-mix(in oklab, var(--nr-warmgrey) 72%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
}

.nr-content .nr-subnav::-webkit-scrollbar { display: none; }

.nr-content .nr-subnav a {
    flex: 0 0 auto;
    padding: 0.35rem 0.85rem;
    border: 1px solid color-mix(in oklab, var(--nr-sand) 60%, transparent);
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: color-mix(in oklab, var(--nr-taupe) 86%, var(--nr-offwhite));
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.nr-content .nr-subnav a:hover {
    border-color: var(--nr-taupe);
    color: var(--nr-taupe);
}

.nr-content .nr-subnav a[aria-current="true"] {
    background: var(--nr-taupe);
    border-color: var(--nr-taupe);
    color: var(--nr-white);
}

/* Jump targets receive focus from the sub-nav's click handler; no stray outline box. */
.nr-content [tabindex="-1"]:focus { outline: none; }

/* ---------- small-screen safety for the no-wrap pieces ---------- */

/* The sub-nav is a single non-wrapping row, so its min-content width is the width of all
   seven chips. Inside a min-content-sized wrapper (the framework's page frame is one) that
   stretched the whole content column past the phone's viewport. min-width:0 lets the column
   shrink again and the row scrolls horizontally, which is what it is built for. */
.nr-content {
    /* The framework wraps the content in a grid whose track is auto-sized, so a child wide
       enough to exceed the viewport (the sub-nav's single row of chips) was stretching the
       entire column past the phone's screen - measured: 847px of content on a 390px phone.
       Pinning the column to its track lets the chip row scroll instead, which is the point
       of it. min-width:0 covers the same problem for the items inside. */
    width: 100%;
    min-width: 0;
}

.nr-content .nr-hero__body,
.nr-content .nr-product > div,
.nr-content .nr-subnav {
    min-width: 0;
}

@media (max-width: 700px) {
    .nr-content .nr-subnav { scroll-snap-type: x proximity; }
    .nr-content .nr-subnav a { scroll-snap-align: start; }
}