/* ============================================================
   BON 900 — Vintage Warm-Paper Design System
   Black · Red · Cream · "Sejak 1970"
   Built plain so it maps 1:1 onto Elementor sections/columns.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&family=Oswald:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap');

/* ---------- Tokens ---------- */
:root{
  --paper:        #f3ede0;   /* main warm cream */
  --paper-2:      #ece2cf;   /* deeper cream panel */
  --paper-3:      #e6dac3;   /* darkest cream */
  --ink:          #1d1813;   /* warm near-black */
  --ink-2:        #2a231c;
  --ink-soft:     #4a4036;   /* muted body on paper */
  --cream:        #faf5ea;   /* cards / light on dark */
  --red:          #b62a1f;   /* Bon red */
  --red-deep:     #8c1d14;
  --red-bright:   #d23323;
  --gold:         #d23323;   /* mapped to bright red — palette limited to black/white/red */
  --line:         rgba(29,24,19,.16);
  --line-strong:  rgba(29,24,19,.34);
  --line-cream:   rgba(250,245,234,.22);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;   /* condensed signage: labels, nav, buttons */
  --font-serif:   'Playfair Display', Georgia, serif;      /* legible vintage display headlines */
  --font-body:    'Lora', Georgia, serif;
  --font-script:  'Lora', Georgia, serif;                  /* readable italic flourish (no script face) */

  --maxw: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --shadow: 0 18px 50px -24px rgba(29,24,19,.55);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
#borang{ scroll-margin-top:90px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; line-height:1.04; letter-spacing:.01em; text-wrap:balance; }
p{ margin:0 0 1em; text-wrap:pretty; }

/* Paper grain overlay */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.7;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
/* Warm aged-paper vignette */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 8%, transparent 60%, rgba(74,52,28,.10) 100%),
    radial-gradient(140% 120% at 50% 120%, transparent 55%, rgba(45,28,12,.16) 100%);
  mix-blend-mode:multiply;
}

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.wrap-wide{ max-width:1360px; }
.section{ padding-block:clamp(56px, 8vw, 110px); position:relative; }
.section-sm{ padding-block:clamp(40px,6vw,72px); }
.center{ text-align:center; }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
@media(min-width:760px){ .g2{ grid-template-columns:1fr 1fr; } .g3{ grid-template-columns:repeat(3,1fr);} }
@media(min-width:980px){ .g4{ grid-template-columns:repeat(4,1fr);} }

/* Surfaces */
.bg-paper{ background:var(--paper); }
.bg-paper2{ background:var(--paper-2); }
.bg-ink{ background:var(--ink); color:var(--cream); }
.bg-red{ background:var(--red); color:var(--cream); }
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4{ color:var(--cream); }

/* ---------- Type utilities ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
  color:var(--red); margin:0 0 18px;
}
.eyebrow::before,.eyebrow.two::after{
  content:""; width:34px; height:1px; background:currentColor; opacity:.6;
}
.eyebrow.center{ justify-content:center; }
.bg-ink .eyebrow,.bg-red .eyebrow{ color:var(--gold); }
.bg-red .eyebrow{ color:var(--cream); }

.h-hero{ font-family:var(--font-serif); font-size:clamp(2.7rem,7.2vw,5.6rem); font-weight:700; line-height:1.0; letter-spacing:-.005em; }
.h-sec{ font-family:var(--font-serif); font-size:clamp(2.1rem,4.8vw,3.6rem); font-weight:700; line-height:1.05; letter-spacing:-.005em; }
.h-sub{ font-family:var(--font-serif); font-size:clamp(1.35rem,2.4vw,1.9rem); font-weight:600; letter-spacing:0; }
.price{ font-family:var(--font-serif); font-weight:700; font-size:1.875rem; color:var(--red); line-height:1; margin:0 0 18px; }
.price .cur{ font-family:var(--font-display); font-weight:600; font-size:.58em; color:inherit;
  letter-spacing:.05em; text-transform:uppercase; margin-right:3px; vertical-align:.16em; }
.price-lg{ font-size:clamp(2rem,3.4vw,2.6rem); margin:6px 0 24px; }
.bg-ink .price{ color:var(--gold); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--ink-soft); max-width:60ch; text-wrap:pretty; }
.bg-ink .lead{ color:rgba(250,245,234,.78); }
.muted{ color:var(--ink-soft); }
.bg-ink .muted{ color:rgba(250,245,234,.7); }
.script{ font-family:var(--font-script); font-style:italic; color:var(--red); font-weight:500; letter-spacing:0; text-transform:none; }
.red{ color:var(--red); }
.measure{ max-width:62ch; }
.measure-c{ max-width:62ch; margin-inline:auto; }

/* ---------- Logo image ---------- */
.logo-link{ display:inline-flex; align-items:center; line-height:0; }
.site-logo{ height:38px; width:auto; }
.site-header .site-logo{ height:46px; }
.site-footer .site-logo{ height:46px; margin-bottom:18px; }
.mobile-menu .site-logo{ height:34px; position:absolute; top:26px; left:32px; }
.page-hero .site-logo,.hero .site-logo{ height:40px; }
@media(min-width:760px){ .site-header .site-logo{ height:52px; } }

