/*
 * Dejunel — bespoke inner pages (FAQ, stockists, about, contact).
 *
 * Layered on top of packaging-engine.css and built from its tokens: the brand
 * blue masthead, the category colour system, Rubik's variable weight animating
 * on scroll, the giant outlined index watermark, the paper reading sheet. Every
 * moving part degrades to a finished, readable state under reduced motion.
 */

/* ============================================================ MASTHEAD (shared) */
.dj-page main#top{ padding-top:0; }                 /* the masthead clears the header itself */

.pgx{ background:var(--paper); color:var(--ink); }
.pgx-head{
  position:relative; overflow:clip; isolation:isolate; color:var(--bone);
  padding:clamp(104px,15vh,190px) 0 clamp(28px,5vh,60px);
  background:
    radial-gradient(120% 90% at 84% 6%, color-mix(in oklab,var(--blueL) 62%,transparent), transparent 60%),
    linear-gradient(168deg,var(--blueD),var(--blue) 52%,#072B4F);
}
.pgx-head::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(88deg, color-mix(in oklab,#061A6E 66%,transparent), transparent 66%);
}
.pgx-head .wrap{ position:relative; z-index:2; }
.pgx-head .eyebrow{ opacity:.82; margin-bottom:clamp(14px,2.4vh,26px); }
.pgx-title{
  font-family:var(--dis); font-weight:600; text-transform:uppercase; color:var(--bone);
  font-size:clamp(58px,14vw,210px); line-height:.84; letter-spacing:-.04em;
  font-variation-settings:'wght' var(--wght); --wght:600;
}
.pgx-lead{
  margin-top:clamp(16px,2.4vh,28px); max-width:54ch;
  font-size:clamp(15px,1.25vw,20px); line-height:1.5;
  color:color-mix(in oklab,var(--bone) 88%,transparent);
}
.pgx-bar{
  position:relative; z-index:2; height:12px; margin-top:clamp(22px,4vh,48px);
  display:grid; grid-auto-flow:column;
}
.pgx-sheet{ padding:clamp(40px,7vh,90px) 0; }
.pgx-sheet .dj-entry{ max-width:72ch; }

/* ============================================================ FAQ */
.faqx-body{
  display:grid; gap:clamp(20px,4vw,64px); align-items:start;
  grid-template-columns:minmax(0,3.1fr) minmax(0,8.9fr);
  padding:clamp(40px,7vh,96px) 0 clamp(56px,9vh,120px);
}

/* the sticky numbered index */
.faqx-index{ position:sticky; top:clamp(96px,13vh,150px); align-self:start; }
.faqx-index__label{
  font-family:var(--ui); font-size:11px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; opacity:.55; margin-bottom:16px;
  display:flex; align-items:baseline; gap:.6em;
}
.faqx-index__label b{ font-family:var(--dis); font-size:15px; opacity:.7; }
.faqx-index__list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.faqx-index__list a{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:baseline;
  padding:9px 0; opacity:.46; transition:opacity .3s,color .3s;
  border-top:1px solid color-mix(in oklab,var(--b950) 16%,transparent);
}
.faqx-index__list li:last-child a{ border-bottom:1px solid color-mix(in oklab,var(--b950) 16%,transparent); }
.faqx-index__list b{ font-family:var(--dis); font-weight:700; font-size:12px; }
.faqx-index__list span{ font-size:13px; font-weight:600; line-height:1.28; text-wrap:balance; }
.faqx-index__list a:hover,.faqx-index__list a:focus-visible{ opacity:1; }
.faqx-index__list a.on{ opacity:1; color:var(--blue); }

/* the accordion */
.faqx-list{ border-top:2px solid var(--b950); }
.faqx-item{
  position:relative; border-bottom:2px solid var(--b950); overflow:clip;
  scroll-margin-top:clamp(96px,13vh,150px);
}
.faqx-h{ margin:0; font:inherit; }
.faqx-q{
  width:100%; border:0; background:transparent; cursor:pointer; text-align:left; color:inherit;
  position:relative; z-index:2;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(14px,2vw,30px);
  padding:clamp(20px,3vh,38px) clamp(6px,1vw,18px);
}
.faqx-n{
  font-family:var(--dis); font-weight:700; font-size:clamp(20px,2.2vw,32px);
  line-height:.8; color:var(--c);
}
.faqx-t{
  font-family:var(--dis); font-weight:600; text-transform:uppercase;
  font-size:clamp(18px,2.2vw,33px); line-height:.99; letter-spacing:-.018em; text-wrap:balance;
  font-variation-settings:'wght' var(--wght); --wght:560; transition:--wght .35s;
}
.faqx-q:hover .faqx-t{ --wght:680; }

/* the +/– mark */
.faqx-mark{
  position:relative; flex:none; width:clamp(28px,3vw,42px); height:clamp(28px,3vw,42px);
  border:2px solid var(--b950); border-radius:50%;
  transition:background .35s,border-color .35s,transform .5s cubic-bezier(.2,.8,.2,1);
}
.faqx-mark::before,.faqx-mark::after{
  content:''; position:absolute; left:26%; right:26%; top:50%; height:2px; margin-top:-1px;
  background:var(--b950); transition:transform .5s cubic-bezier(.2,.8,.2,1),background .35s;
}
.faqx-mark::after{ transform:rotate(90deg); }

/* the colour spine */
.faqx-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px; z-index:3;
  background:var(--c); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.faqx-item:hover::before,.faqx-item.is-open::before{ transform:scaleY(1); }

/* the giant outlined watermark number */
.faqx-wm{
  position:absolute; right:.06em; top:50%; translate:0 -50%; z-index:0; pointer-events:none;
  font-family:var(--dis); font-weight:700; font-size:clamp(88px,19vh,210px); line-height:.7;
  letter-spacing:-.05em; color:transparent;
  -webkit-text-stroke:2px color-mix(in oklab,var(--c) 62%,transparent);
  opacity:0; transition:opacity .55s;
}

/* open state */
.faqx-item.is-open .faqx-wm{ opacity:.15; }
.faqx-item.is-open .faqx-mark{ background:var(--c); border-color:var(--c); }
.faqx-item.is-open .faqx-mark::before{ transform:rotate(90deg); background:var(--bone); }
.faqx-item.is-open .faqx-mark::after{ background:var(--bone); }
.faqx-item.is-open .faqx-t{ --wght:720; }

/* the answer — always in the DOM (never display:none), so height animates */
.faqx-a{
  position:relative; z-index:1; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1);
}
.faqx-item.is-open .faqx-a{ grid-template-rows:1fr; }
.faqx-a__in{
  overflow:hidden; max-width:66ch;
  padding:0 clamp(6px,1vw,18px);
  font-size:clamp(15px,1.15vw,18px); line-height:1.62;
}
.faqx-item.is-open .faqx-a__in{ padding-bottom:clamp(22px,3.4vh,44px); }
.faqx-a__in > :first-child{ margin-top:0; }
.faqx-a__in p+p,.faqx-a__in ul,.faqx-a__in ol{ margin-top:.9em; }
.faqx-a__in a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.faqx-a__in strong{ font-weight:700; }

/* ---- scroll-driven title weight, with a static default ---- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pgx-title{ animation:wghtRun linear both; animation-timeline:view(); animation-range:entry 6% cover 52%; }
  }
}

/* ---- reduced motion: the finished, readable state ---- */
@media (prefers-reduced-motion: reduce){
  .faqx-a{ grid-template-rows:1fr; }          /* every answer open */
  .faqx-item::before{ transform:scaleY(1); }
  .faqx-wm{ opacity:.12; }
  .pgx-title{ --wght:600; }
}

/* ============================================================ RESPONSIVE */
@media (max-width:900px){
  .faqx-body{ grid-template-columns:1fr; gap:0; }
  .faqx-index{ position:static; margin-bottom:clamp(22px,4vh,40px); }
  .faqx-index__list{ display:none; }          /* the numbered list is a desktop affordance */
}
@media (max-width:600px){
  .pgx-title{ font-size:clamp(52px,17vw,96px); }
  .faqx-t{ font-size:clamp(17px,5.4vw,26px); }
  .faqx-q{ gap:12px; padding:20px 2px; }
  .faqx-n{ font-size:clamp(17px,5vw,24px); }
}

/* ============================================================ ABOUT (chapters) */
.abx-ch{
  position:relative; overflow:clip;
  padding:clamp(56px,11vh,140px) 0;
  background:var(--paper); color:var(--ink);
}
.abx-ch.is-dark{
  background:
    radial-gradient(120% 90% at 82% 10%, color-mix(in oklab,var(--c) 16%,transparent), transparent 60%),
    var(--ink);
  color:var(--bone);
}
.abx-ch__in{
  position:relative; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,5vw,84px);
}
.abx-n{
  position:absolute; left:-.05em; top:-.46em; z-index:0; pointer-events:none;
  font-family:var(--dis); font-weight:700; line-height:.7; letter-spacing:-.05em;
  font-size:min(42vh,34vw); color:transparent;
  -webkit-text-stroke:clamp(1.5px,.24vw,5px) color-mix(in oklab,var(--c) 62%,transparent);
  opacity:.5;
}
.abx-ch__body{ position:relative; z-index:1; }
.abx-t{
  font-family:var(--dis); font-weight:600; text-transform:uppercase;
  font-size:clamp(38px,7vw,112px); line-height:.9; letter-spacing:-.03em;
  font-variation-settings:'wght' var(--wght); --wght:600;
}
.abx-t::after{
  content:''; display:block; width:clamp(60px,8vw,124px); height:10px;
  margin:clamp(14px,2vh,26px) 0 clamp(16px,2.4vh,30px); background:var(--c);
}
.abx-ch__text{ max-width:52ch; font-size:clamp(15px,1.2vw,19px); line-height:1.62; }
.abx-ch.is-dark .abx-ch__text{ color:color-mix(in oklab,var(--bone) 86%,transparent); }
.abx-ch__text > :first-child{ margin-top:0; }
.abx-ch__text p+p{ margin-top:.9em; }
.abx-ch__pack{ position:relative; z-index:1; display:grid; place-items:center; }
.abx-ch__pack .pk{ --w:clamp(160px,18vw,250px); }
.abx-ch__pack .pk-b{ animation:packIdle 10s ease-in-out infinite; }
/* even chapters flip the pack to the left */
.abx-ch:nth-child(even) .abx-ch__in{ grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); }
.abx-ch:nth-child(even) .abx-ch__body{ order:2; }
.abx-ch:nth-child(even) .abx-ch__pack{ order:1; }

