/* ═══════════════════════════════════════════════════════════
   Садовники С&Т — садовый центр
   ═══════════════════════════════════════════════════════════ */

/* Onest — переменный шрифт, лежит локально (OFL 1.1, см. assets/fonts/OFL.txt).
   Не с fonts.gstatic.com: иначе каждый визит отдаёт IP посетителя на серверы
   в США — трансграничная передача ПДн без уведомления РКН. */
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/onest-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Onest'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('assets/fonts/onest-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* Палитра выведена из логотипа: свежий лист + кора + глубокая зелень */
  --ink:        #14211a;
  --ink-soft:   #55655a;
  --ink-faint:  #8a978e;
  --paper:      #faf9f5;
  --paper-2:    #f2f0e8;
  --line:       #e3e0d5;
  --forest:     #0e2a17;
  --forest-2:   #14371f;
  --green:      #00791f;
  --green-dark: #00631a;
  --green-ink:  #00701d;
  --leaf:       #8cc63e;
  --leaf-dark:  #79b02f;
  --bark:       #a97b4f;

  --ease-out:    cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);

  --wrap: 1200px;
  --gut: clamp(20px, 5vw, 48px);
  --r: 14px;
  --hdr-h: 74px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.035em; line-height:1.06; text-wrap:balance }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }

.skip{
  position:fixed; left:12px; top:-100px; z-index:120;
  background:var(--forest); color:#fff; padding:12px 18px; border-radius:10px;
  font-weight:600; text-decoration:none;
  transition:top 180ms var(--ease-out);
}
.skip:focus-visible{ top:12px }

:focus-visible{ outline:2px solid var(--leaf); outline-offset:3px; border-radius:6px }

/* ── Типографика секций ─────────────────────────────────── */
.kicker{
  font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-ink); margin-bottom:20px;
}
.kicker--light{ color:var(--leaf) }

.h2{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); font-weight:800; letter-spacing:-.042em }
.h2--light{ color:#fff }

.lead{
  margin-top:22px; max-width:56ch;
  font-size:clamp(1.0625rem, 1.35vw, 1.1875rem);
  color:var(--ink-soft); line-height:1.6;
}
.lead--light{ color:#c3d4c6 }

/* ═══════════════  HEADER  ═══════════════ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--hdr-h);
}
/* Подложка вынесена в псевдоэлемент: анимировать радиус backdrop-filter
   нельзя — он пересчитывается покадрово во всю ширину экрана, и делает
   это на скролле. Радиус держим постоянным, проявляем через opacity. */
.hdr::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(250,249,245,.86);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 rgba(20,33,26,.08), 0 12px 30px -22px rgba(20,33,26,.5);
  opacity:0;
  transition:opacity 240ms var(--ease-out);
}
.hdr.is-stuck::before{ opacity:1 }
.hdr__in{
  height:100%;
  display:flex; align-items:center; gap:28px;
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto }
/* Оливковый лист знака тонет на тёмном: приподнимаем тенью и тонким ореолом.
   На светлой подложке прилипшей шапки тень не нужна. */
.brand__mark{
  width:38px; height:auto; flex:none;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 1px 5px rgba(0,0,0,.45));
  transition:filter 240ms var(--ease-out);
}
.hdr.is-stuck .brand__mark{ filter:none }
.brand__txt{ display:flex; flex-direction:column; line-height:1.1 }
.brand__name{
  font-weight:800; font-size:1.0625rem; letter-spacing:-.02em;
  color:#fff; transition:color 240ms var(--ease-out);
}
.brand__sub{
  font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  color:rgba(255,255,255,.82); transition:color 240ms var(--ease-out);
}
.hdr.is-stuck .brand__name{ color:var(--ink) }
.hdr.is-stuck .brand__sub{ color:var(--ink-faint) }

