.sp-grid{--cols:4;--gap:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.sp-grid > *{flex:0 1 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));min-width:0}
@media (max-width:1100px){.sp-grid > *{flex-basis:calc((100% - 2 * var(--gap)) / 3)}}
@media (max-width:760px){.sp-grid > *{flex-basis:calc((100% - var(--gap)) / 2)}}
@media (max-width:460px){.sp-grid > *{flex-basis:100%}}
/* even — ровные ряды: карточки одной высоты, неполный последний ряд
   центрируется базовым justify-content. Правило существует и потому, что
   класс без единого правила в CSS означает потерянный при порте стиль, и
   общий свод справедливо на это краснеет. */
.sp-grid.even{align-items:stretch}
.sp-grid.even > *{flex-grow:0}
.sp-grid.rail{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory}
.sp-grid.rail > *{scroll-snap-align:start;flex:0 0 260px}
[hidden]{display:none!important}

.sp-tscroll{overflow-x:auto;max-width:100%;min-width:0}
table.sp-t{width:100%;border-collapse:collapse;min-width:560px}
table.sp-t td.num{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:640px){
 table.sp-t{min-width:0}
 table.sp-t thead{position:absolute;left:-9999px}
 table.sp-t tr{display:block;margin-bottom:12px}
 table.sp-t td{display:flex;justify-content:space-between;gap:12px}
 table.sp-t td::before{content:attr(data-label);font-weight:600}
}

