/* ===========================================================
   Loops — shared design system
   =========================================================== */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --bg: #070707;
  --surface: #0e0e0d;
  --surface-2: #141413;
  --border: rgba(245, 243, 235, 0.08);
  --border-hover: rgba(245, 243, 235, 0.18);
  --text: #f3f2ec;
  --text-muted: #c9c7c0;
  --text-dim: #9a978e;
  --text-faint: #8e8b82;
  --gold: #f3c866;
  --gold-soft: color-mix(in oklab, var(--gold) 13%, transparent);
  --gold-line: color-mix(in oklab, var(--gold) 33%, transparent);
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.4s var(--ease);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: #1a1408; }

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

/* a11y: visually hidden but available to screen readers + heading order */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.03;
  text-wrap: balance;
}

p { margin: 0; }

/* ---------- Header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(7, 7, 7, 0.6);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
header.scrolled {
  border-bottom-color: var(--border);
  background: rgba(7, 7, 7, 0.85);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 70px;
}
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.logo-img { height: 25px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 0 auto;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  white-space: nowrap;
}
.nav-links a {
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: #1a1408; }
.btn-gold:hover { background: color-mix(in oklab, var(--gold) 80%, white); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-hover);
}
.btn-ghost:hover { border-color: var(--text-dim); background: rgba(255, 255, 255, 0.03); }
.btn-lg { padding: 15px 26px; font-size: 16px; }
.btn .icon { width: 17px; height: 17px; display: block; }

/* ---------- Sections ---------- */
section { position: relative; }
.sec-pad { padding: 92px 0; }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 38px;
}
.sec-title { font-size: clamp(30px, 4.4vw, 50px); }
.sec-sub {
  color: var(--text-dim);
  font-size: 16.5px;
  max-width: 360px;
  text-align: right;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.eyebrow.gold { color: var(--gold); }
.eyebrow .bar { width: 22px; height: 1px; background: currentColor; opacity: 0.5; }

/* ---------- Card base + cursor spotlight ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    background 0.3s var(--ease);
}
.card.hoverable { position: relative; overflow: hidden; }
.card.hoverable:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  background: var(--surface-2);
}
/* soft gold light that follows the cursor */
.card.hoverable::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--gold) 10%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.card.hoverable:hover::before { opacity: 1; }
.card.hoverable > * { position: relative; z-index: 1; }

/* ---------- Hero ---------- */
.hero { padding-top: 56px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: 20px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  padding: 48px;
  min-height: 540px;
}
.hero-text h1 {
  font-size: clamp(44px, 6vw, 82px);
  margin-top: 26px;
}
.hero-text .lead {
  color: var(--text-dim);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  max-width: 520px;
  margin-top: 28px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: auto;
  padding-top: 40px;
}

.hero-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  min-height: 540px;
}
.ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.ph-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: #141413;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02) 0 11px,
    rgba(255, 255, 255, 0) 11px 22px
  );
  color: var(--text-faint);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.hero-photo.no-img .ph-fallback { display: flex; }
.photo-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(10, 10, 9, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 243, 235, 0.12);
  font-size: 13.5px;
  font-weight: 600;
}
.photo-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.hero-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 160px;
  background: linear-gradient(to top, rgba(7, 7, 7, 0.6), transparent);
  z-index: 1;
  pointer-events: none;
}

/* ---------- Directions bento ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.dir-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
}
.dir-lead { grid-column: span 7; grid-row: span 2; }
.dir-b { grid-column: span 5; }
.dir-c { grid-column: span 5; }
.dir-d { grid-column: span 4; }
.dir-f { grid-column: span 4; }
.dir-e { grid-column: span 4; }

.cat {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.dir-card h3 {
  font-size: clamp(24px, 2.4vw, 31px);
  margin-top: 14px;
  letter-spacing: -0.03em;
}
.dir-card .desc {
  color: var(--text-dim);
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.55;
  max-width: 460px;
}
.arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 26px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--text);
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.arrow svg { width: 17px; height: 17px; transition: transform 0.2s var(--ease); }
.dir-card:hover .arrow { color: var(--gold); gap: 13px; }
.dir-card:hover .arrow svg { transform: translateX(2px); }

/* animated category icons */
/* hover-reveal CTA — a whole button that slides down from the top edge, pushing content down */
.dir-reveal {
  align-self: flex-start;
  overflow: hidden;
  max-height: 0;
  margin-bottom: 0;
  transition: max-height 0.42s var(--ease), margin-bottom 0.42s var(--ease);
}
.dir-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--text);
  color: #14110a;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  border-radius: 11px;
  padding: 11px 18px;
  white-space: nowrap;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.42s var(--ease), opacity 0.25s var(--ease);
}
.dir-cta svg { width: 16px; height: 16px; }
.dir-card:hover .dir-reveal,
.dir-card:focus-within .dir-reveal { max-height: 60px; margin-bottom: 22px; }
.dir-card:hover .dir-cta,
.dir-card:focus-within .dir-cta { transform: translateY(0); opacity: 1; }

