/* ==========================================================================
   dxbcardpoint.org
   arabic-modern skeleton (geometry, 8-point star, dot field, Amiri)
   + editorial-zine accent (outline numerals, hairline rules, sticker cards)
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --paper: #fbf8f5;
  --surface: #ffffff;
  --surface-2: #f4efe9;
  --ink: #24201e;
  --ink-2: #5c5350;
  --line: #e6ded6;
  --brand: #dc2509;
  --brand-deep: #a81d06;
  --brand-tint: #ffece6;
  --on-brand: #ffffff;
  --dot: rgba(36, 32, 30, 0.16);

  --foot-bg: #24201e;
  --foot-fg: #f4efe9;
  --foot-mut: #a89d95;
  --foot-line: rgba(244, 239, 233, 0.16);
  --foot-accent: #ff7a58;

  --f-sans: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --f-serif: "Amiri", Georgia, "Times New Roman", serif;

  --r: 22px;
  --r-sm: 12px;
  --r-lg: 28px;
  --wrap: 1220px;
  --pad: clamp(18px, 5vw, 44px);
  --sec: clamp(54px, 7.5vw, 100px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

[data-theme="dark"] {
  --paper: #16120f;
  --surface: #201b17;
  --surface-2: #29221d;
  --ink: #f4efe9;
  --ink-2: #b9aea5;
  --line: #3a2f28;
  --brand: #ff5b36;
  --brand-deep: #ff8664;
  --brand-tint: #2e1710;
  --on-brand: #16120f;
  --dot: rgba(244, 239, 233, 0.13);

  --foot-bg: #100d0b;
  --foot-line: rgba(244, 239, 233, 0.13);
}

/* ---------------------------------------------------------------- reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 1.0125rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html[lang="ar"] body { font-family: var(--f-serif); font-size: 1.08rem; line-height: 1.85; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.018em; line-height: 1.12; }
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 { letter-spacing: 0; line-height: 1.34; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.15em; }
address { font-style: normal; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.vkw-noscroll { overflow: hidden; }

/* moved out of view vertically: a horizontal offset would widen the RTL page */
.vkw-skip {
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-200%);
  transition: transform 0.18s var(--ease);
}
.vkw-skip:focus { transform: translateY(0); }

.vkw-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.vkw-ico { flex: none; vertical-align: -0.14em; }
.vkw-muted { color: var(--ink-2); }
.vkw-mt { margin-top: clamp(20px, 3vw, 34px); }
.vkw-center { text-align: center; }

/* ----------------------------------------------------------- typography -- */
h1 { font-size: clamp(2.1rem, 5.1vw, 3.6rem); }
h2 { font-size: clamp(1.62rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.08rem, 1.5vw, 1.24rem); }

.vkw-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
html[lang="ar"] .vkw-eyebrow { font-family: var(--f-serif); letter-spacing: 0; text-transform: none; font-size: 0.9rem; }

.vkw-lede { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--ink-2); max-width: 62ch; }
html[lang="ar"] .vkw-lede { max-width: 58ch; }

/* oversized outline numeral — the zine accent */
.vkw-num {
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(54px, 8vw, 110px);
  line-height: 0.78;
  color: var(--brand-tint);
  -webkit-text-stroke: 1.4px var(--line);
  user-select: none;
}

/* ----------------------------------------------------------------- grid -- */
.vkw-g8 {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px);
}
.sp-2 { grid-column: span 2; }
.sp-3 { grid-column: span 3; }
.sp-4 { grid-column: span 4; }
.sp-5 { grid-column: span 5; }
.sp-6 { grid-column: span 6; }
.sp-8 { grid-column: span 8; }
.st-2 { grid-column-start: 2; }
.st-3 { grid-column-start: 3; }
.st-4 { grid-column-start: 4; }
.st-5 { grid-column-start: 5; }

