/* =============================================================
   Dorosh & Partners — Premium editorial-legal design system
   Palette: Deep Teal #092F31 · Legal Gold #C89A4B · Warm Ivory #F5F3EE
   Type:    Onest (display, grotesque) + Manrope (body/UI) — self-hosted, see fonts.css
   ============================================================= */

:root {
  /* --- Brand core --- */
  --bg: #f5f3ee;
  --panel: #ffffff;
  --ink: #172022;
  --muted: #5c686a;
  --teal: #092f31;
  --teal-2: #0e4345;
  --teal-3: #0b393b;
  --gold: #c89a4b;
  --gold-2: #e2c06d;
  --gold-deep: #8c651e;
  --sand: #ebe8df;
  --white: #ffffff;
  --error: #d64545;
  --error-soft: rgba(214, 69, 69, 0.12);

  /* --- Tonal helpers --- */
  --ink-soft: rgba(23, 32, 34, 0.66);
  --line: rgba(23, 32, 34, 0.12);
  --line-strong: rgba(23, 32, 34, 0.2);
  --line-gold: rgba(200, 154, 75, 0.34);
  --on-dark: rgba(255, 255, 255, 0.82);
  --on-dark-soft: rgba(255, 255, 255, 0.6);
  --on-dark-line: rgba(255, 255, 255, 0.14);

  /* --- Gradients --- */
  --grad-gold: linear-gradient(135deg, var(--gold-2), var(--gold) 55%, #b6852f);
  --grad-teal: linear-gradient(160deg, #0d4143, var(--teal) 70%);

  /* --- Shadows: layered, soft, modern --- */
  --shadow-sm: 0 1px 2px rgba(9, 47, 49, 0.04), 0 6px 18px rgba(9, 47, 49, 0.06);
  --shadow-md: 0 2px 6px rgba(9, 47, 49, 0.06), 0 18px 40px rgba(9, 47, 49, 0.09);
  --shadow-lg: 0 4px 12px rgba(9, 47, 49, 0.08), 0 32px 72px rgba(9, 47, 49, 0.16);
  --shadow-gold: 0 2px 8px rgba(200, 154, 75, 0.18), 0 18px 40px rgba(200, 154, 75, 0.24);

  /* --- Geometry --- */
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --max: 1200px;

  /* --- Fluid rhythm (non-uniform) --- */
  --space-section: clamp(72px, 4vw + 40px, 132px);
  --space-gap: clamp(20px, 2vw, 30px);

  /* --- Motion --- */
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.6s;

  /* --- Type --- */
  --font-display: "Onest", "Manrope", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-sans: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* --- 8pt spacing scale --- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
}

/* ============================ Base ============================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.62;
  font-size: 17px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
::selection { background: rgba(200, 154, 75, 0.28); color: var(--teal); }

/* Grain / atmosphere overlay — very subtle, GPU-cheap */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

.container { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.narrow { max-width: 820px; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 60;
  background: var(--gold);
  color: #16120a;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

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

/* ======================= Typography ========================== */
h1, h2, h3, p { margin-top: 0; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(44px, 5.6vw, 74px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 21px;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 12px;
  font-weight: 800;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.section-dark .eyebrow { color: var(--gold-2); }
.section-dark .eyebrow::before { background: linear-gradient(90deg, var(--gold-2), transparent); }
/* AA contrast on sand background (~4.3:1 → darken to ~5.2:1) */
.section-muted .eyebrow { color: #7a561a; }

/* ======================= Layout blocks ======================= */
.section { position: relative; z-index: 2; padding: var(--space-section) 0; }
.section-muted { background: var(--sand); }

.section-dark {
  position: relative;
  z-index: 2;
  color: var(--white);
  background-color: var(--teal);
  background-image:
    radial-gradient(120% 80% at 85% -10%, rgba(200, 154, 75, 0.16), transparent 55%),
    radial-gradient(100% 90% at 0% 110%, rgba(14, 67, 69, 0.9), transparent 60%),
    var(--grad-teal);
}
.section-dark h1, .section-dark h2, .section-dark h3 { color: var(--white); }
.section-dark p { color: var(--on-dark); }

.section-head { max-width: 760px; margin-bottom: clamp(38px, 4vw, 60px); }
.section-head p { color: var(--muted); font-size: 19px; margin: 0; }
.section-dark .section-head p { color: var(--on-dark); }

/* ========================= Header ============================ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  transition: background 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(245, 243, 238, 0.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line-gold);
  box-shadow: 0 12px 40px rgba(9, 47, 49, 0.1);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 78px;
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand .logo { transition: opacity 0.3s; }
.logo-light { display: block; }
.logo-dark { display: none; }
.site-header.is-scrolled .logo-light,
.site-header.is-solid .logo-light { display: none; }
.site-header.is-scrolled .logo-dark,
.site-header.is-solid .logo-dark { display: block; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 15px;
}
.site-header.is-scrolled .main-nav,
.site-header.is-solid .main-nav { color: #1c3a3c; }
.main-nav a { position: relative; padding: 4px 0; transition: color 0.2s; }
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease-lux);
}
.main-nav a:hover::after,
.main-nav a.is-active::after { transform: scaleX(1); }
.main-nav a.is-active { color: var(--gold-2); }
.site-header.is-scrolled .main-nav a.is-active,
.site-header.is-solid .main-nav a.is-active { color: var(--gold-deep); }

.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.2s;
}
.header-cta:hover { transform: translateY(-1px); border-color: var(--gold-2); }
.site-header.is-scrolled .header-cta,
.site-header.is-solid .header-cta {
  color: var(--teal);
  border-color: var(--line-strong);
}
.site-header.is-scrolled .header-cta:hover,
.site-header.is-solid .header-cta:hover { border-color: var(--gold); background: rgba(200, 154, 75, 0.08); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  padding: 12px;
}
.site-header.is-scrolled .nav-toggle,
.site-header.is-solid .nav-toggle { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.5); }
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  background: var(--white);
  border-radius: 999px;
  transition: background 0.3s, transform 0.3s var(--ease-lux), opacity 0.2s;
}
.site-header.is-scrolled .nav-toggle span,
.site-header.is-solid .nav-toggle span { background: var(--teal); }
/* When the drawer is open the toggle sits over the light drawer panel — force it
   dark so the X is visible even at the top of the page (dark theme keeps it light). */
body.nav-open .nav-toggle { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.5); }
body.nav-open .nav-toggle span { background: var(--teal); }
:root[data-theme="dark"] body.nav-open .nav-toggle { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] body.nav-open .nav-toggle span { background: var(--white); }
.nav-backdrop { display: none; }
.nav-drawer-head { display: none; }

/* ========================== Buttons ========================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.28s var(--ease-lux), box-shadow 0.28s var(--ease-lux), background 0.25s, border-color 0.25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); }
.btn-primary {
  background: var(--grad-gold);
  color: #201a0d;
  box-shadow: var(--shadow-gold);
}
.btn-primary:hover { box-shadow: 0 26px 56px rgba(200, 154, 75, 0.36); }
.btn-outline {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
}
.btn-outline:hover { border-color: var(--gold-2); background: rgba(255, 255, 255, 0.1); }
.btn-ghost {
  border-color: var(--line-strong);
  color: var(--teal);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--gold); background: rgba(200, 154, 75, 0.07); }
.btn-full { width: 100%; }
.btn .arrow { transition: transform 0.28s var(--ease-lux); }
.btn:hover .arrow { transform: translateX(4px); }

/* Text link with animated gold underline */
.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
  font-weight: 700;
  position: relative;
}
.link-gold::after {
  content: "";
  position: absolute;
  left: 0; right: 18px; bottom: -3px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-lux);
}
.link-gold:hover { color: var(--gold-deep); }
.link-gold:hover::after { transform: scaleX(1); }
.link-gold svg { transition: transform 0.3s var(--ease-lux); }
.link-gold:hover svg { transform: translateX(3px); }

/* =========================== Hero ============================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 104px 0 60px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 60vw;
  height: 60vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, rgba(200, 154, 75, 0.14), transparent 62%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.hero-copy { position: relative; }
.hero h1 { max-width: 12ch; }
.hero h1 .accent {
  color: transparent;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
}
.lead {
  color: var(--on-dark);
  max-width: 54ch;
  font-size: clamp(16px, 1.2vw, 19px);
  margin-bottom: 28px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 640px;
  margin: clamp(22px, 3vw, 38px) 0 0;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.hero-stats div {
  padding: 16px 22px;
  border-right: 1px solid var(--on-dark-line);
}
.hero-stats div:last-child { border-right: 0; }
.hero-stats dt {
  font-family: var(--font-display);
  color: var(--gold-2);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 600;
  line-height: 1;
}
.hero-stats dd {
  margin: 10px 0 0;
  color: var(--on-dark-soft);
  font-size: 13.5px;
  line-height: 1.4;
}

/* Hero card — glass on teal */
.hero-card {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-gold);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(226, 192, 109, 0.6), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hero-card .crest {
  position: absolute;
  top: -26px; right: 28px;
  width: 56px; height: 56px;
}
.card-label {
  display: inline-flex;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(200, 154, 75, 0.14);
  color: var(--gold-deep);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
}
.hero-card h2, .hero-card h3 { color: var(--teal); }
.hero-card h2 { font-size: clamp(24px, 2vw, 30px); margin-bottom: 12px; }
.hero-card p { color: var(--muted); font-size: 15.5px; }
.check-list { list-style: none; padding: 0; margin: 22px 0 28px; }
.check-list li {
  position: relative;
  padding-left: 34px;
  margin: 14px 0;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(200, 154, 75, 0.14);
}
.check-list li::after {
  content: "";
  position: absolute;
  left: 7px; top: 8px;
  width: 8px; height: 5px;
  border-left: 2px solid var(--gold-deep);
  border-bottom: 2px solid var(--gold-deep);
  transform: rotate(-45deg);
}

/* ======================= Trust strip ========================= */
.trust-strip {
  position: relative;
  z-index: 3;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}
.strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.rating .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rating .stars svg { width: 17px; height: 17px; }
.rating b { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--teal); }
.rating span { color: var(--muted); font-size: 13.5px; }
.strip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.strip-tags span { position: relative; cursor: pointer; transition: color 0.2s; }
.strip-tags span:hover { color: var(--gold-deep); }
.strip-tags span:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
:root[data-theme="dark"] .strip-tags span:hover { color: var(--gold-2); }
.strip-tags span + span::before {
  content: "";
  position: absolute;
  left: -12px; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
}

/* ======================== Services =========================== */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
}
/* The lawyer+advocate section has 4 cards: 4-up so the last one does not
   hang alone on a second row. Narrower breakpoints fall back to the
   .service-grid rules below (2-up, then 1-up). */
.duo-grid { grid-template-columns: repeat(4, 1fr); }
.duo-grid .service-card { min-height: 280px; padding: 30px 26px; }
.service-card {
  position: relative;
  padding: 34px 30px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), border-color 0.4s;
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background: linear-gradient(140deg, var(--gold-2), transparent 45%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::after { opacity: 1; }
.service-card.is-highlight { border-color: var(--gold); animation: cardPulse 1.8s var(--ease-lux); }
.service-card.is-highlight::after { opacity: 1; }
@keyframes cardPulse {
  0% { box-shadow: 0 0 0 0 rgba(200, 154, 75, 0.5), var(--shadow-md); }
  15% { box-shadow: 0 0 0 5px rgba(200, 154, 75, 0.5), var(--shadow-lg); }
  100% { box-shadow: 0 0 0 0 rgba(200, 154, 75, 0), var(--shadow-sm); }
}
.service-num {
  position: absolute;
  top: 22px; right: 26px;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(200, 154, 75, 0.2);
  transition: color 0.4s;
}
.service-card:hover .service-num { color: rgba(200, 154, 75, 0.3); }
.service-icon {
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: rgba(9, 47, 49, 0.05);
  color: var(--gold-deep);
  margin-bottom: 22px;
  transition: background 0.4s, transform 0.4s var(--ease-lux);
}
.service-icon svg { width: 30px; height: 30px; }
.service-card:hover .service-icon { background: rgba(200, 154, 75, 0.14); transform: translateY(-2px); }
.service-card h3 { color: var(--teal); padding-right: 40px; }
.service-card p { color: var(--muted); font-size: 15.5px; margin-bottom: 18px; }
.service-card .link-gold { margin-top: auto; }

/* ========================== About ============================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.7fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.about-panel p { color: var(--muted); font-size: 18px; }
.about-panel p + p { margin-top: 18px; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about-tags span {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-gold);
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: 700;
  background: rgba(200, 154, 75, 0.06);
}
.quote-card {
  position: sticky;
  top: 104px;
  padding: 40px 36px;
  border-radius: var(--radius-lg);
  background: var(--teal);
  background-image: radial-gradient(120% 100% at 100% 0%, rgba(200, 154, 75, 0.16), transparent 55%);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.quote-card .qmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 96px;
  line-height: 0.6;
  color: var(--gold-2);
  opacity: 0.7;
  height: 40px;
  display: block;
}
.quote-card blockquote {
  margin: 20px 0 26px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 1.8vw, 29px);
  line-height: 1.32;
  letter-spacing: -0.025em;
  color: #fff;
}
.quote-card .author { display: flex; align-items: center; gap: 14px; }
.quote-card .author .avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--grad-gold);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--teal);
  flex: 0 0 auto;
}
.quote-card cite { font-style: normal; }
.quote-card cite b { display: block; color: #fff; font-weight: 700; font-size: 16px; }
.quote-card cite span { color: var(--gold-2); font-size: 13.5px; }

/* ==================== Cases (bento) ========================== */
.case-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-gap);
}
.case-card {
  padding: 32px 30px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux);
  display: flex;
  flex-direction: column;
}
.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.case-card:nth-child(1) { grid-column: span 3; }
.case-card:nth-child(2) { grid-column: span 3; }
.case-card:nth-child(3) {
  grid-column: span 6;
  background: var(--teal);
  color: #fff;
  background-image: radial-gradient(100% 120% at 100% 0%, rgba(200, 154, 75, 0.14), transparent 55%);
}
.case-card:nth-child(3) h3 { color: #fff; }
.case-card:nth-child(3) p { color: var(--on-dark); }
.case-card .case-mark {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(200, 154, 75, 0.14);
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.case-card:nth-child(3) .case-mark { background: rgba(255, 255, 255, 0.1); color: var(--gold-2); }
.case-card h3 { color: var(--teal); }
.case-card p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ========================= Process =========================== */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 27px; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}
.steps li { padding: 0 18px; position: relative; }
.steps li span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--teal);
  border: 1px solid var(--gold);
  color: var(--gold-2);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 auto 24px;
}
/* The process list was written for the dark band on the home page and hardcoded
   white text. The shop reuses it inside .section-muted, where white on a light
   background is invisible — the four ordering steps read as blank space. The
   component now takes the page's own text tokens and turns white only where the
   surface underneath it is actually dark. */
