/* ============================================================
   SELECTIVE TEAM — кейсы: страница-сетка + детальная страница
   Зависит от colors_and_type.css и assets/site.css (токены, чрома)
   ============================================================ */

/* ---------- Logo (real Selective Team mark, hotlinked dark wordmark) ---------- */
.st-logoimg{ height:34px; width:auto; display:block; flex:none; }
.foot-logo-pill{ display:inline-flex; background:#fff; padding:9px 15px; border-radius:10px; box-shadow:var(--sh-1); }
.foot-logo-pill img{ height:26px; width:auto; display:block; }
@media (max-width:520px){ .st-logoimg{ height:28px; } }

/* ---------- Logo (Selective Team — pure-type wordmark) ----------
   Чтобы поставить настоящий логотип: замените внутренность <a class="nav__logo-wrap">
   на <img src="logo.svg" class="st-logoimg"> (файл положить в assets/). */
.stlogo{ display:inline-flex; align-items:baseline; gap:.32em; font-weight:800; font-size:24px;
  letter-spacing:-.03em; color:var(--ink); line-height:1; white-space:nowrap; text-transform:none; }
.stlogo__mark{ display:none; }
.stlogo__tx{ display:inline-flex; flex-direction:row; align-items:baseline; gap:.3em; }
.stlogo small{ display:inline; font-size:1em; font-weight:800; letter-spacing:-.03em; color:var(--orange);
  text-transform:none; margin:0; }
.stlogo--foot{ color:#fff; }
.stlogo--foot small{ color:#ff9b6e; }
@media (max-width:520px){ .stlogo{ font-size:21px; } }

/* real Selective wordmark — dark logo, shows on light header as-is */
.foot-logo-pill img{ height:30px; width:auto; display:block; }

/* ============================================================
   HERO (кейсы)
   ============================================================ */
.cases-hero{ position:relative; overflow:hidden; padding: clamp(58px,8vw,108px) 0 clamp(40px,5vw,64px); }
.cases-hero__inner{ position:relative; z-index:2; max-width:1000px; }
.cases-hero .h1{ margin-top:18px; }
.cases-hero__sub{ margin-top:24px; max-width:680px; }
.hero-stats{ display:flex; flex-wrap:wrap; gap:38px 56px; margin-top:46px; }
.hero-stat__num{ font-weight:800; font-size:clamp(34px,4.4vw,56px); letter-spacing:-.03em; color:var(--orange); line-height:1; font-variant-numeric:tabular-nums; }
.hero-stat__cap{ margin-top:10px; font-weight:600; color:var(--muted); font-size:15px; max-width:200px; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filterbar{ position:sticky; top:62px; z-index:40; background:rgba(243,242,240,.9);
  backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line); }
.filterbar__row{ display:flex; align-items:center; gap:18px; padding:16px 0; flex-wrap:wrap; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; flex:1; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line); background:#fff; color:var(--body); font-weight:700; font-size:13.5px;
  cursor:pointer; transition:.2s var(--ease); white-space:nowrap; }
.chip:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-1px); }
.chip.active{ background:var(--orange); border-color:var(--orange); color:#fff; box-shadow:var(--sh-orange); }
.chip svg{ width:15px; height:15px; }
.chip__n{ font-size:11px; opacity:.7; font-variant-numeric:tabular-nums; }

/* view switcher (3 card styles) */
.viewsw{ display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; gap:3px; flex:none; }
.viewsw button{ border:0; background:transparent; width:38px; height:34px; border-radius:var(--r-pill); cursor:pointer;
  display:grid; place-items:center; color:var(--muted); transition:.2s var(--ease); }
.viewsw button svg{ width:18px; height:18px; }
.viewsw button.active{ background:var(--orange); color:#fff; }

/* ============================================================
   GRID + TILES
   ============================================================ */
.cases-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
.tile{ position:relative; display:flex; flex-direction:column; min-height:300px; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  text-decoration:none; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.tile:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); border-color:transparent; }
.tile__top{ padding:24px 24px 0; display:flex; align-items:center; gap:10px; }
.tile__eye{ font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); }
.tile__rx{ margin-left:auto; font-weight:800; font-size:10px; letter-spacing:.1em; padding:3px 8px; border-radius:var(--r-pill);
  text-transform:uppercase; }