/* ------------------------------------------------------------- sections -- */
.vkw-sec { padding-block: var(--sec); }
.vkw-sec--tight { padding-block: clamp(34px, 4.5vw, 58px); }
.vkw-sec--tint { background: var(--surface-2); }
.vkw-sec--dots {
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.2px);
  background-size: 20px 20px;
}
.vkw-sec--ink { background: var(--foot-bg); color: var(--foot-fg); }
.vkw-sec--ink .vkw-eyebrow { color: var(--foot-accent); }
.vkw-sec--ink .vkw-lede,
.vkw-sec--ink .vkw-muted { color: var(--foot-mut); }
.vkw-sec--ink .vkw-num { color: transparent; -webkit-text-stroke-color: var(--foot-line); }

.vkw-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 30px);
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin-bottom: clamp(26px, 4vw, 46px);
}
.vkw-sec--ink .vkw-head { border-top-color: var(--foot-line); }
.vkw-head h2 { margin-bottom: 0.4em; max-width: 24ch; }
.vkw-head p { margin: 0; color: var(--ink-2); max-width: 64ch; }
.vkw-sec--ink .vkw-head p { color: var(--foot-mut); }

/* 8-point star divider */
.vkw-pattern { display: block; width: 100%; height: 26px; color: var(--line); }

/* -------------------------------------------------------------- buttons -- */
.vkw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 0; /* btn_shape: sharp */
  font: inherit;
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.vkw-btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.vkw-btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.vkw-btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vkw-btn--ink:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.vkw-btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.vkw-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.vkw-sec--ink .vkw-btn--ghost { color: var(--foot-fg); }
.vkw-sec--ink .vkw-btn--ghost:hover { background: var(--foot-fg); color: var(--foot-bg); }
.vkw-btn--block { width: 100%; }
.vkw-btn--lg { min-height: 58px; padding-inline: 32px; font-size: 1.03rem; }
.vkw-btn:hover { transform: perspective(700px) rotateX(2deg) translateY(-2px); }
[dir="rtl"] .vkw-btn .vkw-ico { transform: scaleX(-1); }

.vkw-icobtn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.2s var(--ease);
}
.vkw-icobtn:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.vkw-icobtn__moon { display: none; }
[data-theme="dark"] .vkw-icobtn__sun { display: none; }
[data-theme="dark"] .vkw-icobtn__moon { display: inline-grid; }

.vkw-langbtn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 42px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.vkw-langbtn:hover { border-color: var(--brand); color: var(--brand); }
html[lang="en"] .vkw-langbtn { font-family: var(--f-serif); font-size: 0.95rem; }

/* ------------------------------------------------------------- masthead -- */
.vkw-mast { background: var(--paper); }
.vkw-mast__in {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 24px);
  padding-block: 18px;
}
.vkw-mast__rule { height: 1px; background: var(--line); }
.vkw-mast__line {
  flex: 1 1 auto;
  margin: 0;
  padding-inline-start: clamp(12px, 1.8vw, 22px);
  border-inline-start: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
}
html[lang="ar"] .vkw-mast__line { font-family: var(--f-serif); letter-spacing: 0; text-transform: none; font-size: 0.85rem; }

.vkw-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.vkw-mark { color: var(--brand); flex: none; }
.vkw-brand__txt { display: grid; }
.vkw-brand__word {
  font-family: var(--f-serif);
  font-size: 1.24rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.vkw-brand__word em { font-style: italic; color: var(--brand); }
.vkw-brand__sub {
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.vkw-nav { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); }
.vkw-nav a {
  position: relative;
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  padding-block: 4px;
}
.vkw-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform 0.22s var(--ease);
}
.vkw-nav a:hover::after,
.vkw-nav a[aria-current="page"]::after { transform: scaleX(1); }

.vkw-tools { display: flex; align-items: center; gap: 9px; margin-inline-start: auto; }
.vkw-burger { display: none; }