/* ---------- Brand wordmark (fallback) ---------- */
.brand{ display:inline-flex; align-items:flex-end; gap:.04em; line-height:.8; }
.brand .bn{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; }
.brand .b1{ color:inherit; }
.brand .flame{ width:.42em; height:.78em; transform:translateY(.04em); }
.brand .b9{ color:var(--red); }
.brand .since{ font-family:var(--font-script); font-size:.34em; color:var(--red); margin-left:.2em; transform:translateY(-.25em); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--red); --fg:var(--cream); --bd:var(--red);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:.82rem;
  padding:15px 30px; background:var(--bg); color:var(--fg);
  border:1.5px solid var(--bd); border-radius:0;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(140,29,20,.7); }
.btn svg{ width:16px; height:16px; }
.btn-ink{ --bg:var(--ink); --fg:var(--cream); --bd:var(--ink); }
.btn-ink:hover{ box-shadow:0 12px 26px -12px rgba(29,24,19,.7); }
.btn-ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-strong); }
.btn-ghost:hover{ --bg:var(--ink); --fg:var(--cream); }
.bg-ink .btn-ghost{ --fg:var(--cream); --bd:var(--line-cream); }
.bg-ink .btn-ghost:hover{ --bg:var(--cream); --fg:var(--ink); }
.bg-red .btn-ghost{ --fg:var(--cream); --bd:rgba(250,245,234,.6); }
.bg-red .btn-ghost:hover{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); }
.btn-cream{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); }
.btn-lg{ padding:18px 38px; font-size:.9rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Vintage ornaments ---------- */
.rule{ height:1px; background:var(--line); border:0; }
.dbl-rule{ border:0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
  height:4px; }
.ornament{ display:flex; align-items:center; justify-content:center; gap:14px; color:var(--red); font-size:1rem; }
.ornament::before,.ornament::after{ content:""; height:1px; width:min(80px,18vw); background:currentColor; opacity:.5; }
.stamp{
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  letter-spacing:.18em; font-size:.66rem; color:var(--red);
  border:1.5px solid var(--red); border-radius:999px; padding:7px 16px; display:inline-flex; align-items:center; gap:8px;
}

/* ---------- Top announcement bar ---------- */
.topbar{
  background:var(--red); color:var(--cream);
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.22em; font-size:.66rem; font-weight:600;
  text-align:center; padding:9px var(--pad);
  white-space:nowrap;
}
.topbar .red{ color:var(--cream); font-weight:600; }
.topbar .dot{ color:rgba(250,245,234,.55); margin:0 12px; }
@media(max-width:560px){
  .topbar{ letter-spacing:0; font-size:2.4vw; padding-inline:6px; }
  .topbar .dot{ margin:0 4px; }
}

/* ---------- Header / Nav (dark) ---------- */
.site-header{ position:sticky; top:0; z-index:200; background:rgba(18,14,11,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line-cream); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:72px; }
.nav .logo{ font-size:1.7rem; }
.nav-links{ display:none; align-items:center; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-family:var(--font-display); text-transform:uppercase; font-weight:500;
  letter-spacing:.12em; font-size:.78rem; color:var(--cream); position:relative; padding:6px 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--red); transition:width .25s ease; }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:var(--red-bright); }
.nav-cta{ display:none; }
.burger{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--cream); transition:.25s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media(min-width:980px){
  .nav-links{ display:flex; } .nav-cta{ display:inline-flex; } .burger{ display:none; }
}
/* mobile drawer */
.mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(82vw,340px); z-index:300;
  background:var(--ink); color:var(--cream); transform:translateX(100%);
  transition:transform .32s cubic-bezier(.6,.05,.2,1); padding:90px 32px 40px;
  display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow);
}
.mobile-menu.open{ transform:translateX(0); }
.mobile-menu a{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.14em;
  font-size:1.05rem; padding:14px 0; border-bottom:1px solid var(--line-cream); color:var(--cream); }
.mobile-menu a.active{ color:var(--red-bright); }
.mobile-menu .btn{ margin-top:20px; }
.menu-close{ position:absolute; top:24px; right:24px; background:none; border:0; color:var(--cream); font-size:1.6rem; line-height:1; }
.scrim{ position:fixed; inset:0; background:rgba(15,12,9,.55); z-index:250; opacity:0; visibility:hidden; transition:.3s; }
.scrim.open{ opacity:1; visibility:visible; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:clamp(560px,82vh,820px); display:flex; align-items:flex-end;
  color:var(--cream); overflow:hidden; }
.hero-bg{ position:absolute; inset:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(18,13,9,.74) 0%, rgba(18,13,9,.50) 34%, rgba(18,13,9,.14) 62%, rgba(18,13,9,0) 80%),
    linear-gradient(180deg, rgba(18,13,9,.42) 0%, rgba(18,13,9,.30) 45%, rgba(18,13,9,.86) 100%); }
.hero-inner{ position:relative; z-index:2; padding-block:clamp(56px,8vw,110px); }
.hero .h-hero{ text-shadow:0 4px 30px rgba(0,0,0,.45); max-width:16ch; }
.hero .lead{ color:rgba(250,245,234,.9); text-shadow:0 2px 12px rgba(0,0,0,.5); }
.hero .eyebrow,.page-hero .eyebrow{ color:var(--red-bright); text-shadow:0 2px 14px rgba(10,7,4,.9); }
.hero .eyebrow::before,.page-hero .eyebrow::before{ background:var(--red-bright); }
/* Hero sits over a dark photo — force light treatment on stamp & ghost button */
.hero .stamp{ color:var(--cream); border-color:rgba(250,245,234,.65);
  background:rgba(20,15,11,.28); backdrop-filter:blur(2px); }