.sp-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.sp-pager{display:flex;gap:8px;flex-wrap:wrap}
.sp-filters{display:flex;gap:8px;flex-wrap:wrap}
.sp-chip[aria-pressed="true"]{font-weight:600}
.sp-field{display:flex;flex-direction:column;gap:6px}
.sp-zoom{border:0;padding:0;max-width:96vw;max-height:96vh}
.sp-zoom img{display:block;max-width:96vw;max-height:96vh;height:auto}
.sp-gal{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.sp-gal > *{flex:0 1 calc((100% - 32px) / 3);min-width:0}
@media (max-width:700px){.sp-gal > *{flex-basis:100%}}
.sp-shot-link{position:relative;display:block}
.sp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.sp-card{display:flex;flex-direction:column;min-width:0}


@font-face{font-family:Unbounded;src:url(/assets/unbounded.22f9b928.woff2) format('woff2');font-weight:300 800;font-display:swap;font-style:normal}
@font-face{font-family:'Host Grotesk';src:url(/assets/host-grotesk.ce9c9db8.woff2) format('woff2');font-weight:300 800;font-display:swap;font-style:normal}

:root{
--paper:#FBFAF6;--panel:#F2F0E7;--ink:#16211B;--ink-2:#4A5850;--line:#D8D6C7;
--mint:#BADBB9;--olive:#D5D29C;--cream:#F5F3ED;--slate:#1C252C;
--orange:#F1871A;--orange-ink:#A85104;--orange-btn:#A85104;
--leaf-ink:#3E5D3C;--on-dark:#F5F3ED;--on-dark-2:#C3CBC5;
--band:linear-gradient(102deg,#D5D29C 0%,#D5D29C 34%,#BADBB9 100%);
--wrap:1240px;--gutter:28px;
--r-lg:26px;--r-sm:6px;--sh:0 12px 34px rgba(22,33,27,.10);--sh-lift:0 20px 44px rgba(22,33,27,.16);
--ease:cubic-bezier(.2,.7,.3,1);
--display:Unbounded,'Trebuchet MS',system-ui,sans-serif;
--text:'Host Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.sp-body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--text);letter-spacing:.002em}
img{max-width:100%;height:auto}
a{color:var(--orange-ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--orange-btn);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-.012em;margin:0 0 .5em}
h1{font-size:clamp(34px,5.2vw,62px)}
h2{font-size:clamp(26px,3.2vw,40px)}
h3{font-size:clamp(19px,1.7vw,23px)}
p{margin:0 0 1.05em}
.sp-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sp-lede{font-size:clamp(18px,1.55vw,21px);line-height:1.55;color:var(--ink)}
.sp-mute{color:var(--ink-2)}
.sp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- шапка */
.sp-head{position:sticky;top:0;z-index:40;background:rgba(251,250,246,.94);backdrop-filter:blur(9px);border-bottom:1px solid var(--line)}
.sp-head-in{display:flex;align-items:center;gap:20px;min-height:70px;flex-wrap:wrap}
.sp-mark{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink);flex:0 1 auto;min-width:0}
.sp-mark b{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.06em}
.sp-chev{width:.62em;height:.52em;flex:0 0 auto;color:var(--orange)}
/* Словесный знак: домик лежит на перекладине «H» — так его рисует бренд. */
.sp-wm{display:inline-flex;align-items:baseline;white-space:nowrap}
.sp-wm-h{position:relative;display:inline-block}
.sp-wm .sp-chev.in-h{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:.40em;height:.30em;color:var(--orange)}
.sp-nav{display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:auto;min-width:0}
.sp-nav a{color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:600;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.sp-nav a:hover,.sp-nav a[aria-current]{border-bottom-color:var(--orange);color:var(--orange-ink)}

/* ------------------------------------------------------------------ hero */
/* Плита фирменного градиента, из-под которой снизу выступают фотографии.
   Ни центрирования, ни колонки-против-колонки: это композиция витрины. */
.sp-hero{background:var(--band);position:relative;padding:56px 0 0}
.sp-hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:34px;align-items:end}
.sp-hero h1{margin:0 0 14px;color:var(--slate);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.sp-hero h1{display:block;margin:0 0 14px}
.sp-hero-word{display:flex;align-items:center;gap:.06em;font-family:var(--display);font-weight:700;font-size:clamp(44px,8.4vw,116px);line-height:.9;color:var(--slate);letter-spacing:.01em}
.sp-hero-word .sp-chev{width:.42em;height:.34em;color:var(--orange);filter:drop-shadow(0 2px 0 rgba(62,93,60,.2))}
.sp-hero-tag{display:block;font-family:var(--display);font-weight:300;font-size:clamp(16px,1.7vw,23px);line-height:1.28;color:var(--slate);margin:10px 0 20px;letter-spacing:.005em;max-width:22ch}
/* Правило владельца 22.08: текст занимает свою полосу целиком. Мера строки
   держится КОЛОНКАМИ, а не полем справа: 52ch оставляли 235px пустоты в ячейке
   героя, и это ловит страж strandedTextFindings. */
.sp-hero-copy{color:var(--slate);font-size:17px;line-height:1.6;columns:2;column-gap:34px;max-width:none}
.sp-hero-copy p{margin:0;break-inside:avoid}
.sp-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 8px}
/* Цифры героя — не строка карточек, а столбец с волосяными линейками: тот же
   приём, что хвостик под именем плитки. Строка-карточек повторяется у соседних
   сайтов портфеля, и правило похожести требует другой ритм, а не другой тон. */
.sp-facts{display:flex;flex-direction:column;margin-top:22px;padding-bottom:26px}
.sp-fact{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:9px 0;border-top:1px solid rgba(28,37,44,.26)}
.sp-fact b{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,26px);color:var(--slate);line-height:1.05;order:2}
.sp-fact span{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(28,37,44,.74);order:1}
.sp-cat-hero .sp-facts{flex-direction:row;flex-wrap:wrap;gap:0 34px;padding-bottom:0}
.sp-cat-hero .sp-fact{flex:1 1 150px;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px;min-width:0}
.sp-cat-hero .sp-fact b{order:1}
.sp-cat-hero .sp-fact span{order:2}
/* полоса кадров, выходящая из-под плиты на грунт */
.sp-hero-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:6px;position:relative;top:38px}
.sp-hero-strip figure{margin:0;border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);overflow:hidden;box-shadow:var(--sh);background:var(--cream)}
/* Кадры полосы героя — комнатные сцены без вшитого текста (классификатор
   frame-classes отбирает именно такие, контактный лист просмотрен 22.08).
   Обрезка снимает поля потолка и пола, а не подпись, поэтому класс объявлен
   в cropOk браузерного аудита осознанно. */
.sp-hero-strip img,.sp-strip-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sp-hero-pad{height:98px;background:var(--paper)}

/* ---------------------------------------------------------------- полосы */
.sp-sec{padding:64px 0}
.sp-sec.tint{background:var(--panel)}
.sp-sec.mint{background:var(--band)}
.sp-sec.dark{background:var(--slate);color:var(--on-dark)}
.sp-sec.dark h2,.sp-sec.dark h3{color:var(--on-dark)}
.sp-sec.dark .sp-mute,.sp-sec.dark .sp-kick span{color:var(--on-dark-2)}
.sp-sec.dark a{color:var(--olive)}
/* Тёмных поверхностей на сайте ДВЕ (.dark и подвал), и перекрашивать надо обе:
   правило, написанное для одной, оставляет на другой тёмное по тёмному
   (урок honoson). Светлая плашка внутри тёмной полосы наследует светлый текст
   и даёт 1.03:1 — ей нужна своя поверхность, а не только свой цвет. */
