/* ============================================================
   MOBILE-ONLY COMPONENTS (hidden on desktop, shown in phone media)
   ============================================================ */
.burger{
  display:none;                      /* shown only on phone */
  appearance:none; cursor:pointer;
  background:transparent; border:0; color:var(--ink);
  flex-direction:column; align-items:center; gap:3px;
  padding:4px 6px;
}
.burger-lines{ display:flex; flex-direction:column; gap:4px; }
.burger-lines i{ width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s,opacity .2s; }
.burger-text{ font-size:9px; letter-spacing:.08em; color:var(--muted); }
.burger.is-open .burger-lines i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open .burger-lines i:nth-child(2){ opacity:0; }
.burger.is-open .burger-lines i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-drawer{
  display:none;                      /* shown only on phone, when open */
  position:fixed; left:0; right:0; z-index:25;
  top:var(--topbar-h);
  background:#0c1220; border-bottom:1px solid var(--line);
  flex-direction:column;
  transform:translateY(-12px); opacity:0; pointer-events:none;
  transition:transform .22s ease, opacity .22s ease;
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}
.nav-drawer.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.nav-drawer a{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; color:var(--ink); text-decoration:none;
  font-size:15px; font-weight:700; letter-spacing:.08em;
  border-bottom:1px solid var(--line-soft);
}
.nav-drawer a .drawer-sub{ font-size:11px; font-weight:500; color:var(--faint); letter-spacing:.02em; }
.nav-drawer a.is-active{ color:var(--gold); }
.nav-scrim{
  position:fixed; inset:0; z-index:24; background:rgba(3,5,9,.5);
}
.nav-scrim[hidden]{ display:none; }

/* Mobile slide-to-contact bar (desktop-hidden). */
.contact-bar{
  display:none;                      /* shown only on phone */
  appearance:none; cursor:pointer;
  width:100%; align-items:center; justify-content:center; gap:8px;
  margin-top:10px;
  background:linear-gradient(180deg, rgba(214,168,73,.18), rgba(214,168,73,.08));
  color:var(--gold);
  border:1px solid rgba(214,168,73,.55);
  border-radius:10px;
  padding:13px 16px;
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.06em;
}
.contact-bar:active{ background:var(--gold); color:#1a1206; }
.contact-bar-arrow{ display:flex; }
/* Back state: arrow points left and sits before the label. */
.contact-bar.is-back .contact-bar-arrow{ order:-1; transform:scaleX(-1); }

/* Mobile sector dots pager — ‹ SECTOR › centred label in the sector
   accent with one dot per sector underneath. Arrows step, dots jump.
   Deterministic (text/class toggle only — no transform math). */
.sector-pager{
  display:none;                      /* shown only on phone */
  flex:0 0 auto;
  align-items:stretch;
  margin-top:clamp(8px,1.4vh,14px);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(20,34,58,.55), rgba(10,15,24,.35));
}
.sector-pager-center{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; padding:11px 8px 10px;
}
.sector-pager-label{
  font-size:15px; font-weight:800; letter-spacing:.12em;
  color:var(--sector-accent);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  transition:color .2s;
}
.sector-pager-dots{ display:flex; gap:8px; }
.sector-dot{
  appearance:none; cursor:pointer; border:0; padding:0;
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.28);
  transition:background .2s, transform .2s;
}
.sector-dot.is-active{
  background:var(--item-accent, var(--sector-accent));
  transform:scale(1.3);
}
.sector-arrow{
  flex:0 0 auto; appearance:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  width:44px; background:rgba(255,255,255,.04);
  border:0; color:var(--gold);
}
.sector-arrow-prev{ border-right:1px solid var(--line-soft); }
.sector-arrow-next{ border-left:1px solid var(--line-soft); }
.sector-arrow:active{ background:rgba(214,168,73,.18); }
/* Respect the hidden attribute (JS hides the pager outside the
   category view) even where a breakpoint sets display:flex. */
.sector-pager[hidden]{ display:none !important; }