.abx-facts{ background:var(--ink); color:var(--paper); padding:clamp(40px,7vh,96px) 0; }
.abx-facts .facts{ margin-top:0; }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .abx-t{ animation:wghtRun linear both; animation-timeline:view(); animation-range:entry 6% cover 46%; }
    .abx-n{ animation:abxN linear both; animation-timeline:view(); animation-range:entry 0% cover 42%; }
    @keyframes abxN{ from{ transform:translateY(42px); opacity:0; } to{ transform:none; opacity:.5; } }
    .abx-ch__pack{ animation:abxPack linear both; animation-timeline:view(); animation-range:entry 0% cover 52%; }
    @keyframes abxPack{ from{ transform:translateY(52px); opacity:0; } to{ transform:none; opacity:1; } }
  }
}
@media (prefers-reduced-motion: reduce){
  .abx-n{ opacity:.42; }
  .abx-t{ --wght:600; }
}

@media (max-width:900px){
  .abx-ch__in,
  .abx-ch:nth-child(even) .abx-ch__in{ grid-template-columns:1fr; gap:clamp(18px,4vh,32px); }
  .abx-ch__body,
  .abx-ch:nth-child(even) .abx-ch__body{ order:0; }
  .abx-ch__pack,
  .abx-ch:nth-child(even) .abx-ch__pack{ order:-1; justify-items:start; }
}
@media (max-width:600px){
  .abx-t{ font-size:clamp(34px,10vw,64px); }
  .abx-n{ font-size:44vw; }
}

