/* Лендинг «Фундамент под ключ» (/services/613-…, шаблон site/landing/fundament), д37. Грузится после home.css,
   commercial.css и gazobeton.css: первый экран (hero_fundament), заголовки, поля, шаги стройки, карточки фото и заявка
   берутся оттуда. Здесь то, чем страница отличается:
   условия договора под первым экраном; виды фундамента карточками с фото (два крупно, три в ряд); разрез фундамента
   в грунте в расчёте; таблицы цен и сравнения на серой плашке; короткая заявка на выезд тёмной плашкой посреди страницы;
   «что входит» тремя колонками; приёмка списком с иконками.
   Без линий и рамок, секции разделяет воздух. Значения только --gts-*. */

/* ---------- Условия договора: карточки главной (.hm_adv) под первым экраном ---------- */
.fd_adv{width:calc(100% - 40px)}

/* ---------- Виды: сетка на 6 колонок, первые два вида по три колонки, остальные по две ---------- */
.fd_types{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gts-s-6) var(--gts-s-4)}
.fd_type{grid-column:span 2;display:flex;flex-direction:column;color:var(--gts-text)!important;text-decoration:none!important}
.fd_type_big{grid-column:span 3}
.fd_type_ph{display:block;border-radius:var(--gts-r-card);overflow:hidden;background:var(--gts-stone)}
.gb .fd_type_ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gb .fd_type_big .fd_type_ph img{aspect-ratio:16/10}
.fd_type:hover .fd_type_ph img{transform:scale(1.04)}
.fd_type_body{display:flex;flex-direction:column;gap:var(--gts-s-2);padding-top:var(--gts-s-4)}
.fd_type_name{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:-.01em;transition:color .15s}
.fd_type_big .fd_type_name{font-size:24px}
.fd_type:hover .fd_type_name{color:var(--gts-green)}
.fd_type_price{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.fd_type_price span{font-size:14px;font-weight:400;letter-spacing:0;color:var(--gts-text-2)}
.fd_type_for{font-size:14px;line-height:1.5;color:var(--gts-text-2)}
.fd_type:focus-visible{outline:none}
.fd_type:focus-visible .fd_type_ph{box-shadow:0 0 0 3px var(--gts-green-ring)}

/* ещё четыре вида по смете: серая плашка, четыре колонки */
.fd_more{margin-top:var(--gts-s-7);padding:var(--gts-s-6);border-radius:var(--gts-r-section);background:var(--gts-stone)}
.gb .fd_more_t{font-size:13px;font-weight:600;color:var(--gts-text-3);margin-bottom:var(--gts-s-4)}
.fd_more ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gts-s-4);margin:0;padding:0;list-style:none}
.fd_more li{display:flex;flex-direction:column;gap:var(--gts-s-1);padding:var(--gts-s-4) 20px;border-radius:var(--gts-r-card);background:var(--gts-surface)}
.fd_more a, .fd_more li > b{font-size:16px;font-weight:600;color:var(--gts-text)!important}
.fd_more a:hover{color:var(--gts-green)!important}
.fd_more li span{font-size:14px;line-height:1.45;color:var(--gts-text-2)}

