/* tknext.ru — «Бюро Холода». Ледяная палитра: глубокая полночь + лёд.
   Разведено с house-technic.ru (графит + бирюза, карточки в рамках):
   здесь шапка в один ряд, симптомы — списком с левой линейкой,
   вместо сетки карточек — таблицы «симптом → причина → цена»,
   скругления почти нулевые, панели с верхней акцентной полосой. */
:root{
  --night:#0e2233;        /* тёмные плашки, заголовки */
  --night-2:#16344b;
  --ash:#4a6076;          /* второстепенный текст */
  --ice:#0e83b8;          /* акцент */
  --ice-d:#0a6690;
  --ice-l:#e4f2f8;        /* подложка акцентных блоков */
  --bg:#f4f7f9;
  --line:#d6e0e7;
  --warn:#b4530d;
  --wrap:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--night);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--ice-d)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(26px,4vw,41px)}
h2{font-size:clamp(21px,2.6vw,29px)}
h3{font-size:18px}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}

/* ---------- шапка: один ряд ----------
   Восемь коротких пунктов и телефон помещаются до 1040. Ниже — бургер.
   nav получает min-width:0, чтобы при сжатии ужималась она,
   а не наезжала на телефон (грабля с house-technic.ru). */
.hdr{position:sticky;top:0;z-index:40;background:var(--night);color:#fff;
  border-bottom:3px solid var(--ice)}
