/* ================================================================
   AJWA ORGANICS — STYLESHEET (split from the original monolith for
   performance — see Perf-4 in the audit). This file loads on every
   page; page-specific rules live in home.css / catalog.css / blog.css /
   content.css and are loaded only where needed via {% block headExtra %}.
   ================================================================ */

  /* ============================================================
     0. RESET
  ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  ul { list-style: none; }
  button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
  input { font: inherit; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }

  /* ============================================================
     1. DESIGN TOKENS — palette sourced from the approved swatches
        (deep olive / forest / sage / moss / stone / cream + honey accent)
  ============================================================ */
  :root {
    --c-cream:        #FAF6EA;
    --c-cream-soft:   #F2ECD9;
    --c-paper:        #FFFDF8;
    --c-stone:        #DCCFAA;
    --c-sand:         #E7DFB9;
    --c-moss-light:   #C3CD9B;
    --c-sage:         #93A874;
    --c-moss:         #7C9660;
    --c-forest:       #54693F;
    --c-forest-dark:  #435334;
    --c-olive:        #364129;
    --c-olive-dark:   #262E1D;
    --c-honey:        #B9863F;
    --c-honey-light:  #E9C98B;
    --c-honey-soft:   #F3E6C8;
    --c-ink:          #2B3322;
    --c-ink-soft:     #5B6552;
    --c-cream-ink:    #F4EFE2;
    --c-line:         rgba(54,65,41,0.14);
    --c-line-light:   rgba(250,246,234,0.18);
    --c-sale:         #A8462F;
    --c-sale-soft:    #F3E0D7;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --shadow-soft: 0 28px 54px -30px rgba(38,46,29,0.4);
    --shadow-tight: 0 12px 26px -16px rgba(38,46,29,0.32);
    --shadow-card: 0 1px 0 rgba(54,65,41,0.04), 0 16px 32px -22px rgba(38,46,29,0.28);

    --container-w: 1248px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  /* ============================================================
     2. BASE TYPOGRAPHY
  ============================================================ */
  body {
    font-family: var(--font-body);
    background: var(--c-cream);
    color: var(--c-ink);
    line-height: 1.5; /* Baseline layout snap factor */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--c-ink);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  p { color: var(--c-ink-soft); }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible {
    outline: 2px solid var(--c-forest);
    outline-offset: 3px;
    border-radius: 4px;
  }

  .skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--c-olive);
    color: var(--c-cream);
    padding: 12px 20px;
    z-index: 999;
    border-radius: 0 0 8px 0;
  }
  .skip-link:focus { left: 0; }

  /* ============================================================
     3. LAYOUT UTILITIES
  ============================================================ */
  .container {
    width: 100%;
    max-width: var(--container-w);
    margin: 0 auto;
    padding: 0 24px;
  }
  @media (min-width: 768px)  { .container { padding: 0 40px; } }
  @media (min-width: 1280px) { .container { padding: 0 60px; } }

  .section { padding: 96px 0; }
  .section--tight { padding: 72px 0; }
  @media (max-width: 768px) {
    .section { padding: 72px 0; }
    .section--tight { padding: 48px 0; }
  }

  .section-head {
    max-width: 640px;
    margin-bottom: 48px;
  }
  .section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-moss);
    margin-bottom: 12px;
  }
  .eyebrow .icon { width: 15px; height: 15px; color: var(--c-honey); flex-shrink: 0; }
  .section-head--center .eyebrow { justify-content: center; }

  .section-head h2 {
    font-size: clamp(1.9rem, 1.3vw + 1.5rem, 2.7rem);
    margin-bottom: 16px;
  }
  .section-head p { font-size: 1.05rem; max-width: 52ch; }
  .section-head--center p { margin-left: auto; margin-right: auto; }

  .icon { width: 22px; height: 22px; stroke: currentColor; }

  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* ============================================================
     4. BUTTONS
  ============================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    padding: 15px 30px;
    border-radius: var(--radius-sm);
    transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), color .25s var(--ease);
    white-space: nowrap;
  }
  .btn .icon { 
    width: 17px; 
    height: 17px; 
    transform: translateY(-0.5px); /* Optical vertical alignment offset */
  }

  .btn--primary {
    background: var(--c-forest);
    color: var(--c-cream);
    box-shadow: var(--shadow-tight);
  }
  .btn--primary:hover { background: var(--c-forest-dark); transform: translateY(-2px); box-shadow: var(--shadow-soft); }

  .btn--outline {
    background: transparent;
    color: var(--c-olive);
    border: 1.5px solid var(--c-line);
  }
  .btn--outline:hover { border-color: var(--c-forest); background: rgba(84,105,63,0.06); }

  .btn--outline-light {
    background: transparent;
    color: var(--c-cream);
    border: 1.5px solid var(--c-line-light);
  }
  .btn--outline-light:hover { border-color: var(--c-honey-light); background: rgba(250,246,234,0.08); }

  .btn--whatsapp {
    background: var(--c-olive);
    color: var(--c-cream);
    border-radius: var(--radius-pill);
    padding: 11px 22px 11px 18px;
    font-size: 0.88rem;
  }
  .btn--whatsapp:hover { background: var(--c-olive-dark); transform: translateY(-1px); }
  .btn--whatsapp .icon { color: var(--c-honey-light); }
  .btn--whatsapp .wa-short { display: none; }

  .btn--block { width: 100%; }
  .btn--sm { padding: 11px 20px; font-size: 0.86rem; }

  /* ============================================================
     5. ANNOUNCEMENT BAR
  ============================================================ */
  .announcement {
    background: #EBF2DF;
    color: #2A4118;
  }
  .announcement .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-align: center;
  }
  .announcement strong { color: #5F8040; font-weight: 600; }
  .announcement .icon { width: 14px; height: 14px; color: #5F8040; flex-shrink: 0; }

  /* ============================================================
     6. HEADER
  ============================================================ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250,246,234,0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
  }
  .site-header.is-scrolled {
    background: var(--c-cream);
    border-bottom-color: var(--c-line);
    box-shadow: 0 8px 24px -20px rgba(38,46,29,0.4);
  }
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 84px;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }
  .brand .icon { width: 28px; height: 28px; color: var(--c-forest); }
  /* Site logo image — rendered in place of the SVG leaf + wordmark when
     site.logoUrl is set. Lives here (global stylesheet, loaded on every
     page) rather than in home.css, since the header/footer that use this
     class are shared across all pages via base.njk. height: auto preserves
     the image's aspect ratio. */
  .site-logo-img {
    height: 36px;
    width: auto;
    display: block;
    object-fit: contain;
  }
  .brand-word {
    font-family: var(--font-display);
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--c-olive);
    text-transform: uppercase;
  }

  .main-nav { display: none; }
  .main-nav ul { display: flex; align-items: center; gap: 36px; }
  .main-nav a {
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--c-ink-soft);
    position: relative;
    padding: 6px 0;
    transition: color .2s var(--ease);
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1.5px;
    background: var(--c-honey);
    transition: right .3s var(--ease);
  }
  .main-nav a:hover { color: var(--c-olive); }
  .main-nav a:hover::after { right: 0; }
  .main-nav li.is-active a,
  .mobile-nav li.is-active a { color: var(--c-olive); font-weight: 600; }
  .main-nav li.is-active a::after { right: 0; }

  .header-actions { display: flex; align-items: center; gap: 18px; }
  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    color: var(--c-olive);
    border-radius: var(--radius-pill);
    transition: background .2s var(--ease);
    position: relative;
  }
  .icon-btn:hover { background: var(--c-cream-soft); }
  .icon-btn .icon { width: 21px; height: 21px; }

  /* Live cart-item count, shown/hidden by cart.js's refreshCartBadges()
     whenever the shared localStorage cart changes — same badge on
     index.html, products.html, and checkout.html. */
  .cart-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--c-sale, #B3434B);
    color: var(--c-cream);
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--c-cream);
  }
  .cart-badge[hidden] { display: none; }

  .nav-toggle {
    display: inline-flex;
    width: 38px; height: 38px;
    align-items: center; justify-content: center;
    color: var(--c-olive);
  }
  .nav-toggle .icon { width: 24px; height: 24px; }
  .nav-toggle .icon-close { display: none; }

  .mobile-nav {
    position: fixed;
    inset: 84px 0 0 0;
    background: var(--c-cream);
    z-index: 99;
    padding: 28px 24px 40px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    overflow-y: auto;
  }
  .mobile-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
  .mobile-nav a {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    padding: 14px 4px;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-olive);
  }
  .mobile-nav .btn { margin-top: 28px; }

  body.nav-open .nav-toggle .icon-menu { display: none; }
  body.nav-open .nav-toggle .icon-close { display: block; }
  body.nav-open { overflow: hidden; }

  @media (min-width: 1024px) {
    .main-nav { display: block; }
    .mobile-nav, .nav-toggle { display: none; }
  }

  /* ============================================================
     11. FINAL CTA BAND
  ============================================================ */
  .cta-band {
    background: linear-gradient(135deg, var(--c-moss-light) 0%, var(--c-sage) 100%);
    color: var(--c-olive-dark);
    position: relative;
    overflow: hidden;
  }
  .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(54,65,41,0.12) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    opacity: 0.5;
  }
  .cta-band .container {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 76px;
    padding-bottom: 76px;
  }
  .cta-band h2 {
    color: var(--c-olive-dark);
    font-size: clamp(1.9rem, 1.8vw + 1.3rem, 2.6rem);
    margin-bottom: 14px;
  }
  .cta-band p {
    color: rgba(38,46,29,0.78);
    font-size: 1.05rem;
    max-width: 46ch;
    margin-bottom: 32px;
  }
  .cta-band-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
  .cta-band .btn--outline { color: var(--c-olive-dark); border-color: rgba(38,46,29,0.3); }
  .cta-band .btn--outline:hover { background: rgba(38,46,29,0.08); border-color: var(--c-olive-dark); }
  .cta-band .btn--primary { background: #5F8040; color: var(--c-cream); }
  .cta-band .btn--primary:hover { background: #4A6830; }

  /* ============================================================
     12. FOOTER
  ============================================================ */
  .site-footer { background: var(--c-olive-dark); color: rgba(244,239,226,0.82); }
  .footer-top { padding-top: 76px; padding-bottom: 48px; }
  .footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start; /* Standardizes all visual start heights vertically across columns */
  }
  @media (min-width: 700px)  { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
  @media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.3fr 0.9fr 0.9fr 0.9fr 1fr; } }

  .footer-brand .brand { margin-bottom: 16px; }
  .footer-brand .brand .icon { color: var(--c-honey-light); }
  .footer-brand .brand-word { color: var(--c-cream-ink); max-width: none; overflow: visible; white-space: normal; }
  .footer-brand p { color: rgba(244,239,226,0.65); font-size: 0.9rem; max-width: 30ch; margin-bottom: 22px; }

  .social-row { display: flex; gap: 10px; }
  .social-link {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--c-line-light);
    border-radius: var(--radius-pill);
    color: var(--c-cream-ink);
    transition: background .2s var(--ease), border-color .2s var(--ease);
  }
  .social-link .icon { width: 16px; height: 16px; }
  .social-link:hover { background: var(--c-forest); border-color: var(--c-forest); }

  .footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-honey-light);
    margin-bottom: 24px; /* standardized scale alignment */
    line-height: 1.3;
    min-height: 1.3em;
  }
  .footer-col ul { display: flex; flex-direction: column; gap: 12px; }
  .footer-col a { font-size: 0.9rem; color: rgba(244,239,226,0.72); line-height: 1.5; transition: color .2s var(--ease); }
  .footer-col a:hover { color: var(--c-cream-ink); }

  .footer-contact li { 
    display: grid; 
    grid-template-columns: auto 1fr; 
    align-items: start; 
    gap: 12px; 
    font-size: 0.9rem; 
    line-height: 1.5; 
    color: rgba(244,239,226,0.72); 
  }
  .footer-contact .icon { 
    width: 16px; 
    height: 16px; 
    color: var(--c-honey-light); 
    flex-shrink: 0; 
    margin-top: calc((1.5em - 16px) / 2); /* Centers icon with first line-height baseline regardless of scale */
  }
  .footer-contact a:hover { color: var(--c-cream-ink); }

  .footer-bottom {
    border-top: 1px solid var(--c-line-light);
    padding: 24px 0;
  }
  .footer-bottom .container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(244,239,226,0.55);
  }
  .footer-bottom a { color: var(--c-honey-light); font-weight: 600; }
  .footer-bottom a:hover { color: var(--c-cream-ink); }

  /* ============================================================
     13. MOBILE OPTIMIZATION
  ============================================================ */

  /* --- Header: stop overflow, keep the menu button on-screen --- */
  @media (max-width: 1023px) {
    .site-header .container { gap: 10px; }
    .header-actions { gap: 8px; }
    /* Cart shortcut is decorative (same destination as "Products" in
       the menu) — hide it on mobile so the WhatsApp button and the
       menu button always have room and are never pushed off-canvas. */
    .header-actions .icon-btn { display: none; }
    .btn--whatsapp { padding: 10px 16px 10px 13px; font-size: 0.82rem; gap: 7px; }
  }

  @media (max-width: 480px) {
    .brand-word { font-size: 1rem; max-width: 50vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .btn--whatsapp .wa-full { display: none; }
    .btn--whatsapp .wa-short { display: inline; }
    .btn--whatsapp { padding: 10px 14px; }
    .trust-points { flex-direction: column; gap: 12px; }
  }

  /* Safety net for the smallest real-world phones (iPhone SE etc.) */
  @media (max-width: 360px) {
    .site-header .container { gap: 8px; }
    .header-actions { gap: 6px; }
    .brand .icon { width: 24px; height: 24px; }
    .brand-word { font-size: 0.92rem; max-width: 32vw; }
    .btn--whatsapp { padding: 9px 12px; font-size: 0.78rem; }
    .nav-toggle { width: 34px; height: 34px; }
    .nav-toggle .icon { width: 22px; height: 22px; }
  }

  /* --- Hero collage: at ≤540px the honey card only filled the left
     column, leaving an empty, wasted cell beside it. Let it span the
     full width on top instead, with coconut + mustard below — same
     three cards, same colors, no dead space. --- */
  @media (max-width: 540px) {
    .hero-visual { grid-template-columns: 1fr 1fr; }
    .visual-card { min-height: 150px; padding: 20px; }
    .visual-card--honey { grid-column: 1 / 3; grid-row: 1; min-height: 130px; }
    .visual-card--coconut { grid-column: 1; grid-row: 2; }
    .visual-card--mustard { grid-column: 2; grid-row: 2; }
  }

  /* --- Full-width CTA buttons on small phones: easier to tap, and
     stacking reads cleaner than two half-width buttons squeezed
     side by side. Same button styles/colors, just full-width. --- */
  @media (max-width: 480px) {
    .hero-ctas, .cta-band-actions { flex-direction: column; align-items: stretch; }
    .hero-ctas .btn, .cta-band-actions .btn { width: 100%; }
  }

  @media (max-width: 600px) {
    .footer-bottom .container { flex-direction: column; align-items: flex-start; }
  }

  @media (max-width: 360px) {
    .product-footer { flex-direction: column; align-items: stretch; }
    .product-footer .btn { width: 100%; justify-content: center; }
    .product-actions { width: 100%; }
    .product-actions .buy-now-btn { flex: 1; }
  }

/* ============================================================
   14. BILINGUAL / RTL SUPPORT (Urdu)
   ------------------------------------------------------------
   Two ways to use this, depending on how much of the page is
   Urdu:

   A) A SNIPPET OF URDU INSIDE AN ENGLISH PAGE — wrap just that
      part in .urdu-content:
        <p class="urdu-content">یہ خالص شہد ہے۔</p>
      Direction and typeface flip locally; the rest of the page
      is untouched.

   B) A FULL URDU PAGE — e.g. a future blog article published in
      Urdu — set direction at the document root instead, per the
      pattern already used for English at the top of index.html:
        <html lang="ur" dir="rtl">
      Most of the layout above is flexbox/grid, which mirrors
      automatically under dir="rtl" with zero extra CSS. The
      [dir="rtl"] rules below only patch the handful of spots
      that don't mirror for free: icon ordering, the nav
      underline's slide direction, and the skip-link's corner.
   ============================================================ */

.urdu-content {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Nastaliq Urdu', serif;
  /* Nastaliq's diagonal, stacked strokes need far more vertical
     room than Latin text — 1.5-ish line-height makes ascenders
     from one line collide with descenders from the next. */
  line-height: 2.1;
  unicode-bidi: isolate;
}
.urdu-content h1,
.urdu-content h2,
.urdu-content h3,
.urdu-content h4 {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-weight: 500;
  line-height: 2;
}

/* Full-page RTL — active when an ancestor (normally <html>) has
   dir="rtl", e.g. a future Urdu blog article reusing this same
   component library. */
[dir="rtl"] body {
  font-family: 'Noto Nastaliq Urdu', serif;
}
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: 'Noto Nastaliq Urdu', serif;
  letter-spacing: 0;
}
[dir="rtl"] .eyebrow,
[dir="rtl"] .trust-point,
[dir="rtl"] .blog-link,
[dir="rtl"] .footer-contact li {
  flex-direction: row-reverse;
}
[dir="rtl"] .main-nav a::after {
  left: 100%;
  right: 0;
}
[dir="rtl"] .main-nav a:hover::after { left: 0; right: 0; }
[dir="rtl"] .blog-link:hover .icon { transform: translateX(-3px); }
[dir="rtl"] .skip-link {
  left: auto;
  right: -999px;
  border-radius: 0 0 0 8px;
}
[dir="rtl"] .skip-link:focus { left: auto; right: 0; }

