/* OSQ Group: лендинг про картонную пищевую упаковку (d.osquared.com)
   Без скриптов и встроенных стилей: страница отдаётся с CSP default-src 'self'. */

/* ---------- Шрифты (SIL OFL 1.1, файлы в fonts/) ---------- */
@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/Manrope-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Цвета и размеры ---------- */
:root{
  --paper:#FBF7F1;
  --kraft-50:#F6EEE3;
  --kraft-100:#EFE2CF;
  --kraft-200:#E3CCAE;
  --kraft:#C8A27A;
  --kraft-600:#A9825A;
  --line:#DCC6A8;
  --ink:#1F2937;
  --ink-2:#4B5563;
  --accent:#00706A;          /* белый текст на нём 5,96:1 */
  --accent-hover:#005A55;
  --accent-50:#E6F1EE;
  --accent-bright:#5CC9BD;   /* кнопка на тёмном фоне, текст графитом */
  --dark:#1F2937;
  --darker:#151C27;
  --on-dark:#F9FAFB;
  --on-dark-2:#D1D5DB;
  --radius:20px;
  --wrap:1240px;
  --pad:20px;
  --f-head:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (min-width:768px){:root{--pad:32px}}
@media (min-width:1200px){:root{--pad:40px}}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;font-weight:400;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;line-height:1.15;letter-spacing:-.015em;margin:0 0 .5em;text-wrap:balance}
h2{font-size:clamp(1.75rem,1.15rem + 2.3vw,3rem);line-height:1.1;letter-spacing:-.025em}
h3{font-size:1.3125rem}
h4{font-size:1.1875rem}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}
ul,ol{margin:0;padding:0}
a{color:var(--accent);text-decoration-thickness:1.5px;text-underline-offset:.2em}
a:hover{color:var(--accent-hover);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
main:focus{outline:none}
.nowrap{white-space:nowrap}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{
  position:absolute;left:12px;top:-200px;z-index:100;
  background:var(--ink);color:#fff;font-weight:600;
  padding:12px 18px;border-radius:10px;text-decoration:none;
}
.skip:focus{top:12px;color:#fff;outline-color:var(--accent-bright)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.lead{font-size:1.125rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
@media (min-width:768px){.lead{font-size:1.1875rem}}

/* ---------- Кнопки и ссылки-стрелки ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.75em;
  width:100%;min-height:54px;padding:13px 26px;border-radius:999px;
  border:2px solid transparent;
  font-family:var(--f-body);font-weight:600;font-size:1.0625rem;line-height:1.25;
  text-align:center;text-decoration:none;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
@media (min-width:560px){.btn{width:auto}}
.btn--flow{flex-wrap:wrap;align-content:center;column-gap:.3em;row-gap:0}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:var(--accent-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn__num{display:none}
@media (min-width:768px){
  .btn__num{display:inline;padding-left:.75em;border-left:1px solid rgba(255,255,255,.5);font-family:var(--f-head);font-weight:700;white-space:nowrap}
}

.more{display:inline;font-weight:600}
.more::after{
  content:"";display:inline-block;width:1.05em;height:1.05em;margin-left:.4em;vertical-align:-.17em;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12.5M10.5 4.5L16 10l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h12.5M10.5 4.5L16 10l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .15s ease;
}
.more:hover::after{transform:translateX(3px)}

/* ---------- Шапка ---------- */
.site-header{position:relative;z-index:20;background:var(--kraft-100);border-bottom:1px solid var(--line)}
.header__inner{display:flex;align-items:center;gap:16px;min-height:68px}
.logo{
  display:inline-flex;align-items:center;gap:.35em;margin-right:auto;
  font-family:var(--f-head);font-weight:700;font-size:1.375rem;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.logo:hover{color:var(--ink)}
.logo__mark{
  display:inline-block;padding:.08em .38em .1em;border:2.5px solid currentColor;border-radius:.32em;
  letter-spacing:.06em;line-height:1.1;
}
.header__phone{
  display:none;font-family:var(--f-head);font-weight:700;font-size:1.0625rem;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.header__phone:hover{color:var(--accent-hover);text-decoration:underline}
@media (min-width:560px){.header__phone{display:inline-block}}

.nav ul{list-style:none}
.nav--desk{display:none}

/* Меню на телефоне без скриптов: кнопка ведёт на #menu, и пока адрес страницы заканчивается на #menu
   (:target), список открыт. Любой пункт меню меняет адрес на свой раздел, и меню закрывается само. */
.menu{scroll-margin-top:100vh}
.menu__btn{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:8px 16px;
  border:2px solid var(--ink);border-radius:999px;
  color:var(--ink);font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;user-select:none;
}
.menu__btn:hover{background:var(--kraft-200);color:var(--ink)}
.menu__close{display:none}
.menu:target .menu__open{display:none}
.menu:target .menu__close{display:inline-flex}
.menu__icon,.menu__icon::before,.menu__icon::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .15s ease,background-color .15s ease}
.menu__icon{position:relative}
.menu__icon::before,.menu__icon::after{content:"";position:absolute;left:0}
.menu__icon::before{top:-6px}
.menu__icon::after{top:6px}
.menu__close .menu__icon{background:transparent}
.menu__close .menu__icon::before{transform:translateY(6px) rotate(45deg)}
.menu__close .menu__icon::after{transform:translateY(-6px) rotate(-45deg)}
.nav--mob{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 18px 32px rgba(31,41,55,.14);
  padding:6px var(--pad) 22px;
}
.menu:target .nav--mob{display:block}
.nav--mob a{display:block;padding:13px 2px;border-bottom:1px solid var(--line);color:var(--ink);font-weight:600;font-size:1.125rem;text-decoration:none}
.nav--mob a:hover{color:var(--accent-hover)}
.nav--mob .nav__phone{border-bottom:0;margin-top:8px;color:var(--accent);font-family:var(--f-head);font-weight:700;font-size:1.25rem}

@media (min-width:1180px){
  .site-header{position:sticky;top:0;background:rgba(239,226,207,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .menu{display:none}
  .nav--desk{display:block}
  .nav--desk ul{display:flex;gap:2px}
  .nav--desk a{display:block;padding:8px 11px;border-radius:10px;color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;white-space:nowrap}
  .nav--desk a:hover{background:var(--kraft-200);color:var(--ink)}
  .header__phone{margin-left:8px}
  section[id]{scroll-margin-top:84px}
}

/* ---------- Первый экран ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(900px 520px at 88% 8%,rgba(251,247,241,.75),rgba(251,247,241,0) 70%),
    linear-gradient(180deg,var(--kraft-100) 0%,#F3E8D9 100%);
  padding:36px 0 0;
}
.hero::after{
  content:"";display:block;height:28px;margin-top:56px;
  background:url("img/flute.svg") left center/40px 28px repeat-x;
}
.hero__grid{display:grid;gap:28px;align-items:center}
.hero h1{
  font-size:clamp(2.125rem,1.25rem + 3.6vw,4.125rem);line-height:1.04;letter-spacing:-.035em;
  margin-bottom:.4em;max-width:15ch;
}
.hero__art img{width:100%;max-width:440px;margin-inline:auto}
@media (min-width:960px){
  .hero{padding-top:64px}
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px}
  .hero__art img{max-width:560px}
}

.facts{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:36px}
.fact{
  container-type:inline-size;
  background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 16px 20px;
}
.fact__num{
  display:block;font-family:var(--f-head);font-weight:700;line-height:1.05;letter-spacing:-.03em;color:var(--ink);
  font-size:1.75rem;font-size:clamp(1.5rem,19cqi,2.75rem);
}
.fact__pre{font-size:.5em;font-weight:600;letter-spacing:0;vertical-align:.35em;margin-right:.15em}
.fact__cap{display:block;margin-top:8px;color:var(--ink-2);font-size:.9375rem;line-height:1.4;-webkit-hyphens:auto;hyphens:auto}
@media (min-width:960px){
  .facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:56px}
  .fact{padding:22px 22px 24px}
  .fact__cap{font-size:1rem;-webkit-hyphens:manual;hyphens:manual}
}

/* ---------- Секции ---------- */
.section{padding:64px 0}
@media (min-width:768px){.section{padding:88px 0}}
@media (min-width:1200px){.section{padding:112px 0}}
.section--kraft{background:var(--kraft-100)}
.section--soft{background:var(--kraft-50)}
.section--eco{background:var(--accent-50)}
.section h2{max-width:24ch}
.section__head{max-width:780px;margin-bottom:36px}
.section__head p{font-size:1.125rem;color:var(--ink-2)}
@media (min-width:768px){.section__head{margin-bottom:48px}.section__head p{font-size:1.1875rem}}
.h-sub{font-size:clamp(1.3125rem,1.1rem + .8vw,1.625rem);margin:48px 0 20px}

/* ---------- Для кого ---------- */
#audience h2{margin-bottom:36px}
.cards{list-style:none;display:grid;gap:16px}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 22px 26px;
}
@media (min-width:768px){.card{padding:34px 32px}}
.card__icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--kraft-100);margin-bottom:22px}
.card__icon img{width:44px;height:44px}
.card h3{font-size:1.375rem}
.card p{color:var(--ink-2);flex:1 1 auto;margin-bottom:20px}
.card--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.card--accent .card__icon{background:var(--kraft-50)}
.card--accent p{color:#fff}
.card--accent .more,.card--accent .more:hover{color:#fff}
.card--accent :focus-visible{outline-color:#fff}

/* ---------- Линейки ---------- */
.lines{list-style:none;display:grid;gap:16px}
@media (min-width:600px){.lines{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1100px){.lines{grid-template-columns:repeat(4,minmax(0,1fr))}}
.line{
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 14px 22px;
}
.line__art{
  display:grid;place-items:center;align-self:stretch;aspect-ratio:4/3;
  background:linear-gradient(160deg,var(--kraft-200),#EBD9C1);border-radius:14px;padding:10px;
}
.line__art img{width:100%;max-width:220px}
.line__name{font-size:1.0625rem;letter-spacing:.07em;margin:18px 8px 8px;line-height:1.25}
.line p{flex:1 1 auto;margin:0 8px 16px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.line .more{margin:0 8px}
.lines__all{margin-top:40px;text-align:center}

/* ---------- Свой дизайн ---------- */
.custom__intro{display:grid;gap:28px;align-items:center}
.custom__art img{width:100%;max-width:520px;margin-inline:auto}
@media (min-width:960px){.custom__intro{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px}}
.steps__lead{font-size:1.125rem;max-width:62ch}
.steps{list-style:none;display:grid;gap:14px;margin-top:24px;counter-reset:step}
.step{
  position:relative;counter-increment:step;
  background:var(--kraft-50);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 24px 88px;min-height:96px;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;left:20px;top:20px;
  display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:var(--accent);color:#fff;font-family:var(--f-head);font-weight:700;font-size:1.0625rem;
}
.step h4{margin:4px 0 6px}
.step p{color:var(--ink-2);font-size:1rem;line-height:1.5}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .step{padding:90px 22px 26px}
  .step::before{left:22px;top:22px}
  .step:not(:last-child)::after{
    content:"";position:absolute;top:46px;left:84px;right:-21px;
    border-top:2px dashed var(--kraft-600);
  }
}

.terms{
  margin-top:48px;background:var(--dark);color:var(--on-dark);
  border-radius:28px;padding:30px 22px;
}
@media (min-width:768px){.terms{padding:44px 44px 40px}}
.terms__title{color:#fff;font-size:clamp(1.3125rem,1.1rem + .8vw,1.625rem);margin-bottom:22px}
.terms dl{margin:0}
.terms dt{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kraft-200)}
.terms dd{margin:6px 0 0}
.terms .terms__key{display:grid;gap:14px;margin-bottom:30px}
@media (min-width:768px){.terms .terms__key{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.terms__key>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:20px 22px 22px}
.terms__key dd{font-family:var(--f-head);font-weight:600;font-size:1.25rem;line-height:1.2;color:#fff}
.terms__pre,.terms__unit{font-size:1.25rem}
.terms__big{font-size:clamp(2.5rem,1.8rem + 2.6vw,3.75rem);font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.terms .terms__list{display:grid;gap:18px}
@media (min-width:900px){.terms .terms__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.terms__list dd{color:var(--on-dark-2);font-size:1rem;line-height:1.5}
.terms__list dd::first-letter{text-transform:uppercase}

.custom__cta{margin-top:44px;max-width:900px}
.custom__cta p{font-size:1.125rem}
.custom__cta .actions{margin-top:20px}

/* ---------- Производство ---------- */
.sites{display:grid;gap:16px;margin-bottom:8px}
@media (min-width:768px){.sites{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}
.site{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
@media (min-width:768px){.site{padding:32px}}
.site__icon{width:48px;height:48px;margin-bottom:14px}
.site h3{font-size:1.375rem;margin-bottom:18px}
.site__stats{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;border-top:1px solid var(--line);padding-top:18px}
.site__stats li{container-type:inline-size}
.stat__num{display:block;font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-size:1.625rem;font-size:clamp(1.375rem,15cqi,2.5rem)}
.stat__cap{display:block;margin-top:6px;color:var(--ink-2);font-size:.9375rem;line-height:1.4;-webkit-hyphens:auto;hyphens:auto}

.counters{list-style:none;display:grid;gap:16px}
@media (min-width:900px){.counters{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}}
.counter{container-type:inline-size;background:var(--kraft-200);border-radius:var(--radius);padding:26px 22px}
@media (min-width:768px){.counter{padding:30px 28px}}
.counter__num{display:block;font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-size:2rem;font-size:clamp(1.75rem,13cqi,3rem)}
.counter__pre{font-size:.5em;font-weight:600;letter-spacing:0;vertical-align:.4em;margin-right:.15em}
.counter__cap{display:block;margin-top:10px;font-size:1rem;line-height:1.5;color:var(--ink)}
.facts-list{list-style:none;display:grid;gap:14px;margin:28px 0 0}
@media (min-width:900px){.facts-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.facts-list li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;color:var(--ink-2)}
.facts-list strong{color:var(--ink)}
.production__sum{
  margin:36px 0 18px;max-width:30ch;
  font-family:var(--f-head);font-weight:700;font-size:clamp(1.375rem,1.1rem + 1.2vw,2rem);line-height:1.2;letter-spacing:-.02em;
}

/* ---------- Качество ---------- */
.checks{list-style:none;display:grid;gap:14px}
@media (min-width:900px){.checks{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.check{display:flex;gap:16px;align-items:flex-start;background:var(--kraft-50);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.check img{flex:none;width:44px;height:44px}
.check p{min-width:0;margin:0;line-height:1.5;-webkit-hyphens:auto;hyphens:auto}
.certs{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:520px){.certs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){.certs{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1100px){.certs{grid-template-columns:repeat(5,minmax(0,1fr))}}
.cert{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 12px 16px;min-width:0}
@media (min-width:768px){.cert{padding:14px 16px 18px}}
.cert__name{
  display:flex;align-items:center;min-height:62px;padding:10px 12px;
  border:2px dashed var(--kraft-600);border-radius:12px;background:var(--kraft-50);
  font-family:var(--f-head);font-weight:700;font-size:1rem;line-height:1.2;
  overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;
}
@media (min-width:768px){.cert__name{font-size:1.0625rem}}
.cert__desc{color:var(--ink-2);font-size:.875rem;line-height:1.45}
@media (min-width:520px){.cert__desc{-webkit-hyphens:auto;hyphens:auto}}
.cert__desc::first-letter{text-transform:uppercase}
@media (min-width:768px){.cert__desc{font-size:.9375rem}}
@media (min-width:1100px){.cert__desc{-webkit-hyphens:manual;hyphens:manual}}
.quality__ask{margin-top:32px;font-size:1.0625rem}

/* ---------- Экология ---------- */
.eco__grid{display:grid;gap:36px}
@media (min-width:1000px){.eco__grid{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:56px;align-items:start}}
.eco-list{list-style:none;display:grid;gap:22px;margin-top:32px}
@media (min-width:700px){.eco-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}}
.eco-list li{display:flex;gap:14px;align-items:flex-start}
.eco-list img{flex:none;width:44px;height:44px;margin-top:2px}
.eco-list p{margin:0;line-height:1.55}
.reports{background:#fff;border:1px solid #C9E0D9;border-radius:24px;padding:28px 24px}
@media (min-width:1000px){.reports{margin-top:8px;padding:34px 32px}}
.reports__num{display:flex;align-items:baseline;gap:12px;font-family:var(--f-head);font-weight:600;font-size:1.25rem;line-height:1.25;margin-bottom:16px}
.reports__big{font-size:4rem;font-weight:700;line-height:.9;color:var(--accent);letter-spacing:-.03em}
.reports .btn{margin-top:8px}

/* ---------- Где мы ---------- */
.geo__grid{display:grid;gap:36px}
@media (min-width:1200px){.geo__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:56px;align-items:center}}
.geo-list{list-style:none;display:grid;gap:12px;margin-top:24px}
.geo-list li{padding-left:18px;position:relative;line-height:1.55}
.geo-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--kraft-600)}
.actions--links{gap:14px 28px}
.map{margin:0;max-width:880px}
.map__svg{display:block;width:100%;height:auto}
.map__sheet{fill:var(--kraft-50);stroke:var(--kraft);stroke-width:2}
.map__dot{fill:#D7BC97}
.map__grid{fill:none;stroke:var(--kraft-200);stroke-width:1.5}
.map__prod{fill:var(--accent);stroke:#fff;stroke-width:3}
.map__branch{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.map__label{
  font-family:var(--f-body);font-weight:600;font-size:25px;fill:var(--ink);
  paint-order:stroke;stroke:var(--kraft-50);stroke-width:7px;stroke-linejoin:round;
}
@media (max-width:599px){.map{display:none}}
.map__legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px;font-size:.9375rem;color:var(--ink-2)}
.legend{display:inline-flex;align-items:center;gap:8px}
.legend::before{content:"";display:inline-block;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.legend--prod::before{width:18px;height:18px;background:var(--accent)}
.legend--branch::before{width:12px;height:12px;background:var(--ink)}

/* ---------- Призыв ---------- */
.cta{background:var(--dark);color:var(--on-dark);padding:72px 0}
@media (min-width:768px){.cta{padding:96px 0}}
.cta h2{color:#fff;max-width:20ch}
.cta .lead{color:var(--on-dark-2)}
.cta a{color:#fff}
.cta a:hover{color:var(--accent-bright)}
.cta :focus-visible{outline-color:var(--kraft-200)}
.cta__grid{display:grid;gap:36px}
@media (min-width:1000px){.cta__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:start}}
.contacts{display:grid;gap:18px;margin:0}
@media (min-width:600px){.contacts{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}}
.contacts__row--phone{grid-column:1/-1}
.contacts dt{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kraft-200)}
.contacts dd{margin:4px 0 0;font-size:1.125rem;font-weight:600}
.contacts__phone{font-family:var(--f-head);font-weight:700;font-size:clamp(2rem,1.4rem + 2.6vw,3.25rem);line-height:1.1;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.contacts__phone:hover{text-decoration:underline}
.cta__actions{margin-top:40px}
.cta .btn--primary{background:var(--accent-bright);color:var(--ink)}
.cta .btn--primary:hover{background:#86DBD1;color:var(--ink)}
.cta .btn--ghost{border-color:var(--kraft-200);color:#fff}
.cta .btn--ghost:hover{background:var(--kraft-200);color:var(--ink)}

/* ---------- Подвал ---------- */
.site-footer{background:var(--darker);color:var(--on-dark-2);padding:52px 0 36px;font-size:.9375rem;line-height:1.6}
.site-footer a{color:#fff}
.site-footer a:hover{color:var(--accent-bright)}
.site-footer :focus-visible{outline-color:var(--kraft-200)}
.site-footer strong{color:#fff}
.footer__grid{display:grid;gap:28px}
@media (min-width:900px){.footer__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px}}
.footer__logo{display:inline-flex;align-items:center;gap:.35em;font-family:var(--f-head);font-weight:700;font-size:1.25rem;color:#fff;margin-bottom:14px}
.footer__bottom{margin-top:32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:#A8B0BC;font-size:.875rem}
.footer__bottom p{margin-bottom:.5em}

/* ---------- Очень узкие экраны (крупный системный шрифт на телефоне) ---------- */
@media (max-width:340px){
  .header__inner{gap:10px}
  .logo{font-size:1.2rem}
  .menu__btn{padding-inline:12px;gap:8px}
  .menu__close{padding-inline:11px}
  .menu__close .menu__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .contacts__phone{white-space:normal;font-size:1.75rem}
  .check{flex-direction:column;gap:10px}
}

/* ---------- Меньше движения ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Печать ---------- */
@media print{
  .site-header,.hero::after,.actions,.skip,.lines__all,.reports .btn{display:none!important}
  body{background:#fff;font-size:11pt}
  .section,.cta{padding:24px 0}
  .cta,.site-footer,.terms,.card--accent{background:#fff;color:#000}
  .card--accent,.card--accent *,.terms *,.cta *,.site-footer *,.footer__logo{color:#000!important}
  .card--accent{border-color:#000}
  .terms,.terms__key>div{border:1px solid #000}
  .footer__bottom{border-top-color:#000}
  .step::before,.legend::before,.map__prod,.map__branch,.map__sheet,.map__dot,.card__icon,.counter{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}