/* ============================================================ CONTACT */
.ctx-body{
  display:grid; gap:clamp(20px,4vw,64px); align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:clamp(40px,7vh,96px) 0 clamp(56px,9vh,120px);
}

/* the details, typeset like the back of a pack */
.ctx-card{
  position:relative; background:var(--b950); color:var(--bone);
  padding:clamp(26px,3vw,46px); border-radius:12px;
}
.ctx-card::before{
  content:''; position:absolute; inset:9px; pointer-events:none; border-radius:3px;
  border:1px dashed color-mix(in oklab,var(--bone) 26%,transparent);
}
.ctx-card__top{
  position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-bottom:14px; margin-bottom:clamp(18px,2.6vh,32px);
  border-bottom:1px solid color-mix(in oklab,var(--bone) 42%,transparent);
  font-family:var(--ui); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:11px;
}
.ctx-card__brand{ font-family:var(--dis); font-size:22px; letter-spacing:-.02em; }
.ctx-card__meta{ opacity:.72; }
.ctx-card__body{ position:relative; z-index:1; font-size:clamp(15px,1.15vw,18px); line-height:1.62; max-width:42ch; }
.ctx-card__body > :first-child{ margin-top:0; }
.ctx-card__body p+p,.ctx-card__body ul{ margin-top:.9em; }
.ctx-card__body ul{ list-style:none; margin-left:0; padding-left:0; display:grid; gap:.5em; }
.ctx-card__body li{ padding-top:.5em; border-top:1px solid color-mix(in oklab,var(--bone) 20%,transparent); }
.ctx-card__body a{ color:var(--corn); }
.ctx-card__body strong{ color:var(--bone); font-weight:700; }
.ctx-card__seal{
  position:absolute; z-index:2; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px);
  width:5.2em; height:5.2em; display:grid; place-items:center; text-align:center; rotate:-12deg;
  font-family:var(--ui); font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--b950); background:var(--corn);
  clip-path:polygon(50% 0,62% 9%,76% 5%,83% 18%,97% 22%,96% 37%,100% 50%,96% 63%,97% 78%,83% 82%,76% 95%,62% 91%,50% 100%,38% 91%,24% 95%,17% 82%,3% 78%,4% 63%,0 50%,4% 37%,3% 22%,17% 18%,24% 5%,38% 9%);
  box-shadow:0 4px 16px color-mix(in oklab,#000 40%,transparent);
}