.feat-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.feat-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--text-dim);
  line-height: 1.4;
}
.feat-list svg {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  color: var(--gold);
}

/* social brand buttons (blog card) */
.soc-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}
.soc-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform 0.18s var(--ease), filter 0.2s var(--ease);
}
.soc-btn svg { width: 18px; height: 18px; flex: none; display: block; }
.soc-th svg { width: 20px; height: 20px; }
.soc-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.soc-btn:active { transform: translateY(0); }
.soc-tg { background: #2aabee; color: #fff; }
.soc-ig { background: linear-gradient(125deg, #feda75, #fa7e1e 28%, #d62976 58%, #962fbf 82%, #4f5bd5); color: #fff; }
.soc-yt { background: #ff0000; color: #fff; }
.soc-th { background: #f3f2ec; color: #0a0a0a; }

/* lead / accent card */
.dir-lead {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 55%),
    var(--surface);
  border-color: var(--gold-line);
}
.dir-lead:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.dir-lead .cat { color: var(--gold); }
.dir-lead h3 { font-size: clamp(28px, 3.2vw, 42px); }
.dir-lead .desc { font-size: 17.5px; max-width: 540px; }
.dir-lead .arrow { color: var(--gold); }
.tag-lead {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dir-lead .top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ---------- Cases (unified, data-driven) ---------- */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.case-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  overflow: hidden;
  color: inherit;
}
.case-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--gold) 10%, transparent),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.case-card:hover::before { opacity: 1; }
.case-card > * { position: relative; z-index: 1; }
.case-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-3px);
  background: var(--surface-2);
}
/* photo */
.case-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  overflow: hidden;
}
.case-photo image-slot { display: block; width: 100%; height: 100%; }
.case-niche {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 9px;
  background: rgba(10, 10, 9, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 243, 235, 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}
.case-niche svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--gold);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* body */
.case-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 26px 28px 28px;
}
.case-client { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.case-metric { margin-top: 14px; }
.case-num {
  display: block;
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--gold);
}
.case-num .unit {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  margin-top: 11px;
  line-height: 1.35;
}
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.case-tag {
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.015);
  white-space: nowrap;
}
.case-note {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-faint);
  line-height: 1.45;
}
.case-note b { color: var(--text-dim); font-weight: 600; }
.case-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-dim);
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.case-go svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.case-card:hover .case-go { color: var(--gold); gap: 11px; }
.case-card:hover .case-go svg { transform: translateX(2px); }

/* "all cases" tile */
.case-cat {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}
.case-cta {
  padding: 34px;
  justify-content: space-between;
  background:
    radial-gradient(130% 110% at 100% 0%, var(--gold-soft), transparent 60%),
    var(--surface);
  border-color: var(--gold-line);
}
.case-cta:hover { border-color: color-mix(in oklab, var(--gold) 50%, transparent); }
.case-cta .case-cat { color: var(--gold); text-align: left; }
.cta-big {
  font-size: clamp(27px, 2.8vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-top: 18px;
}
.case-cta .case-go { color: var(--gold); }

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: stretch;
}
.about-main { grid-column: span 8; padding: 48px; }
.about-main h2 {
  font-size: clamp(26px, 3vw, 38px);
  max-width: 18ch;
}
.about-main p {
  color: var(--text-dim);
  font-size: 17.5px;
  line-height: 1.6;
  margin-top: 22px;
  max-width: 60ch;
}
.about-main p + p { margin-top: 16px; }
.about-side {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stat-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 34px;
}
.stat-card .n {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.stat-card .n.gold { color: var(--gold); }
.stat-card .l { color: var(--text-dim); font-size: 15px; margin-top: 8px; }

/* ---------- Contact ---------- */
.contact-card {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--gold) 7%, transparent), transparent 50%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 52px;
  align-items: center;
}
.contact-card h2 { font-size: clamp(28px, 3.4vw, 44px); }
.contact-card .lead {
  color: var(--text-dim);
  font-size: 17.5px;
  line-height: 1.55;
  margin-top: 20px;
  max-width: 42ch;
}
.contact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 28px;
  font-size: 15px;
  color: var(--text-dim);
}
.contact-meta a { transition: color 0.2s var(--ease); }
.contact-meta a:hover { color: var(--gold); }