.hero .btn-ghost{ --fg:var(--cream); --bd:rgba(250,245,234,.55); }
.hero .btn-ghost:hover{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); }
.hero-seal{ position:absolute; z-index:3; top:clamp(22px,6vw,52px); right:clamp(20px,5vw,64px); }
@media(max-width:820px){
  .hero-seal{ display:none; }
  /* Drop the tall 82vh min-height so bottom-anchored content doesn't leave a
     large empty band of photo above it on phones/tablets. */
  .hero{ min-height:auto; }
  .hero-inner{ padding-block:clamp(48px,10vw,88px); }
}

/* ---------- Cards ---------- */
.card{ background:var(--cream); border:1px solid var(--line-strong); border-radius:0; padding:30px; position:relative; box-shadow:none; }
.card.on-paper{ background:#fbf7ee; }
.card.framed::after{ content:""; position:absolute; inset:6px; border:1px solid var(--line); pointer-events:none; }
.bg-ink .card{ background:#241d16; border-color:var(--line-cream); color:var(--cream); }
.bg-ink .card.framed::after{ border-color:var(--line-cream); }

/* Benefit item */
.benefit{ display:flex; gap:18px; align-items:flex-start; padding:26px 0; border-bottom:1px solid var(--line); }
.benefit:last-child{ border-bottom:0; }
.benefit .ic{ flex:0 0 auto; width:52px; height:52px; border:1.5px solid var(--red); border-radius:999px;
  display:grid; place-items:center; color:var(--red); }
.benefit .ic svg{ width:24px; height:24px; }
.benefit h3{ font-size:1.1rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.benefit p{ margin:0; color:var(--ink-soft); font-size:.96rem; }
.bg-ink .benefit{ border-color:var(--line-cream); }
.bg-ink .benefit p{ color:rgba(250,245,234,.72); }

/* Number badges (steps) */
.step{ position:relative; padding:30px; background:var(--cream); border:1px solid var(--line);
  border-top:3px solid var(--red); border-radius:0; }
.step .num{ font-family:var(--font-serif); font-weight:700; font-size:3rem; color:var(--red); line-height:1;
  display:block; margin-bottom:16px; }
.step h3{ text-transform:uppercase; font-size:1.05rem; margin-bottom:8px; }
.step p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* Feature chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem;
  font-weight:500; padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink); }
.bg-ink .chip{ border-color:var(--line-cream); color:var(--cream); }
.chip.solid{ background:var(--red); color:var(--cream); border-color:var(--red); }

/* Stats */
.stat{ text-align:center; }
.stat .n{ font-family:var(--font-serif); font-weight:700; font-size:clamp(2.6rem,5vw,3.8rem); color:var(--red); line-height:1; }
.stat .l{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--ink-soft); margin-top:8px; }
.bg-ink .stat .l{ color:rgba(250,245,234,.7); }
.bg-ink .stat .n{ color:var(--gold); }

/* ---------- Testimonials ---------- */
.grid > *{ min-width:0; }
.quote{ background:var(--cream); border:1px solid var(--line-strong); border-radius:0; padding:34px 30px; position:relative;
  display:flex; flex-direction:column; height:100%; margin:0; }
.quote::after{ content:""; position:absolute; inset:6px; border:1px solid var(--line); pointer-events:none; }
.quote .stars{ color:var(--gold); letter-spacing:3px; font-size:.95rem; margin-bottom:14px; }
.quote blockquote{ margin:0 0 18px; font-size:1.06rem; font-style:italic; color:var(--ink-2); }
.quote .who{ display:flex; align-items:center; gap:12px; margin-top:auto; }
.quote .av{ width:42px; height:42px; border-radius:999px; background:var(--paper-3); display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; color:var(--ink); }
.quote .who b{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; display:block; }
.quote .who span{ font-size:.8rem; color:var(--ink-soft); }

/* ---------- Testimonial card (name + stars on top) ---------- */
.tcard{ background:var(--cream); border:1px solid var(--line-strong); padding:30px 28px;
  display:flex; flex-direction:column; position:relative; }
.tcard .who{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.tcard .who .pic{ width:34px; height:34px; flex:0 0 auto; border-radius:999px; background:var(--paper-3);
  display:grid; place-items:center; color:var(--ink-soft); }
.tcard .who .pic svg{ width:18px; height:18px; }
.tcard .who b{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-size:.86rem; color:var(--ink); display:block; line-height:1.2; }
.tcard .who span{ font-size:.78rem; color:var(--ink-soft); }
.tcard .stars{ color:var(--red); letter-spacing:3px; font-size:1rem; }
.tcard .tdiv{ border:0; border-top:1px dashed var(--line-strong); margin:18px 0; }
.tcard blockquote{ margin:0; font-size:.97rem; line-height:1.7; color:var(--ink-soft); font-style:normal; flex:1; }

/* ---------- FAQ accordion ---------- */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; text-align:left; background:none; border:0; padding:24px 0;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em;
  font-size:1.02rem; font-weight:500; color:var(--ink); }