/* the form, styled as a label being filled in */
.ctx-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.ctx-note{ padding:16px 20px; margin-bottom:24px; border-left:4px solid; }
.ctx-note--ok{ border-color:var(--green); background:color-mix(in oklab,var(--green) 14%,var(--paper)); }
.ctx-note--err{ border-color:var(--brick); background:color-mix(in oklab,var(--brick) 14%,var(--paper)); }
.ctx-note b{ display:block; font-family:var(--dis); font-size:20px; text-transform:uppercase; }
.ctx-note span{ font-size:14px; opacity:.82; }
.ctx-form{ display:grid; gap:clamp(14px,2vh,22px); }
.ctx-field{ display:grid; gap:8px; }
.ctx-field > span{ font-family:var(--ui); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:11px; opacity:.66; }
.ctx-field input,.ctx-field textarea{
  font-family:var(--ui); font-size:16px; color:var(--b950); background:var(--bone);
  border:2px solid var(--b950); border-radius:12px; padding:14px 16px; width:100%;
}
.ctx-field textarea{ resize:vertical; min-height:120px; }
.ctx-field input:focus,.ctx-field textarea:focus{ outline:3px solid var(--blue); outline-offset:2px; }
.ctx-submit{
  justify-self:start; font-family:var(--dis); font-weight:500; text-transform:uppercase;
  letter-spacing:.02em; font-size:clamp(16px,1.4vw,21px); padding:15px 34px;
  background:var(--b950); color:var(--bone); border:0; border-radius:12px; cursor:pointer;
  transition:background .3s,color .3s,transform .3s;
}
.ctx-submit:hover{ background:var(--corn); color:var(--b950); transform:translateY(-2px); }
.ctx-form__bar{ height:10px; margin-top:6px; }

@media (max-width:900px){ .ctx-body{ grid-template-columns:1fr; } }

/* ============================================================ STOCKISTS */
.stx-hud{
  color:var(--bone); padding:clamp(40px,7vh,92px) 0;
  background:
    linear-gradient(color-mix(in oklab,var(--bone) 6%,transparent) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,color-mix(in oklab,var(--bone) 6%,transparent) 1px,transparent 1px) 0 0/64px 64px,
    radial-gradient(120% 90% at 50% 0%, #16203A, var(--ink) 66%);
}
.stx-hud__in{ display:grid; grid-template-columns:auto auto 1fr; gap:clamp(20px,4vw,66px); align-items:center; }
.stx-stat b{ display:block; font-family:var(--dis); font-weight:600; font-size:clamp(48px,8vw,120px); line-height:.82; color:var(--corn); }
.stx-stat span{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.72; }
.stx-hud__lead{ max-width:46ch; font-size:clamp(15px,1.15vw,18px); line-height:1.55; opacity:.9; justify-self:end; }
.stx-hud__lead p{ margin:0; }

.stx-dir{ padding:clamp(30px,5vh,66px) 0 clamp(18px,3vh,36px); display:grid; gap:clamp(20px,3vh,46px); }
.stx-city{ border-top:3px solid var(--c); }
.stx-city__hd{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(12px,2vw,28px); padding:clamp(14px,2vh,26px) 0; }
.stx-city__n{ font-family:var(--dis); font-weight:700; font-size:clamp(18px,2vw,28px); color:var(--c); line-height:.8; }
.stx-city__name{ font-family:var(--dis); font-weight:600; text-transform:uppercase; font-size:clamp(28px,4.4vw,70px); line-height:.9; letter-spacing:-.03em; }
.stx-city__count{ font-family:var(--dis); font-weight:700; font-size:clamp(16px,1.7vw,24px); color:var(--c); width:1.9em; height:1.9em; display:grid; place-items:center; border:2px solid var(--c); border-radius:50%; }
.stx-city__grid{ display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); background:color-mix(in oklab,var(--ink) 16%,transparent); }
.stx-pos{ background:var(--paper); padding:clamp(15px,1.6vw,24px); display:grid; gap:5px; border-left:3px solid var(--c); }
.stx-pos b{ font-family:var(--dis); font-weight:600; font-size:clamp(16px,1.4vw,21px); text-transform:uppercase; line-height:1; }
.stx-pos span{ font-size:13px; opacity:.72; }

.stx-cta{ background:var(--ink); color:var(--bone); padding:clamp(46px,8vh,120px) 0; }
.stx-cta__in{ display:grid; gap:clamp(14px,2vh,24px); justify-items:start; }
.stx-cta h2{ font-family:var(--dis); font-weight:600; text-transform:uppercase; font-size:clamp(30px,5.2vw,84px); line-height:.92; letter-spacing:-.03em; max-width:18ch; }
.stx-cta p{ max-width:52ch; font-size:clamp(15px,1.2vw,19px); opacity:.85; }
.stx-cta__btn{ margin-top:clamp(8px,1.4vh,18px); font-family:var(--dis); font-weight:500; text-transform:uppercase; font-size:clamp(15px,1.3vw,20px); letter-spacing:.01em; padding:15px 32px; background:var(--corn); color:var(--ink); transition:transform .3s,background .3s; }
.stx-cta__btn:hover{ transform:translateY(-2px); background:var(--lime); }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .stx-city{ animation:stxCity linear both; animation-timeline:view(); animation-range:entry 0% entry 72%; }
    @keyframes stxCity{ from{ transform:translateY(30px); opacity:0; } to{ transform:none; opacity:1; } }
  }
}
@media (max-width:760px){
  .stx-hud__in{ grid-template-columns:auto auto; row-gap:24px; }
  .stx-hud__lead{ grid-column:1/-1; justify-self:start; }
  .stx-city__name{ font-size:clamp(24px,7vw,40px); }
}