.sp-sec.dark .sp-q{background:rgba(245,243,237,.08);border-color:rgba(245,243,237,.22);color:var(--on-dark)}
.sp-sec.dark .sp-q cite{color:var(--on-dark-2)}
.sp-sec.dark .sp-q a{color:var(--olive)}
.sp-sec.dark .sp-kick i{color:var(--olive)}
.sp-sec.dark .sp-pull{color:var(--olive);border-left-color:var(--orange)}
/* левый рельс с индексом и кикером — ритм, которого нет у соседних сайтов */
.sp-rail{display:grid;grid-template-columns:132px minmax(0,1fr);gap:34px;align-items:start}
.sp-kick{position:sticky;top:96px;display:flex;flex-direction:column;gap:8px}
.sp-kick i{font-style:normal;font-family:var(--display);font-weight:600;font-size:13px;color:var(--orange-ink);letter-spacing:.1em}
.sp-kick .sp-chev{width:22px;height:16px;color:var(--orange)}
.sp-kick span{font-size:13px;line-height:1.35;color:var(--ink-2);letter-spacing:.05em;text-transform:uppercase}
.sp-head2{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.sp-head2 p{margin:0;max-width:62ch}

/* --------------------------------------------------------------- карточка */
.sp-card{display:flex;flex-direction:column;background:transparent}
.sp-shot{background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);overflow:hidden;position:relative}
.sp-shot img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply;transition:transform .45s var(--ease)}
.sp-card:hover .sp-shot img{transform:scale(1.035)}
.sp-card-body{padding:13px 2px 0;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.sp-card-title{font-family:var(--text);font-weight:600;font-size:16px;line-height:1.34;letter-spacing:0;margin:0 0 6px;color:var(--ink)}
.sp-spec{font-size:13px;color:var(--ink-2);margin-bottom:10px;min-width:0}
.sp-spec b{font-weight:600;color:var(--ink)}
.sp-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto}
.sp-row+.sp-row{margin-top:11px}
.sp-price{font-family:var(--display);font-weight:600;font-size:21px;color:var(--ink);letter-spacing:-.01em}
.sp-shot .sp-tagpill{position:absolute;left:10px;top:10px;background:rgba(251,250,246,.94);z-index:2}
.sp-tagpill{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--leaf-ink);border:1px solid var(--mint);background:rgba(186,219,185,.34);border-radius:999px;padding:3px 9px;font-weight:600}
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange-btn);color:var(--paper);border:2px solid var(--orange-btn);border-radius:var(--r-sm);padding:11px 18px;font:600 15px/1 var(--text);text-decoration:none;cursor:pointer;transition:transform .18s var(--ease),background .18s var(--ease);flex:0 0 auto}
.sp-btn:hover{background:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.sp-btn.wide{width:100%}
.sp-btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.sp-btn.ghost:hover{background:var(--ink);color:var(--paper)}
/* Класс надписи кнопки — портфельной конвенции .buy-label, без префикса
   маски: общий страж labelScaleFindings ищет именно его, а синоним делает
   проверку слепой (урок honoson с rev-title). Доля 1em берётся из labels.json,
   который пишет render-buy-labels.js рядом с самим кадром. */
.buy-label{display:block;width:auto;height:calc(1em * 0.9)}
.sp-btn.ghost .buy-label{filter:invert(1)}
.sp-btn.ghost:hover .buy-label{filter:none}

/* --------------------------------------------------------------- рейтинги */
/* Дробная звезда — наложение двух рядов U+2605: глифа половинной звезды на
   этой машине нет ни в одном шрифте, он рисуется пустым квадратом (урок
   leinuosen). Незалитый ряд намеренно тише порога: число и счётчик стоят
   рядом текстом, шкала дублирует их, а не несёт. */
.sp-stars{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;line-height:1;white-space:nowrap;min-width:0}
.sp-stars-off,.sp-stars-on{position:relative;font-size:14px;letter-spacing:1px}
.sp-stars-off{color:#B9B3A2}
.sp-stars-on{position:absolute;left:0;top:0;overflow:hidden;color:#A85104;white-space:nowrap}
.sp-stars > span:first-child{position:relative;display:inline-block}
.sp-stars b{font-weight:600;color:var(--ink);font-size:13.5px}
.sp-stars i{font-style:normal;color:var(--ink-2);font-size:12.5px}
.sp-sec.dark .sp-stars b{color:var(--on-dark)}
.sp-sec.dark .sp-stars i{color:var(--on-dark-2)}
/* В карточке шкала стоит СВОЕЙ строкой: инлайновый блок сливался со строкой
   спецификации, и «4.0» + счётчик «15» + «55.1 in wide» читались одним числом. */
.sp-card .sp-stars{display:flex;margin:0 0 8px}

/* ------------------------------------------------------------ плитка полки */
/* Приём витрины: половина градиента с именем, половина фотографии. */
.sp-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.sp-tiles > *{flex:0 1 calc((100% - 2 * 18px) / 3);min-width:0}
.sp-tile{display:grid;grid-template-columns:1.12fr 1fr;min-height:172px;border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);overflow:hidden;text-decoration:none;color:var(--slate);background:var(--band);box-shadow:var(--sh);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.sp-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.sp-tile-t{padding:16px 8px 16px 16px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.sp-tile-t b{font-family:var(--display);font-weight:500;font-size:clamp(15px,1.25vw,18px);line-height:1.14;letter-spacing:-.015em;color:var(--slate);overflow-wrap:anywhere;hyphens:auto}
.sp-tile-t hr{border:0;border-top:1.5px solid rgba(28,37,44,.4);width:44px;margin:9px 0 7px}
.sp-tile-t span{font-size:12.5px;letter-spacing:.05em;color:rgba(28,37,44,.78);text-transform:uppercase}
.sp-tile img,.sp-tile-img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------------------ проза */
.sp-prose{max-width:none}
.sp-prose p{max-width:66ch}
/* Страницы сплошной прозы (мелкий шрифт) идут в ДВЕ КОЛОНКИ: единственная
   колонка в 66ch оставляла справа 289px пустоты на всю высоту страницы. */
.sp-prose.cols p{max-width:none}
@media (min-width:1000px){
 .sp-prose.cols{columns:2;column-gap:46px}
 .sp-prose.cols h1,.sp-prose.cols h2{column-span:all}
 .sp-prose.cols p,.sp-prose.cols ul,.sp-prose.cols li{break-inside:avoid}
}
.sp-prose h3{margin-top:1.5em}
.sp-prose ul{padding-left:1.1em;max-width:64ch}
.sp-prose li{margin-bottom:.45em}
.sp-cols{columns:2;column-gap:44px}
.sp-cols p{max-width:none;break-inside:avoid}
.sp-pull{font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,25px);line-height:1.34;color:var(--leaf-ink);border-left:4px solid var(--orange);padding:4px 0 4px 20px;margin:26px 0}
.sp-qgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:26px 0}
.sp-qgrid > *{flex:1 1 300px;margin:0;max-width:100%}
.sp-q{margin:24px 0;padding:18px 22px;background:var(--panel);border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);border:1px solid var(--line)}
.sp-q p{margin:0 0 8px;font-size:17px}
.sp-q cite{font-style:normal;font-size:13.5px;color:var(--ink-2);display:block}
.sp-fig{margin:26px 0;margin-inline:auto}
.sp-fig img{display:block;width:100%;border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm)}
.sp-fig figcaption{font-size:13.5px;color:var(--ink-2);margin-top:8px}
.sp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start;margin:30px 0}
.sp-split.narrow{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
/* Неполный последний ряд ЦЕНТРИРУЕТСЯ (правка владельца по fluest): auto-fit
   раскладывал четыре цифры как 3+1 и оставлял справа дыру. */
.sp-nums{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:26px 0}
.sp-nums > *{flex:1 1 150px;max-width:100%}
.sp-num{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);padding:16px 18px}
.sp-sec.dark .sp-num{background:rgba(245,243,237,.07);border-color:rgba(245,243,237,.2)}
.sp-num b{display:block;font-family:var(--display);font-weight:600;font-size:27px;line-height:1.05;color:var(--orange-ink)}
.sp-sec.dark .sp-num b{color:var(--olive)}
.sp-num span{font-size:13.5px;color:var(--ink-2);display:block;margin-top:5px}
.sp-sec.dark .sp-num span{color:var(--on-dark-2)}