form { display: flex; flex-direction: column; gap: 13px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 7px;
  letter-spacing: 0.01em;
}
.field input {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 17px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus {
  outline: none;
  border-color: var(--gold-line);
  background: rgba(255, 255, 255, 0.04);
}
form .btn { margin-top: 6px; width: 100%; }
.form-note { font-size: 13px; color: var(--text-faint); text-align: center; margin-top: 2px; }
.form-ok {
  display: none;
  padding: 15px 17px;
  border-radius: var(--radius-sm);
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--border); padding: 56px 0 48px; margin-top: 32px; }
.foot-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.foot-about { max-width: 320px; }
.foot-about p { color: var(--text-dim); font-size: 15px; margin-top: 14px; line-height: 1.55; }
.foot-soc { display: flex; gap: 10px; margin-top: 22px; }
.foot-soc a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.foot-soc a:hover { color: var(--gold); border-color: var(--gold-line); transform: translateY(-2px); }
.foot-soc svg { width: 19px; height: 19px; }
.foot-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.foot-col h3 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 16px;
}
.foot-col a {
  display: block;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 12px;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.foot-col a:hover { color: var(--text); }
.foot-bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-faint);
  font-size: 13.5px;
}
.foot-bottom span { white-space: nowrap; }

/* ---------- Reveal animation (safe pattern) ----------
   Content is visible by default. Only when JS confirms motion
   is allowed AND IntersectionObserver exists do we add the
   `anim` class to <html>, which hides + animates reveals in.
   A failsafe in site.js forces `.in` shortly after load. */
.reveal { transition: opacity 0.62s var(--ease), transform 0.62s var(--ease); }
html.anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
html.anim .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim .reveal { opacity: 1; transform: none; }
  .card.hoverable:hover, .case-card:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-text { min-height: auto; padding: 38px 30px; }
  .hero-photo { min-height: 440px; }
  .dir-lead, .dir-b, .dir-c, .dir-d, .dir-e, .dir-f { grid-column: span 12; grid-row: auto; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
  .about-main, .about-side { grid-column: span 12; }
  .about-side { flex-direction: row; }
  .contact-card { grid-template-columns: 1fr; gap: 36px; padding: 38px 30px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .sec-sub { text-align: left; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .sec-pad { padding: 64px 0; }
  .wrap { padding: 0 18px; }
  .card { padding: 26px; }
  .hero-text { padding: 30px 24px; }
  .hero-actions .btn { flex: 1; }
  .cases-grid { grid-template-columns: 1fr; }
  .talks-grid { grid-template-columns: 1fr; }
  .about-side { flex-direction: column; }
  .header-cta { padding: 9px 15px; font-size: 13.5px; }
  .contact-card { padding: 30px 22px; }
}

/* case card real images — заполняют область карточки край-в-край */
.case-photo img.case-img{display:block;width:100%;height:100%;object-fit:cover}

/* honeypot anti-spam field — hidden from humans, visible to bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- FAQ (native details, no JS) ---------- */
.faq-list { display: grid; gap: 12px; max-width: 860px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.faq-item[open], .faq-item:hover { border-color: var(--border-hover); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  color: var(--gold);
  font-size: 24px;
  line-height: 1;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a {
  padding: 0 24px 22px;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.62;
}
.faq-item .faq-a a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.faq-item .faq-a a:hover { border-color: var(--gold); }
.faq-item .faq-a b { color: var(--text); font-weight: 700; }

/* ---------- Talks / выступления ---------- */
.talks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.talk-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.talk-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  overflow: hidden;
}
.talk-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.4s var(--ease);
  filter: saturate(0.92) brightness(0.94);
}
.talk-card:hover .talk-thumb img { transform: scale(1.04); filter: none; }
.talk-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 7, 7, 0.55));
}
.talk-badge {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 2;
  padding: 6px 11px;
  border-radius: 9px;
  background: rgba(10, 10, 9, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(245, 243, 235, 0.14);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}
.talk-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1408;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s var(--ease), background 0.3s var(--ease);
}
.talk-play svg { width: 26px; height: 26px; margin-left: 2px; }
.talk-card:hover .talk-play { transform: translate(-50%, -50%) scale(1.08); background: color-mix(in oklab, var(--gold) 82%, white); }
.talk-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}
.talk-title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
a.talk-title:hover,
.talk-card:hover .talk-title { color: var(--gold); }

