/* БРЕНДБУК — компоненты (.ds-*). Общий слой для обоих брендов: цвета берутся из --ds-* токенов палитры.
   Все компоненты обязаны жить внутри .ds-frame: он задаёт container-type:inline-size,
   раскладка построена на @container, поэтому одинаково работает в десктоп- и мобильной рамке.
   Чтобы перейти на viewport-раскладку, замените `@container (…)` на `@media (…)` (условия те же)
   и снимите зависимость от .ds-frame. Порт блока «компоненты» из fundament-tokens.css. */

/* ============================================================
   FUNDAMENT — компоненты.
   Всё внутри .ds-frame; раскладка на container queries,
   поэтому один и тот же код работает и в десктоп-, и в мобильной рамке.
   ============================================================ */
.ds-frame{container-type:inline-size;background:var(--ds-bg);color:var(--ds-text);font-family:var(--ds-font-text);font-size:15.5px;line-height:1.6}
.ds-frame h1,.ds-frame h2,.ds-frame h3{font-family:var(--ds-font-head);letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
.ds-wrap{padding-inline:20px;max-width:1280px;margin:0 auto}
@container (min-width:700px){.ds-wrap{padding-inline:40px}}

.ds-eyebrow{font-family:var(--ds-font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ds-text-3)}
.ds-lead{font-size:16px;color:var(--ds-text-2);max-width:56ch}
@container (min-width:700px){.ds-lead{font-size:18px}}

/* --- навигация --- */
.ds-nav{display:flex;align-items:center;gap:20px;padding-block:16px;border-bottom:1px solid var(--ds-hairline)}
.ds-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.ds-logo-mark{width:22px;height:22px;flex:none}
.ds-logo b{font-family:var(--ds-font-head);font-weight:700;font-size:16px;letter-spacing:.06em}
.ds-nav-links{display:none;gap:24px;margin-left:auto;font-size:14.5px}
.ds-nav-links a{text-decoration:none;color:var(--ds-text-2);padding-bottom:2px;border-bottom:1px solid transparent}
.ds-nav-links a:hover{color:var(--ds-text);border-bottom-color:var(--ds-brand)}
.ds-nav-side{margin-left:auto;display:flex;align-items:center;gap:16px}
.ds-nav-tel{font-family:var(--ds-font-mono);font-size:13px;text-decoration:none;white-space:nowrap}
.ds-burger{width:26px;height:16px;border:0;background:none;padding:0;position:relative;cursor:pointer}
.ds-burger::before,.ds-burger::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--ds-text)}
.ds-burger::before{top:2px}.ds-burger::after{bottom:2px}
.ds-nav-side>.ds-btn{display:none}
@container (min-width:700px){
  .ds-nav-links{display:flex}
  .ds-nav-side{margin-left:0}
  .ds-nav-side>.ds-btn{display:inline-flex}
  .ds-burger{display:none}
}

/* --- кнопки --- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--ds-font-head);font-weight:600;font-size:14.5px;letter-spacing:-.005em;padding:13px 22px;min-height:48px;border-radius:var(--ds-radius);text-decoration:none;cursor:pointer;border:1px solid var(--ds-brand);background:var(--ds-brand);color:var(--ds-on-brand);transition:background var(--ds-dur) var(--ds-ease),border-color var(--ds-dur) var(--ds-ease),color var(--ds-dur) var(--ds-ease)}
.ds-btn:hover{background:var(--ds-brand-hover);border-color:var(--ds-brand-hover)}
.ds-btn--sec{background:transparent;color:var(--ds-text);border-color:var(--ds-rule)}
.ds-btn--sec:hover{background:transparent;border-color:var(--ds-text);color:var(--ds-text)}
.ds-btn--ghost{background:transparent;border-color:transparent;color:var(--ds-brand-text);padding-inline:0;min-height:auto}
.ds-btn--ghost:hover{background:transparent;border-color:transparent;color:var(--ds-text)}
.ds-btn--onDark{background:var(--ds-brand);border-color:var(--ds-brand);color:var(--ds-on-brand)}
.ds-btn--secOnDark{background:transparent;color:var(--ds-on-inverse);border-color:rgba(255,255,255,.34)}
.ds-btn--secOnDark:hover{background:transparent;border-color:var(--ds-on-inverse);color:var(--ds-on-inverse)}
.ds-link{color:var(--ds-text);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:var(--ds-rule)}
.ds-link:hover{color:var(--ds-brand-text);text-decoration-color:var(--ds-brand-text)}
.ds-arrow{font-family:var(--ds-font-mono);font-size:13px}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--ds-focus);outline-offset:2px;border-radius:var(--ds-radius)}

/* --- бейдж статуса визуала --- */
.ds-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--ds-font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:var(--ds-radius);background:var(--ds-surface);color:var(--ds-text-2);border:1px solid var(--ds-hairline)}
.ds-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ds-rule)}
.ds-badge--ready::before{background:var(--ds-brand)}
.ds-badge--concept::before{background:var(--ds-warn)}
.ds-badge--built::before{background:var(--ds-ok)}

