/* Шрифтовете идват от <link> в head (паралелно), не от @import тук. */

/* ==========================================================================
   Ветеринарна клиника д-р Свилен Пенев
   Зелено водещо (пречупено от клиниката), светла основа + тъмнозелени секции
   за ритъм. Модерна редакционна композиция. Топли реални снимки.
   Акценти от техния език: лапи, сърце, мотото на стената. Wix Madefor + Martian Mono.
   ========================================================================== */

:root{
  /* --- цветовете от логото: синьо + червено --- */
  --bone:       #FBF9F5;
  --paper:      #FFFFFF;
  --ink:        #141E2A;
  --ink-2:      #55606D;
  --ink-3:      #8992A0;
  --green:      #1662A0;   /* синьо от логото — водещо */
  --green-deep: #103A63;   /* дълбоко синьо — тъмните ленти */
  --green-mid:  #124F86;   /* hover */
  --fresh:      #D23B34;   /* червено от логото — акцентът */
  --green-pale: #E6EFF6;   /* меко синьо */
  --blue:       #1662A0;
  --warm:       #D23B34;
  --sig:        #D23B34;
  --hair:       #E5E3DB;
  --hair-d:     rgba(255,255,255,.16);

  --disp: 'Wix Madefor Display', system-ui, -apple-system, sans-serif;
  --text: 'Golos Text', system-ui, -apple-system, sans-serif;
  --mono: 'Martian Mono', ui-monospace, "SF Mono", monospace;

  --t-hero: clamp(2.5rem, 1.1rem + 5.6vw, 5.4rem);
  --t-h2:   clamp(1.9rem, 1.2rem + 3vw, 3.4rem);
  --t-h3:   clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  --lead:   clamp(1.08rem, 1rem + .4vw, 1.32rem);

  --shell: 1230px;
  --pad:   clamp(1.15rem, .3rem + 3vw, 3.25rem);
  --sec:   clamp(3.25rem, 1.8rem + 4.6vw, 6rem);

  --r:  16px;
  --r-lg: 26px;

  --ease:  cubic-bezier(.22,.65,.3,1);
  --sh:    0 1px 3px rgba(20,30,42,.05), 0 14px 34px -18px rgba(20,30,42,.18);
  --sh-lg: 0 2px 8px rgba(20,30,42,.06), 0 34px 60px -28px rgba(16,45,72,.28);
}

*,*::before,*::after{ box-sizing:border-box; }
/* без scroll-behavior:smooth на html — иначе браузърът анимира и възстановяването
   на позицията при F5 (скача горе, после плавно се връща надолу — досадно).
   Плавното скролиране на totop бутона се прави изрично през JS (scrollTo behavior). */
html{ -webkit-text-size-adjust:100%; scroll-padding-top:5.5rem; overflow-anchor:none; }
@view-transition{ navigation:auto; }

body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--text); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
/* Safari на iOS не спазва напълно overflow:hidden на html/body при тъч-скрол —
   слагаме клипването на едно ниво по-навътре, на обикновен блоков елемент, където
   работи надеждно. Не пипа жеста „плъзни от ръба назад" на браузъра (за разлика
   от overscroll-behavior/touch-action, които biха го блокирали).
   overflow-x:hidden (вместо clip) автоматично превръща overflow-y в auto — нов
   скрол контейнер, вътре в който position:sticky спира да работи спрямо
   реалния viewport (засегна страничната лента в "Услуги"/"За нас"). clip не
   прави тази неявна замяна, затова пази sticky, докато пази и хоризонталното
   клипване. */
#wrap{ overflow-x:clip; overflow-y:visible; }
/* докато менюто е отворено: body е "заключено" на текущия скрол (виж main.js) —
   не разчитаме само на overflow:hidden, то не спира тъч-скрола на iOS */