/* autoplay (live) variant */
.talk-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2;
}
.talk-thumb img { transition: opacity 0.4s var(--ease); }
.talk-thumb.yt-loaded img { opacity: 0; }
.talk-card.is-live .talk-thumb::after { display: none; }
.talk-card.is-live { cursor: default; }
.talk-note {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.5;
}
.talk-go {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--text-dim);
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.talk-go svg { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
.talk-card:hover .talk-go { color: var(--gold); gap: 11px; }
.talk-card:hover .talk-go svg { transform: translateX(2px); }

/* ---------- Mobile overrides for late-defined grids ----------
   These must come AFTER the base .talks-grid rule (defined above),
   otherwise the desktop 2-col rule wins on small screens. */
@media (max-width: 760px) {
  .talks-grid { grid-template-columns: 1fr; }
  .talk-title { font-size: 18px; }
}
@media (max-width: 620px) {
  .faq-item summary { padding: 18px 20px; font-size: 16px; }
  .faq-item .faq-a { padding: 0 20px 20px; }
}

/* ===========================================================
   Consulting page (/consulting/) — built on the shared system
   =========================================================== */

/* generic grids */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* compare «обычно vs с нами» */
.cmp-good { border-color: var(--gold-line); background: linear-gradient(160deg, var(--gold-soft), transparent 60%); }
.cmp-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cmp-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--text-dim); }
.cmp-list .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.cmp-list.bad .ic { color: var(--text-faint); }
.cmp-list.good { color: var(--text); }
.cmp-list.good .ic { color: var(--gold); }

/* iceberg */
.ice-tip { display: flex; flex-direction: column; gap: 10px; }
.ice-tip-row { color: var(--text-dim); font-size: 15.5px; line-height: 1.5; }
.ice-water {
  position: relative;
  height: 1px;
  margin: 20px 0 6px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.ice-water span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--bg); padding: 0 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
}
.ice-deep-label { display: block; }
.ice-tip .cat { color: var(--text); }

/* numbered steps */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step-card { display: flex; flex-direction: column; }
.step-num {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--gold); color: #1a1408;
  font-weight: 800; font-size: 18px; letter-spacing: -0.02em;
}
.step-card h3 { font-size: 21px; margin-top: 16px; letter-spacing: -0.02em; }
.step-card .desc { color: var(--text-dim); margin-top: 12px; font-size: 15.5px; line-height: 1.55; }