.faq-q .pm{ flex:0 0 auto; width:30px; height:30px; border:1.5px solid var(--red); border-radius:999px; position:relative; transition:.25s; }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; inset:0; margin:auto; background:var(--red); }
.faq-q .pm::before{ width:12px; height:1.5px; }
.faq-q .pm::after{ width:1.5px; height:12px; transition:.25s; }
.faq-item.open .pm{ background:var(--red); }
.faq-item.open .pm::before,.faq-item.open .pm::after{ background:var(--cream); }
.faq-item.open .pm::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p{ padding:0 40px 26px 0; color:var(--ink-soft); margin:0; }
.bg-ink .faq,.bg-ink .faq-item{ border-color:var(--line-cream); }
.bg-ink .faq-q{ color:var(--cream); }
.bg-ink .faq-a p{ color:rgba(250,245,234,.72); }

/* ---------- Media + frame (vintage photo mount) ---------- */
.frame{ position:relative; border-radius:0; overflow:hidden; border:6px solid var(--cream);
  box-shadow:4px 4px 0 rgba(29,24,19,.10), 0 16px 32px -22px rgba(29,24,19,.6); }
.frame img{ width:100%; height:100%; object-fit:cover; filter:sepia(.16) saturate(.93) contrast(1.02); }
.frame.vint{ border-width:10px; }
.frame.vint::after{ content:""; position:absolute; inset:0; border:1px solid rgba(29,24,19,.28); pointer-events:none; }
.ratio-4-5{ aspect-ratio:4/5; }
.ratio-3-4{ aspect-ratio:3/4; }
.ratio-1-1{ aspect-ratio:1/1; }
.ratio-16-9{ aspect-ratio:16/9; }
.ratio-3-2{ aspect-ratio:3/2; }

/* product packshot on cream */
.packshot{ background:radial-gradient(circle at 50% 42%, #fbf7ee 0%, var(--paper-2) 70%); border:1px solid var(--line);
  border-radius:0; display:grid; place-items:center; padding:6%; }

/* Placeholder image */
.ph{ position:relative; background:
   repeating-linear-gradient(135deg, var(--paper-2) 0 14px, var(--paper-3) 14px 28px);
   display:grid; place-items:center; color:var(--ink-soft); border:1px solid var(--line); border-radius:0; }
.ph span{ font-family:'Courier New',monospace; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em;
  background:rgba(243,237,224,.85); padding:6px 12px; border:1px solid var(--line); }

/* ---------- Gallery ---------- */
.masonry{ columns: 2; column-gap:18px; }
@media(min-width:640px){ .masonry{ columns:2; } }
@media(min-width:980px){ .masonry{ columns:3; } }
@media(max-width:480px){ .masonry{ column-gap:8px; } }
.masonry .frame{ break-inside:avoid; margin-bottom:18px; border:0; box-shadow:none; }
.masonry .frame::after{ display:none; }
.masonry .frame img{ filter:none; }
@media(max-width:480px){
  .masonry .frame{ margin-bottom:8px; }
  .gallery-section{ padding-inline:12px; }
}

/* Categorized gallery grid */
.gallery-grid{ display:grid; gap:clamp(8px,1.5vw,18px); margin-top:8px; }
/* ALL: 3 columns, filled column-by-column so each category is a vertical column */
.gallery-grid[data-mode="all"]{
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,auto);
  grid-auto-flow:column;
}
/* SINGLE category: one horizontal row of 3 (1x3) */
.gallery-grid[data-mode="single"]{
  grid-template-columns:repeat(3,1fr);
  grid-auto-flow:row;
}
.gallery-grid .g-item{
  margin:0; overflow:hidden; border-radius:2px;
  border:1px solid var(--line); background:var(--paper-2);
}
.gallery-grid .g-item img{
  display:block; width:100%; height:auto; aspect-ratio:1/1;
  object-fit:cover; transition:transform .5s ease;
}
.gallery-grid .g-item:hover img{ transform:scale(1.04); }
.gallery-grid .g-item[hidden]{ display:none !important; }
@media(max-width:480px){ .gallery-grid{ gap:6px; } }
.gal-cap{ position:absolute; left:0; right:0; bottom:0; padding:18px;
  background:linear-gradient(0deg, rgba(15,11,8,.85), transparent);
  color:var(--cream); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; }

/* Filter pills */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.filter{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; font-weight:500;
  padding:10px 20px; border:1.5px solid var(--line-strong); border-radius:999px; background:none; color:var(--ink); transition:.2s; }
.filter.active,.filter:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* ---------- Forms ---------- */
.field{ margin-bottom:20px; }
.field label{ display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em;
  font-size:.72rem; font-weight:500; margin-bottom:8px; color:var(--ink); }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:14px 16px; background:var(--cream); border:1px solid var(--line-strong); border-radius:2px; transition:.2s; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:0; border-color:var(--red); box-shadow:0 0 0 3px rgba(182,42,31,.12); }
.field textarea{ resize:vertical; min-height:140px; }