.steps li h3 { color: var(--ink); text-align: center; }
.steps li p { color: var(--muted); font-size: 14.5px; text-align: center; }
.section-dark .steps li h3 { color: #fff; }
.section-dark .steps li p { color: var(--on-dark-soft); }

/* ==================== Reviews (carousel) ==================== */
.reviews-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.reviews-head .section-head { margin-bottom: 0; }
.carousel-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}
.carousel-dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 32, 34, 0.16);
  cursor: pointer;
  transition: width 0.35s var(--ease-lux), background 0.3s;
}
.carousel-dot:hover { background: rgba(200, 154, 75, 0.55); }
.carousel-dot.is-active { width: 28px; background: var(--gold); }

.review-track {
  display: flex;
  gap: var(--space-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 18px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.review-track::-webkit-scrollbar { display: none; }
.review-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; }
.review-track > .review-card {
  flex: 0 0 clamp(278px, 30%, 380px);
  scroll-snap-align: start;
}

/* Continuous marquee mode (transform driven by JS requestAnimationFrame) */
.review-viewport { overflow: hidden; }
.review-track.is-marquee {
  width: max-content;
  max-width: none;
  overflow: visible;
  scroll-snap-type: none;
  cursor: default;
  will-change: transform;
}
/* Same max-content trap as the blog track above — see the note there. */
.review-track.is-marquee > .review-card {
  scroll-snap-align: none;
  flex: 0 0 clamp(278px, 82vw, 380px);
  min-width: 0;
  max-width: clamp(278px, 82vw, 380px);
}
.review-track.is-marquee > .review-card:hover { transform: none; }
.review-card {
  position: relative;
  padding: 32px 30px 30px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux);
  display: flex;
  flex-direction: column;
}
.review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.review-card .stars { display: inline-flex; gap: 2px; color: var(--gold); margin-bottom: 18px; }
.review-card .stars svg { width: 16px; height: 16px; }
.review-card p { color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin: 0 0 22px; }
.review-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-card .who .avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(9, 47, 49, 0.06);
  display: grid; place-items: center;
  font-weight: 800;
  color: var(--teal);
  flex: 0 0 auto;
}
.review-card .who strong { font-weight: 700; font-size: 15px; color: var(--ink); }
.review-card .who small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }

/* ==================== Consultation / form ==================== */
.consultation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.consultation-section code {
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(9, 47, 49, 0.08);
  color: var(--teal);
  font-size: 0.9em;
}
.contact-shortcuts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.contact-shortcuts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  color: var(--teal);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: 14px;
  transition: border-color 0.25s, transform 0.2s, background 0.25s;
}
.contact-shortcuts a:hover { border-color: var(--gold); transform: translateY(-2px); background: #fff; }

.contact-form {
  padding: clamp(26px, 3vw, 38px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.form-row { margin-bottom: 18px; }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label {
  display: block;
  color: #203639;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
input, textarea, select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: #fbfaf6;
  color: var(--ink);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235c686a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
textarea { resize: vertical; min-height: 120px; }
input:focus, textarea:focus, select:focus {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200, 154, 75, 0.16);
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-weight: 500;
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0 22px;
}
.consent input { width: auto; margin-top: 3px; accent-color: var(--gold-deep); }
.form-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

/* ========================= Contacts ========================== */
.contacts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.contact-card {
  padding: clamp(26px, 3vw, 36px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  font-style: normal;
}
.contact-card > div + div { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.contact-card span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 800;
  margin-bottom: 7px;
}
.contact-card a, .contact-card p { font-size: 19px; font-weight: 700; margin: 0; }
.contact-card a { color: var(--teal); transition: color 0.2s; }
.contact-card a:hover { color: var(--gold-deep); }
/* Teal is a dark colour — on the dark panel the phone/email/telegram links
   were practically invisible. Both states need a dark-theme override. */
:root[data-theme="dark"] .contact-card a { color: var(--ink); }
:root[data-theme="dark"] .contact-card a:hover { color: var(--gold-2); }

/* ========================== Footer =========================== */
.site-footer { position: relative; z-index: 2; padding: clamp(56px, 5vw, 80px) 0 28px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.95fr 0.95fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.footer-grid > div:first-child p { max-width: 32ch; margin-top: 18px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.footer-grid .footer-social a {
  width: 42px; height: 42px;
  margin: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--on-dark-line);
  color: var(--on-dark);
  transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.2s;
}
.footer-grid .footer-social a:hover { border-color: var(--gold-2); color: var(--gold-2); background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
.footer-social svg { width: 19px; height: 19px; }
.footer-grid .footer-contacts > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.footer-grid .footer-contacts > a > svg { width: 16px; height: 16px; color: var(--gold-2); flex: 0 0 auto; }
.footer-contacts .muted { color: var(--on-dark-soft); font-size: 13.5px; margin: 14px 0 2px; }
.footer-contacts .footer-social { margin-top: 16px; }
.footer-grid h2 {
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
  color: var(--gold-2);
  margin-bottom: 18px;
}
.footer-grid a { display: block; color: var(--on-dark); margin: 10px 0; transition: color 0.2s; width: fit-content; }
.footer-grid a:hover { color: var(--gold-2); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  border-top: 1px solid var(--on-dark-line);
  margin-top: clamp(38px, 4vw, 56px);
  padding-top: 24px;
  color: var(--on-dark-soft);
  font-size: 13px;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--on-dark-soft); }
.footer-bottom a:hover { color: var(--gold-2); }

/* ==================== Legal / thanks / 404 =================== */
.legal-page { padding: 150px 0 90px; position: relative; z-index: 2; }
.legal-page h1 { color: var(--teal); }
.legal-page h2 { font-size: 26px; margin-top: 38px; }
.legal-page p { color: var(--muted); font-size: 18px; }
.legal-page a { color: var(--gold-deep); font-weight: 700; }
.static-nav a { color: inherit; }

.thanks-page { min-height: 100vh; }
.thanks-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px; }
.thanks-card {
  position: relative;
  z-index: 2;
  width: min(680px, 100%);
  padding: clamp(36px, 5vw, 56px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--on-dark-line);
  background: rgba(255, 255, 255, 0.055);
  text-align: center;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
}
.thanks-card .crest { width: 64px; height: 64px; margin: 0 auto 28px; }
.thanks-card h1 { font-size: clamp(34px, 5vw, 58px); }
.thanks-card p { color: var(--on-dark); font-size: 18px; max-width: 46ch; margin-inline: auto; }
.center-actions { justify-content: center; }

/* ===================== Card spotlight ======================== */
.service-card::before,
.case-card::before,
.review-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 154, 75, 0.1), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s var(--ease-soft);
  pointer-events: none;
  z-index: 0;
}
.service-card:hover::before,
.case-card:hover::before,
.review-card:hover::before { opacity: 1; }
.service-card > *,
.case-card > *,
.review-card > * { position: relative; z-index: 1; }

/* ========================== FAQ ============================== */
.faq-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); width: 100%; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s var(--ease-soft), border-color 0.3s;
}
.faq-item[open] { border-color: var(--line-gold); box-shadow: var(--shadow-md); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 22px 26px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 17px;
  color: var(--teal);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { position: relative; width: 20px; height: 20px; flex: 0 0 auto; }
.faq-item summary .plus::before,
.faq-item summary .plus::after {
  content: "";
  position: absolute;
  background: var(--gold-deep);
  border-radius: 2px;
  transition: transform 0.32s var(--ease-lux), opacity 0.32s;
}
.faq-item summary .plus::before { left: 0; top: 9px; width: 20px; height: 2px; }
.faq-item summary .plus::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq-item[open] summary .plus::after { transform: rotate(90deg); opacity: 0; }
.faq-item .faq-body { padding: 0 26px 24px; color: var(--muted); font-size: 15.5px; }
.faq-item[open] .faq-body { animation: faqIn 0.35s var(--ease-lux); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ==================== Sticky mobile CTA ====================== */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 35;
  display: none;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(245, 243, 238, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-gold);
  box-shadow: 0 -8px 30px rgba(9, 47, 49, 0.12);
  transform: translateY(120%);
  transition: transform 0.4s var(--ease-lux);
}
.mobile-cta.is-visible { transform: translateY(0); }
/* Centre, do not stretch. A flex row defaults to `stretch`, so the round
   buttons grew to the height of the CTA and turned into tall capsules the
   moment its label wrapped to two lines. */
.mobile-cta { align-items: center; }
/* Sized for the row it is in, not for a full-width hero button: three circles
   leave it ~240px on a 440pt phone, and at the base 15px/26px the label needed
   more than that and wrapped. This is scoped to the bar rather than put behind
   a width breakpoint — the previous attempt used max-width: 430px, which a
   440pt iPhone does not match, so nothing applied on the device that had the
   problem. */
.mobile-cta .btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding-inline: 16px;
  font-size: 14px;
  letter-spacing: 0;
}
/* Three of these now sit beside the CTA — phone, Telegram, WhatsApp — so they
   are narrower than the single circle used to be. At 360px: 328px of usable
   row, less 3x46 and three 10px gaps, leaves 160px for the button, which is
   enough for the label to wrap to two lines inside its 50px minimum. */
.mobile-cta .call {
  flex: 0 0 auto;
  width: 46px; height: 46px; min-height: 0;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--teal);
  background: var(--panel);
}
.mobile-cta .call svg { width: 19px; height: 19px; }
@media (max-width: 400px) {
  .mobile-cta { gap: 8px; padding-inline: 12px; }
  .mobile-cta .call { width: 42px; height: 42px; }
  .mobile-cta .btn { font-size: 13px; padding-inline: 12px; }
}

/* =================== Floating-label fields =================== */
.field { position: relative; }
.field input,
.field textarea {
  padding-top: 24px;
  padding-bottom: 8px;
}
.field label {
  position: absolute;
  left: 16px;
  top: 16px;
  margin: 0;
  color: var(--muted);
  font-weight: 500;
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.18s var(--ease-lux), color 0.18s;
}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:focus ~ label,
.field textarea:not(:placeholder-shown) ~ label {
  transform: translateY(-10px) scale(0.78);
  color: var(--gold-deep);
}

/* =================== Invalid (empty required) fields =================== */
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--error);
  background: var(--error-soft);
}
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 4px var(--error-soft);
}
.field input.is-invalid ~ label,
.field textarea.is-invalid ~ label { color: var(--error); }
.consent.is-invalid { color: var(--error); }
.consent.is-invalid input { accent-color: var(--error); outline: 2px solid var(--error); outline-offset: 2px; }

/* =================== Submit loading state (POST in flight) =================== */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.contact-form.is-submitting { opacity: 0.92; }
.contact-form.is-submitting .field,
.contact-form.is-submitting select,
.contact-form.is-submitting .consent { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after { animation: btn-pulse 1s ease-in-out infinite; }
  @keyframes btn-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}

/* ========================== Modal ============================ */
.modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}
.modal::backdrop {
  background: rgba(9, 47, 49, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.modal[open] {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  animation: modalIn 0.35s var(--ease-lux);
}
.modal-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(26px, 4vw, 42px);
}
.modal-head { margin-bottom: 22px; }
.modal-head h2 { margin-bottom: 8px; font-size: clamp(26px, 3vw, 34px); }
.modal-sub { color: var(--muted); font-size: 15px; margin: 0; }
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--teal);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.2s;
}
.modal-close:hover { border-color: var(--gold); background: rgba(200, 154, 75, 0.08); transform: rotate(90deg); }
.modal-close svg { width: 20px; height: 20px; }
.modal .contact-form { padding: 0; border: 0; box-shadow: none; background: transparent; }
body.modal-open { overflow: hidden; }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ========================= Motion ============================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-lux), transform 0.7s var(--ease-lux);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.hero-crest { will-change: transform; }