/* tariffs */
.tariff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tariff-card { position: relative; display: flex; flex-direction: column; }
.tariff-card.is-premium {
  border-color: var(--gold-line);
  background: linear-gradient(165deg, var(--gold-soft), transparent 55%);
}
.tariff-badge {
  position: absolute; right: 22px; top: 22px;
  padding: 6px 12px; border-radius: 99px;
  background: var(--gold); color: #1a1408;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
}
.tariff-emoji { font-size: 30px; line-height: 1; }
.tariff-name { font-size: clamp(22px, 2.2vw, 27px); margin-top: 12px; letter-spacing: -0.03em; }
.tariff-term { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.tariff-price { margin-top: 14px; font-size: 32px; font-weight: 800; letter-spacing: -0.035em; }
.tariff-price .from { font-size: 15px; font-weight: 600; color: var(--text-dim); letter-spacing: 0; }
.tariff-price.req { color: var(--gold); font-size: 26px; }
.tariff-card .feat-list { margin-top: 22px; }
.tariff-result {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 14.5px; line-height: 1.55;
}
.tariff-result b { color: var(--text); font-weight: 700; }
.tariff-card .btn { margin-top: 24px; }

/* client roster */
.roster { display: flex; flex-wrap: wrap; gap: 10px; }
.roster span {
  padding: 9px 16px; border-radius: 99px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-weight: 600; font-size: 14.5px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.roster span:hover { border-color: var(--gold-line); color: var(--text); }

/* ---------- Mobile overrides for consulting grids (must be last) ---------- */
@media (max-width: 900px) {
  .grid-3, .steps-grid, .tariff-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grid-3, .grid-2, .steps-grid, .tariff-grid { grid-template-columns: 1fr; }
  .tariff-badge { right: 18px; top: 18px; }
}

/* ===========================================================
   Consulting — iceberg dive (pinned scrollytelling)
   =========================================================== */
.ib-intro .ib-mk{ background: var(--gold); color:#1a1408; padding:.02em .2em; border-radius:6px; }
.dive{ position:relative; height:480vh; }
.dive-pin{ position:sticky; top:0; height:100svh; overflow:hidden; background:transparent; }
.dive .amb{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0; transition:opacity 1s var(--ease);
  -webkit-mask:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask:linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); }
.dive .amb.deep{ background:
   linear-gradient(180deg, rgba(6,26,38,0) 28%, rgba(5,22,34,.6) 78%, rgba(4,16,26,.85) 100%),
   radial-gradient(70vw 50vw at 50% 120%, rgba(40,150,180,.22), transparent 70%); }
.dive .amb.deep::after{ content:""; position:absolute; inset:0; opacity:.5; mix-blend-mode:screen;
   background:repeating-linear-gradient(8deg, rgba(120,210,235,.05) 0 2px, transparent 2px 80px);
   animation:ibRays 9s linear infinite; }
@keyframes ibRays{ to{ transform:translateX(60px) } }
.dive-pin.underwater .amb.deep{ opacity:1; }

.dive .berg-stage{ position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding-top:30px; z-index:1; }
.dive .berg-hold{ position:relative; display:inline-block; transition:transform .7s var(--ease); }
.dive .berg-hold > img{ display:block; height:72svh; width:auto;
  filter:drop-shadow(0 30px 70px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(120,200,40,.14)); }

.dive .mk6{ position:absolute; transform:translate(-50%,-50%); z-index:4; }
.dive .mk6 .b{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800;
  background:rgba(8,8,7,.66); backdrop-filter:blur(4px); border:1.5px solid rgba(245,243,235,.4); color:var(--text-dim);
  transition:transform .4s var(--ease), background .4s, color .4s, box-shadow .4s, border-color .4s; }
.dive .mk6.active .b{ transform:scale(1.35); background:var(--gold); color:#1a1408; border-color:var(--gold);
  box-shadow:0 0 0 8px rgba(243,200,102,.16), 0 0 26px rgba(243,200,102,.55); }
.dive .mk6.up.active .b{ background:#ff7a1a; border-color:#ff7a1a; box-shadow:0 0 0 8px rgba(255,122,26,.16), 0 0 26px rgba(255,122,26,.55); }
.dive .mk6.loss.active .b{ background:#ff6a5a; border-color:#ff6a5a; box-shadow:0 0 0 8px rgba(255,106,90,.16), 0 0 26px rgba(255,106,90,.55); }

.dive .card-slot{ position:absolute; left:50%; bottom:5svh; transform:translateX(-50%); width:min(720px,92vw); z-index:5; min-height:172px; }
.dive .dcard{ position:absolute; left:0; right:0; bottom:0;
  background:rgba(9,9,8,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(245,243,235,.14); border-top:2px solid var(--gold); border-radius:18px; padding:20px 22px 22px;
  box-shadow:0 26px 70px rgba(0,0,0,.6); opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease); }
.dive .dcard.up{ border-top-color:#ff7a1a } .dive .dcard.loss{ border-top-color:#ff6a5a }
.dive .dcard.active{ opacity:1; transform:none; pointer-events:auto; }
.dive .dcard .top{ display:flex; align-items:center; gap:10px; }
.dive .dcard .num{ width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--gold); color:#1a1408; }
.dive .dcard.up .num{ background:#ff7a1a } .dive .dcard.loss .num{ background:#ff6a5a; color:#1a0a08 }
.dive .dcard .tag{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.dive .dcard .h{ font-weight:800; font-size:clamp(18px,4.6vw,22px); letter-spacing:-.02em; margin-top:12px; line-height:1.15; color:var(--gold); }
.dive .dcard.up .h{ color:#ff9a4a } .dive .dcard.loss .h{ color:#ff8a7a }
.dive .dcard ul{ list-style:none; margin:13px 0 0; padding:0; }
.dive .dcard li{ position:relative; color:var(--text-dim); font-size:14px; line-height:1.45; padding-left:17px; margin-top:7px; }
.dive .dcard li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; }
.dive .dcard .depth{ position:absolute; right:20px; top:18px; font-size:12px; font-weight:800; color:var(--text-faint); font-variant-numeric:tabular-nums; }

.dive .dive-rail{ position:absolute; left:50%; bottom:1.6svh; transform:translateX(-50%); display:flex; gap:7px; z-index:6; }
.dive .dive-rail i{ width:18px; height:4px; border-radius:99px; background:rgba(245,243,235,.18); transition:.3s; }
.dive .dive-rail i.on{ background:var(--gold); }

@media (max-width:760px){
  .dive .berg-stage{ padding-top:18px; }
  .dive .berg-hold > img{ height:auto; width:90vw; }
  .dive .card-slot{ width:94vw; bottom:6svh; }
  .dive .dcard{ padding:16px 17px 18px; }
  .dive .mk6 .b{ width:23px; height:23px; font-size:11px; }
}

/* ---------- client logo wall (marquee) ---------- */
.logos-row{ overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.logos-row + .logos-row{ margin-top:26px; }
.logos-track{ display:flex; align-items:center; gap:58px; width:max-content; animation:logosScroll 46s linear infinite; }
.logos-track.rev{ animation-direction:reverse; animation-duration:54s; }
.logos-row:hover .logos-track{ animation-play-state:paused; }
.logos-track img{ height:26px; width:auto; max-width:132px; object-fit:contain; flex:none;
  filter:brightness(0) invert(1); opacity:.42; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.logos-track img:hover{ opacity:1; transform:scale(1.14); }
@keyframes logosScroll{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .logos-track{ animation:none; } }

/* ===========================================================
   Consulting — lab blocks (hero/steps/tariffs)
   =========================================================== */
:root{ --gold2:#ffd97a; }
.mk{ background:var(--gold); color:#1a1408; padding:.02em .2em; border-radius:6px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* hero */
.lab-hero{ padding:46px 0 24px; }
.lab-hero .grid{ display:grid; grid-template-columns:1.12fr .88fr; gap:44px; align-items:center; }
.lab-hero h1{ font-size:clamp(38px,5.6vw,76px); line-height:1; letter-spacing:-.04em; margin:0; }
.lab-hero .lead{ color:var(--text-dim); font-size:18px; line-height:1.55; margin-top:22px; max-width:560px; }
.hero-actions2{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-trust{ display:flex; gap:30px; margin-top:32px; flex-wrap:wrap; }
.hero-trust div{ display:flex; flex-direction:column; }
.hero-trust b{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--text); }
.hero-trust span{ font-size:13px; color:var(--text-faint); }
.portrait{ position:relative; }
.portrait .frame{ position:relative; border-radius:22px; overflow:hidden; border:1px solid var(--border-hover);
  box-shadow:0 30px 80px rgba(0,0,0,.5); aspect-ratio:4/5; background:var(--surface-2); }
.portrait .frame img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.96) contrast(1.02); }
.portrait::before{ content:""; position:absolute; inset:auto -16px -16px auto; width:78%; height:78%;
  border:2px solid var(--gold); border-radius:22px; z-index:0; }

/* steps with ghost numbers */
.steps2{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.step2{ position:relative; overflow:hidden; }
.step2 .ghost{ position:absolute; right:14px; top:-18px; font-size:120px; font-weight:800; line-height:1;
  color:var(--gold); opacity:.07; letter-spacing:-.05em; }
.step2 h3{ font-size:20px; margin-top:8px; }
.step2 .desc{ color:var(--text-dim); font-size:15px; line-height:1.55; margin-top:12px; }
.step2 .sn{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--gold); color:#1a1408; font-weight:800; }

/* tariffs with gantt */
.tariffs2{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.tar{ position:relative; display:flex; flex-direction:column; }
.tar.prem{ border-color:var(--gold-line); background:linear-gradient(168deg,var(--gold-soft),transparent 52%); box-shadow:0 0 0 1px var(--gold-line), 0 24px 70px rgba(243,200,102,.08); }
.tar .badge{ position:absolute; right:20px; top:20px; background:var(--gold); color:#1a1408; font-size:11.5px; font-weight:800; padding:6px 12px; border-radius:99px; }
.tar .emoji{ font-size:30px; }
.tar h3{ font-size:25px; margin-top:12px; letter-spacing:-.03em; }
.tar .term{ display:block; margin-top:8px; font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.tar .price{ margin-top:14px; font-size:20px; font-weight:800; }
.tar .price .from{ font-size:15px; font-weight:600; color:var(--text-dim); }
.tar .price .big{ font-size:34px; letter-spacing:-.03em; }
.tar .price.req .big{ color:var(--gold); }
.gantt{ margin-top:18px; }
.gantt .row{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; margin-top:8px; }
.gantt .rl{ font-size:12.5px; color:var(--text-dim); }
.gantt .bar{ height:8px; border-radius:99px; background:var(--surface-2); position:relative; overflow:hidden; }
.gantt .bar i{ position:absolute; top:0; bottom:0; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--gold2)); }
.tar .feat-list{ margin-top:18px; }
.tar .res{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border); color:var(--text-dim); font-size:14px; line-height:1.55; }
.tar .res b{ color:var(--text); }
.tar .btn{ margin-top:20px; }

@media (max-width:980px){
  .lab-hero .grid{ grid-template-columns:1fr; gap:32px; }
  .portrait{ max-width:420px; }
  .steps2,.tariffs2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .steps2,.tariffs2{ grid-template-columns:1fr; }
  .lab-hero h1{ font-size:clamp(34px,9vw,52px); }
  .hero-trust{ gap:22px; }
}

/* ============ CASE DETAIL PAGES ============ */
.crumbs{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--text-faint); margin-bottom:26px; flex-wrap:wrap; }
.crumbs a{ color:var(--text-faint); text-decoration:none; }
.crumbs a:hover{ color:var(--gold); }
.crumbs .sep{ opacity:.5; }
.crumbs .cur{ color:var(--text-muted); }

.case-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:30px; }
.case-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px 24px; }
.case-kpi b{ display:block; font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.03em; color:var(--gold); line-height:1; }
.case-kpi span{ display:block; margin-top:10px; font-size:13px; color:var(--text-faint); }

.case-meta{ display:flex; flex-wrap:wrap; gap:14px 34px; align-items:center; margin-top:30px; padding:20px 24px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px; }
.case-meta .m-l{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
.case-meta .m-v{ font-size:15px; font-weight:600; color:var(--text); margin-top:3px; }
.case-meta .m-logo{ margin-left:auto; height:40px; background:#fff; padding:5px 10px; border-radius:8px; }

.case-prose{ max-width:780px; font-size:17px; line-height:1.7; color:var(--text-muted); }
.case-prose h2{ font-size:clamp(24px,3.4vw,32px); color:var(--text); letter-spacing:-.02em; margin:48px 0 16px; }
.case-prose h3{ font-size:20px; color:var(--text); margin:32px 0 12px; }
.case-prose h4,
.case-prose .case-label{ font-size:15px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); margin:24px 0 10px; }
.case-prose p{ margin:0 0 18px; }
.case-prose strong{ color:var(--text); font-weight:700; }
.case-prose ul{ margin:0 0 22px; padding-left:22px; }
.case-prose li{ margin-bottom:9px; }
.case-prose ul.clean{ list-style:none; padding-left:0; }
.case-prose ul.clean li::before{ content:"— "; color:var(--gold); }

.case-call{ border-left:3px solid var(--gold); padding:6px 0 6px 22px; margin:28px 0; font-style:italic;
  color:var(--text); font-size:18px; line-height:1.6; }

.case-funnel{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; margin:30px 0; }
.case-funnel .fn-n{ font-size:30px; font-weight:800; color:var(--text); letter-spacing:-.02em; }
.case-funnel .fn-n.hl{ color:var(--gold); }
.case-funnel .fn-l{ font-size:13px; color:var(--text-faint); max-width:340px; }
.case-funnel .fn-a{ font-size:22px; color:var(--gold); opacity:.6; line-height:1; margin:4px 0; }

.case-box{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px; margin:26px 0; }
.case-box.bad{ border-color:rgba(229,90,90,.35); background:rgba(229,90,90,.07); }
.case-box .ok{ color:#7bd88f; }
.case-box .no{ color:#e9836f; }

.case-pills{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0; }
.case-pill{ padding:10px 18px; border-radius:999px; border:1px solid var(--gold); color:var(--gold);
  background:rgba(243,200,102,.08); font-size:14px; font-weight:600; }

.case-cta{ background:var(--surface); border:1px solid var(--border-hover); border-radius:20px; padding:30px;
  margin:40px 0 0; text-align:center; }
.case-cta h3{ font-size:22px; color:var(--text); margin-bottom:8px; }
.case-cta p{ color:var(--text-muted); margin-bottom:20px; }

@media (max-width:680px){
  .case-kpis{ grid-template-columns:1fr; }
  .case-meta .m-logo{ margin-left:0; }
  .case-prose{ font-size:16px; }
}

/* ============ ARTICLE PAGES ============ */
.art-meta{ display:flex; gap:18px; flex-wrap:wrap; color:var(--text-faint); font-size:13px; margin-top:16px; }
.art-lede{ font-size:19px; line-height:1.6; color:var(--text); margin:22px 0 0; padding:18px 22px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; }
.art-author{ display:flex; gap:16px; align-items:center; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; padding:18px 22px; margin:38px 0 0; }
.art-author img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.art-author .a-n{ font-weight:700; color:var(--text); }
.art-author .a-r{ font-size:13px; color:var(--text-faint); margin-top:2px; }
.art-related{ display:flex; gap:14px; flex-wrap:wrap; margin-top:18px; }

/* ============ UNIFIED HEADER NAV (dropdown + mobile burger) ============ */
.nav-dd{ position:relative; }
.nav-dd-btn{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  font:inherit; font-weight:600; letter-spacing:-.01em; color:var(--text-muted); padding:0; transition:color .2s var(--ease); }
.nav-dd-btn svg{ width:13px; height:13px; transition:transform .2s var(--ease); }
.nav-dd:hover .nav-dd-btn, .nav-dd:focus-within .nav-dd-btn{ color:var(--gold); }
.nav-dd:hover .nav-dd-btn svg, .nav-dd:focus-within .nav-dd-btn svg{ transform:rotate(180deg); }
.nav-dd-menu{ position:absolute; top:100%; left:50%; margin-top:14px; transform:translateX(-50%) translateY(8px);
  min-width:264px; background:var(--surface-2); border:1px solid var(--border-hover); border-radius:14px; padding:8px;
  display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transition:.18s var(--ease);
  box-shadow:0 24px 60px rgba(0,0,0,.5); z-index:60; }
.nav-dd-menu::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } /* hover bridge */
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav-dd-menu a{ padding:11px 14px; border-radius:9px; font-size:14.5px; font-weight:500; color:var(--text-muted); white-space:nowrap; }
.nav-dd-menu a:hover{ background:var(--surface); color:var(--text); }

.nav-burger{ display:none; width:42px; height:42px; border:1px solid var(--border-hover); border-radius:11px;
  background:var(--surface); cursor:pointer; padding:0; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.nav-burger span{ display:block; width:18px; height:2px; background:var(--text); border-radius:2px; transition:.22s var(--ease); }
#site-header.menu-open .nav-burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
#site-header.menu-open .nav-burger span:nth-child(2){ opacity:0; }
#site-header.menu-open .nav-burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-mobile{ display:none; }
@media (max-width:980px){
  .nav-burger{ display:flex; }
  .header-cta{ display:none; }
  .nav-mobile{ display:flex; flex-direction:column; position:fixed; top:60px; left:0; right:0;
    height:calc(100vh - 60px); height:calc(100dvh - 60px);
    background:var(--bg); padding:14px 22px 30px; overflow-y:auto; z-index:55;
    transform:translateX(100%); visibility:hidden; transition:transform .26s var(--ease), visibility .26s; }
  #site-header.menu-open .nav-mobile{ transform:translateX(0); visibility:visible; }
  .nav-mobile a{ padding:15px 6px; font-size:17px; font-weight:600; color:var(--text); border-bottom:1px solid var(--border); }
  .nav-mobile a.nav-sub{ padding-left:18px; font-size:15.5px; font-weight:500; color:var(--text-muted); }
  .nav-mobile .nav-mobile-group{ padding:18px 6px 4px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }
  .nav-mobile .nav-mobile-cta{ margin-top:20px; text-align:center; border-bottom:0; color:#1a1408; }
  body.nav-lock{ overflow:hidden; }
}

/* ============ TALK VIDEO FACADE (click-to-play, no 3rd-party cookies on load) ============ */
.talk-thumb[data-yt]{ cursor:pointer; }
.talk-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.talk-thumb.yt-loaded img,
.talk-thumb.yt-loaded .talk-play,
.talk-thumb.yt-loaded::after{ display:none; }

/* ============ HIDE YANDEX METRIKA WIDGETS (informer / data-collection notice) ============ */
a[href*="metrika.yandex.ru"],
img[src*="informer.yandex"],
[id*="yandex_metrika_informer"],
[class*="ym-notification"], [class*="ymNotification"], [class*="ym-notice"],
[class*="metrika-informer"] { display: none !important; }