/* --- слот под изображение --- */
.ds-slot{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;background:var(--ds-bg-sunk);border:1px solid var(--ds-hairline);border-radius:var(--ds-radius);overflow:hidden}
.ds-slot::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 11px,var(--ds-hairline) 11px 12px);opacity:.5}
.ds-slot-txt{position:relative;font-family:var(--ds-font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ds-text-3);line-height:1.8;background:var(--ds-bg-sunk);padding:8px 12px;border-radius:var(--ds-radius)}
.ds-slot-txt b{display:block;color:var(--ds-text-2);font-weight:500}
.ds-slot--hero{aspect-ratio:var(--ds-r-hero-m)}
@container (min-width:700px){.ds-slot--hero{aspect-ratio:var(--ds-r-hero)}}
.ds-slot--card{aspect-ratio:var(--ds-r-card)}
.ds-slot--portrait{aspect-ratio:var(--ds-r-portrait)}
.ds-slot--plan{aspect-ratio:var(--ds-r-plan);background:var(--ds-surface)}
.ds-caption{font-family:var(--ds-font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--ds-text-3);margin-top:10px}

/* --- карточка дома --- */
.ds-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--ds-surface);border:1px solid var(--ds-hairline);border-radius:var(--ds-radius);overflow:hidden;transition:border-color var(--ds-dur) var(--ds-ease)}
.ds-card:hover{border-color:var(--ds-rule)}
.ds-card-fig{position:relative}
.ds-card-fig .ds-badge{position:absolute;left:12px;top:12px;z-index:2}
.ds-card-body{padding:20px;display:flex;flex-direction:column;gap:14px;flex:1}
.ds-card h3{font-size:20px;font-weight:600}
.ds-card-params{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--ds-font-mono);font-size:12px;color:var(--ds-text-2)}
.ds-card-params span{white-space:nowrap}
.ds-card-more{margin-top:auto;padding-top:14px;border-top:1px solid var(--ds-hairline);display:flex;justify-content:space-between;align-items:center;font-family:var(--ds-font-head);font-weight:600;font-size:14px;color:var(--ds-brand-text)}
.ds-cards{display:grid;gap:20px;grid-template-columns:1fr}
@container (min-width:700px){.ds-cards{grid-template-columns:repeat(3,1fr);gap:24px}}

/* --- таблица параметров --- */
.ds-params{border-top:1px solid var(--ds-hairline)}
.ds-params div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--ds-hairline)}
.ds-params dt{color:var(--ds-text-3);font-size:14px}
.ds-params dd{margin:0;font-family:var(--ds-font-mono);font-size:14px;text-align:right;font-variant-numeric:tabular-nums}

/* --- аккордеон --- */
.ds-acc{border-top:1px solid var(--ds-hairline)}
.ds-acc details{border-bottom:1px solid var(--ds-hairline)}
.ds-acc summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:16px;padding:18px 0;font-family:var(--ds-font-head);font-weight:600;font-size:17px;letter-spacing:-.015em}
.ds-acc summary::-webkit-details-marker{display:none}
.ds-acc summary .n{font-family:var(--ds-font-mono);font-weight:400;font-size:11.5px;color:var(--ds-brand-text);flex:none;width:28px}
.ds-acc summary .ic{margin-left:auto;font-family:var(--ds-font-mono);color:var(--ds-text-3);flex:none}
.ds-acc details[open] summary .ic{color:var(--ds-brand)}
.ds-acc .body{padding:0 0 20px 44px;color:var(--ds-text-2);font-size:15px;max-width:66ch}