/* contact info rows */
.info-row{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px solid var(--line-cream); }
.info-row:last-child{ border-bottom:0; }
.info-row .ic{ flex:0 0 auto; width:44px; height:44px; border:1.5px solid var(--gold); border-radius:999px; display:grid; place-items:center; color:var(--gold); }
.info-row .ic svg{ width:20px; height:20px; }
.info-row h3{ font-size:.95rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:4px; color:var(--cream); }
.info-row p{ margin:0; color:rgba(250,245,234,.74); font-size:.96rem; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:rgba(250,245,234,.72); padding-block:64px 30px; }
.foot-grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.site-footer .logo{ font-size:1.9rem; color:var(--cream); margin-bottom:18px; display:inline-block; }
.site-footer h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem;
  color:var(--cream); margin:0 0 18px; }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.site-footer a:hover{ color:var(--red-bright); }
.socials{ display:flex; gap:12px; margin-top:22px; }
.socials a{ width:40px; height:40px; border:1px solid var(--line-cream); border-radius:999px; display:grid; place-items:center; color:var(--cream); transition:.2s; }
.socials a:hover{ background:var(--red); border-color:var(--red); }
.socials svg{ width:18px; height:18px; }
.foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-cream);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  font-size:.8rem; color:rgba(250,245,234,.55); }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; overflow:hidden; }
.cta-band .wrap{ position:relative; z-index:2; }

/* ---------- Page hero (interior) ---------- */
.page-hero{ position:relative; color:var(--cream); padding-block:clamp(70px,12vw,140px); overflow:hidden;
  display:flex; align-items:center; min-height:340px; }
.page-hero .bgimg{ position:absolute; inset:0; }
.page-hero .bgimg img{ width:100%; height:100%; object-fit:cover; }
.page-hero .bgimg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(18,13,9,.86), rgba(18,13,9,.5)); }
.page-hero.plain{ background:#33291f; min-height:auto; padding-block:clamp(60px,9vw,110px); }
.page-hero .lead{ color:rgba(250,245,234,.82); }
.breadcrumb{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem;
  color:var(--gold); margin-bottom:18px; }
.breadcrumb a:hover{ color:var(--cream); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* misc */
.split{ display:grid; gap:clamp(30px,5vw,64px); align-items:center; }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; } .split.media-r .media{ order:2; } }
.pill-note{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--gold); }
.price-tag{ font-family:var(--font-display); }
.price-tag .cur{ font-size:1.1rem; vertical-align:top; }
.price-tag .amt{ font-size:2.4rem; font-weight:700; color:var(--red); }
.price-tag .unit{ font-size:.9rem; color:var(--ink-soft); letter-spacing:.1em; text-transform:uppercase; }

.list-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.list-check li{ display:flex; gap:12px; align-items:flex-start; }
.list-check svg{ flex:0 0 auto; width:20px; height:20px; color:var(--red); margin-top:3px; }
.bg-ink .list-check svg{ color:var(--gold); }

hr.soft{ border:0; border-top:1px solid var(--line); margin:0; }