/* ======================= Responsive ========================== */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { min-height: auto; padding-top: 128px; }
  .about-grid, .consultation-grid, .contacts-grid { grid-template-columns: 1fr; }
  .quote-card { position: static; }
  .service-grid, .review-grid { grid-template-columns: repeat(2, 1fr); }
  .case-card:nth-child(1), .case-card:nth-child(2) { grid-column: span 3; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; position: relative; z-index: 46; }
  .main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    height: 100vh;
    height: 100dvh;
    width: min(320px, 84vw);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 22px 20px calc(28px + env(safe-area-inset-bottom, 0px));
    background: rgba(245, 243, 238, 0.98);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: -18px 0 60px rgba(9, 47, 49, 0.22);
    border-left: 1px solid var(--line-gold);
    transform: translateX(100%);
    opacity: 1;
    pointer-events: none;
    transition: transform 0.32s var(--ease-lux);
    overflow-y: auto;
    z-index: 44;
  }
  .main-nav.is-open { transform: translateX(0); pointer-events: auto; }
  .main-nav a { padding: 14px 16px; border-radius: 12px; color: var(--teal); font-size: 16px; }
  .main-nav a::after { display: none; }
  .nav-drawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 16px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-gold);
  }
  .nav-drawer-head img { width: 36px; height: 36px; border-radius: 9px; }
  .nav-drawer-head span { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
  .nav-drawer-head:hover { background: transparent; }
  .main-nav a:hover, .main-nav a.is-active { background: rgba(9, 47, 49, 0.06); }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 38;
    background: rgba(6, 15, 16, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-soft);
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  /* The close control belongs to the drawer's head, not to the page behind it.
     It cannot live in the drawer markup — the drawer is translated off-screen
     when closed and the button has to stay reachable to open it — so while the
     drawer is open it is anchored to the drawer's own top-right gutter and
     drops its box, leaving just the X. Without that it read as a floating
     panel sitting on top of the menu.

     top: 21px centres it on the head row — 22px drawer padding + 4px head
     padding + 18px half the 36px logo, less 23px for half the 46px button.
     right: 20px is the drawer's own padding-right. */
  body.nav-open .nav-toggle,
  :root[data-theme="dark"] body.nav-open .nav-toggle {
    position: fixed;
    top: 21px;
    right: 20px;
    border-color: transparent;
    background: transparent;
  }
  /* Keep the title clear of the button whatever the language makes of it. */
  .nav-drawer-head { padding-right: 56px; }

  /* Burger → X when the drawer is open */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .header-cta { display: none; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .steps::before { display: none; }
  .strip-inner { justify-content: flex-start; }
  .mobile-cta { display: flex; }
  /* The bar itself adds env(safe-area-inset-bottom) to its padding, so a flat
     reserve left the last section under it by that much on a notched phone. */
  body:has(.mobile-cta) { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
  .site-footer { padding-bottom: 40px; }
  .reviews-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* Theme + language controls folded into the nav drawer (moved here by main.js
   wherever the drawer is the navigation, i.e. <=860px, so the header bar only
   ever carries the logo and the burger). */
.nav-extra {
  display: block;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line-gold);
}
/* The theme control is a row like the language one: icon, then the theme it is
   currently on. It sits under the language group — a bare 46px circle on its
   own line read as a stray control, and the row has width to spare. */
.theme-label { display: none; }
.nav-extra .theme-toggle {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}
.nav-extra .theme-toggle svg { width: 20px; height: 20px; flex: 0 0 auto; }
.nav-extra .theme-label { display: inline; }
.nav-extra .theme-toggle:hover { transform: none; background: rgba(9, 47, 49, 0.06); }

/* In the drawer the language switcher is a menu group like Services or
   Countries — not a floating pill. As a popup it hung off the bottom of the
   drawer and clipped the last few languages out of reach. This mirrors what
   `.nav-sub` does on mobile: the group expands in place. The markup is
   untouched and there is only ever one switcher in the DOM, because
   i18n.js:232 binds a single `[data-lang-switch]` root — a second copy for
   mobile would be dead. */
.nav-extra .lang-switch { position: static; width: 100%; }
.nav-extra .lang-btn {
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.nav-extra .lang-switch.is-open .lang-btn { background: rgba(9, 47, 49, 0.06); color: var(--gold-deep); }
/* The row needs a word on the left to read like Services or Countries beside
   it; the flag and the current code stay on the right where the caret is. In
   the header bar the control is a compact pill and the label would not fit, so
   it only shows in the drawer. */
.lang-label { display: none; }
.nav-extra .lang-label { display: inline; margin-right: auto; }
.nav-extra .lang-menu {
  position: static;
  transform: none;
  min-width: 0;
  padding: 2px 0 6px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  opacity: 1;
  pointer-events: auto;
  display: none;
}
.nav-extra .lang-switch.is-open .lang-menu { display: grid; transform: none; }
.nav-extra .lang-menu button { padding: 11px 16px; font-size: 15px; border-radius: 12px; }
/* The drawer is light in light theme — the header controls are styled white for
   the dark hero, so recolor them to ink here (dark theme keeps them light). */
.nav-extra .theme-toggle,
.nav-extra .lang-btn { color: var(--teal); border-color: var(--line-strong); }
.nav-extra .theme-toggle:hover,
.nav-extra .lang-btn:hover { border-color: var(--gold); background: rgba(200, 154, 75, 0.08); }
:root[data-theme="dark"] .nav-extra .theme-toggle,
:root[data-theme="dark"] .nav-extra .lang-btn { color: var(--white); border-color: rgba(255, 255, 255, 0.28); }

/* Country flags in the drawer's Countries submenu. The emoji sits in its own
   span beside the label rather than inside it: i18n.js applies translations
   with `el.textContent = value`, so anything inside a [data-i18n] element is
   wiped on the first language switch. */
.nav-sub-grid a { display: flex; align-items: center; gap: 10px; }
/* These were emoji flags, and Windows ships no colour flag glyphs at all — it
   renders the regional-indicator pair as the two letters of the code, so the
   desktop menu read "UAУкраїна", "PLПольща". Narrowing the glyph only made the
   letters smaller. The markup now carries the same inline SVG flags the coverage
   grid, the blog chips and the shop cards already use, which render identically
   everywhere; this rule only positions them on the menu row. */
/* Two classes on purpose. The menu markup is `class="flag nav-flag"`, and the
   `.flag` rule below sets display:block at 24x16 for the coverage cards, where
   the flag sits above its label. Equal specificity means the later rule wins, so
   a single-class `.nav-flag` here was silently overridden and every country name
   wrapped onto its own line. `.flag.nav-flag` outranks it wherever it sits. */
.flag.nav-flag {
  display: inline-block;
  vertical-align: -2px;
  width: 18px;
  height: 12px;
  margin-right: 8px;
}

/* Desktop menu only. The dropdown column is narrow and its rows are a single
   line each, so the flag has to cost as little width as possible — a country
   name that wraps turns a tidy two-column list into a ragged one. The mobile
   drawer keeps the larger flag: there the row is full-width and the bigger mark
   is easier to hit and to read. */
@media (min-width: 1024px) {
  .flag.nav-flag {
    width: 15px;
    height: 10px;
    margin-right: 6px;
    vertical-align: -1px;
  }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .container { width: min(100% - 32px, var(--max)); }
  .service-grid, .review-grid, .steps { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card:nth-child(1), .case-card:nth-child(2), .case-card:nth-child(3) { grid-column: 1 / -1; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats div { border-right: 0; border-bottom: 1px solid var(--on-dark-line); }
  .hero-stats div:last-child { border-bottom: 0; }
  .two-cols { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-crest { transform: none !important; }
  .review-track { scroll-behavior: auto; }
}

/* honeypot */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ========================== Language switcher ========================== */
.lang-switch { position: relative; flex: 0 0 auto; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.2s;
}
.lang-btn svg { width: 17px; height: 17px; }
.lang-btn .lang-caret { width: 13px; height: 13px; transition: transform 0.28s var(--ease-lux); }
.lang-flag {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.lang-flag svg { display: block; width: 100%; height: 100%; }
.flag {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.flag svg { display: block; width: 100%; height: 100%; }
.lang-switch.is-open .lang-btn .lang-caret { transform: rotate(180deg); }
.lang-btn:hover { border-color: var(--gold-2); transform: translateY(-1px); }
.site-header.is-scrolled .lang-btn,
.site-header.is-solid .lang-btn { color: var(--teal); border-color: var(--line-strong); }
.site-header.is-scrolled .lang-btn:hover,
.site-header.is-solid .lang-btn:hover { border-color: var(--gold); background: rgba(200, 154, 75, 0.08); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 176px;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(245, 243, 238, 0.98);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--line-gold);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s var(--ease-soft), transform 0.2s var(--ease-soft);
  z-index: 50;
}
.lang-switch.is-open .lang-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.lang-menu button:hover { background: rgba(9, 47, 49, 0.06); }
.lang-menu button.is-active { color: var(--gold-deep); background: rgba(200, 154, 75, 0.1); }
.lang-menu button.is-active::after { content: "\2713"; margin-left: auto; font-weight: 700; color: var(--gold-deep); }

@media (max-width: 860px) {
  .nav-wrap .brand { margin-right: auto; }
  .theme-toggle { order: 1; }
  .lang-switch { order: 2; }
  .nav-toggle { order: 3; }
  .lang-btn { padding: 8px 10px; font-size: 12px; }
  .lang-btn svg { width: 16px; height: 16px; }
}

/* ========================== Theme toggle ========================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s, transform 0.2s;
}
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle:hover { border-color: var(--gold-2); transform: translateY(-1px); }
.site-header.is-scrolled .theme-toggle,
.site-header.is-solid .theme-toggle { color: var(--ink); border-color: var(--line-strong); }
.site-header.is-scrolled .theme-toggle:hover,
.site-header.is-solid .theme-toggle:hover { border-color: var(--gold); background: rgba(200, 154, 75, 0.08); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ========================== Dark theme ========================== */
:root[data-theme="dark"] {
  --bg: #071214;
  --panel: #10201f;
  --sand: #0b1719;
  --ink: #e9edea;
  --muted: #9db0b0;
  --white: #ffffff;
  --ink-soft: rgba(233, 237, 234, 0.7);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --line-gold: rgba(200, 154, 75, 0.32);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.5), 0 32px 72px rgba(0, 0, 0, 0.62);
  --shadow-gold: 0 2px 8px rgba(200, 154, 75, 0.22), 0 18px 40px rgba(200, 154, 75, 0.2);
  --error: #ff7a7a;
  --error-soft: rgba(255, 122, 122, 0.14);
  color-scheme: dark;
}

/* Readable accents on dark neutrals */
:root[data-theme="dark"] .eyebrow { color: var(--gold-2); }
:root[data-theme="dark"] .eyebrow::before { background: linear-gradient(90deg, var(--gold-2), transparent); }
:root[data-theme="dark"] .section-muted .eyebrow { color: var(--gold-2); }
:root[data-theme="dark"] .link-gold { color: var(--gold-2); }
:root[data-theme="dark"] .link-gold:hover { color: var(--gold); }

/* Text/icons hardcoded to --teal — lift to light ink on dark surfaces */
:root[data-theme="dark"] .btn-ghost,
:root[data-theme="dark"] .rating b,
:root[data-theme="dark"] .service-card h3,
:root[data-theme="dark"] .case-card h3,
:root[data-theme="dark"] .review-card .who .avatar,
:root[data-theme="dark"] .consultation-section code,
:root[data-theme="dark"] .faq-item summary,
:root[data-theme="dark"] .mobile-cta .call,
:root[data-theme="dark"] .modal-close { color: var(--ink); }
:root[data-theme="dark"] .faq-item summary .plus::before,
:root[data-theme="dark"] .faq-item summary .plus::after { background: var(--gold-2); }
:root[data-theme="dark"] .field input:focus ~ label,
:root[data-theme="dark"] .field input:not(:placeholder-shown) ~ label,
:root[data-theme="dark"] .field textarea:focus ~ label,
:root[data-theme="dark"] .field textarea:not(:placeholder-shown) ~ label { color: var(--gold-2); }

/* Header: glassy dark when scrolled/solid */
:root[data-theme="dark"] .site-header.is-scrolled,
:root[data-theme="dark"] .site-header.is-solid {
  background: rgba(9, 20, 21, 0.85);
  border-bottom-color: var(--line-gold);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dark"] .site-header.is-scrolled .main-nav,
:root[data-theme="dark"] .site-header.is-solid .main-nav { color: var(--ink); }
:root[data-theme="dark"] .site-header.is-scrolled .main-nav a.is-active,
:root[data-theme="dark"] .site-header.is-solid .main-nav a.is-active { color: var(--gold-2); }
:root[data-theme="dark"] .site-header.is-scrolled .main-nav a:hover,
:root[data-theme="dark"] .site-header.is-solid .main-nav a:hover { background: transparent; }
:root[data-theme="dark"] .site-header.is-scrolled .nav-toggle,
:root[data-theme="dark"] .site-header.is-solid .nav-toggle { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .site-header.is-scrolled .nav-toggle span,
:root[data-theme="dark"] .site-header.is-solid .nav-toggle span { background: var(--ink); }
:root[data-theme="dark"] .site-header.is-scrolled .logo-light,
:root[data-theme="dark"] .site-header.is-solid .logo-light { display: block; }
:root[data-theme="dark"] .site-header.is-scrolled .logo-dark,
:root[data-theme="dark"] .site-header.is-solid .logo-dark { display: none; }

/* Accents that reference --teal on now-dark surfaces */
:root[data-theme="dark"] .site-header.is-scrolled .header-cta,
:root[data-theme="dark"] .site-header.is-solid .header-cta { color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] .site-header.is-scrolled .lang-btn,
:root[data-theme="dark"] .site-header.is-solid .lang-btn { color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] .hero-card h2,
:root[data-theme="dark"] .hero-card h3 { color: var(--ink); }

/* Surfaces that were hardcoded light */
:root[data-theme="dark"] .hero-card { background: rgba(16, 32, 32, 0.96); }
:root[data-theme="dark"] .contact-shortcuts a { background: rgba(255, 255, 255, 0.05); color: var(--ink); }
:root[data-theme="dark"] .contact-shortcuts a:hover { background: rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] label { color: var(--ink); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select { background: #0a1618; color: var(--ink); border-color: var(--line-strong); }
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] textarea:focus,
:root[data-theme="dark"] select:focus { background: #0d1c1e; }
:root[data-theme="dark"] .mobile-cta { background: rgba(9, 20, 21, 0.9); }

/* Language dropdown menu */
:root[data-theme="dark"] .lang-menu {
  background: rgba(12, 24, 25, 0.98);
  border-color: var(--line-gold);
}
:root[data-theme="dark"] .lang-menu button { color: var(--ink); }
:root[data-theme="dark"] .lang-menu button:hover { background: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .lang-menu button.is-active { color: var(--gold-2); background: rgba(200, 154, 75, 0.14); }
:root[data-theme="dark"] .lang-menu button.is-active::after { color: var(--gold-2); }

/* Mobile nav overlay only — desktop nav stays transparent (underline style) */
@media (max-width: 860px) {
  :root[data-theme="dark"] .main-nav {
    background: rgba(12, 24, 25, 0.98);
    border-color: var(--line-gold);
  }
  :root[data-theme="dark"] .main-nav a { color: var(--ink); }
  :root[data-theme="dark"] .main-nav a:hover,
  :root[data-theme="dark"] .main-nav a.is-active { background: rgba(255, 255, 255, 0.06); }
}

/* =========================================================================
   BLOG — homepage carousel, list page and article layout
   ========================================================================= */

/* --- Homepage blog section --- */
.blog-carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 40px);
}
/* "Усі статті" moved below the carousel, centered. Theme-aware tokens so the
   button is visible on the muted section in both light and dark themes. */
.blog-carousel-foot { display: flex; justify-content: center; margin-top: clamp(22px, 3vw, 34px); }
.blog-carousel-foot .btn-outline {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--panel);
}
.blog-carousel-foot .btn-outline:hover {
  color: var(--ink);
  border-color: var(--line-gold);
  background: rgba(200, 154, 75, 0.08);
}

.blog-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 20px;
  margin: 0 -4px;
  scrollbar-width: none;              /* no scrollbar — marquee drives motion */
  -webkit-overflow-scrolling: touch;
}
.blog-track::-webkit-scrollbar { display: none; }
.blog-track > .blog-card { flex: 0 0 clamp(290px, 32%, 340px); scroll-snap-align: start; }

/* Continuous marquee mode (transform driven by JS rAF, mirrors the reviews row) */
.blog-viewport { overflow: hidden; }
.blog-track.is-marquee {
  width: max-content;
  max-width: none;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
/* The marquee track is `width: max-content`, and a flex item's contribution to
   that is its own max-content width — the card's text on one unwrapped line —
   not its flex-basis. With 340px cards the track measured 4857px instead of
   1420px, so the rAF loop (which derives its loop length from scrollWidth)
   ran ~1000px past the last card and showed blank space. Capping the card with
   max-width, and clearing the automatic minimum, makes max-content equal the
   real content width. The basis avoids percentages here: a percentage resolves
   against the track, whose width depends on the cards. */
.blog-track.is-marquee > .blog-card {
  scroll-snap-align: none;
  flex: 0 0 clamp(290px, 82vw, 340px);
  min-width: 0;
  max-width: clamp(290px, 82vw, 340px);
}

/* --- Blog list grid (no pagination) --- */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

/* --- Blog card (shared) --- */
.blog-card { scroll-snap-align: start; }
.blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--ease-lux), box-shadow 0.25s, border-color 0.25s;
}
.blog-card-link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}
/* =================== Country landing pages =================== */
/* A landing stacks ten sections, so the home-page rhythm reads as dead space
   here — halve it. Scoped to the landings by the body attribute, so the home
   page, the blog and the articles keep their spacing. */
body[data-country-page] .section { padding: calc(var(--space-section) / 2) 0; }
body[data-country-page] .section-head { margin-bottom: clamp(24px, 2.4vw, 36px); }
/* …except the hero: the header is fixed and overlays the top of the page, so a
   halved top padding pushed the breadcrumbs underneath it. This rule needs the
   same specificity as the one above to win. */
body[data-country-page] .country-hero { padding-top: clamp(120px, 12vw, 190px); }
/* Landing cards carry no icon, so the heading would sit on top of the big
   numeral — on the home page the icon is what spaces the two apart. */
.service-card .service-num + h3 { margin-top: 30px; }
.country-stats { margin-top: 30px; max-width: 640px; }
.country-who { grid-template-columns: repeat(3, 1fr); }
.country-who .case-card { grid-column: auto; }
@media (max-width: 900px) { .country-who { grid-template-columns: 1fr; } }
/* gen_ukraine.js emits .cases-grid for the four "why it works" cards, and the
   class had no rule at all — the cards fell back to block flow and stacked
   full-width. Two-up, since four cards divide evenly. */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-gap);
}
.cases-grid .case-card { grid-column: auto; }
@media (max-width: 900px) { .cases-grid { grid-template-columns: 1fr; } }
/* Business-security block: six equal cards, so the bento spans .case-card
   carries for the three-card layout have to be reset. The teal third card is
   kept on purpose — it lands on "a lawyer on site", the card that sells. */
.country-sec { grid-template-columns: repeat(3, 1fr); }
.country-sec .case-card { grid-column: auto; }
@media (max-width: 900px) { .country-sec { grid-template-columns: 1fr; } }
.sec-note {
  max-width: 84ch;
  margin: 30px 0 0;
  padding: 18px 24px;
  border-left: 3px solid var(--gold);
  background: var(--panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.sec-actions { margin-top: 26px; }
.country-hero { padding-top: clamp(120px, 12vw, 190px); }
.country-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  max-width: 18ch;
  margin: 10px 0 18px;
}
.country-lead {
  max-width: 62ch;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
  color: var(--on-dark-soft);
}
.country-empty {
  padding: 26px 28px;
  background: var(--panel);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
}
.country-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 900px) { .country-cta { grid-template-columns: 1fr; } }

/* --- Business consulting section (country landing → /<country>/business/) --- */
.biz-promo-cta { margin-top: clamp(24px, 3vw, 36px); text-align: center; }

/* --- Country reviews marquee (rendered by assets/js/reviews.js) --- */
/* The row lives inside .container, so the marquee is clipped to the content
   column instead of bleeding to the window edge. A little vertical padding
   keeps the cards' hover lift and shadow from being cut off. */
.reviews-viewport {
  overflow: hidden;
  margin-inline: -4px;
  padding: 8px 4px 14px;
}
.reviews-row {
  display: flex;
  gap: clamp(16px, 1.8vw, 24px);
  will-change: transform;
}
.reviews-row > .review-card {
  flex: 0 0 clamp(280px, 26vw, 360px);
  margin: 0;
}

/* ====================== EU coverage grid ===================== */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.coverage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s var(--ease-lux), box-shadow 0.25s, border-color 0.25s;
}
.coverage-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.coverage-card .flag {
  flex: none;
  width: 30px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.coverage-name { font-weight: 700; font-size: 16px; }
/* The "more about this country" line is a hover affordance, not a second label. */
.coverage-more {
  margin-left: auto;
  font-size: 0;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity 0.2s;
}
.coverage-card:hover .coverage-more,
.coverage-card:focus-visible .coverage-more { opacity: 1; }
.coverage-more::after { content: "→"; font-size: 18px; }
.coverage-card.is-current { border-color: var(--line-gold); background: var(--sand); }
.coverage-note {
  margin-top: clamp(18px, 2vw, 26px);
  color: var(--muted);
  font-size: 14px;
}
:root[data-theme="dark"] .coverage-more { color: var(--gold-2); }

/* --- Blog country filter (chips, injected by blog.js) --- */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s var(--ease-lux);
}
.blog-chip .flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.blog-chip:hover { color: var(--ink); border-color: var(--line-gold); transform: translateY(-1px); }
.blog-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.blog-chip.is-active {
  color: var(--ink);
  border-color: var(--line-gold);
  background: var(--sand);
  box-shadow: var(--shadow-sm);
}

/* Card header row: category pill on the left, country chip on the right. */
.blog-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* long category names (de/hu) push the country chip to its own line */
  gap: 8px 10px;
  margin-bottom: 14px;
}
.blog-card-top .blog-card-cat { margin-bottom: 0; }
.blog-card-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.blog-card-country .flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
/* Carousel cards are much narrower than the list cards: keep the flag only,
   so a long category pill never pushes the chip onto a second line. The
   country name stays in the DOM for screen readers. */
.blog-track .blog-card-country .country-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.blog-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: var(--sand);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.blog-card-title {
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.28rem);
  line-height: 1.28;
  margin: 0 0 10px;
}
.blog-card-ex {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.blog-card-meta {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: auto;
}
.blog-card-more {
  margin-top: 12px;
  font-weight: 700;
  color: var(--gold-deep);
  font-size: 14px;
}
:root[data-theme="dark"] .blog-card-cat { color: var(--gold-2); }
:root[data-theme="dark"] .blog-card-more { color: var(--gold-2); }

/* --- Blog list page header --- */
.blog-hero { padding-top: clamp(96px, 12vh, 150px); padding-bottom: clamp(110px, 14vh, 170px); }
.blog-hero .container { max-width: 900px; }
/* Cards lift up and overlap the dark hero for an editorial seam. */
.blog-list-section { padding-top: 0; margin-top: clamp(-110px, -9vh, -60px); position: relative; z-index: 3; }
.blog-count-pill {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
.blog-count-pill b { color: var(--ink); }
.blog-hero.section-dark .article-back { color: var(--gold-2); }
.blog-hero.section-dark .blog-count-pill { color: var(--on-dark); }
.blog-hero.section-dark .blog-count-pill b { color: var(--white); }

/* --- Article page --- */
.article-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.article-head { padding-top: clamp(92px, 11vh, 140px); }
/* Dark article header (matches homepage hero) */
.article-head.section-dark { padding-bottom: clamp(34px, 5vh, 60px); }
.article-head.section-dark .article-meta,
.article-head.section-dark .article-meta span,
.article-head.section-dark .article-meta time { color: var(--on-dark); }
.article-head.section-dark .article-lead { color: var(--on-dark); }
.article-head.section-dark .breadcrumbs { color: var(--on-dark-soft); }
.article-head.section-dark .breadcrumbs a { color: var(--gold-2); }
.article-head.section-dark .breadcrumbs .bc-current { color: var(--on-dark); }
.article-head.section-dark .breadcrumbs .bc-sep { color: var(--on-dark-line); }
.article-head.section-dark .blog-card-cat { background: rgba(255, 255, 255, 0.10); color: var(--gold-2); }
.article-back {
  display: inline-block;
  margin-bottom: 18px;
  font-weight: 600;
  color: var(--gold-deep);
  text-decoration: none;
}
.article-back:hover { text-decoration: underline; }
:root[data-theme="dark"] .article-back { color: var(--gold-2); }
/* Breadcrumbs (SEO + nav) */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--muted); }
.breadcrumbs a { color: var(--gold-deep); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .bc-sep { color: var(--line-strong); }
:root[data-theme="dark"] .breadcrumbs a { color: var(--gold-2); }
/* Related articles (internal linking) */
.article-related-wrap { padding-top: clamp(28px, 4vw, 48px); }
.article-related-h { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-bottom: 20px; }
.article-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.related-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); box-shadow: var(--shadow-sm); text-decoration: none; transition: transform .25s var(--ease-lux), box-shadow .25s var(--ease-lux), border-color .25s var(--ease-lux); }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.related-cat { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-deep); }
.related-title { font-family: var(--font-display); font-size: 16.5px; line-height: 1.3; color: var(--ink); }
:root[data-theme="dark"] .related-cat { color: var(--gold-2); }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  margin: 16px 0 8px;
}
.article-title {
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.12;
  margin: 6px 0 14px;
}
.article-lead {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.6;
}
.article-body { font-size: 1.05rem; line-height: 1.75; }
.article-body h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  margin: 2em 0 0.6em;
  scroll-margin-top: 90px;
}
.article-body h3 { font-size: 1.25rem; margin: 1.6em 0 0.5em; }
.article-body p { margin: 0 0 1.1em; }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article-body li { margin-bottom: 0.5em; }
.article-body a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme="dark"] .article-body a { color: var(--gold-2); }
.article-body strong { font-weight: 700; }
.article-body blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 3px solid var(--gold);
  background: var(--sand);
  border-radius: 0 12px 12px 0;
  color: var(--ink-soft);
}
.article-body .callout {
  margin: 1.6em 0;
  padding: 18px 22px;
  background: var(--panel);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.article-toc {
  margin: 1.8em 0;
  padding: 18px 22px;
  background: var(--sand);
  border-radius: var(--radius-sm);
}
.article-toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px; color: var(--muted); }
.article-toc ol { margin: 0; padding-left: 1.2em; }
.article-toc a { color: var(--ink); text-decoration: none; }
.article-toc a:hover { color: var(--gold-deep); }
.article-disclaimer {
  margin-top: 2.4em;
  font-size: 13.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

/* --- Article inline CTA form --- */
.article-cta {
  margin: clamp(40px, 6vw, 72px) auto 0;
  max-width: 760px;
}
.article-cta .contact-form { margin-top: 22px; }

@media (max-width: 640px) {
  /* Viewport-based (not %) so the basis stays fixed even when the marquee makes
     the track width:max-content — a % basis would resolve against that huge
     width and blow each card up. */
  .blog-track > .blog-card { flex-basis: min(84vw, 340px); }
}

/* ==========================================================================
   EU-wide hub pages — /business/, /migration/, /coverage/
   The coverage card is a country plus its two service pages, so it cannot be
   a single <a> like .coverage-card: nested links are invalid HTML.
   ========================================================================== */
.hub-hero { padding-bottom: clamp(56px, 8vh, 96px); }
.hub-hero-copy { max-width: 820px; }

.coverage-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-gap);
}
.coverage-multi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), border-color 0.3s;
}
.coverage-multi:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}
.coverage-multi-head {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.coverage-multi-head .flag { width: 30px; height: 20px; border-radius: 4px; flex: 0 0 auto; }
.coverage-multi-head .coverage-name { font-weight: 700; font-size: 17px; }
.coverage-multi-head:hover .coverage-name { color: var(--gold-deep); }
.coverage-multi-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.coverage-multi-links a {
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.coverage-multi-links a:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: rgba(200, 154, 75, 0.08);
}
:root[data-theme="dark"] .coverage-multi-head .coverage-name { color: var(--ink); }
:root[data-theme="dark"] .coverage-multi-head:hover .coverage-name,
:root[data-theme="dark"] .coverage-multi-links a:hover { color: var(--gold-2); }

/* ==========================================================================
   Header dropdown menus
   The group head is a <button> styled to match the sibling nav links, so the
   row reads as one set. Open state is driven by `.is-open` from main.js — no
   :hover rule here, or a click-opened menu would fight the pointer.
   ========================================================================== */
.nav-item { position: relative; }
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-sub-toggle .nav-caret {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  transition: transform 0.28s var(--ease-lux);
}
.nav-item.is-open .nav-sub-toggle .nav-caret { transform: rotate(180deg); }
.nav-item.is-open .nav-sub-toggle { color: var(--gold-2); }
.site-header.is-scrolled .nav-item.is-open .nav-sub-toggle,
.site-header.is-solid .nav-item.is-open .nav-sub-toggle { color: var(--gold-deep); }

.nav-sub {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translate(-50%, 8px);
  z-index: 60;
  display: grid;
  gap: 2px;
  min-width: 236px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-soft), transform 0.3s var(--ease-lux);
}
/* Bridges the gap between the toggle and the panel so the pointer can travel
   down without crossing dead space and closing the menu. */