/* --- поля формы --- */
.ds-field{display:grid;gap:7px}
.ds-field label{font-family:var(--ds-font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-text-3)}
.ds-field input,.ds-field textarea{font-family:var(--ds-font-text);font-size:15px;color:var(--ds-text);background:var(--ds-surface);border:1px solid var(--ds-text-3);border-radius:var(--ds-radius);padding:13px 14px;width:100%;min-height:48px}
.ds-field input::placeholder,.ds-field textarea::placeholder{color:var(--ds-text-3)}
.ds-field input:hover,.ds-field textarea:hover{border-color:var(--ds-text-2)}
.ds-field .hint{font-size:12.5px;color:var(--ds-text-3)}
.ds-field--err input{border-color:var(--ds-danger)}
.ds-field--err .hint{color:var(--ds-danger)}

/* --- секции --- */
.ds-sec{padding-block:56px}
@container (min-width:700px){.ds-sec{padding-block:96px}}
.ds-sec--sunk{background:var(--ds-bg-sunk)}
.ds-sechead{display:grid;gap:14px;margin-bottom:32px}
@container (min-width:700px){
  .ds-sechead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:48px}
}
.ds-sechead h2{font-size:26px;font-weight:700}
@container (min-width:700px){.ds-sechead h2{font-size:36px}}

/* --- инверсный блок --- */
.ds-inv{background:var(--ds-inverse);color:var(--ds-on-inverse)}
.ds-inv h2,.ds-inv h3{color:var(--ds-on-inverse)}
.ds-inv p{color:var(--ds-on-inverse-2)}
.ds-inv .ds-eyebrow{color:var(--ds-on-inverse-2)}
.ds-inv a{color:var(--ds-on-inverse)}

/* --- футер --- */
.ds-foot{background:var(--ds-inverse);color:var(--ds-on-inverse);padding-block:44px}
.ds-foot-grid{display:grid;gap:28px}
@container (min-width:700px){.ds-foot-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}}
.ds-foot h4{font-family:var(--ds-font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-on-inverse-2);font-weight:400;margin-bottom:14px}
.ds-foot li{padding:5px 0;font-size:14.5px}
.ds-foot a{text-decoration:none;color:var(--ds-on-inverse)}
.ds-foot a:hover{color:var(--ds-brand-on-inverse)}
.ds-inv,.ds-foot{--ds-focus:var(--ds-brand-on-inverse);--ds-brand-text:var(--ds-brand-on-inverse)}
.ds-foot-legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--ds-hairline-inverse);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12.5px;color:var(--ds-on-inverse-2)}

/* --- вспомогательное для экранов --- */
.ds-hero-top{display:grid;gap:22px;padding-block:44px 28px}
@container (min-width:700px){.ds-hero-top{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:56px;align-items:end;padding-block:72px 40px}}
.ds-hero-top h1{font-size:34px;font-weight:700;letter-spacing:-.03em}
@container (min-width:700px){.ds-hero-top h1{font-size:56px}}
.ds-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ds-4col{display:grid;gap:0}
@container (min-width:700px){.ds-4col{grid-template-columns:repeat(4,1fr);gap:32px}}
.ds-4col article{padding-block:20px;border-top:1px solid var(--ds-rule)}
.ds-4col h3{font-size:18px;font-weight:600;margin-bottom:10px}
.ds-4col p{color:var(--ds-text-2);font-size:14.5px}
.ds-founder{display:grid;gap:24px}
@container (min-width:700px){.ds-founder{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:56px;align-items:center}}
.ds-crumbs{font-family:var(--ds-font-mono);font-size:11px;letter-spacing:.08em;color:var(--ds-text-3);padding-block:20px}
.ds-crumbs a{text-decoration:none}
.ds-housetop{display:grid;gap:18px;padding-bottom:26px}
@container (min-width:700px){.ds-housetop{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:48px;align-items:end}}
.ds-housetop h1{font-size:32px;font-weight:700}
@container (min-width:700px){.ds-housetop h1{font-size:46px}}
.ds-2col{display:grid;gap:32px}
@container (min-width:700px){.ds-2col{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}}
.ds-contacts{display:grid;gap:24px}
@container (min-width:700px){.ds-contacts{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:start}}
.ds-contact-list li{padding:14px 0;border-top:1px solid var(--ds-hairline-inverse)}
.ds-contact-list .k{font-family:var(--ds-font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ds-on-inverse-2);display:block;margin-bottom:3px}
.ds-contact-list .v{font-family:var(--ds-font-mono);font-size:15px}

/* маркер плейсхолдера */
.ph{border-bottom:1px dashed var(--ds-rule)}