/* --------------------------------------------------------------- drawer -- */
.vkw-drawer {
  position: fixed;
  inset: 0;
  z-index: 95;
  overflow: hidden; /* clips the off-canvas panel so it cannot widen the page */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.26s var(--ease), visibility 0.26s var(--ease);
}
.vkw-drawer[aria-hidden="false"] { visibility: visible; opacity: 1; }
.vkw-drawer__bd { position: absolute; inset: 0; background: rgba(16, 10, 7, 0.55); }
.vkw-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(370px, 89vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--paper);
  border-inline-start: 1px solid var(--line);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
}
[dir="rtl"] .vkw-drawer__panel { transform: translateX(-100%); }
.vkw-drawer[aria-hidden="false"] .vkw-drawer__panel { transform: translateX(0); }
.vkw-drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vkw-drawer__nav { display: grid; }
.vkw-drawer__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-weight: 500;
}
.vkw-drawer__nav a .vkw-ico { color: var(--ink-2); transition: transform 0.2s var(--ease); }
[dir="rtl"] .vkw-drawer__nav a .vkw-ico { transform: scaleX(-1); }
.vkw-drawer__nav a:hover { color: var(--brand); }
.vkw-drawer__nav a:hover .vkw-ico { color: var(--brand); transform: translateX(3px); }
[dir="rtl"] .vkw-drawer__nav a:hover .vkw-ico { transform: scaleX(-1) translateX(3px); }
.vkw-drawer__nav a[aria-current="page"] { color: var(--brand); }
.vkw-drawer__foot { margin-top: auto; padding-top: 18px; display: grid; gap: 12px; }
.vkw-drawer__row { display: flex; align-items: center; gap: 10px; }
.vkw-drawer__note { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.vkw-drawer__note a { text-decoration: none; font-family: var(--f-mono); }

/* ----------------------------------------------------------------- hero -- */
.vkw-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(540px, 76vh, 760px);
  overflow: hidden;
  color: #fdf8f5;
  background: linear-gradient(150deg, #451208 0%, #7c1a06 48%, #24120c 100%);
}
.vkw-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.vkw-hero__img { width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.vkw-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(14, 8, 6, 0.94) 6%, rgba(14, 8, 6, 0.74) 46%, rgba(14, 8, 6, 0.42) 100%);
}
/* motion loop: slow drifting 8-point star field + a tap pulse (stands in for a video loop) */
.vkw-hero__loop {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.17' stroke-width='1.1'%3E%3Crect x='26' y='26' width='44' height='44' rx='3'/%3E%3Crect x='26' y='26' width='44' height='44' rx='3' transform='rotate(45 48 48)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
  animation: vkw-drift 34s linear infinite;
}
@keyframes vkw-drift {
  from { background-position: 0 0; }
  to { background-position: 192px -96px; }
}
.vkw-hero__pulse {
  position: absolute;
  z-index: -1;
  inset-inline-end: 8%;
  top: 24%;
  width: 190px;
  height: 190px;
}
.vkw-hero__pulse i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  animation: vkw-pulse 4.2s var(--ease) infinite;
}
.vkw-hero__pulse i:nth-child(2) { animation-delay: 1.4s; }
.vkw-hero__pulse i:nth-child(3) { animation-delay: 2.8s; }
@keyframes vkw-pulse {
  0% { transform: scale(0.34); opacity: 0; }
  18% { opacity: 0.8; }
  100% { transform: scale(1); opacity: 0; }
}