.nav-sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}
.nav-item.is-open .nav-sub {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.nav-sub a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.nav-sub a::after { display: none; }
.nav-sub a:hover {
  background: rgba(200, 154, 75, 0.12);
  color: var(--gold-deep);
}
.nav-sub-grid { grid-template-columns: repeat(2, minmax(148px, 1fr)); }

:root[data-theme="dark"] .nav-sub a:hover { color: var(--gold-2); }

@media (max-width: 860px) {
  /* In the drawer the menu is not a floating panel: the group expands in place
     so the whole tree stays reachable with one thumb. */
  .nav-item { position: static; }
  .nav-sub-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--teal);
    font-size: 16px;
  }
  .nav-item.is-open .nav-sub-toggle { background: rgba(9, 47, 49, 0.06); color: var(--gold-deep); }
  .nav-sub {
    position: static;
    transform: none;
    min-width: 0;
    padding: 2px 0 6px 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    display: none;
  }
  .nav-sub::before { display: none; }
  .nav-item.is-open .nav-sub { display: grid; transform: none; }
  .nav-sub-grid { grid-template-columns: minmax(0, 1fr); }
  .main-nav .nav-sub a { padding: 11px 16px; font-size: 15px; }
}
:root[data-theme="dark"] .nav-sub-toggle { color: inherit; }
@media (max-width: 860px) {
  :root[data-theme="dark"] .nav-sub-toggle { color: var(--ink); }
}