/* --- actionable store cards --- */
.stx-pos{ gap:12px; align-content:start; }
.stx-pos__txt{ display:grid; gap:5px; }
.stx-pos__act{ display:flex; gap:8px; flex-wrap:wrap; }
.stx-pos__dir,.stx-pos__map{
  font-family:var(--ui); font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  font-size:11px; padding:9px 13px; border:2px solid var(--ink); cursor:pointer; line-height:1;
  transition:background .25s,color .25s,border-color .25s;
}
.stx-pos__dir{ background:var(--ink); color:var(--bone); }
.stx-pos__dir:hover{ background:var(--c); color:var(--ink); border-color:var(--c); }
.stx-pos__map{ background:transparent; color:var(--ink); }
.stx-pos__map:hover{ background:var(--ink); color:var(--bone); }

/* --- the interactive map --- */
.stx-map-wrap{ background:var(--ink); }
.stx-map{ height:clamp(380px,60vh,640px); width:100%; z-index:0; border-top:1px solid color-mix(in oklab,var(--bone) 12%,transparent); }
.leaflet-container{ background:#0B0E17; font-family:var(--ui); }
.leaflet-control-attribution{ background:color-mix(in oklab,var(--ink) 82%,transparent)!important; color:color-mix(in oklab,var(--bone) 58%,transparent)!important; font-size:10px; }
.leaflet-control-attribution a{ color:var(--corn)!important; }
.leaflet-bar a{ background:var(--ink); color:var(--bone); border-bottom-color:color-mix(in oklab,var(--bone) 20%,transparent); }
.leaflet-bar a:hover{ background:#16203A; color:var(--bone); }

/* brand pin — the Dejunel mark reversed out of a coloured badge, with a pointer */
.dj-pin{ background:none!important; border:0!important; }
.dj-pin__badge{
  position:relative; display:grid; place-items:center; width:38px; height:38px;
  border-radius:12px; background:var(--c); border:2px solid var(--ink);
  box-shadow:0 7px 14px rgba(0,0,0,.5);
}
.dj-pin__badge svg{ width:64%; height:64%; color:var(--bone); }
.dj-pin__badge::after{
  content:''; position:absolute; left:50%; bottom:-6px; width:12px; height:12px;
  background:var(--c); border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:translateX(-50%) rotate(45deg);
}

/* the "show all points" control, in the same bar language as +/- */
.dj-reset a{ display:grid!important; place-items:center; }
.dj-reset svg{ width:18px; height:18px; color:var(--bone); }

/* Leaflet adds a Ukrainian-flag glyph next to its attribution — remove it. */
.leaflet-attribution-flag{ display:none!important; }

/* popup styled like a mini label */
.leaflet-popup-content-wrapper{ background:var(--ink); color:var(--bone); border-radius:0; border:2px solid var(--corn); box-shadow:0 12px 34px rgba(0,0,0,.5); }
.leaflet-popup-content{ margin:14px 16px; }
.leaflet-popup-tip{ background:var(--ink); border-right:2px solid var(--corn); border-bottom:2px solid var(--corn); }
.leaflet-popup-close-button{ color:var(--bone)!important; }
.dj-pop{ display:grid; gap:6px; }
.dj-pop b{ font-family:var(--dis); font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:-.01em; }
.dj-pop span{ font-size:13px; opacity:.82; }
.dj-pop a{ margin-top:4px; font-family:var(--ui); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--corn); }

@media (max-width:600px){ .stx-map{ height:clamp(320px,52vh,460px); } }

/* ============================================================ PARTENERI (doors) */
.pnx-hud{
  color:var(--bone); padding:clamp(32px,6vh,78px) 0;
  background:
    linear-gradient(color-mix(in oklab,var(--bone) 6%,transparent) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,color-mix(in oklab,var(--bone) 6%,transparent) 1px,transparent 1px) 0 0/64px 64px,
    radial-gradient(120% 90% at 50% 0%, #16203A, var(--ink) 66%);
}
.pnx-hud__in{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,66px); align-items:center; }
.pnx-hud__stat b{ display:block; font-family:var(--dis); font-weight:600; font-size:clamp(42px,7vw,104px); line-height:.82; color:var(--corn); }
.pnx-hud__stat span{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.72; }
.pnx-hud__lead{ max-width:54ch; font-size:clamp(16px,1.3vw,21px); line-height:1.5; opacity:.92; margin:0; }

.pnx-doors{
  display:grid; gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(4,1fr);
  padding:clamp(28px,5vh,64px) 0 clamp(20px,3vh,40px);
}
@media(max-width:900px){ .pnx-doors{ grid-template-columns:1fr 1fr; } }
@media(max-width:500px){ .pnx-doors{ grid-template-columns:1fr; } }
.pnx-door{
  position:relative; overflow:clip; isolation:isolate;
  display:flex; flex-direction:column; gap:12px;
  padding:clamp(22px,2.4vw,38px);
  background:var(--bone); color:var(--ink);
  border:1px solid var(--b200); border-top:4px solid var(--blue);
  border-radius:14px;
  min-height:clamp(300px,38vh,400px);
  box-shadow:0 2px 10px color-mix(in oklab,var(--blue) 6%,transparent);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s;
}
.pnx-door:hover{ transform:translateY(-6px); box-shadow:0 18px 40px color-mix(in oklab,var(--blue) 16%,transparent); border-color:var(--b300); }
.pnx-door__n{
  position:absolute; right:.04em; top:-.18em; z-index:0; pointer-events:none;
  font-family:var(--dis); font-weight:700; font-size:clamp(96px,12vw,168px); line-height:.7;
  letter-spacing:-.05em; color:transparent;
  -webkit-text-stroke:2px color-mix(in oklab,var(--blue) 22%,transparent); opacity:.55;
}
.pnx-door__tag{ position:relative; z-index:1; font-family:var(--ui); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:11px; color:var(--blue); margin:0; }
.pnx-door__title{
  position:relative; z-index:1; margin:0;
  font-family:var(--dis); font-weight:600; text-transform:uppercase;
  font-size:clamp(20px,2vw,30px); line-height:.94; letter-spacing:-.02em;
  font-variation-settings:'wght' var(--wght); --wght:600; transition:--wght .35s;
  color:var(--b800);
}
.pnx-door:hover .pnx-door__title{ --wght:730; }
.pnx-door__blurb{ position:relative; z-index:1; margin:0; font-size:clamp(14.5px,1.05vw,17px); line-height:1.55; opacity:.86; max-width:34ch; }
.pnx-door__act{ position:relative; z-index:1; margin-top:auto; display:grid; gap:10px; padding-top:16px; }
.pnx-door__tel{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 15px; background:var(--blue); color:var(--bone); text-decoration:none;
  border-radius:10px; transition:background .25s,color .25s;
}
.pnx-door__tel:hover{ background:var(--b700); color:var(--bone); }
.pnx-door__tel-role{ font-family:var(--ui); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; opacity:.9; }
.pnx-door__tel-num{ font-family:var(--dis); font-weight:600; font-size:clamp(16px,1.3vw,20px); letter-spacing:.01em; }
.pnx-door__cta{
  justify-self:start; font-family:var(--ui); font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:11.5px; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:.5em;
}
.pnx-door__cta::after{ content:'→'; transition:transform .3s; }
.pnx-door__cta:hover::after{ transform:translateX(4px); }

/* the supplier door — full width, dark blue, laid out as a strip */
.pnx-door--sup{
  grid-column:1/-1; flex-direction:row; flex-wrap:wrap; align-items:center;
  gap:clamp(14px,2.4vw,34px); min-height:0;
  background:linear-gradient(135deg,var(--b800),var(--b900)); color:var(--bone);
  border-color:var(--b700); border-top-color:var(--c); border-radius:14px;
}
.pnx-door--sup .pnx-door__tag{ flex:0 0 100%; }
.pnx-door--sup .pnx-door__title{ color:var(--bone); flex:1 1 240px; }
.pnx-door--sup .pnx-door__blurb{ color:color-mix(in oklab,var(--bone) 82%,transparent); flex:2 1 300px; }
.pnx-door--sup .pnx-door__act{ margin-top:0; flex:0 0 auto; }
.pnx-door--sup .pnx-door__n{ -webkit-text-stroke-color:color-mix(in oklab,var(--c) 52%,transparent); opacity:.4; }
.pnx-door--sup .pnx-door__cta{ color:var(--w50); }

/* the factory / HQ band */
.pnx-hq{ background:var(--paper); color:var(--ink); border-top:1px solid var(--b200); padding:clamp(30px,5vh,72px) 0; }
.pnx-hq__in{ display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,40px); flex-wrap:wrap; }
.pnx-hq__eyebrow{ font-family:var(--ui); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:11px; opacity:.55; margin:0; }
.pnx-hq__addr{ font-family:var(--dis); font-weight:600; text-transform:uppercase; font-size:clamp(20px,2.4vw,34px); line-height:1; letter-spacing:-.01em; margin:6px 0 0; }
.pnx-hq__dir{
  font-family:var(--ui); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
  padding:14px 22px; background:var(--blue); color:var(--bone); text-decoration:none; white-space:nowrap;
  border-radius:10px; transition:background .25s,transform .3s;
}
.pnx-hq__dir:hover{ background:var(--b700); transform:translateY(-2px); }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pnx-door{ animation:pnxDoor linear both; animation-timeline:view(); animation-range:entry 0% entry 60%; }
    @keyframes pnxDoor{ from{ transform:translateY(28px); opacity:0; } to{ transform:none; opacity:1; } }
  }
}
@media (prefers-reduced-motion: reduce){ .pnx-door{ transition:none; } }