.nav{ display:flex; gap:30px }
.nav a{
  position:relative; text-decoration:none; font-weight:500; font-size:.9375rem;
  color:rgba(255,255,255,.85); padding-block:6px;
  transition:color 200ms var(--ease-out);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform 260ms var(--ease-out);
}
.hdr.is-stuck .nav a{ color:var(--ink-soft) }
@media (hover:hover) and (pointer:fine){
  .nav a:hover{ color:#fff }
  .hdr.is-stuck .nav a:hover{ color:var(--green-ink) }
  .nav a:hover::after{ transform:scaleX(1) }
}

.hdr__act{ display:flex; align-items:center; gap:16px }
.hdr__phones{ display:grid; gap:2px }
.hdr__phone{
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  min-height:24px;
  color:#fff; text-decoration:none; white-space:nowrap;
  transition:color 240ms var(--ease-out), opacity 200ms var(--ease-out);
}
.hdr__phone span{
  min-width:47px; font-size:.625rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.68);
  transition:color 240ms var(--ease-out);
}
.hdr__phone strong{ font-size:.8125rem; font-weight:650; letter-spacing:-.01em }
.hdr.is-stuck .hdr__phone{ color:var(--ink) }
.hdr.is-stuck .hdr__phone span{ color:var(--ink-faint) }
@media (hover:hover) and (pointer:fine){ .hdr__phone:hover{ color:var(--leaf) } }

/* ── Бургер ── */
.burger{
  display:none; width:42px; height:42px; padding:0; border:0; border-radius:11px;
  background:rgba(255,255,255,.14); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:background-color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.hdr.is-stuck .burger{ background:rgba(20,33,26,.08) }
.burger:active{ transform:scale(.94) }
.burger span{
  display:block; width:18px; height:2px; border-radius:2px; background:#fff;
  transition:transform 260ms var(--ease-out), background-color 240ms var(--ease-out);
}
.hdr.is-stuck .burger span{ background:var(--ink) }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg) }

/* ── Мобильная шторка ── */
.sheet{
  position:absolute; top:100%; left:0; right:0;
  background:var(--paper);
  border-top:1px solid var(--line);
  padding:14px var(--gut) 26px;
  box-shadow:0 24px 40px -28px rgba(20,33,26,.6);
  transform-origin:top;
}
.js .sheet{
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-10px) scaleY(.97);
  transition:opacity 200ms var(--ease-out), transform 260ms var(--ease-out),
             visibility 0s linear 260ms;
}
.js .hdr.is-open .sheet{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity 220ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s;
}
.sheet__nav{ display:flex; flex-direction:column }
.sheet__nav a{
  text-decoration:none; font-weight:600; font-size:1.0625rem;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.sheet .phone-pair{ margin-top:18px }

/* ═══════════════  КНОПКИ  ═══════════════ */
.btn{
  --btn-bg:var(--green); --btn-fg:#fff;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border:0; border-radius:999px;
  background:var(--btn-bg); color:var(--btn-fg);
  font:inherit; font-weight:600; font-size:.9375rem; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform 160ms var(--ease-out), background-color 200ms var(--ease-out),
             box-shadow 200ms var(--ease-out);
}
.btn:active{ transform:scale(.97) }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--green-dark); box-shadow:0 10px 24px -12px rgba(0,99,26,.75) }
}
.btn--sm{ padding:10px 19px; font-size:.875rem }
.btn--lg{ padding:16px 30px; font-size:1rem }
.btn--block{ display:flex; width:100% }

.btn--ghost{
  --btn-bg:transparent; --btn-fg:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
@media (hover:hover) and (pointer:fine){
  .btn--ghost:hover{ background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7) }
}