/* ==========================================================================
   Document shop — /shop/ catalogue and /shop/<slug>/ product pages
   Cards reuse the site's surface language (panel + hairline + lift on hover);
   the price is the one gold element, so scanning the grid reads as a price
   list rather than another row of equal-weight tiles.
   ========================================================================== */

.shop-hero { padding-bottom: clamp(56px, 8vh, 96px); }
.shop-hero-copy { max-width: 780px; }
.shop-list-section { padding-top: clamp(34px, 4vw, 54px); }

/* --- filters --- */
.shop-filters {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(26px, 3vw, 40px);
  padding-bottom: clamp(20px, 2.5vw, 30px);
  border-bottom: 1px solid var(--line);
}
.shop-filter-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.shop-filter-label {
  flex: 0 0 auto;
  min-width: 92px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.shop-filter-row .blog-filter { flex: 1 1 320px; margin: 0; }

/* --- catalogue grid --- */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-gap);
}
.shop-card { display: flex; }
.shop-card-link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 26px 26px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s var(--ease-lux), border-color 0.3s;
}
.shop-card-link:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}
.shop-card-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.shop-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-card-cat {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.shop-badge {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(200, 154, 75, 0.16);
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.shop-card-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.32;
  color: var(--ink);
}
.shop-card-ex { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.shop-card-flags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}
.shop-card-flags .flag { width: 22px; height: 15px; border-radius: 3px; }
.shop-card-all { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.shop-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.shop-price {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-deep);
  white-space: nowrap;
}
.shop-card-more {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: transform 0.3s var(--ease-lux);
}
.shop-card-link:hover .shop-card-more { transform: translateX(3px); }

/* --- product page --- */
.product-hero .hero-copy { max-width: 640px; }
.product-countries { margin-top: 30px; }
.product-countries-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.product-countries-row { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--on-dark-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--on-dark);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-lux);
}
.shop-country-chip:hover {
  border-color: var(--gold-2);
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}
.shop-country-chip .flag { width: 20px; height: 14px; border-radius: 3px; }