/* ---------- Расчёт: чипы с длинными подписями, разрез, итог ---------- */
.fd_chips span{min-width:0}
.fd_cut{margin-top:var(--gts-s-6)!important}
.fd_svg{display:block;width:100%;height:auto;border-radius:var(--gts-r-card);background:var(--gts-stone)}
.fd_cut figcaption{margin-top:var(--gts-s-3);font-size:14px;line-height:1.5;color:var(--gts-text-2);min-height:42px}
.fd_soil{fill:var(--gts-soil-loam);transition:fill .4s}
.is-sand .fd_soil{fill:var(--gts-soil-sand)}
.is-peat .fd_soil{fill:var(--gts-soil-peat)}
.fd_topsoil{fill:var(--gts-soil-top)}
.fd_water{fill:none;stroke:var(--gts-water);stroke-width:3;opacity:0;transition:opacity .4s}
.is-peat .fd_water{opacity:1}
.fd_lbl{font-size:12px;fill:var(--gts-text-2);text-anchor:end}
.fd_lbl_water{fill:var(--gts-surface);opacity:0;transition:opacity .4s}
.is-peat .fd_lbl_water{opacity:1}
.is-peat .fd_lbl_soil{fill:var(--gts-surface)}
.fd_ruler line{stroke:var(--gts-text-3);stroke-width:1}
.fd_ruler text{font-size:11px;fill:var(--gts-text-2)}
.fd_freeze{stroke:var(--gts-water);stroke-width:1.5;stroke-dasharray:6 5}
.fd_lbl_freeze{fill:var(--gts-text-2)}
.is-peat .fd_lbl_freeze{fill:var(--gts-surface)}
.fd_ground{stroke:var(--gts-soil-top);stroke-width:2}
/* стены растут от фундамента: каркас низкий, блоки в два этажа выше */
.fd_wall{fill:var(--gts-wood);transform-box:fill-box;transform-origin:center bottom;transform:scaleY(.55);transition:transform .5s cubic-bezier(.2,.7,.2,1),fill .3s}
.is-mid .fd_wall{fill:var(--gts-concrete);transform:scaleY(.6)}
.is-heavy .fd_wall{fill:var(--gts-concrete);transform:scaleY(1)}
.fd_concrete{fill:var(--gts-concrete)}
.fd_concrete_2{fill:var(--gts-text-3);fill-opacity:.55}
.fd_eps{fill:var(--gts-green);fill-opacity:.55}
.fd_gravel{fill:url(#fd-gravel)}
.fd_grv_bg{fill:var(--gts-gravel)}
.fd_grv{fill:var(--gts-text-3)}
.fd_steel{fill:var(--gts-text-2)}
.fd_wood{fill:var(--gts-wood)}
.fd_pipe{fill:#d0453a}
/* виден только выбранный вид, он «поднимается» на место */
.fd_f{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.fd_svg[data-f=lenta] [data-f=lenta], .fd_svg[data-f=plita] [data-f=plita], .fd_svg[data-f=ushp] [data-f=ushp],
.fd_svg[data-f=svai] [data-f=svai], .fd_svg[data-f=rostverk] [data-f=rostverk]{opacity:1;transform:none}

.fd_result .hm_res_note{margin-top:var(--gts-s-1)!important}
.gb .fd_verdict{margin-top:var(--gts-s-3);font-size:14px;line-height:1.45;color:rgba(255,255,255,.85)}
.fd_verdict:empty{display:none}
.fd_verdict b{color:#fff}
.gb .fd_list_t{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:var(--gts-s-3)}
.fd_list li{display:block}
.fd_list button{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:6px var(--gts-s-2);width:100%;padding:var(--gts-s-2) var(--gts-s-3);border:0;border-radius:var(--gts-r-control);background:none;font:inherit;font-size:15px;color:rgba(255,255,255,.85);text-align:left;cursor:pointer;transition:background-color .15s}
.fd_list button:hover{background:rgba(255,255,255,.06)}
.fd_list button[aria-pressed=true]{background:rgba(255,255,255,.1);color:#fff}
.fd_list button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gts-green-ring)}
.fd_list_name{grid-column:1}
.fd_badge{grid-column:2}
.fd_list b{grid-column:3;font-size:16px}
.fd_list .gb_bar{height:6px}
.fd_list .is-no{opacity:.5}
.fd_list .is-no .gb_bar{background:rgba(255,255,255,.35)}
.fd_badge{justify-self:start;font-style:normal;font-size:12px;font-weight:600;padding:2px var(--gts-s-2);border-radius:999px}
.fd_badge:empty{display:none}
.is-best .fd_badge{background:var(--gts-green);color:#fff}
.is-no .fd_badge{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.gb .fd_result_btn{width:100%;margin-bottom:var(--gts-s-4)}

/* ---------- Таблицы: серая плашка, строки белые и разделены воздухом ---------- */
.fd_table_wrap{padding:var(--gts-s-3);border-radius:var(--gts-r-section);background:var(--gts-stone)}
.fd_table_wrap[hidden]{display:none}
.fd_table{width:100%;border-collapse:separate;border-spacing:0 4px;margin:-4px 0;font-size:15px;line-height:1.45}
.fd_table th, .fd_table td{padding:14px 20px;background:var(--gts-surface);text-align:left;vertical-align:top;border:0}
.fd_table thead th{padding:var(--gts-s-2) 20px;background:none;font-size:13px;font-weight:600;color:var(--gts-text-3)}
.fd_table tbody th{font-weight:600;color:var(--gts-text)}
.fd_table tbody tr > :first-child{border-radius:var(--gts-r-card) 0 0 var(--gts-r-card)}
.fd_table tbody tr > :last-child{border-radius:0 var(--gts-r-card) var(--gts-r-card) 0}
.fd_table td{color:var(--gts-text-2);font-variant-numeric:tabular-nums}
#fd-sizes .fd_table td{font-size:16px;font-weight:600;color:var(--gts-text);white-space:nowrap}
.fd_table_cmp tbody th{width:20%}
.fd_table_house tbody th{width:28%}

/* переключатель «как выбрать»: дорожка с зелёной таблеткой, как плотность у заводов газобетона */
.fd_switch{display:inline-flex;gap:4px;margin-bottom:var(--gts-s-4);padding:4px;border-radius:999px;background:var(--gts-stone)}
.fd_switch button{height:40px;padding:0 20px;border:0;border-radius:999px;background:none;font:inherit;font-size:15px;font-weight:600;color:var(--gts-text-2);cursor:pointer;transition:background-color .2s,color .2s}
.fd_switch button:hover{color:var(--gts-text)}
.fd_switch button[aria-selected=true]{background:var(--gts-green);color:#fff}
.fd_switch button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gts-green-ring)}

/* ---------- Выезд на участок: тёмная плашка, текст слева, телефон и кнопка справа ---------- */
.fd_visit{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gts-s-6) var(--gts-s-7);align-items:center;padding:var(--gts-s-7) 56px;border-radius:var(--gts-r-section);background:var(--gts-ink);color:#fff}
main.level10 .fd_visit .ww_title{color:#fff;margin-bottom:var(--gts-s-5)}
.fd_visit .hm_intro{color:rgba(255,255,255,.75);margin:0!important}
main.level10 .fd_visit .gts-input{background:var(--gts-surface)}
.fd_visit .hm_form_consent{margin-top:var(--gts-s-3)!important}
.fd_visit .hm_form_consent, .fd_visit .hm_form_consent a{color:rgba(255,255,255,.55)!important}
.fd_visit .hm_form_error{margin-top:var(--gts-s-2)!important;color:#ff9b8f}
.fd_visit .hm_sent{background:rgba(50,166,1,.25);color:#fff}
.fd_visit .hm_sent a{color:#fff!important;font-weight:600;text-decoration:underline}

/* ---------- Что входит: три колонки открыто на белом ---------- */
.fd_in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gts-s-7) var(--gts-s-6)}
.fd_in .hm_h3{margin-bottom:var(--gts-s-5)}
.gb .fd_points{margin:0!important;padding:0;list-style:none}
.fd_points li{font-size:15px}
.fd_extra{display:grid;gap:var(--gts-s-4);margin:0;padding:0;list-style:none}
.fd_extra li{position:relative;padding-left:36px;font-size:15px;line-height:1.5;color:var(--gts-text-2)}
/* считаем отдельно: серый кружок с плюсом к смете; можно добавить: зелёный мягкий кружок с плюсом */
.fd_extra li::before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--gts-stone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center/14px no-repeat}
.fd_add li::before{background-color:var(--gts-green-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332a601' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E")}
.fd_extra b{color:var(--gts-text);font-weight:600}
.fd_extra a{color:var(--gts-green)!important}
.fd_extra a:hover{text-decoration:underline}
.gb .fd_extra_note{margin-top:var(--gts-s-5);font-size:14px;line-height:1.5;color:var(--gts-text-3)}

/* ---------- Как работаем: сроки по этапам в карточке справа ---------- */
.gb .fd_plan_t{font-size:13px;font-weight:600;color:var(--gts-text-3);margin-bottom:var(--gts-s-4)}
.fd_timeline{display:grid;gap:4px;margin:0;padding:0;list-style:none;counter-reset:fd}
.fd_timeline li{counter-increment:fd;display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:var(--gts-s-3);padding:10px var(--gts-s-4);border-radius:var(--gts-r-card);background:var(--gts-surface);font-size:15px;line-height:1.35}
.fd_timeline li::before{content:counter(fd);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--gts-green-soft);color:var(--gts-green);font-size:12px;font-weight:700;align-self:center}
.fd_timeline b{font-weight:600;color:var(--gts-text)}
.fd_timeline span{font-size:14px;color:var(--gts-text-2);text-align:right}

/* ---------- Приёмка: восемь проверок в две колонки, иконка лупы ---------- */
.fd_checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gts-s-6) var(--gts-s-7);margin:0;padding:0;list-style:none}
.fd_checks li{position:relative;padding-left:60px;font-size:15px;line-height:1.55;color:var(--gts-text-2)}
.fd_checks li::before{content:"";position:absolute;left:0;top:0;width:44px;height:44px;border-radius:var(--gts-r-card);background:var(--gts-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332a601' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M8 11l2 2 4-4'/%3E%3C/svg%3E") center/22px no-repeat}
.fd_checks b{display:block;margin-bottom:2px;font-size:16px;font-weight:600;color:var(--gts-text)}

/* ---------- Статьи: три в ряд ---------- */
.fd_articles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gts-s-5)}
.gb .bl_card_t{font-size:19px;line-height:1.3;font-weight:700;margin:0;transition:color .15s}
.bl_card:hover .bl_card_t{color:var(--gts-green)}

.fd .gb_note a{color:var(--gts-green)!important}
.fd .gb_note a:hover{text-decoration:underline}

/* ---------- Вопросы: отступ сверху даёт секция, свой отступ блока FAQ из home.css (48 px) лишний ---------- */
main.level10 .fd_faq .faq2_wrap{margin-top:0!important;padding-top:0}

/* ---------- Адаптив ---------- */
@media screen and (max-width:1199px){
    .fd_more ul{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fd_visit{grid-template-columns:1fr;padding:var(--gts-s-7) 40px}
}
@media screen and (max-width:992px){
    .fd_types{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fd_type, .fd_type_big{grid-column:auto}
    .gb .fd_type_big .fd_type_ph img{aspect-ratio:4/3}
    .fd_type_big .fd_type_name{font-size:20px}
    .fd_in{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fd_in > :last-child{grid-column:1 / -1}
    .fd_articles{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fd_articles > :nth-child(3){display:none}
}
@media screen and (max-width:767px){
    .fd_adv{width:calc(100% - 32px)}
    /* виды на телефоне строкой: фото слева, цена справа, чтобы пять видов поместились в два экрана */
    .fd_types{grid-template-columns:1fr;gap:var(--gts-s-4)}
    .fd_type{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--gts-s-4);align-items:start}
    .gb .fd_type_ph img, .gb .fd_type_big .fd_type_ph img{aspect-ratio:1/1}
    .fd_type_body{gap:var(--gts-s-1);padding-top:0}
    .fd_type_name, .fd_type_big .fd_type_name{font-size:17px}
    .fd_type_price{font-size:18px}
    .fd_type_price span{font-size:13px}
    .fd_type_for{font-size:13px;line-height:1.45}
    /* наши фундаменты на телефоне по два в ряд */
    .fd .fd_built{grid-template-columns:1fr 1fr;gap:var(--gts-s-4) var(--gts-s-3)}
    .fd .fd_built figcaption{font-size:13px;line-height:1.4;margin-top:var(--gts-s-2)}
    .fd_more{padding:var(--gts-s-4);border-radius:var(--gts-r-card)}
    .fd_more ul{grid-template-columns:1fr;gap:var(--gts-s-2)}
    .fd_chips{grid-auto-flow:row!important;grid-auto-columns:auto!important;grid-template-columns:1fr}
    .fd_chips span{justify-content:flex-start;padding:0 var(--gts-s-4)!important}
    .fd_cut figcaption{min-height:0}
    .fd_list button{font-size:14px}
    /* таблицы: строка становится карточкой, у ячеек подпись колонки слева */
    .fd_table_wrap{padding:var(--gts-s-2);border-radius:var(--gts-r-card)}
    .fd_table, .fd_table tbody, .fd_table tr, .fd_table th, .fd_table td{display:block;width:auto!important}
    .fd_table{margin:0;border-spacing:0}
    .fd_table thead{display:none}
    .fd_table tbody{display:grid;gap:var(--gts-s-2)}
    .fd_table tr{padding:var(--gts-s-3) var(--gts-s-4);border-radius:var(--gts-r-card);background:var(--gts-surface)}
    .fd_table th, .fd_table td, .fd_table tbody tr > :first-child, .fd_table tbody tr > :last-child{padding:0;border-radius:0;background:none}
    .fd_table tbody th{font-size:16px;margin-bottom:var(--gts-s-2)}
    .fd_table td{display:flex;justify-content:space-between;gap:var(--gts-s-4);padding:6px 0;font-size:14px}
    .fd_table td::before{content:attr(data-label);flex:none;max-width:40%;color:var(--gts-text-3);font-weight:400}
    .fd_table td{text-align:right}
    #fd-sizes .fd_table td{font-size:15px}
    .fd_switch{display:flex}
    .fd_switch button{flex:1;padding:0 var(--gts-s-2);font-size:14px}
    .fd_visit{padding:var(--gts-s-6) 20px;border-radius:var(--gts-r-card)}
    main.level10 .fd_visit .ww_title{font-size:26px}
    .fd_visit .hm_form_line{flex-direction:column}
    .fd_visit .hm_form_line .gts-btn{width:100%}
    .fd_in{grid-template-columns:1fr;gap:var(--gts-s-6)}
    .fd_timeline li{grid-template-columns:24px 1fr;padding:10px var(--gts-s-3)}
    .fd_timeline span{grid-column:2;text-align:left}
    .fd_checks{grid-template-columns:1fr;gap:var(--gts-s-5)}
    .fd_checks li{padding-left:56px}
    .fd_checks li::before{width:40px;height:40px}
    .fd_articles{grid-template-columns:1fr;gap:var(--gts-s-6)}
    .fd_articles > :nth-child(3){display:flex}
}
@media (prefers-reduced-motion:reduce){
    .fd *{animation:none!important;transition:none!important}
}