.btn--leaf{ --btn-bg:var(--leaf); --btn-fg:#14211a }
@media (hover:hover) and (pointer:fine){
  .btn--leaf:hover{ background:var(--leaf-dark); box-shadow:0 10px 26px -12px rgba(140,198,62,.8) }
}

/* ── Пара персональных телефонов ── */
.phone-pair{ display:flex; flex-wrap:wrap; gap:10px }
.person-phone{
  display:inline-flex; flex-direction:column; justify-content:center; min-height:54px;
  padding:9px 16px 10px; border-radius:14px; text-decoration:none; color:#fff;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  transition:transform 160ms var(--ease-out), background-color 220ms var(--ease-out),
             box-shadow 220ms var(--ease-out);
}
.person-phone__name{
  font-size:.625rem; font-weight:700; letter-spacing:.11em; line-height:1.2;
  text-transform:uppercase; color:rgba(255,255,255,.68); margin-bottom:3px;
}
.person-phone__num{ font-size:.9375rem; font-weight:700; letter-spacing:-.02em; white-space:nowrap }
.person-phone:active{ transform:scale(.975) }
.person-phone--leaf{ background:var(--leaf); color:var(--ink) }
.person-phone--leaf .person-phone__name{ color:rgba(20,33,26,.65) }
@media (hover:hover) and (pointer:fine){
  .person-phone:hover{ background:rgba(255,255,255,.18); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.52) }
  .person-phone--leaf:hover{ background:var(--leaf-dark); box-shadow:0 10px 26px -12px rgba(140,198,62,.8) }
}
.phone-pair--sheet{ display:grid; grid-template-columns:1fr 1fr }
.phone-pair--sheet .person-phone{
  color:var(--ink); background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line);
}
.phone-pair--sheet .person-phone__name{ color:var(--ink-faint) }

/* ═══════════════  HERO  ═══════════════ */
.hero{
  position:relative; isolation:isolate;
  min-height:min(94vh, 800px);
  display:flex; align-items:flex-end;
  padding:calc(var(--hdr-h) + 60px) 0 clamp(48px, 7vw, 80px);
  background:var(--forest);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:-2 }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:58% center;
  transform:scale(1.08); filter:blur(8px);
  transition:transform 1600ms var(--ease-out), filter 900ms var(--ease-out);
}
.hero.is-in .hero__media img{ transform:scale(1); filter:blur(0) }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to top, rgba(9,26,15,.92) 0%, rgba(9,26,15,.66) 34%, rgba(9,26,15,.18) 66%, rgba(9,26,15,.45) 100%),
    linear-gradient(to right, rgba(9,26,15,.5), transparent 62%);
}

.hero__in{ position:relative }
.hero__logo{
  width:clamp(190px, 23vw, 264px); height:auto; margin-bottom:26px;
  /* Коричневая надпись логотипа тонет в светлых участках фото — отделяем
     тёмным ореолом в цвет затемнения hero. */
  filter:
    drop-shadow(0 0 3px rgba(9,26,15,1))
    drop-shadow(0 0 12px rgba(9,26,15,.9))
    drop-shadow(0 4px 20px rgba(9,26,15,.7));
}
.hero__kicker{
  font-size:.8125rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--leaf); margin-bottom:16px;
}
.hero__h1{
  font-size:clamp(3rem, 8.2vw, 6rem);
  font-weight:800; letter-spacing:-.05em; line-height:.94; color:#fff;
}
.hero__lead{
  margin-top:24px; max-width:46ch;
  font-size:clamp(1.0625rem, 1.5vw, 1.25rem); line-height:1.55;
  color:rgba(238,245,238,.86);
}
.hero__cta{ display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; margin-top:34px }
.phone-pair--hero{ gap:8px }
.phone-pair--hero .person-phone{ min-height:100% }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px 8px 12px; border-radius:999px;
  background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; text-decoration:none; font-size:.875rem; font-weight:500;
  transition:transform 160ms var(--ease-out), background-color 200ms var(--ease-out);
}
.chip:active{ transform:scale(.97) }
@media (hover:hover) and (pointer:fine){
  .chip:hover{ background:rgba(255,255,255,.2) }
}
.ico{ width:19px; height:19px; fill:currentColor; flex:none }

/* Появление содержимого героя */
.js .hero__in > *{ opacity:0; transform:translateY(18px) }
.hero.is-in .hero__in > *{
  opacity:1; transform:none;
  transition:opacity 700ms var(--ease-out) calc(var(--i, 0) * 70ms + 120ms),
             transform 800ms var(--ease-out) calc(var(--i, 0) * 70ms + 120ms);
}