/* ============================================================
   15. SHARED TOAST (cart.js — index.html / products.html)
   ------------------------------------------------------------
   checkout.html has its own #co-toast in checkout.css; this is
   the equivalent for every other page, created on demand by
   cart.js's showCartToast() so no markup change was needed here.
   ============================================================ */
.site-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--c-olive-dark);
  color: var(--c-cream-ink);
  padding: 14px 22px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: var(--shadow-soft);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  max-width: calc(100vw - 48px);
  text-align: center;
}
.site-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ============================================================
   16. PAGE BANNER (sub-pages — products, contact, blog, blog posts,
   every policy page, FAQ)
   ------------------------------------------------------------
   FIX-1: moved here from catalog.css. catalog.css only loads on
   products.html, but .page-banner markup is used on contact.njk,
   blog.njk, post.njk and all 5 policy pages too — none of which
   load catalog.css. Those pages were rendering this section with
   zero styling (no background, no padding, no centered layout).
   Living in style.css (loaded by every page via base.njk) fixes
   that for good, and is also where an every-page component like
   this belongs.
   ============================================================ */
.page-banner {
  position: relative;
  background: var(--c-cream);
  overflow: hidden;
  padding: 64px 0 56px;
  text-align: center;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--c-stone) 1.3px, transparent 1.3px);
  background-size: 28px 28px;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
  mask-image: linear-gradient(to bottom, black, transparent 75%);
  pointer-events: none;
}
.page-banner .container { position: relative; }
.page-banner .eyebrow { justify-content: center; color: var(--c-honey); }
.page-banner h1 {
  color: var(--c-ink);
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 10px;
}
.page-banner p {
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.page-banner-crumb {
  margin-top: 18px;
  font-size: 0.85rem;
}
.page-banner-crumb a { color: var(--c-forest); font-weight: 600; }
.page-banner-crumb a:hover { text-decoration: underline; }
.page-banner-crumb span { color: var(--c-ink-soft); opacity: 0.6; padding: 0 6px; }