/* @fonts:start */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(fraunces-latinext-italic.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;src:url(fraunces-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fraunces-latinext-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fraunces-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Albert Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url(albert-sans-latinext-italic.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Albert Sans';font-style:italic;font-weight:100 900;font-display:swap;src:url(albert-sans-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(albert-sans-latinext-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Albert Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(albert-sans-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Shantell Sans';font-style:italic;font-weight:300 800;font-display:swap;src:url(shantell-sans-latinext-italic.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Shantell Sans';font-style:italic;font-weight:300 800;font-display:swap;src:url(shantell-sans-latin-italic.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Shantell Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(shantell-sans-latinext-normal.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Shantell Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url(shantell-sans-latin-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* @fonts:end */

/* z Kociego Domu*PL — „koci dom”: portret nad kominkiem, portrety kotów na ścianach, wieczór przy kominku.
   Wrzos = kolor marki (akcenty), błękit = kolor oczu nevy (druga barwa), wzory w tle = kropki, kratka, koty, łapki. */
/* @tokens:start */
:root{
  --paper:#faf7f3;
  --ink:#2a2030;
  --ink-2:#5b4e62;
  --heather:#7b4b8f;
  --heather-d:#4a2c5a;
  --heather-l:#c9a6d6;
  --mist:#f1e9f3;
  --sky:#e4eef7;
  --blue:#3c6a97;
  --blue-l:#9cc3e4;
  --candle:#d99a4e;
  --night:#241b2b;
  --card:#ffffff;
  --line:#e7dfe6;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Albert Sans',system-ui,sans-serif;
  --hand:'Shantell Sans','Comic Sans MS',cursive;
  --max:1240px;
  --gut:clamp(16px,4.5vw,56px);
  --pad:max(var(--gut),calc((100% - var(--max))/2));
  --r:16px;
  /* wzory tła */
  --dots:radial-gradient(circle,rgba(123,75,143,.17) 1.3px,transparent 1.8px) 0 0/24px 24px;
  --dots-blue:radial-gradient(circle,rgba(60,106,151,.2) 1.3px,transparent 1.8px) 0 0/22px 22px;
  --check:linear-gradient(rgba(123,75,143,.055) 50%,transparent 50%) 0 0/34px 34px,linear-gradient(90deg,rgba(123,75,143,.055) 50%,transparent 50%) 0 0/34px 34px;
  --grid-blue:linear-gradient(rgba(60,106,151,.1) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(60,106,151,.1) 1px,transparent 1px) 0 0/28px 28px;
  --cats:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='%237b4b8f' fill-opacity='.075'%3E%3Cpath transform='translate(16 14) scale(.3)' d='M41 30 37 5l13 13c5-2 11-2 16 0L79 5l-3 26c4 6 4 15-1 21 12 8 22 26 22 52 0 18-4 32-10 38H35c-10-4-16-14-16-27 0-20 9-37 19-44-4-6-5-14-2-21zM35 142c-14 0-25-6-25-18 0-9 7-13 13-11-5 3-6 7-5 11 2 7 9 10 17 10z'/%3E%3Cg transform='translate(96 92) rotate(18) scale(.75)'%3E%3Cellipse cx='16' cy='22' rx='8' ry='7'/%3E%3Cellipse cx='6' cy='12' rx='3' ry='4'/%3E%3Cellipse cx='12' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='20' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='26' cy='12' rx='3' ry='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/150px 150px;
  --paws-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' fill-opacity='.06'%3E%3Cg transform='translate(14 18) rotate(-20)'%3E%3Cellipse cx='16' cy='22' rx='8' ry='7'/%3E%3Cellipse cx='6' cy='12' rx='3' ry='4'/%3E%3Cellipse cx='12' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='20' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='26' cy='12' rx='3' ry='4'/%3E%3C/g%3E%3Cg transform='translate(70 66) rotate(16)'%3E%3Cellipse cx='16' cy='22' rx='8' ry='7'/%3E%3Cellipse cx='6' cy='12' rx='3' ry='4'/%3E%3Cellipse cx='12' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='20' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='26' cy='12' rx='3' ry='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 0 0/120px 120px;
}
/* @tokens:end */

html{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:clamp(16px,.35vw + 15px,17.5px);line-height:1.6;scroll-padding-top:84px}
body{background:var(--paper);overflow-x:clip;--grain:.07}
a{color:var(--heather);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--heather-d)}
em{font-style:italic}
b{font-weight:650}
::selection{background:var(--heather);color:#fff}
.ic{width:1.15em;height:1.15em;flex:none}

/* ---------- typografia ---------- */
.h2,.h3,.hero h1,.brand,.m-word,.foot-brand,.lit-letter,.big-tel,.year-n{font-variation-settings:"SOFT" 100,"WONK" 1}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.h3{font-family:var(--serif);font-weight:560;font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.12;letter-spacing:-.01em}
.h4{font-family:var(--sans);font-weight:700;font-size:1rem;margin-bottom:.35rem}
.h5{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--heather-l);margin-bottom:.6rem}
.en{font-family:var(--serif);font-style:italic;font-weight:400;font-size:.4em;color:var(--blue);margin-left:.35em;letter-spacing:0;white-space:nowrap}
.lead{color:var(--ink-2);font-size:1.08rem;max-width:62ch}
.note{color:var(--ink-2);font-size:.85rem;margin-top:1rem}
.hand{font-family:var(--hand);font-weight:500;color:var(--heather);font-size:1.05rem;line-height:1.3}
.hint{display:inline-flex;align-items:center;gap:.4em;rotate:-1.5deg;width:fit-content}
.hint::after{content:"";width:34px;height:20px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cpath d='M2 4c9 12 19 14 28 9m0 0-6-1m6 1-2 5' fill='none' stroke='%237b4b8f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}
.hint-center{display:flex;margin:1.4rem auto 0}

/* ---------- przyciski ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.75em 1.4em;border-radius:999px;font-weight:650;font-size:.98rem;text-decoration:none;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s;cursor:pointer;font-family:var(--sans)}
.btn-main{background:var(--heather);color:#fff}
.btn-main:hover{background:var(--heather-d);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-light{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn-light:hover{background:#fff;color:var(--night)}

/* ---------- ekran ładowania ---------- */
.loader{position:fixed;inset:0;z-index:300;place-items:center;background:var(--dots),var(--paper)}
.loader-in{display:grid;justify-items:center;gap:.2rem;text-align:center}
.loader-cat{width:118px;height:148px;overflow:visible}
.loader .cat-bg{fill:var(--mist)}
.loader .cat-fill{fill:var(--heather);transform-box:fill-box;transform:translateY(calc((1 - var(--p,0)) * 100%));transition:transform .2s linear}
.loader .cat-line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.loader .cat-eye{fill:var(--blue-l);stroke:var(--ink);stroke-width:1.2}
.loader-n{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-weight:600;font-size:clamp(3rem,10vw,4.6rem);line-height:1;margin-top:.8rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.loader-t{margin-top:.2rem}
.loader-paws{display:flex;gap:14px;margin-top:.9rem}
.loader-paws svg{width:22px;height:22px;fill:var(--heather);opacity:0;scale:.4;transition:opacity .3s,scale .4s cubic-bezier(.3,1.6,.5,1)}
.loader-paws svg:nth-child(even){translate:0 -8px;rotate:12deg}
.loader-paws svg:nth-child(odd){rotate:-10deg}
.loader-paws svg.on{opacity:1;scale:1}

/* ---------- pasek postępu ---------- */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--heather),var(--blue-l));transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}

/* ---------- nagłówek ---------- */
.head{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:.8rem;padding:14px var(--gut);transition:background .3s,box-shadow .3s,translate .4s}
.head.is-scrolled{background:rgba(250,247,243,.94);box-shadow:0 1px 0 var(--line);backdrop-filter:blur(8px)}
.head.is-hidden{translate:0 -110%}
.brand{font-family:var(--serif);font-style:italic;font-weight:560;font-size:1.5rem;color:var(--ink);text-decoration:none;line-height:1;white-space:nowrap;margin-right:auto;padding:.35em 0}
.brand-z{font-weight:400}
.brand-ast{color:var(--heather);font-style:normal;margin-left:.04em}
.brand-pl{font-family:var(--sans);font-style:normal;font-size:.48em;font-weight:700;letter-spacing:.06em;vertical-align:.6em;color:var(--blue)}
.nav{display:flex;gap:clamp(.7rem,1.25vw,1.35rem)}
.nav a{color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:550;padding:.3em 0;border-bottom:1.5px solid transparent}
.nav a:hover,.nav a[aria-current]{border-color:var(--heather);color:var(--ink)}
.nav .nav-tel{display:none}
.lang{display:inline-grid;place-items:center;min-width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.04em}
.lang:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.head-call{display:inline-flex;align-items:center;gap:.45em;background:var(--heather);color:#fff;text-decoration:none;font-weight:650;font-size:.92rem;padding:.6em 1.05em;border-radius:999px;white-space:nowrap;min-height:44px}
.head-call:hover{background:var(--heather-d);color:#fff}
.head-call svg{width:16px;height:16px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);position:relative;cursor:pointer}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);transition:transform .3s}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1219px){
  .burger{display:block}
  .nav{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:.1rem;padding:90px var(--gut) 40px;background:var(--dots),var(--paper);visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s;overflow-y:auto}
  .nav.is-open{visibility:visible;opacity:1}
  .nav a{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:clamp(1.9rem,7vw,2.6rem);font-weight:450;line-height:1.2;border:0}
  .nav .nav-tel{display:inline-block;margin-top:1rem;font-family:var(--sans);font-size:1.05rem;font-weight:650;color:var(--heather)}
}
@media (max-width:520px){.head-call span{display:none}.head-call{padding:.7em}.brand{font-size:1.28rem}.lang{min-width:40px;height:40px}.head{gap:.5rem}}

/* ---------- hero: portret nad kominkiem ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(28px,5vw,80px);min-height:100svh;padding:clamp(110px,14vh,150px) var(--pad) clamp(40px,6vh,70px)}
.hero h1{font-family:var(--serif);font-weight:440;font-size:clamp(2.6rem,5.2vw,5rem);line-height:1.02;letter-spacing:-.025em;text-wrap:balance}
.hero h1 em{color:var(--heather);font-weight:400}
.hero-lead{margin-top:1.4rem;font-size:clamp(1.05rem,1.2vw,1.2rem);color:var(--ink-2);max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,3vw,2.6rem);margin-top:clamp(2rem,5vh,3.4rem);padding-top:1.2rem;border-top:1px dashed var(--heather-l)}
.hero-facts dt{font-size:.82rem;color:var(--ink-2)}
.hero-facts dd{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:clamp(1.7rem,2.4vw,2.2rem);font-weight:560;line-height:1.1}

.scene{position:relative;width:min(100%,500px);justify-self:center;margin-top:clamp(40px,7vw,90px)}
.mirror{position:relative;aspect-ratio:1339/1600;container-type:inline-size}
.m-arch{position:absolute;inset:11% 0 0;overflow:hidden;border-radius:50% 50% 12px 12px/30% 30% 12px 12px;background:#1f2a1c;outline:1.5px solid var(--ink);outline-offset:9px}
.m-bg{position:absolute;left:0;top:-12.36%;width:100%;height:112.36%;max-width:none;object-fit:cover}
.m-word{position:absolute;left:-14%;right:-14%;top:-8.5%;z-index:2;text-align:center;font-family:var(--serif);font-style:italic;font-weight:420;color:var(--heather);line-height:1;white-space:nowrap;pointer-events:none;font-size:14.6cqi;letter-spacing:-.02em}
.m-word-in{display:inline-block}
.m-big{font-weight:520}
.m-ast{font-style:normal;color:var(--blue-l);font-size:.6em;vertical-align:.7em;margin-left:.04em}
.m-cut{position:absolute;inset:0;z-index:3;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none}
.mantel{position:relative;z-index:4;display:block;width:128%;max-width:none;margin:-33.6% -14% 0;height:auto;overflow:visible}
.mantel .shelf,.contact-candles .shelf{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.mantel .candle rect,.mantel .candle path:not(.flame):not(.wick){fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.mantel .wick{fill:none;stroke:var(--ink);stroke-width:1.5}
.flame{fill:var(--candle);transform-box:fill-box;transform-origin:50% 100%;animation:flame 2.6s ease-in-out infinite alternate}
.candle-r .flame,.contact-candles .candle:nth-child(2) .flame{animation-duration:3.1s;animation-delay:-1.2s}
.contact-candles .candle:nth-child(3) .flame{animation-duration:2.2s;animation-delay:-.6s}
@keyframes flame{0%{transform:scale(1,1) rotate(-2deg)}50%{transform:scale(.94,1.06) rotate(1.5deg)}100%{transform:scale(1.03,.95) rotate(-1deg)}}
.scene-note{position:absolute;right:-4%;bottom:-2.6rem;rotate:-3deg;font-size:1rem}
.scene-note::before{content:"";position:absolute;left:-40px;top:-22px;width:34px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M32 24C22 22 10 16 4 4m0 0 0 7m0-7 7 2' fill='none' stroke='%237b4b8f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain}

/* ---------- sekcje: wspólne ---------- */
.sec{position:relative;padding:clamp(76px,10vw,140px) var(--pad)}
.sec-head{display:grid;gap:1rem;margin-bottom:clamp(30px,4.5vw,56px)}
.sec-head-c{justify-items:center;text-align:center}
/* falbanka z łuków na górze sekcji (jak brzeg markizy / rząd okien) */
.scallop::before{content:"";position:absolute;left:0;right:0;top:-17px;height:18px;background:radial-gradient(circle at 50% 100%,var(--bgc) 12px,transparent 12.6px) 0 0/28px 18px repeat-x;pointer-events:none}