/* ═══════════════  СЕКЦИИ  ═══════════════ */
section[id]{ scroll-margin-top:calc(var(--hdr-h) + 16px) }
.sec{ padding:clamp(80px, 10vw, 148px) 0 }
.sec--tight{ padding-block:clamp(72px, 8vw, 118px) }
.sec--paper{ background:var(--paper-2) }

.sec__head{ max-width:720px; margin-bottom:clamp(44px, 5vw, 68px) }
.sec__head--center{ margin-inline:auto; text-align:center }
.sec__head--center .lead{ margin-inline:auto }

/* ── Плитки услуг ── */
.tiles{ display:grid; grid-template-columns:repeat(6, 1fr); gap:14px }
.tile{
  position:relative; grid-column:span 2; isolation:isolate; overflow:hidden;
  border-radius:var(--r); text-decoration:none; color:#fff;
  aspect-ratio:1/1;
  display:flex; align-items:flex-end;
  transition:transform 260ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.tile--wide{ grid-column:span 3; aspect-ratio:16/10 }
.tile img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover;
  /* Ховер — действие частое: наезд должен успеть закончиться, пока курсор
     ещё на плитке, а не догонять его через полсекунды. */
  transition:transform 450ms var(--ease-out);
}
.tile::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, rgba(9,26,15,.9) 6%, rgba(9,26,15,.42) 46%, rgba(9,26,15,.06) 78%);
  transition:opacity 400ms var(--ease-out);
}
.tile__body{ padding:20px 22px 22px; position:relative }
.tile__body h3{
  font-size:clamp(1.0625rem, 1.5vw, 1.375rem); font-weight:700; letter-spacing:-.03em;
}
.tile--wide .tile__body h3{ font-size:clamp(1.3rem, 2vw, 1.75rem) }
.tile__body p{
  margin-top:6px; font-size:.875rem; line-height:1.45; color:rgba(232,241,233,.82);
  max-width:34ch;
}
.tile__arrow{
  position:absolute; top:18px; right:18px; z-index:1;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:1rem;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transform:translate(-4px, 4px);
  transition:opacity 300ms var(--ease-out), transform 340ms var(--ease-out), background-color 200ms var(--ease-out);
}
.tile:active{ transform:scale(.99) }
@media (hover:hover) and (pointer:fine){
  .tile:hover img{ transform:scale(1.06) }
  .tile:hover::after{ opacity:.86 }
  .tile:hover .tile__arrow{ opacity:1; transform:none; background:var(--leaf); color:var(--ink) }
}

/* ═══════════════  ПРОМО  ═══════════════ */
.promo{ background:var(--forest); color:#fff; overflow:hidden }
.promo__in{
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(32px, 5vw, 72px);
  padding-block:clamp(64px, 8vw, 110px);
}
.promo__media{ margin:0; border-radius:var(--r); overflow:hidden }
.promo__media img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover }
.promo__price{
  margin-top:30px; font-size:clamp(2.2rem, 4.4vw, 3.2rem); font-weight:800;
  letter-spacing:-.045em; color:var(--leaf); line-height:1;
}
.promo__price span{
  font-size:.9rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#a9bfae; vertical-align:middle; margin-right:10px;
}
.phone-pair--promo{ margin-top:30px }

/* ═══════════════  О НАС  ═══════════════ */
.cols{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(28px, 4vw, 56px) }
.col{ padding-top:22px; border-top:1px solid var(--line) }
.col h3{ font-size:1.1875rem; font-weight:700; letter-spacing:-.028em }
.col p{ margin-top:12px; color:var(--ink-soft); font-size:1rem; line-height:1.6 }

/* ═══════════════  РАБОТЫ  ═══════════════ */
.works{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(24px, 3vw, 40px) }
.work__media{
  margin:0 0 20px; border-radius:var(--r); overflow:hidden; background:#fff;
}
.work__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform 450ms var(--ease-out);
}
.work h3{ font-size:1.1875rem; font-weight:700; letter-spacing:-.028em }
.work p{ margin-top:10px; color:var(--ink-soft); font-size:.9688rem; line-height:1.58 }
@media (hover:hover) and (pointer:fine){
  .work:hover .work__media img{ transform:scale(1.04) }
}