/* --------------------------------------------------------------- таблицы */
.sp-tw{overflow-x:auto;min-width:0;margin:24px 0;border:1px solid var(--line);border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);background:var(--paper)}
.sp-table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
.sp-table th,.sp-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.sp-table th{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.03em;background:var(--panel);color:var(--ink);position:sticky;top:0}
.sp-table td.num,.sp-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.sp-table tr:last-child td{border-bottom:0}
.sp-table caption{caption-side:bottom;padding:10px 14px;font-size:13px;color:var(--ink-2);text-align:left;background:var(--paper)}
@media (max-width:720px){
 .sp-table{min-width:0}
 .sp-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .sp-table tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
 .sp-table td{display:flex;gap:12px;justify-content:space-between;border:0;padding:5px 14px;text-align:right}
 .sp-table td::before{content:attr(data-label);font-weight:600;text-align:left;color:var(--ink-2);font-size:13px}
 .sp-table td.num{text-align:right}
}

/* ------------------------------------------------------------- аккордеон */
.sp-acc{border-top:1px solid var(--line)}
.sp-acc details{border-bottom:1px solid var(--line)}
.sp-acc summary{cursor:pointer;padding:16px 34px 16px 0;position:relative;font-family:var(--display);font-weight:500;font-size:17px;list-style:none}
.sp-acc summary::-webkit-details-marker{display:none}
.sp-acc summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2px solid var(--orange-btn);border-bottom:2px solid var(--orange-btn);transform:rotate(45deg);transition:transform .2s var(--ease)}
.sp-acc details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.sp-acc .sp-acc-b{padding:0 0 16px;max-width:70ch}

