/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Text can't be selected or copied (a deterrent only: page source and screenshots still work) */
body{margin:0;-webkit-user-select:none;user-select:none}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:#5E6B43;color:#F4EDE1}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-7px) rotate(var(--r,0deg))}}

/* Hover states. The hovered property is set here rather than inline,
   otherwise the inline value would always win over :hover. */
.btn-light{background:#F4EDE1}
.btn-light:hover{background:#fff}
.btn-olive{background:#5E6B43}
.btn-olive:hover{background:#4C5836}
.link-underline{position:relative;border-bottom:2px solid rgba(94,107,67,0.35)}
.link-underline:hover{border-bottom-color:#5E6B43}
.link-underline::before{content:"";position:absolute;inset:-8px 0}
.nav-link-light{color:rgba(247,242,231,0.92)}
.nav-link-light:hover{color:#fff}
.nav-link-dark{color:#4a453b}
.nav-link-dark:hover{color:#5E6B43}

/* Header. Properties that change on phones live here rather than inline.
   On phones with JS (an inline script in <head> sets html.js before first paint) the page links move
   into a burger menu driven by assets/js/menu.js; without JS the nav stays as on desktop.
   The toggle comes first in the markup so Tab reaches the open panel; order:1 shows it after "Написать". */
.site-header-row{gap:20px;flex-wrap:wrap}
.site-header-row--overlay{padding:22px 28px}
.site-header-row--solid{padding:14px 28px}
.brand{display:flex;align-items:baseline;gap:11px}
.brand-name{font-size:20px}
.brand-tag{font-size:21px}
.site-nav{gap:23px;flex-wrap:wrap}
.site-menu{display:contents}
.nav-link{text-decoration:none;font-size:15px;font-weight:500}
.nav-cta{font-size:14.5px;padding:10px 19px}
.menu-toggle{display:none;place-items:center;width:44px;height:44px;padding:0;border:none;border-radius:50%;background:rgba(46,42,34,0.06);color:inherit;cursor:pointer}
.site-header-row--overlay .menu-toggle{background:rgba(43,40,31,0.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.menu-toggle span{position:relative;transition:background .2s ease}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0;transition:transform .25s ease}
.menu-toggle span::before{transform:translateY(-6px)}
.menu-toggle span::after{transform:translateY(6px)}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}
@media (max-width:640px){
  .js [data-menu] .site-header-row{flex-wrap:nowrap;gap:10px}
  .js [data-menu] .brand{flex-direction:column;align-items:flex-start;gap:0;padding:4px 0;line-height:1.1}
  .js [data-menu] .brand-name{font-size:18px;white-space:nowrap}
  .js [data-menu] .brand-tag{font-size:19px;line-height:1}
  .js [data-menu] .site-nav{position:relative;flex-wrap:nowrap;gap:4px}
  .js [data-menu] .nav-cta{font-size:14px;padding:10px 16px}
  .js [data-menu] .menu-toggle{display:grid;order:1}
  .js [data-menu] .site-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:220px;flex-direction:column;gap:2px;padding:8px;background:#FBF7EF;border:1px solid rgba(46,42,34,0.08);border-radius:20px;box-shadow:0 24px 44px -20px rgba(46,42,34,0.45)}
  .js [data-menu].menu-open .site-menu{display:flex}
  .js [data-menu] .site-menu .nav-link{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:12px;font-size:17px;font-weight:600;color:#2E2A22}
  .js [data-menu] .site-menu .nav-link:hover{background:#F4EDE1;color:#5E6B43}
}
@media (max-width:359px){
  .js [data-menu] .site-header-row{gap:8px;padding-left:16px;padding-right:16px}
  .js [data-menu] .brand-name{font-size:17px}
  .js [data-menu] .nav-cta{font-size:13.5px;padding:10px 13px}
}

/* Large pill buttons (hero and closing CTA blocks) */
.hero-btn{font-size:17px;padding:16px 32px}
.cta-btn{font-size:17px;padding:17px 34px}
@media (max-width:640px){
  .hero-btn,.cta-btn{font-size:16px;padding:15px 22px}
}

/* Home hero. On phones the text moves to the top and the 1040px-tall photo is pinned to the bottom edge,
   so the dog's feet (71% down the image) sit 120px (about 2 cm on a phone screen) above the section's end;
   the bottom padding keeps the text clear of the dog however many lines the title takes. A section taller
   than 858px (e.g. large system fonts) makes the photo grow so it still covers the top; the dog then sits a bit lower. */
.hero{min-height:clamp(620px,92vh,860px);align-items:center}
/* The inline background is a 32px copy of the photo that shows while it loads; its size and position mirror object-fit/object-position */
.hero-photo{inset:0;height:100%;object-position:50% 44%;background-size:cover;background-position:50% 44%}
.hero-inner{padding:clamp(48px,7vw,96px) 28px}
@media (max-width:640px){
  .hero{min-height:0;align-items:flex-start;padding-bottom:270px}
  .hero-photo{top:auto;bottom:-182px;height:max(1040px,calc(100% + 182px));object-position:56% 0;background-position:56% 0}
  .hero-inner{padding-top:56px;padding-bottom:24px}
}
/* Home: hero title keeps its designed box on desktop, grows with its text on smaller screens */
.hero-title{min-height:213px}
/* Home: "шаг за шагом" note sits under the photo on desktop and between photo and steps once the columns stack */
.process-note{position:absolute;left:237px;top:575px;width:152px;height:37px}
@media (max-width:900px){
  .hero-title{min-height:0}
  .process-note{position:static;order:1;flex-basis:100%;width:auto;height:auto;margin:-12px 0 -16px;padding-left:76px;transform-origin:left center}
  .process-steps{order:2}
}

/* Consulting: winding road on wide screens, vertical list of the same stops on phones */
.roadmap-list{display:none}
@media (max-width:640px){
  .roadmap-svg{display:none}
  .roadmap-list{display:flex;flex-direction:column;gap:18px;position:relative;max-width:420px;margin:0 auto;padding:0;list-style:none;font-family:'Caveat',cursive;font-size:24px;font-weight:700;line-height:1.1;color:#33302A}
  .roadmap-list::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:10px;border-radius:5px;background:#D8B48F}
  .roadmap-list::after{content:"";position:absolute;left:23px;top:24px;bottom:24px;border-left:2px dashed #F4EDE1}
  .roadmap-list li{position:relative;z-index:1;display:flex;align-items:center;gap:16px;min-height:48px}
  .roadmap-num{flex:0 0 48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#5E6B43;color:#F4EDE1;font-size:30px}
  .roadmap-list li:last-child .roadmap-num{background:#B26A45}
}

/* Social walks: four-up card grids and steps go 2×2 on tablets and single column on phones */
.card-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.walk-steps{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.walk-step{padding:8px 26px}
.walk-step:first-child{padding-left:0}
.walk-step:last-child{padding-right:0}
.walk-watermark{top:-30px;right:34px;font-size:120px}
@media (max-width:980px){
  .card-grid,.walk-steps{grid-template-columns:repeat(2,1fr)}
  .walk-steps{row-gap:36px}
  .walk-step:nth-child(odd){padding:8px 26px 8px 0}
  .walk-step:nth-child(even){padding:8px 0 8px 26px}
  .walk-step:nth-child(even) .walk-step-line{display:none}
}
@media (max-width:560px){
  .card-grid,.walk-steps{grid-template-columns:1fr}
  .walk-steps{row-gap:30px}
  /* :nth-child(n) matches the specificity of the odd/even rules above so this later rule wins */
  .walk-step:nth-child(n){padding:0}
  .walk-step-line{display:none}
}
@media (max-width:640px){
  .walk-watermark{top:-12px;right:20px;font-size:76px;line-height:1}
}

/* Carousel dots (about page), driven by assets/js/carousel.js.
   The ::before enlarges the tap area without changing the look. */
.carousel-dot{position:relative;height:7px;width:7px;border-radius:999px;border:none;padding:0;cursor:pointer;background:rgba(46,42,34,0.2);transition:width .3s ease,background .3s ease}
.carousel-dot::before{content:"";position:absolute;inset:-18px -4px}
.carousel-dot[aria-current="true"]{width:24px;background:#5E6B43}

/* FAQ accordion (social walks page) */
/* font metrics of the default <button> the layout was designed with; they set the arrow's line box height */
.faq summary{list-style:none;font-size:13.333px;line-height:normal}
.faq summary::-webkit-details-marker{display:none}
.faq-arrow{transition:transform .25s ease}
.faq[open] .faq-arrow{transform:rotate(90deg)}