.product-card { position: relative; }
.product-card .shop-badge { position: absolute; top: 22px; right: 22px; }
.product-price {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 50px);
  font-weight: 800;
  line-height: 1;
  color: var(--gold-deep);
}
.product-meta { margin: 0 0 26px; }
.product-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.product-meta > div:last-child { border-bottom: 0; }
.product-meta dt { color: var(--muted); font-size: 14px; }
.product-meta dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 700; text-align: right; }
.product-price-note { margin: 16px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.product-inc { margin: 0; }
.product-inc li { font-size: 16.5px; }
.product-disclaimer {
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--sand);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}
.product-duo { margin-top: 18px; color: var(--muted); font-size: 15px; }

/* --- order form --- */
.order-product {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
  background: var(--sand);
}
.order-product-label {
  flex: 0 0 100%;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.order-product-name { flex: 1 1 auto; font-weight: 700; color: var(--ink); font-size: 15.5px; }
.order-product .shop-price { font-size: 20px; }
/* The messenger control carries its label above (a <select> can never use the
   floating-label trick, which keys off :placeholder-shown). That makes the cell
   taller than the plain input beside it, so the row is bottom-aligned to keep
   the two controls on one baseline. */
.order-form .two-cols { align-items: end; }
.select-field { display: flex; flex-direction: column; }
.select-label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.select-field select { width: 100%; }

/* --- dark theme: anything above that hardcodes a light surface or uses a
   teal/gold-deep text colour needs its counterpart here (AGENTS.md §6) --- */
:root[data-theme="dark"] .shop-card-title,
:root[data-theme="dark"] .shop-card-more,
:root[data-theme="dark"] .order-product-name,
:root[data-theme="dark"] .product-meta dd { color: var(--ink); }
:root[data-theme="dark"] .shop-price,
:root[data-theme="dark"] .product-price { color: var(--gold-2); }
:root[data-theme="dark"] .shop-badge { color: var(--gold-2); background: rgba(226, 192, 109, 0.14); }
:root[data-theme="dark"] .shop-card-cat { background: rgba(255, 255, 255, 0.07); color: var(--muted); }
:root[data-theme="dark"] .product-disclaimer,
:root[data-theme="dark"] .order-product { background: rgba(255, 255, 255, 0.04); }

@media (max-width: 900px) {
  .shop-filter-row { align-items: flex-start; }
  .shop-filter-label { min-width: 0; flex: 0 0 100%; }
  .product-card .shop-badge { position: static; margin-bottom: 14px; }
}
@media (max-width: 520px) {
  .shop-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ================= Cookie consent (CMP) ================= */
/* Bottom sheet on top of a dimmed page. Built entirely from design tokens, so
   the dark theme needs overrides only where a value cannot be a token. */
.cmp[hidden] { display: none !important; }
.cmp {
  position: fixed;
  z-index: 2147483000;
  inset: auto auto 0 0;
  padding: clamp(12px, 1.6vw, 20px);
  color: var(--ink);
  font-family: var(--font-sans);
  /* No dimming and no click blocking: the visitor keeps using the site while
     the notice waits. Only the card itself takes pointer events. */
  pointer-events: none;
}

.cmp__panel {
  position: relative;
  pointer-events: auto;
  width: min(400px, 100%);
  max-height: min(76vh, 620px);
  padding: 22px 24px 20px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  outline: none;
  /* Animated, not transitioned: the end state is "visible", so the panel can
     never get stuck invisible if a frame is dropped or the tab is throttled.
     Unhiding the section restarts the animation by itself. */
  animation: cmp-slide-in 0.6s var(--ease-lux) both;
}
@keyframes cmp-slide-in { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Gold rail — the same signature the hero and section cards carry. */
.cmp__panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--grad-gold);
}

.cmp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  font-weight: 800;
}
.cmp__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.cmp h2 {
  margin: 0 40px 8px 0;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.cmp__lead {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.58;
}
.cmp__privacy {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--gold-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.cmp__privacy:hover { color: var(--teal); }

.cmp__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--teal);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.28s var(--ease-lux);
}
.cmp__close svg { width: 14px; height: 14px; }
.cmp__close:hover,
.cmp__close:focus-visible {
  color: var(--white);
  background: var(--teal);
  border-color: var(--teal);
  transform: rotate(90deg);
}