.tile__rx.is-rx{ background:var(--orange-soft); color:var(--orange-700); }
.tile__rx.is-otc{ background:var(--green-soft); color:var(--green); }
.tile__body{ padding:14px 24px 22px; display:flex; flex-direction:column; flex:1; }
.tile__hl{ font-weight:800; letter-spacing:-.03em; line-height:.95; color:var(--orange); font-variant-numeric:tabular-nums; }
.tile__hl .num{ font-size:clamp(40px,4.6vw,62px); }
.tile__hl .suf,.tile__hl .pre{ font-size:.5em; font-weight:800; }
.tile__hl.is-big{ font-size:clamp(26px,2.8vw,34px); line-height:1.05; }
.tile__hlcap{ margin-top:8px; font-size:13.5px; color:var(--muted); font-weight:600; line-height:1.35; }
.tile__cat{ margin-top:auto; padding-top:18px; font-weight:800; font-size:19px; line-height:1.12; color:var(--ink);
  letter-spacing:-.01em; text-transform:uppercase; }
.tile__kick{ margin-top:9px; font-size:14px; color:var(--muted); line-height:1.4; }
.tile__foot{ display:flex; align-items:center; gap:10px; padding:0 24px 22px; margin-top:16px; color:var(--orange);
  font-weight:700; font-size:13.5px; }
.tile__arrow{ width:32px; height:32px; flex:none; display:grid; place-items:center; background:var(--orange); color:#fff;
  border-radius:var(--r-xs); transition:transform .25s var(--ease); }
.tile:hover .tile__arrow{ transform:translate(3px,-3px); }
.tile__foot span{ margin-left:auto; opacity:0; transform:translateX(-6px); transition:.3s var(--ease); }
.tile:hover .tile__foot span{ opacity:1; transform:none; }

