/* =========================================================
   NOLAVU — B2 SYSTEM ROLLOUT: DIAMOND / MINI / CUSTOM / ABOUT
   ------------------------------------------------------------
   The shared tokens live in brand.css. This file carries only what is
   specific to the inner pages:

     Diamond Painting  — warm peach identity, one small tab, one light
                         section tint, functional highlight. Not a pink page.
     Mini Fuse Bead    — powder blue identity, the same treatment.
     Custom Development— sage / technical neutral, a light layer-line and a
                         stronger step emphasis. The process, FAQ, CTA and
                         mobile hierarchy are not redesigned.
     About / Production— warm stone and a very light layer-line only. The
                         Production proof slots are untouched.

   All four remain one brand system: identical type scale, identical
   spacing rhythm, one accent.
   ========================================================= */

/* ---------- shared: hero product presence ---------- */
/* Same treatment as Home, at the inner-page scale. */
.b-hero{ position:relative; overflow:hidden; }
.b-hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:repeating-linear-gradient(
    180deg, rgba(22,21,15,.026) 0 1px, transparent 1px 7px);
  -webkit-mask-image:radial-gradient(96% 64% at 76% 44%, #000 0%, transparent 68%);
          mask-image:radial-gradient(96% 64% at 76% 44%, #000 0%, transparent 68%);
  opacity:.85;
}
.b-hero .page-hero-grid{ position:relative; z-index:1; }
.b-hero .page-hero-grid > *:first-child{ position:relative; z-index:2; }
.b-hero .hero-visual,
.b-hero .page-hero-grid > .ph-hero,
.b-hero .page-hero .ph-hero{ position:relative; }
/* on the inner pages the hero image is a direct grid child, so the frame
   is created here rather than around a wrapper */
.b-hero .ph-hero{
  aspect-ratio:5/4; border:0; border-radius:0;
  -webkit-mask-image:linear-gradient(105deg, #000 66%, transparent 99%);
          mask-image:linear-gradient(105deg, #000 66%, transparent 99%);
  overflow:visible;
}
.b-hero .ph-hero .demo-img{ object-position:56% 52%; }

@media (max-width:880px){
  .b-hero{ overflow:visible; }
  .b-hero::before{
    background-image:repeating-linear-gradient(
      180deg, rgba(22,21,15,.013) 0 1px, transparent 1px 9px);
    -webkit-mask-image:radial-gradient(120% 40% at 50% 62%, #000 0%, transparent 74%);
            mask-image:radial-gradient(120% 40% at 50% 62%, #000 0%, transparent 74%);
  }
  .b-hero .ph-hero{
    aspect-ratio:4/3;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ---------- DIAMOND: warm peach identity ---------- */
.b-cat-diamond .b-cat-tab{ color:#8A5A3C; background:var(--tint-diamond-2); }
.b-tint-diamond-sec{ background:var(--tint-diamond); }
/* a functional highlight on the direction list — one column, not the page */
.b-cat-diamond .rule-cols{ background:linear-gradient(180deg, rgba(246,237,228,.6), rgba(246,237,228,0)); }
.b-cat-diamond .rule-num{ color:#8A5A3C; }

/* ---------- MINI FUSE: powder blue identity ---------- */
.b-cat-mini .b-cat-tab{ color:#3F5F6B; background:var(--tint-mini-2); }
.b-tint-mini-sec{ background:var(--tint-mini); }
.b-cat-mini .rule-cols{ background:linear-gradient(180deg, rgba(233,239,241,.6), rgba(233,239,241,0)); }
.b-cat-mini .rule-num{ color:#3F5F6B; }

/* ---------- CUSTOM DEVELOPMENT: sage / technical neutral ---------- */
/* The five stages IDEA -> STRUCTURE -> PROTOTYPE -> TEST -> SMALL BATCH
   gain weight through typography, number and line only. No icons added,
   and the existing process markup is not restructured. */
.b-custom .process-line{ position:relative; }
.b-custom .process-line::before{
  content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:var(--line-strong);
}
.b-custom .process-line .step{ padding-top:38px; }
.b-custom .process-line .step::after{
  content:''; position:absolute; top:-1px; left:0;
  width:52px; height:2px; background:var(--accent);
}
.b-custom .process-line .step:not(:first-child)::after{ background:var(--line-strong); }
.b-custom .process-line .p-num{ font-size:38px; font-weight:600; line-height:1; letter-spacing:-0.03em; }
.b-custom .process-line .p-name{ font-size:18px; font-weight:600; margin-top:14px; }
.b-custom .rule-num{ color:var(--accent-deep); }
.b-custom .b-track::before{ opacity:.7; }

@media (max-width:880px){
  .b-custom .process-line::before{ display:none; }
  .b-custom .process-line .step{ padding-top:0; }
  .b-custom .process-line .p-num{ font-size:14px; letter-spacing:.1em; }
  .b-custom .process-line .p-name{ font-size:17px; font-weight:500; margin-top:7px; }
}

/* ---------- ABOUT: warm stone, very light layer-line ---------- */
/* The production placeholders stay exactly as they are. This only lifts the
   section hierarchy so real photography will land with weight later. */
.b-about .rule-num{ color:var(--muted); }
.b-about .rule-title{ letter-spacing:-0.014em; }
.b-about .b-layer::before{ opacity:.6; }

/* ---------- shared hit area for inner pages ---------- */
/* The category-style "View ..." links and the process-adjacent links. */
.b-hit{ position:relative; display:inline-flex; align-items:center; min-height:48px; }
.b-hit::after{
  content:''; position:absolute; left:0; right:0;
  top:50%; height:48px; transform:translateY(-50%);
}
.b-hit-nav{ position:relative; padding-top:10px !important; padding-bottom:10px !important; }
.b-hit-nav::after{
  content:''; position:absolute; left:-6px; right:-6px;
  top:50%; height:40px; transform:translateY(-50%);
}