/* ═══════════════  КОНТАКТЫ  ═══════════════ */
.contact{ background:var(--forest-2); color:#fff }
.contact__in{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px, 6vw, 88px);
  padding-block:clamp(76px, 9vw, 130px);
}

/* ── Главное действие блока: позвонить ──
      Карточка целиком — одна ссылка tel:, чтобы на телефоне
      попадать в неё пальцем, а не в шесть цифр подряд. */
.call{
  display:flex; align-items:center; gap:18px;
  margin-top:34px; max-width:440px;
  padding:20px 24px; border-radius:16px; text-decoration:none; color:#fff;
  background:rgba(140,198,62,.12); box-shadow:inset 0 0 0 1.5px rgba(140,198,62,.38);
  transition:transform 160ms var(--ease-out), background-color 220ms var(--ease-out),
             box-shadow 220ms var(--ease-out);
}
.call__ico{
  width:52px; height:52px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  background:var(--leaf); color:var(--forest);
}
.call__ico svg{ width:26px; height:26px; fill:currentColor }
.call__cap{
  display:block; font-size:.8125rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#a9bfae; margin-bottom:4px;
}
.call__num{
  display:block; font-size:clamp(1.35rem, 2.4vw, 1.75rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.1;
}
/* Второй номер идёт сразу под первым: это та же пара карточек,
   а не новый блок, поэтому отступ между ними меньше стартового. */
.call + .call{ margin-top:12px }
.call:active{ transform:scale(.975) }
@media (hover:hover) and (pointer:fine){
  .call:hover{ background:rgba(140,198,62,.2); box-shadow:inset 0 0 0 1.5px var(--leaf) }
}
.call__note{ margin-top:16px; max-width:440px; font-size:.875rem; line-height:1.55; color:#8fa595 }

/* ── Инфо-блок ── */
.info{ margin:0; display:grid; gap:26px }
.info dt{
  font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#8fa595; margin-bottom:6px;
}
.info dd{ margin:0; font-size:1.0625rem; line-height:1.5; color:#eaf2ea }
.info dd a{ text-decoration:none; transition:color 200ms var(--ease-out) }
/* Ссылку на карту внутри адреса подчёркиваем: без этого она
   не отличается от строк самого адреса. */
.info dd .info__map{
  display:inline-block; margin-top:8px; color:var(--leaf);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
}
@media (hover:hover) and (pointer:fine){
  .info dd a:hover{ color:var(--leaf) }
}

.social{ margin-top:40px; padding-top:32px; border-top:1px solid rgba(255,255,255,.14) }
.social__cap{
  font-size:.8125rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#8fa595; margin-bottom:16px;
}
.social__row{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px }
/* Мессенджеров три, колонок две — последняя кнопка добирает пустую ячейку.
   Три колонки не годятся: на 1000–1100px «ВКонтакте» в них не влезает. */
.social__row .soc:last-child{ grid-column:1 / -1 }
.soc{
  display:flex; align-items:center; gap:11px;
  padding:14px 18px; border-radius:12px; text-decoration:none;
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);
  color:#fff; font-weight:600; font-size:.9375rem;
  transition:transform 160ms var(--ease-out), background-color 220ms var(--ease-out),
             box-shadow 220ms var(--ease-out);
}
.soc svg{ width:22px; height:22px; flex:none; fill:currentColor }
.soc:active{ transform:scale(.975) }
@media (hover:hover) and (pointer:fine){
  .soc:hover{ background:rgba(255,255,255,.13) }
  .soc--tg:hover{ box-shadow:inset 0 0 0 1.5px #34a8ea; color:#7fd0ff }
  .soc--vk:hover{ box-shadow:inset 0 0 0 1.5px #4a8fff; color:#a8c8ff }
  .soc--max:hover{ box-shadow:inset 0 0 0 1.5px #7b5cf0; color:#b9a6ff }
}

/* ═══════════════  FOOTER  ═══════════════ */
.ftr{ background:var(--forest); color:#fff; padding:44px 0 }
.ftr__in{
  display:flex; align-items:center; flex-wrap:wrap; gap:24px 40px;
  padding-top:0;
}
.brand--ftr{ margin-right:auto }
.brand--ftr .brand__name{ color:#fff }
.brand--ftr .brand__sub{ color:#8fa595; text-transform:none; letter-spacing:.02em; font-size:.75rem }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:8px 22px }
.ftr__nav a{
  text-decoration:none; font-size:.875rem; color:#b9cbbd;
  transition:color 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .ftr__nav a:hover{ color:var(--leaf) } }
.phone-pair--footer{ gap:8px }
.phone-pair--footer .person-phone{ min-height:48px; padding:7px 12px 8px }
.phone-pair--footer .person-phone__num{ font-size:.8125rem }
.ftr__copy{ font-size:.8125rem; color:#7d9184; width:100%; padding-top:8px }

/* ═══════════════  ПЛАВАЮЩАЯ КНОПКА  ═══════════════ */
.fab{
  position:fixed; right:clamp(16px, 3vw, 28px); bottom:clamp(16px, 3vw, 28px);
  z-index:90; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.fab__list{ display:flex; flex-direction:column; gap:10px; pointer-events:none }
.fab.is-open .fab__list{ pointer-events:auto }
.fab__item{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper); color:var(--forest);
  box-shadow:0 8px 22px -8px rgba(14,42,23,.5), 0 1px 3px rgba(14,42,23,.2);
  /* Кнопки стоят колонкой над триггером, поэтому растут от своего нижнего
     края — со стороны, откуда их вызвали. Стартовый масштаб держим у порога
     0.9: ниже объект читается как выпрыгнувший из точки. */
  opacity:0; transform:scale(.92) translateY(8px); transform-origin:bottom center;
  transition:opacity 200ms var(--ease-out) calc(var(--i,0) * 40ms),
             transform 260ms var(--ease-out) calc(var(--i,0) * 40ms),
             background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.fab.is-open .fab__item{ opacity:1; transform:none }
.fab__item svg{ width:23px; height:23px; fill:currentColor }
.fab__item:active{ transform:scale(.92) }
@media (hover:hover) and (pointer:fine){
  .fab__item.soc--tg:hover{ background:#34a8ea; color:#fff }
  .fab__item.soc--vk:hover{ background:#0077ff; color:#fff }
  .fab__item.soc--max:hover{ background:#3b47f0; color:#fff }
}

.fab__btn{
  position:relative; width:56px; height:56px; border:0; border-radius:50%;
  background:var(--green); color:#fff; cursor:pointer;
  display:grid; place-items:center;
  box-shadow:0 12px 28px -10px rgba(0,99,26,.75), 0 2px 6px rgba(14,42,23,.25);
  transition:transform 180ms var(--ease-out), background-color 220ms var(--ease-out);
}
.fab__btn:active{ transform:scale(.94) }
@media (hover:hover) and (pointer:fine){ .fab__btn:hover{ background:var(--green-dark) } }
.fab__ico{
  position:absolute; width:25px; height:25px; fill:currentColor;
  /* Иконка не входит и не выходит, а превращается на месте —
     такому движению нужна симметричная кривая. */
  transition:opacity 200ms var(--ease-in-out), transform 260ms var(--ease-in-out);
}
.fab__ico--close{ fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; opacity:0; transform:rotate(-45deg) scale(.85) }
.fab.is-open .fab__ico--chat{ opacity:0; transform:rotate(45deg) scale(.85) }
.fab.is-open .fab__ico--close{ opacity:1; transform:none }

/* ═══════════════  РЕВИЛЫ ПРИ СКРОЛЛЕ  ═══════════════ */
/* Только opacity и transform: они считаются на композиторе. Размытие
   здесь стоило бы перерисовки секции во всю ширину на каждом кадре,
   а прибавляло почти ничего — подъём и проявление делают всю работу. */
.js [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity 640ms var(--ease-out) var(--d, 0ms),
             transform 760ms var(--ease-out) var(--d, 0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none }

/* ═══════════════  АДАПТИВ  ═══════════════ */
@media (max-width: 1000px){
  .promo__in,
  .contact__in{ grid-template-columns:1fr }
  .promo__media{ order:2 }
  .works{ grid-template-columns:1fr 1fr }
  .work:last-child{ grid-column:span 2 }
  .work:last-child .work__media img{ aspect-ratio:21/9 }
}

@media (max-width: 860px){
  :root{ --hdr-h:64px }
  .nav, .hdr__phones{ display:none }
  .burger{ display:flex }
  .tiles{ grid-template-columns:repeat(4, 1fr) }
  .tile{ grid-column:span 2 }
  .tile--wide{ grid-column:span 4; aspect-ratio:16/9 }
  .cols{ grid-template-columns:1fr }
  .col{ padding-top:18px }
}

@media (max-width: 620px){
  body{ font-size:16px }
  .hero{ min-height:auto; padding-top:calc(var(--hdr-h) + 90px) }
  .hero__media img{ object-position:62% center }
  .hero__cta{ flex-direction:column; align-items:stretch }
  .phone-pair--hero{ display:grid; grid-template-columns:1fr 1fr }
  .hero__cta .btn{ width:100% }
  .tiles{ grid-template-columns:1fr; gap:12px }
  .tile, .tile--wide{ grid-column:span 1; aspect-ratio:4/3 }
  .works{ grid-template-columns:1fr }
  .work:last-child{ grid-column:span 1 }
  .work:last-child .work__media img{ aspect-ratio:4/3 }
  .social__row{ grid-template-columns:1fr }
  .ftr__in{ flex-direction:column; align-items:flex-start }
  .phone-pair--footer{ width:100%; display:grid; grid-template-columns:1fr 1fr }
  .fab{ bottom:16px }
}

@media (max-width: 430px){
  .phone-pair--sheet,
  .phone-pair--hero,
  .phone-pair--promo,
  .phone-pair--footer{ grid-template-columns:1fr; width:100% }
  .phone-pair--promo{ display:grid }
}

/* ═══════════════  REDUCED MOTION  ═══════════════ */
/* «Меньше и мягче», а не «ничего». Затухание и смена цвета вестибулярной
   реакции не вызывают — их оставляем, иначе интерфейс перестаёт отвечать
   на нажатия. Убираем только то, что реально едет по экрану: наезды,
   сдвиги и расфокус героя. */
@media (prefers-reduced-motion: reduce){

  /* ── Появления при скролле: сразу конечное состояние.
        script.js при reduced вообще не вешает IntersectionObserver,
        поэтому класс .is-in не придёт и opacity здесь обязателен. ── */
  .js [data-reveal]{ opacity:1; transform:none }
  .js .hero__in > *{ opacity:1; transform:none }
  .hero__media img{ transform:none; filter:none }

  /* ── Наезд картинок по ховеру: самое крупное движение на странице ── */
  .tile img,
  .work__media img{ transition:none }
  .tile:hover img,
  .work:hover .work__media img{ transform:none }
  .tile__arrow{ transform:none }

  /* ── Шторка: только затухание, без съезда и сжатия по вертикали ── */
  .js .sheet{
    transform:none;
    transition:opacity 160ms var(--ease-out), visibility 0s linear 160ms;
  }
  .js .hdr.is-open .sheet{
    transform:none;
    transition:opacity 160ms var(--ease-out), visibility 0s;
  }

  /* ── FAB: кнопки по-прежнему приходят и уходят вместе со списком,
        но проявляются, а не вылетают. Держать их видимыми всегда нельзя:
        при закрытом списке они некликабельны и висят мёртвым грузом. ── */
  .fab__item{
    transform:none;
    transition:opacity 160ms var(--ease-out),
               background-color 200ms var(--ease-out), color 200ms var(--ease-out);
  }
  .fab.is-open .fab__item{ transform:none }
  .fab__ico{ transition:opacity 160ms var(--ease-out) }
  .fab__ico--close,
  .fab.is-open .fab__ico--chat{ transform:none }
}