/* tone variants */
.tile.t-orange{ background:var(--orange); border-color:var(--orange); }
.tile.t-orange .tile__eye{ color:#ffd9c8; }
.tile.t-orange .tile__hl,.tile.t-orange .tile__cat{ color:#fff; }
.tile.t-orange .tile__hlcap,.tile.t-orange .tile__kick{ color:rgba(255,255,255,.85); }
.tile.t-orange .tile__rx.is-rx{ background:rgba(255,255,255,.2); color:#fff; }
.tile.t-orange .tile__rx.is-otc{ background:rgba(255,255,255,.2); color:#fff; }
.tile.t-orange .tile__foot{ color:#fff; }
.tile.t-orange .tile__arrow{ background:#fff; color:var(--orange); }

.tile.t-navy{ background:var(--navy); border-color:var(--navy); }
.tile.t-navy .tile__eye{ color:#ff9b6e; }
.tile.t-navy .tile__hl{ color:#ff8a5c; }
.tile.t-navy .tile__cat{ color:#fff; }
.tile.t-navy .tile__hlcap,.tile.t-navy .tile__kick{ color:#aebfd2; }
.tile.t-navy .tile__rx.is-rx{ background:rgba(255,255,255,.14); color:#ffcdb9; }
.tile.t-navy .tile__rx.is-otc{ background:rgba(255,255,255,.14); color:#a9e3c3; }
.tile.t-navy .tile__foot{ color:#ff9b6e; }
.tile.t-navy .tile__arrow{ background:var(--orange); color:#fff; }

.tile.t-peach{ background:var(--orange-soft-2); border-color:#f6ddd2; }

/* green highlight tile — «300+ кейсов», без перехода */
.tile.t-green{ background:var(--green); border-color:var(--green); }
.tile.t-green .tile__hl{ color:#fff; }
.tile.t-green .tile__cat{ color:#fff; }
.tile.t-green .tile__hlcap,.tile.t-green .tile__kick{ color:rgba(255,255,255,.88); }
.tile.t-green .tile__foot{ color:#fff; }
.tile.t-green .tile__arrow{ background:#fff; color:var(--green); }
.tile--cap{ cursor:default; min-height:300px; }
.tile--cap:hover{ transform:none; box-shadow:var(--sh-2); border-color:var(--green); }
.tile--cap .tile__hl .num{ font-size:clamp(48px,5.4vw,72px); }
.tile--cap .tile__body{ flex:1; justify-content:center; }

/* dashboard layout */
.dgrid{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px; }
.dgrid .col-7{ grid-column:span 7; } .dgrid .col-5{ grid-column:span 5; }
.dgrid .col-6{ grid-column:span 6; } .dgrid .col-12{ grid-column:span 12; } .dgrid .col-3{ grid-column:span 3; }
.kpi__val .suf{ font-size:.5em; font-weight:800; color:var(--orange); }
.lvl-row{ display:flex; gap:10px; margin-top:22px; }
.lvl{ flex:1; padding:16px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); text-align:center; }
.lvl b{ display:block; font-weight:800; font-size:26px; color:var(--orange); letter-spacing:-.02em; }
.lvl.is-top b{ color:var(--green); }
.lvl span{ font-size:12px; color:var(--muted); font-weight:600; }
.dash-msg{ background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:clamp(34px,5vw,60px); position:relative; overflow:hidden; }
.dash-msg .h2{ color:#fff; }

/* full-width live counter band (green) */
.megacount{ background:var(--green); color:#fff; padding:clamp(56px,8vw,112px) 0; position:relative; overflow:hidden; text-align:center; }
.megacount .bg-motif svg{ opacity:.18; }
.megacount__inner{ position:relative; z-index:2; }
.megacount__eyebrow{ font-weight:800; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.85); }
.megacount__head{ margin-top:16px; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(30px,5vw,64px); text-wrap:balance; }
.megacount__n{ font-variant-numeric:tabular-nums; color:#fff; display:inline-block; }
.megacount__n.bump{ animation:mcbump .42s var(--ease); }
@keyframes mcbump{ 0%{ transform:scale(1);} 32%{ transform:scale(1.16); } 100%{ transform:scale(1);} }
.megacount__live{ margin-top:28px; display:inline-flex; align-items:center; gap:12px; font-weight:700;
  font-size:clamp(15px,1.8vw,20px); color:rgba(255,255,255,.95); opacity:0; transform:translateY(10px); transition:.7s var(--ease); }
.megacount__live.in{ opacity:1; transform:none; }
.livedot{ width:13px; height:13px; border-radius:50%; background:#fff; flex:none; animation:livepulse 1.8s infinite; }
@keyframes livepulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55);} 70%{ box-shadow:0 0 0 15px rgba(255,255,255,0);} 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0);} }
@media (max-width:1040px){
  .dgrid{ grid-template-columns:repeat(6,1fr); }
  .dgrid .col-7,.dgrid .col-5,.dgrid .col-6,.dgrid .col-12{ grid-column:span 6; }
  .dgrid .col-3{ grid-column:span 3; }
}
@media (max-width:620px){
  .dgrid{ grid-template-columns:1fr; }
  .dgrid .col-7,.dgrid .col-5,.dgrid .col-6,.dgrid .col-12,.dgrid .col-3{ grid-column:span 1; }
  .lvl-row{ flex-direction:column; }
}

/* decorative concentric motif inside dark tiles */
.tile__motif{ position:absolute; right:-70px; top:-70px; width:220px; height:220px; z-index:-1; opacity:.5; pointer-events:none; }
.tile.t-peach .tile__motif,.tile.t-white .tile__motif{ opacity:.6; }

/* ---- variant: INDEX (compact list rows) ---- */
.cases-grid.v-index{ grid-template-columns:1fr; gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:#fff; }
.cases-grid.v-index .tile{ flex-direction:row; align-items:center; min-height:0; border:0; border-top:1px dotted #dad9d7; border-radius:0;
  background:#fff !important; padding:0; gap:20px; }
.cases-grid.v-index .tile:first-child{ border-top:0; }
.cases-grid.v-index .tile:hover{ transform:none; box-shadow:none; background:var(--orange-soft-2) !important; }
.cases-grid.v-index .tile__top,.cases-grid.v-index .tile__motif{ display:none; }
.cases-grid.v-index .tile__body{ flex-direction:row; align-items:center; gap:22px; padding:20px 24px; width:100%; }
.cases-grid.v-index .tile__hl{ order:3; min-width:160px; text-align:right; color:var(--orange) !important; }
.cases-grid.v-index .tile__hl .num{ font-size:30px; }
.cases-grid.v-index .tile__hlcap{ display:none; }
.cases-grid.v-index .tile__cat{ order:1; margin:0; padding:0; flex:none; width:300px; font-size:16px; color:var(--ink) !important; }
.cases-grid.v-index .tile__kick{ order:2; margin:0; flex:1; color:var(--muted) !important; }
.cases-grid.v-index .tile__foot{ order:4; padding:0 24px 0 0; margin:0; }
.cases-grid.v-index .tile__foot span{ display:none; }

/* ---- variant: COVER (image/banner forward) ---- */
.cases-grid.v-cover .tile{ background:#fff; }
.cases-grid.v-cover .tile__cover{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; overflow:hidden; }
.cases-grid.v-cover .tile__cover .tile__hl{ color:#fff; position:relative; z-index:2; text-align:center; padding:0 18px; }
.cases-grid.v-cover .tile__cover .tile__hlcap{ color:rgba(255,255,255,.9); text-align:center; padding:0 26px; }
.tile__cover{ display:none; }
.cases-grid:not(.v-cover) .tile__cover{ display:none; }

/* hide cover in non-cover modes already handled; in cover mode hide top number block */
.cases-grid.v-cover .tile__body > .tile__hl,
.cases-grid.v-cover .tile__body > .tile__hlcap{ display:none; }

/* ============================================================
   DETAIL PAGE
   ============================================================ */
.case-hero{ position:relative; overflow:hidden; padding: clamp(40px,5vw,70px) 0 clamp(30px,4vw,46px); border-bottom:1px solid var(--line); }
.case-back{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:var(--muted); transition:.2s; }
.case-back:hover{ color:var(--orange); gap:11px; }
.case-hero__grid{ display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(28px,4vw,56px); align-items:end; margin-top:30px; }
.case-hero .h1{ margin-top:16px; font-size:clamp(30px,4.2vw,52px); }
.case-hero__kick{ margin-top:20px; font-size:clamp(17px,1.6vw,21px); color:var(--muted); line-height:1.5; max-width:620px; }
.case-badges{ display:flex; gap:10px; align-items:center; }
.badge-pf{ font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--orange);
  background:var(--orange-soft-2); border:1px solid #f3d9cd; padding:5px 12px; border-radius:var(--r-pill); }
.badge-rx{ font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:var(--r-pill); }
.badge-rx.is-rx{ background:var(--orange); color:#fff; }
.badge-rx.is-otc{ background:var(--green); color:#fff; }

/* hero big metric card */
.case-hl-card{ background:var(--navy); color:#fff; border-radius:var(--r-md); padding:32px 30px; box-shadow:var(--sh-2); position:relative; overflow:hidden; }
.case-hl-card .num{ font-weight:800; font-size:clamp(46px,6vw,76px); letter-spacing:-.03em; line-height:.92; color:#ff8a5c; font-variant-numeric:tabular-nums; }
.case-hl-card.is-big .num{ font-size:clamp(30px,3.6vw,44px); line-height:1.04; }
.case-hl-card .pre,.case-hl-card .suf{ font-size:.5em; }
.case-hl-card__cap{ margin-top:14px; font-size:15.5px; color:#aebfd2; line-height:1.4; max-width:330px; }

/* meta strip */
.meta-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; background:#fff; margin-top:6px; }
.meta-cell{ padding:22px 24px; border-right:1px solid var(--line); }
.meta-cell:last-child{ border-right:0; }
.meta-cell__l{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); }
.meta-cell__l svg{ width:15px; height:15px; color:var(--orange); }
.meta-cell__v{ margin-top:10px; font-weight:700; color:var(--ink); font-size:16px; line-height:1.3; }
.meta-cell__sub{ font-weight:600; color:var(--muted); font-size:13.5px; margin-top:3px; }

/* two-col task / solution */
.case-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.case-block{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:32px; }
.case-block h3{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:20px; }
.case-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.case-list li{ display:flex; gap:14px; font-size:16px; color:var(--body); line-height:1.45; }
.case-list li::before{ content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:var(--r-xs);
  background:var(--orange-soft); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E84A14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; }

/* start conditions */
.start-row{ display:flex; flex-wrap:wrap; gap:14px; }
.start-pill{ display:flex; align-items:baseline; gap:12px; padding:18px 22px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-2); }
.start-pill b{ font-weight:800; font-size:26px; color:var(--orange); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.start-pill span{ font-size:14px; color:var(--muted); font-weight:600; max-width:230px; line-height:1.3; }

/* results stat tiles */
.res-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.res{ position:relative; padding:26px 22px 22px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; overflow:hidden; }
.res__num{ font-weight:800; font-size:clamp(30px,3vw,42px); letter-spacing:-.02em; color:var(--orange); line-height:1; font-variant-numeric:tabular-nums; }
.res__num.is-green{ color:var(--green); }
.res__num.is-big{ font-size:clamp(22px,2.2vw,28px); }
.res__num .pre,.res__num .suf{ font-size:.55em; font-weight:800; }
.res__cap{ margin-top:12px; font-weight:600; color:var(--muted); font-size:14px; line-height:1.35; }
.res .icon-tile{ position:absolute; top:14px; right:14px; width:30px; height:30px; }

/* before/after vertical bar chart */
.ba-wrap{ background:var(--navy); border-radius:var(--r-md); padding:36px 38px 30px; color:#fff; }
.ba-wrap h3{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:#ff9b6e; font-weight:700; margin-bottom:6px; }
.ba-wrap .ba-sub{ color:#aebfd2; font-size:14.5px; margin-bottom:26px; }
.ba-chart{ display:flex; align-items:flex-end; gap:clamp(24px,5vw,64px); height:300px; padding-left:8px; }
.ba-col{ flex:1; max-width:160px; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.ba-bar{ width:100%; border-radius:var(--r-sm) var(--r-sm) 0 0; height:0; transition:height 1.2s var(--ease-out);
  position:relative; min-height:3px; }
.ba-bar.grown{ height:var(--grown); }
.ba-col:last-child .ba-bar{ background:linear-gradient(180deg,#ff8a5c,var(--orange)); }
.ba-col:not(:last-child) .ba-bar{ background:rgba(255,255,255,.16); }
.ba-val{ position:absolute; top:-34px; left:50%; transform:translateX(-50%); font-weight:800; font-size:22px; white-space:nowrap; }
.ba-lab{ margin-top:14px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#aebfd2; }
.ba-track{ position:relative; flex:1; width:100%; display:flex; align-items:flex-end; }

/* creative slot */
.creative{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:32px; }
.creative h3{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:18px; }
.creative__slots{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.creative image-slot{ width:100%; aspect-ratio:4/5; display:block; border-radius:var(--r-sm); overflow:hidden; }

/* materials gallery (real banners/screens) */
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.mediacard{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.mediacard:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); }
.mediacard__img{ background:var(--surface-2); display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden; }
.mediacard__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.mediacard--fit .mediacard__img img{ object-fit:contain; }
.mediacard figcaption{ padding:14px 18px; font-size:14px; font-weight:600; color:var(--body); }

/* related */
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* ============================================================
   CTA (Обсудим ваш бренд) — из дека Selective
   ============================================================ */
.cta-sel{ background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:clamp(40px,6vw,72px); position:relative; overflow:hidden; }
.cta-sel .h2{ color:#fff; }
.cta-contacts{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
.cta-person{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); padding:24px; }
.cta-person__name{ font-weight:800; font-size:19px; color:#fff; }
.cta-person__role{ color:#aebfd2; font-size:14px; margin-top:4px; }
.cta-person__mail{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; color:#ff9b6e; font-weight:700; font-size:14.5px; }
.cta-person__mail svg{ width:16px; height:16px; }
.cta-person:hover{ background:rgba(255,255,255,.1); }

/* ============================================================
   MOBILE NAV (burger dropdown — links + buttons reachable)
   ============================================================ */
@media (max-width: 940px){
  .nav{ position:relative; flex-wrap:wrap; row-gap:0; }
  .burger{ display:grid !important; place-items:center; width:46px; height:46px; flex:none;
    border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; color:var(--ink); cursor:pointer; }
  .burger svg{ width:22px; height:22px; }
  .nav__links, .nav__cta{ display:none; }
  body.menu-open .nav__links{ display:flex; flex-direction:column; align-items:flex-start; gap:4px;
    width:100%; order:5; padding:14px 0 4px; border-top:1px solid var(--line); margin-top:14px; }
  body.menu-open .nav__links a{ padding:11px 2px; font-size:17px; width:100%; }
  body.menu-open .nav__cta{ display:flex; flex-direction:column; align-items:stretch; gap:10px;
    width:100%; order:6; padding-bottom:8px; }
  body.menu-open .nav__cta .nav__login{ display:inline-flex; padding:11px 2px; }
  body.menu-open .nav__cta .btn{ width:100%; padding:15px 20px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px){
  .cases-grid{ grid-template-columns:repeat(2,1fr); }
  .res-grid{ grid-template-columns:repeat(2,1fr); }
  .case-hero__grid{ grid-template-columns:1fr; gap:28px; }
  .case-hl-card{ max-width:420px; }
  .meta-strip{ grid-template-columns:repeat(2,1fr); }
  .meta-cell:nth-child(2){ border-right:0; }
  .meta-cell{ border-bottom:1px solid var(--line); }
  .cta-contacts{ grid-template-columns:1fr; }
  .related-grid{ grid-template-columns:1fr; }
  .creative__slots{ grid-template-columns:repeat(2,1fr); }
  .media-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .cases-grid{ grid-template-columns:1fr; }
  .case-cols{ grid-template-columns:1fr; }
  .meta-strip{ grid-template-columns:1fr; }
  .meta-cell{ border-right:0; }
  .res-grid{ grid-template-columns:1fr 1fr; }
  .media-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:26px 36px; }
  .filterbar{ top:58px; }
  /* index variant collapses gracefully */
  .cases-grid.v-index .tile__body{ flex-wrap:wrap; gap:6px 16px; }
  .cases-grid.v-index .tile__cat{ width:auto; flex:1 1 100%; }
  .cases-grid.v-index .tile__kick{ flex:1 1 100%; font-size:13px; }
  .cases-grid.v-index .tile__hl{ order:2; min-width:0; text-align:left; }
  .ba-chart{ height:230px; }
}