.vkw-hero__in { padding-block: clamp(46px, 7vw, 86px); }
.vkw-hero__in .vkw-eyebrow { color: #ffb8a3; }
.vkw-hero h1 { max-width: 17ch; margin-bottom: 0.44em; }
html[lang="ar"] .vkw-hero h1 { max-width: 20ch; }
.vkw-hero__lede { font-size: clamp(1.03rem, 1.6vw, 1.18rem); color: rgba(253, 248, 245, 0.88); max-width: 58ch; }
.vkw-hero__row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.vkw-hero .vkw-btn--ghost { color: #fdf8f5; }
.vkw-hero .vkw-btn--ghost:hover { background: #fdf8f5; color: #24120c; }

.vkw-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding: 0; list-style: none; }
.vkw-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(253, 248, 245, 0.34);
  border-radius: 999px;
  font-size: 0.85rem;
  color: rgba(253, 248, 245, 0.92);
}
.vkw-chip .vkw-ico { color: #ffb8a3; }

/* --------------------------------------------------------------- cards -- */
/* card_style: sticker — rounded xl, thin outline, offset register mark, no shadow */
.vkw-card {
  position: relative;
  padding: clamp(20px, 2.3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform 0.28s var(--ease), border-color 0.28s;
}
.vkw-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--brand);
  border-radius: var(--r);
  opacity: 0.28;
  transform: translate(6px, 6px);
  transition: transform 0.28s var(--ease), opacity 0.28s;
  pointer-events: none;
}
[dir="rtl"] .vkw-card::before { transform: translate(-6px, 6px); }
.vkw-card h3 { margin-bottom: 0.45em; }
.vkw-card p:last-child { margin-bottom: 0; }
.vkw-card__tab {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 11px;
  background: var(--brand-tint);
  color: var(--brand-deep);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[lang="ar"] .vkw-card__tab { font-family: var(--f-serif); letter-spacing: 0; text-transform: none; font-size: 0.82rem; }

/* hover_effects: tilt_3d */
.vkw-tilt:hover { transform: perspective(900px) rotateX(2.2deg) rotateY(-2.4deg) translateY(-4px); border-color: var(--brand); }
.vkw-tilt:hover::before { transform: translate(11px, 11px); opacity: 0.5; }
[dir="rtl"] .vkw-tilt:hover { transform: perspective(900px) rotateX(2.2deg) rotateY(2.4deg) translateY(-4px); }
[dir="rtl"] .vkw-tilt:hover::before { transform: translate(-11px, 11px); opacity: 0.5; }

.vkw-sec--ink .vkw-card { background: rgba(255, 255, 255, 0.04); border-color: var(--foot-line); }
.vkw-sec--ink .vkw-card::before { border-color: var(--foot-accent); }
.vkw-sec--ink .vkw-card p { color: var(--foot-mut); }
.vkw-sec--ink .vkw-card__tab { background: rgba(255, 122, 88, 0.16); color: var(--foot-accent); }

/* ---------------------------------------------------------------- steps -- */
.vkw-steps { counter-reset: vkw 0; display: grid; gap: clamp(16px, 2.4vw, 26px); margin: 0; padding: 0; list-style: none; }
.vkw-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  counter-increment: vkw;
}
.vkw-step::before {
  content: counter(vkw, decimal-leading-zero);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 62px);
  line-height: 0.82;
  color: var(--brand-tint);
  -webkit-text-stroke: 1.2px var(--brand);
}
.vkw-step h3 { margin-bottom: 0.35em; }
.vkw-step p { margin: 0; color: var(--ink-2); max-width: 56ch; }

/* ------------------------------------------------------------- pull box -- */
.vkw-pull {
  padding: clamp(22px, 3vw, 38px);
  border-inline-start: 3px solid var(--brand);
  background: var(--surface);
  border-radius: 0 var(--r) var(--r) 0;
  font-family: var(--f-serif);
  font-size: clamp(1.14rem, 2vw, 1.46rem);
  line-height: 1.45;
}
[dir="rtl"] .vkw-pull { border-radius: var(--r) 0 0 var(--r); }
.vkw-pull p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- key/value -- */
.vkw-kv { margin: 0; display: grid; gap: 0; }
.vkw-kv > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 14px;
  padding-block: 15px;
  border-bottom: 1px solid var(--line);
}
.vkw-kv dt { font-weight: 600; }
.vkw-kv dd { margin: 0; color: var(--ink-2); }
.vkw-sec--ink .vkw-kv > div { border-bottom-color: var(--foot-line); }
.vkw-sec--ink .vkw-kv dd { color: var(--foot-mut); }