/* ---------- kocięta: zdjęcia przypięte do ściany ---------- */
.kocieta{background:var(--dots),var(--paper)}
.kit-wrap{display:grid;gap:clamp(22px,3vw,44px)}
.kit-wrap.is-recent{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:14px}
.recent{position:relative;rotate:-2deg;transition:rotate .45s cubic-bezier(.2,.8,.2,1),translate .45s}
.recent:nth-child(2){rotate:1.6deg;margin-top:22px}
.recent:nth-child(3){rotate:-.8deg}
.recent:hover{rotate:0deg;translate:0 -6px}
.recent::before{content:"";position:absolute;z-index:2;left:50%;top:-12px;width:96px;height:24px;translate:-50% 0;rotate:-3deg;background:rgba(156,195,228,.62);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.recent:nth-child(2)::before{background:rgba(201,166,214,.7);rotate:4deg}
.recent-btn{position:relative;display:block;width:100%;padding:12px 12px 0;border:0;background:#fff;box-shadow:0 18px 40px -22px rgba(42,32,48,.5);cursor:zoom-in;text-align:left;font:inherit;color:inherit}
.recent-img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.recent-cap{display:block;padding:.75rem .3rem .9rem;font-family:var(--hand);font-size:1.12rem;color:var(--ink)}
.recent-cap small{font-family:var(--sans);font-size:.82rem;color:var(--ink-2);margin-left:.4em}
.recent-par{margin-top:.9rem;font-size:.95rem;color:var(--ink-2);padding:0 .3rem}
.ph-pill{position:absolute;left:24px;top:24px;display:inline-flex;align-items:center;gap:.45em;padding:.4em .85em;border-radius:999px;background:rgba(36,27,43,.78);color:#fff;font-size:.84rem;font-weight:650;backdrop-filter:blur(4px);transition:background .25s,scale .3s}
.recent-btn:hover .ph-pill,.card-ph:hover .ph-pill,.strip:hover .ph-pill{background:var(--heather);scale:1.05}
.now{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,40px);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,2vw,22px)}
.now-ph{position:relative;display:block;padding:0;border:0;background:none;cursor:zoom-in}
.now-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.now-sym{color:var(--heather);font-weight:650}
.now h3{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:520;line-height:1.1}
.now h3 span{color:var(--heather)}
.now-date{color:var(--ink-2);margin:.3rem 0 .8rem}
.kits{display:grid;gap:.45rem;margin:1rem 0}
.kit{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem;padding:.55rem 0;border-top:1px solid var(--line)}
.kit-name{font-weight:650;min-width:7ch}.kit-meta{color:var(--ink-2);font-size:.9rem;margin-right:auto}
.statuses{margin-top:clamp(56px,7vw,90px);background:var(--card);border-radius:var(--r);padding:clamp(22px,3vw,36px);border:1px solid var(--line);max-width:900px}
.statuses dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;margin-top:1.1rem}
.statuses dl>div{display:grid;gap:.4rem;align-content:start}
.statuses dd{color:var(--ink-2);font-size:.95rem}
.st{display:inline-block;font-size:.78rem;font-weight:700;line-height:1.2;padding:.36em .85em;border-radius:999px;white-space:nowrap}
.st-wolny{background:var(--heather);color:#fff}
.st-obserwacja{background:var(--sky);color:var(--blue)}
.st-wstepna{background:#f6e7d3;color:#6e4313}
.st-rezerwacja{background:#ebe7ea;color:var(--ink-2)}

/* ---------- jak kupić: ścieżka łapek ---------- */
.buy{--bgc:var(--mist);background:var(--cats),var(--mist)}
.steps{list-style:none;padding:0;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.steps::before{content:"";position:absolute;left:28px;right:12%;top:27px;border-top:2px dashed var(--heather-l)}
.steps li{position:relative;display:grid;gap:.4rem;align-content:start}
.step-paw{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);margin-bottom:.7rem;position:relative;z-index:1}
.step-paw svg{width:26px;height:26px;fill:var(--heather)}
.steps li:nth-child(even) .step-paw svg{fill:var(--blue);rotate:14deg}
.steps li:nth-child(odd) .step-paw svg{rotate:-10deg}
.steps b{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.3rem;font-weight:560;line-height:1.15}
.steps span{color:var(--ink-2);font-size:.95rem}
.buy-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);margin-top:clamp(56px,7vw,90px);align-items:start}
.layette{background:var(--card);border-radius:var(--r);padding:clamp(22px,3vw,34px);rotate:-1deg;box-shadow:0 18px 40px -26px rgba(42,32,48,.45)}
.layette ul,.breed ul,.foot-cols ul,.creds{list-style:none;padding:0}
.layette ul{margin-top:1rem;display:grid;gap:.55rem}
.layette li{padding-left:1.7rem;position:relative}
.layette li::before{content:"";position:absolute;left:0;top:.28em;width:1.05rem;height:1.05rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%237b4b8f'%3E%3Cellipse cx='16' cy='21' rx='8' ry='7'/%3E%3Cellipse cx='6' cy='12' rx='3' ry='4'/%3E%3Cellipse cx='12' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='20' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='26' cy='12' rx='3' ry='4'/%3E%3C/svg%3E") no-repeat center/contain}
.layette-note{margin-top:1.2rem;rotate:-1.5deg}
.faq h3{margin-bottom:.8rem}
.faq details,.codes{border-top:1px solid rgba(42,32,48,.14)}
.faq details:last-child{border-bottom:1px solid rgba(42,32,48,.14)}
.faq summary,.codes summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem 0;cursor:pointer;font-weight:650;font-size:1.04rem}
.faq details>div{padding:0 0 1.2rem;color:var(--ink-2);display:grid;gap:.6rem;max-width:70ch}
.pm{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--ink);translate:-50% -50%;transition:rotate .3s}
.pm::after{rotate:90deg}
details[open]>summary .pm::after{rotate:0deg}

/* ---------- opinie: ciemny wrzos ---------- */
.opinie{background:var(--paws-light),var(--heather-d);color:#fff}
.opinie .h2{color:#fff}
.opinie .note{color:#d9c8e0}
.ops{columns:3 280px;column-gap:clamp(18px,2.5vw,32px);margin-top:clamp(28px,4vw,48px)}
.op{break-inside:avoid;margin:0 0 clamp(18px,2.5vw,32px);padding:1.5rem 1.5rem 1.3rem;background:var(--paper);color:var(--ink);border-radius:var(--r);position:relative}
.op:nth-child(3n+1){rotate:-.8deg}.op:nth-child(3n+2){rotate:.7deg}
.op::before{content:"„";position:absolute;right:16px;top:-6px;font-family:var(--serif);font-size:4.6rem;line-height:1;color:var(--heather-l)}
.op blockquote p{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.22rem;line-height:1.4;font-weight:400}
.op figcaption{margin-top:.8rem;font-family:var(--hand);font-size:.98rem;color:var(--heather)}

/* ---------- o nas: obrus w kratkę ---------- */
.dom{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,6vw,96px);align-items:center;background:var(--check),var(--paper)}
.odi{margin:0;position:relative}
.odi-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:50% 50% 14px 14px/34% 34% 14px 14px;overflow:hidden;outline:1.5px solid var(--ink);outline-offset:8px}
.odi-img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:scale .6s}
.odi-btn:hover .odi-img{scale:1.04}
.odi figcaption{margin-top:1.4rem;color:var(--ink-2);display:grid;gap:.2rem}
.odi figcaption .hand{rotate:-2deg;width:fit-content}
.dom-txt{display:grid;gap:1.1rem}
.dom-txt p{max-width:60ch}
.creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1rem}
.creds li{display:grid;gap:.25rem;padding:1rem 1.1rem;background:var(--card);border-radius:14px;border:1px solid var(--line);color:var(--ink-2);font-size:.93rem}
.creds b{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.3rem;font-weight:560;color:var(--heather)}
.creds li:nth-child(even) b{color:var(--blue)}