.cmp__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
/* The primary sits on its own full-width row so three labels never squeeze. */
.cmp__actions .cmp__btn--primary { grid-column: 1 / -1; order: -1; }
.cmp__btn {
  min-height: 40px;
  padding: 9px 14px;
  color: var(--teal);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.28s var(--ease-lux), box-shadow 0.28s var(--ease-lux), background 0.25s, border-color 0.25s, color 0.25s;
}
.cmp__btn:hover { transform: translateY(-2px); border-color: var(--teal); }
.cmp__btn--primary {
  color: #201a0d;
  background: var(--grad-gold);
  border-color: transparent;
  box-shadow: var(--shadow-gold);
}
.cmp__btn--primary:hover { box-shadow: 0 20px 44px rgba(200, 154, 75, 0.32); }
.cmp__btn:focus-visible {
  outline: 3px solid var(--line-gold);
  outline-offset: 3px;
}

.cmp__category {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.cmp__category strong {
  display: block;
  margin-bottom: 3px;
  color: var(--teal);
  font-family: var(--font-display);
  font-size: 14.5px;
}
.cmp__category p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.cmp__switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: 44px;
  height: 25px;
}
.cmp__switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.cmp__switch span {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.28s var(--ease-soft);
}
.cmp__switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 5px rgba(9, 47, 49, 0.28);
  transition: transform 0.28s var(--ease-lux);
}
.cmp__switch input:checked + span { background: var(--gold); }
.cmp__switch input:checked + span::after { transform: translateX(19px); }
.cmp__switch input:focus-visible + span { outline: 3px solid var(--line-gold); outline-offset: 3px; }
.cmp__switch input:disabled + span { cursor: not-allowed; background: var(--teal); opacity: 0.5; }

/* Footer trigger — a button that has to read as the footer's text links. */
.footer-cookie {
  padding: 0;
  color: inherit;
  font: inherit;
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s;
}
.footer-cookie:hover { color: var(--gold-2); }

/* Dark theme: tokens carry most of it; these are the values that cannot. */
:root[data-theme="dark"] .cmp h2,
:root[data-theme="dark"] .cmp__category strong { color: var(--ink); }
:root[data-theme="dark"] .cmp__close { color: var(--ink); }
:root[data-theme="dark"] .cmp__close:hover,
:root[data-theme="dark"] .cmp__close:focus-visible {
  color: var(--teal);
  background: var(--gold-2);
  border-color: var(--gold-2);
}
:root[data-theme="dark"] .cmp__btn { color: var(--ink); }
:root[data-theme="dark"] .cmp__btn:hover { border-color: var(--gold-2); }
:root[data-theme="dark"] .cmp__btn--primary { color: #201a0d; }
:root[data-theme="dark"] .cmp__privacy { color: var(--gold-2); }
:root[data-theme="dark"] .cmp__privacy:hover { color: var(--gold); }
:root[data-theme="dark"] .cmp__switch input:disabled + span { background: var(--gold-2); opacity: 0.4; }
:root[data-theme="dark"] .cmp::before { background: rgba(0, 0, 0, 0.62); }

@media (max-width: 700px) {
  .cmp { inset: auto 0 0; padding: 10px; }
  .cmp__panel { width: 100%; max-height: 82vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp__btn,
  .cmp__close,
  .cmp__switch span,
  .cmp__switch span::after { transition: none; }
  .cmp__panel { animation: none; }
  .cmp__btn:hover, .cmp__close:hover { transform: none; }
}

/* The bar carries the same gradient as .legal-intro right below it, so the top
   of the page reads as a single teal surface instead of a floating strip. The
   header keeps its light-on-dark styling, which is its default state. */
[data-static-header] .site-header {
  background: var(--grad-teal);
  border-bottom-color: transparent;
}

/* ============== Legal document (privacy & cookie policy) ============== */
/* Bilingual policy page: an ivory/dark card per language, teal masthead,
   sticky language chips and scrollable tables. All values are tokens, so the
   page follows the theme instead of pinning itself to the light palette. */
.legal-shell { max-width: 1000px; margin: 0 auto; }

.legal-intro {
  position: relative;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
  color: var(--white);
  background: var(--grad-teal);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.legal-intro::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--grad-gold);
}
.legal-page .legal-intro h1 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.legal-page .legal-intro p {
  margin: 6px 0;
  color: var(--on-dark);
  font-size: 15.5px;
}
.legal-intro a { color: var(--gold-2); font-weight: 700; }

.policy-language {
  margin-bottom: clamp(28px, 3vw, 44px);
  padding: clamp(24px, 4vw, 56px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 150px;
}
.language-kicker {
  margin: 0;
  color: var(--gold-deep);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 800;
}
.legal-page .policy-title {
  margin: 12px 0 30px;
  color: var(--teal);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.legal-page .policy-language h2 {
  margin: 36px 0 12px;
  color: var(--teal);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
}
.legal-page .policy-language h3 {
  margin: 24px 0 8px;
  color: var(--teal);
  font-size: 17px;
}
.legal-page .policy-language p,
.legal-page .policy-language li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.72;
}
.policy-language ul { padding-left: 1.3rem; }
.policy-language li { margin: 0.45rem 0; }
.policy-language a { color: var(--gold-deep); font-weight: 700; }

.policy-note {
  margin: 22px 0;
  padding: 18px 22px;
  background: var(--sand);
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.legal-page .policy-note p { margin: 0; }
.legal-page .policy-updated {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.table-wrap {
  overflow-x: auto;
  margin: 22px 0 30px;
  border-radius: var(--radius-sm);
}
.policy-language table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.policy-language th,
.policy-language td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
  color: var(--muted);
  border: 1px solid var(--line);
}
.policy-language th {
  color: var(--white);
  font-weight: 700;
  background: var(--teal);
  border-color: var(--teal);
}
.policy-language tr:nth-child(even) td { background: var(--sand); }

:root[data-theme="dark"] .legal-page .policy-title,
:root[data-theme="dark"] .legal-page .policy-language h2,
:root[data-theme="dark"] .legal-page .policy-language h3 { color: var(--ink); }
:root[data-theme="dark"] .policy-language a,
:root[data-theme="dark"] .language-kicker { color: var(--gold-2); }
:root[data-theme="dark"] .policy-language th { color: var(--ink); background: var(--sand); border-color: var(--line-strong); }

@media (max-width: 760px) {
  .policy-language { scroll-margin-top: 120px; }
}