/* ---------------------------------------------------------------- facts -- */
.vkw-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vkw-fact { padding: clamp(18px, 2.2vw, 26px); background: var(--surface); }
.vkw-fact b { display: block; font-family: var(--f-mono); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1; color: var(--brand); }
.vkw-fact span { display: block; margin-top: 6px; font-size: 0.9rem; color: var(--ink-2); }

/* ------------------------------------------------------------ amount ui -- */
.vkw-amts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.vkw-amt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 0.97rem;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}
.vkw-amt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.vkw-amt:hover { border-color: var(--brand); }
.vkw-amt.is-on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.vkw-amt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------------------------------------------------------------- forms -- */
.vkw-form { display: grid; gap: 4px; }
.vkw-field { display: grid; gap: 7px; margin-bottom: 18px; }
.vkw-field > label,
.vkw-legend { font-weight: 600; font-size: 0.94rem; }
.vkw-fs { margin: 0 0 18px; padding: 0; border: 0; }
.vkw-hint { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.vkw-err { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--brand); display: none; }
.vkw-field.is-bad .vkw-err,
.vkw-fs.is-bad .vkw-err { display: block; }

.vkw-form input[type="text"],
.vkw-form input[type="email"],
.vkw-form input[type="tel"],
.vkw-form input[type="number"],
.vkw-form select,
.vkw-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.vkw-form textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.vkw-form select { appearance: none; background-image: none; }
.vkw-field.is-bad input,
.vkw-field.is-bad textarea,
.vkw-fs.is-bad .vkw-amt { border-color: var(--brand); }
.vkw-form input::placeholder,
.vkw-form textarea::placeholder { color: var(--ink-2); opacity: 0.75; }

.vkw-check { display: flex; align-items: flex-start; gap: 11px; font-size: 0.93rem; }
.vkw-check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--brand); }
.vkw-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }

.vkw-sum { margin-top: 6px; padding: 18px 20px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--surface-2); }
.vkw-sum dl { margin: 0; display: grid; gap: 9px; }
.vkw-sum dl > div { display: flex; justify-content: space-between; gap: 14px; font-size: 0.95rem; }
.vkw-sum dd { margin: 0; font-family: var(--f-mono); }
.vkw-sum .vkw-sum__total { padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-size: 1.05rem; }
.vkw-sum p { margin: 12px 0 0; font-size: 0.84rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- modal -- */
.vkw-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.24s var(--ease), visibility 0.24s var(--ease);
}
.vkw-modal[aria-hidden="false"] { visibility: visible; opacity: 1; }
.vkw-modal__bd { position: absolute; inset: 0; background: rgba(16, 10, 7, 0.6); }
.vkw-modal__box {
  position: relative;
  width: min(540px, 100%);
  padding: clamp(26px, 4vw, 38px);
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  text-align: start;
}
.vkw-modal__mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
}
.vkw-modal__box h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.vkw-modal__box p { color: var(--ink-2); }
.vkw-modal__small { font-size: 0.87rem; }
.vkw-modal__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* --------------------------------------------------------- bar / wa / cookie */
.vkw-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  grid-template-columns: 1fr 1fr 1.25fr;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.vkw-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 60px;
  padding: 8px;
  border: 0;
  border-inline-end: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.vkw-bar__btn:last-child { border-inline-end: 0; }
.vkw-bar__btn--on { background: var(--brand); color: var(--on-brand); }

.vkw-wa {
  position: fixed;
  inset-inline-end: 20px;
  bottom: 24px;
  z-index: 71;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  transition: transform 0.22s var(--ease), background-color 0.2s;
}
.vkw-wa:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); transform: translateY(-3px); }