/* ---------- o rasie: błękit oczu nevy ---------- */
.rasa{--bgc:var(--sky);background:var(--dots-blue),var(--sky)}
.rasa .h2{color:var(--ink)}
.breeds{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start}
.vs{align-self:center;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);font-family:var(--serif);font-style:italic;font-size:1.4rem;color:var(--blue);margin-top:-30%}
.breed{background:var(--card);border-radius:var(--r);padding:12px 12px 22px;box-shadow:0 18px 40px -28px rgba(42,32,48,.5)}
.breed-ph{border-radius:12px;overflow:hidden;margin-bottom:1.1rem}
.breed-img{width:100%;aspect-ratio:3/2;object-fit:cover}
.breed h3,.breed ul{padding:0 .6rem}
.breed ul{display:grid;gap:.6rem;margin-top:.8rem}
.breed li{padding-left:1.3rem;position:relative;color:var(--ink-2)}
.breed li::before{content:"";position:absolute;left:0;top:.68em;width:.7rem;height:2px;border-radius:2px;background:var(--blue)}
.breed:last-child li::before{background:var(--heather)}
.traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);margin-top:clamp(40px,6vw,72px);padding-top:clamp(24px,3vw,36px);border-top:1.5px solid var(--ink)}
.traits p{color:var(--ink-2);font-size:.97rem}
.decoder{margin-top:clamp(44px,6vw,72px);background:var(--card);border-radius:var(--r);padding:clamp(22px,3vw,38px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.2rem clamp(24px,4vw,56px);border:1.5px solid var(--ink)}
.dec-head p{color:var(--ink-2);margin-top:.6rem}
.dec-box{display:grid;gap:.8rem;align-content:start}
.dec-in{width:100%;min-height:56px;padding:.6rem 1rem;border:1.5px solid var(--ink);border-radius:12px;background:var(--paper);font:600 1.4rem/1 ui-monospace,"Cascadia Mono",Consolas,monospace;letter-spacing:.06em;color:var(--ink)}
.dec-in:focus{outline:2px solid var(--blue);outline-offset:2px}
.dec-out{display:block;min-height:3.2em;padding:.8rem 1rem;border-radius:12px;background:var(--sky);color:var(--ink);font-weight:600;line-height:1.4}
.dec-ex{display:flex;flex-wrap:wrap;gap:.45rem}
.dec-ex button{min-height:40px;padding:.3em .9em;border-radius:999px;border:1.5px dashed var(--blue);background:transparent;color:var(--blue);font:600 .85rem ui-monospace,Consolas,monospace;cursor:pointer}
.dec-ex button:hover{background:var(--blue);color:#fff;border-style:solid}
.codes{grid-column:1/-1;border-bottom:1px solid rgba(42,32,48,.14)}
.codes-in{padding-bottom:1.4rem}
.codes-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem}
.codes-grid dt{font-weight:700;margin-bottom:.4rem}
.codes-grid dd{font-size:.92rem;color:var(--ink-2);padding:.15rem 0}
.codes-grid dd b{display:inline-block;min-width:2.4em;color:var(--blue)}

/* ---------- koty: portrety w łukowych ramach (siatka w dół) ---------- */
.cats{background:var(--cats),var(--paper)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(30px,3.6vw,52px) clamp(18px,2.6vw,36px);align-items:start}
.card{display:grid;justify-items:center;text-align:center}
.card-ph{position:relative;display:block;width:100%;padding:0;border:0;background:var(--mist);border-radius:50% 50% 14px 14px/30% 30% 14px 14px;overflow:hidden;outline:1.5px solid var(--ink);outline-offset:7px;cursor:zoom-in}
.card-img{width:100%;aspect-ratio:5/6;object-fit:cover;transition:scale .6s cubic-bezier(.2,.8,.2,1)}
.card-ph:hover .card-img{scale:1.05}
.card-ph .ph-pill{left:50%;top:auto;bottom:14px;translate:-50% 0;white-space:nowrap}
.card-ph:hover .ph-pill{translate:-50% 0}
.card-body{margin-top:-14px;position:relative;z-index:1;width:calc(100% - 28px);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem 1.05rem;display:grid;gap:.2rem;box-shadow:0 12px 30px -24px rgba(42,32,48,.6)}
.card-name{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:540;font-size:1.45rem;line-height:1.12}
.card-meta{color:var(--ink-2);font-size:.9rem}
.card-color{font:600 .82rem ui-monospace,Consolas,monospace;letter-spacing:.03em;color:var(--blue)}
.card-status{font-family:var(--hand);font-size:.95rem;color:var(--heather)}
.card-more{margin-top:.5rem;border-top:1px dashed var(--line);text-align:left}
.card-more summary{padding:.6rem 0 .1rem;font-size:.88rem;font-weight:650;color:var(--heather);cursor:pointer;text-align:center}
.card-more summary::after{content:" +"}
.card-more[open] summary::after{content:" −"}
.card-more dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;padding:.6rem 0 .2rem;font-size:.84rem}
.card-more dt{color:var(--ink-2)}
.males{--bgc:var(--sky);background:var(--grid-blue),var(--sky)}
.males .card-ph{background:#d3e3f1}
.males .card-name{color:var(--ink)}
/* seniorzy: owalne medaliony */
.seniors{background:var(--dots),var(--paper)}
.grid-sen{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr))}
.seniors .card-ph{border-radius:50%;aspect-ratio:1;outline-offset:6px;outline-style:double;outline-width:4px;outline-color:var(--heather-l)}
.seniors .card-img{aspect-ratio:1}
.seniors .card-ph .ph-pill{bottom:10%;font-size:.76rem}
.seniors .card-body{margin-top:.9rem;background:none;border:0;box-shadow:none;padding:0;width:100%}
.seniors .card-name{font-size:1.2rem}
.js .seniors:not(.is-open) .card.is-more{display:none}
.more-wrap{margin-top:clamp(28px,3vw,44px);text-align:center}
html:not(.js) .more-wrap{display:none}