/* --------------------------------------------------------------- галерея */
/* Галерея КВАДРАТНАЯ, потому что квадратные и сами кадры: полоса 5:3 срезала
   у комнатной сцены 40% высоты, то есть пол и потолок вместе с мебелью. */
.sp-gal{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.sp-gal > *{flex:0 1 calc((100% - 3 * 16px) / 4);min-width:0}
.sp-gal a{display:block;border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);overflow:hidden;background:var(--cream);box-shadow:var(--sh)}
.sp-gal img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .5s var(--ease)}
.sp-gal a:hover img{transform:scale(1.04)}
.sp-lb{position:fixed;inset:0;background:rgba(22,33,27,.93);display:flex;align-items:center;justify-content:center;padding:26px;z-index:90}
.sp-lb img{max-width:100%;max-height:88vh;width:auto;border-radius:var(--r-sm)}
.sp-lb button{position:absolute;top:16px;right:20px;background:var(--paper);color:var(--ink);border:0;border-radius:999px;width:42px;height:42px;font-size:22px;cursor:pointer}

/* ---------------------------------------------------------------- видео */
.sp-video{position:relative;border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);overflow:hidden;background:var(--slate);aspect-ratio:16/9}
.sp-video video,.sp-video img{width:100%;height:100%;object-fit:cover;display:block;color:var(--on-dark)}
.sp-video button{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(28,37,44,.28);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sp-video button span{width:78px;height:78px;border-radius:999px;background:var(--orange-btn);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:var(--sh-lift)}

/* ---------------------------------------------------------------- отзывы */
/* Цитаты покупателей публикуются ДОСЛОВНО, включая опечатки: правка чужого
   текста это написание отзыва за покупателя. Сетка с align-items:start —
   иначе короткий отзыв растягивается до самого длинного и под ним зияет
   дыра в треть карточки (урок myduxtop). */
.sp-revs{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;align-items:flex-start}
.sp-revs > *{flex:0 1 calc((100% - 2 * 20px) / 3);min-width:0}
.sp-rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);padding:20px}
.sp-sec.tint .sp-rev{background:var(--paper)}
.sp-rev .sp-stars{margin-bottom:9px}
.sp-rev h3,.sp-rev .review-title{font-family:var(--text);font-size:16px;font-weight:700;margin:0 0 8px;line-height:1.35}
.sp-rev blockquote,.sp-rev .review-quote{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.sp-rev footer{margin-top:12px;font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:10px}
.sp-rev footer b{font-weight:600;color:var(--ink)}
.sp-revs-stars{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.sp-revs-stars .on{color:#A85104}
.sp-revs-stars .off{color:#B9B3A2}

/* --------------------------------------------------------------- команда */
/* Неполный последний ряд ЦЕНТРИРУЕТСЯ: три карточки в двух колонках оставляли
   справа дыру в 463px (число колонок меняется по ширине, а число карточек нет,
   и «правильного» делителя не существует). */
.sp-team{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.sp-team > *{flex:0 1 calc((100% - 2 * 22px) / 3);min-width:0}
.sp-team article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg) var(--r-sm) var(--r-sm) var(--r-sm);padding:22px}
.sp-team h3{font-size:18px;margin-bottom:3px}
.sp-team .role{font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-ink);font-weight:600;margin-bottom:10px}
.sp-team p{font-size:15px;margin:0;color:var(--ink-2)}

/* ------------------------------------------------------------- страницы */
.sp-crumbs{font-size:13.5px;color:var(--ink-2);padding:18px 0 0}
.sp-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.sp-crumbs a{color:var(--ink-2)}
.sp-cat-hero{background:var(--band);padding:30px 0 34px;margin-top:0}
.sp-cat-hero h1{color:var(--slate);margin-bottom:10px}
.sp-cat-hero p{color:var(--slate);max-width:60ch;margin:0}
.sp-cat-hero .sp-facts{border-top-color:rgba(28,37,44,.24);padding-bottom:0;margin-top:18px}
.sp-pager{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:38px 0 0;list-style:none;padding:0}
.sp-pager a,.sp-pager span{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;padding:0 10px}
.sp-pager [aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sp-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.sp-filters button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:7px 14px;font:600 14px var(--text);cursor:pointer}
.sp-filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------------------------------------------------------------- подвал */
.sp-foot{background:var(--slate);color:var(--on-dark);margin-top:70px;padding:52px 0 26px}
.sp-foot a{color:var(--on-dark);text-decoration:none}
.sp-foot a:hover{color:var(--olive);text-decoration:underline}
.sp-foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:34px}
.sp-foot h4{font-family:var(--display);font-weight:500;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--olive);margin:0 0 14px}
.sp-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:15px}
.sp-foot-brand b{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px}
.sp-foot-brand p{font-size:15px;color:var(--on-dark-2);max-width:36ch;margin:12px 0 0}
.sp-foot-note{border-top:1px solid rgba(245,243,237,.18);margin-top:40px;padding-top:20px;font-size:13.5px;color:var(--on-dark-2);display:flex;flex-wrap:wrap;gap:8px 26px}
.sp-foot-note p{margin:0;max-width:74ch}
.sp-pay{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.sp-pay img{background:var(--paper);border-radius:4px;padding:5px 7px;height:26px;width:auto;display:block}

/* --------------------------------------------------------- отзывчивость */
@media (max-width:1100px){
 .sp-gal > *{flex-basis:calc((100% - 2 * 16px) / 3)}
 .sp-revs > *{flex-basis:calc((100% - 20px) / 2)}
 .sp-team > *{flex-basis:calc((100% - 22px) / 2)}
 .sp-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
 .sp-rail{grid-template-columns:1fr;gap:14px}
 .sp-kick{position:static;flex-direction:row;align-items:center;gap:12px}
 .sp-kick .sp-chev{width:16px;height:12px}
 .sp-hero-in{grid-template-columns:1fr;gap:20px}
 .sp-split,.sp-split.narrow{grid-template-columns:1fr;gap:22px}
 .sp-cols{columns:1}
}
@media (max-width:820px){
 .sp-sec{padding:46px 0}
 .sp-hero-strip{grid-template-columns:repeat(2,1fr);transform:translateY(28px)}
 .sp-hero-pad{height:44px}
}
@media (max-width:700px){
 :root{--gutter:18px}
 .sp-tiles > *{flex-basis:calc((100% - 18px) / 2)}
 .sp-gal > *{flex-basis:calc((100% - 16px) / 2)}
 .sp-revs > *{flex-basis:100%}
 .sp-team > *{flex-basis:100%}
 .sp-foot-grid{grid-template-columns:1fr;gap:26px}
 .sp-mark b{font-size:19px}
 /* Шапка на телефоне — ДВА ряда, а не три: семь пунктов в две строки давали
    третий ряд. Полоса прокручивается по горизонтали внутри себя (приём
    singaro), поэтому ни один пункт не пропадает и документ не расширяется. */
 .sp-nav{flex-wrap:nowrap;overflow-x:auto;flex-basis:100%;gap:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-left:0;padding-bottom:2px}
 .sp-nav::-webkit-scrollbar{display:none}
 .sp-nav a{font-size:13.5px;flex:0 0 auto}
 .sp-head-in{min-height:0;padding-top:10px;padding-bottom:6px;gap:6px}
}
@media (max-width:460px){
 .sp-tiles > *{flex-basis:100%}
}
@media (max-width:420px){
 .sp-hero-strip{gap:10px}
 .sp-tiles{gap:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}