.vkw-cookie {
  position: fixed;
  inset-inline-start: 20px;
  bottom: 24px;
  z-index: 72;
  width: min(430px, calc(100vw - 40px));
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  visibility: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.vkw-cookie.is-shown { visibility: visible; opacity: 1; transform: none; }
.vkw-cookie p { margin: 0 0 14px; font-size: 0.88rem; color: var(--ink-2); }
.vkw-cookie a { color: var(--brand); }

/* --------------------------------------------------------------- footer -- */
.vkw-foot { background: var(--foot-bg); color: var(--foot-fg); padding-block: clamp(44px, 6vw, 76px) 34px; }
.vkw-foot a { text-decoration: none; }
.vkw-foot a:hover { color: var(--foot-accent); }
.vkw-foot__cols {
  display: grid;
  grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 34px);
}
.vkw-foot__brand p { margin: 14px 0; font-size: 0.9rem; color: var(--foot-mut); max-width: 34ch; }
.vkw-foot__brand .vkw-brand__word { color: var(--foot-fg); }
.vkw-foot__brand .vkw-brand__word em { color: var(--foot-accent); }
.vkw-foot__col h2 { font-size: 0.74rem; font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--foot-mut); margin-bottom: 14px; }
html[lang="ar"] .vkw-foot__col h2 { font-family: var(--f-serif); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.vkw-foot__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 0.92rem; }
.vkw-foot__col address { font-size: 0.9rem; color: var(--foot-mut); line-height: 1.75; }
.vkw-foot__reach { display: grid; gap: 8px; margin-top: 12px; font-size: 0.9rem; }
.vkw-foot__hours { color: var(--foot-mut); }
.vkw-foot__small { margin-top: 12px; font-size: 0.82rem; color: var(--foot-mut); }

.vkw-wabtn { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--foot-line); border-radius: 999px; font-size: 0.88rem; text-decoration: none; }
.vkw-wabtn:hover { border-color: var(--foot-accent); }
.vkw-paymarks { display: flex; gap: 8px; margin-top: 16px; }
.vkw-paymarks span {
  padding: 5px 12px;
  border: 1px solid var(--foot-line);
  border-radius: 6px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--foot-mut);
}

.vkw-foot__disclaim {
  display: flex;
  gap: 11px;
  margin: clamp(30px, 4vw, 48px) 0 0;
  padding: 16px 18px;
  border: 1px solid var(--foot-line);
  border-radius: var(--r);
  font-size: 0.87rem;
  color: var(--foot-mut);
}
.vkw-foot__disclaim .vkw-ico { color: var(--foot-accent); margin-top: 3px; }
.vkw-foot__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 26px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--foot-line);
  font-size: 0.82rem;
  color: var(--foot-mut);
}
.vkw-foot__bottom p { margin: 0; }