/* Timeline cards — centered content */
.timeline .step{ text-align:center; }
/* Tablet & mobile: 2x2 grid (desktop stays 4-across via .g4) */
@media(max-width:979px){
  .grid.timeline{ grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .grid.timeline{ gap:14px; }
  .timeline .step{ padding:22px 16px; }
  .timeline .step .num{ font-size:2.3rem; margin-bottom:10px; }
}

/* Usage scenarios — centered stacks on desktop, horizontal rows on mobile */
.usage-item{ text-align:center; }
.usage-num{ font-family:var(--font-serif); font-weight:800; font-size:clamp(2.6rem,5vw,3.4rem);
  color:var(--red-bright); line-height:1; display:block; margin-bottom:16px; }
@media(max-width:760px){
  .usage{ grid-template-columns:1fr !important; gap:24px !important; }
  .usage-item{ display:flex; align-items:flex-start; gap:18px; text-align:left; }
  .usage-num{ margin-bottom:0; flex:0 0 auto; }
}

/* Mobile: center buttons inside stacked split sections */
@media(max-width:760px){
  .split .btn-row{ justify-content:center; }
  .split > div > .btn{ display:flex; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }
}

/* Product detail action buttons: keep on ONE line, never stacked.
   Desktop: natural width, left-aligned. Stacked (mobile/tablet): the two
   buttons grow to fill the row evenly so they stay big and balanced instead
   of shrinking to tiny content-width. Font scales just enough to stay 1 line. */
.btn-row.product-actions{ flex-wrap:nowrap; justify-content:flex-start; }
.btn-row.product-actions .btn{ white-space:nowrap; }
@media(max-width:899px){
  .split .btn-row.product-actions{ justify-content:flex-start; gap:12px; }
  .btn-row.product-actions .btn{ flex:1 1 0; min-width:0; }
  .btn-row.product-actions .btn-lg{ padding-block:18px; padding-inline:14px;
    font-size:clamp(.78rem,2.6vw,.95rem); letter-spacing:.06em; }
}

/* Mobile/tablet image optimization: keep the IMAGE column full content width
   (aligned to the page padding) but size the artwork down within it so product
   shots and photos don't become enormous when the split columns stack. */
@media(max-width:899px){
  /* Product packshot: full-width cream stage, shorter, product scaled within. */
  .media .packshot.ratio-1-1{ aspect-ratio:auto; height:clamp(300px,52vw,400px);
    display:flex; align-items:center; justify-content:center; }
  .media .packshot.ratio-1-1 > img{ max-height:100% !important; max-width:100% !important;
    width:auto !important; height:auto !important; object-fit:contain; }
  /* Photo frames keep their portrait shape but are height-capped so they fit. */
  .media .frame{ max-width:460px; margin-left:auto; margin-right:auto; }
}
@media(max-width:520px){
  .media .packshot.ratio-1-1{ height:300px; }
  .media .frame{ max-width:100%; }
}

/* ---------- Product collection: grid on desktop, carousel on mobile ---------- */
.coll-carousel{ display:grid; grid-template-columns:1fr; gap:clamp(20px,3vw,40px); }
@media(min-width:760px){ .coll-carousel{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:980px){ .coll-carousel{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:759px){
  .coll-carousel{ display:flex; grid-template-columns:none; gap:14px; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:16px;
    scroll-padding-inline:var(--pad); scrollbar-width:none; }
  .coll-carousel::-webkit-scrollbar{ display:none; }
  .coll-carousel > .card{ flex:0 0 80%; scroll-snap-align:start; }
  /* Compact product image so each card is short enough to swipe easily */
  .coll-carousel > .card .packshot.ratio-1-1{ aspect-ratio:auto; height:clamp(190px,48vw,250px);
    display:flex; align-items:center; justify-content:center; }
  .coll-carousel > .card .packshot.ratio-1-1 > img{ max-height:100% !important; max-width:100% !important;
    width:auto !important; height:auto !important; object-fit:contain; }
}
/* Related-products carousel: homepage-style swipe carousel on mobile + tablet,
   3-column grid on desktop (there are 3 cards). */
.related-carousel{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
@media(max-width:979px){
  .related-carousel{ display:flex; grid-template-columns:none; gap:14px; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:16px;
    scroll-padding-inline:var(--pad); scrollbar-width:none; }
  .related-carousel::-webkit-scrollbar{ display:none; }
  .related-carousel > .card{ flex:0 0 46%; scroll-snap-align:start; }
  .related-carousel > .card .packshot.ratio-1-1{ aspect-ratio:auto; height:clamp(190px,42vw,250px);
    display:flex; align-items:center; justify-content:center; }
  .related-carousel > .card .packshot.ratio-1-1 > img{ max-height:100% !important; max-width:100% !important;
    width:auto !important; height:auto !important; object-fit:contain; }
}
@media(max-width:640px){
  .related-carousel > .card{ flex:0 0 80%; }
}

/* Mobile carousel controls — prev/next + dots. Hidden on tablet & desktop (grids). */
/* Carousel nav (arrows + dots) — styles always defined; visibility controlled per variant below */
.coll-nav{ display:none; align-items:center; justify-content:center; gap:18px; margin-top:20px; }
.coll-arrow{ width:44px; height:44px; border-radius:999px; border:1px solid var(--line-strong);
  background:var(--cream); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s, opacity .2s; flex:0 0 auto; }
.coll-arrow:hover:not(:disabled){ background:var(--red); border-color:var(--red); color:var(--cream); }
.coll-arrow:disabled{ opacity:.32; cursor:default; }
.coll-arrow svg{ width:18px; height:18px; }
.coll-dots{ display:flex; align-items:center; gap:9px; }
.coll-dots button{ width:8px; height:8px; padding:0; border:0; border-radius:999px;
  background:var(--line-strong); cursor:pointer; transition:transform .2s, background .2s; }
.coll-dots button.active{ background:var(--red); transform:scale(1.35); }
.bg-ink .coll-arrow{ background:#241d16; border-color:var(--line-cream); color:var(--cream); }
/* Standard collection: nav on mobile only. Related-products (.is-wide): mobile + tablet. */
@media(max-width:759px){ .coll-nav{ display:flex; } }
@media(min-width:760px) and (max-width:979px){ .coll-nav.is-wide{ display:flex; } }

/* ---------- Carousel ---------- */
.carousel{ position:relative; }
.carousel-viewport{ overflow:hidden; }
.carousel-track{ display:flex; gap:clamp(20px,3vw,40px); transition:transform .5s cubic-bezier(.6,.05,.2,1); }
.carousel-track > *{ flex:0 0 100%; }
@media(min-width:680px){ .carousel-track > *{ flex-basis:calc((100% - clamp(20px,3vw,40px)) / 2); } }
@media(min-width:980px){ .carousel-track > *{ flex-basis:calc((100% - 2*clamp(20px,3vw,40px)) / 3); } }
.carousel-track .reveal{ margin:0; }
.carousel-nav{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:38px; }
.carousel-btn{ width:52px; height:52px; border-radius:0; border:1.5px solid var(--line-strong);
  background:var(--cream); color:var(--ink); display:grid; place-items:center; transition:.2s; }
.carousel-btn:hover:not(:disabled){ background:var(--red); border-color:var(--red); color:var(--cream); }
.carousel-btn:disabled{ opacity:.32; cursor:default; }
.carousel-btn svg{ width:20px; height:20px; }
.bg-ink .carousel-btn{ background:#241d16; border-color:var(--line-cream); color:var(--cream); }
.bg-ink .carousel-btn:hover:not(:disabled){ background:var(--red); border-color:var(--red); }
.carousel-dots{ display:flex; gap:10px; }
.carousel-dots button{ width:9px; height:9px; border-radius:999px; border:0; background:var(--line-strong); padding:0; transition:.2s; }
.carousel-dots button.active{ background:var(--red); transform:scale(1.25); }

/* ============================================================
   VINTAGE COMPONENTS
   ============================================================ */

/* Price tag uses vintage numerals */
.price-tag .amt{ font-family:var(--font-serif); }

/* Ornamental divider — fleuron between hairlines */
.divider{ display:flex; align-items:center; justify-content:center; gap:18px; color:var(--red); }
.divider::before,.divider::after{ content:""; height:1px; flex:1; max-width:150px;
  background:linear-gradient(90deg,transparent,currentColor); opacity:.6; }
.divider::after{ background:linear-gradient(90deg,currentColor,transparent); }
.divider .gly{ font-size:1.05rem; letter-spacing:.34em; }
.divider.start{ justify-content:flex-start; }
.divider.start::before{ display:none; }
.divider.start::after{ max-width:120px; }
.bg-ink .divider,.bg-red .divider{ color:var(--gold); }
.hero .divider{ color:rgba(250,245,234,.85); }

/* Letterpress "Est. 1970" seal */
.seal{ width:124px; height:124px; flex:0 0 auto; border-radius:999px; border:2px solid var(--red);
  color:var(--red); display:grid; place-items:center; text-align:center; position:relative;
  font-family:var(--font-display); text-transform:uppercase; }
.seal::before{ content:""; position:absolute; inset:8px; border:1px solid currentColor; border-radius:999px; opacity:.55; }
.seal .yr{ font-family:var(--font-serif); font-weight:700; font-size:2rem; line-height:.9; }
.seal .t{ font-size:.5rem; letter-spacing:.24em; margin-top:5px; }
.seal .b{ font-size:.46rem; letter-spacing:.2em; opacity:.85; margin-top:2px; }
.seal .star{ font-size:.6rem; margin-bottom:3px; }
.seal.cream{ color:var(--cream); border-color:rgba(250,245,234,.8); background:rgba(20,15,11,.22); }

/* Vintage ticker / enamel-sign strip */
.ticker{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 30px;
  border-top:1px solid var(--line-cream); border-bottom:1px solid var(--line-cream); padding-block:6px; }
.ticker .it{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem;
  color:rgba(250,245,234,.92); display:inline-flex; align-items:center; gap:12px; }
.ticker .it::before{ content:"✦"; color:var(--gold); font-size:.7rem; }

/* Vintage section label wrap (eyebrow + ornaments already styled) */
.vlabel{ display:flex; flex-direction:column; align-items:center; gap:14px; }

/* small corner ticks for framed blocks */
.tickbox{ position:relative; }
.tickbox::before,.tickbox::after{ content:""; position:absolute; width:14px; height:14px; border:1.5px solid var(--red); }
.tickbox::before{ top:0; left:0; border-right:0; border-bottom:0; }
.tickbox::after{ bottom:0; right:0; border-left:0; border-top:0; }

/* "Coming soon" purchase popup */
.soon-overlay{ position:fixed; inset:0; z-index:400; display:none; align-items:center; justify-content:center;
  background:rgba(15,10,7,.62); padding:24px; opacity:0; transition:opacity .2s ease; }
.soon-overlay.open{ display:flex; opacity:1; }
.soon-box{ position:relative; background:var(--paper); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:4px; max-width:430px; width:100%; padding:38px 32px 30px; text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.45); transform:translateY(10px); transition:transform .2s ease; }
.soon-overlay.open .soon-box{ transform:none; }
.soon-icon{ width:54px; height:54px; border-radius:999px; display:grid; place-items:center; margin:0 auto 16px;
  border:1.5px solid var(--red); color:var(--red); }
.soon-icon svg{ width:26px; height:26px; }
.soon-title{ font-family:var(--font-serif); font-weight:800; font-size:1.5rem; margin:0 0 10px; color:var(--ink); }
.soon-msg{ color:var(--ink-soft); margin:0 0 24px; font-size:.98rem; line-height:1.6; }
.soon-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.soon-close{ position:absolute; top:8px; right:12px; background:none; border:0; font-size:1.7rem; line-height:1;
  color:var(--ink); cursor:pointer; opacity:.55; }
.soon-close:hover{ opacity:1; }

/* ============================================================
   "Now Playing" floating video card (vertical / portrait)
   ============================================================ */
.np-player{
  position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px);
  width:206px; max-width:calc(100vw - 28px); z-index:190;
  opacity:0; transform:translateY(22px) scale(.98); pointer-events:none;
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.np-player.show{ opacity:1; transform:none; pointer-events:auto; }
.np-player.closing{ opacity:0; transform:translateY(16px); transition:opacity .42s ease, transform .42s ease; }
.np-frame{
  position:relative; background:linear-gradient(168deg, var(--cream) 0%, #efe4d0 100%);
  padding:7px; border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 26px 64px -24px rgba(20,14,9,.66), inset 0 1px 0 rgba(255,255,255,.5);
}
.np-card{
  position:relative; aspect-ratio:9/16; overflow:hidden; border-radius:4px;
  background:var(--ink); border:1px solid rgba(20,14,9,.5);
}
.np-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.np-card::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,7,5,.30) 0%, transparent 20%, transparent 60%, rgba(10,7,5,.74) 100%); }
.np-eqbadge{ position:absolute; top:9px; left:10px; z-index:2; display:inline-flex; align-items:flex-end; gap:2px; height:13px; }
.np-eqbadge i{ width:2.5px; background:#fff; border-radius:1px; height:35%; box-shadow:0 0 4px rgba(0,0,0,.45);
  animation:npbar .9s ease-in-out infinite; }
.np-eqbadge i:nth-child(2){ animation-delay:.18s } .np-eqbadge i:nth-child(3){ animation-delay:.36s }
@keyframes npbar{ 0%,100%{ height:22% } 50%{ height:100% } }
.np-player.paused .np-eqbadge i{ animation-play-state:paused; }
.np-tap{ position:absolute; inset:0; z-index:1; border:0; padding:0; background:transparent; cursor:pointer; }
.np-center{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; opacity:0; pointer-events:none;
  transition:opacity .2s; }
.np-player.paused .np-center{ opacity:1; }
.np-center svg{ width:48px; height:48px; color:#fff; filter:drop-shadow(0 2px 9px rgba(0,0,0,.6)); }
.np-ctrls{ position:absolute; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:center;
  gap:13px; padding:11px; }
.np-btn{ width:34px; height:34px; display:grid; place-items:center; cursor:pointer; color:#fff;
  background:rgba(18,13,9,.42); border:1px solid rgba(255,255,255,.34); border-radius:999px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s, transform .2s; }
.np-btn:hover{ background:rgba(18,13,9,.64); transform:translateY(-1px); }
.np-btn svg{ width:16px; height:16px; }
.np-close{ position:absolute; top:-9px; right:-9px; z-index:3; width:25px; height:25px; border-radius:999px;
  background:var(--ink); color:var(--cream); border:1px solid var(--ink); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 5px 15px -5px rgba(0,0,0,.55); transition:transform .2s, background .2s; }
.np-close:hover{ transform:scale(1.1); background:var(--red); border-color:var(--red); }
.np-close svg{ width:12px; height:12px; }
/* "tap for sound" cue — shown only while the video is muted */
.np-soundcue{ position:absolute; left:8px; right:8px; bottom:50px; z-index:3; display:flex; justify-content:center;
  pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .45s ease, transform .45s ease; }
.np-soundcue span{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:rgba(18,13,9,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff;
  font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; }
.np-soundcue span svg{ width:12px; height:12px; }
.np-player.np-needsound.show .np-soundcue{ opacity:1; transform:none; }
.np-player.np-needsound .np-mute{ animation:nppulse 1.7s ease-in-out infinite; }
@keyframes nppulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(214,51,35,.55);} 70%{ box-shadow:0 0 0 7px rgba(214,51,35,0);} }
@media(prefers-reduced-motion:reduce){ .np-player.np-needsound .np-mute{ animation:none; } }
@media(max-width:520px){
  .np-player{ width:152px; right:12px; bottom:12px; }
  .np-btn{ width:30px; height:30px; } .np-btn svg{ width:14px; height:14px; }
  .np-center svg{ width:40px; height:40px; }
  .np-eqbadge{ height:11px; }
}
@media(prefers-reduced-motion:reduce){
  .np-player{ transition:opacity .5s ease; transform:none; }
  .np-eqbadge i{ animation:none; height:55%; }
}

/* ============================================================
   Story video (inline, landscape 16:9)
   ============================================================ */
.video-frame{
  position:relative; margin-inline:auto; max-width:820px;
  background:linear-gradient(168deg, var(--cream) 0%, #efe4d0 100%);
  padding:8px; border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5);
}
.video-frame video{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover;
  border-radius:4px; background:var(--ink); border:1px solid rgba(20,14,9,.5);
}

/* ============================================================
   Promo popup — "Wakil Penjual" recruitment banner
   ============================================================ */
.promo-overlay{ position:fixed; inset:0; z-index:500; display:none; align-items:center; justify-content:center;
  background:rgba(15,10,7,.72); padding:22px; opacity:0; transition:opacity .25s ease; }
.promo-overlay.open{ display:flex; opacity:1; }
.promo-box{ position:relative; width:100%; max-width:760px; transform:translateY(12px) scale(.98);
  transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.promo-overlay.open .promo-box{ transform:none; }
.promo-link{ display:block; border-radius:6px; overflow:hidden; border:1px solid var(--line-strong);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.65); }
.promo-link img{ display:block; width:100%; height:auto; }
.promo-close{ position:absolute; top:-14px; right:-14px; z-index:2; width:38px; height:38px; border-radius:999px;
  background:var(--ink); color:var(--cream); border:1px solid var(--ink); font-size:1.5rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; box-shadow:0 8px 22px -6px rgba(0,0,0,.6);
  transition:transform .2s, background .2s; }
.promo-close:hover{ transform:scale(1.08); background:var(--red); border-color:var(--red); }
@media(max-width:520px){
  .promo-close{ top:-10px; right:-6px; width:34px; height:34px; }
}
@media(prefers-reduced-motion:reduce){
  .promo-overlay, .promo-box{ transition:opacity .2s ease; }
  .promo-overlay.open .promo-box{ transform:none; }
}