.hdr__in{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:0 0 auto}
.brand__ic{width:38px;height:38px;color:var(--ice);flex:0 0 auto}
.brand__t{display:flex;flex-direction:column;line-height:1.18}
.brand__t b{font-size:20px;letter-spacing:.01em}
.brand__t i{font-style:normal;font-size:11.5px;color:#8fa9bd;letter-spacing:.02em}
.nav{flex:1 1 auto;min-width:0}
.nav ul{display:flex;justify-content:flex-end;gap:1px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 11px;color:#c6d8e4;text-decoration:none;
  font-size:14.5px;white-space:nowrap;border-radius:3px}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a[aria-current]{color:#fff;background:var(--ice)}
.hdr__tel{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap;
  font-size:18px;flex:0 0 auto}
.burger{display:none;width:44px;height:40px;border:1px solid #375267;border-radius:3px;
  background:none;cursor:pointer;position:relative;flex:0 0 auto}
.burger::before,.burger::after{content:"";position:absolute;left:11px;right:11px;
  height:2px;background:#fff}
.burger::before{top:13px}
.burger::after{bottom:13px}

/* ---------- герой ---------- */
.hero{background:linear-gradient(160deg,#0e2233 0%,#16344b 62%,#1b4460 100%);color:#fff}
.hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:38px;align-items:center;
  padding-block:44px 48px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero__sub{color:#bed3e0;font-size:17.5px;max-width:46ch}
.hero__pic img{border-radius:4px}
.hero__fx{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 24px;padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.16);list-style:none}
.hero__fx li{display:flex;flex-direction:column;line-height:1.3}
.hero__fx b{font-size:21px;color:#fff}
.hero__fx span{font-size:13px;color:#9db6c8}
.hero__cta{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.hero__note{font-size:13.5px;color:#9db6c8;margin:14px 0 0}

/* ---------- кнопки ---------- */
.btn{display:inline-block;background:var(--ice);color:#fff;text-decoration:none;
  padding:13px 25px;border-radius:3px;font-weight:600;border:0;cursor:pointer;font-size:16px}
.btn:hover{background:var(--ice-d)}
.btn--gh{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #43637c}
.btn--gh:hover{background:rgba(255,255,255,.1)}
.sec .btn--gh{color:var(--night);box-shadow:inset 0 0 0 1.5px var(--line)}

/* ---------- секции ---------- */
.sec{padding:50px 0}
.sec--w{background:#fff;border-block:1px solid var(--line)}
.sec--cta{background:var(--ice-l);border-block:1px solid #c3dfeb}
.lead{max-width:74ch;color:var(--ash);font-size:17px}
.hgroup{max-width:74ch;margin-bottom:26px}
.txt{max-width:74ch}

/* ---------- симптомы: список с левой линейкой ----------
   Главный приём этого сайта вместо сетки карточек. */
.sym{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.sym li{background:#fff;padding:18px 22px 18px 26px;position:relative}
.sym li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--ice)}
.sym b{display:block;font-size:17px;margin-bottom:3px}
.sym p{margin:0;color:var(--ash);font-size:15px}

/* панели с верхней акцентной полосой */
.panels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.panels--n{counter-reset:pn}
.panels--4{grid-template-columns:repeat(4,1fr)}
.panel{background:#fff;border:1px solid var(--line);border-top:3px solid var(--ice);
  border-radius:0 0 4px 4px;padding:20px 22px 22px}
.panel h3{margin-bottom:.4em}
.panel p{margin:0;color:var(--ash);font-size:15px}
.panel--n{counter-increment:pn}
.panel--n h3::before{content:counter(pn) ". ";color:var(--ice);font-weight:800}

/* галерея с подписями */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.shot{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:0}
.shot img{aspect-ratio:4/3;object-fit:cover;width:100%}
.shot figcaption{padding:12px 16px 14px;font-size:14.5px;color:var(--ash)}
.shot figcaption b{display:block;color:var(--night);font-size:16px;margin-bottom:2px}
.shots--t img{aspect-ratio:3/4}

/* ---------- таблицы ---------- */
.tbl{width:100%;border-collapse:collapse;margin:18px 0;background:#fff;font-size:15px}
.tbl th,.tbl td{border:1px solid var(--line);padding:10px 14px;text-align:left;
  vertical-align:top}
.tbl th{background:var(--night);color:#fff;font-weight:600;white-space:nowrap}
.tbl td:last-child{white-space:nowrap;font-weight:700;color:var(--ice-d)}
.tbl tbody tr:nth-child(even){background:#f8fbfc}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- выноска ---------- */
.note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--warn);
  padding:16px 20px;margin:22px 0;border-radius:0 4px 4px 0;max-width:74ch}
.note p:last-child{margin:0}
.note b{color:var(--warn)}

/* ---------- FAQ ---------- */
.faq{margin-top:22px;display:grid;gap:10px;max-width:74ch}
.faq details{background:#fff;border:1px solid var(--line);border-radius:4px;padding:14px 18px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{margin:.7em 0 0;color:var(--ash)}

/* ---------- вызов мастера ---------- */
.cta{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.cta h2{margin-bottom:.4em}
.cta p{color:var(--ash)}
.cta__tel{display:flex;flex-direction:column;gap:2px;margin:0}
.cta__tel a{font-size:27px;font-weight:800;color:var(--night);text-decoration:none;
  letter-spacing:-.01em}
.cta__tel span{font-size:13.5px;color:var(--ash)}
.frm{display:grid;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:4px;padding:22px}
.frm label{display:flex;flex-direction:column;gap:5px;font-size:14px;color:var(--ash)}
/* подпись — одной строкой: в колоночном flex отдельный <span> со
   звёздочкой уезжал на свою строку */
.frm .lb{display:block}
.frm .lb i{font-style:normal;color:var(--warn)}
.frm input{border:1px solid var(--line);border-radius:3px;padding:12px;font:inherit;
  font-size:15px;color:var(--night);background:#fff;width:100%}
.frm input:focus{outline:2px solid var(--ice);border-color:transparent}
.frm .btn{justify-self:start}
.frm__n{font-size:13px;color:#7d919f;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- контакты ----------
   Сетка задана классом, а не инлайном: инлайн-стиль пересиливает медиазапрос
   и на узких экранах колонки не схлопываются (грабля с house-technic.ru). */
.kont{display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:start;margin-top:22px}
.kont img{border-radius:4px}
.nap{margin:0;background:#fff;border:1px solid var(--line);border-radius:4px;padding:20px 22px}
.nap dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#7d919f;margin-top:14px}
.nap dt:first-child{margin-top:0}
.nap dd{margin:2px 0 0;font-weight:600}

/* ---------- крошки, подвал ---------- */
.crumbs{padding-top:16px;font-size:14px;color:#7d919f}
.crumbs a{color:var(--ash)}
.ftr{background:var(--night);color:#a9c0d0;padding:36px 0}
.ftr__in{display:grid;grid-template-columns:1.2fr .7fr 1.1fr;gap:28px}
.ftr b{color:#fff;font-size:17px;display:block;margin-bottom:7px}
.ftr p{font-size:14px;margin:0 0 .6em}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px}
.ftr a{color:#cfe2ee}
.ftr__law{font-size:13px}

/* ---------- плавающая кнопка ---------- */
.callbar{display:none;position:fixed;left:16px;right:16px;bottom:14px;z-index:50;
  background:var(--ice);color:#fff;text-align:center;padding:14px;border-radius:4px;
  font-weight:700;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.24)}

/* ---------- адаптив ---------- */
@media (max-width:1040px){
  .burger{display:block;margin-left:14px}
  .nav{display:none;flex:1 1 100%;order:3;min-width:100%;border-top:1px solid #2a4257;
    padding:6px 0 10px}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;justify-content:flex-start}
  .nav a{padding:12px 4px;font-size:16px;border-radius:0;border-bottom:1px solid #233d50}
  .hdr__in{flex-wrap:wrap}
  .hdr__tel{margin-left:auto}
}
@media (max-width:900px){
  .hero__in{grid-template-columns:1fr;gap:24px;padding-block:34px 38px}
  .panels,.panels--4{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1fr;gap:22px}
  .kont{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sec{padding:36px 0}
  .panels,.panels--4{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .shots--t{grid-template-columns:repeat(3,1fr)}
  .shots--t figcaption{padding:9px 10px 11px;font-size:12.5px}
  .shots--t figcaption b{font-size:13.5px}
  .ftr__in{grid-template-columns:1fr}
  .callbar{display:block}
  body{padding-bottom:70px}
  .hero__fx{gap:18px}
}
/* Шапка на телефоне: логотип, номер и бургер обязаны стоять в один ряд.
   Иначе бургер переносится на вторую строку и над героем висит пустая
   тёмная полоса. Знак-снежинку убираем, словесный логотип оставляем —
   он и есть название. Ширины подобраны так, чтобы сумма влезала в 320. */
@media (max-width:520px){
  .brand__t i{display:none}
  .brand__ic{display:none}
  .brand__t b{font-size:17px}
  .hdr__tel{font-size:15px}
  .hdr__in{gap:10px;min-height:62px}
  .burger{margin-left:10px;width:40px;height:36px}
  .cta__tel a{font-size:23px}
  .sym li{padding:15px 16px 15px 20px}
}
@media (max-width:380px){
  .brand__t b{font-size:15px}
  .hdr__tel{font-size:13px}
  .hdr__in{gap:7px}
  /* margin-left у бургера убран: к нему уже прибавляется gap контейнера,
     и лишние 7px на 320px выталкивали бургер на вторую строку */
  .burger{margin-left:0;width:34px}
  .wrap{padding:0 14px}
  .shots--t{grid-template-columns:1fr}
}