/* ---------------------------------------------------------------- prose -- */
.vkw-prose { max-width: 76ch; }
.vkw-prose h2 { margin-top: 1.8em; padding-top: 0.7em; border-top: 1px solid var(--line); font-size: clamp(1.3rem, 2.2vw, 1.7rem); }
.vkw-prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.vkw-prose h3 { margin-top: 1.5em; }
.vkw-prose ul, .vkw-prose ol { color: var(--ink-2); }
.vkw-prose li { margin-bottom: 0.45em; }
.vkw-prose p { color: var(--ink-2); }
.vkw-prose strong { color: var(--ink); }
.vkw-prose a { color: var(--brand); }
.vkw-prose table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.94rem; }
.vkw-prose th,
.vkw-prose td { padding: 11px 14px; text-align: start; border: 1px solid var(--line); vertical-align: top; }
.vkw-prose th { background: var(--surface-2); font-weight: 600; }
.vkw-prose td { color: var(--ink-2); }
.vkw-prose code { font-family: var(--f-mono); font-size: 0.9em; padding: 2px 6px; background: var(--surface-2); border-radius: 5px; }
.vkw-prose .vkw-tablewrap { overflow-x: auto; margin: 1.4em 0; }
.vkw-prose .vkw-tablewrap:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.vkw-pagehead { padding-block: clamp(38px, 5.5vw, 70px) clamp(24px, 3vw, 38px); background: var(--surface-2); }
.vkw-pagehead h1 { max-width: 20ch; margin-bottom: 0.3em; }
.vkw-pagehead p { margin: 0; color: var(--ink-2); max-width: 62ch; }
.vkw-crumb { margin: 0 0 14px; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.vkw-crumb a { text-decoration: none; }
.vkw-crumb a:hover { color: var(--brand); }
html[lang="ar"] .vkw-crumb { font-family: var(--f-serif); letter-spacing: 0; text-transform: none; font-size: 0.88rem; }

/* ------------------------------------------------------------- contacts -- */
.vkw-contact { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vkw-contact li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: start; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.vkw-contact .vkw-ico { color: var(--brand); margin-top: 4px; }
.vkw-contact b { display: block; font-size: 0.83rem; font-weight: 600; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
html[lang="ar"] .vkw-contact b { text-transform: none; letter-spacing: 0; }
.vkw-contact a { font-family: var(--f-mono); text-decoration: none; }
.vkw-contact a:hover { color: var(--brand); }

/* addresses are one long token — let them break rather than push the card */
a[href^="mailto:"],
.vkw-foot__reach a,
.vkw-prose a { overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ 404 -- */
/* the explicit 1fr track is what keeps centred items from sizing to max-content */
.vkw-404 { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: clamp(60px, 10vw, 130px); }
.vkw-404 > * { max-width: 100%; }
.vkw-404 svg { width: min(300px, 70vw); height: auto; margin-bottom: 26px; }

/* --------------------------------------------------------------- figure -- */
.vkw-figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.vkw-figure img { width: 100%; }
.vkw-figure figcaption { padding: 12px 18px; font-size: 0.84rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.vkw-figure.is-empty::before {
  content: "";
  display: block;
  aspect-ratio: 1 / 1;
  background-color: var(--brand-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23dc2509' stroke-opacity='0.3' stroke-width='1.1'%3E%3Crect x='19' y='19' width='34' height='34' rx='3'/%3E%3Crect x='19' y='19' width='34' height='34' rx='3' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}

/* ----------------------------------------------------------- breakpoints -- */
@media (max-width: 1080px) {
  .vkw-nav { display: none; }
  .vkw-burger { display: inline-grid; }
  .vkw-foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vkw-foot__brand { grid-column: span 3; }
}

@media (max-width: 980px) {
  .sp-5, .sp-6 { grid-column: span 8; }
  .sp-3, .sp-4 { grid-column: span 4; }
  .st-2, .st-3, .st-4, .st-5 { grid-column-start: auto; }
  .vkw-bar { display: grid; }
  body { padding-bottom: 60px; }
  .vkw-wa { display: none; }
  .vkw-cookie { inset-inline: 12px; bottom: 72px; width: auto; }
  .vkw-hero__pulse { display: none; }
}

@media (max-width: 760px) {
  .vkw-mast__line { display: none; }
  .vkw-mast__cta { display: none; }
  .vkw-brand__sub { display: none; }
  /* language and theme move into the drawer; the masthead keeps brand + burger */
  .vkw-mast__in .vkw-langbtn,
  .vkw-mast__in [data-theme-toggle] { display: none; }
  .vkw-g8 { grid-template-columns: 1fr; }
  .sp-2, .sp-3, .sp-4, .sp-5, .sp-6, .sp-8 { grid-column: span 1; }
  .vkw-head { grid-template-columns: 1fr; }
  .vkw-kv > div { grid-template-columns: 1fr; gap: 4px; }
  .vkw-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vkw-foot__brand { grid-column: span 2; }
  .vkw-2col { grid-template-columns: 1fr; }
  .vkw-step { grid-template-columns: 1fr; gap: 6px; }
}

@media (max-width: 480px) {
  /* the wide gutters are what push long labels past a 320px screen */
  .vkw-btn--lg { padding-inline: 20px; }
}

@media (max-width: 400px) {
  .vkw-amts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vkw-bar__btn { font-size: 0.8rem; gap: 5px; }
  .vkw-foot__cols { grid-template-columns: 1fr; }
  .vkw-foot__brand { grid-column: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .vkw-btn:hover, .vkw-tilt:hover { transform: none; }
}