/* ============================================================
   PRIMEWOOD — 3D configurator entry points
   Every link opens the SpecStack configurator in a new tab
   (a[data-configurator]; i18n.js adds the page language).
   Built from the existing pills, eyebrows and tokens only.
   ============================================================ */

/* ---------- top strip pill (desktop + tablet) ---------- */
.topbar__right{display:inline-flex;align-items:center;gap:22px}
.topbar__3d{display:inline-flex;align-items:center;gap:9px;padding:5px 5px 5px 14px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  border:1px solid rgba(255,255,255,.45);border-radius:100px;transition:background .3s,color .3s,border-color .3s}
.topbar__3d .d-ar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:#fff;color:var(--ink);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.topbar__3d .d-ar svg{width:11px;height:11px}
.topbar__3d:hover{background:#fff;color:var(--ink);border-color:#fff}
.topbar__3d:hover .d-ar{transform:translateX(2px)}

/* ---------- hero call to action ---------- */
.hero__cta{margin-top:34px;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;
  opacity:0;transform:translateY(20px);transition:opacity 1s ease,transform 1s cubic-bezier(.16,1,.3,1)}
html.loaded .hero__cta{opacity:1;transform:none;transition-delay:.8s}
.hero__cta-note{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(12,9,5,.6),0 1px 16px rgba(12,9,5,.55)}
@media (prefers-reduced-motion:reduce){.hero__cta{opacity:1;transform:none}}

/* ---------- catalogue pill: dark, ahead of Enquire ---------- */
.discover--3d{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.discover--3d .d-ar{background:var(--paper);color:var(--ink)}
.discover--3d:hover{background:var(--wood);border-color:var(--wood);color:#fff}
.discover--3d:hover .d-ar{background:#fff;color:var(--wood)}

/* ---------- section after the catalogue ---------- */
.cfg{background:var(--paper-2);padding-block:var(--sec)}
.cfg__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,90px);align-items:center}
.cfg__media{position:relative;display:grid;gap:10px}
.cfg__media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius,12px);background:var(--paper-3)}
.cfg__chip{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(18,15,10,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:7px 12px;border-radius:100px}
.cfg__credit{font-size:12px;color:var(--ink-3)}
.cfg__text .eyebrow{margin-bottom:22px}
.cfg__text .lead{margin-top:22px}
.cfg__steps{list-style:none;margin:30px 0 34px;border-top:1px solid var(--line)}
.cfg__steps li{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:15.5px}
.cfg__steps .num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--wood);flex:none}
.cfg__note{margin-top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:880px){.cfg__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- closing block: outlined, between Get in touch and View products ---------- */
.shape .shape-3d{color:#fff;border-color:rgba(255,255,255,.5)}
.shape .shape-3d .btn__ar{border-left-color:rgba(255,255,255,.3)}
.shape .shape-3d:hover{background:#fff;color:var(--ink);border-color:#fff}
.shape .shape-3d:hover .btn__ar{border-left-color:rgba(33,30,24,.14)}

/* ---------- phone menu pill, after Contact ---------- */
.mobile-menu a.mm-3d{margin-top:26px;align-self:flex-start;display:inline-flex;align-items:center;gap:14px;
  font-family:var(--sans);font-size:15px;font-weight:600;color:var(--paper);background:var(--ink);
  border:0;border-radius:100px;padding:8px 8px 8px 24px}
.mobile-menu a.mm-3d .d-ar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:var(--paper);color:var(--ink)}
.mobile-menu a.mm-3d .d-ar svg{width:14px;height:14px}