body.is-menu,body.scroll-lock{ position:fixed; left:0; right:0; overflow:hidden; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
figure,blockquote,dl,dd{ margin:0; }
::selection{ background:var(--fresh); color:#fff; }
:focus-visible{ outline:2.5px solid var(--fresh); outline-offset:3px; border-radius:6px; }

h1,h2,h3,h4{
  font-family:var(--disp); font-weight:700; line-height:1.06;
  letter-spacing:-.025em; margin:0; text-wrap:balance;
}

.shell{ width:min(100% - var(--pad)*2, var(--shell)); margin-inline:auto; position:relative; }
.shell--narrow{ max-width:700px; }

/* ---------- живи изрезки: животни без фон, положени ВЪРХУ дизайна ---------- */
.cut{ position:absolute; z-index:3; pointer-events:none;
      filter:drop-shadow(0 16px 20px rgba(20,30,42,.22)); }
.cut img{ display:block; width:100%; height:auto; }
@media (max-width:900px){ .cut--scatter{ display:none; } }
.sr-only{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* ---------- моно етикет ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-weight:500; font-size:.68rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--green);
}
.eyebrow::before{ content:""; width:22px; height:1px; background:currentColor; }

.lead{ font-size:var(--lead); color:var(--ink-2); max-width:58ch; }

/* ---------- секции ---------- */
.sec{ padding-block:var(--sec); position:relative; }
.sec:has(+ .call){ padding-bottom:clamp(2rem,1.2rem + 2vw,3rem); }
.motto + .sec, .phead + .sec{ padding-top:clamp(2.5rem,1.6rem + 3vw,4.5rem); }
.sec--pale{ background:var(--green-pale); }
.sec--paper{ background:var(--paper); }
.sec--deep{ background:var(--green-deep); color:#BFD0E0; }
.sec--deep h1,.sec--deep h2,.sec--deep h3{ color:#fff; }
.sec--deep .lead{ color:#9DB2C6; }
.sec--deep .eyebrow{ color:var(--fresh); }

.sec-head{ display:grid; gap:1.1rem; max-width:60ch; margin-bottom:clamp(2.2rem,1.4rem + 3vw,4rem); }
.sec-head h2{ font-size:var(--t-h2); }

/* единен отстъп над "виж всички" линкове под решетки (беше разхвърляно: 2.5rem/1.8rem/2rem) */
.more{ margin-top:clamp(1.8rem,1.4rem + 1.2vw,2.5rem); }

/* дума с ръкописно подчертаване */
.u{ position:relative; white-space:nowrap; }
.u svg{ position:absolute; left:-2%; bottom:-.32em; width:104%; height:.42em; overflow:visible; }
.u svg path{ fill:none; stroke:var(--fresh); stroke-width:6; stroke-linecap:round; stroke-dasharray:340; stroke-dashoffset:340; }
.u.in svg path{ animation:draw 1s var(--ease) .3s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* лапи като фонова текстура */
.paws{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.paws svg{ position:absolute; width:44px; height:44px; color:var(--ink); opacity:.05; }
.sec--deep .paws svg, .motto .paws svg, .call .paws svg{ color:#fff; opacity:.07; }

/* ---------- бутони ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.7rem; border-radius:999px;
  font-family:var(--disp); font-weight:700; font-size:.95rem; letter-spacing:-.01em;
  background:var(--green); color:#fff;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .25s;
  box-shadow:0 10px 24px -12px rgba(22,98,160,.5);
}
.btn svg{ width:1.1em; height:1.1em; }
.btn__gbadge{ width:1.9em !important; height:1.9em !important; background:#fff; border-radius:50%; padding:.32em; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(22,98,160,.6); background:var(--green-mid); }
.btn--ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--hair); }
.btn--ghost:hover{ background:var(--fresh); color:#fff; box-shadow:none; }
.btn--fresh{ background:var(--fresh); color:#fff; box-shadow:0 10px 24px -12px rgba(210,59,52,.6); }
.btn--fresh:hover{ background:#BC302A; }
.btn--blue{ background:var(--green); color:#fff; box-shadow:0 10px 24px -12px rgba(22,98,160,.5); }
.btn--blue:hover{ background:var(--fresh); box-shadow:0 10px 24px -12px rgba(210,59,52,.5); }
.btn--fresh.btn--hover-blue:hover{ background:var(--green); box-shadow:0 10px 24px -12px rgba(22,98,160,.5); }
.btn--paper{ background:var(--paper); color:var(--green-deep); box-shadow:var(--sh); }
.btn--sig{ background:transparent; color:var(--sig); box-shadow:inset 0 0 0 1.5px rgba(210,59,52,.4); }
.btn--sig:hover{ background:var(--sig); color:#fff; box-shadow:none; }
.sec--deep .btn--ghost,.call .btn--ghost,.cookie .btn--ghost{ color:#fff; box-shadow:inset 0 0 0 1.5px var(--hair-d); }
.sec--deep .btn--ghost:hover,.call .btn--ghost:hover,.cookie .btn--ghost:hover{ background:#fff; color:var(--green-deep); }

.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--disp); font-weight:700; font-size:.9rem;
  padding-bottom:.15rem; box-shadow:inset 0 -2px 0 0 var(--fresh);
  transition:gap .25s var(--ease), box-shadow .25s;
}
.tlink svg{ width:1em; height:1em; }
.tlink:hover{ gap:.85rem; box-shadow:inset 0 -3px 0 0 var(--green); }

/* ---------- органична рамка за снимка ---------- */
.frame{ position:relative; border-radius:36% 36% 26px 26px / 24% 24% 26px 26px; overflow:hidden; }
.frame--soft{ border-radius:var(--r-lg) var(--r-lg) 60px var(--r-lg); }
.blob{ position:absolute; border-radius:46% 54% 55% 45% / 52% 46% 54% 48%; background:var(--green-pale); z-index:0; }

/* ==========================================================================
   Навигация
   ========================================================================== */

/* overflow-anchor:none — .nav сменя височина при .small (padding/лого) точно на
   границата y>8; без това браузърът "закотвя" скрола към нея и мърда сам скрола
   на 1-2px нагоре/надолу, което пак превключва .small — трепти безкрайно */
.nav{ position:sticky; top:0; z-index:60; background:rgba(251,249,245,.9); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s; overflow-anchor:none; }
.nav.small{ border-bottom-color:var(--hair); background:rgba(251,249,245,.98); box-shadow:0 1px 20px rgba(20,30,42,.05); }
.nav__in{ display:flex; align-items:center; gap:clamp(1.4rem,.6rem + 2.6vw,3.2rem); padding-block:clamp(.75rem,.5rem + .5vw,1rem); transition:padding .3s var(--ease); }
.nav.small .nav__in{ padding-block:.6rem; }

.nav__brand{ flex:none; display:flex; align-items:center; }
.nav__brand img{ height:clamp(36px,3.2vw,47px); width:auto; transition:height .3s var(--ease); }
.nav.small .nav__brand img{ height:clamp(33px,2.9vw,42px); }
/* на мобилно хедърът не се свива при скрол — на тесен екран „свиването" реже
   съдържанието и скрива прогрес лентата отгоре. Идва СЛЕД горните две правила,
   за да ги наддели в каскадата (еднаква специфичност). */
@media (max-width:760px){
  .nav.small .nav__in{ padding-block:clamp(.75rem,.5rem + .5vw,1rem); }
  .nav.small .nav__brand img{ height:clamp(36px,3.2vw,47px); }
}

.nav__paws{ display:none; }
.nav__links{ flex:1; display:flex; align-items:center; justify-content:center; gap:.15rem; }
.nav__links > a:not(.btn){
  display:inline-flex; align-items:center;
  font-family:var(--disp); font-weight:600; font-size:.9rem; letter-spacing:-.01em; white-space:nowrap;
  padding:.5rem clamp(.5rem,.1rem + .7vw,.95rem); color:var(--ink-2);
  transition:color .2s;
}
.nav__links > a:not(.btn):hover{ color:var(--fresh); }
.nav__links > a[aria-current="page"]{ color:var(--fresh); }
/* лапичка вместо пил/подчертаване — появява се пред активния/hover-нат линк */
.nav__pin{ width:.85em; height:.85em; margin-right:.4em; flex:none; color:var(--fresh);
  opacity:0; transform:scale(.4) rotate(-20deg);
  transition:opacity .25s var(--ease), transform .25s var(--ease); }
.nav__links > a:not(.btn):hover .nav__pin,
.nav__links > a[aria-current="page"] .nav__pin{ opacity:1; transform:none; }
.nav__sos{ display:none; }

.nav__call{ flex:none; padding:.62rem 1.25rem; font-size:.86rem; box-shadow:none; }
.nav__call svg{ width:1em; height:1em; }
/* тези са само за мобилното меню — на десктоп остават скрити по подразбиране,
   иначе се показват като нестилизирани елементи (голям гущер, дублирано лого) */
.nav__logo--menu, .nav__gecko{ display:none; }

.burger{ display:none; flex:none; width:44px; height:44px; margin-left:auto; border-radius:50%;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  transition:background .25s; }
.burger:hover{ background:var(--green-pale); }
.burger span{ display:block; width:22px; height:2.4px; border-radius:2px; background:var(--green-deep); transition:transform .35s var(--ease), opacity .2s, background .25s; }
.is-menu .burger span{ background:#fff; }
.is-menu .burger:hover{ background:rgba(255,255,255,.14); }
.is-menu .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.is-menu .burger span:nth-child(2){ opacity:0; }
.is-menu .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1060px){
  .nav__call{ display:none; }
  .burger{ display:flex; }
  .nav__brand, .burger{ position:relative; z-index:70; }
  /* логото е с тъмни цветове за светъл фон — на синия панел показваме вариант с
     бял текст/сърце/лапа, но кучето и котето си остават в истинските цветове */
  .nav__logo--menu{ display:none; }
  .is-menu .nav__logo--color{ display:none; }
  .is-menu .nav__logo--menu{ display:block; }
  .nav__links{
    position:fixed; inset:0; z-index:65; margin:0; overflow:hidden;
    background:linear-gradient(165deg,var(--green-deep) 0%,#0B2A47 100%);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:.1rem;
    padding:5.5rem var(--pad) 3rem;
    opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
  }
  .nav__paws{ display:block; z-index:0; }
  .nav__paws svg{ color:#fff; opacity:.07; }
  .is-menu .nav__links{ opacity:1; visibility:visible; }
  /* докато менюто е отворено, body е "заключен" на текущия скрол (position:fixed,
     виж main.js) — това би развалило sticky на .nav, затова тук го караме fixed
     изрично, за да остане логото и хикса вижими горе, независимо откъде е скролнато */
  .is-menu .nav{ position:fixed; top:0; left:0; right:0;
    background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border-color:transparent; }
  .is-menu{ overflow:hidden; }
  .nav__links > a:not(.btn){
    position:relative; z-index:1; display:flex; align-items:center;
    font-size:clamp(1.35rem,1rem + 1.6vw,1.8rem); font-weight:700; letter-spacing:-.03em;
    width:100%; padding:.42rem 0; border-radius:0; color:#fff; border-bottom:1px solid rgba(255,255,255,.14);
    opacity:0; transform:translateY(12px); transition:opacity .4s var(--ease), transform .4s var(--ease), color .2s;
  }
  .nav__links > a:not(.btn) .nav__pin{ width:.62em; height:.62em; margin-right:.5rem; }
  .nav__links > a:not(.btn):hover,.nav__links > a[aria-current="page"]{ background:none; color:var(--fresh); }
  .is-menu .nav__links > a:not(.btn){ opacity:1; transform:none; }
  .is-menu .nav__links > a:nth-child(2){transition-delay:.05s}.is-menu .nav__links > a:nth-child(3){transition-delay:.1s}
  .is-menu .nav__links > a:nth-child(4){transition-delay:.15s}.is-menu .nav__links > a:nth-child(5){transition-delay:.2s}
  .is-menu .nav__links > a:nth-child(6){transition-delay:.25s}
  .nav__sos{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.9rem 1.5rem; margin-top:1.5rem;
    opacity:0; transform:translateY(12px); transition:opacity .4s var(--ease) .3s, transform .4s var(--ease) .3s; }
  .is-menu .nav__sos{ opacity:1; transform:none; }
  .nav__sos__item{ display:flex; flex-direction:column; gap:.45rem; }
  .nav__sos__btn{ font-size:.92rem; padding:.72rem 1.25rem; }
  .nav__sos__btn svg{ color:#fff; }
  .nav__sos__who{ font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.55); padding-left:.3rem; }
  /* гущерът стъпва долу вдясно на менюто, зад текста */
  .nav__gecko{ display:block; position:absolute; right:clamp(-6px,2vw,10px); bottom:0; z-index:0; pointer-events:none;
    width:clamp(112px,30vw,180px); height:auto;
    opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease) .3s, transform .5s var(--ease) .3s; }
  .is-menu .nav__gecko{ opacity:1; transform:none; }
}

.nav__spacer{ display:none; }
/* мобилните браузъри свиват/разгъват адресната лента при скрол и това понякога
   "разминава" sticky позицията на хедъра (виси отрязан отгоре). На тесни екрани
   го караме position:fixed вместо sticky — по-предвидимо — и компенсираме
   мястото му с празен spacer, за да не скочи съдържанието нагоре. */
@media (max-width:760px){
  .nav{ position:fixed; top:0; left:0; right:0; }
  .nav__spacer{ display:block; height:68px; }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{ position:relative; z-index:3; padding:0; }
.hero .shell{ position:relative; min-height:calc(90dvh - 4.75rem); display:flex; flex-direction:column;
  align-items:center; text-align:center; justify-content:center; gap:0;
  padding-block:clamp(3rem,10vh,6rem) clamp(2rem,6vh,4rem); }

.hero__copy{ position:relative; z-index:2; max-width:43rem; }
.hero__eyebrow{ margin-bottom:1.6rem; }
.hero__title{ font-size:clamp(2.2rem,1rem + 4.1vw,3.7rem); line-height:1.08; letter-spacing:-.038em; font-weight:800; text-wrap:balance; }
.hero__lead{ margin:2.3rem auto 0; max-width:48ch; font-size:.98rem; line-height:1.7; color:var(--ink-2); }
.hero__cta{ margin-top:2.7rem; display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* сцена с животните — куче вляво, коте вдясно, текстът между тях */
.hero__scene{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero__pet{ position:absolute; bottom:0; height:auto;
  filter:drop-shadow(0 12px 10px rgba(16,45,72,.16)) drop-shadow(0 3px 4px rgba(16,45,72,.20)); }
.hero__pet--dog{ left:clamp(-6%,-1vw,3%); right:auto; width:clamp(224px,min(25vw,38vh),348px); bottom:clamp(-46px,-3.4vw,-24px); z-index:2; }

/* питон, който се спуска от горния десен ъгъл на херото и виси с главата надолу.
   Директно дете на .hero (не на .hero__scene), за да виси от горния ръб и когато
   на тесни екрани сцената се пренарежда под текста. */
.hero__snake{ position:absolute; top:clamp(-14px,-1vw,2px); right:clamp(-40px,-2.6vw,-6px);
  width:clamp(160px,16.5vw,262px); height:auto; z-index:2; transform:rotate(8deg);
  transform-origin:top right;
  filter:drop-shadow(-8px 16px 16px rgba(16,45,72,.28)); }
/* тесни екрани: пак виси от горния десен ъгъл на .hero (не в сцената, която слиза),
   само по-дребна, за да не покрива заглавието */
@media (max-width:1000px){
  .hero__snake{ width:clamp(90px,15vw,150px); right:clamp(-16px,-2.4vw,-6px);
    top:clamp(-26px,-3vw,-8px); transform:rotate(15deg); }
}

@keyframes heroRise{ from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:none; } }
@keyframes petRise{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }
.hero__eyebrow{ animation:heroRise .6s var(--ease) both; }
.hero__title{ animation:heroRise .7s var(--ease) .07s both; }
.hero__lead{ animation:heroRise .7s var(--ease) .15s both; }
.hero__cta{ animation:heroRise .7s var(--ease) .23s both; }
.hero__pet--dog{ animation:petRise .9s var(--ease) .42s both; }
.hero__title .u svg path{ animation:draw 1s var(--ease) .95s forwards; }
/* заглавията на вътрешните страници също са над сгъвката — изчертават се
   веднага при зареждане, не чакат скрол (както hero__title по-горе) */
.phead h1 .u svg path{ animation:draw 1s var(--ease) .6s forwards; }

@media (max-width:1000px){
  /* grid вместо колона — кучето и бутоните са рамо до рамо (лявата тясна
     колона = точната ширина на кучето, дясната поема бутоните), не един
     под друг. row-gap между текста и този ред пази чисто разстояние —
     преди кучето се качваше чак върху последния ред на lead текста. */
  .hero .shell{ display:grid; grid-template-columns:clamp(130px,32vw,200px) 1fr;
    grid-template-areas:"copy copy" "scene cta"; row-gap:clamp(1.6rem,5vw,2.4rem); column-gap:.9rem;
    min-height:0; padding:1.5rem 0 0; }
  .hero__copy{ grid-area:copy; max-width:none; }
  .hero__title{ margin-top:6px; }
  .hero__lead{ margin-top:1.9rem; }
  .hero__scene{ grid-area:scene; position:relative; height:clamp(200px,48vw,270px); width:100%; align-self:start; }
  .hero__pet--dog{ left:0; width:100%; bottom:clamp(-48px,-9vw,-22px); }
  /* ред, не колона — на средни ширини (напр. ~700-1000px) има място бутоните
     да застанат един до друг; flex-wrap ги реди един под друг само когато
     наистина не се събират (по-тесни телефони). Картата с работното време
     вече е пълноширочна ПОД целия този ред (не отстрани), затова по-широк
     ред тук вече не удря в нищо. */
  .hero__cta{ grid-area:cta; flex-direction:row; flex-wrap:wrap; align-items:flex-start; align-self:start; margin-top:0; }
  .hero__cta .btn{ padding:.7rem 1rem; font-size:.8rem; white-space:normal; text-align:left; }
  /* принудителен пренос на РАВНО 2 реда — не разчитаме на ch-ширина (различните
     телефони/шрифтове я смятат различно и трошеше грозно на 3 реда) */
  .hero__eyebrow{ display:flex; margin-inline:0 auto; text-align:left; }
  .hero__eyebrow::before{ display:none; }
  .hero__eyebrow__lines{ display:flex; flex-direction:column; gap:.15rem; }
}
@media (prefers-reduced-motion:reduce){
  .hero__eyebrow,.hero__title,.hero__lead,.hero__cta,
  .hero__pet--dog{ animation:none; }
}

/* ==========================================================================
   Мото лента
   ========================================================================== */

.motto{ background:var(--green-deep); color:#fff; border-block:1px solid var(--green-mid); position:relative; z-index:2; scroll-margin-top:5rem; }
.motto__in{ padding-block:clamp(3.25rem,2rem + 3vw,5rem); position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(2rem,4vw,4rem); flex-wrap:wrap; }
.motto p{ font-family:var(--disp); font-weight:700; font-size:clamp(1.5rem,1rem + 2.4vw,2.8rem); line-height:1.2; letter-spacing:-.03em; max-width:22ch; margin:0; }
.motto p .fresh{ color:var(--fresh); }

/* статус на херото — малка "лампичка" (Отворено/Затворено) + кратко
   съобщение + бутон, вместо старото фиксирано мото изречение */
.motto__status{ display:flex; flex-direction:column; align-items:flex-start; }
.motto__badge{ display:inline-flex; align-items:baseline; gap:.75rem; font-family:var(--disp); font-weight:800; font-size:clamp(2rem,1.5rem + 2vw,2.9rem); letter-spacing:-.02em; }
.motto__badge::before{ content:""; width:1rem; height:1rem; border-radius:50%; flex:none; align-self:center; background:currentColor; box-shadow:0 0 0 6px rgba(255,255,255,.12); }
.motto__badge--open{ color:#2E9E5B; }
.motto__badge--closed{ color:var(--sig); }
.motto__badge small{ font-family:var(--mono); font-weight:500; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-left:.15em; }
.motto__status p{ font-size:clamp(1.7rem,1.1rem + 2.2vw,2.6rem); font-weight:700; line-height:1.15; letter-spacing:-.03em; margin:.85rem 0 1.6rem; max-width:16ch; }

/* лента "Отворено/Затворено" — до заглавието на работното време във футъра и контактите */
.hrs-badge{ display:inline-flex; align-items:center; gap:.3rem; flex:none; line-height:1;
  font-family:var(--mono); font-weight:600; font-size:.56rem; letter-spacing:.01em; text-transform:uppercase;
  padding:.21rem .5rem; border-radius:999px; white-space:nowrap; }
.hrs-badge::before{ content:""; width:.4em; height:.4em; border-radius:50%; background:currentColor; flex:none; }
.hrs-badge--open{ color:#2E9E5B; background:rgba(46,158,91,.13); }
.hrs-badge--closed{ color:var(--sig); background:rgba(210,59,52,.13); }

/* Работно време — карта вдясно от мотото, с котето кацнало отгоре (наследник
   на старите котка+топка); всеки ден е отделен ред, за да може клиниката да
   смени само ЕДИН ден (празник и т.н.) през админа, без да пипа останалите —
   виж load_hours() в index.php. position:relative тук е "котвата" за котето. */
/* .motto__hours (външен) НЕ реже overflow — той е "котвата" за котето, което
   трябва да наднича НАД картата; заоблянето/сянката са на __card (вътрешен). */
.motto__hours{ position:relative; flex:none; width:min(100%,300px); }
.motto__hours__card{ background:var(--paper); border-radius:var(--r-lg);
  box-shadow:0 2px 6px rgba(20,30,42,.08), 0 34px 54px -20px rgba(157,32,24,.5); overflow:hidden; color:var(--ink); }
/* глосов червен хедър — ехо на старата лъскава топка (radial gradient +
   вътрешен highlight отгоре), за баланс с червеното другаде на страницата */
.motto__hours__head{ position:relative; display:block; padding:.75rem 1.1rem; font-family:var(--disp); font-weight:800;
  font-size:.88rem; letter-spacing:.01em; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.18);
  background:radial-gradient(130% 220% at 24% -60%, #EA5A50 0%, #D23B34 55%, #9C241E 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -10px 14px -9px rgba(0,0,0,.25); }
.motto__hours__row{ display:flex; justify-content:space-between; gap:.8rem; padding:.5rem 1.1rem;
  border-top:1px solid var(--hair); font-size:.85rem; font-weight:500; }
.motto__hours__row.is-today{ background:#FDECEA; color:#9C241E; font-weight:700; }
.motto__hours__row.is-closed span:last-child{ color:var(--sig); }
/* съкратено име на деня — само за тясната мобилна карта (виж media query по-долу) */
.motto__hours__day .d-short{ display:none; }

/* котето, кацнало на горния ръб на картата — задните лапички опират в ръба,
   предните потъват върху картата (реално сядане), едро, за да излиза над
   шева на лентата, нагоре към CTA-то в херото (ефектът от старата котка+топка) */
.motto__hours__cat{ position:absolute; left:50%; bottom:100%; transform:translateX(-50%); margin-bottom:-38px;
  width:clamp(170px,19vw,260px); z-index:2; pointer-events:none;
  filter:drop-shadow(0 10px 8px rgba(16,45,72,.3)); }

@media (max-width:1000px){
  /* под 1000px текстът и картата се редят една под друга (flex-wrap) — вместо
     котето само да лети нагоре (картата остава долу, разкачена), вдигаме
     ЦЯЛАТА карта+коте като едно цяло горе в херото, до кучето — точно както
     на десктоп, само по-тясно. .motto__hours minava от flex елемент на
     absolute спрямо .motto__in (текстът остава сам на реда, не му пука за
     картата вече). .hero{z-index:3} е НАД .motto{z-index:2} (отделни stacking
     context-и), затова вдясно (не под/върху кучето, което е left:1% в херото)
     — иначе кучето би рисувало върху картата/котето. */
  /* по скицата на клиента: куче+бутони вляво горе, коте вдясно — И ПОД ЦЯЛОТО
     това (не отстрани) пълноширочна лента "Работно време", на която котето
     каца отдясно. Тясна карта отстрани (предишният опит) нямаше място за
     пълните имена на дните — цяла ширина решава това directно. order:-1
     вдига .motto__hours ПРЕДИ цитата ("Професионализъм...") — идва веднага
     след бутоните, не след текста. Котето остава absolute спрямо картата
     и се качва нагоре, за да е на нивото на кучето (голям margin-bottom,
     през шева, също като преди при десктоп разположението). */
  .motto__in{ display:flex; flex-direction:column; }
  .motto p{ max-width:none; }
  .motto__hours{ order:-1; position:relative; width:100%; margin-top:clamp(16px,6vw,40px); }
  .motto__hours__head{ padding:.55rem .9rem; font-size:.78rem; }
  .motto__hours__row{ padding:.4rem .9rem; font-size:.78rem; }
  .motto__hours__cat{ left:auto; right:clamp(10px,4vw,28px); transform:none;
    width:clamp(118px,24vw,165px); margin-bottom:-26px; }
}

/* ==========================================================================
   Услуги — bento
   ========================================================================== */

/* Фиксирани колони (НЕ auto-fill) — голямата плочка (featured+снимка) е
   span 2, точно колкото 2 малки едно до друго, затова винаги се събират
   на цял ред (2 големи, или 1 голяма + 2 малки, или 4 малки), каквото и да
   е редуването им от админа. НАРОЧНО без grid-auto-flow:dense — dense би
   запълвало евентуална дупка в средата, като "издърпва" по-малка плочка
   отнякъде по-нататък в списъка, което разбърква визуалния ред спрямо
   админа. Вместо dense: layout_service_tiles() в config.php пресмята реда
   в PHP и разтяга ПОСЛЕДНАТА плочка на непълен ред (inline style, span>2
   понякога) — точен ред, никога дупка. Този inline span важи само за 4
   колони (desktop); на по-тесен екран го връщаме към обичайните 2/1 с
   !important, иначе би преляло извън решетката при по-малко колони.  */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,.4rem + 1.2vw,1.3rem); position:relative; container-type:inline-size; }
@media (max-width:920px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .tile{ grid-column:span 1 !important; }
  .tile--photo{ grid-column:span 2 !important; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
  .tile{ grid-column:span 1 !important; }
}

/* коте, излежаващо се на горния ръб на плочка „Ваксинация" — всичко спрямо
   ширината на решетката (cqw). Застъпването е ПОСТОЯННА ЧАСТ (~38%) от височината
   на котето, за да няма луфт независимо колко е голямо: top ≈ -0.428·width.
   h = width·428/620 ≈ 0.69·w ; max() задържа офсета след като размерът се спре. */
.bento__cat{ position:absolute; right:clamp(-2.5%,-.4cqw,1.5%);
  width:min(19.5cqw,240px); top:max(-103px,calc(-8.34cqw));
  height:auto; z-index:3; pointer-events:none;
  filter:drop-shadow(0 14px 14px rgba(20,30,42,.16)); }
/* мобилно/таблет (една рамка): размер и позиция спрямо ШИРИНАТА НА КОНТЕЙНЕРА (cqw),
   не спрямо екрана — котето стои залепено за ръба на плочката при всеки модел.
   h = width·428/620 ≈ 0.69·w ; долният ръб на котето стои постоянно 30px под ръба на плочката,
   max() задържа офсета и след като размерът се спре (min-cap). */
@media (max-width:920px){
  .bento{ margin-top:clamp(66px,17vw,96px); }
  /* застъпване ~38% от височината → top ≈ -0.428·width = -16.26cqw (при width=38cqw) */
  .bento__cat{ right:clamp(4px,2.4cqw,15px); width:min(38cqw,184px);
    top:max(-79px,calc(-16.26cqw)); }
}

/* Малката карта (без снимка) и голямата снимкова плочка седят в СЪЩАТА
   решетка — тъмна основа и за двете, за да се четат като едно семейство
   карти, не като два различни дизайна един до друг (светла карта до
   тъмна снимкова плочка изглеждаше несвързано). */
.tile{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(160deg,#154A86 0%,#0E345F 48%,var(--green-deep) 100%);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-lg);
  padding:clamp(1.5rem,1rem + 1.5vw,2.1rem);
  display:flex; flex-direction:column; gap:.55rem;
  color:#fff;
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.tile:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.28); box-shadow:0 22px 44px -18px rgba(8,20,36,.55); }
.tile__ico{ width:54px; height:54px; border-radius:14px; background:linear-gradient(145deg,rgba(255,255,255,.2),rgba(255,255,255,.06)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); color:#fff; display:grid; place-items:center; transition:transform .35s var(--ease); }
.tile__ico svg{ width:26px; height:26px; }
.tile:hover .tile__ico{ transform:rotate(-8deg); }
.tile h3{ font-family:var(--disp); font-weight:700; font-size:var(--t-h3); color:#fff; }
/* -webkit-line-clamp реже текста на 4 реда с "…" — пази еднаква височина на
   реда в решетката, дори ако някой впише много дълго описание в админа. */
.tile p{ font-size:.93rem; color:#9DB2C6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; }
.tile .tlink{ align-self:flex-start; margin-top:auto; padding-top:.3rem; font-size:.8rem; color:#fff; }
.tile__paw{ position:absolute; right:-14px; bottom:-14px; width:100px; height:100px; color:#fff; opacity:.05; transform:rotate(-12deg); }
.tile__link{ position:absolute; inset:0; z-index:2; }

.tile--photo{ grid-column:span 2; min-height:clamp(220px,22vw,280px); justify-content:flex-end; border-color:rgba(255,255,255,.14); }
.tile--photo::before{ content:""; position:absolute; inset:0; z-index:-2; background-image:var(--bg); background-size:cover; background-position:var(--bgpos,center); }
.tile--photo::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(13,40,66,.94), rgba(13,40,66,.4) 55%, rgba(13,40,66,.14)); }
.tile--photo p{ color:rgba(255,255,255,.85); }
.tile--photo:hover{ border-color:rgba(255,255,255,.3); }

/* ==========================================================================
   Голям блок текст + снимка
   ========================================================================== */

.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; container-type:inline-size; }
/* гущер, лази в дясното празно поле до чеклиста (вдясно от текста, към ръба) */
.feature__gecko{ position:absolute; right:clamp(-46px,-1.7vw,-8px); bottom:clamp(-4px,2vw,44px);
  width:clamp(90px,8.5vw,126px); height:auto; z-index:3; pointer-events:none;
  transform:rotate(42deg); filter:drop-shadow(0 10px 11px rgba(20,30,42,.20)); }
@media (max-width:1180px){ .feature__gecko{ right:clamp(-64px,-5vw,-34px); width:clamp(84px,8vw,104px); } }
/* мобилно (една колона): гущерът лази вдясно от бутона „За клиниката", в страницата */
@media (max-width:920px){ .feature__gecko{ right:clamp(18px,6cqw,44px); bottom:clamp(-16px,-2.4cqw,-2px);
  width:clamp(40px,10.5cqw,54px); } }
.feature__fig .frame{ max-height:520px; }
@media (max-width:900px){ .feature{ grid-template-columns:1fr; } }
.feature__fig{ position:relative; }
.feature__fig .frame{ box-shadow:var(--sh-lg); aspect-ratio:5/4; }
.feature__fig .frame img{ width:100%; height:100%; object-fit:cover; }
.feature__fig .blob{ width:70%; aspect-ratio:1; left:-8%; bottom:-10%; }
@media (max-width:480px){ .feature__fig .blob{ left:-2%; } }
.feature h2{ font-size:var(--t-h2); }
.checks{ display:grid; gap:.85rem; margin-top:1.6rem; }
.checks li{ display:flex; gap:.75rem; align-items:flex-start; }
.checks svg{ width:22px; height:22px; flex:none; color:var(--fresh); margin-top:.15rem; }

/* ==========================================================================
   Кредо — личен цитат на д-р Пенев (тъмна лента)
   ========================================================================== */

.creed{ margin:0; position:relative; z-index:1; }
/* коргито се подава извън десния ръб на лентата нарочно (да не се вижда одрязаното) —
   секцията го подрязва тук, за да не вади хоризонтален скрол на страницата */
.sec--deep:has(> .creed__dog){ overflow:hidden; }
.creed__q{ margin:0; max-width:min(31em,72%); font-family:var(--disp); font-weight:700;
  font-size:clamp(1.4rem,1rem + 1.9vw,2.25rem); line-height:1.34; letter-spacing:-.022em;
  color:#fff; text-wrap:pretty; }
.creed__by{ margin-top:clamp(1.3rem,.9rem + 1vw,2rem); font-family:var(--mono);
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--fresh); }
/* коргито, изтегнато по гръб на долния ръб на лентата, вдясно от цитата */
.creed__dog{ position:absolute; left:auto; right:clamp(2%,4vw,8%); bottom:-2px;
  width:clamp(240px,27vw,400px); height:auto; z-index:2; pointer-events:none;
  filter:drop-shadow(-6px 10px 16px rgba(0,0,0,.24)); }
@media (max-width:1080px){ .creed__dog{ right:clamp(-16px,-2vw,12px); width:clamp(210px,28vw,320px); } }
@media (max-width:620px){
  .creed__q{ max-width:none; }
  /* място под цитата, за да легне коргито под текста */
  .sec--deep:has(> .creed__dog){ padding-bottom:clamp(4rem,2rem + 10vw,6rem); }
  .creed__dog{ right:clamp(-10px,-2vw,8px); bottom:0; width:clamp(168px,46vw,240px); }
}

/* ==========================================================================
   Екип
   ========================================================================== */

.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.1rem,.6rem + 1.6vw,1.8rem); }
/* пухкава котка, наднича над долния ръб на секцията, гледа нагоре към екипа;
   задницата ѝ (по-груба изрезка) минава под линията и се крие от секцията отдолу */
.team__cat{ position:absolute; right:clamp(4%,14vw,22%); bottom:clamp(-96px,-7vw,-56px);
  width:clamp(190px,20vw,300px); height:auto; pointer-events:none;
  filter:drop-shadow(0 -4px 16px rgba(20,30,42,.15)); }
/* мобилно: котката наднича над долния ръб на секцията; частта под линията
   е ~същата част от котката при всяка ширина (bottom и width спират заедно) */
@media (max-width:820px){ .team__cat{ right:clamp(2px,3vw,20px); width:clamp(140px,26vw,190px);
  bottom:max(-42px,calc(-6.4vw)); } }
@media (max-width:1000px){ .team{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .team{ grid-template-columns:1fr; } }
.mem{ display:flex; flex-direction:column; }
.mem__fig{ position:relative; overflow:hidden; aspect-ratio:1/1.16; border-radius:40% 40% 16px 16px / 26% 26% 16px 16px; border:1px solid var(--hair); background:var(--green-pale); box-shadow:var(--sh); transition:transform .3s var(--ease); }
.mem:hover .mem__fig{ transform:translateY(-5px); }
.mem__fig img{ width:100%; height:100%; object-fit:cover; }
.mem__name{ margin-top:1rem; font-family:var(--disp); font-weight:700; font-size:1.04rem; }
.mem__role{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; color:var(--green); margin-top:.3rem; }

.people{ display:grid; gap:clamp(4rem,2.5rem + 7vw,8.5rem); }
.person{ display:grid; grid-template-columns:minmax(0,34%) minmax(0,1fr); gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:center; min-width:0; }
.person:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(0,34%); }
.person:nth-child(even) .person__figbox{ order:2; justify-self:end; }
@media (max-width:820px){ .person,.person:nth-child(even){ grid-template-columns:1fr; } .person:nth-child(even) .person__figbox{ order:0; } }
.person__figbox{ position:relative; max-width:360px; isolation:isolate; }
.person__fig{ overflow:hidden; border-radius:40% 40% 16px 16px / 24% 24% 16px 16px; border:1px solid var(--hair); box-shadow:var(--sh); aspect-ratio:1/1.16; background:var(--green-pale); }
.person__fig img{ width:100%; height:100%; object-fit:cover; }
.person__cat{ position:absolute; z-index:3; height:auto; pointer-events:none; filter:drop-shadow(0 12px 16px rgba(20,30,42,.22)); }
.person__cat--hair{ right:-11%; bottom:-58%; width:41%; transform:scaleX(-1); }
.person__cat--peek{ left:24%; width:48%; top:calc(-32% + 6px);
  filter:drop-shadow(0 10px 14px rgba(20,30,42,.18)); }
/* коте, преметнато над горния ръб на рамката (Стефан) — застъпването е % от
   рамката (не px!), иначе на мобилно, където .person__figbox няма 360px таван
   (виж по-долу), рамката/котето растат заедно, но фиксираните px изостават и
   срязаният ръб на снимката на котето започва да се показва под лапичките */
.person__cat--peek-l{ left:26%; width:48%; top:auto; bottom:88.3%;
  filter:drop-shadow(0 10px 14px rgba(20,30,42,.18)); }
/* птичка, кацнала на горния ръб на снимката (Айше) */
.person__cat--bird{ left:44%; width:23%; top:auto; bottom:calc(100% - 28px);
  filter:drop-shadow(0 8px 10px rgba(20,30,42,.22)); }
/* мобилно (една колона): рамката е същите 360px както на десктоп, затова
   котетата/птичката ползват СЪЩИТЕ стойности като десктоп (по-горе) — само
   даваме достатъчно място отгоре за издадената над рамката част.
   Изключение: висящото коте при Екатерина не може да пада 240px под снимката
   (там е името ѝ), затова се качва в долния десен ъгъл. */
@media (max-width:820px){
  .person,.person:nth-child(even){ grid-template-columns:1fr; }
  .person:nth-child(even) .person__figbox{ order:0; }
  /* цялата секция „екип" в центрирана колона (пълна ширина до 480px), за да не „виси" вляво */
  .person{ max-width:480px; margin-inline:auto; }
  #ekip .sec-head{ max-width:480px; margin-inline:auto; }
  .person__figbox{ max-width:none; }
  .people{ gap:0; }
  .people .person{ margin-top:clamp(132px,42vw,196px); }
  .people .person:first-child{ margin-top:clamp(100px,32vw,156px); }
  .person__cat--hair{ right:-6%; bottom:-6%; width:38%; }
}
.person__name{ font-family:var(--disp); font-weight:800; font-size:var(--t-h3); }
.person__role{ display:inline-block; margin:.5rem 0 1.2rem; font-family:var(--mono); font-size:.64rem; text-transform:uppercase; color:var(--green); }
.person > div:not(.person__figbox){ min-width:0; }
.person__bio{ display:grid; gap:1rem; color:var(--ink-2); max-width:58ch; overflow-wrap:break-word; overflow:hidden; }
.person__bio p{ min-width:0; overflow-wrap:break-word; }
.person__quote{ margin-top:1.4rem; padding-left:1.2rem; box-shadow:inset 3px 0 0 0 var(--fresh); font-family:var(--disp); font-weight:600; font-size:1.12rem; color:var(--ink); overflow-wrap:break-word; }
/* дипломи/удостоверения — на цял ред ПОД снимката И текста (цяла широчина
   photo+текст). flex вместо grid, за да МОЖЕ да центрира непълен ред —
   всяка карта пази размера си "все едно са 4" (1/4 от широчината, не се
   разтяга при по-малко), но при <4 седят центрирани, не залепени вляво
   (същия подход като .gear при апаратурата). ВИСОЧИНАТА е фиксирана на
   ~половината от снимката на човека (.person__figbox е до 360px,
   .person__fig е aspect-ratio 1/1.16 -> ~417px висока -> половина ~208px). */
.person__certs{ grid-column:1 / -1; display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:.6rem; }
.person__cert{ flex:0 0 calc(25% - .525rem); height:208px; border-radius:12px; overflow:hidden; border:1px solid var(--hair); box-shadow:var(--sh); cursor:zoom-in; }
@media (max-width:820px){ .person__cert{ flex-basis:calc(50% - .35rem); } }
@media (max-width:480px){ .person__cert{ flex-basis:100%; } }
.person__cert img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.person__cert:hover img{ transform:scale(1.08); }

/* ==========================================================================
   Отзиви
   ========================================================================== */

.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,.5rem + 1.5vw,1.5rem); }
@media (max-width:900px){ .quotes{ grid-template-columns:1fr; } }

/* --- Google-стил отзиви — карусел (много карти, не се редят една под друга) --- */
.gcar{ display:flex; align-items:center; gap:.6rem; }
.gcar__btn{ flex:none; width:40px; height:40px; border-radius:50%; border:none; background:var(--paper);
  box-shadow:inset 0 0 0 1.5px var(--hair); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, color .15s, box-shadow .15s, transform .15s; }
.gcar__btn svg{ width:1.1em; height:1.1em; }
.gcar__btn:hover:not(:disabled){ background:var(--fresh); color:#fff; box-shadow:none; }
.gcar__btn:active:not(:disabled){ transform:scale(.94); }
.gcar__btn:disabled{ opacity:.3; cursor:default; }
.gcar__track{ --gcar-gap:clamp(1rem,.5rem + 1.5vw,1.5rem); flex:1; min-width:0; display:flex; gap:var(--gcar-gap);
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 -2px; padding:2px; }
.gcar__track::-webkit-scrollbar{ display:none; }
.gcar__track .gquote{ flex:0 0 100%; min-width:0; scroll-snap-align:start; }
@media (min-width:680px){ .gcar__track .gquote{ flex-basis:calc((100% - var(--gcar-gap)) / 2); } }
@media (min-width:1020px){ .gcar__track .gquote{ flex-basis:calc((100% - var(--gcar-gap) * 2) / 3); } }
/* на малки екрани стрелките отстрани отнемат ценна ширина от картата —
   местим ги под картата (една до друга), картата взима цялата ширина,
   но пак личи ясно, че може да се скролва */
@media (max-width:480px){
  .gcar{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas:"track track" "prev next"; row-gap:.7rem; column-gap:.7rem; }
  .gcar__track{ grid-area:track; }
  .gcar__btn--p{ grid-area:prev; justify-self:end; }
  .gcar__btn--n{ grid-area:next; justify-self:start; }
}
.gquote{ background:var(--paper); border:1px solid var(--hair); border-radius:var(--r-lg); border-bottom-left-radius:6px;
  box-shadow:var(--sh); padding:clamp(1.4rem,1rem + 1vw,1.9rem); display:flex; flex-direction:column; gap:1.05rem; min-width:0; }
.gquote__head{ display:flex; align-items:center; gap:.8rem; }
.gquote__ava{ flex:none; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--disp); font-weight:700; font-size:.92rem; color:#fff;
  background:linear-gradient(155deg,var(--green) 0%,var(--green-deep) 100%); }
.gquote__who{ min-width:0; }
.gquote__name{ font-family:var(--disp); font-weight:700; font-size:.9rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gquote__stars{ display:flex; gap:2px; margin-top:.2rem; }
.gquote__stars svg{ width:12px; height:12px; color:var(--fresh); }
.gquote__g{ margin-left:auto; flex:none; width:20px; height:20px; }
.gquote p{
  color:var(--ink-2); font-size:.95rem; overflow-wrap:break-word; min-width:0; line-height:1.5;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
  min-height:calc(1.5em * 4); /* резервира точно 4 реда, за да са картите винаги еднакви на височина */
}
.gquote__more{ display:inline-flex; align-items:center; gap:.35rem; color:var(--green); font-weight:700; font-size:.87rem; white-space:nowrap; }
.gquote__more svg{ width:.9em; height:.9em; }
.gquote--open{ cursor:pointer; transition:box-shadow .2s, transform .2s; }
.gquote--open:hover{ box-shadow:var(--sh-lg); transform:translateY(-2px); }
.gquote--open:hover .gquote__more{ color:var(--fresh); }
.gquote--open:focus-visible{ outline:2.5px solid var(--fresh); outline-offset:2px; }
.gquote__src{ margin-top:auto; display:flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.62rem;
  text-transform:uppercase; color:var(--ink-3); letter-spacing:.02em; }
.gquote__src svg{ width:12px; height:12px; flex:none; }

/* Отзиви от сайта (одобрени) — плочки само със снимка/цвят + име, без видим
   текст в картата (той е в модала при клик). Плочките са фиксиран размер,
   central-ирани при непълен последен ред (броят отзиви е винаги различен). */
.stiles{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(1rem,.6rem + 1.2vw,1.5rem); }
.stile{
  position:relative; flex:0 1 280px; max-width:100%; aspect-ratio:1/1;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh); cursor:pointer;
  transition:box-shadow .2s, transform .2s;
}
/* на тесни екрани се събира само по 1 плочка на ред — оставя я да запълни
   ширината (вместо да остане малка по средата с празно от двете страни) */
@media (max-width:560px){ .stile{ flex-basis:100%; max-width:420px; } }
.stile:hover{ box-shadow:var(--sh-lg); transform:translateY(-3px); }
.stile:focus-visible{ outline:2.5px solid var(--fresh); outline-offset:2px; }
.stile__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.stile__img--empty{ display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,var(--green) 0%,var(--green-deep) 100%); font-family:var(--disp); font-weight:800; font-size:3rem; color:#fff; }
.stile__pawbg{ position:absolute; width:30%; height:auto; right:6%; top:48%; color:#fff; opacity:.16; transform:rotate(-18deg); }
/* градиент горе гарантира четимост на името, каквато и снимка да е отзад —
   цветът на градиента е фирменото тъмносиньо, не черно */
.stile__top{
  position:absolute; left:0; right:0; top:0; padding:1rem 1rem .9rem; display:flex; align-items:center; gap:.6rem;
  background:linear-gradient(to bottom, rgba(16,58,99,.82) 0%, rgba(16,58,99,.4) 65%, transparent 100%);
}
.stile__ava{ flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:700; font-size:.75rem; color:#fff; background:var(--fresh); }
.stile__name{ flex:1; min-width:0; color:#fff; font-family:var(--disp); font-weight:700; font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* цял плътен бар долу (не плаващо копче) — гарантирана четимост върху всяка снимка,
   при hover целият бар светва в червено (потвърждава, че цялата плочка е кликаема) */
.stile__bot{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem 1rem; display:flex; justify-content:flex-end; align-items:center;
  background:rgba(16,58,99,.88); transition:background .15s;
}
.stile:hover .stile__bot{ background:var(--fresh); }
.stile__read{ display:inline-flex; align-items:center; gap:.4rem; color:#fff; font-family:var(--disp); font-weight:700; font-size:.85rem; }
.stile__read svg{ width:.9em; height:.9em; }

/* Лепнат под менюто бар за отзиви — появява се след като херото се скролне,
   води директно до формата за споделяне долу на страницата */
.rvbar{
  position:fixed; top:0; left:0; right:0; z-index:59; display:flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.7rem 1rem; background:var(--fresh); color:#fff; font-family:var(--disp); font-weight:700; font-size:.88rem;
  text-align:center; text-decoration:none; transform:translateY(-120%); transition:transform .3s var(--ease), background .15s;
  box-shadow:0 4px 14px -6px rgba(0,0,0,.3);
}
.rvbar.on{ transform:translateY(0); }
.rvbar:hover{ background:#BC302A; }
.rvbar svg{ width:1.1em; height:1.1em; flex:none; }
@media (max-width:620px){ .rvbar{ font-size:.78rem; padding:.6rem .8rem; gap:.45rem; } }

.gquotes__more{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top:clamp(1.5rem,1rem + 2vw,2.5rem); }
.spodeli{ position:relative; overflow:hidden; }

/* Форма за нов отзив */
.rform__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.rform__thanks{ display:flex; align-items:center; gap:.6rem; background:var(--green-pale); color:var(--green-deep); padding:.9rem 1.2rem; border-radius:var(--r); margin-bottom:1.5rem; font-weight:600; }
.rform__thanks svg{ width:1.2em; height:1.2em; flex:none; color:var(--green); }
.rform__err{ background:#FDECEA; color:#9C241E; padding:.9rem 1.2rem; border-radius:var(--r); margin-bottom:1.5rem; font-weight:600; }

/* Модал за цялата история (снимки + пълен текст) */
.srm{ position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:1.5rem; background:rgba(16,25,36,.72); backdrop-filter:blur(6px); }
.srm.on{ display:flex; }
.srm__panel{
  position:relative; background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sh-lg);
  max-width:960px; width:100%; height:min(86vh,640px);
  display:grid; grid-template-columns:1.1fr 1fr; overflow:hidden;
}
.srm__panel:has(.srm__gallery[hidden]){ grid-template-columns:1fr; max-width:640px; height:auto; max-height:min(86vh,640px); }
.srm__panel:has(.srm__gallery[hidden]) .srm__content{ height:auto; }
.srm__x{ position:absolute; top:.9rem; right:.9rem; z-index:2; width:38px; height:38px; border:none; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--sh); }
.srm__x:hover{ background:#fff; color:var(--fresh); }
.srm__x svg{ width:1.1em; height:1.1em; }

/* Лява половина — галерия с голяма снимка, стрелки, миниатюри */
.srm__gallery{ display:flex; flex-direction:column; background:var(--bone); min-width:0; height:100%; }
.srm__gallery[hidden]{ display:none; }
.srm__stage{ position:relative; flex:1; min-height:0; background:#0B1622; }
.srm__zoom{ position:absolute; inset:0; display:block; border:none; padding:0; margin:0; background:none; cursor:zoom-in; }
.srm__zoom img{ width:100%; height:100%; object-fit:cover; display:block; }
.srm__zoom__badge{ position:absolute; right:.7rem; bottom:.7rem; width:34px; height:34px; border-radius:50%; background:rgba(16,25,36,.65); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
.srm__zoom__badge svg{ width:1em; height:1em; }
.srm__stage:hover .srm__zoom__badge{ opacity:1; }
.srm__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:1; width:42px; height:42px; border:none; border-radius:50%;
  background:rgba(16,25,36,.45); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); transition:background .15s, transform .15s;
}
.srm__nav svg{ width:1.15em; height:1.15em; }
.srm__nav:hover{ background:var(--fresh); transform:translateY(-50%) scale(1.08); }
.srm__nav--p{ left:.8rem; }
.srm__nav--n{ right:.8rem; }
.srm__nav[hidden]{ display:none; }
.srm__thumbs{ display:flex; gap:.5rem; padding:.7rem; overflow-x:auto; background:var(--bone); scrollbar-width:none; }
.srm__thumbs::-webkit-scrollbar{ display:none; }
.srm__thumbs[hidden]{ display:none; }
.srm__thumb{ flex:none; width:52px; height:52px; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; opacity:.6; transition:opacity .15s, border-color .15s; }
.srm__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.srm__thumb:hover{ opacity:.9; }
.srm__thumb.is-on{ opacity:1; border-color:var(--fresh); }

/* Дясна половина — автор и текст, скролва самостоятелно ако е дълъг */
.srm__content{ display:flex; flex-direction:column; min-width:0; height:100%; padding:clamp(1.6rem,1rem + 2vw,2.4rem); overflow-y:auto; }
.srm__meta{ display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; flex:none; }
.srm__meta[hidden]{ display:none; }
.srm__meta .srm__stars{ display:flex; gap:2px; }
.srm__meta .srm__stars svg{ width:13px; height:13px; color:var(--fresh); }
.srm__meta .srm__gsrc{ display:flex; align-items:center; gap:.35rem; font-family:var(--mono); font-size:.62rem; text-transform:uppercase; color:var(--ink-3); letter-spacing:.02em; }
.srm__meta .srm__gsrc svg{ width:13px; height:13px; flex:none; }
.srm__author{ display:block; font-style:normal; font-family:var(--disp); font-weight:800; font-size:1.1rem; color:var(--ink); margin-bottom:.9rem; flex:none; }
.srm__textwrap{ min-width:0; }
.srm__text{ color:var(--ink-2); white-space:pre-line; overflow-wrap:break-word; min-width:0; }

@media (max-width:760px){
  .srm{ padding:0; }
  .srm__panel{ grid-template-columns:1fr !important; max-width:none; width:100%; height:100%; max-height:100%; border-radius:0; grid-template-rows:auto 1fr; }
  .srm__stage{ min-height:0; aspect-ratio:4/3; flex:none; }
  .srm__content{ flex:1; }
}
@media (max-width:480px){ .srm__photos img{ width:calc(50% - .3rem); } }

/* Втори лайтбокс, над историята — само уголемената снимка. Стрелките са под
   снимката (не върху нея), само X остава в ъгъла (стандартно за модал). */
.srmz{ position:fixed; inset:0; z-index:85; display:none; align-items:center; justify-content:center; padding:2rem; background:rgba(10,15,22,.92); }
.srmz.on{ display:flex; }
.srmz img{ max-width:min(100%,1100px); max-height:78vh; border-radius:var(--r); box-shadow:var(--sh-lg); object-fit:contain; }
/* SVG икони вместо текстови символи (&times; и др.) — тези не се центрират
   перфектно в кръга, защото зависят от базовата линия на шрифта */
.srmz__x{ position:absolute; top:1.2rem; right:1.4rem; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.14); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.85; transition:opacity .15s, background .15s; }
.srmz__x svg{ width:1.3em; height:1.3em; }
.srmz__x:hover{ opacity:1; background:rgba(255,255,255,.28); }
/* фиксиран на едно и също място долу — не зависи от размера на снимката,
   иначе барът подскача нагоре/надолу при преход между различни по размер снимки */
.srmz__ctrl{ position:absolute; left:0; right:0; bottom:1.4rem; display:flex; justify-content:center; gap:.9rem; }
.srmz__ctrl[hidden]{ display:none; }
.srmz__nav{ width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.srmz__nav svg{ width:1.3em; height:1.3em; }
.srmz__nav:hover{ background:rgba(255,255,255,.28); }
@media (max-width:600px){ .srmz{ padding:1rem; } .srmz__nav{ width:38px; height:38px; } .srmz__nav svg{ width:1.1em; height:1.1em; } }

/* ==========================================================================
   Галерия
   ========================================================================== */

.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }

/* самонаправен dropdown (не роден <select>, за да си стилизираме списъка) */
.csel{ position:relative; display:inline-block; }
.csel__btn{ display:flex; align-items:center; gap:.7rem; font:inherit; font-family:var(--disp); font-weight:600;
  font-size:.88rem; color:var(--ink); padding:.7rem 1.1rem .7rem 1.25rem; border-radius:var(--r);
  border:1px solid var(--hair); background:var(--paper); box-shadow:var(--sh); cursor:pointer;
  transition:border-color .2s, box-shadow .2s; }
.csel__btn:hover{ border-color:var(--green); }
.csel[data-open] .csel__btn,.csel__btn:focus-visible{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.csel__chev{ width:16px; height:16px; flex:none; color:var(--ink-3); transition:transform .2s var(--ease); }
.csel[data-open] .csel__chev{ transform:rotate(180deg); }
.csel__list{ position:absolute; left:0; top:calc(100% + .5rem); z-index:20; min-width:100%; margin:0; padding:.4rem;
  list-style:none; background:var(--paper); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--sh-lg);
  display:grid; gap:.15rem; }
.csel__list[hidden]{ display:none; }
.csel__list li{ padding:.55rem .8rem; border-radius:8px; font-size:.9rem; color:var(--ink-2); cursor:pointer;
  white-space:nowrap; transition:background .15s, color .15s; }
.csel__list li:hover{ background:var(--green-pale); color:var(--green); }
.csel__list li.is-on{ background:var(--green); color:#fff; font-weight:600; }

.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,.4rem + .8vw,1.15rem); }
@media (max-width:900px){ .gal{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .gal{ grid-template-columns:1fr; } }
.gal figure{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-lg); aspect-ratio:4/3; cursor:zoom-in; background:var(--green-pale); border:1px solid var(--hair); box-shadow:var(--sh); }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gal figure:hover img{ transform:scale(1.05); }
.gal figcaption{ position:absolute; left:0; bottom:0; padding:.5rem .8rem; background:var(--green-deep); color:#fff; font-family:var(--mono); font-size:.58rem; text-transform:uppercase; border-top-right-radius:10px; transform:translateY(101%); transition:transform .3s var(--ease); }
.gal figure:hover figcaption{ transform:none; }
.gal figure.hide{ display:none; }

.strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,.4rem + .9vw,1.15rem); }
@media (max-width:920px){ .strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .strip{ grid-template-columns:1fr; } }
.strip figure{ margin:0; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hair); box-shadow:var(--sh); cursor:zoom-in; }
.strip img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.strip figure:hover img{ transform:scale(1.05); }

/* ==========================================================================
   Вътрешни страници
   ========================================================================== */

.phead{ padding-top:clamp(2.5rem,1.5rem + 3vw,4.5rem); padding-bottom:clamp(2.5rem,1.5rem + 3vw,4.5rem); position:relative; overflow:hidden;
  background:var(--green-deep); color:#BFD0E0; }
.phead .blob{ display:none; }
.phead__in{ position:relative; z-index:2; }
.phead .eyebrow{ color:var(--fresh); }
.phead .paws svg{ color:#fff; opacity:.045; }
/* навигацията поема визията на eyebrow-а (тиренце + изцяло червена) — вместо
   отделно мини заглавие под нея, което само дублираше последната трохичка. */
.crumbs{ display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.64rem; text-transform:uppercase; color:var(--fresh); margin-bottom:1.1rem; }
.crumbs::before{ content:""; width:22px; height:1px; background:currentColor; flex:none; }
.crumbs a:hover{ color:#fff; }
.phead h1{ font-size:clamp(2.3rem,1.3rem + 4.4vw,4.4rem); font-weight:800; letter-spacing:-.035em; max-width:18ch; color:#fff; }
.phead p{ margin-top:1.1rem; max-width:54ch; font-size:var(--lead); color:#9DB2C6; }

/* херо със снимка за фон (напр. корицата на случай) — тъмен градиент върху
   нея за четимост, ако няма снимка си остава обичайният тъмносин фон */
.phead--photo{ background:var(--phead-bg) center/cover no-repeat, var(--green-deep); min-height:clamp(320px,32vw,460px); display:flex; align-items:flex-end; }
.phead--photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(16,58,99,.55) 0%, rgba(11,25,40,.82) 100%);
}

/* вътрешен хедър с животно (напр. Услуги, За нас)
   ВАЖНО: няма vh — височината на лентата да зависи от ШИРИНАТА, не от
   височината на прозореца, иначе животното „скача" между таблети (напр.
   iPad Pro 1024×1366 vs Nest Hub 1024×600). */
.phead--critter{ padding-block:clamp(2.2rem,1.4rem + 2vw,3.4rem); min-height:clamp(350px,26vw,420px);
  display:flex; align-items:center; }
.phead--critter p{ max-width:40ch; }
.phead__critter{ position:absolute; right:clamp(-8px,2vw,60px); bottom:clamp(2px,1.4vw,20px);
  width:clamp(290px,31vw,450px); height:auto; z-index:1; pointer-events:none;
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.32)); }
.phead__critter--wide{ right:clamp(-20px,2vw,56px); bottom:clamp(-16px,0vw,8px); width:clamp(400px,50vw,720px);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.3)); }
/* За нас — едра усмихната муцуна, БРАДИЧКАТА се отрязва на долния ръб на лентата
   (bottom-anchored, също като на мобилно → без скок при 620px) */
.phead__critter--big{ right:clamp(-24px,2vw,44px); bottom:clamp(-52px,-3.4vw,-14px); top:auto;
  width:clamp(340px,38vw,520px); }
/* Галерия — кучето маха с лапа, изниква от долния ръб (отрязано на шева) */
.phead__critter--wave{ right:clamp(-16px,2vw,60px); bottom:clamp(-34px,-2vw,-8px); top:auto;
  width:clamp(256px,24vw,330px); }
/* Отзиви — котка и куче се гледат едно друго, изникват от долния ръб (същата логика като
   --wave, по-малка ширина от --big, за да не се реже горе главата на кучето) */
.phead__critter--duo{ right:clamp(-16px,2vw,50px); bottom:clamp(-30px,-2vw,-8px); top:auto;
  width:clamp(256px,26vw,360px); }
/* Случаи — куче с очила, кроп само до раменете (h/w≈0.65 — на снимката отдолу
   тялото опира твърдо в десния ръб на кадъра, отрязано е широко, за да не се
   вижда това), изниква от долния ръб както --wave/--duo */
.phead__critter--cases{ right:clamp(-16px,2vw,50px); bottom:clamp(-40px,-2.6vw,-14px); top:auto;
  width:clamp(330px,37vw,540px); }
/* Контакти — едро лице, козината опира горния ръб, наднича надолу към заглавието.
   Късата лента + едрото свинче => козината излиза извън горния ръб, а брадичката
   стига долния. Едно поведение от десктоп до мобилно, без скок между таблети.    */
/* свинчето ЗАПЪЛВА херото: лентата и свинчето растат заедно (h≈0.9·w, лента≈0.68·w),
   така козината винаги излиза над горния ръб (одрязаното не се вижда), очите се
   виждат, брадичката се реже на долния ръб — еднакво на всяка ширина.            */
.phead--critter:has(.phead__critter--face){ min-height:clamp(240px,24vw,380px); }
.phead--critter:has(.phead__critter--face) h1{ font-size:clamp(1.5rem,.9rem + 3.6vw,4rem); max-width:12ch; }
.phead__critter--face{ right:clamp(-70px,-3.4vw,-6px); bottom:clamp(-84px,-4.6vw,-16px); top:auto;
  width:clamp(340px,44vw,600px); filter:drop-shadow(-4px 10px 20px rgba(0,0,0,.22)); }
/* скрим: синьото „поглъща" левия ръб на свинчето, за да е бяло заглавие върху
   тъмно, а не върху светлата козина (без него текстът се губи на телефон) */
.phead--critter:has(.phead__critter--face)::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,#103A63 32%,rgba(16,58,99,.72) 50%,rgba(16,58,99,0) 74%);
  z-index:1; pointer-events:none; }
/* таблет.
   --big (За нас) и --wave (Галерия) нямат подзаглавен текст → ползват СЪЩИТЕ
   десктоп правила чак до 620px (плавно преоразмеряване, без скок при 1000px).
   Само --lead (дълъг текст) и --face (едро лице + дълго заглавие) искат
   компактен таблетен вид.                                                   */
@media (max-width:1000px){
  .phead--critter:has(.phead__critter--face){ display:block;
    padding-block:clamp(2rem,1.4rem + 2vw,3rem); min-height:clamp(240px,30vw,300px); }
  /* НЕ пипаме .phead__in max-width — .shell е с margin-inline:auto и се центрира.
     Стесняваме само заглавието, за да остане вляво като на другите страници. */
  .phead--critter:has(.phead__critter--face) h1{ max-width:11ch; }
  /* по-едро и по-ниско, за да излиза козината над горния ръб и в таблетния диапазон */
  .phead__critter--face{ width:clamp(400px,58vw,540px); bottom:clamp(-100px,-9vw,-26px);
    right:clamp(-96px,-13vw,-16px); }
}
/* Услуги (дълъг лийд) — само на десктоп, където има място встрани от абзаца */
@media (max-width:1000px) and (min-width:621px){
  .phead--critter:has(.phead__critter--lead){ display:block; min-height:0;
    padding-block:clamp(2rem,1.4rem + 2vw,3rem); }
  .phead__critter--lead{ display:none; }
}

/* ── мобилно ─────────────────────────────────────────────────────────
   .phead е с ширина = екрана, затова vw е ок; ВАЖНО: min-height и width
   на животното спират (cap) при една и съща ширина (~430px), за да не
   „скача" животното спрямо лентата между модели телефони.               */
@media (max-width:620px){
  .phead--critter{ display:block; overflow:hidden;
    min-height:clamp(380px,88vw,440px);
    padding-block:clamp(2.2rem,1.8rem + 2vw,3rem) 0; }
  .phead--critter .phead__in{ max-width:none; position:relative; z-index:2; }
  .phead--critter h1{ max-width:10ch; }

  /* За нас — голямата усмихната муцуна, брадичката пресича долния ръб */
  .phead__critter--big{ top:auto; bottom:clamp(-30px,-3vw,-6px);
    width:clamp(292px,76vw,352px); right:clamp(-54px,-13vw,-10px); }
  /* Галерия — кучето маха с лапа, изниква от долния ръб */
  .phead__critter--wave{ top:auto; bottom:clamp(-26px,-3vw,-6px);
    width:clamp(226px,56vw,258px); right:clamp(-18px,-4vw,8px); }
  /* Отзиви — котка и куче, същата логика, по-малка ширина за да се виждат добре главите */
  .phead__critter--duo{ top:auto; bottom:clamp(-22px,-2.5vw,-6px);
    width:clamp(226px,58vw,270px); right:clamp(-16px,-4vw,8px); }
  /* Случаи — кучето с очила, изниква от долния ръб */
  .phead__critter--cases{ top:auto; bottom:clamp(-28px,-3.4vw,-8px);
    width:clamp(280px,74vw,350px); right:clamp(-14px,-3vw,6px); }

  /* Контакти — едрото лице, отдолу-закачено (както на десктоп): козината горе и
     десният ръб излизат извън херото → одрязаното не се вижда никъде; очите,
     носът и брадичката остават в кадър. Лентата е с нормална височина, за да не
     е сбито заглавието — една логика от десктоп до най-малкия телефон.        */
  .phead--critter:has(.phead__critter--face){ min-height:clamp(200px,56vw,240px);
    padding-block:clamp(2rem,1.6rem + 2vw,2.8rem) 0; }
  .phead--critter:has(.phead__critter--face) h1{ max-width:9ch; }
  .phead__critter--face{ top:auto; bottom:clamp(-28px,-5.5vw,-10px);
    width:clamp(320px,90vw,400px); right:clamp(-84px,-21vw,-12px); }

  /* Услуги има дълъг лийд — по-компактно куче в свободния десен долен ъгъл */
  .phead--critter:has(.phead__critter--lead){ min-height:0;
    padding-bottom:clamp(9.5rem,4rem + 24vw,12.5rem); }
  .phead--critter:has(.phead__critter--lead) p{ max-width:32ch; }
  .phead__critter--lead{ width:clamp(140px,42vw,180px); right:clamp(-16px,-4vw,-6px); }
}

/* display:flow-root (не grid) нарочно — grid прави всяко дете отделен ред
   в мрежата и текстът никога не увива покрай "плаваща" снимка; в нормален
   flow float работи, а flow-root само пази снимките да не изтичат отдолу */
.rich{ display:flow-root; max-width:64ch; }
/* страница на услуга — текстът стои под снимка на цяла колона, затова тук
   нарочно НЕ е ограничен до 64ch (четимост) — да пасва точно на ширината ѝ */
.rich--wide{ max-width:none; }
.rich > *{ margin:0 0 1.3rem; }
.rich > *:last-child{ margin-bottom:0; }
.rich p{ color:var(--ink-2); }
/* празен <p></p> (клиентът маха ред за разстояние) няма съдържание → нулева
   височина → марджините му се сливат с тези над/под него (margin collapse),
   и празният ред изчезва визуално, макар да си стои в записания текст.
   min-height му дава истинска височина, за да спре сливането. */
.rich p:empty{ min-height:1em; }
.rich p:first-of-type{ color:var(--ink); font-size:var(--lead); font-weight:500; }
/* h3/h2 нямаха собствен цвят и наследяваха приглушеното сиво на обикновен
   текст — приличаха на самия текст, не на заглавия. Дълбокото синьо е
   същото като тъмните ленти на сайта (виж --green-deep), за да усеща
   заглавието вътре в случая като част от сайта, не като гол текст. */
.rich h3{ font-family:var(--disp); font-weight:700; font-size:var(--t-h3); color:var(--ink); margin-top:1rem; }
/* "Заглавие" в текста на случая — по-едро от "Подзаглавие" (h3), но нарочно
   не размерът на --t-h2 (този е за секции на цялата страница, тук е просто
   вътрешен раздел в един непрекъснат текст) */
.rich h2{ font-family:var(--disp); font-weight:800; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem); color:var(--green-deep); margin-top:1.2rem; }
.rich hr{ border:none; height:2px; margin:1.8rem 0; background:linear-gradient(to right, var(--fresh), transparent); }
/* допълнения за rich-text от "Случаи" — редакторът там позволява и списъци/линкове,
   плюс снимки/файлове, вмъкнати директно в текста (не отделни блокове) */
.rich ul, .rich ol{ padding-left:1.4rem; color:var(--ink-2); display:grid; gap:.5rem; }
.rich ul{ list-style:disc; } /* глобалният ul{list-style:none} (за менюта/карти) иначе гасеше точките тук */
.rich li::marker{ color:var(--green); }
.rich strong{ color:var(--ink); }
.rich a{ color:var(--green); text-decoration:underline; text-underline-offset:2px; }
.rich a:hover{ color:var(--fresh); }
/* бутони за споделяне на случай (горе и долу в pages/case.php) — кръгли
   иконки, всяка светва в марковия цвят на платформата при hover */
.share{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; }
.share__label{ font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); }
.share__row{ display:flex; gap:.55rem; }
.share__btn{
  width:40px; height:40px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair); background:var(--paper); color:var(--ink-2); cursor:pointer; position:relative;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.share__btn svg{ width:18px; height:18px; }
.share__btn:hover{ color:#fff; transform:translateY(-3px); box-shadow:var(--sh); }
.share__btn--fb:hover{ background:#1877F2; border-color:#1877F2; }
.share__btn--viber:hover{ background:#7360F2; border-color:#7360F2; }
.share__btn--wa:hover{ background:#25D366; border-color:#25D366; }
.share__btn--x:hover{ background:#000; border-color:#000; }
.share__btn--copy:hover, .share__btn--native:hover{ background:var(--green); border-color:var(--green); }
.share__btn--copy.is-copied{ background:var(--green); border-color:var(--green); color:#fff; }
/* "Копирано!" balloon над копчето, за момент след клик */
.share__btn--copy::after{
  content:"Копирано!"; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--green-deep); color:#fff; font-size:.72rem; font-weight:700; padding:.35rem .7rem; border-radius:999px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.share__btn--copy.is-copied::after{ opacity:1; transform:translateX(-50%) translateY(0); }

/* "Случаи" (виж pages/case.php) вече не дели страницата с отделни широки
   снимкови блокове — но пак не бива изкуствено да е тясна колона с празно
   място отстрани, докато снимките в текста имат нужда от повече място */
.case-body{ max-width:none; }
.rich img{ display:block; border-radius:var(--r-lg); box-shadow:var(--sh); cursor:zoom-in; }
/* самостоятелна снимка (не плаваща, не в група) — фиксирано съотношение +
   изрязване за запълване, вместо естествения ѝ размер: иначе портретна
   снимка става абсурдно висока (контейнерът е много широк), а малка/тясна
   снимка увисва "изгубена" с празно място около нея. Така изгледът винаги
   е спретнат и предвидим, каквато и снимка да качи клиентът. */
.rich > img:not(.img-left):not(.img-right){ width:100%; max-width:100%; aspect-ratio:16/9; object-fit:cover; max-height:min(70vh,760px); margin-inline:auto; }
/* текст до снимка — снимката плава отляво/дясно, текстът след нея се увива
   около (виж бутоните "Снимка вляво/вдясно" в редактора на случая); тук
   пазим естественото ѝ съотношение (без crop) — показва се цялата снимка.
   width (не max-width) е само ПРЕДПОЧИТАН начален размер — ръчно влачене
   на ъгъла (inline style) го замества изцяло; max-width:100% остава само
   като предпазител да не прелее извън контейнера. */
.rich img.img-left, .rich img.img-right{ width:min(45%,420px); max-width:100%; margin-bottom:1rem; }
.rich img.img-left{ float:left; margin-inline:0 1.5rem; }
.rich img.img-right{ float:right; margin-inline:1.5rem 0; }
.rich h2, .rich h3, .rich .case-photos{ clear:both; }
@media (max-width:640px){
  /* на телефон плаващите снимки стават цял ред като самостоятелните —
     значи имат нужда от същата кутия/crop, иначе пак може да изскочи
     портретна снимка с абсурдна височина */
  .rich img.img-left, .rich img.img-right{ float:none; width:100%; max-width:100%; aspect-ratio:16/9; object-fit:cover; margin-inline:auto; }
}
/* няколко снимки, качени наведнъж на едно място в текста (виж admin/index.php
   upload-slika) — 1 → цяла и голяма, повече → по 2 на ред, нечетна последна
   се центрира на своя ред, вместо да увисне разтегната или залепена вляво */
.rich .case-photos{ display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin:.3rem 0; }
.rich .case-photos img{
  width:auto; flex:1 1 340px; max-width:calc(50% - .5rem); aspect-ratio:4/3; object-fit:cover; margin:0;
}
@media (max-width:560px){ .rich .case-photos img{ max-width:100%; flex-basis:100%; } }
/* карта за сваляне на файл, вмъкнат в текста — икона в цветна кутийка + етикет,
   размерът/разширението на втори ред (същия дух като старите блокови карти) */
/* inline-flex (не flex) нарочно — flex е блоков елемент и щеше да се
   разтегне на цялата (много широка) ширина на контейнера с купища празно
   място вдясно от иконата/етикета; тук картата се свива точно колкото ѝ
   трябва съдържанието, като бутон, а не като лента през целия екран */
.rich a.case-file{
  display:inline-flex; align-items:center; gap:.65rem; margin:.3rem 0; padding:.6rem .85rem; max-width:100%; background:var(--paper);
  border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--sh); text-decoration:none;
  color:var(--ink); font-weight:700; font-size:.92rem; transition:box-shadow .2s, transform .2s;
}
.rich a.case-file:hover{ box-shadow:var(--sh-lg); transform:translateY(-2px); }
.rich a.case-file::before{
  content:"📎"; flex:none; width:34px; height:34px; border-radius:9px; background:var(--green-pale);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
}
.rich a.case-file small{ display:block; font-weight:400; font-family:var(--mono); font-size:.65rem; text-transform:uppercase; color:var(--ink-3); margin-top:.15rem; }

/* Случаи — списък с карти */
/* същия визуален език като .stile (плочките с отзиви — снимка на цял фон,
   градиент горе за текста, плътен бар "Прочети" долу, светва червено на
   hover), но всеки случай на СВОЙ РЕД, цяла ширина — не решетка от плочки */
.cases{ display:flex; flex-direction:column; gap:1.4rem; }
.ccard{
  position:relative; min-height:300px; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh); cursor:pointer; transition:box-shadow .2s, transform .2s;
}
.ccard:hover{ box-shadow:var(--sh-lg); transform:translateY(-3px); }
.ccard__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ccard__img--empty{ display:flex; align-items:center; justify-content:center; background:linear-gradient(155deg,var(--green) 0%,var(--green-deep) 100%); }
.ccard__img--empty svg{ width:3rem; height:3rem; color:#fff; opacity:.5; }
.ccard__top{
  position:absolute; left:0; right:0; top:0; padding:clamp(1.4rem,1rem + 1.6vw,2.2rem) clamp(1.4rem,1rem + 1.6vw,2.2rem) 1.6rem;
  display:flex; flex-direction:column; gap:.5rem;
  background:linear-gradient(to bottom, rgba(16,58,99,.88) 0%, rgba(16,58,99,.55) 55%, transparent 100%);
}
.ccard__top h3{ margin:0; color:#fff; font-family:var(--disp); font-weight:800; font-size:clamp(1.2rem,1rem + 1vw,1.6rem); overflow-wrap:break-word; }
.ccard__top p{
  margin:0; max-width:60ch; color:rgba(255,255,255,.85); font-size:.94rem; line-height:1.55; overflow-wrap:break-word;
  white-space:pre-line; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.ccard__bot{
  position:absolute; left:0; right:0; bottom:0; padding:.85rem clamp(1.4rem,1rem + 1.6vw,2.2rem); display:flex; justify-content:flex-end; align-items:center;
  background:rgba(16,58,99,.88); transition:background .15s;
}
.ccard:hover .ccard__bot{ background:var(--fresh); }
.ccard__more{ display:inline-flex; align-items:center; gap:.4rem; color:#fff; font-family:var(--disp); font-weight:700; font-size:.92rem; }
.ccard__more svg{ width:1em; height:1em; }
@media (max-width:560px){ .ccard{ min-height:260px; } }


.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,32%); gap:clamp(2rem,1rem + 4vw,5rem); align-items:center; }
/* страница на услуга — лепкавата странична лента трябва да тръгва от горе
   (не центрирана), за да работи sticky правилно при произволна дължина */
.split:has(.aside){ align-items:start; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }
.aside{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(1.5rem,1rem + 1.5vw,2.1rem); background:var(--green-pale); display:grid; gap:1rem; position:sticky; top:6rem; }
.aside h3{ font-family:var(--disp); font-weight:700; font-size:1.25rem; }
.aside p{ font-size:.9rem; color:var(--ink-2); }
.svc-list{ display:grid; gap:.3rem; }
.svc-list a{ display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem; border-radius:10px; background:var(--paper); font-family:var(--disp); font-weight:600; font-size:.88rem; transition:transform .22s var(--ease), background .22s, color .22s; }
.svc-list a svg{ width:15px; height:15px; color:var(--green); }
.svc-list a:hover{ transform:translateX(4px); background:var(--green); color:#fff; }
.svc-list a:hover svg{ color:#fff; }
.svc-list a.is-on{ background:var(--ink); color:#fff; }

.checks--p li{ color:var(--ink-2); }

/* Апаратура — витрина със снимки (или кратък ред, докато не е качена снимка).
   flex вместо grid нарочно: при непълен последен ред (броят апарати рядко се
   дели на 4) flex центрира реда му сам, вместо да виси наляво с празнина —
   работи адекватно при произволен брой, без PHP/JS смятане на изключения. */
.gear{ --gear-gap:clamp(.9rem,.4rem + 1.2vw,1.3rem); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--gear-gap); }
.gear__card{ flex:0 0 calc(25% - var(--gear-gap)*3/4); }
@media (max-width:920px){ .gear__card{ flex-basis:calc(50% - var(--gear-gap)/2); } }
@media (max-width:560px){ .gear__card{ flex-basis:100%; } }
.gear__card{ position:relative; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--hair-d); background:rgba(255,255,255,.05); }
.gear__card--photo{ background:none; cursor:zoom-in; }
.gear__card--photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gear__card--photo:hover img{ transform:scale(1.05); }
.gear__n{ position:absolute; top:.7rem; left:.7rem; z-index:1; font-family:var(--mono); font-size:.68rem; color:#fff; background:rgba(16,58,99,.72); backdrop-filter:blur(4px); padding:.25rem .55rem; border-radius:7px; }
.gear__card:not(.gear__card--photo) .gear__n{ position:static; align-self:flex-start; background:none; color:var(--fresh); padding:0; margin-bottom:.5rem; }
.gear__card:not(.gear__card--photo){ display:flex; flex-direction:column; justify-content:center; padding:1.1rem 1.2rem; }
.gear__card:not(.gear__card--photo) b{ font-family:var(--disp); font-weight:600; font-size:.95rem; color:#fff; line-height:1.3; }
.gear__card:not(.gear__card--photo) span{ margin-top:.35rem; font-size:.82rem; color:#9DB2C6; }
.gear__card--photo figcaption{ position:absolute; inset:auto 0 0 0; padding:2.2rem 1rem .9rem; background:linear-gradient(to top, rgba(8,22,38,.92), rgba(8,22,38,0)); }
.gear__card--photo figcaption b{ display:block; font-family:var(--disp); font-weight:600; font-size:.92rem; color:#fff; }
.gear__card--photo figcaption span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin-top:.2rem; font-size:.78rem; line-height:1.35; color:#BFD0E0; }

/* ---------- контакти ---------- */
.contact{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,1rem + 3vw,4rem); }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.cbits{ display:grid; gap:.8rem; align-content:start; }
/* лента с картата — на цяла ширина, тъмносиня като другите CTA секции (не е
   отделна карта/контейнер); картата пази ширината на лявата колона отгоре */
.cband{ background:var(--green-deep); color:#CBD9E6; position:relative; overflow:hidden;
  border-block:1px solid var(--green-mid); padding-block:clamp(3rem,2rem + 3vw,5rem); }
.cband .paws svg{ color:#fff; opacity:.06; }
.cband__in{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,1rem + 3vw,4rem); align-items:stretch; position:relative; z-index:1; }
.cmap{ height:100%; min-height:260px; }
.cmap iframe{ display:block; width:100%; height:100%; border-radius:var(--r); border:1px solid rgba(255,255,255,.14); box-shadow:var(--sh); }
.cband__pet{ position:relative; height:100%; justify-self:center; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cband__pet h2{ font-size:var(--t-h2); font-weight:800; color:#fff; margin-bottom:.6rem; }
.cband__pug{ display:block; width:clamp(160px,17vw,230px); height:auto; position:relative; z-index:1;
  transform:scaleX(-1); filter:drop-shadow(-10px 14px 16px rgba(0,0,0,.35)); }
.cband__pet .btn{ margin-top:.9rem; }
@media (max-width:820px){ .cband__in{ grid-template-columns:1fr; } .cband__pug{ display:block; }
  .cband__pet{ justify-self:center; height:auto; order:1; }
  .cmap{ order:2; margin-top:1.5rem; } }
.cbit{ display:flex; gap:1rem; padding:1.1rem 1.3rem; border:1px solid var(--hair); border-radius:var(--r); background:var(--paper); align-items:center; box-shadow:var(--sh); }
.cbit__i{ width:42px; height:42px; flex:none; border-radius:12px; background:var(--green-pale); color:var(--green); display:grid; place-items:center; }
.cbit__i svg{ width:19px; height:19px; }
.cbit dt{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; color:var(--ink-3); }
.cbit dd{ font-family:var(--disp); font-weight:600; margin-top:.2rem; }
.cbit dd a:hover{ color:var(--green); }
.hrs__head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.hrs{ border:1px solid var(--hair); border-radius:var(--r); overflow:hidden; background:var(--paper); box-shadow:var(--sh); margin-top:.3rem; }
.hrs div{ display:flex; justify-content:space-between; padding:.7rem 1.1rem; border-bottom:1px solid var(--hair); font-weight:500; }
.hrs div:last-child{ border-bottom:0; }
.hrs .is-today{ background:var(--green-pale); color:var(--green); font-weight:600; }
.hrs .is-closed span:last-child{ color:var(--sig); }
.form{ border:1px solid var(--hair); border-radius:var(--r-lg); padding:clamp(1.6rem,1rem + 2vw,2.6rem); background:var(--paper); box-shadow:var(--sh-lg); display:flex; flex-direction:column; gap:1.05rem; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:520px){ .form__row{ grid-template-columns:1fr; } }
.f{ display:grid; gap:.4rem; }
.f label{ font-family:var(--mono); font-size:.62rem; text-transform:uppercase; color:var(--fresh); }
.f input,.f select,.f textarea{ font:inherit; font-size:1rem; padding:.8rem 1rem; border:1px solid var(--hair); border-radius:10px; background:var(--bone); color:var(--ink); width:100%; transition:border-color .2s, box-shadow .2s; }
.f textarea{ min-height:120px; resize:vertical; }
/* полето за съобщение расте, за да запълни формата до височината на контактите
   отстрани (симетрично), вместо да остане празно място под бутона.
   grid-template-rows:auto 1fr — БЕЗ това .f--grow просто ставаше по-висока
   кутия (flex:1), но редовете ѝ (label + textarea) си оставаха auto-високи
   (естествения си размер) и height:100% на textarea-та нямаше спрямо какво
   да се смята (родителят/редът му нямаше определена височина) — оставаше
   празно място между етикета и текстовото поле вместо textarea-та да расте. */
.f--grow{ flex:1; position:relative; display:grid; grid-template-rows:auto 1fr; }
.f--grow textarea{ height:100%; min-height:120px; }
/* кучето наднича над долния десен ъгъл на текстовото поле */
.f__dog{ position:absolute; right:14px; bottom:0; width:clamp(84px,11vw,128px); height:auto;
  pointer-events:none; filter:drop-shadow(0 6px 10px rgba(20,30,42,.22)); }
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale); }
.form small{ font-size:.78rem; color:var(--ink-3); }

/* Custom бутон за файлове — текстът на родния input е на езика на браузъра
   и не може да се преведе, затова скриваме родния и правим свой на български. */
.filepick{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:1rem 1.1rem; border:1.5px dashed var(--hair); border-radius:var(--r); background:var(--bone);
  transition:border-color .15s;
}
.filepick:focus-within{ border-color:var(--green); }
.filepick__input{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.filepick__btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.65rem 1.2rem; border-radius:999px; background:var(--paper); box-shadow:inset 0 0 0 1.5px var(--hair); color:var(--green-deep); font-weight:700; font-size:.87rem; cursor:pointer; transition:background .15s, color .15s, box-shadow .15s; }
.filepick__btn:hover{ background:var(--green); color:#fff; box-shadow:none; }
.filepick__status{ color:var(--ink-3); font-size:.85rem; overflow-wrap:break-word; }
.rform__foot{ margin-top:.3rem; padding-top:1.2rem; border-top:1px solid var(--hair); }

/* ==========================================================================
   CTA
   ========================================================================== */

.call{ background:var(--green-deep); color:#CBD9E6; border-block:1px solid var(--green-mid); position:relative; overflow:hidden; padding-block:clamp(3rem,2rem + 3vw,5rem); }
.call__in{ position:relative; z-index:2; text-align:center; display:grid; gap:1.3rem; justify-items:center; }
.call h2{ font-size:var(--t-h2); font-weight:800; color:#fff; }
.call p{ max-width:58ch; color:#9DB2C6; }
/* корги със сърца — на темата „♥ спешен случай" */
.call__dog{ position:absolute; right:clamp(2%,8vw,15%); bottom:clamp(-38px,-2.2vw,-18px);
  width:clamp(146px,15vw,232px); height:auto; z-index:2; pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.32)); }
@media (max-width:900px){ .call__dog{ right:1%; bottom:clamp(-26px,-4vw,-12px); width:clamp(120px,20vw,168px); } }
@media (max-width:620px){ .call{ padding-bottom:clamp(6rem,3rem + 14vw,8.5rem); }
  .call__dog{ right:clamp(-16px,-4vw,-4px); bottom:clamp(-24px,-7vw,-10px); width:clamp(88px,26vw,110px); } }
/* и двата телефона (основен + дежурен), всеки с лекаря под номера си */
/* тънки линии над/под телефоните — отделят ги визуално от заглавието и
   бутона, вместо всичко да е еднакво сбутано на една колона */
.call__hr{ width:min(100%,240px); height:1px; background:var(--hair-d); }
.call__phones{ display:flex; flex-wrap:wrap; gap:clamp(1.6rem,4vw,3.4rem); justify-content:center; }
.call__phone{ display:flex; flex-direction:column; align-items:center; gap:.4rem; }
.call__phone__link{ font-family:var(--disp); font-weight:800; font-size:clamp(1.3rem,.85rem + 1.8vw,2.1rem); letter-spacing:-.03em; color:#fff; display:inline-flex; align-items:center; gap:.6rem; }
.call__phone__link svg{ width:1em; height:1em; color:var(--fresh); animation:beat 1.5s ease-in-out infinite; }
.call__phone__who{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:#8AA6C0; }
@keyframes beat{ 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.16); } 28%{ transform:scale(1); } 42%{ transform:scale(1.1); } }
.call__row{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

/* ==========================================================================
   Футър
   ========================================================================== */

.ftr{ background:var(--green-pale); color:#2F4C69; padding-block:clamp(3rem,2rem + 3vw,4.5rem) 2rem; }
.ftr a{ color:var(--green-deep); }
/* скопирано само до линковете в картите (навигация/телефон/имейл), НЕ общо
   .ftr a — общо правило печелеше по специфичност пред .btn--ghost:hover и
   .soc a:hover (техния собствен цвят на ховър), текстът ставаше червен
   върху червен фон и изчезваше (веднъж хванато за бутона, пак се появи и
   за социалните икони — същият бъг, различен елемент) */
.ftr__card li a:hover{ color:var(--fresh); }
.ftr__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(1.6rem,1rem + 2vw,3rem); padding-bottom:2.5rem; border-bottom:1px solid rgba(16,58,99,.16); }
/* 4-те колони се сблъскват (часовете в "Работно време" пренасят на нов ред)
   между ~820-1260px — link-навигацията/адресите там вече не се събират на
   един ред в тясна 1fr колона. Двуколонният режим важи по-дълго, докато
   4-те колони не се съберат отново комфортно. */
@media (max-width:1260px){ .ftr__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .ftr__grid{ grid-template-columns:1fr; } }
.ftr__brand img{ height:44px; width:auto; margin-bottom:1rem; }
.ftr__brand p{ font-family:var(--disp); font-weight:600; color:var(--green-deep); max-width:30ch; }
.ftr h4{ font-family:var(--mono); font-size:.62rem; letter-spacing:.02em; text-transform:uppercase; color:var(--fresh); margin-bottom:1rem; }
.ftr li{ margin-bottom:.5rem; font-size:.93rem; }
.ftr__muted{ color:var(--fresh); }

/* трите групи (Съдържание/Работно време/Контакти) — картички вместо гола
   колона текст, ехо на червената картичка от херото, редувани синьо/червено. */
/* display:flex тук + flex:1 на списъка вътре — картите пак стават еднакво
   високи (grid stretch), но по-късото съдържание (Съдържание/Работно време
   имат 7 реда срещу 8-те на Контакти) се разпределя равномерно по цялата
   височина (justify-content:space-between), вместо да спира по-рано и да
   оставя празно място отдолу. */
.ftr__card{ background:var(--paper); border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; display:flex; flex-direction:column; }
.ftr__card h4{ margin:0; padding:.7rem 1.15rem; color:#fff; }
.ftr__card--blue h4{ background:linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%); }
/* пълноширочната лента е на wrapper-а (не на h4), за да не спира червеният фон
   наполовина, там където до заглавието каца табелката Отворено/Затворено */
.ftr__hours__head{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.7rem .85rem; background:linear-gradient(135deg, #EA5A50 0%, var(--fresh) 55%, #9C241E 100%); }
.ftr__hours__head h4{ padding:0; white-space:nowrap; font-size:.58rem; }
.ftr__hours__head .hrs-badge{ background:rgba(255,255,255,.92); }
/* редовете разделени с тънка линия — за консистентност с работното време;
   еднакъв font-size навсякъде (преди .ftr__hours__row беше по-дребен от
   останалите редове — картите не се подреждаха симетрично) */
.ftr__card > ul{ flex:1; display:flex; flex-direction:column; padding:0; }
/* flex:1 на всеки ред (не justify-content:space-between на контейнера) —
   иначе разстоянието се трупа МЕЖДУ редовете, извън собствената им кутия,
   и оцветяването на "днес" покрива само тесния ред, не целия му дял височина */
.ftr__card li{ flex:1; display:flex; align-items:center; margin:0; padding:.6rem 1.15rem; border-top:1px solid var(--hair); font-size:.88rem; }
.ftr__card li:first-child{ border-top:none; }
.ftr__card__cta{ padding:1rem 1.15rem 1.15rem; border-top:1px solid var(--hair); }
.ftr__card__cta .btn{ width:100%; justify-content:center; padding:.65rem 1.1rem; font-size:.85rem; }

/* работното време в картата — същите редове ден/час като на началната страница */
.ftr__hours{ flex:1; display:flex; flex-direction:column; }
.ftr__hours__row{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.6rem 1.15rem; font-size:.88rem; border-top:1px solid var(--hair); }
.ftr__hours__row:first-child{ border-top:none; }
.ftr__hours__row.is-today{ background:var(--green-pale); font-weight:700; color:var(--green-deep); }
.ftr__hours__row span:last-child{ color:var(--ink-2); }
.ftr__hours__row.is-today span:last-child{ color:inherit; }
.ftr__hours__row.is-closed span:last-child{ color:var(--sig); }
.soc{ display:flex; gap:.6rem; margin-top:1.1rem; }
.soc a{ width:38px; height:38px; border:1px solid rgba(16,58,99,.22); color:var(--green-deep); border-radius:50%; display:grid; place-items:center; transition:background .25s, color .25s, transform .25s var(--ease); }
.soc a:hover{ background:var(--fresh); color:#fff; border-color:var(--fresh); transform:translateY(-3px); }
.soc svg{ width:17px; height:17px; }
.ftr__contact li{ display:flex; gap:.6rem; align-items:flex-start; }
.ftr__contact li svg{ width:15px; height:15px; flex:none; margin-top:.28em; color:var(--fresh); }
/* адрес/телефон+име на два реда, БЕЗ линия помежду им (само около групата) —
   симетрично с единичните редове, без да къса адреса/лекаря от номера му */
.ftr__contact--stack > span, .ftr__contact--stack > a{ display:flex; flex-direction:column; gap:.45rem; }
.ftr__contact--stack > span > span:last-child, .ftr__contact--stack > a > span:last-child{ color:var(--ink-2); font-size:.85em; }
.ftr__bot{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; padding-top:1.6rem; font-family:var(--mono); font-size:.62rem; color:#5E7A96; }
.ftr__bot a{ color:inherit; } /* .ftr a иначе я прави зелена — тук е сред ситния копирайт текст, не линк-карта */
.ftr__bot a:hover{ color:var(--fresh); }

/* ==========================================================================
   Мобилна лента, лайтбокс, прогрес
   ========================================================================== */

.callbar{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; gap:1px; background:var(--hair); transform:translateY(101%); transition:transform .4s var(--ease); padding-bottom:max(6px,env(safe-area-inset-bottom)); }
.callbar.on{ transform:none; }
.callbar a{ flex:1; padding:.95rem; text-align:center; font-family:var(--disp); font-weight:700; font-size:.82rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }
.callbar a:first-child{ background:var(--green); color:#fff; }
.callbar a:last-child{ background:var(--paper); color:var(--ink); }
.callbar svg{ width:15px; height:15px; }
@media (max-width:760px){ .callbar{ display:flex; } .ftr{ padding-bottom:calc(2rem + 60px + env(safe-area-inset-bottom)); } }

/* бутон „нагоре" — прозрачен кръг е цялата кликаема зона (и се вижда на всякакъв
   фон); вътре седи лапата (clip-path) с градиента, по-малка от кръга */
.totop{ position:fixed; right:1.5rem; bottom:1.5rem; z-index:56; width:58px; height:58px;
  border:none; padding:0; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7), 0 10px 22px -6px rgba(16,45,72,.5);
  opacity:0; transform:translateY(14px) scale(.75); pointer-events:none;
  transition:transform .35s var(--ease), opacity .3s, box-shadow .25s, background .25s; }
.totop.on{ opacity:1; transform:none; pointer-events:auto; }
.totop:hover{ background:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9), 0 16px 28px -8px rgba(16,45,72,.55); transform:translateY(-5px); }
.totop:active{ transform:translateY(-1px) scale(.97); }
.totop__paw{ position:relative; width:76%; height:76%; clip-path:url(#pawClip);
  background:linear-gradient(155deg,var(--green) 0%,var(--green-deep) 100%);
  transition:transform .3s var(--ease), background .25s; }
.totop:hover .totop__paw{ background:linear-gradient(155deg,var(--fresh) 0%,#9C241E 100%); transform:rotate(-8deg); }
.totop__arrow{ position:absolute; left:51.5%; top:68%; width:36%; height:36%;
  transform:translate(-50%,-50%); color:#fff; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); }
@media (max-width:760px){ .totop{ right:.7rem; bottom:calc(70px + env(safe-area-inset-bottom) + .3rem); width:44px; height:44px; } }
@media (prefers-reduced-motion:reduce){ .totop{ transition:opacity .2s; } .totop:hover,.totop:active{ transform:none; } .totop:hover .totop__paw{ transform:none; } }

/* ---------- банер за бисквитки ---------- */
/* .cookie е само позициониращ wrapper, БЕЗ overflow:hidden — иначе прасенцата,
   които трябва да надничат над горния ръб (както животните в лентите другаде),
   биха се отрязали от заоблянето на картата. Заобленият тъмен фон е отделно,
   във вложеното .cookie__card, което си има собствен overflow:hidden само за
   декоративните лапи вътре в него. */
/* скримът (пълна страница) е само за мобилно, където банерът заема голяма част
   от малкия екран — на десктоп разчитаме само на голямата мека сянка на
   .cookie__card по-долу, без да затъмняваме цялата страница. */
.cookie__scrim{ position:fixed; inset:0; z-index:78;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.cookie__scrim.on{ opacity:1; }
.cookie{
  position:fixed; z-index:79; left:1.3rem; bottom:1.3rem; width:380px; max-width:calc(100vw - 2.6rem);
  opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.cookie.on{ opacity:1; transform:none; pointer-events:auto; }
.cookie__pigs{ position:absolute; z-index:3; left:50%; top:0; transform:translate(-50%,-58%);
  width:168px; height:auto; filter:drop-shadow(0 14px 22px rgba(4,12,22,.55)); pointer-events:none; }
/* отделяне от шарения фон зад него — само чрез голяма мека сянка (без твърд
   ръб/рамка), с много слоеве за плавно заглъхване навън, както .sh-lg другаде */
.cookie__card{ position:relative; z-index:1; background:var(--green-deep); color:#CBD9E6;
  border-radius:var(--r-lg); overflow:hidden; padding:2.7rem 1.6rem 1.5rem;
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,
    0 14px 26px -10px rgba(4,12,22,.55),
    0 36px 60px -18px rgba(4,12,22,.5),
    0 80px 120px -28px rgba(4,12,22,.4); }
.cookie .paws svg{ color:#fff; opacity:.07; }
.cookie__body{ position:relative; z-index:2; text-align:center; }
.cookie .eyebrow{ color:var(--fresh); justify-content:center; margin-bottom:.6rem; }
.cookie__lead{ font-family:var(--disp); font-weight:800; font-size:1.2rem; color:#fff; letter-spacing:-.02em; margin:0 0 .5rem; }
.cookie__text{ font-size:.84rem; line-height:1.6; color:#9DB2C6; margin:0 0 1.3rem; }
.cookie__text a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.cookie__row{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.cookie__row .btn{ padding:.72rem 1.3rem; font-size:.84rem; flex:1 1 auto; }
@media (max-width:620px){
  .cookie{ left:.7rem; right:.7rem; width:auto; max-width:none; bottom:calc(70px + env(safe-area-inset-bottom) + .3rem); }
  .cookie__pigs{ width:136px; }
  .cookie__card{ padding:2.3rem 1.3rem 1.3rem; }
  .cookie__lead{ font-size:1.08rem; }
  .cookie__text{ font-size:.8rem; margin-bottom:1.1rem; }
  .cookie__scrim{ background:rgba(8,20,32,.42); }
}
@media (prefers-reduced-motion:reduce){ .cookie, .cookie__scrim{ transition:opacity .2s; } }

.prog{ position:fixed; top:0; left:0; height:3px; background:var(--fresh); z-index:80; transform:scaleX(0); transform-origin:left; width:100%; }

/* колона (не grid place-items) — капitулата расте естествено под снимката,
   с истински gap, вместо да е абсолютно залепена на фиксирано разстояние
   от долния ръб (при по-дълъг текст на 2 реда се застъпваше със снимката) */
.lb{ position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; overflow-y:auto; padding:clamp(1rem,3vw,3rem); background:rgba(16,45,72,.95); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.lb.on{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:70vh; object-fit:contain; border-radius:var(--r); flex:0 1 auto; }
.lb__cap{ flex:none; max-width:min(90vw,620px); text-align:center; padding:0 1rem; }
.lb__cap__title{ font-family:var(--mono); font-size:.66rem; text-transform:uppercase; color:#9DB2C6; }
/* краткото описание е по избор (само апаратурата го подава) — без него
   празният ред не заема място и не мести нищо */
.lb__cap__desc{ margin-top:.5rem; font-size:.84rem; line-height:1.55; color:#CBD9E6; }
.lb__cap__desc:empty{ display:none; }
.lb button{ position:absolute; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#fff; transition:background .2s; }
.lb button:hover{ background:rgba(255,255,255,.14); }
.lb__x{ top:1.2rem; right:1.2rem; }
.lb__p{ left:1.2rem; top:50%; margin-top:-24px; }
.lb__n{ right:1.2rem; top:50%; margin-top:-24px; }
.lb svg{ width:20px; height:20px; }
@media (max-width:560px){ .lb__p,.lb__n{ top:auto; bottom:4rem; margin-top:0; } .lb__p{ left:24% } .lb__n{ right:24% } }

/* ---------- reveal ---------- */
[data-rv]{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:var(--d,0ms); }
[data-rv].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-rv]{ opacity:1 !important; transform:none !important; }
  .u svg path{ stroke-dashoffset:0 !important; }
}