@media (max-width:760px){
  .pnx-hud__in{ grid-template-columns:1fr; row-gap:16px; }
  .pnx-door{ min-height:0; }
  .pnx-door--sup{ flex-direction:column; align-items:flex-start; }
}

/* ============================================================ DESPRE NOI (story) */
.abx-intro{ background:var(--paper); color:var(--ink); padding:clamp(38px,7vh,96px) 0 clamp(18px,3vh,36px); }
.abx-intro .dj-entry{ max-width:60ch; }
.abx-intro .dj-entry p{ font-size:clamp(19px,1.9vw,30px); line-height:1.45; margin:0 0 .6em; }
.abx-intro .dj-entry p:first-child{ font-weight:500; }

/* founding timeline */
.abx-time{ background:var(--ink); color:var(--bone); padding:clamp(34px,6vh,84px) 0; }
.abx-time__in{ display:grid; gap:clamp(16px,2.4vw,32px); grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.abx-mile{ padding-top:clamp(14px,2vh,22px); border-top:4px solid var(--c); }
.abx-mile__y{ display:block; font-family:var(--dis); font-weight:600; font-size:clamp(28px,3.4vw,54px); line-height:.9; color:var(--bone); letter-spacing:-.01em; }
.abx-mile__l{ display:block; margin-top:10px; font-size:clamp(13px,1vw,15px); line-height:1.4; opacity:.78; max-width:24ch; }

/* the real factory photos */
.abx-photos{ background:var(--ink); color:var(--bone); padding:0 0 clamp(34px,6vh,84px); }
.abx-photos__grid{ display:grid; gap:clamp(10px,1.4vw,18px); grid-template-columns:repeat(2,1fr); }
.abx-photo{ position:relative; margin:0; overflow:hidden; background:#0b0e17; }
.abx-photo--lead{ grid-column:1/-1; }
.abx-photo img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.abx-photo--lead img{ aspect-ratio:16/6.5; }
.abx-photo figcaption{
  position:absolute; inset:auto 0 0 0; padding:26px 16px 13px;
  font-family:var(--ui); font-weight:700; font-size:12px; letter-spacing:.04em; color:var(--bone);
  background:linear-gradient(transparent, color-mix(in oklab,#000 82%,transparent));
}
@media (min-width:760px){
  .abx-photos__grid{ grid-template-columns:repeat(3,1fr); }
  .abx-photo--lead{ grid-column:1/-1; }
}

/* optional prose chapters */
.abx-chapters{ padding:clamp(30px,6vh,80px) 0; display:grid; gap:clamp(22px,4vh,44px); }
.abx-chapter{ border-left:6px solid var(--c); padding-left:clamp(16px,2vw,28px); }
.abx-chapter__t{ font-family:var(--dis); font-weight:600; text-transform:uppercase; font-size:clamp(24px,3vw,44px); line-height:.96; letter-spacing:-.02em; margin:0; }
.abx-chapter__x{ margin-top:12px; max-width:64ch; font-size:clamp(15px,1.1vw,18px); line-height:1.62; }
.abx-chapter__x > :first-child{ margin-top:0; }

/* audience panorama (informational; the actions live on Parteneri) */
.abx-aud{ background:var(--paper); color:var(--ink); border-top:2px solid var(--ink); padding:clamp(38px,7vh,96px) 0; }
.abx-aud__eyebrow{ font-family:var(--ui); font-weight:800; letter-spacing:.18em; text-transform:uppercase; font-size:11px; opacity:.55; margin:0 0 clamp(16px,3vh,28px); }
.abx-aud__grid{ display:grid; gap:clamp(12px,1.5vw,18px); grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.abx-aud__card{ display:flex; flex-direction:column; gap:9px; padding:clamp(18px,2vw,30px); background:var(--bone); border-top:6px solid var(--c); text-decoration:none; color:var(--ink); transition:transform .3s, box-shadow .3s; }
.abx-aud__card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px color-mix(in oklab,var(--ink) 20%,transparent); }
.abx-aud__tag{ font-family:var(--ui); font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:10.5px; color:var(--c); }
.abx-aud__t{ font-family:var(--dis); font-weight:600; text-transform:uppercase; font-size:clamp(19px,1.8vw,27px); line-height:.98; letter-spacing:-.01em; }
.abx-aud__x{ font-size:14px; line-height:1.5; opacity:.8; }

/* ── Programs & Events ── */
.abx-prog{
  margin-top:clamp(40px,7vh,80px);
  padding:clamp(40px,6vh,72px) 0;
  background:var(--paper);
}
.abx-prog__eye{
  font-family:var(--ui); font-size:clamp(10px,.78vw,12px); font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--b600);
  margin-bottom:clamp(18px,3vh,32px);
}
.abx-prog__grid{
  display:grid; gap:clamp(16px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
.abx-prog__card{
  padding:clamp(24px,3vw,40px);
  background:var(--bone);
  border:1px solid var(--b200);
  border-radius:16px;
  box-shadow:0 4px 20px color-mix(in oklab,var(--blue) 6%,transparent);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.abx-prog__card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px color-mix(in oklab,var(--blue) 12%,transparent);
}
.abx-prog__icon{
  font-size:clamp(32px,4vw,48px); margin-bottom:12px; line-height:1;
}
.abx-prog__card h3{
  font-family:var(--dis); font-size:clamp(20px,2vw,28px); font-weight:600;
  text-transform:uppercase; line-height:1; letter-spacing:-.02em;
  color:var(--b800); margin:0 0 clamp(10px,1.6vh,16px);
}
.abx-prog__card p{
  font-size:clamp(14px,1.05vw,16px); line-height:1.6; color:var(--w600);
  margin:0 0 clamp(14px,2vh,20px);
}
.abx-prog__card ul{
  list-style:none; padding:0; margin:0; display:grid; gap:6px;
}
.abx-prog__card li{
  font-size:13.5px; font-weight:600; color:var(--b700); line-height:1.4;
  padding-left:1.2em; position:relative;
}
.abx-prog__card li::before{
  content:'✓'; position:absolute; left:0; color:var(--b500); font-weight:800;
}
.abx-prog__badges{
  display:flex; gap:10px; margin-bottom:clamp(14px,2vh,20px);
}
.abx-prog__badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 20px; border-radius:8px;
  background:var(--b800); color:var(--w50);
  font-family:var(--dis); font-size:14px; font-weight:700;
  letter-spacing:.06em;
}

/* ── About split: contact form + catalogue CTA ── */
.abx-split{
  margin-top:clamp(40px,7vh,80px);
  padding:clamp(40px,6vh,72px) 0;
  background:linear-gradient(168deg,var(--b900),var(--blue) 50%,var(--b800));
  color:var(--w50);
}
.abx-split__in{
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:1fr 1fr; align-items:start;
}
.abx-split__h{
  font-family:var(--dis); font-size:clamp(28px,4vw,48px); font-weight:600;
  text-transform:uppercase; line-height:.92; letter-spacing:-.03em; margin:0 0 10px;
}
.abx-split__sub{
  font-size:clamp(14px,1.1vw,17px); opacity:.78; margin:0 0 clamp(18px,3vh,28px); max-width:44ch;
}
.abx-split__form .ctx-form{ display:grid; gap:10px; }
.abx-split__form .ctx-field{
  display:grid; gap:4px; font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.abx-split__form .ctx-field input,
.abx-split__form .ctx-field textarea{
  background:color-mix(in oklab,var(--w50) 10%,transparent);
  border:1px solid color-mix(in oklab,var(--w50) 24%,transparent);
  border-radius:10px; padding:12px 14px; color:var(--w50);
  font-family:var(--ui); font-size:15px; font-weight:500;
  transition:border-color .2s;
}
.abx-split__form .ctx-field input:focus,
.abx-split__form .ctx-field textarea:focus{
  outline:none; border-color:var(--w50);
}
.abx-split__form .ctx-submit{
  all:unset; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 28px; border-radius:10px;
  background:var(--w50); color:var(--b800);
  font-family:var(--ui); font-size:12px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .25s, transform .25s;
}
.abx-split__form .ctx-submit:hover{
  background:var(--w200); transform:translateY(-2px);
}
.abx-split__cta{
  display:flex; align-items:center; justify-content:center; min-height:100%;
}
.abx-split__card{
  padding:clamp(28px,3.6vw,48px);
  background:color-mix(in oklab,var(--w50) 8%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid color-mix(in oklab,var(--w50) 14%,transparent);
  border-radius:16px; text-align:center;
}
.abx-split__eye{
  font-family:var(--ui); font-size:10px; font-weight:800;
  letter-spacing:.22em; text-transform:uppercase; opacity:.6;
}
.abx-split__card-h{
  font-family:var(--dis); font-size:clamp(24px,2.6vw,38px); font-weight:600;
  text-transform:uppercase; line-height:.95; letter-spacing:-.02em;
  margin:12px 0 14px;
}
.abx-split__card p{
  font-size:clamp(14px,1.1vw,16px); line-height:1.55; opacity:.78; margin:0 0 clamp(18px,3vh,28px);
}
.abx-split__card .dj-btn{
  background:var(--w50); color:var(--b800); border-color:var(--w50); width:100%;
}
.abx-split__card .dj-btn:hover{
  background:var(--w200); color:var(--b900);
}

@media (max-width:760px){
  .abx-split__in{ grid-template-columns:1fr; }
}

@media (max-width:600px){
  .abx-mile__y{ font-size:clamp(26px,9vw,40px); }
}