/* ---------- pas alfabetu ---------- */
.abc{background:var(--heather);color:#fff;padding:1.1rem 0;overflow:hidden;--marquee-gap:0px}
.abc-in{display:flex;align-items:center;gap:1.6rem;padding-right:1.6rem;white-space:nowrap}
.abc-in span{font-family:var(--serif);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic;font-weight:420;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1}
.abc-in span:nth-child(4n+1){color:var(--blue-l)}
.abc-in svg{width:22px;height:22px;fill:var(--heather-l);flex:none}

/* ---------- mioty ---------- */
.litters{--bgc:var(--mist);background:var(--cats),var(--mist)}
.years{border-top:1.5px solid var(--ink)}
.year{border-bottom:1px solid #d9cede}
.year>summary{display:flex;align-items:baseline;gap:1rem;padding:1.1rem 0;cursor:pointer}
.year-n{font-family:var(--serif);font-size:clamp(2rem,3.6vw,2.9rem);font-weight:520;line-height:1;transition:color .25s}
.year>summary:hover .year-n{color:var(--heather)}
.year-c{color:var(--ink-2);font-size:.95rem;margin-right:auto}
.year-ic{position:relative;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);flex:none;align-self:center;background:var(--paper)}
.year-ic::before,.year-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);translate:-50% -50%;transition:rotate .3s}
.year-ic::after{rotate:90deg}
.year[open] .year-ic::after{rotate:0deg}
.lits{list-style:none;padding:0 0 1.4rem;display:grid;gap:.7rem}
.lit{display:grid;grid-template-columns:4.6rem minmax(0,1fr) minmax(0,auto);align-items:center;gap:.8rem 1.4rem;padding:.9rem 1.1rem;background:rgba(255,255,255,.7);border:1px solid #e2d7e5;border-radius:14px;transition:background .25s,border-color .25s,translate .25s}
.lit:hover{background:#fff;border-color:var(--heather-l);translate:4px 0}
.lit-letter{font-family:var(--serif);font-style:italic;font-weight:500;font-size:3.4rem;line-height:.9;color:var(--heather)}
.lit-letter sub{font-family:var(--sans);font-style:normal;font-size:.85rem;font-weight:700;vertical-align:baseline;margin-left:.1em;color:var(--blue)}
.lit-txt h4{font-weight:700;font-size:1.02rem}
.lit-date{font-size:.88rem;color:var(--ink-2)}
.lit-par{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.1rem;line-height:1.25}
.lit-note{font-size:.86rem;color:var(--ink-2)}
.strip{position:relative;display:flex;align-items:center;gap:6px;padding:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit}
.strip img{width:5.4rem;height:4.2rem;object-fit:cover;border-radius:8px;background:#e2d7e5;transition:translate .3s}
.strip img:nth-child(2){translate:0 -3px}
.strip:hover img{translate:0 -4px}
.strip:hover img:nth-child(2){translate:0 -7px}
.strip-go{display:inline-flex;align-items:center;gap:.4em;margin-left:.5rem;min-height:44px;padding:.35em 1em;border-radius:999px;background:var(--ink);color:#fff;font-weight:650;font-size:.86rem;white-space:nowrap;transition:background .25s}
.strip:hover .strip-go{background:var(--heather)}
.strip-go small{font-weight:500;color:#d9c8e0;font-size:.8rem}
.lit-none{font-size:.88rem;color:var(--ink-2);font-style:italic}

/* ---------- psy ---------- */
.dogs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:center;background:var(--check),var(--paper)}
.dogs-txt{display:grid;gap:1.1rem}
.dogs-txt p{max-width:52ch;color:var(--ink-2)}
.dogs-txt .hand{color:var(--blue);rotate:-2deg;width:fit-content}
.dogs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dog{display:block;padding:7px;border:0;background:#fff;box-shadow:0 12px 26px -18px rgba(42,32,48,.55);cursor:zoom-in;transition:rotate .35s,translate .35s}
.dog:nth-child(odd){rotate:-2deg}.dog:nth-child(even){rotate:1.6deg}
.dog:hover{rotate:0deg;translate:0 -4px}
.dog-img{width:100%;aspect-ratio:1;object-fit:cover}

/* ---------- kontakt: wieczór przy kominku ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,6vw,96px);align-items:start;color:#efe8f1;
  background:radial-gradient(60% 70% at 88% 100%,rgba(217,154,78,.24),transparent 70%),radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/26px 26px,var(--night);overflow:hidden}
.contact .h2{color:#fff}
.contact .lead,.contact .note{color:#cfc2d6}
.contact-main{display:grid;gap:1rem;position:relative;z-index:1}
.big-tel{font-family:var(--serif);font-weight:540;font-size:clamp(3.2rem,9vw,7.2rem);line-height:1;color:#fff;text-decoration:none;letter-spacing:-.02em;white-space:nowrap;width:fit-content}
.big-tel:hover{color:var(--candle)}
.mail a{color:var(--blue-l);font-size:clamp(1.1rem,2vw,1.4rem);font-weight:650;word-break:break-all;display:inline-block;padding:.35em 0}
.contact-side{display:grid;gap:1.3rem;padding-top:.6rem;position:relative;z-index:1}
.contact address{font-style:normal;font-size:1.1rem;line-height:1.5;color:#fff}
.contact a:not(.btn):not(.big-tel){color:var(--blue-l)}
.contact .h4{color:#fff}
.hours{border-collapse:collapse;font-size:.95rem}
.hours th{font-weight:400;text-align:left;padding:.25rem 1.4rem .25rem 0;color:#cfc2d6}
.hours td{font-variant-numeric:tabular-nums;font-weight:650;color:#fff}
.contact-candles{position:absolute;right:clamp(10px,4vw,70px);bottom:0;width:clamp(150px,18vw,230px);height:auto;opacity:.95}
.contact-candles rect{fill:#3a2d42;stroke:#d9c8e0;stroke-width:1.5}
.contact-candles .shelf{stroke:#d9c8e0}

/* ---------- stopka ---------- */
.foot{background:#1b1420;color:#e9e2ea;padding:clamp(48px,7vw,90px) var(--pad) 110px}
.foot a{color:#e9e2ea}
.foot a:hover{color:#fff}
.foot-brand{font-family:var(--serif);font-style:italic;font-size:clamp(2rem,4vw,3rem);font-weight:480;line-height:1;color:#fff}
.foot-brand .brand-ast{color:var(--blue-l)}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:2.4rem}
.foot-cols ul{display:grid;font-size:.92rem}
.foot-cols a{display:inline-block;padding:.4em 0}
.foot-copy{margin-top:3rem;font-size:.82rem;color:#b8acbb}

/* ---------- łapki przy przewijaniu ---------- */
main{position:relative}
.trail{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.paw{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;fill:var(--heather);opacity:0;scale:.3;transition:opacity .5s,scale .5s cubic-bezier(.3,1.5,.5,1)}
.paw.on{opacity:.38;scale:1}
.paw.blue{fill:var(--blue)}
.on-dark .paw,.paw.light{fill:#fff}

/* ---------- pasek „Zadzwoń” (telefon) ---------- */
.callbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;justify-content:center;align-items:center;min-height:52px;border-radius:999px;background:var(--heather);color:#fff;font-weight:700;text-decoration:none;box-shadow:0 10px 30px -10px rgba(42,32,48,.5);transition:transform .35s,opacity .35s}
.callbar:hover{color:#fff;background:var(--heather-d)}
@media (min-width:900px){.callbar{display:none}}

/* ---------- galeria (okno) ---------- */
html.lb-open{overflow:hidden}
.lb{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:rgba(24,17,28,.97);color:#f3eef4}
.lb::backdrop{background:rgba(24,17,28,.6)}
.lb[open]{display:flex;flex-direction:column}
.lb-top{display:flex;align-items:center;gap:1rem;padding:14px var(--gut);border-bottom:1px solid rgba(255,255,255,.1)}
.lb-title{font-family:var(--serif);font-style:italic;font-size:1.6rem;font-weight:480;margin-right:auto;line-height:1.1}
.lb-count{font-size:.9rem;color:#c9bccc;font-variant-numeric:tabular-nums}
.lb-x{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:none;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.lb-x:hover{background:#fff;color:var(--ink)}
.lb-grid{flex:1;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:16px var(--gut) 40px;align-content:start}
.lb-grid button{display:block;padding:0;border:0;background:#2c2231;border-radius:8px;overflow:hidden;cursor:zoom-in}
.lb-grid img{width:100%;aspect-ratio:1;object-fit:cover;transition:scale .4s}
.lb-grid button:hover img{scale:1.06}
.lb-grid button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-view{flex:1;position:relative;display:flex;align-items:center;justify-content:center;margin:0;padding:12px 64px 64px;min-height:0;touch-action:pan-y}
.lb-view[hidden],.lb-grid[hidden]{display:none}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;user-select:none}
.lb-prev,.lb-next{position:absolute;top:50%;translate:0 -50%;width:52px;height:52px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:rgba(24,17,28,.5);color:#fff;font-size:2rem;line-height:1;cursor:pointer}
.lb-prev{left:8px}.lb-next{right:8px}
.lb-prev:hover,.lb-next:hover{background:#fff;color:var(--ink)}
.lb-back{position:absolute;left:50%;bottom:12px;translate:-50% 0;min-height:42px;padding:.4em 1.2em;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);background:none;color:#fff;font-weight:650;cursor:pointer}
.lb-back:hover{background:#fff;color:var(--ink)}
@media (max-width:640px){.lb-view{padding:8px 8px 70px}.lb-prev,.lb-next{top:auto;bottom:10px;translate:none;width:46px;height:46px}.lb-grid{grid-template-columns:repeat(3,1fr);gap:4px;padding:8px}}

/* ---------- tablet i telefon ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:0;padding-top:110px;gap:0}
  .scene{width:min(78vw,420px);margin-top:clamp(70px,16vw,110px);margin-bottom:2.6rem}
  .scene-note{right:auto;left:50%;translate:-10% 0}
  .kit-wrap.is-recent{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kit-wrap.is-recent>:nth-child(3){display:none}
  .now{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
  .steps::before{display:none}
  .buy-grid,.dom,.dogs,.contact{grid-template-columns:1fr}
  .breeds{grid-template-columns:1fr}
  .vs{margin:-10px auto;justify-self:center}
  .dom .odi{max-width:340px}
  .traits{grid-template-columns:1fr}
  .decoder{grid-template-columns:1fr}
  .codes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols{grid-template-columns:1fr}
  .contact-candles{width:120px;opacity:.5}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(2.3rem,10.5vw,3.1rem)}
  .hero-cta .btn{flex:1 1 100%}
  .kit-wrap.is-recent{grid-template-columns:1fr;gap:34px}
  .kit-wrap.is-recent>:nth-child(3){display:block}
  .recent:nth-child(2){margin-top:0}
  .steps{grid-template-columns:1fr}
  .steps li{grid-template-columns:56px 1fr;column-gap:1rem}
  .step-paw{grid-row:span 2;margin:0}
  .statuses dl{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
  .grid-sen{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .seniors .card-name{font-size:1.05rem}
  .lit{grid-template-columns:3.2rem minmax(0,1fr);padding:.85rem .9rem}
  .lit-letter{font-size:2.5rem}
  .strip{grid-column:1/-1;flex-wrap:wrap}
  .strip img{width:calc((100% - 12px)/3);height:auto;aspect-ratio:4/3}
  .strip-go{margin:.3rem 0 0;width:100%;justify-content:center}
  .dogs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .codes-grid{grid-template-columns:1fr 1fr}
  .big-tel{font-size:clamp(2.7rem,14vw,3.6rem)}
  .contact-candles{display:none}
}
@media (prefers-reduced-motion:reduce){.flame{animation:none}.paw{transition:none}}

/* ---------- rysunkowe akcenty: szkic nad tytułem każdej sekcji ---------- */
.doodle{display:block;width:60px;height:60px;margin:0 0 .5rem -4px;background:var(--dd) no-repeat center/contain;rotate:-7deg;transform-origin:50% 80%}
.sec-head-c .doodle{justify-self:center;margin-left:0}
.is-in .doodle{animation:doodle 1.4s cubic-bezier(.3,1.6,.5,1) both}
@keyframes doodle{0%{scale:.4;opacity:0;rotate:-30deg}60%{opacity:1}100%{scale:1;rotate:-7deg}}
@media (prefers-reduced-motion:reduce){.is-in .doodle{animation:none}}
.d-cat{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 52c-5-9-5-19 0-27l-3-15 12 8c5-2 11-2 16 0l12-8-3 15c5 8 5 18 0 27-9 7-25 7-34 0z'/%3E%3Ccircle cx='25' cy='36' r='1.6' fill='%232a2030'/%3E%3Ccircle cx='39' cy='36' r='1.6' fill='%232a2030'/%3E%3Cpath d='M30 42l2 2 2-2M7 40l10 2M7 46l10-1M57 40l-10 2M57 46l-10-1'/%3E%3C/svg%3E")}
.d-yarn{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='29' cy='29' r='18' fill='%239cc3e4' fill-opacity='.35'/%3E%3Cpath d='M15 21c10 2 20 10 26 22M13 31c10 0 20 6 24 14M21 12c4 8 14 16 26 18M41 44c5 7 13 8 18 2'/%3E%3C/svg%3E")}
.d-heart{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 52C18 42 8 33 10 22c2-8 12-11 18-5l4 5 4-5c6-6 16-3 18 5 2 11-8 20-22 30z' fill='%237b4b8f' fill-opacity='.45'/%3E%3C/svg%3E")}
.d-house{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 31 32 11l23 20M15 26v27h34V26'/%3E%3Cpath d='M27 53V40h10v13'/%3E%3Cpath d='M43 14v-5h5v9'/%3E%3C/svg%3E")}
.d-eye{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 32c8-11 17-16 27-16s19 5 27 16c-8 11-17 16-27 16S13 43 5 32z'/%3E%3Ccircle cx='32' cy='32' r='9' fill='%239cc3e4'/%3E%3Ccircle cx='32' cy='32' r='3.4' fill='%232a2030'/%3E%3Cpath d='M14 18l-3-5M32 13V8M50 18l3-5'/%3E%3C/svg%3E")}
.d-rosette{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='25' r='14' fill='%237b4b8f' fill-opacity='.3'/%3E%3Ccircle cx='32' cy='25' r='6'/%3E%3Cpath d='M24 37l-6 19 8-4 4 7 3-15M40 37l6 19-8-4-4 7-3-15'/%3E%3C/svg%3E")}
.d-bow{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 32 11 19v26zM32 32l21-13v26z' fill='%239cc3e4' fill-opacity='.4'/%3E%3Ccircle cx='32' cy='32' r='4.5' fill='%23fff'/%3E%3C/svg%3E")}
.d-chair{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 33V18c0-5 4-8 9-8h14c5 0 9 3 9 8v15'/%3E%3Cpath d='M9 34c0-3 2-5 5-5s5 2 5 5v6h26v-6c0-3 2-5 5-5s5 2 5 5v14H9z' fill='%237b4b8f' fill-opacity='.22'/%3E%3Cpath d='M13 48v6M51 48v6'/%3E%3C/svg%3E")}
.d-abc{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='30' width='22' height='22' rx='2'/%3E%3Crect x='33' y='30' width='22' height='22' rx='2' transform='rotate%287 44 41%29'/%3E%3Crect x='19' y='7' width='22' height='22' rx='2' transform='rotate%28-7 30 18%29' fill='%239cc3e4' fill-opacity='.35'/%3E%3Cpath d='M13 47l5-12 5 12M15 43h6M39 36v12h4c3 0 5-1 5-3s-2-3-5-3h-4M39 36h4c2 0 4 1 4 3s-2 3-4 3M34 13c-2-2-7-1-7 4s5 6 7 4'/%3E%3C/svg%3E")}
.d-bone{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 23c-3-6-11-3-10 3-6 1-5 9 1 10-2 6 6 9 9 4l29 0c3 5 11 2 9-4 6-1 7-9 1-10 1-6-7-9-10-3z' fill='%23fff' transform='rotate%28-14 32 32%29'/%3E%3C/svg%3E")}
.d-phone{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-4 0-8 4-8 9 0 18 16 34 34 34 5 0 9-4 9-8l-1-6-10-3-4 5c-7-3-12-8-15-15l5-4-3-10z'/%3E%3Cpath d='M40 10c7 1 13 7 14 14M38 18c3 1 6 4 7 7'/%3E%3C/svg%3E")}
.opinie .d-heart{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f1e9f3' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 52C18 42 8 33 10 22c2-8 12-11 18-5l4 5 4-5c6-6 16-3 18 5 2 11-8 20-22 30z' fill='%237b4b8f' fill-opacity='.45'/%3E%3C/svg%3E")}
.contact .d-phone{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f1e9f3' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11c-4 0-8 4-8 9 0 18 16 34 34 34 5 0 9-4 9-8l-1-6-10-3-4 5c-7-3-12-8-15-15l5-4-3-10z'/%3E%3Cpath d='M40 10c7 1 13 7 14 14M38 18c3 1 6 4 7 7'/%3E%3C/svg%3E")}

/* ---------- czytelność (klientka i jej klienci: większe, ciemniejsze litery) ---------- */
:root{--ink-2:#463c4e}
html{font-size:clamp(17px,.3vw + 16px,19px)}
.lead{font-size:1.13rem;line-height:1.6}
.card-meta{font-size:.95rem}
.hand{font-size:1.14rem}
.en:empty{display:none}
.opinie{--bgc:var(--heather-d)}
.contact{--bgc:var(--night)}

/* ---------- bez (lilak): wazon na gzymsie i gałązki w sekcjach ---------- */
.scene{container-type:inline-size}
.vase{position:absolute;z-index:5;right:-13cqi;top:calc(119.5cqi - 49cqi);width:27cqi;height:auto;overflow:visible;pointer-events:none;transform-origin:50% 100%}
.vase-glass{fill:rgba(156,195,228,.55);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.vase-shine{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.8}
.is-in .vase{animation:sway 6s ease-in-out 1.2s infinite alternate}
@keyframes sway{from{rotate:-1.2deg}to{rotate:1.4deg}}
.sprig{position:absolute;pointer-events:none;width:clamp(110px,13vw,190px);height:auto;aspect-ratio:120/160;overflow:visible;z-index:0}
.sprig-k{right:-24px;top:40px;rotate:-24deg}
.sprig-o{left:-30px;bottom:-20px;rotate:18deg;opacity:.9}
.sprig-c{right:clamp(150px,22vw,320px);bottom:-16px;rotate:-10deg;width:clamp(90px,10vw,150px)}
.sec>*:not(.sprig):not(.doodle){position:relative;z-index:1}
@media (max-width:980px){.sprig-k{width:90px;right:-22px;top:18px}.sprig-o{width:90px}.sprig-c{display:none}}
@media (prefers-reduced-motion:reduce){.is-in .vase{animation:none}}

/* ---------- podpis autora strony (ugotowanykod) ---------- */
.sig{display:inline-flex;align-items:center;gap:.55rem;margin-top:2.4rem;padding:.45rem .9rem .45rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#d9cfe0;text-decoration:none;font-size:.88rem}
.sig:hover{border-color:#ffc83d;color:#fff}
.sig-pot{width:30px;height:30px;flex:none}
.sig-pot .steam{animation:steam 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.sig:hover .sig-pot .steam{animation-duration:1s}
@keyframes steam{0%,100%{translate:0 0;opacity:.7}50%{translate:0 -1.5px;opacity:1}}
.sig b{color:#fff;font-weight:800;letter-spacing:-.01em}
.sig b i{font-style:normal;color:#ff5b3a}
@media (prefers-reduced-motion:reduce){.sig-pot .steam{animation:none}}

/* ---------- seniorzy: spokojniejsze medaliony ---------- */
.seniors .card-color{display:none}
.seniors .card-meta{font-size:.88rem}
.seniors .card-status{font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--heather-d);background:var(--mist);border-radius:999px;padding:.2em .7em;justify-self:center;margin-top:.25rem}
.seniors .card-name{font-size:1.12rem;line-height:1.2;text-wrap:balance}
.seniors .card-ph .ph-pill{bottom:12%;padding:.3em .7em}
.seniors .card-more{border-top:0}

/* =====================================================================
   WARSTWA RYSUNKOWA — kreska atramentem, „ręczne” zaokrąglenia, cień jak w szkicowniku
   ===================================================================== */
:root{
  --sketch:255px 18px 225px 16px/16px 225px 18px 255px;
  --sketch-2:18px 225px 16px 255px/255px 16px 225px 18px;
  --sh:3px 4px 0 var(--ink);
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M3 9c12-7 22 5 34-1s20-7 31-1 21 6 33 0 21-6 31-1 15 4 25 0' fill='none' stroke='%237b4b8f' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --squiggle-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M3 9c12-7 22 5 34-1s20-7 31-1 21 6 33 0 21-6 31-1 15 4 25 0' fill='none' stroke='%239cc3e4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* przyciski: naszkicowane, z cieniem, który się „wciska” */
.btn,.head-call,.lang,.strip-go,.more{border:2px solid var(--ink)!important;border-radius:var(--sketch)!important;box-shadow:var(--sh);transition:translate .18s,box-shadow .18s,background .25s,color .25s}
.btn:hover,.head-call:hover,.lang:hover,.more:hover{translate:-2px -2px;box-shadow:5px 7px 0 var(--ink)}
.btn:active,.head-call:active,.lang:active,.more:active{translate:2px 3px;box-shadow:0 0 0 var(--ink)}
.btn-line{background:var(--paper)}
.btn-line:hover{background:var(--mist);color:var(--ink)}
.btn-light{border-color:#fff!important;box-shadow:3px 4px 0 #000}
.btn-light:hover{background:var(--candle);color:var(--night);box-shadow:5px 7px 0 #000}
.lang{border-radius:var(--sketch-2)!important;background:var(--paper)}
.lang:hover{background:var(--sky);color:var(--ink)}
.dec-ex button{border:1.5px solid var(--blue);border-radius:var(--sketch-2);box-shadow:2px 3px 0 var(--blue);transition:translate .18s,box-shadow .18s,background .2s,color .2s}
.dec-ex button:hover{translate:-1px -1px;box-shadow:3px 4px 0 var(--ink)}
.callbar{border:2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);border-radius:var(--sketch)}

/* pudełka i kartki: kreska + przesunięty cień */
.statuses,.layette,.decoder,.breed,.creds li,.op,.lit,.card-body,.now{border:1.8px solid var(--ink)!important;border-radius:var(--sketch-2)!important;box-shadow:4px 5px 0 rgba(42,32,48,.92)}
.layette{border-radius:var(--sketch)!important}
.op{box-shadow:4px 5px 0 #1b1420}
.creds li{border-radius:var(--sketch)!important;transition:rotate .3s,translate .3s}
.creds li:nth-child(odd):hover{rotate:-1.5deg;translate:0 -3px}
.creds li:nth-child(even):hover{rotate:1.5deg;translate:0 -3px}
.breed{transition:rotate .35s,translate .35s}
.breed:hover{rotate:-.8deg;translate:0 -4px}
.breed:last-child:hover{rotate:.8deg}
.card-body{box-shadow:3px 4px 0 rgba(42,32,48,.92)}

/* odręczne podkreślenie pod tytułami sekcji — rysuje się przy przewijaniu */
.h2::after{content:"";display:block;width:clamp(110px,14vw,170px);height:14px;margin-top:.32em;background:var(--squiggle) no-repeat left center/100% 100%;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.6,.1,.2,1) .25s}
.sec-head-c .h2::after{margin-inline:auto}
.opinie .h2::after,.contact .h2::after{background-image:var(--squiggle-blue)}
.is-in .h2::after,html:not(.js) .h2::after{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){.h2::after{clip-path:none;transition:none}}

/* menu: na środku, w naszkicowanej ramce, z falką przy najechaniu */
@media (min-width:1220px){
  .head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .brand{justify-self:start;grid-column:1;grid-row:1}
  .nav{grid-column:2;grid-row:1;justify-self:center;background:var(--paper);border:1.8px solid var(--ink);border-radius:var(--sketch);box-shadow:3px 4px 0 var(--ink);padding:.25rem .9rem;gap:.1rem}
  .head-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;gap:.7rem;align-items:center}
  .nav a{position:relative;font-size:.98rem;font-weight:650;padding:.45em .6em;border:0;border-radius:999px;transition:color .2s,background .2s}
  .nav a::after{content:"";position:absolute;left:.5em;right:.5em;bottom:.12em;height:7px;background:var(--squiggle) no-repeat center/100% 100%;clip-path:inset(0 100% 0 0);transition:clip-path .45s cubic-bezier(.6,.1,.2,1)}
  .nav a:hover::after,.nav a[aria-current]::after{clip-path:inset(0 0 0 0)}
  .nav a:hover,.nav a[aria-current]{color:var(--heather-d);background:var(--mist)}
}
.head-tools{display:flex;gap:.6rem;align-items:center}

/* logo: gwiazdka obraca się po najechaniu */
.brand-ast{display:inline-block;transition:rotate .6s cubic-bezier(.3,1.6,.5,1)}
.brand:hover .brand-ast{rotate:180deg}

/* portrety kotów (łuk): przechył + przybliżenie, wizytówka podnosi się */
.card .card-ph{transition:rotate .45s cubic-bezier(.3,1.4,.5,1)}
.card:hover .card-ph{rotate:-1.6deg}
.card:nth-child(even):hover .card-ph{rotate:1.6deg}
.card-body{transition:translate .35s}
.card:hover .card-body{translate:0 -4px}
.card-img{object-position:50% 32%}
.ph-pill .ic{transition:scale .3s}
.card-ph:hover .ph-pill .ic,.recent-btn:hover .ph-pill .ic,.now-ph:hover .ph-pill .ic{scale:1.25}

/* seniorzy: medalion wisi na gwoździu i huśta się po najechaniu */
.seniors .card{position:relative;padding-top:26px}
.seniors .card::before{content:"";position:absolute;top:0;left:50%;width:46%;height:30px;translate:-50% 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M2 30 50 4 98 30' fill='none' stroke='%232a2030' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='4' r='3.2' fill='%232a2030'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.seniors .card-ph{transform-origin:50% -12%}
.seniors .card:hover .card-ph{rotate:0deg;animation:swing 1.4s ease-in-out}
@keyframes swing{0%{rotate:0deg}20%{rotate:5deg}45%{rotate:-3.5deg}70%{rotate:2deg}100%{rotate:0deg}}
.seniors .card:hover .card-body{translate:0 0}

/* mioty: miniatury rozkładają się w wachlarz, litera podskakuje */
.lit{box-shadow:3px 4px 0 rgba(42,32,48,.92)}
.lit:hover{translate:-2px -2px;box-shadow:5px 7px 0 rgba(42,32,48,.92);background:#fff}
.strip img{transition:rotate .35s cubic-bezier(.3,1.5,.5,1),translate .35s cubic-bezier(.3,1.5,.5,1);border:2px solid #fff;box-shadow:0 2px 6px rgba(42,32,48,.25)}
.strip:hover img:nth-child(1){rotate:-7deg;translate:-6px -4px}
.strip:hover img:nth-child(2){rotate:0deg;translate:0 -9px}
.strip:hover img:nth-child(3){rotate:7deg;translate:6px -4px}
.lit-letter{display:inline-block;transition:translate .35s cubic-bezier(.3,1.8,.5,1),rotate .35s}
.lit:hover .lit-letter{translate:0 -5px;rotate:-8deg}
.strip-go{box-shadow:2px 3px 0 var(--heather)}

/* kroki: łapka jak pieczątka */
.step-paw{transition:scale .3s cubic-bezier(.3,1.8,.5,1),rotate .3s;border-width:2px;box-shadow:2px 3px 0 var(--ink)}
.steps li:hover .step-paw{scale:1.15;rotate:-10deg}

/* wszystko klikalne ma rączkę */
.recent-btn,.dog,.odi-btn,.strip,.card-ph,.now-ph{cursor:pointer}
.dog{border:1.5px solid var(--ink)}

/* rysunek nad tytułem macha przy najechaniu na nagłówek */
.sec-head:hover .doodle,.dom-txt:hover .doodle,.contact-main:hover .doodle,.dogs-txt:hover .doodle,.opinie:hover>.doodle{animation:wiggle .7s ease-in-out}
@keyframes wiggle{0%,100%{rotate:-7deg}30%{rotate:6deg}60%{rotate:-12deg}}

/* FAQ i stopka: falka zamiast zwykłego podkreślenia */
.faq summary{transition:color .2s,padding .25s}
.faq summary:hover{color:var(--heather-d);padding-left:.4rem}
.faq summary:hover .pm{background:var(--mist)}
.foot-cols a{text-decoration:none;background:var(--squiggle-blue) no-repeat left bottom/0 6px;transition:background-size .4s}
.foot-cols a:hover{background-size:100% 6px}

/* Odi: ramka jak portret z pinezką */
.odi-btn{outline-width:2px}
.odi::after{content:"";position:absolute;left:50%;top:-14px;width:22px;height:22px;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e7b4ff,var(--heather) 60%);border:1.5px solid var(--ink)}

@media (prefers-reduced-motion:reduce){
  .card:hover .card-ph,.seniors .card:hover .card-ph,.strip:hover img,.lit:hover .lit-letter,.steps li:hover .step-paw{animation:none;rotate:0deg;translate:none}
}
@media (max-width:640px){
  .btn,.head-call,.lang{box-shadow:2px 3px 0 var(--ink)}
  .statuses,.layette,.decoder,.breed,.creds li,.op,.lit,.card-body,.now{box-shadow:3px 4px 0 rgba(42,32,48,.92)}
}

/* =====================================================================
   RUNDA 5: łagodne fale między sekcjami, gwiazdki, liście, podpis, mocniejszy hover kotów
   ===================================================================== */
/* przejścia: jedna łagodna fala w kolorze sekcji + kreska atramentu (zamiast rzędu półkoli) */
.scallop::before{top:-34px;height:36px;background:var(--bgc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C160 4 330 2 520 18s390 22 560 4 260-12 360 0v18z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24C160 4 330 2 520 18s390 22 560 4 260-12 360 0v18z'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.scallop::after{content:"";position:absolute;left:0;right:0;top:-35px;height:36px;pointer-events:none;z-index:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 24C160 4 330 2 520 18s390 22 560 4 260-12 360 0' fill='none' stroke='%232a2030' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
.opinie.scallop::after,.contact.scallop::after{opacity:.0}

/* kontakt i stopka: jedna noc, bez szwu */
.contact{background:radial-gradient(55% 60% at 90% 45%,rgba(217,154,78,.18),transparent 70%),radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/26px 26px,var(--night)}
.foot{background:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1.5px) 0 0/26px 26px,var(--night);border-top:1px dashed rgba(255,255,255,.14);position:relative;overflow:hidden}

/* opinie: 5 gwiazdek (prawdziwe oceny z Google) */
.stars{display:flex;align-items:center;gap:2px;margin-bottom:.6rem}
.star{width:20px;height:20px;fill:var(--candle);stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.star:nth-child(even){rotate:8deg}.star:nth-child(odd){rotate:-6deg}
.stars span{margin-left:.5rem;font-size:.8rem;font-weight:700;color:var(--ink-2)}
.op:hover .star{animation:twinkle .6s ease-in-out both}
.op:hover .star:nth-child(2){animation-delay:.06s}.op:hover .star:nth-child(3){animation-delay:.12s}
.op:hover .star:nth-child(4){animation-delay:.18s}.op:hover .star:nth-child(5){animation-delay:.24s}
@keyframes twinkle{50%{scale:1.3}}
.op{transition:rotate .35s,translate .35s}
.op:hover{rotate:0deg;translate:0 -4px}

/* liście z kwiatkami bzu — akcenty */
.leafy{position:absolute;pointer-events:none;width:clamp(150px,16vw,240px);height:auto;aspect-ratio:176/92;overflow:visible;z-index:0}
.lf-rasa{left:-26px;bottom:24px;rotate:-12deg}
.lf-kotki{right:-20px;top:70px;rotate:168deg;scale:1 -1}
.lf-mioty{right:-18px;top:30px;rotate:200deg}
.lf-psy{right:-24px;bottom:30px;rotate:-20deg}
.lf-foot{right:-30px;top:-6px;rotate:190deg;width:200px;opacity:.85}
.layette,.statuses{position:relative}
.lf-layette{width:150px;right:-46px;top:-38px;rotate:-24deg;z-index:2}
.lf-status{width:140px;left:-40px;bottom:-34px;rotate:14deg;z-index:2}
@media (max-width:980px){.leafy{width:120px}.lf-kotki,.lf-mioty{top:16px}.lf-layette{right:-14px;top:-30px;width:110px}.lf-status{left:-14px;width:110px}}

/* hero: bez świec — wazon z bzem zostaje na gzymsie */
.mantel .shelf{stroke-width:1.6}

/* koty: wyraźna reakcja na najechanie (i na dotyk) */
.card .card-ph{transition:rotate .45s cubic-bezier(.3,1.4,.5,1),scale .45s cubic-bezier(.3,1.4,.5,1),outline-color .3s}
.card:hover .card-ph,.card:focus-within .card-ph{scale:1.03;outline-color:var(--heather)}
.card-ph:hover .card-img{scale:1.09}
.card:hover .ph-pill,.card:focus-within .ph-pill{background:var(--heather);animation:hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes hop{40%{translate:-50% -6px}}
.recent-btn .ph-pill{transition:background .25s}
.recent:hover .ph-pill{background:var(--heather)}
.card:hover .card-name{color:var(--heather-d)}
.card-ph:active{scale:.98}

/* podpis ugotowanykod: garnek podskakuje, pokrywka się unosi, bucha para */
.sig{position:relative;border:1.8px solid rgba(255,255,255,.35);border-radius:var(--sketch);box-shadow:3px 4px 0 #000;transition:translate .2s,box-shadow .2s,border-color .2s,background .2s}
.sig:hover{translate:-2px -2px;box-shadow:5px 7px 0 #000;border-color:#ffc83d;background:rgba(255,200,61,.08)}
.sig:active{translate:2px 3px;box-shadow:0 0 0 #000}
.sig-pot{overflow:visible}
.sig:hover .sig-pot{animation:potjump .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes potjump{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -5px;rotate:-8deg}60%{translate:0 0;rotate:6deg}}
.sig:hover .sig-pot .steam{animation:steamup .8s ease-out infinite}
@keyframes steamup{0%{translate:0 2px;opacity:.2}50%{opacity:1}100%{translate:0 -5px;opacity:0}}
.sig b{transition:letter-spacing .3s}
.sig:hover b{letter-spacing:.02em}
@media (prefers-reduced-motion:reduce){.sig:hover .sig-pot,.sig:hover .sig-pot .steam,.op:hover .star,.card:hover .ph-pill{animation:none}}

/* ściągawka kodów (zamiast dekodera) */
.rasa .codes{margin-top:clamp(36px,5vw,56px);background:var(--card);border:1.8px solid var(--ink);border-radius:var(--sketch-2);box-shadow:4px 5px 0 rgba(42,32,48,.92);padding:0 clamp(18px,3vw,30px)}
.rasa .codes summary{font-size:1.05rem}
.rasa .codes-in{display:grid;gap:1rem}
.rasa .codes-in>p{color:var(--ink-2)}

/* ---------- filmy (sekcja pojawia się, gdy są w danych) ---------- */
.films{--bgc:var(--sky);background:var(--dots-blue),var(--sky)}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:clamp(18px,2.6vw,34px)}
.vid{margin:0;background:var(--card);border:1.8px solid var(--ink);border-radius:var(--sketch-2);box-shadow:4px 5px 0 rgba(42,32,48,.92);padding:10px 10px 14px;transition:rotate .35s,translate .35s}
.vid:hover{rotate:-.8deg;translate:0 -3px}
.vid video,.vid iframe,.vid-facade{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:10px;background:var(--night)}
.vid-facade{position:relative;padding:0;cursor:pointer;overflow:hidden;color:#fff}
.vid-facade img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:scale .5s,opacity .3s}
.vid-facade:hover img{scale:1.05;opacity:1}
.vid-fb{background:linear-gradient(135deg,#3b5998,var(--heather-d))}
.vid-fb span:last-child{position:absolute;left:12px;bottom:10px;font-weight:700}
.play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--heather);border:2px solid #fff;box-shadow:3px 4px 0 var(--ink);transition:scale .3s cubic-bezier(.3,1.6,.5,1)}
.play svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.vid-facade:hover .play{scale:1.12}
.vid figcaption{padding:.7rem .3rem 0;font-family:var(--hand);font-size:1.08rem;color:var(--ink)}

.d-cam{--dd:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%232a2030' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='20' width='34' height='28' rx='5' fill='%239cc3e4' fill-opacity='.4'/%3E%3Cpath d='M42 30l14-8v24l-14-8z'/%3E%3Ccircle cx='17' cy='14' r='6'/%3E%3Ccircle cx='32' cy='14' r='6'/%3E%3C/svg%3E")}

/* =====================================================================
   RUNDA 6: adresówki, kolaż Odiego, rozety, album seniorów, pełniejsze kadry, kołyszące się kwiaty, podpis
   ===================================================================== */

/* --- statusy: adresówki na girlandzie --- */
.tags-wrap{position:relative;margin-top:clamp(64px,8vw,104px)}
.garland{display:block;width:100%;height:46px;margin-top:.6rem;overflow:visible}
.garland path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.tags{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.4vw,34px);margin-top:-22px}
.tag{display:grid;justify-items:center;text-align:center;gap:.9rem;position:relative;padding-top:34px}
.tag::before{content:"";position:absolute;top:0;left:50%;width:1.6px;height:40px;background:var(--ink)}
.tag:nth-child(2){padding-top:52px}.tag:nth-child(2)::before{height:58px}
.tag:nth-child(3){padding-top:44px}.tag:nth-child(3)::before{height:50px}
.tag-disc{position:relative;display:grid;place-items:center;width:clamp(112px,11vw,136px);aspect-ratio:1;border-radius:50%;padding:14px;border:2.2px solid var(--ink);box-shadow:3px 4px 0 var(--ink);font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.12rem;line-height:1.1;transform-origin:50% -24px;transition:rotate .3s}
.tag-disc::before{content:"";position:absolute;top:7px;left:50%;width:13px;height:13px;translate:-50% 0;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.tag-disc b{font-weight:600;margin-top:8px}
.t-wolny .tag-disc{background:var(--heather);color:#fff;rotate:-4deg}
.t-obs .tag-disc{background:var(--sky);color:var(--blue);rotate:3deg;border-radius:46% 54% 50% 50%/50% 50% 50% 50%}
.t-wst .tag-disc{background:#f6e2c6;color:#6e4313;rotate:-2deg}
.t-rez .tag-disc{background:#e9e4ea;color:var(--ink);rotate:5deg}
.tag:hover .tag-disc{animation:swing 1.3s ease-in-out}
.tag p{color:var(--ink-2);font-size:.98rem;max-width:24ch}

/* --- O nas: kolaż z albumu --- */
.collage{margin:0;position:relative}
.collage-box,.collage{--tape:rgba(156,195,228,.7)}
.collage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,40px));gap:0}
.col-ph{position:relative;display:block;padding:10px 10px 12px;background:#fff;border:1.8px solid var(--ink);box-shadow:4px 5px 0 var(--ink);cursor:pointer;transition:rotate .4s cubic-bezier(.3,1.4,.5,1),translate .4s,z-index 0s}
.col-ph::before{content:"";position:absolute;z-index:2;top:-11px;left:50%;width:84px;height:22px;translate:-50% 0;background:var(--tape);rotate:-4deg}
.col-1{grid-column:1/10;grid-row:1/9;rotate:-3deg;z-index:2}
.col-2{grid-column:7/13;grid-row:4/11;rotate:4deg;z-index:3}
.col-2::before{background:rgba(201,166,214,.75);rotate:5deg}
.col-3{grid-column:2/8;grid-row:8/13;rotate:2deg;z-index:1}
.col-ph:hover{rotate:0deg;translate:0 -6px;z-index:5}
.col-img{width:100%;height:100%;object-fit:cover;display:block}
.col-1 .col-img{aspect-ratio:4/3}
.col-2 .col-img{aspect-ratio:3/4;object-position:50% 30%}
.col-3 .col-img{aspect-ratio:4/3}
.collage figcaption{grid-column:1/13;grid-row:13;margin-top:2.6rem;color:var(--ink-2);display:grid;gap:.2rem}
.collage figcaption .hand{rotate:-2deg;width:fit-content;font-size:1.2rem}
.collage .col-ph{align-self:start}

/* --- rozety wystawowe --- */
.rosettes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:1.2rem}
.ro{display:grid;justify-items:center;text-align:center;gap:.3rem;align-content:start}
.ro-badge svg{width:84px;height:110px;overflow:visible;transition:rotate .4s cubic-bezier(.3,1.6,.5,1)}
.ro:hover .ro-badge svg{rotate:-10deg}
.ro .rf{stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.ro .rc{fill:#fff;stroke:var(--ink);stroke-width:1.8}
.ro .rb{stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round}
.ro .rpaw{fill:var(--ink)}
.ro-1 .rf{fill:var(--heather)}.ro-1 .rb{fill:var(--heather-l)}
.ro-2 .rf{fill:var(--blue-l)}.ro-2 .rb{fill:var(--sky)}
.ro-3 .rf{fill:var(--candle)}.ro-3 .rb{fill:#f6e2c6}
.ro-4 .rf{fill:#84b366}.ro-4 .rb{fill:#cfe5bf}
.ro b{font-family:var(--serif);font-variation-settings:"SOFT" 100;font-size:1.15rem;font-weight:600;color:var(--ink);line-height:1.15}
.ro>span:last-child{font-size:.88rem;color:var(--ink-2);line-height:1.4}

/* --- seniorzy: album z pieczątkami --- */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:clamp(30px,3.4vw,46px) clamp(18px,2.4vw,30px);align-items:start}
.snap{display:grid;justify-items:center;text-align:center}
.snap-ph{position:relative;display:block;width:100%;padding:10px;background:#fff;border:1.8px solid var(--ink);box-shadow:3px 4px 0 var(--ink);cursor:pointer;rotate:-1.6deg;transition:rotate .4s cubic-bezier(.3,1.4,.5,1),translate .4s,box-shadow .3s}
.snap:nth-child(even) .snap-ph{rotate:1.8deg}
.snap:nth-child(3n) .snap-ph{rotate:-.6deg}
.snap-ph:hover{rotate:0deg;translate:0 -6px;box-shadow:6px 8px 0 var(--ink)}
.snap-img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;transition:scale .5s}
.snap-ph{overflow:hidden}
.snap-ph:hover .snap-img{scale:1.06}
.stamp{position:absolute;right:12px;bottom:18px;rotate:-12deg;font:800 .72rem/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;padding:.5em .7em;border:2.4px solid currentColor;border-radius:7px;background:rgba(255,255,255,.88);color:var(--heather-d);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9)}
.stamp.st-stay{color:var(--blue)}
.snap-n{position:absolute;left:18px;top:18px;display:inline-flex;align-items:center;gap:.35em;padding:.3em .65em;border-radius:999px;background:rgba(36,27,43,.78);color:#fff;font-size:.78rem;font-weight:700}
.snap-ph:hover .snap-n{background:var(--heather)}
.snap-name{margin-top:.8rem;font-family:var(--hand);font-size:1.12rem;line-height:1.25;color:var(--ink);text-wrap:balance}
.snap-meta{font-size:.88rem;color:var(--ink-2)}
.snap .card-more{width:100%;margin-top:.3rem}
.js .seniors:not(.is-open) .snap.is-more{display:none}

/* --- kotki i kocury: pełniejszy kadr (mniej przycinania), większe zdjęcia, wyraźny hover --- */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.card-ph{border-radius:46% 46% 14px 14px/20% 20% 14px 14px}
.card-img{aspect-ratio:4/3.3;object-position:50% 42%}
.card{transition:translate .45s cubic-bezier(.3,1.4,.5,1)}
.card:hover{translate:0 -6px}

/* --- większe miniatury --- */
.dogs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.strip img{width:6.6rem;height:5rem}
@media (max-width:640px){.dogs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- kwiaty i liście delikatnie się kołyszą --- */
.sprig,.leafy{transform-origin:20% 90%;animation:breeze 7s ease-in-out infinite alternate}
.leafy:nth-of-type(2n){animation-duration:8.5s;animation-delay:-2s}
.lf-layette,.lf-status{animation-duration:6s}
@keyframes breeze{from{transform:rotate(-2.2deg)}to{transform:rotate(2.6deg)}}
.vase{animation:sway 6s ease-in-out infinite alternate}

/* --- podpis ugotowanykod: drży, sam się „klika”, z garnka leci para i kod --- */
.sig{overflow:visible;animation:sigidle 6s ease-in-out infinite}
@keyframes sigidle{
  0%,70%,100%{translate:0 0;box-shadow:3px 4px 0 #000}
  73%{translate:-1px 0}75%{translate:1px 0}77%{translate:-1px 0}
  82%{translate:2px 3px;box-shadow:0 0 0 #000}
  87%{translate:0 0;box-shadow:3px 4px 0 #000}}
.sig-wrap{position:relative;display:inline-block}
.sig-fx{position:absolute;left:.7rem;bottom:100%;width:40px;height:70px;pointer-events:none}
.sig-fx i{position:absolute;bottom:0;left:50%;font:700 .78rem/1 ui-monospace,Consolas,monospace;font-style:normal;color:#ffc83d;opacity:0;animation:codeup 3.2s ease-out infinite}
.sig-fx i:nth-child(2){animation-delay:.6s;color:#ff8fc8}
.sig-fx i:nth-child(3){animation-delay:1.2s;color:#7cc0ff}
.sig-fx i:nth-child(4){animation-delay:1.8s;color:#45dfb1}
.sig-fx i:nth-child(5){animation-delay:2.4s;color:#fff6e5}
@keyframes codeup{0%{translate:-50% 0;opacity:0}15%{opacity:1}100%{translate:calc(-50% + 14px) -64px;opacity:0;rotate:20deg}}
.sig-fx i:nth-child(even){animation-name:codeup2}
@keyframes codeup2{0%{translate:-50% 0;opacity:0}15%{opacity:1}100%{translate:calc(-50% - 16px) -58px;opacity:0;rotate:-18deg}}
.sig:hover+.sig-fx i,.sig-wrap:hover .sig-fx i{animation-duration:1.4s}
@media (prefers-reduced-motion:reduce){.sig,.sig-fx i,.sprig,.leafy,.vase,.tag:hover .tag-disc{animation:none}}

/* --- telefon --- */
@media (max-width:980px){
  .tags{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.2rem;margin-top:1rem}
  .garland{display:none}
  .tag{padding-top:0}.tag::before{display:none}
  .tag:nth-child(n){padding-top:0}
  .rosettes{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.6rem}
  .collage{max-width:520px;grid-template-rows:repeat(12,minmax(0,32px))}
}
@media (max-width:640px){
  .collage{grid-template-rows:repeat(12,minmax(0,24px))}
  .album{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .snap-name{font-size:1rem}
  .stamp{font-size:.62rem;right:6px;bottom:12px}
  .grid{grid-template-columns:1fr}
}

/* poprawki: adresówki — dłuższe słowa mieszczą się w kółku */
.tag-disc{width:clamp(126px,11.5vw,142px);font-size:1rem;letter-spacing:-.01em;padding:12px}

/* poprawki telefonu: miniatury miotu w jednym rzędzie, kolaż Odiego bez chowania zdjęć */
@media (max-width:640px){
  .strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}
  .strip img{width:100%;height:auto;aspect-ratio:4/3}
  .strip-go{grid-column:1/-1}
  .collage{grid-template-rows:repeat(12,minmax(0,30px))}
  .col-1{grid-column:1/10;grid-row:1/7}
  .col-2{grid-column:6/13;grid-row:4/10}
  .col-3{grid-column:1/8;grid-row:8/13;z-index:4}
}

/* rozety: kolory przez zmienne (docierają do wnętrza <use>) */
.ro-1{--rf:#7b4b8f;--rb:#c9a6d6}.ro-2{--rf:#9cc3e4;--rb:#e4eef7}.ro-3{--rf:#d99a4e;--rb:#f6e2c6}.ro-4{--rf:#84b366;--rb:#cfe5bf}
.ro .rpaw{fill:#2a2030}
@media (max-width:980px){.scene-note{position:static;display:block;width:fit-content;margin:1.2rem auto 0;translate:none}.scene-note::before{display:none}}

/* =====================================================================
   HOVER KOTÓW — poprawka: GSAP (wejście) ustawia translate/transform na .card,
   więc ruch po najechaniu robią tylko elementy wewnętrzne. Działa od najechania na całą kartę.
   ===================================================================== */
.card,.card:hover{transition:none;translate:none}
.card .card-ph{transition:rotate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1),translate .5s cubic-bezier(.34,1.56,.64,1),outline-color .3s,box-shadow .4s;will-change:transform}
.card .card-img{transition:scale .7s cubic-bezier(.2,.8,.2,1),filter .5s}
.card .card-body{transition:translate .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.card .card-name{transition:color .3s}
@media (hover:hover){
  .card:hover .card-ph{rotate:-1.8deg;scale:1.03;translate:0 -8px;outline-color:var(--heather);box-shadow:0 18px 30px -18px rgba(42,32,48,.55)}
  .card:nth-child(even):hover .card-ph{rotate:1.8deg}
  .card:hover .card-img{scale:1.08;filter:saturate(1.08)}
  .card:hover .card-body{translate:0 -10px;box-shadow:5px 7px 0 rgba(42,32,48,.92)}
  .card:hover .card-name{color:var(--heather-d)}
  .card:hover .ph-pill{background:var(--heather);animation:hop .55s cubic-bezier(.3,1.6,.5,1)}
  /* seniorzy: reakcja od najechania na cały polaroid z podpisem */
  .snap .snap-ph{will-change:transform}
  .snap:hover .snap-ph{rotate:0deg;translate:0 -7px;box-shadow:6px 9px 0 var(--ink)}
  .snap:hover .snap-img{scale:1.07}
  .snap:hover .snap-n{background:var(--heather)}
  .snap:hover .stamp{animation:stamp .5s cubic-bezier(.3,1.6,.5,1)}
  .snap-name{transition:color .3s}
  .snap:hover .snap-name{color:var(--heather-d)}
}
@keyframes stamp{0%{scale:1}40%{scale:1.18}100%{scale:1}}
.card:active .card-ph,.snap:active .snap-ph{scale:.98}
.card-ph:focus-visible,.snap-ph:focus-visible{outline:3px solid var(--blue);outline-offset:6px}
@media (prefers-reduced-motion:reduce){
  .card:hover .card-ph,.card:hover .card-body,.snap:hover .snap-ph{rotate:0deg;translate:none;scale:none}
  .card:hover .ph-pill,.snap:hover .stamp{animation:none}
}

/* =====================================================================
   HERO wg życzenia klientki: dwa koty z plakatu, szpic po lewej, prawdziwy bez; prostsze napisy
   ===================================================================== */
.hero h1{font-weight:600;font-size:clamp(2.5rem,5vw,4.7rem);line-height:1.05;letter-spacing:-.02em;font-variation-settings:"SOFT" 50,"WONK" 0}
.hero h1 .breed-n{color:var(--heather);font-style:normal}
.hero-place{margin-top:1rem;font-weight:700;font-size:clamp(1rem,1.2vw,1.15rem);color:var(--blue);letter-spacing:.01em}
.hero-lead{margin-top:.6rem;font-size:clamp(1.08rem,1.25vw,1.22rem);color:var(--ink)}

/* łuk: jasne „okno” za kotami */
.m-arch{background:radial-gradient(70% 60% at 50% 70%,#fff 0%,var(--mist) 55%,#e3d3ea 100%);}
.m-arch::after{content:"";position:absolute;inset:0;background:var(--dots);opacity:.6}
.m-word{top:-6%}
.m-pets{position:absolute;z-index:3;left:4%;bottom:0;width:100%;height:auto;max-width:none;pointer-events:none;filter:drop-shadow(0 10px 12px rgba(42,32,48,.18))}
.m-dog{position:absolute;z-index:6;left:-30cqi;top:calc(119.5cqi - 36cqi);width:38cqi;height:auto;max-width:none;filter:drop-shadow(0 8px 10px rgba(42,32,48,.2));transform-origin:50% 100%;transition:rotate .4s cubic-bezier(.3,1.6,.5,1)}
.m-dog:hover{rotate:-4deg}

/* bez w hero */
.hero{overflow:visible}
.bez-hero{position:absolute;pointer-events:none;height:auto;max-width:none;transform-origin:100% 0;animation:breeze 7s ease-in-out infinite alternate}
.bez-top{right:0;top:58px;width:clamp(150px,19vw,290px);z-index:1}
.bez-shelf{z-index:6;right:-22cqi;top:calc(119.5cqi - 20cqi);width:38cqi;transform-origin:30% 100%;
  -webkit-mask-image:linear-gradient(to right,#000 78%,transparent);mask-image:linear-gradient(to right,#000 78%,transparent)}

/* bez w sekcjach (zdjęcie z plakatu klientki) — przy krawędzi ekranu */
.bez{position:absolute;pointer-events:none;height:auto;z-index:0;animation:breeze 8s ease-in-out infinite alternate}
.bez-r{right:0;transform-origin:100% 20%}
.bez-l{left:0;scale:-1 1;transform-origin:100% 20%}
.bz-k{top:24px;width:clamp(120px,14vw,210px)}
.bz-o{bottom:0;width:clamp(110px,12vw,180px);opacity:.95}
.bz-rasa{bottom:0;width:clamp(130px,15vw,230px)}
.bz-kotki{top:40px;width:clamp(110px,12vw,190px)}
.bz-mioty{top:20px;width:clamp(120px,14vw,200px);-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
.bz-psy{bottom:20px;width:clamp(110px,12vw,180px)}
@media (max-width:980px){
  .bez-top{width:120px;top:64px;opacity:.95}
  .m-dog{left:-18cqi;width:34cqi;top:calc(119.5cqi - 32cqi)}
  .bez-shelf{right:-14cqi;width:30cqi;top:calc(119.5cqi - 16cqi)}
  .bez{width:96px}
  .bz-k,.bz-kotki,.bz-mioty{top:8px}
}
@media (max-width:640px){
  .hero h1{font-size:clamp(2.2rem,9.6vw,2.9rem)}
  .bez-top{width:96px;top:70px;opacity:.9}
}
@media (prefers-reduced-motion:reduce){.bez,.bez-hero{animation:none}}

.scene{z-index:2}
.bez-top{width:clamp(130px,15vw,230px);top:70px}

.hero-txt{position:relative;z-index:3}
@media (max-width:640px){.bez-top{width:78px;top:66px;opacity:.85}.m-dog{left:-6cqi;width:32cqi;top:calc(119.5cqi - 30cqi)}.bez-shelf{right:-6cqi;width:28cqi}}
.head-call svg{flex:none;width:16px;height:16px}

/* bez w sekcjach: zawsze przy krawędzi ekranu (nie w przepływie tekstu) */
section.sec>img.bez.bez{position:absolute;z-index:0}
section.sec>img.bez-r{right:0;left:auto}
section.sec>img.bez-l{left:0;right:auto}

/* =====================================================================
   RUNDA 8: dokładniejsze wycięcia, pies po lewej, jeden zdjęciowy bez (rysunkowy obrys), dużo rysowanych bzów
   ===================================================================== */
/* koty w łuku */
.m-pets{left:2%;width:98%}
/* pies: na lewym końcu gzymsu, obok łuku (nie na nim) */
.m-dog{left:-40cqi;width:36cqi;top:calc(119.5cqi - 34cqi);z-index:6}
/* zdjęciowy bez tylko u góry: mniejszy, z obrysem jak rysunek */
.bez-top{width:clamp(110px,11vw,180px);top:72px;
  filter:drop-shadow(1.6px 0 0 #2a2030) drop-shadow(-1.6px 0 0 #2a2030) drop-shadow(0 1.6px 0 #2a2030) drop-shadow(0 -1.6px 0 #2a2030) drop-shadow(4px 5px 0 rgba(42,32,48,.25))}

/* rysowane bzy — zawsze przy krawędziach, za treścią */
section.sec>svg.sprig,.hero>svg.sprig{position:absolute;z-index:0;pointer-events:none;overflow:visible;height:auto;animation:breeze 7.5s ease-in-out infinite alternate}
.sprig{width:clamp(110px,12vw,190px);aspect-ratio:120/160}
.sp-hang-l,.sp-hang-r,.sp-hero-l{width:clamp(170px,19vw,300px);aspect-ratio:200/150}
.sp-hang-l{left:-14px;transform-origin:0 12%}
.sp-hang-r{right:-14px;scale:-1 1;transform-origin:0 12%}
.sp-up-l{left:-18px;transform-origin:50% 100%}
.sp-up-r{right:-18px;transform-origin:50% 100%}
.sp-a{top:18px}
.sp-b{top:45%}
.sp-c{bottom:24px}
.sp-up-l.sp-c{rotate:14deg}.sp-up-r.sp-c{rotate:-14deg}
.sp-up-l.sp-b{rotate:18deg}
.sec .sprig:nth-of-type(2n){animation-duration:9s;animation-delay:-3s}
/* hero: gałązka z lewej strony ekranu i bez przy gzymsie */
.sp-hero-l{left:-16px;bottom:8%;transform-origin:0 12%}
.scene .sp-shelf{position:absolute;z-index:6;right:-15cqi;top:calc(119.5cqi - 40cqi);width:28cqi;aspect-ratio:120/160;height:auto;overflow:visible;rotate:-8deg;transform-origin:50% 100%;animation:breeze 6.5s ease-in-out infinite alternate}
/* treść zawsze nad kwiatami */
.sec>*:not(.sprig):not(.doodle){position:relative;z-index:1}

@media (max-width:980px){
  .sprig{width:96px}
  .sp-hang-l,.sp-hang-r,.sp-hero-l{width:150px}
  .sp-b{display:none}
  .m-dog{left:-30cqi;width:32cqi;top:calc(119.5cqi - 30cqi)}
  .scene{translate:8vw 0}
}
@media (max-width:640px){
  .sprig{width:78px}
  .sp-hang-l,.sp-hang-r{width:120px}
  .sp-hero-l{display:none}
  .bez-top{width:84px;top:66px}
  .scene{width:min(66vw,360px);translate:10vw 0}
  .m-dog{left:-36cqi;width:34cqi;top:calc(119.5cqi - 31cqi)}
  .scene .sp-shelf{right:-12cqi;width:24cqi}
}
@media (prefers-reduced-motion:reduce){section.sec>svg.sprig,.hero>svg.sprig,.scene .sp-shelf{animation:none}}

/* gzyms dłuższy w lewo — szpic stoi na nim; gałązka z lewej w rogu nad tytułem */
.mantel{width:172%;margin-left:-58%;margin-right:-14%;height:40.4cqi}
.mantel .shelf{vector-effect:non-scaling-stroke}
.hero>svg.sp-hero-l{top:66px;bottom:auto;left:-14px;width:clamp(130px,11vw,170px)}
@media (max-width:980px){.mantel{width:150%;margin-left:-40%}}

/* =====================================================================
   RUNDA 9: gotowe wycięcia od klientki; plakat „Breeding plan” w sekcji Psy
   ===================================================================== */
/* plan hodowlany: własny wiersz pod zdjęciami psów — plakat (przypięty taśmą) + opis */
.dog-plan{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,400px) minmax(0,460px);justify-content:center;align-items:center;gap:clamp(28px,5vw,72px);margin:clamp(20px,3vw,40px) 0 0}
.plan-btn{position:relative;display:block;width:100%;padding:10px 10px 11px;border:1.5px solid var(--ink);background:#fff;cursor:zoom-in;rotate:-2deg;
  box-shadow:5px 6px 0 rgba(42,32,48,.16),0 18px 30px -20px rgba(42,32,48,.55);transition:rotate .4s cubic-bezier(.3,1.6,.5,1),translate .4s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.plan-btn .plan-img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.plan-btn .tape{position:absolute;z-index:2;left:50%;top:-13px;width:104px;height:28px;translate:-50% 0;rotate:3deg;background:rgba(207,147,227,.6);border:1px solid rgba(90,31,115,.25)}
.plan-btn .ph-pill{left:50%;top:auto;bottom:22px;translate:-50% 0;white-space:nowrap}
.plan-btn:hover,.plan-btn:focus-visible{rotate:0deg;translate:0 -6px;box-shadow:7px 9px 0 rgba(42,32,48,.18),0 24px 34px -20px rgba(42,32,48,.6)}
.plan-btn:hover .ph-pill,.plan-btn:focus-visible .ph-pill{background:var(--heather)}
.plan-txt{display:grid;gap:.9rem;justify-items:start}
.plan-kicker{color:var(--blue);rotate:-2deg;font-size:1.25rem}
.plan-h{font-family:var(--serif);font-weight:600;font-size:clamp(2.1rem,3.6vw,3.1rem);line-height:1;color:var(--ink)}
.plan-h span[aria-hidden]{color:var(--heather);font-weight:400;margin:0 .08em}
.plan-pary{display:grid;gap:.55rem;margin:0}
.plan-pary div{display:grid;grid-template-columns:5.2rem 1fr;gap:.6rem;align-items:baseline;padding:.55rem 0;border-top:1.5px dashed rgba(42,32,48,.22)}
.plan-pary dt{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--heather)}
.plan-pary dd{margin:0;color:var(--ink-2);font-size:1.02rem;line-height:1.45}
.plan-pary dd b{color:var(--ink);font-size:1.08rem}
.plan-txt>p:not(.hand){color:var(--ink-2);max-width:42ch}
@media (max-width:980px){
  .dog-plan{grid-template-columns:minmax(0,420px);justify-items:center;gap:26px}
  .plan-txt{max-width:420px;width:100%}
}
@media (prefers-reduced-motion:reduce){.plan-btn{transition:none}}
/* menu nigdy nie łamie nazw zakładek; na węższych laptopach ciaśniej */
.nav a{white-space:nowrap}
@media (min-width:1220px) and (max-width:1400px){.nav{padding:.25rem .6rem}.nav a{font-size:.93rem;padding:.45em .44em}}
/* piesek (gotowe wycięcie od klientki): mały, stoi na gzymsie i nie zahacza o przyciski ani kreskę ze statystykami */
@media (min-width:981px){
  .hero-facts{width:fit-content}
  .m-dog{left:-36cqi;width:32cqi;top:calc(119.5cqi - 30.4cqi)}
}
@media (min-width:981px) and (max-width:1400px){
  .m-dog{left:-34cqi;width:30cqi;top:calc(119.5cqi - 28.5cqi)}
}
/* przyciski hero pod statystykami (życzenie klientki) */
.hero-facts{margin-top:clamp(1.6rem,4vh,2.6rem)}
.hero-cta{margin-top:clamp(1.6rem,3.5vh,2.2rem)}
@media (min-width:981px){.hero-cta .btn{padding:.75em 1.1em;font-size:.94rem}}
@media (min-width:981px) and (max-width:1320px){.hero-cta{flex-direction:column;align-items:flex-start}}
@media (min-width:1321px) and (max-width:1500px){.scene{translate:24px 0}}

/* nagłówek na wąskich telefonach (też z powiększonym tekstem systemowym): przycisk menu zawsze widoczny */
.nav .nav-lang{display:none}
.burger,.head-tools{flex:none}
@media (max-width:1219px){
  .nav .nav-lang{display:inline-block;margin-top:.4rem;font-family:var(--sans);font-size:1rem;font-weight:650;color:var(--blue)}
}
@media (max-width:520px){
  .head-tools .lang{display:none}
  .brand{min-width:0;flex:1 1 auto;overflow:hidden;font-size:min(1.28rem,6vw)}
  .head{padding-inline:max(12px,var(--gut))}
}

/* =====================================================================
   PANEL: podpisy zdjęć w powiększeniu, logo przy linkach, karty bez zdjęć
   ===================================================================== */
.lb-cap{position:absolute;left:64px;right:64px;bottom:64px;margin:0;text-align:center;font-size:1.02rem;line-height:1.4;color:#f3eef4;text-wrap:balance}
.lb-view.has-cap{padding-bottom:120px}
@media (max-width:640px){.lb-cap{left:62px;right:62px;bottom:62px;font-size:.95rem}.lb-view.has-cap{padding-bottom:128px}}
.foot-cols a:has(.link-logo){display:inline-flex;align-items:center;gap:.55em}
.link-logo{width:auto;height:30px;max-width:90px;object-fit:contain;border-radius:4px;background:#fff;padding:2px}
.card-ph-pusty,.snap-ph-pusty{display:grid;place-items:center;aspect-ratio:4/5;background:var(--dots),var(--mist);color:var(--heather-d);font-family:var(--serif);font-style:italic;font-size:1.3rem;text-align:center;padding:1rem}

/* =====================================================================
   PANEL v2: pieski jako karty, kocięta + ostatnie mioty, miot bez zdjęć
   ===================================================================== */
.dogs{display:block}
.dogs .grid{margin-top:clamp(18px,3vw,34px)}
.dogs .dog-plan{margin-top:clamp(40px,6vw,80px)}
.dogs-gal{margin-top:clamp(44px,6vw,84px)}
.dogs-gal .h3{text-align:center;margin-bottom:1.1rem}
.dogs-gal .dogs-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:980px;margin-inline:auto}
.dogs-gal-btn{text-align:center;margin-top:1.6rem}
@media (max-width:640px){.dogs-gal .dogs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kit-ost{margin-top:clamp(26px,4vw,52px)}
.kit-ost-h{text-align:center;margin-bottom:.6rem}
.now-bez-foto{grid-template-columns:1fr}
.now-pyt{color:var(--ink-2);margin-top:.6rem}
/* brakujące zdjęcie (np. jeszcze niewgrane na serwer) */
img.img-brak{color:transparent;font-size:0;background:var(--dots),var(--mist);object-fit:cover;min-height:120px}
.recent-img.img-brak,.now-img.img-brak,.card-img.img-brak{aspect-ratio:4/3;width:100%}
/* kocięta: każde z własnym zdjęciem */
.kit{flex-wrap:nowrap;gap:.8rem}
.kit-ph{flex:none;display:block;width:64px;height:64px;padding:0;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--mist);cursor:zoom-in}
.kit-ph-pusty{display:grid;place-items:center;cursor:default;color:var(--heather)}
.kit-ph-pusty .ic{width:26px;height:26px}
.kit-img{width:100%;height:100%;object-fit:cover}
.kit-txt{display:grid;gap:.1rem;margin-right:auto;min-width:0}
.kit-txt .kit-meta{margin:0}
.kit-opis{font-size:.88rem;color:var(--ink-2)}

/* =====================================================================
   POLECAMY (#linki): widoczne linki do organizacji, hodowli i sklepów
   ===================================================================== */
.linki-sek{background:var(--dots),var(--paper)}
.linki-kol{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:clamp(24px,4vw,56px);max-width:1100px;margin:clamp(18px,3vw,34px) auto 0}
.linki-kol .h4{margin-bottom:.8rem}
.linki-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lk{display:flex;align-items:center;gap:14px;padding:12px 16px;background:#fff;border:1.8px solid var(--ink);border-radius:var(--sketch-2);box-shadow:3px 4px 0 rgba(42,32,48,.9);color:var(--ink);text-decoration:none;transition:translate .2s,box-shadow .2s}
.lk:hover,.lk:focus-visible{translate:-2px -2px;box-shadow:5px 7px 0 rgba(42,32,48,.9);color:var(--ink)}
.lk-logo{width:52px;height:40px;object-fit:contain;flex:none}
.lk-ini{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--mist);color:var(--heather-d);font-family:var(--serif);font-size:1.3rem;font-weight:600}
.lk-txt{display:grid;min-width:0;margin-right:auto}
.lk-txt b{font-weight:650;line-height:1.25}
.lk-txt small{color:var(--ink-2);font-size:.85rem;overflow-wrap:anywhere}
.lk-go{flex:none;color:var(--heather);font-size:1.2rem;transition:translate .2s}
.lk:hover .lk-go{translate:2px -2px}
@media (prefers-reduced-motion:reduce){.lk,.lk-go{transition:none}}
@media (min-width:1220px) and (max-width:1400px){.head-call span{display:none}.head-call{padding:.6em .85em}.head-tools{gap:.5rem}}