/* Aqua Dog House v24 — interface summer system */
:root{
 --summer-cream:#fff9ed;--summer-sand:#ffe5b7;--accent-gold:#f5b942;--accent-orange:#ed8b3a;--accent-coral:#ef997f;--accent-sky:#9de3f2;--accent-sea:#42b8d0;--ink-primary:#173846;
 --surface-glass:rgba(255,255,255,.66);--border-glass:rgba(255,255,255,.72);--shadow-card:0 2px 3px rgba(69,86,87,.04),0 18px 45px rgba(63,113,126,.13),0 52px 130px rgba(233,145,70,.11);
 --font-body:"Montserrat","Avenir Next","Segoe UI",Arial,sans-serif;--font-script:Georgia,"Times New Roman",serif;
}
html{background:var(--summer-cream);scroll-behavior:smooth}body{font-family:var(--font-body);background:linear-gradient(145deg,#fffaf0 0%,#f3fbfb 48%,#fff3df 100%);color:var(--ink-primary);overflow-x:hidden;-webkit-tap-highlight-color:transparent}body::selection{background:transparent}body,body *{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable],.news-card-text,.news-modal-text{user-select:text;-webkit-user-select:text}
html[data-theme="dark"]{--bg:#26222a;--surface:rgba(53,48,55,.82);--surface-solid:#353038;--surface-soft:#302b33;--text:#fff6e9;--muted:#c9c0b5;--line:rgba(255,222,178,.16);--surface-glass:rgba(55,49,55,.74);--border-glass:rgba(255,224,184,.15);--ink-primary:#fff6e9}html[data-theme="dark"] body{background:linear-gradient(145deg,#29242b,#252b31 52%,#322921)}
/* Stable decorative light fields — fixed layers do not jump between routes. */
.ambient{z-index:-3;contain:strict;transform:translateZ(0)}.ambient-orb{opacity:.32;filter:blur(78px);will-change:transform}.orb-one{background:radial-gradient(circle,#ffe697 0%,#88dff0 42%,transparent 72%)}.orb-two{background:radial-gradient(circle,#ffb17d 0%,#ffe39a 45%,transparent 74%)}
.site-header{border-bottom:1px solid transparent}.site-header.is-scrolled{background:rgba(255,249,237,.72);border-color:rgba(255,255,255,.82);box-shadow:0 14px 42px rgba(42,99,111,.08);backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%)}html[data-theme="dark"] .site-header.is-scrolled{background:rgba(38,34,42,.75)}
.brand-mark img,.footer-mark{filter:none!important}.brand-mark{box-shadow:0 9px 24px rgba(43,159,183,.22),0 0 0 1px rgba(255,255,255,.72)}
.icon-button,.language-switcher>summary{background:rgba(255,255,255,.62)!important;border:1px solid rgba(255,255,255,.78)!important;box-shadow:0 10px 30px rgba(43,99,111,.1);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%)}html[data-theme="dark"] .icon-button,html[data-theme="dark"] .language-switcher>summary{background:rgba(47,42,49,.78)!important;border-color:rgba(255,255,255,.12)!important}
.theme-toggle{position:relative;overflow:hidden}.theme-toggle svg{position:absolute;transition:opacity .32s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}.theme-toggle .sun-icon{opacity:1;transform:rotate(0) scale(1)}.theme-toggle .moon-icon{opacity:0;transform:rotate(-90deg) scale(.55)}html[data-theme="dark"] .theme-toggle .sun-icon{opacity:0;transform:rotate(100deg) scale(.55)}html[data-theme="dark"] .theme-toggle .moon-icon{opacity:1;transform:rotate(0) scale(1)}.theme-toggle:active{transform:scale(.88) rotate(-5deg)}
.language-switcher{position:relative}.language-switcher>summary{height:44px;min-width:58px;border-radius:15px;display:flex!important;align-items:center;justify-content:center;gap:7px;padding:0 10px;list-style:none;cursor:pointer}.language-switcher>summary::-webkit-details-marker{display:none}.language-current-flag,.language-option-flag{font-size:18px;line-height:1}.language-switcher>div{display:grid!important;position:absolute;right:0;top:calc(100% + 10px);min-width:160px;padding:8px;border-radius:20px;background:rgba(255,253,247,.88);border:1px solid rgba(255,255,255,.82);box-shadow:0 24px 65px rgba(42,79,87,.2);backdrop-filter:blur(24px) saturate(175%);-webkit-backdrop-filter:blur(24px) saturate(175%);opacity:0;visibility:hidden;transform:translateY(-10px) scale(.94);transform-origin:top right;transition:opacity .28s ease,transform .38s cubic-bezier(.16,1,.3,1),visibility 0s linear .38s}.language-switcher[open]>div{opacity:1;visibility:visible;transform:none;transition-delay:0s}.language-switcher>div button{display:flex;align-items:center;gap:10px;border:0;background:transparent;border-radius:14px;padding:11px 12px;font:700 12px var(--font-body);color:var(--ink-primary);cursor:pointer;transition:background .25s ease,transform .25s ease}.language-switcher>div button:hover{background:rgba(105,207,225,.16);transform:translateX(3px)}.language-switcher>div button.is-active{background:rgba(245,185,66,.18)}html[data-theme="dark"] .language-switcher>div{background:rgba(48,43,50,.94)}html[data-theme="dark"] .language-switcher>div button{color:#fff6e9}
/* Intro eraser wave: the colored frame is physically covered by the wave. */
.boot-screen{background:linear-gradient(145deg,#fff7e4,#dff8fb 62%,#ffd8a6)}.boot-mark img{filter:drop-shadow(0 18px 45px rgba(35,122,145,.22))!important}.boot-wave{left:-8%;right:-8%;bottom:-38%;height:82%;border-radius:0;background:none;filter:drop-shadow(0 -15px 25px rgba(255,255,255,.42));animation:bootEraser 1.65s cubic-bezier(.72,0,.18,1) forwards}.boot-wave::before{display:none}@keyframes bootEraser{0%{transform:translateY(115%) scaleX(.82)}42%{transform:translateY(8%) scaleX(1.08)}100%{transform:translateY(-155%) scaleX(1.18)}}
/* Route choreography, around one second, without display-frame flashes. */
.page-view{transform-origin:50% 16%;will-change:opacity,transform,filter}.page-view.is-leaving{animation:routeFadeOut .5s cubic-bezier(.4,0,.2,1) both}.page-view.is-entering{animation:routeFadeIn .72s cubic-bezier(.16,1,.3,1) both}@keyframes routeFadeOut{to{opacity:0;transform:scale(.972) translateY(-12px);filter:blur(12px)}}@keyframes routeFadeIn{from{opacity:0;transform:scale(.975) translateY(18px);filter:blur(13px)}to{opacity:1;transform:none;filter:none}}
.page-transition{background:radial-gradient(circle at 50% 60%,rgba(157,227,242,.14),rgba(255,217,158,.09) 45%,transparent 70%);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}.page-transition.is-active{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* Hero */
.hero-progress{display:none!important}.hero-switches{position:absolute;z-index:6;right:clamp(18px,4vw,66px);bottom:32px;display:flex;gap:10px}.hero-switches button{width:58px;height:58px;border-radius:20px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:white;font-size:25px;cursor:pointer;box-shadow:0 16px 40px rgba(0,0,0,.14);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s ease}.hero-switches button:hover{transform:translateY(-5px) scale(1.05);background:rgba(255,255,255,.24)}.hero-switches button:active{transform:scale(.9)}.hero-slide{transition:opacity 1.15s cubic-bezier(.22,1,.36,1),transform 1.45s cubic-bezier(.22,1,.36,1),filter 1.05s ease}.hero-slide.is-prev{transform:scale(.88);filter:blur(15px) saturate(.8)}.hero-slide.is-active{transform:scale(1);filter:none}
/* Interface card base and pointer-driven volume. */
.value-card,.entity-card,.news-card,.social-card,.contact-row,.documents-strip>div,.litter-demo-card{--rx:0deg;--ry:0deg;--lift:0px;--glow-x:50%;--glow-y:50%;position:relative;border:1px solid var(--border-glass)!important;box-shadow:var(--shadow-card)!important;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0);transform-style:preserve-3d;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease,border-color .42s ease;background:var(--surface-glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}.value-card::before,.entity-card::before,.news-card::before,.social-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--glow-x) var(--glow-y),rgba(255,222,130,.26),transparent 52%);opacity:.45;transition:opacity .3s ease;z-index:1}.value-card>* ,.entity-card>* ,.news-card>* ,.social-card>*{position:relative;z-index:2}@media(hover:hover) and (pointer:fine){.card-tilt:hover{--lift:-9px;box-shadow:0 4px 7px rgba(63,85,88,.06),0 30px 70px rgba(53,113,126,.18),0 65px 150px rgba(235,145,61,.16)!important;border-color:rgba(255,203,105,.72)!important}.card-tilt:hover::before{opacity:1}}
.value-card{overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(255,238,202,.64) 52%,rgba(184,235,242,.5));min-height:350px}.value-card:hover{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0)!important}.card-ripple{opacity:.42;transform:none!important}.value-card:hover .card-ripple{transform:none!important}.chat-bubbles i{transform:none!important;animation:none!important}.health-mark{display:grid!important;place-items:center!important;line-height:1!important;padding:0!important}.value-icon{animation:none!important}.brand-badges img:hover{transform:translateY(-4px) scale(1.12)}
/* Dynamic entities */
.dog-grid,.entity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.dog-grid.section{padding-top:0}.entity-card{min-height:470px;border-radius:34px;overflow:hidden;cursor:pointer;color:white;background:linear-gradient(145deg,#7ed7e7,#efa75e);isolation:isolate}.entity-card-media{position:absolute;inset:0;background:linear-gradient(145deg,#62c5da,#f0b55e);overflow:hidden}.entity-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .45s ease}.entity-card:hover .entity-card-media img{transform:scale(1.055)}.entity-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,45,54,.04),rgba(11,39,48,.2) 42%,rgba(7,29,36,.88));z-index:1}.entity-card-copy{position:absolute;z-index:3;left:28px;right:28px;bottom:28px;transition:opacity .18s ease,transform .32s ease,filter .18s ease}.entity-card-copy small{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:rgba(255,255,255,.72)}.entity-card-copy h2,.entity-card-copy h3{font:650 clamp(28px,3.3vw,46px)/1.04 var(--font-script);margin:12px 0 14px;color:white}.entity-card-copy p{color:rgba(255,255,255,.82);font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.entity-card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}.entity-card-meta span{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);font-size:10px;font-weight:750}.entity-card.is-morph-source .entity-card-copy,.entity-card.is-morph-source .entity-card-media,.news-card.is-morph-source>*{opacity:0!important;filter:blur(7px)!important;transform:scale(.94)!important}.entity-card.is-morph-source{background:linear-gradient(145deg,#74d4e5,#f5bb59)!important}.entity-card.entity-litter{min-height:390px;background:linear-gradient(145deg,#f0a354,#ffd77a)}.entity-card.entity-puppy{min-height:420px;background:linear-gradient(145deg,#85ddeb,#f2a780)}.entity-empty{grid-column:1/-1;padding:70px 32px;text-align:center;border:1px dashed rgba(66,184,208,.35);border-radius:30px;background:rgba(255,255,255,.42);color:var(--muted)}.entity-empty strong{display:block;font:600 30px var(--font-script);color:var(--ink-primary);margin-bottom:8px}
/* Morph phases and universal modal */
#morphStage{position:fixed;z-index:1998;pointer-events:none;margin:0;background:linear-gradient(135deg,#6dd2e3 0%,#f8c456 54%,#ef9379 100%);box-shadow:0 40px 160px rgba(34,71,80,.34);opacity:0;overflow:hidden;will-change:left,top,width,height,clip-path,border-radius,transform}#morphStage::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.58),transparent 34%),linear-gradient(135deg,transparent,rgba(255,255,255,.18));opacity:.7}
body.entity-cinema #app,body.entity-cinema>.site-header,body.entity-cinema>.site-footer,body.entity-cinema>.mobile-menu{transform:scale(.965);filter:blur(9px) saturate(.88);opacity:.68;transition:transform .75s cubic-bezier(.16,1,.3,1),filter .75s ease,opacity .55s ease;pointer-events:none}
.entity-overlay{position:fixed;inset:0;z-index:1999;visibility:hidden;opacity:0;background:var(--bg);overflow:auto;overscroll-behavior:contain;transition:opacity .18s ease}.entity-overlay.is-open{visibility:visible;opacity:1}.entity-modal-content{opacity:0;transform:translateY(24px);filter:blur(8px);transition:opacity .62s ease,transform .72s cubic-bezier(.16,1,.3,1),filter .62s ease}.entity-overlay.show-content .entity-modal-content{opacity:1;transform:none;filter:none}.entity-modal-close{position:fixed;z-index:6;right:22px;top:22px;width:56px;height:56px;border:1px solid rgba(255,255,255,.46);border-radius:19px;background:rgba(15,51,61,.32);color:#fff;font-size:30px;line-height:1;cursor:pointer;backdrop-filter:blur(18px);box-shadow:0 16px 42px rgba(0,0,0,.17);transition:transform .32s cubic-bezier(.16,1,.3,1),background .3s ease}.entity-modal-close:hover{transform:rotate(90deg) scale(1.07);background:rgba(15,51,61,.5)}.entity-modal-hero{position:relative;min-height:min(82svh,880px);display:flex;align-items:flex-end;overflow:hidden;color:white;background:linear-gradient(145deg,#55bfd4,#f0a450)}.entity-modal-hero-bg{position:absolute;inset:-36px;background-size:cover;background-position:center;filter:blur(34px) saturate(.85);transform:scale(1.1);opacity:.72}.entity-modal-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}.entity-modal-hero::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(5,31,38,.78),transparent 58%),linear-gradient(90deg,rgba(5,31,38,.25),transparent)}.entity-modal-title{position:relative;z-index:3;width:min(1200px,calc(100% - 64px));margin:auto;padding:80px 0}.entity-modal-title small{letter-spacing:.16em;text-transform:uppercase;font-weight:800}.entity-modal-title h2{font:650 clamp(48px,8vw,112px)/.96 var(--font-script);margin:15px 0;color:white}.entity-modal-title p{max-width:720px;color:rgba(255,255,255,.78)}.entity-modal-body{width:min(1200px,calc(100% - 64px));margin:auto;padding:72px 0 120px}.entity-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:13px}.entity-fact{padding:22px;border:1px solid var(--border-glass);border-radius:20px;background:var(--surface-glass);box-shadow:0 14px 36px rgba(46,91,101,.08);backdrop-filter:blur(16px)}.entity-fact small{display:block;margin-bottom:7px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.13em}.entity-story{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;padding:95px 0}.entity-story h3{font:600 clamp(38px,5vw,66px)/1.05 var(--font-script)}.entity-story p{font-size:18px;line-height:1.8;overflow-wrap:anywhere}.entity-media-title{font:600 clamp(34px,4vw,54px) var(--font-script);margin:0 0 30px}
.smart-media-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;grid-auto-rows:84px;gap:12px}.smart-media{position:relative;grid-column:span 4;grid-row:span 4;border:0;border-radius:22px;overflow:hidden;background:linear-gradient(145deg,#e9f7f8,#ffedce);cursor:zoom-in;isolation:isolate}.smart-media.is-wide{grid-column:span 8;grid-row:span 4}.smart-media.is-tall{grid-column:span 4;grid-row:span 6}.smart-media::before{content:"";position:absolute;inset:-16px;background:var(--media-bg) center/cover;filter:blur(25px) saturate(.85);opacity:.42}.smart-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;opacity:0;transition:opacity .4s ease,transform .7s cubic-bezier(.16,1,.3,1)}.smart-media.is-loaded img{opacity:1}.smart-media:hover img{transform:scale(1.025)}.media-loader{position:absolute;z-index:3;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;border:3px solid rgba(66,184,208,.18);border-top-color:var(--accent-orange);animation:mediaSpin .8s linear infinite}.is-loaded>.media-loader,.media-loaded>.media-loader{opacity:0;visibility:hidden}@keyframes mediaSpin{to{transform:rotate(360deg)}}
.entity-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px;align-items:start}.entity-video{position:relative;width:100%;aspect-ratio:var(--video-ratio,16/9);max-height:78svh;border-radius:24px;overflow:hidden;background:#101b20;box-shadow:0 26px 70px rgba(20,45,51,.22)}.entity-video video,.entity-video iframe,.entity-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;z-index:2}.entity-video::before{content:"";position:absolute;inset:-15px;background:var(--video-poster) center/cover;filter:blur(25px);opacity:.55}.entity-video.is-vertical{max-width:440px;justify-self:center}.entity-no-media{padding:48px;text-align:center;border-radius:24px;background:rgba(255,255,255,.42);color:var(--muted)}
/* News media: full frame, dynamic ratio, no black gaps. */
.news-card{overflow:hidden;border-radius:28px!important;padding:0!important;cursor:pointer}.news-card:hover{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0)!important}.news-card-media{aspect-ratio:var(--media-ratio,16/10)!important;background:linear-gradient(145deg,#dff6f8,#ffe4bb)!important}.news-card-media.has-single-media{width:100%!important;max-width:none!important}.news-media-item{background:linear-gradient(145deg,#dff6f8,#ffe4bb)!important;isolation:isolate}.news-media-item::before{content:"";position:absolute;inset:-12px;background:var(--preview-poster) center/cover;filter:blur(24px);opacity:.45}.news-media-item img{position:relative;z-index:2;object-fit:contain!important}.news-card-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;max-width:100%}.news-card-open{display:flex!important}.news-age.is-archive{display:none!important}.news-card-meta{min-height:46px;align-items:center}.news-modal-media{display:grid!important;grid-template-columns:repeat(12,1fr)!important;grid-auto-flow:dense;gap:12px!important}.news-modal-photo-wrap{grid-column:span 6!important;border-radius:22px!important;background:#e9f5f5}.news-modal-photo-wrap.is-single-media{grid-column:1/-1!important}.news-modal-photo img{object-fit:contain!important}.news-modal-video{grid-column:span 6!important;width:100%!important;max-width:none!important;min-height:0!important;background:#101a1e!important;border-radius:22px!important;overflow:hidden;aspect-ratio:var(--media-ratio,16/9)!important}.news-modal-video video,.news-modal-video iframe{object-fit:contain!important;width:100%!important;height:100%!important;border:0!important}.news-modal-text{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
/* About radial glow */
.story-section::before{content:"";position:absolute;left:-22vw;top:-15%;width:min(78vw,1050px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,198,83,.34) 0%,rgba(255,156,84,.17) 28%,rgba(157,227,242,.08) 52%,transparent 72%);filter:blur(8px);pointer-events:none;z-index:-1}.story-aside span{text-shadow:0 0 34px rgba(255,187,61,.48)}
/* Contacts and script heading */
.contact-copy h1{font-family:var(--font-script);font-style:italic;font-weight:500;letter-spacing:-.035em}.contact-panel{animation:contactFadeIn .8s cubic-bezier(.16,1,.3,1) both}.page-view:not(.is-active) .contact-panel{animation:none}@keyframes contactFadeIn{from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}.social-card:hover,.contact-row:hover{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,var(--lift),0)!important}
/* Changelog and efficient canvas confetti */
.changelog-overlay{backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}.changelog-modal{border:1px solid rgba(255,255,255,.72);background:rgba(255,252,245,.86);box-shadow:0 40px 140px rgba(49,83,88,.27);backdrop-filter:blur(28px) saturate(150%)}html[data-theme="dark"] .changelog-modal{background:rgba(47,42,49,.92)}.changelog-close{position:sticky!important;float:right;top:12px;right:12px;z-index:5}.changelog-canvas{position:fixed;inset:0;z-index:1;pointer-events:none}.changelog-modal{z-index:2}
/* Maintenance live overlay */
.maintenance-screen{position:fixed!important;inset:0!important;z-index:10000!important;display:grid!important;place-items:center!important;align-content:center!important;gap:16px!important;background:linear-gradient(145deg,#fff3d9,#dff8f9 58%,#ffd39e)!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,visibility 0s linear .55s}.maintenance-screen.is-live{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.maintenance-screen img{width:112px!important;height:112px!important;object-fit:contain!important;border-radius:0!important;box-shadow:none!important}.maintenance-screen h1{font-family:var(--font-script);margin:8px 0 0!important}.maintenance-countdown{font-weight:800;color:#9b5b1f}.maintenance-screen .maintenance-wave{display:block!important;background:linear-gradient(180deg,#83dce7,#3ea9c1)!important;opacity:.32!important}.maintenance-reload-note{font-size:11px;opacity:.6}
/* Mobile navigation */
.mobile-menu{background:linear-gradient(160deg,rgba(255,249,237,.96),rgba(224,248,250,.95) 58%,rgba(255,218,173,.94));backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}.mobile-menu button{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.75)!important;background:rgba(255,255,255,.48)!important;box-shadow:0 14px 34px rgba(42,101,114,.1);transform:translateY(15px);opacity:0}.mobile-menu.is-open button{animation:menuItemIn .55s cubic-bezier(.16,1,.3,1) forwards}.mobile-menu.is-open button:nth-of-type(2){animation-delay:.04s}.mobile-menu.is-open button:nth-of-type(3){animation-delay:.08s}.mobile-menu.is-open button:nth-of-type(4){animation-delay:.12s}.mobile-menu.is-open button:nth-of-type(5){animation-delay:.16s}.mobile-menu.is-open button:nth-of-type(6){animation-delay:.2s}.mobile-menu.is-open button:nth-of-type(7){animation-delay:.24s}@keyframes menuItemIn{to{opacity:1;transform:none}}.mobile-menu button:active{transform:scale(.96)!important;background:rgba(255,204,110,.28)!important}
@media(max-width:1100px){.main-nav{gap:15px}.nav-link{font-size:11px}.dog-grid,.entity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.entity-card{min-height:430px}}
@media(max-width:760px){.dog-grid,.entity-grid{grid-template-columns:1fr}.entity-card,.entity-card.entity-litter,.entity-card.entity-puppy{min-height:430px}.hero-switches{right:18px;bottom:28px}.hero-switches button{width:50px;height:50px;border-radius:17px}.scroll-cue{display:none}.story-section::before{left:-60vw;width:150vw;top:-6%}.entity-modal-title,.entity-modal-body{width:min(100% - 32px,1200px)}.entity-modal-title{padding:62px 0}.entity-modal-title h2{font-size:clamp(44px,13vw,68px)}.entity-modal-hero{min-height:88svh}.entity-story{grid-template-columns:1fr;gap:22px;padding:65px 0}.smart-media-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:68px}.smart-media,.smart-media.is-wide{grid-column:span 6;grid-row:span 4}.smart-media.is-tall{grid-column:span 6;grid-row:span 7}.entity-videos{grid-template-columns:1fr}.news-modal-media{grid-template-columns:1fr!important}.news-modal-photo-wrap,.news-modal-photo-wrap.is-single-media,.news-modal-video{grid-column:1!important}.language-switcher>div{position:fixed;right:16px;top:76px}.value-card,.entity-card,.news-card,.social-card,.contact-row{transform:none!important}.card-tilt{--rx:0deg!important;--ry:0deg!important;--lift:0px!important}.entity-modal-close{width:50px;height:50px;top:14px;right:14px}body.entity-cinema #app,body.entity-cinema>.site-header,body.entity-cinema>.site-footer{transform:scale(.982);filter:blur(5px)}}
@media(hover:none),(pointer:coarse){.card-tilt{transform:none!important}.card-tilt::before{display:none}.ambient-orb{filter:blur(65px)}.value-card,.entity-card,.news-card,.social-card,.contact-row{backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%)}}
@media(prefers-reduced-motion:reduce){#morphStage{display:none}.entity-overlay{transition:none}.entity-modal-content{transition:opacity .2s ease}.ambient-orb,.maintenance-wave{animation:none!important}}

/* Final interface source */
:root{--font-body:"Montserrat","Segoe UI",Arial,sans-serif;--font-script:"Marck Script","Segoe Script",cursive}
.site-header{isolation:isolate;contain:layout style;transform:translateZ(0);backface-visibility:hidden;will-change:auto;background-clip:padding-box}
.page-view{transition:opacity .48s ease,transform .48s cubic-bezier(.22,1,.36,1)!important;filter:none}.page-view.is-leaving{opacity:0!important;transform:translateY(8px) scale(.995)!important}.page-view.is-entering{animation:finalPageIn .58s cubic-bezier(.22,1,.36,1) both!important}@keyframes finalPageIn{from{opacity:0;transform:translateY(12px) scale(.995)}to{opacity:1;transform:none}}
body.entity-cinema #app,body.entity-cinema>.site-header,body.entity-cinema>.site-footer,body.entity-cinema>.mobile-menu{opacity:0!important;filter:none!important;transform:scale(.94)!important;transition:opacity .42s ease,transform .7s cubic-bezier(.16,1,.3,1)!important}
#morphStage{background:linear-gradient(145deg,rgba(250,252,249,.98),rgba(218,240,240,.98))!important;border:1px solid rgba(67,139,150,.28)!important;box-shadow:0 35px 100px rgba(19,67,77,.24)!important;overflow:hidden}
.entity-card:active{animation:cardBounce .42s cubic-bezier(.34,1.56,.64,1)}@keyframes cardBounce{50%{transform:perspective(1100px) scale(.975) translateY(5px)}}
.entity-modal-hero{width:100%;border-radius:0}.entity-modal-hero>img{width:100%;height:100%;object-fit:cover}.smart-media{background:var(--surface-solid)!important}.smart-media::before{display:none!important}.smart-media img{object-fit:contain!important;width:100%;height:100%}.entity-video,.news-modal-video,.news-media-item{background:transparent!important;border-color:rgba(95,145,151,.24)!important}.entity-video video,.entity-video iframe,.news-modal-video video,.news-modal-video iframe{object-fit:contain!important;background:transparent!important}
.contact-row,.social-card{transition:transform .48s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .3s ease!important}.contact-row:hover,.social-card:hover{--lift:-8px;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px)!important}
.value-card,.entity-card,.news-card,.social-card,.contact-row,.contact-panel{border:1px solid rgba(45,115,128,.23)!important;box-shadow:0 20px 55px rgba(32,83,92,.14),inset 0 1px rgba(255,255,255,.7)!important}html[data-theme="dark"] .value-card,html[data-theme="dark"] .entity-card,html[data-theme="dark"] .news-card,html[data-theme="dark"] .social-card,html[data-theme="dark"] .contact-row,html[data-theme="dark"] .contact-panel{border-color:rgba(151,222,230,.24)!important;box-shadow:0 24px 65px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.09)!important;color:#fff8ed!important}html[data-theme="dark"] .muted,html[data-theme="dark"] p{color:#e1d8ce}
.icon-button,.hero-switches button,.lightbox-close,.lightbox-arrow,.entity-modal-close{display:grid!important;place-items:center!important;line-height:1!important}
.news-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),360px))!important;justify-content:center}.news-card{width:100%;max-width:360px;overflow:hidden}.news-card-text{overflow-wrap:anywhere}.news-read-more{position:relative;z-index:3;border:1px solid rgba(42,119,132,.32);background:var(--surface-solid);color:var(--text);border-radius:12px;padding:9px 12px;font-weight:750;cursor:pointer}.news-auto-status{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border-radius:999px;background:#e5f5f3;color:#155360;border:1px solid #9bc9c7;font-size:10px;font-weight:850;letter-spacing:.05em}.news-auto-status.important{background:#fff0c9;color:#7a4a00;border-color:#e5bd55}html[data-theme="dark"] .news-auto-status{background:#143f48;color:#c9f5f5;border-color:#3b7780}
.language-switcher>summary{box-sizing:border-box}.language-switcher[open]>summary{outline:2px solid rgba(77,184,200,.35);outline-offset:2px}
.maintenance-screen{color:#153c46!important}.maintenance-screen p{color:#284f58!important}html[data-theme="dark"] .maintenance-screen{background:linear-gradient(145deg,#101b22,#18323a 58%,#26312e)!important;color:#fff8ed!important}html[data-theme="dark"] .maintenance-screen p,html[data-theme="dark"] .maintenance-countdown{color:#d8f4f3!important}
.boot-wave-body{animation:waterBody 2.8s ease-in-out infinite alternate;transform-origin:center}.boot-wave-foam{animation:waterFoam 1.8s ease-in-out infinite alternate}@keyframes waterBody{to{transform:translateY(-18px) rotate(.8deg) scaleX(1.04)}}@keyframes waterFoam{to{transform:translate(26px,-11px) rotate(-.5deg);stroke-dashoffset:-90}}

.news-card-text.is-collapsed:not(.is-expanded){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}.entity-description a{color:#147f96;font-weight:750;text-decoration:underline;text-underline-offset:3px}
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .news-card button,
html[data-theme="dark"] .news-read-more,
html[data-theme="dark"] .news-card-meta,
html[data-theme="dark"] .news-card-text,
html[data-theme="dark"] .news-card-contacts,
html[data-theme="dark"] .site-header .icon-button { color:#fff8ed }
html[data-theme="dark"] .news-read-more { background:rgba(77,184,200,.18);border:1px solid rgba(169,232,236,.42) }
html[data-theme="dark"] .news-read-more{background:#153640!important;color:#fffdf8!important;border-color:#78d7df!important}


/* Authoritative interface source */
:root{--bg:#f8fbfa;--surface:rgba(255,255,255,.72);--surface-solid:#fffdf8;--surface-soft:#edf7f6;--text:#173846;--muted:#526d73;--line:rgba(255,255,255,.58);--glass-bg:rgba(255,255,255,.58);--glass-border:rgba(255,255,255,.58);--surface-glass:rgba(255,255,255,.62);--border-glass:rgba(255,255,255,.58);--font-label:"Cormorant Garamond",Georgia,serif}
html[data-theme="dark"]{--bg:#101d24;--surface:rgba(24,44,51,.82);--surface-solid:#183039;--surface-soft:#142831;--text:#fff9ee;--muted:#c5d3d3;--line:rgba(255,255,255,.26);--glass-bg:rgba(22,42,49,.72);--glass-border:rgba(255,255,255,.28);--surface-glass:rgba(22,42,49,.74);--border-glass:rgba(255,255,255,.3);--ink-primary:#fff9ee}
.eyebrow,.value-icon,.news-card-tag{font-family:var(--font-label)}
.site-header{isolation:isolate;contain:layout style paint;backface-visibility:hidden}.icon-button,.language-switcher>summary{border-color:rgba(255,255,255,.32)!important;box-shadow:0 8px 24px rgba(25,66,75,.08)}
.language-switcher>summary,.menu-toggle,.language-switcher>summary *,.menu-toggle *{transition:opacity .32s ease,transform .55s cubic-bezier(.34,1.56,.64,1)}.language-switcher>summary:active,.menu-toggle:active{transform:scale(.88) rotate(-5deg)}.language-switcher>div button.is-confirmed{animation:languageConfirm .38s cubic-bezier(.34,1.56,.64,1)}@keyframes languageConfirm{50%{transform:scale(1.12)}}
.boot-screen{animation:bootHold 2.35s linear both}.boot-wave{left:-15%;right:-15%;bottom:-72%;height:175%;animation:bootEraser 2.25s cubic-bezier(.64,0,.18,1) forwards}.boot-wave-body{animation:waterBody 1.05s ease-in-out infinite alternate}.boot-wave-foam{animation:waterFoam .8s ease-in-out infinite alternate}@keyframes bootHold{0%,88%{opacity:1}100%{opacity:0}}@keyframes bootEraser{0%{transform:translateY(115%) scaleX(.86)}44%{transform:translateY(10%) scaleX(1.08)}100%{transform:translateY(-125%) scaleX(1.2)}}
.page-view{filter:none!important}.page-view.is-leaving{animation:routeExit .5s ease both!important;filter:none!important}.page-view.is-entering{animation:routeEnter .62s cubic-bezier(.22,1,.36,1) both!important}@keyframes routeExit{to{opacity:0;transform:translateY(8px) scale(.992);filter:blur(12px)}}@keyframes routeEnter{from{opacity:0;transform:translateY(12px) scale(.994);filter:blur(12px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero .hero-switches{position:absolute!important;inset:auto clamp(18px,4vw,66px) 32px auto!important;display:flex!important;pointer-events:auto!important}
.value-card{min-height:340px!important;background:color-mix(in srgb,var(--surface) 86%,var(--summer-cream))!important;border:1px solid var(--line)!important;box-shadow:0 14px 34px rgba(138,81,79,.12)!important;color:inherit!important}.value-card:hover{border-color:var(--line)!important}
.entity-card,.news-card,.social-card,.contact-row,.contact-panel,.documents-strip>div,.litter-demo-card,.stream-card,.contact-invite{border:1px solid rgba(255,255,255,.5)!important}.card-tilt:hover{border-color:rgba(255,255,255,.5)!important}
.value-card,.entity-card,.news-card,.social-card,.contact-row,.documents-strip>div,.litter-demo-card,.stream-card,.contact-invite,.detail-shell,.changelog-modal,.mobile-menu{background-clip:padding-box;isolation:isolate}.value-card::before,.entity-card::before,.news-card::before,.social-card::before{border-radius:inherit;inset:1px}
.wave-divider{overflow:hidden}.wave-divider svg{position:absolute;left:-1px;bottom:-3px;width:calc(100% + 2px);height:calc(100% + 6px);transform:none!important}
.news-card{height:auto!important;min-height:0!important;overflow:hidden!important}.news-card-media{height:auto!important;min-height:250px}.news-media-item img{object-fit:cover!important}.news-media-item.is-video img{object-fit:cover!important}.news-open-hint{margin:10px 0 16px;color:var(--muted);font-size:12px;font-weight:700}.news-read-more{display:none!important}.news-card-text.is-collapsed{display:-webkit-box!important;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.news-video-mark{display:inline-flex!important;z-index:5!important}
.stream-controls{display:flex!important;align-items:center}.stream-controls span{min-width:64px;text-align:center;font-weight:800}.stream-card{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0),0)}
.smart-media,.entity-video,.news-modal-photo-wrap,.news-modal-video{overflow:hidden;border-radius:24px}.smart-media::before{display:block!important}.smart-media img,.entity-video video,.entity-video iframe,.news-modal-video video,.news-modal-video iframe{object-fit:contain!important}.entity-modal-hero>img{object-fit:contain!important}.entity-overlay{background:transparent!important}.entity-overlay.is-open{background:var(--bg)!important}.entity-modal-content::before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:0;pointer-events:none}.entity-overlay.is-open:not(.show-content) .entity-modal-content::before{opacity:1;animation:skeletonSweep 1s linear infinite}@keyframes skeletonSweep{to{transform:translateX(100%)}}
.changelog-modal{overflow:hidden!important;padding:0!important}.changelog-scroll{max-height:calc(100svh - 44px);overflow:auto;padding:clamp(30px,6vw,62px);scrollbar-gutter:stable}.changelog-close{position:absolute!important}
.contact-invite,.detail-invite{padding:30px;border-radius:30px;background:var(--surface-glass);box-shadow:var(--shadow-card);overflow:hidden}.contact-invite{min-height:320px;display:grid;align-content:center;gap:14px}.contact-invite h2,.detail-invite h3{font:600 38px/1.05 var(--font-script);margin:0}.contact-invite button,.detail-invite button{justify-self:start;border:1px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--surface-solid);color:var(--text);font-weight:800;cursor:pointer}.detail-invite{margin-top:36px}.entity-fact.is-empty{opacity:.78}
.mobile-menu button{transition:color .3s ease,background-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1)!important}
.firefox-scrollbar{display:none!important}html{scrollbar-width:thin;scrollbar-color:rgba(74,159,172,.7) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(74,159,172,.7);border:3px solid transparent;background-clip:padding-box;border-radius:999px}
@media(max-width:760px),(pointer:coarse){.site-header,.mobile-menu,.value-card,.entity-card,.news-card,.social-card,.contact-row{backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%)}.hero .hero-switches{right:18px!important;bottom:78px!important}.stream-controls{display:flex!important}.changelog-scroll{max-height:100svh}.changelog-modal{border-radius:28px!important;margin:10px}.page-view.is-leaving{animation-duration:.38s!important}}

/* consolidated layer */
.site-header{border-bottom:0!important;box-shadow:none!important}.site-header::before,.site-header::after{display:none!important}.topbar-line{display:none!important}
.menu-toggle{display:none!important}@media(max-width:820px){.menu-toggle{display:grid!important}}@media(min-width:821px){.mobile-menu{display:none!important}}
.hero-switches{inset:0!important;overflow:hidden!important}.hero-switches button{top:50%!important;transform:translateY(-50%)!important}.hero-switches #heroPrev{left:max(14px,env(safe-area-inset-left))!important}.hero-switches #heroNext{right:max(14px,env(safe-area-inset-right))!important}
.page-view{transition:opacity .5s ease,filter .58s ease,transform .58s cubic-bezier(.16,1,.3,1)!important}.page-view.is-leaving{animation:pageOutFixed .52s ease both!important}.page-view.is-entering{animation:pageInFixed .68s cubic-bezier(.16,1,.3,1) both!important}@keyframes pageOutFixed{to{opacity:0;filter:blur(10px);transform:translateY(-12px) scale(.992)}}@keyframes pageInFixed{from{opacity:0;filter:blur(10px);transform:translateY(16px) scale(.992)}to{opacity:1;filter:none;transform:none}}
.wave-divider{margin-top:-2px!important;margin-bottom:-2px!important;height:112px!important;background:transparent!important;overflow:hidden!important}.wave-divider+.values-section,.wave-divider+section{margin-top:-2px!important}
.value-card{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-solid) 82%,#f7c97a 18%),color-mix(in srgb,var(--surface-solid) 88%,#72c7d6 12%))!important;color:var(--text)!important}.value-card h3,.value-card p,.value-card small,.value-card .value-icon{color:var(--text)!important;opacity:1!important}.value-icon,.value-icon *{font-family:Montserrat,Arial,sans-serif!important}.support-card .value-icon{filter:none!important;text-shadow:none!important}
.card-tilt{--glow-opacity:0;transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .42s ease,border-color .32s ease!important}.card-tilt::after{opacity:var(--glow-opacity,0)!important;transition:opacity .42s ease!important}.value-card.card-tilt:hover,.entity-card.card-tilt:hover,.contact-invite.card-tilt:hover,.social-card.card-tilt:hover,.contact-row.card-tilt:hover{box-shadow:0 26px 64px rgba(232,139,72,.22),0 0 0 1px rgba(255,255,255,.28)!important}
.stream-card{transform:none!important;transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .4s ease!important}.stream-card:hover{transform:translateY(-7px) scale(1.018)!important;box-shadow:0 24px 58px rgba(18,59,64,.24)!important}.stream-card::after{display:none!important}
.news-card{background:linear-gradient(155deg,color-mix(in srgb,var(--surface-solid) 90%,#8d6b57 10%),color-mix(in srgb,var(--surface-solid) 93%,#d6a55e 7%))!important;color:var(--text)!important}.news-card-text{color:var(--text)!important;font-family:Montserrat,Arial,sans-serif!important;font-weight:500!important;opacity:1!important}.news-card-meta{display:grid!important;grid-template-columns:auto 1fr auto!important}.news-card-tag{margin:0!important}.news-age{justify-self:end!important}.news-auto-status{display:none!important}
.news-card-media{display:grid!important;width:calc(100% - 36px)!important;margin:0 18px!important;height:260px!important;aspect-ratio:auto!important;gap:4px!important;background:transparent!important;overflow:hidden!important;border-radius:16px!important}.news-media-item{min-width:0!important;min-height:0!important;background:transparent!important;border-radius:12px!important;overflow:hidden!important}.news-media-item img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;background:transparent!important}.news-card-media.media-count-1{width:min(calc(100% - 36px),var(--single-media-width,520px))!important;height:auto!important;aspect-ratio:var(--media-ratio,1.35)!important;align-self:center!important}.media-count-1 .news-media-item{aspect-ratio:var(--media-ratio,1.35)!important}.media-count-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}.media-count-3{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}.media-count-3 .news-media-item:first-child{grid-row:1/3!important}.media-count-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}.news-media-item.is-video{aspect-ratio:var(--media-ratio,1.777)!important}.news-media-item.is-video img{object-fit:cover!important}
.news-modal-media{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(180px,42vh)!important;gap:8px!important;align-items:stretch!important}.news-modal-media>*{min-height:0!important;height:100%!important}.news-modal-media img,.news-modal-media video{width:100%!important;height:100%!important;object-fit:cover!important}.news-modal-media>*:last-child:nth-child(odd){grid-column:1/-1!important}
.contact-invite{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-solid) 72%,#f5b65a 28%),color-mix(in srgb,var(--surface-solid) 78%,#6fc8d2 22%))!important;border:1px solid rgba(255,255,255,.34)!important;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .4s ease!important}.contact-invite:hover{transform:translateY(-9px) scale(1.025)!important}.contact-invite button,.contact-row,.social-card,.news-contact-chip{transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease,box-shadow .3s ease!important}.contact-invite button:hover,.contact-row:hover,.social-card:hover,.news-contact-chip:hover{transform:translateY(-4px) scale(1.025)!important;box-shadow:0 18px 34px rgba(25,72,75,.18)!important}
.eyebrow,.section-kicker,.page-hero-label,.news-card-tag,.contact-invite small{font-family:Montserrat,Arial,sans-serif!important;font-weight:700!important;letter-spacing:.08em!important}
/* Firefox/mobile-like thumb on every desktop and internal scroller. */
*{scrollbar-width:thin!important;scrollbar-color:rgba(210,216,207,.68) transparent!important}::-webkit-scrollbar{width:5px!important;height:5px!important;background:transparent!important}::-webkit-scrollbar-track{background:transparent!important}::-webkit-scrollbar-thumb{background:rgba(210,216,207,.68)!important;border:0!important;border-radius:999px!important;box-shadow:none!important}::-webkit-scrollbar-thumb:hover{background:rgba(235,239,232,.86)!important}.firefox-scrollbar{display:none!important}
@media(max-width:760px){:root{--summer-cream:#f8e6bd;--accent-gold:#ffc65c;--accent-orange:#f18c45;--accent-sky:#70cfe0;--accent-sea:#369bb0}.news-card{height:auto!important;min-height:590px!important}.news-card-media{height:240px!important}.hero-switches button{width:42px!important;height:42px!important}.page-hero-content,.section,.hero-content,.site-footer{width:min(100% - 34px,1480px)!important}.news-modal-media{grid-template-columns:1fr!important;grid-auto-rows:auto!important}.news-modal-media>*{height:auto!important;aspect-ratio:var(--media-ratio,1.2)!important}.news-modal-media>*:last-child:nth-child(odd){grid-column:auto!important}}

/* consolidated layer */
:root{--ui-ease:cubic-bezier(.16,1,.3,1);--ui-font:Montserrat,Arial,sans-serif}
body,.nav-link,.language-switcher,.news-card,.contact-panel,.entity-card{font-family:var(--ui-font)!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
/* Header uses the same translucent state on every route and never clips menus. */
.site-header,.site-header.is-hero-top{contain:none!important;overflow:visible!important;background:color-mix(in srgb,var(--surface-solid) 66%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--line) 34%,transparent)!important;box-shadow:0 8px 35px rgba(8,39,48,.055)!important;backdrop-filter:blur(22px) saturate(145%)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;transition:background .65s ease,backdrop-filter .65s ease,border-color .65s ease!important}
.language-switcher{z-index:100!important}.language-switcher>summary{min-width:82px!important;width:auto!important;height:46px!important;padding:0 14px!important;gap:9px!important;font:800 13px/1 var(--ui-font)!important;letter-spacing:.055em!important}.language-current-flag{font-size:21px!important}.language-switcher>div{z-index:110!important;min-width:180px!important;right:0!important}.language-option-flag{font-size:20px!important}
/* Hero arrows always remain visible and clickable. */
.hero .hero-switches{display:block!important;position:absolute!important;inset:0!important;z-index:20!important;overflow:visible!important;pointer-events:none!important}.hero .hero-switches button{display:grid!important;place-items:center!important;position:absolute!important;top:50%!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(-50%)!important}.hero .hero-switches button:hover{transform:translateY(-50%) scale(1.07)!important}.hero .hero-switches button:active{transform:translateY(-50%) scale(.9)!important}
/* Route change: exit is visible first, then the new view enters. */
.page-view.is-leaving{display:block!important;pointer-events:none!important}.page-transition{background:radial-gradient(circle at 50% 50%,rgba(109,205,218,.13),transparent 55%);opacity:0!important;transition:opacity .4s ease!important}.page-transition.is-active{opacity:1!important}.page-transition.is-releasing{opacity:0!important}
/* Cursor glow fades completely before its coordinates can move. */
.card-tilt{--glow-opacity:0;transition:transform .62s var(--ui-ease),box-shadow .65s ease,border-color .5s ease!important}.card-tilt::before,.card-tilt::after{opacity:var(--glow-opacity,0)!important;transition:opacity .48s ease!important}.card-tilt:hover{--lift:-7px!important}.entity-card.card-tilt:hover,.contact-invite.card-tilt:hover,.social-card.card-tilt:hover,.contact-row.card-tilt:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-7px,0)!important}
/* No delayed third card: the whole grid arrives as one composed scene. */
.page-view.is-active .entity-grid,.page-view.is-active .dog-grid,.page-view.is-active .contacts-layout{opacity:1!important;filter:none!important;transform:none!important;transition:opacity .72s ease,filter .72s ease,transform .8s var(--ui-ease)!important}.page-view.is-entering .entity-grid>*{animation:entityGroupIn .72s var(--ui-ease) both!important;animation-delay:0s!important}@keyframes entityGroupIn{from{opacity:0;filter:blur(9px);transform:translateY(20px) scale(.985)}to{opacity:1;filter:none;transform:none}}
/* Shadows need breathing space around horizontally clipped rails/grids. */
.photo-stream-section{overflow:visible!important;padding-top:28px!important;padding-bottom:78px!important}.photo-stream{box-sizing:border-box!important;padding-top:34px!important;padding-bottom:62px!important;margin-top:-34px!important;margin-bottom:-62px!important;scroll-snap-type:x proximity!important}.stream-card{scroll-snap-align:start!important;box-shadow:0 20px 48px rgba(8,42,51,.19)!important}.stream-card:hover{box-shadow:0 32px 76px rgba(13,50,57,.3)!important}.dog-grid,.entity-grid{padding:28px 24px 42px!important;margin:-28px -24px -42px!important;overflow:visible!important}
/* Detail modal: no white morph card, real blur phase, no clipped header. */
#morphStage{background-color:#17343b!important;background-repeat:no-repeat!important;background-position:center!important;background-size:cover!important;border-color:rgba(255,255,255,.22)!important;filter:blur(0);transition:filter .2s ease!important}#morphStage::after{background:linear-gradient(135deg,rgba(109,205,218,.13),rgba(244,179,88,.13))!important}
.entity-overlay{z-index:2100!important;background:color-mix(in srgb,var(--bg) 94%,#153943 6%)!important;transition:opacity .4s ease,visibility 0s linear .4s!important}.entity-overlay.is-open{transition-delay:0s!important}.entity-modal-content{filter:blur(18px)!important;transform:translateY(26px) scale(.992)!important;transition:opacity .7s ease,transform .85s var(--ui-ease),filter .72s ease!important}.entity-overlay.show-content .entity-modal-content{filter:blur(0)!important;transform:none!important}.entity-modal-close{transition:transform .48s var(--ui-ease),background .35s ease,box-shadow .35s ease!important}.entity-modal-close:active{transform:rotate(110deg) scale(.82)!important;box-shadow:0 5px 12px rgba(0,0,0,.18)!important}
.entity-modal-hero{background:#102a32!important}.entity-modal-hero-bg{display:none!important}.entity-modal-hero>img{object-fit:cover!important;object-position:center!important;filter:none!important}.entity-modal-body{overflow:visible!important}
.smart-media-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:260px!important;gap:12px!important}.smart-media,.smart-media.is-wide,.smart-media.is-tall{grid-column:span 1!important;grid-row:span 1!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important;background:none!important;box-shadow:0 14px 34px rgba(7,38,47,.14)!important}.smart-media::before{display:none!important}.smart-media img{width:100%!important;height:100%!important;object-fit:cover!important}.lightbox{z-index:5000!important}.lightbox-stage{z-index:1!important}
/* Contacts appear as one glass composition; every item moves softly. */
.contact-panel,.contacts-layout{background:linear-gradient(145deg,color-mix(in srgb,var(--surface-solid) 74%,#75c9d4 26%),color-mix(in srgb,var(--surface-solid) 82%,#f0b56c 18%))!important;border:1px solid rgba(255,255,255,.38)!important;box-shadow:0 28px 80px rgba(10,48,58,.15)!important;backdrop-filter:blur(24px) saturate(140%)!important;-webkit-backdrop-filter:blur(24px) saturate(140%)!important}.contact-row,.social-card{background:rgba(255,255,255,.12)!important;backdrop-filter:blur(17px)!important;-webkit-backdrop-filter:blur(17px)!important;transition:transform .55s var(--ui-ease),background .45s ease,box-shadow .55s ease!important}
/* News contrast, clear badges, crop-safe media and visible read-more cue. */
.news-card{background:linear-gradient(155deg,#23464b 0%,#31534f 56%,#5b5949 100%)!important;color:#fff8ed!important;border-color:rgba(128,215,220,.27)!important}.news-card-text,.news-card-meta,.news-card time{color:#fff8ed!important}.news-card-tag,.news-auto-status{background:rgba(47,207,203,.16)!important;color:#79ece7!important;border:1px solid rgba(84,222,219,.2)!important}.news-auto-status{display:inline-flex!important}.news-age{color:#ffe3ad!important}.news-open-hint{display:inline-block!important;color:#fff2d2!important;font-weight:750!important;border-bottom:2px solid #f2ba62!important;padding-bottom:3px!important;text-underline-offset:4px!important}.news-card-media{overflow:hidden!important}.news-media-item.is-video{position:relative!important}.news-media-item.is-video img{transform:scale(1.18)!important;transform-origin:center!important}.news-media-badge{z-index:8!important;left:10px!important;bottom:10px!important;max-width:calc(100% - 20px)!important;white-space:nowrap!important}.news-modal-title,#newsModalTitle{font-family:Georgia,'Times New Roman',serif!important}.news-modal-media,.entity-videos{justify-items:center!important}.news-modal-video,.entity-video{width:min(100%,760px)!important;max-width:760px!important;aspect-ratio:var(--video-ratio,var(--media-ratio,16/9))!important;overflow:hidden!important;border-radius:22px!important;background:#132f36!important}.news-modal-video iframe,.entity-video iframe{width:100%!important;height:100%!important;border:0!important}.entity-video.is-vertical{width:min(100%,430px)!important;aspect-ratio:9/16!important}.entity-video.is-vertical iframe{width:178%!important;margin-left:-39%!important}
/* Changelog uses one unified decorated panel instead of detached boxes. */
.changelog-list{display:grid!important;gap:0!important;padding:14px 24px!important;border:1px solid rgba(94,180,188,.28)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(21,57,65,.08),rgba(242,181,98,.1))!important}.changelog-list>*{position:relative!important;margin:0!important;padding:16px 10px 16px 30px!important;border:0!important;border-bottom:1px solid rgba(101,170,176,.18)!important;background:transparent!important}.changelog-list>*:last-child{border-bottom:0!important}.changelog-list>*::before{content:'•'!important;position:absolute!important;left:5px!important;top:13px!important;color:#2bb6b8!important;font-size:24px!important}
/* Native controls use the same dark glass palette. */
.news-filter select,.news-sort select,select{color-scheme:dark!important;background-color:#1d3940!important;color:#fff5e7!important;border-color:rgba(116,202,208,.32)!important}select option{background:#243c42!important;color:#fff8ee!important}
/* Fully custom page scrollbar: transparent rail, rounded thumb, 8px from edge. */
html.has-custom-page-scrollbar,html.has-custom-page-scrollbar body{scrollbar-width:none!important}html.has-custom-page-scrollbar::-webkit-scrollbar,html.has-custom-page-scrollbar body::-webkit-scrollbar{display:none!important}.firefox-scrollbar{display:block!important;position:fixed!important;z-index:9998!important;right:8px!important;top:6px!important;bottom:6px!important;width:7px!important;pointer-events:none!important;background:transparent!important;border-radius:999px!important}.firefox-scrollbar-thumb{width:7px!important;min-height:48px!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(232,238,231,.88),rgba(181,203,199,.72))!important;box-shadow:0 2px 9px rgba(0,0,0,.18)!important;transition:opacity .25s ease!important}.firefox-scrollbar.is-hidden{opacity:0!important}.entity-overlay,.changelog-scroll,.news-modal{scrollbar-width:thin!important;scrollbar-color:rgba(207,221,216,.72) transparent!important;scrollbar-gutter:stable!important}.entity-overlay::-webkit-scrollbar,.changelog-scroll::-webkit-scrollbar{width:8px!important}.entity-overlay::-webkit-scrollbar-track,.changelog-scroll::-webkit-scrollbar-track{background:transparent!important}.entity-overlay::-webkit-scrollbar-thumb,.changelog-scroll::-webkit-scrollbar-thumb{border:2px solid transparent!important;background:rgba(207,221,216,.76)!important;background-clip:padding-box!important;border-radius:999px!important}
/* Maintenance: one centered live-status glass card. */
.maintenance-screen{gap:0!important}.maintenance-screen::before{content:'';position:absolute;z-index:1;width:min(680px,calc(100% - 36px));height:clamp(390px,58vh,610px);border:1px solid rgba(255,255,255,.6);border-radius:42px;background:rgba(255,255,255,.35);box-shadow:0 38px 120px rgba(23,72,80,.22);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%)}.maintenance-screen>*:not(.maintenance-wave){z-index:2!important}.maintenance-screen h1{max-width:580px;text-align:center!important}.maintenance-screen p{max-width:540px!important;text-align:center!important;margin:14px auto!important;line-height:1.7!important;text-wrap:balance}.maintenance-countdown{padding:14px 22px!important;border-radius:18px!important;background:rgba(255,255,255,.26)!important;font-variant-numeric:tabular-nums}.maintenance-screen.is-live::before{animation:maintenanceCardIn .9s var(--ui-ease) both}@keyframes maintenanceCardIn{from{opacity:0;filter:blur(20px);transform:scale(.86) translateY(28px)}to{opacity:1;filter:none;transform:none}}
@media(max-width:760px){.language-switcher>summary{min-width:70px!important;height:42px!important;padding:0 11px!important}.smart-media-grid{grid-template-columns:1fr!important;grid-auto-rows:clamp(250px,62vw,430px)!important}.dog-grid,.entity-grid{padding-inline:12px!important;margin-inline:-12px!important}.firefox-scrollbar{right:6px!important}.hero .hero-switches button{width:46px!important;height:46px!important}}

/* consolidated layer */
/* Full-width shells: shadows and tilt are no longer clipped by narrow section boxes. */
.photo-stream-section,.page-view[data-page="dogs"] .section:has(.entity-grid),.page-view[data-page="litters"] .section:has(.entity-grid),.page-view[data-page="puppies"] .section:has(.entity-grid){width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;padding-left:clamp(28px,5vw,92px)!important;padding-right:clamp(28px,5vw,92px)!important;overflow:visible!important}.photo-stream{margin-inline:calc(50% - 50vw)!important;padding-inline:clamp(28px,5vw,92px)!important;overflow-x:auto!important;overflow-y:visible!important}.dog-grid,.entity-grid{width:100%!important;max-width:none!important;margin-inline:0!important;padding:34px 18px 58px!important;overflow:visible!important}.entity-card{min-width:0!important}
/* Hero controls and manual switching remain above every overlay. */
.hero-switches{z-index:40!important}.hero-switches button{display:grid!important;opacity:1!important;visibility:visible!important}
/* Header regains the soft settling motion while scrolling. */
.site-header{transition:transform .65s cubic-bezier(.16,1,.3,1),background .65s ease,box-shadow .65s ease,backdrop-filter .65s ease!important}.site-header.is-scrolled{transform:translateY(5px) scale(.992)!important;background:color-mix(in srgb,var(--surface-solid) 57%,transparent)!important;box-shadow:0 16px 46px rgba(7,35,44,.1)!important;backdrop-filter:blur(28px) saturate(155%)!important}
/* About wave and gradient form one continuous surface. */
.wave-divider{height:150px!important;margin:-4px 0!important;overflow:visible!important;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg) 70%,#67c7d6 30%) 100%)!important}.wave-divider svg{display:block!important;width:104%!important;margin-left:-2%!important;transform:translateY(2px)!important;filter:drop-shadow(0 18px 28px rgba(78,184,201,.16))}.wave-divider+section{margin-top:-5px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,#67c7d6 30%) 0%,var(--bg) 170px)!important}
/* Lifetime support: no pulse and truly eased glow. */
.support-card .value-icon,.support-card .value-icon *,.support-card [class*="24"],.value-card .value-icon{animation:none!important;transform:none!important}.value-card::before,.value-card::after{transition:opacity .62s ease!important;opacity:var(--glow-opacity,0)!important}.value-card{transition:transform .65s cubic-bezier(.16,1,.3,1),box-shadow .65s ease!important}
/* Only one roomy freshness badge. */
.news-auto-status{display:none!important}.news-age{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:max-content!important;max-width:150px!important;padding:8px 13px!important;border-radius:999px!important;white-space:normal!important;text-align:center!important;line-height:1.15!important;font-size:10px!important;background:rgba(49,207,203,.16)!important;color:#91f1eb!important;border:1px solid rgba(96,222,217,.24)!important}.news-card-meta{grid-template-columns:auto auto 1fr auto!important;align-items:start!important;gap:9px 12px!important}.news-card-tag{min-width:max-content!important;padding:8px 13px!important}.news-views{align-self:center!important}
/* Video preview never zooms back out on hover; badge always stays inside. */
.news-media-item.is-video img,.news-card:hover .news-media-item.is-video img{transform:scale(1.2)!important;transition:filter .55s ease!important}.news-card:hover .news-media-item.is-video img{filter:saturate(1.07) brightness(1.03)!important}.news-media-badge{position:absolute!important;z-index:20!important;left:12px!important;bottom:12px!important;transform:none!important;clip-path:none!important;overflow:visible!important;line-height:1!important;padding:8px 13px!important}.news-card-media.has-single-video{width:min(76%,420px)!important;margin-inline:auto!important;aspect-ratio:9/13!important}.news-card-media.has-single-video .news-media-item{aspect-ratio:9/13!important}.news-card-media.has-single-video img{transform:scale(1.28)!important}.news-card:hover .news-card-media.has-single-video img{transform:scale(1.28)!important}
/* Open VK media is constrained to its visual ratio instead of stretching across the modal. */
.news-modal-media{grid-template-columns:1fr!important;justify-items:center!important}.news-modal-video,.news-modal-photo-wrap{width:min(100%,720px)!important;margin-inline:auto!important}.news-modal-video:has(iframe){width:min(100%,430px)!important;aspect-ratio:9/16!important;overflow:hidden!important;background:#132e34!important}.news-modal-video:has(iframe) iframe{width:178%!important;height:100%!important;margin-left:-39%!important;border:0!important}
/* Dynamic entity gallery follows each image's actual ratio. */
.smart-media-grid{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:center!important;gap:14px!important}.smart-media,.smart-media.is-wide,.smart-media.is-tall{flex:1 1 clamp(260px,34vw,520px)!important;width:auto!important;max-width:min(100%,620px)!important;height:auto!important;min-height:0!important;grid-column:auto!important;grid-row:auto!important;aspect-ratio:var(--natural-ratio,4/3)!important}.smart-media.is-portrait{flex-basis:clamp(220px,24vw,360px)!important;max-width:390px!important}.smart-media.is-landscape{flex-basis:clamp(360px,48vw,620px)!important}.smart-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
/* Morph starts with a calm content fade; no white square, centered phase path. */
.entity-card.is-morph-source{background:linear-gradient(145deg,#285d63,#bf9057)!important;transition:background .5s ease,box-shadow .5s ease!important}.entity-card.is-morph-source .entity-card-copy,.entity-card.is-morph-source .entity-card-media{transition:opacity .48s ease,filter .48s ease,transform .55s cubic-bezier(.16,1,.3,1)!important;opacity:0!important;filter:blur(10px)!important;transform:scale(.985)!important}#morphStage{background-color:#28535a!important}
/* Contacts enter/leave as a composed panel and use smooth hover. */
.contacts-layout,.contact-panel{will-change:opacity,transform,filter;transition:opacity .78s ease,transform .88s cubic-bezier(.16,1,.3,1),filter .78s ease!important}.page-view.is-entering .contacts-layout,.page-view.is-entering .contact-panel{animation:contactsSceneIn .88s .12s cubic-bezier(.16,1,.3,1) both!important}.page-view.is-leaving .contacts-layout,.page-view.is-leaving .contact-panel{animation:contactsSceneOut .48s ease both!important}@keyframes contactsSceneIn{from{opacity:0;filter:blur(14px);transform:translateY(28px) scale(.982)}to{opacity:1;filter:none;transform:none}}@keyframes contactsSceneOut{to{opacity:0;filter:blur(10px);transform:translateY(-14px) scale(.99)}}.contact-row,.social-card{transition:transform .58s cubic-bezier(.16,1,.3,1),box-shadow .58s ease,background .5s ease!important}.contact-row:hover,.social-card:hover{transform:translateY(-7px) scale(1.018)!important}
/* Language panel: actual glass, no flag highlight overlap, animated opening. */
.icon-button,.language-switcher>summary{background:color-mix(in srgb,var(--surface-solid) 45%,transparent)!important;backdrop-filter:blur(22px) saturate(155%)!important;-webkit-backdrop-filter:blur(22px) saturate(155%)!important}.language-switcher>div{display:grid!important;background:color-mix(in srgb,var(--surface-solid) 66%,transparent)!important;backdrop-filter:blur(28px) saturate(145%)!important;-webkit-backdrop-filter:blur(28px) saturate(145%)!important;transform-origin:top right!important}.language-switcher[open]>div{animation:languagePanelOpen .48s cubic-bezier(.16,1,.3,1) both!important}@keyframes languagePanelOpen{from{opacity:0;filter:blur(12px);transform:translateY(-12px) scale(.9)}to{opacity:1;filter:none;transform:none}}.language-switcher>div button{padding:12px!important;gap:12px!important;background:transparent!important}.language-switcher>div button.is-active{background:rgba(84,196,208,.14)!important}.language-option-flag{display:grid!important;place-items:center!important;min-width:28px!important;background:transparent!important;box-shadow:none!important}
/* Changelog is one blurred list container. */
.changelog-modal{background:color-mix(in srgb,var(--surface-solid) 80%,transparent)!important;backdrop-filter:blur(34px) saturate(145%)!important}.changelog-list{display:grid!important;gap:0!important;padding:12px 22px!important;border-radius:26px!important;background:rgba(22,56,63,.09)!important;border:1px solid rgba(103,194,199,.25)!important;backdrop-filter:blur(18px)!important}.changelog-list li{margin:0!important;padding:17px 8px 17px 28px!important;border:0!important;border-bottom:1px solid rgba(103,194,199,.17)!important;background:transparent!important}.changelog-list li:last-child{border-bottom:0!important}
/* Strong rounded scrollbars on every internal panel. */
*{scrollbar-width:thin!important;scrollbar-color:rgba(218,229,224,.92) transparent!important}.entity-overlay,.changelog-scroll,.news-modal,.detail-shell,.mobile-menu{border-radius:inherit!important;scrollbar-gutter:stable!important}.entity-overlay::-webkit-scrollbar,.changelog-scroll::-webkit-scrollbar,.news-modal::-webkit-scrollbar,.detail-shell::-webkit-scrollbar{width:10px!important}.entity-overlay::-webkit-scrollbar-track,.changelog-scroll::-webkit-scrollbar-track,.news-modal::-webkit-scrollbar-track,.detail-shell::-webkit-scrollbar-track{background:transparent!important;margin:14px 0!important}.entity-overlay::-webkit-scrollbar-thumb,.changelog-scroll::-webkit-scrollbar-thumb,.news-modal::-webkit-scrollbar-thumb,.detail-shell::-webkit-scrollbar-thumb{background:rgba(218,229,224,.9)!important;border:2px solid transparent!important;background-clip:padding-box!important;border-radius:999px!important}.firefox-scrollbar,.firefox-scrollbar-thumb{border-radius:999px!important}.firefox-scrollbar-thumb{width:8px!important;background:linear-gradient(180deg,#f0f4ef,#b9ceca)!important}
/* Same darker maintenance composition before and after reload. */
.maintenance-screen{background:linear-gradient(145deg,#102128,#18363c 58%,#403b32)!important;color:#fff7e9!important}.maintenance-screen::before{background:rgba(17,38,44,.72)!important;border-color:rgba(158,222,225,.2)!important;box-shadow:0 40px 130px rgba(0,0,0,.46)!important;backdrop-filter:blur(30px) saturate(135%)!important}.maintenance-screen p,.maintenance-screen h1,.maintenance-reload-note{color:#fff7e9!important}.maintenance-countdown{color:#ffe0a5!important;background:rgba(255,255,255,.07)!important}
@media(max-width:760px){.photo-stream-section,.page-view[data-page="dogs"] .section:has(.entity-grid),.page-view[data-page="litters"] .section:has(.entity-grid),.page-view[data-page="puppies"] .section:has(.entity-grid){padding-inline:14px!important}.dog-grid,.entity-grid{padding-inline:4px!important}.news-card-meta{grid-template-columns:auto auto!important}.news-card-meta time,.news-views{justify-self:start!important}.smart-media,.smart-media.is-portrait,.smart-media.is-landscape{flex-basis:100%!important;max-width:100%!important}}

/* consolidated layer */
/* Guaranteed old-page exit snapshot. */
.route-exit-ghost{position:fixed!important;left:0!important;width:100vw!important;min-height:100vh!important;z-index:1200!important;pointer-events:none!important;overflow:hidden!important;background:var(--bg)!important;transform-origin:center top!important;contain:paint!important}.route-exit-ghost .site-header{display:none!important}
/* Glow is rendered by opacity, never by an instant hover-only shadow. */
.value-card,.entity-card,.contact-invite,.social-card,.contact-row{box-shadow:0 14px 38px rgba(7,38,46,.11),0 0 0 rgba(245,184,81,0)!important;transition:transform .62s cubic-bezier(.16,1,.3,1),box-shadow .62s ease,border-color .52s ease!important}.value-card:hover,.entity-card:hover,.contact-invite:hover,.social-card:hover,.contact-row:hover{box-shadow:0 28px 70px rgba(7,38,46,.19),0 0 34px rgba(245,184,81,.22)!important}.value-card::before,.value-card::after,.entity-card::before,.entity-card::after{transition:opacity .6s ease!important}.support-card .value-icon,.support-card .value-icon *{animation:none!important}
/* Life in motion: no arrows, one draggable glass horizontal rail. */
.photo-stream-section .stream-controls{display:none!important}.photo-stream{scrollbar-width:none!important;padding-bottom:44px!important}.photo-stream::-webkit-scrollbar{display:none!important}.stream-glass-scrollbar{position:relative;width:min(1180px,calc(100% - 56px));height:12px;margin:4px auto 28px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(6,30,38,.1);backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);overflow:hidden}.stream-glass-scrollbar.is-hidden{display:none}.stream-glass-thumb{height:100%;min-width:52px;border-radius:999px;background:linear-gradient(90deg,rgba(221,240,235,.86),rgba(105,199,207,.9),rgba(242,184,91,.82));box-shadow:0 2px 12px rgba(10,45,53,.28);cursor:grab;touch-action:none;will-change:transform}.stream-glass-thumb:active{cursor:grabbing}
/* Remove the old pink seam: wave and following section share one aqua-gold palette. */

/* Restore compact three-column dog layout; only media rails stay full width. */
.page-view[data-page="dogs"] .section:has(.entity-grid){width:min(1480px,calc(100% - 120px))!important;max-width:1480px!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important}.page-view[data-page="dogs"] .entity-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:22px!important;padding:28px 0 44px!important;margin:0!important}.page-view[data-page="dogs"] .entity-card{min-width:0!important}
/* Adaptive gallery uses masonry columns and every item keeps its measured ratio. */
.smart-media-grid{display:block!important;columns:3 270px!important;column-gap:14px!important}.smart-media,.smart-media.is-wide,.smart-media.is-tall,.smart-media.is-portrait,.smart-media.is-landscape{display:block!important;width:100%!important;max-width:none!important;height:auto!important;min-height:0!important;margin:0 0 14px!important;break-inside:avoid!important;aspect-ratio:var(--natural-ratio,4/3)!important}.smart-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}.entity-no-media{padding:38px!important;border:1px dashed rgba(105,199,208,.34)!important;border-radius:24px!important;background:linear-gradient(145deg,rgba(105,199,208,.08),rgba(241,183,92,.08))!important;color:var(--text)!important;text-align:center!important;font:700 15px/1.5 var(--ui-font)!important}
/* VK card metadata is readable and cannot leave the card. */
.news-card{overflow:hidden!important}.news-card-meta{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 10px!important;width:100%!important;min-width:0!important}.news-card-tag,.news-age{flex:0 0 auto!important;min-width:0!important;max-width:none!important;white-space:nowrap!important;padding:7px 11px!important}.news-card-meta time{flex:1 1 132px!important;min-width:0!important;margin-left:auto!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere!important;line-height:1.35!important;color:#f8f0df!important}.news-views{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;gap:5px!important;color:#d5ece8!important}.news-views svg{width:16px!important;height:16px!important;fill:currentColor!important}
/* Keep source preview quality; never zoom back on hover. */
.news-media-item.is-video img,.news-card:hover .news-media-item.is-video img,.news-card-media.has-single-video img,.news-card:hover .news-card-media.has-single-video img{transform:none!important;filter:none!important;transition:opacity .4s ease!important}.news-card-media.has-single-video{width:min(calc(100% - 36px),430px)!important;height:auto!important;aspect-ratio:var(--media-ratio,9/13)!important;margin-inline:auto!important}.news-card-media.has-single-video .news-media-item{aspect-ratio:inherit!important}.news-video-mark,.news-media-badge{left:10px!important;bottom:10px!important;max-width:calc(100% - 20px)!important;z-index:25!important;transform:none!important;clip-path:none!important;overflow:visible!important}
/* Functional VK player: no iframe cropping, controls remain clickable. */
.news-modal,.news-modal-content,.entity-modal-content{border-radius:32px!important}.news-modal{overflow:hidden!important}.news-modal-media{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important}.news-modal-video,.news-modal-video:has(iframe),.entity-video,.entity-video.is-vertical{width:min(100%,760px)!important;max-width:760px!important;aspect-ratio:16/9!important;margin-inline:auto!important;overflow:hidden!important;border-radius:22px!important;background:#111f24!important}.news-modal-video iframe,.news-modal-video:has(iframe) iframe,.entity-video iframe,.entity-video.is-vertical iframe{display:block!important;width:100%!important;height:100%!important;margin:0!important;transform:none!important;border:0!important;pointer-events:auto!important}.news-modal-date{color:#d7eee9!important}.entity-cinema>.firefox-scrollbar,body:has(.news-overlay.is-open)>.firefox-scrollbar{opacity:0!important;pointer-events:none!important}
/* Header fades instead of shrinking; buttons settle a few pixels lower. */
.site-header,.site-header.is-scrolled{transform:none!important;scale:none!important;transition:background .62s ease,box-shadow .62s ease,backdrop-filter .62s ease,opacity .62s ease!important}.site-header.is-scrolled{background:color-mix(in srgb,var(--surface-solid) 44%,transparent)!important;box-shadow:0 12px 38px rgba(7,35,44,.08)!important;opacity:.94!important}.site-header .header-inner,.site-header .topbar-inner{transition:transform .62s cubic-bezier(.16,1,.3,1)!important}.site-header.is-scrolled .header-inner,.site-header.is-scrolled .topbar-inner{transform:translateY(4px)!important}
/* Language text and flags stay sharp; both open and close animate. */
.language-switcher>summary,.language-switcher>summary *,.language-switcher>div,.language-switcher>div *{filter:none!important;text-shadow:none!important}.language-switcher[open]>div{animation:languageOpenSharp .38s cubic-bezier(.16,1,.3,1) both!important}.language-switcher.is-closing>div{animation:languageCloseSharp .34s ease both!important}@keyframes languageOpenSharp{from{opacity:0;transform:translateY(-9px) scale(.94)}to{opacity:1;transform:none}}@keyframes languageCloseSharp{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-7px) scale(.96)}}
/* Contacts and hero buttons always have glass from the first frame. */
.contact-row,.social-card{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease!important}.contact-row:hover,.social-card:hover{transform:translateY(-7px) scale(1.015)!important}.hero-actions .primary-button,.hero-actions .glass-button,.hero-actions a,.intro-actions a{backdrop-filter:blur(18px) saturate(145%)!important;-webkit-backdrop-filter:blur(18px) saturate(145%)!important;transition:transform .34s cubic-bezier(.16,1,.3,1),background .35s ease,box-shadow .35s ease!important}.hero-actions a:active,.intro-actions a:active{transform:translateY(2px) scale(.94)!important}.contact-panel h2,.contacts-layout h2{font-family:Georgia,'Times New Roman',serif!important;letter-spacing:-.02em!important}
/* Hero motion: active foreground and backdrop share one timeline. */
.hero-slide,.hero-slide img{transition:opacity .9s ease,filter .9s ease,transform 6.2s linear!important}.hero-slide.is-prev,.hero-slide:not(.is-active){opacity:0!important;filter:blur(12px)!important}.hero-slide.is-active{opacity:1!important;filter:blur(0)!important}
/* Stronger pills on bright puppy/litter photos. */
.entity-card-meta span{background:rgba(8,40,48,.68)!important;color:#fff!important;border-color:rgba(255,255,255,.42)!important;box-shadow:0 7px 20px rgba(0,0,0,.16)!important;backdrop-filter:blur(14px)!important}
/* Separate maintenance page style. */
.maintenance-screen img{width:146px!important;height:146px!important;transform:translateY(-10px)!important}.maintenance-screen h1{font-family:Georgia,'Times New Roman',serif!important;font-weight:650!important}.maintenance-screen .maintenance-reload-note{font-family:var(--ui-font)!important;letter-spacing:.02em!important}
@media(max-width:900px){.page-view[data-page="dogs"] .section:has(.entity-grid){width:min(100% - 34px,1480px)!important}.page-view[data-page="dogs"] .entity-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.smart-media-grid{columns:2 220px!important}}
@media(max-width:620px){.page-view[data-page="dogs"] .entity-grid{grid-template-columns:1fr!important}.smart-media-grid{columns:1!important}.news-card-meta time{flex-basis:100%!important;text-align:left!important;margin-left:0!important}.stream-glass-scrollbar{width:calc(100% - 28px)!important}}
.news-card-meta{display:grid!important;grid-template-columns:max-content minmax(0,1fr) max-content!important;gap:8px 10px!important}.news-card-tag{grid-column:1!important}.news-age{grid-column:2/4!important;justify-self:start!important}.news-card-meta time{grid-column:1/3!important;grid-row:2!important;text-align:left!important;margin:0!important;min-width:0!important;max-width:100%!important}.news-views{grid-column:3!important;grid-row:2!important;justify-self:end!important}
/* consolidated layer */
.site-header,.site-header.is-scrolled{opacity:1!important;transform:none!important;background:rgba(14,39,47,.62)!important;-webkit-backdrop-filter:blur(30px) saturate(145%)!important;backdrop-filter:blur(30px) saturate(145%)!important;transition:background .7s ease,box-shadow .7s ease!important}.site-header.is-scrolled{background:rgba(14,39,47,.18)!important;box-shadow:none!important}.site-header .header-inner,.site-header .topbar-inner{transition:transform .7s cubic-bezier(.16,1,.3,1)!important}.site-header.is-scrolled .header-inner,.site-header.is-scrolled .topbar-inner{transform:translateY(5px)!important}
.value-card,.entity-card,.contact-row,.social-card{--hover-glow:0;transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .75s ease!important;box-shadow:0 14px 40px rgba(6,32,40,.12),0 0 42px rgba(241,176,75,0)!important}.value-card:hover,.entity-card:hover,.contact-row:hover,.social-card:hover{box-shadow:0 28px 72px rgba(6,32,40,.22),0 0 42px rgba(241,176,75,.24)!important}.contact-row:hover,.social-card:hover{transform:translateY(-7px) scale(1.012)!important}
.stream-glass-scrollbar{margin-top:34px!important;margin-bottom:42px!important;height:14px!important;overflow:visible!important}.stream-glass-thumb{height:12px!important;border:1px solid rgba(255,255,255,.38)!important;transition:width .35s ease!important}
.news-card-meta{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}.news-card-tag,.news-age{grid-row:1!important}.news-card-tag{grid-column:1!important;justify-self:start!important}.news-age{grid-column:2!important;justify-self:end!important}.news-card-meta time{grid-row:2!important;grid-column:1!important;justify-self:start!important;text-align:left!important}.news-views{grid-row:2!important;grid-column:2!important;justify-self:end!important;display:flex!important;overflow:visible!important}.news-video-mark{position:absolute!important;z-index:50!important;left:12px!important;bottom:12px!important;overflow:visible!important;clip-path:none!important}.news-card-text{overflow:hidden!important}.news-card-text.is-collapsed+.news-open-hint{display:block!important}
.news-modal,.entity-modal-content{border-radius:30px!important;overflow:hidden!important}.news-modal-scroll,.entity-overlay{scrollbar-width:thin!important;scrollbar-color:rgba(211,232,226,.88) transparent!important}.firefox-scrollbar{border-radius:999px!important}
.page-view[data-page="dogs"] .section:has(.entity-grid){width:min(1320px,calc(100% - 80px))!important}.page-view[data-page="dogs"] .entity-card{min-height:440px!important}.documents-strip{width:calc(100vw - 64px)!important;max-width:none!important;margin-left:calc(50% - 50vw + 32px)!important;padding:28px!important;overflow:visible!important}
.wave-divider{filter:drop-shadow(0 18px 32px rgba(69,202,218,.25))!important}.wave-divider svg{filter:drop-shadow(0 -10px 26px rgba(86,213,226,.24))!important}
.entity-modal-content{animation:none!important}.entity-overlay.is-open .entity-modal-content{animation:modalRevealAlt .95s cubic-bezier(.16,1,.3,1) both!important}@keyframes modalRevealAlt{0%{opacity:0;filter:blur(22px);transform:scale(.92) translateY(34px)}55%{opacity:.76;filter:blur(5px)}100%{opacity:1;filter:none;transform:none}}
/* consolidated layer */
.site-header,.site-header.is-scrolled{background:transparent!important;box-shadow:none!important;border-bottom:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;z-index:1400!important;transform:none!important;opacity:1!important;transition:padding .8s cubic-bezier(.16,1,.3,1)!important}
.site-header{padding-top:16px!important;padding-bottom:16px!important}
.site-header.is-scrolled{padding-top:7px!important;padding-bottom:7px!important}
.site-header::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,38,46,.68);border-bottom:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(26px) saturate(140%);backdrop-filter:blur(26px) saturate(140%);opacity:1;transition:opacity .85s ease;pointer-events:none}
.site-header.is-scrolled::after{opacity:0}
.site-header .header-actions,.site-header nav,.site-header .brand{transition:transform .8s cubic-bezier(.16,1,.3,1)!important}
.site-header.is-scrolled .header-actions,.site-header.is-scrolled nav,.site-header.is-scrolled .brand{transform:translateY(2px)}
.route-exit-ghost{z-index:80!important;content-visibility:visible!important}
.route-exit-ghost *{content-visibility:visible!important;animation-play-state:paused!important}
.route-exit-ghost .site-header{display:none!important}
body.is-routing .site-header,body.is-routing .site-header *{opacity:1!important;visibility:visible!important;filter:none!important}
#morphStage{display:none!important}
.entity-overlay{transition:opacity .6s ease!important}
.entity-overlay .entity-modal-content{transform:none!important}
.entity-overlay.is-open .entity-modal-content{animation:modalRevealPrime .75s ease both!important}
@keyframes modalRevealPrime{from{opacity:0;filter:blur(20px)}to{opacity:1;filter:none}}
main,#app,.page-view.is-active{transition:filter .65s ease,opacity .65s ease}
body.entity-cinema main,body.entity-cinema #app{filter:blur(18px) saturate(110%);opacity:.42}
.news-media-item.is-video{position:relative;overflow:hidden}
.news-media-item.is-video img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;transform:none!important}
.news-card-media.has-single-video img{object-fit:cover!important}
.news-modal-video{position:relative;overflow:hidden;border-radius:22px!important;background:#0b1418!important;margin-inline:auto!important}
.news-modal-video.is-vertical{height:min(70vh,680px)!important;width:auto!important;max-width:100%!important}
.news-modal-video video,.news-modal-video iframe{width:100%;height:100%;display:block;border:0}
.news-modal-video video{object-fit:cover}
.news-card{overflow:visible!important}
.news-card-meta{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px 10px!important;overflow:visible!important}
.news-card-meta .news-card-tag{order:1}
.news-card-meta .news-age{order:2;margin-left:auto!important;white-space:nowrap;max-width:100%}
.news-card-meta time{order:3;flex:1 1 auto;min-width:0;text-align:left!important;margin:0!important}
.news-card-meta .news-views{order:4;margin-left:auto!important;flex:0 0 auto;display:inline-flex!important;align-items:center;gap:6px;overflow:visible!important}
.news-modal{border-radius:30px!important;overflow:hidden!important}
*{scrollbar-width:thin;scrollbar-color:rgba(233,244,241,.45) rgba(255,255,255,.05)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(233,244,241,.4);border-radius:999px;border:2px solid rgba(10,26,32,.35)}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:999px}
.photo-stream-section{padding-top:120px!important}
.stream-glass-scrollbar{background:rgba(255,255,255,.08)!important;border-radius:999px!important;margin-top:38px!important}
.stream-glass-thumb{background:rgba(233,244,241,.42)!important;border:1px solid rgba(255,255,255,.5)!important;box-shadow:0 6px 16px rgba(0,0,0,.28)!important;-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;border-radius:999px!important;transition:width .35s ease!important}
.value-card,.entity-card,.contact-row,.social-card,[data-tilt],.card-tilt{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .85s ease,filter .85s ease!important}
.value-card::before,.value-card::after,.entity-card::before,.entity-card::after,.contact-row::before,.contact-row::after{transition:opacity .85s ease!important}
.contact-row:hover,.social-card:hover{transform:translateY(-7px)!important}
.documents-strip{overflow:visible!important;padding:46px 40px!important}
.documents-strip>*{overflow:visible}
.page-view:has(.documents-strip){overflow:visible!important}
.entity-grid{grid-template-columns:repeat(auto-fill,minmax(280px,340px))!important;justify-content:center!important;gap:30px!important}
.wave-divider{filter:none!important;background:transparent!important;margin-bottom:-1px}
.wave-divider::before,.wave-divider::after{display:none!important}
.wave-divider svg{display:block;width:100%;height:100%;filter:drop-shadow(0 -12px 26px rgba(96,214,225,.15))!important}
/* v1.6.0 meta overflow hardening */
.news-card *{min-width:0}
.news-card-meta{max-width:100%!important;min-width:0!important}
.news-card-meta time{white-space:normal!important;overflow-wrap:anywhere!important;flex:1 1 100%!important;max-width:100%!important}
.news-card-meta .news-age{overflow:hidden;text-overflow:ellipsis}
/* v1.6.0 meta static positioning: no absolute pills escaping the card */
.news-card-meta,.news-card-meta *{position:static!important;float:none!important;transform:none!important}
.news-card-meta .news-age{position:static!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:60%!important}
/* v1.6.0 meta width fix: auto width so side margins do not push it out of the card */
.news-card-meta{width:auto!important}

/* consolidated layer */

/* Unified thin glass scrollbar everywhere */
:root{--glass-thumb:rgba(84,124,132,.5)}
html[data-theme="dark"]{--glass-thumb:rgba(233,244,241,.5)}
*{scrollbar-width:thin!important;scrollbar-color:var(--glass-thumb) transparent!important}
*::-webkit-scrollbar{width:6px!important;height:6px!important;background:transparent!important}
*::-webkit-scrollbar-track{background:transparent!important}
*::-webkit-scrollbar-thumb{background:var(--glass-thumb)!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.3)!important}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--glass-thumb) 78%,#ffffff)!important}
*::-webkit-scrollbar-corner{background:transparent!important}
.stream-glass-thumb{background:var(--glass-thumb)!important;border:1px solid rgba(255,255,255,.4)!important}

/* Topbar: veil visible on every page, hidden only on home hero top; silky fade, no white flash */
.site-header{background:transparent!important;border:none!important;box-shadow:none!important;padding-block:12px!important;transition:none!important;z-index:1500!important}
.site-header::before{display:none!important}
.site-header::after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;background:rgba(245,252,252,.6)!important;border-bottom:1px solid rgba(112,152,160,.3)!important;backdrop-filter:blur(26px) saturate(150%)!important;-webkit-backdrop-filter:blur(26px) saturate(150%)!important;opacity:1!important;transition:opacity .7s ease!important}
html[data-theme="dark"] .site-header::after{background:rgba(10,32,40,.62)!important;border-bottom-color:rgba(233,244,241,.16)!important}
.site-header.is-scrolled::after{opacity:1!important}
.site-header.is-hero-top::after{opacity:0!important}
.site-header>*{transition:transform .7s cubic-bezier(.22,1,.36,1)!important}
.site-header.is-hero-top>*{transform:translateY(5px)!important}

/* Route transitions: one clean blur+fade system on all pages, header untouched */
.route-exit-ghost{z-index:60!important;animation:pageExitFade .5s ease forwards!important;contain:none!important}
.route-exit-ghost *{content-visibility:visible!important;contain:none!important}
@keyframes pageExitFade{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(14px)}}
.page-view.is-entering{animation:pageEnterFade .74s cubic-bezier(.22,1,.36,1) backwards!important}
@keyframes pageEnterFade{from{opacity:0;filter:blur(16px)}to{opacity:1;filter:blur(0)}}
.page-view.is-entering .contacts-layout,.page-view.is-entering .contact-panel,.page-view.is-leaving .contacts-layout,.page-view.is-leaving .contact-panel{animation:none!important}
.contact-panel{animation:none!important}
.contacts-layout,.contact-panel{transition:none!important;will-change:auto!important}

/* Card glow: silky appear/disappear, no stale reveal delays */
.card-tilt{transition-delay:0s!important}
.card-tilt,.value-card,.entity-card,.news-card,.social-card,.contact-row,.documents-strip>div,.contact-invite,.litter-demo-card{transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .85s ease,border-color .6s ease,background .5s ease,opacity .8s ease,filter .8s ease!important;transition-delay:0s!important}
.card-tilt::before,.card-tilt::after,.value-card::before,.value-card::after,.entity-card::before,.entity-card::after,.news-card::before,.social-card::before{transition:opacity .6s ease!important}

/* VK mini-card media: image fills its container exactly (no half-hidden video) */
.news-media-item{position:relative!important;overflow:hidden!important;min-height:0!important}
.news-media-item img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important}
.news-card:hover .news-media-item img{transform:none!important}

/* VK mini-card in light theme: readable glass surface */
html:not([data-theme="dark"]) .news-card{background:rgba(255,255,255,.78)!important;color:#16404a!important}
html:not([data-theme="dark"]) .news-card .news-card-meta time,html:not([data-theme="dark"]) .news-card .news-views{color:rgba(22,64,74,.72)!important}

/* Opened VK post: video takes its real ratio, vertical player centered without gray fields */
.news-modal-video{aspect-ratio:var(--media-ratio,16/9)!important;background:rgba(10,26,30,.25)!important}
.news-modal-video.is-vertical{grid-column:1/-1!important;width:auto!important;max-width:100%!important;height:min(70vh,720px)!important;margin-inline:auto!important}

/* Opened VK post: rounded right corners, scrollbar inside */
.news-modal{overflow:hidden!important;border-radius:30px!important}
.news-modal-scroll{border-radius:inherit!important}

/* Entity cards: open/close by blur+fade only, page behind blurs */
#morphStage{display:none!important}
#app{transition:filter .65s ease,opacity .65s ease}
body.entity-cinema #app{filter:blur(18px) saturate(1.05);opacity:.42}
.entity-modal-content{animation:none!important;transform:none!important}
.entity-overlay.is-open .entity-modal-content{animation:modalRevealMain .8s cubic-bezier(.22,1,.36,1) both!important}
@keyframes modalRevealMain{from{opacity:0;filter:blur(20px)}to{opacity:1;filter:none}}
.entity-overlay.is-closing{transition:opacity .5s ease!important}

/* Dogs page: narrower cards, centered grid */
.dog-grid{grid-template-columns:repeat(auto-fill,minmax(270px,336px))!important;justify-content:center!important;gap:26px!important}

/* About page wave: picks up the tone and glow of the story section below */
.about-page .foam-line{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 86%,#ffd28a 14%),var(--bg) 72%)!important;filter:none!important;box-shadow:0 -16px 44px rgba(255,196,110,.26),0 -2px 18px rgba(126,215,231,.2)!important}
.about-page .story-section{margin-top:-2px!important}

/* Boot intro: mark, then crossfade to full brand, sea-like wave surges */
.boot-mark{animation:none!important;display:grid!important;place-items:center!important}
.boot-logo-phase-a,.boot-logo-phase-b{grid-area:1/1;display:flex;flex-direction:column;align-items:center;text-align:center}
.boot-logo-phase-a{animation:bootPhaseAMain 3.2s cubic-bezier(.22,1,.36,1) both}
.boot-logo-phase-b{animation:bootPhaseBMain 3.2s cubic-bezier(.22,1,.36,1) both}
@keyframes bootPhaseAMain{0%{opacity:0;transform:scale(.85);filter:blur(16px)}18%{opacity:1;transform:scale(1);filter:blur(0)}46%{opacity:1;filter:blur(0)}62%{opacity:0;transform:scale(1.06);filter:blur(12px)}100%{opacity:0;transform:scale(1.06);filter:blur(12px)}}
@keyframes bootPhaseBMain{0%,54%{opacity:0;transform:scale(.93);filter:blur(14px)}76%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
.boot-logo-phase-b img{width:clamp(110px,16vw,200px)}
.boot-logo-title{font:650 clamp(30px,4.4vw,50px)/1.08 Georgia,"Times New Roman",serif;letter-spacing:-.01em;color:#123c48;margin-top:16px;text-shadow:0 10px 34px rgba(23,102,120,.25)}
.boot-logo-sub{font:700 11px/1 Montserrat,sans-serif;letter-spacing:.34em;color:rgba(18,60,72,.62);margin-top:11px}
html[data-theme="dark"] .boot-logo-title{color:#f2fbfd;text-shadow:0 10px 34px rgba(0,0,0,.4)}
html[data-theme="dark"] .boot-logo-sub{color:rgba(242,251,253,.6)}
.boot-wave{animation:bootWaveMain 3.3s cubic-bezier(.45,0,.2,1) both!important}
@keyframes bootWaveMain{0%{transform:translateY(108%)}34%{transform:translateY(40%)}48%{transform:translateY(46%)}64%{transform:translateY(22%)}74%{transform:translateY(27%)}100%{transform:translateY(0)}}

/* Language panel: smooth closing */
.language-switcher>div{transition:opacity .28s ease,transform .28s ease,filter .28s ease}
.language-switcher.is-closing>div{opacity:0!important;transform:translateY(-8px) scale(.96)!important;filter:blur(6px)!important;pointer-events:none}

/* Contacts: smooth scale hover instead of abrupt lift */
.contact-row,.social-card{transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .8s ease,background .5s ease,border-color .5s ease!important}
.contact-row:hover,.social-card:hover{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.03)!important}

/* Buttons: tactile press */
.primary-button,.glass-button,.nav-link{transition:transform .34s cubic-bezier(.22,1,.36,1),background .35s ease,box-shadow .35s ease,scale .18s ease!important}
.primary-button:active,.glass-button:active,.nav-link:active{scale:.94!important}
.glass-button{backdrop-filter:blur(18px) saturate(145%)!important;-webkit-backdrop-filter:blur(18px) saturate(145%)!important}

/* Richer ambience on quieter pages */
.page-view[data-page="dogs"],.page-view[data-page="puppies"],.page-view[data-page="litters"],.page-view[data-page="news"]{background-image:radial-gradient(1000px 540px at 88% -80px,rgba(94,205,222,.14),transparent 70%),radial-gradient(860px 500px at -4% 32%,rgba(243,178,80,.12),transparent 70%),radial-gradient(700px 420px at 70% 96%,rgba(255,214,140,.08),transparent 72%)}
html[data-theme="dark"] .page-view[data-page="dogs"],html[data-theme="dark"] .page-view[data-page="puppies"],html[data-theme="dark"] .page-view[data-page="litters"],html[data-theme="dark"] .page-view[data-page="news"]{background-image:radial-gradient(1000px 540px at 88% -80px,rgba(94,205,222,.1),transparent 70%),radial-gradient(860px 500px at -4% 32%,rgba(243,178,80,.08),transparent 70%)}

/* Layout hygiene: nothing spills sideways on any device */
html,body{overflow-x:clip}
/* v1.7.0: dogs grid narrowing applies to the real dogs grid element */
#dogGrid{grid-template-columns:repeat(auto-fill,minmax(270px,336px))!important;justify-content:center!important;gap:26px!important}
#puppyGrid,#litterGrid{justify-content:center!important}
/* v1.7.0 glow root-cause fix: base and hover shadows share one interpolable structure (no inset/list mismatch => smooth fade) */
.value-card,.entity-card,.news-card,.contact-invite,.social-card,.contact-row{box-shadow:0 14px 40px rgba(6,32,40,.14),0 0 42px rgba(241,176,75,0),0 0 0 1px rgba(255,255,255,0)!important}
.value-card:hover,.entity-card:hover,.news-card:hover,.contact-invite:hover,.social-card:hover,.contact-row:hover{box-shadow:0 28px 72px rgba(6,32,40,.22),0 0 42px rgba(241,176,75,.24),0 0 0 1px rgba(255,255,255,.22)!important}
html[data-theme="dark"] .value-card,html[data-theme="dark"] .entity-card,html[data-theme="dark"] .news-card,html[data-theme="dark"] .contact-invite,html[data-theme="dark"] .social-card,html[data-theme="dark"] .contact-row{box-shadow:0 24px 65px rgba(0,0,0,.34),0 0 42px rgba(241,176,75,0),0 0 0 1px rgba(255,255,255,.07)!important}
html[data-theme="dark"] .value-card:hover,html[data-theme="dark"] .entity-card:hover,html[data-theme="dark"] .news-card:hover,html[data-theme="dark"] .contact-invite:hover,html[data-theme="dark"] .social-card:hover,html[data-theme="dark"] .contact-row:hover{box-shadow:0 30px 80px rgba(0,0,0,.44),0 0 46px rgba(241,176,75,.26),0 0 0 1px rgba(255,255,255,.16)!important}


/* ================================================================
   Core polish layer — v0.9.0 technical consolidation
   ================================================================ */

/* --- header: glass background on every page, smooth show/hide --- */
.site-header{isolation:isolate}
.site-header::after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;opacity:1!important;transform:translateY(0)!important;transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1)!important;background:linear-gradient(180deg,rgba(252,250,242,.9),rgba(238,249,250,.72))!important;border-bottom:1px solid rgba(96,138,148,.22)!important;box-shadow:0 10px 34px rgba(23,76,92,.09)!important;backdrop-filter:blur(22px) saturate(155%)!important;-webkit-backdrop-filter:blur(22px) saturate(155%)!important}
html[data-theme="dark"] .site-header::after{background:linear-gradient(180deg,rgba(8,28,36,.84),rgba(8,28,36,.6))!important;border-bottom-color:rgba(233,244,241,.12)!important;box-shadow:0 12px 36px rgba(0,10,16,.35)!important}
.site-header>*{transition:transform .55s cubic-bezier(.22,1,.36,1)!important;transform:translateY(0)!important}
.site-header.is-hero-top::after{opacity:0!important;transform:translateY(-16%)!important}
.site-header.is-hero-top>*{transform:translateY(7px)!important}
.site-header.is-scrolled::after{opacity:1!important;transform:translateY(0)!important}

/* --- scrollbars: slim glass everywhere (PC + touch) --- */
*{scrollbar-width:thin!important;scrollbar-color:rgba(126,168,176,.55) transparent!important}
html[data-theme="dark"] *{scrollbar-color:rgba(196,224,228,.34) transparent!important}
*::-webkit-scrollbar,body::-webkit-scrollbar,.entity-overlay::-webkit-scrollbar,.news-modal-scroll::-webkit-scrollbar,.has-custom-page-scrollbar::-webkit-scrollbar{width:6px!important;height:6px!important;background:transparent!important}
*::-webkit-scrollbar-track,.entity-overlay::-webkit-scrollbar-track,.news-modal-scroll::-webkit-scrollbar-track{background:transparent!important;border:0!important}
*::-webkit-scrollbar-thumb,.entity-overlay::-webkit-scrollbar-thumb,.news-modal-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(140,190,198,.55))!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.35)!important}
html[data-theme="dark"] *::-webkit-scrollbar-thumb,html[data-theme="dark"] .entity-overlay::-webkit-scrollbar-thumb,html[data-theme="dark"] .news-modal-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(148,196,204,.3))!important;border-color:rgba(255,255,255,.14)!important}
*::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}
@media (pointer:coarse){*::-webkit-scrollbar{width:3px!important;height:3px!important}}
.firefox-scrollbar{width:6px!important}.firefox-scrollbar-thumb{width:6px!important}

/* --- page grids: centered tracks, contact invite wide at the bottom --- */
#dogGrid,#puppyGrid,#litterGrid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(266px,332px))!important;justify-content:center!important;gap:26px!important}
#dogGrid .entity-empty,#puppyGrid .entity-empty,#litterGrid .entity-empty{grid-column:1/-1!important}
.contact-invite{grid-column:1/-1!important;order:999!important;width:min(920px,100%)!important;justify-self:center!important;margin-top:16px!important;text-align:center!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important}

/* --- cards: neutral translucent contour instead of colored gradient edges --- */
.entity-card{background:rgba(255,255,255,.4)!important;border-image:none!important}
html[data-theme="dark"] .entity-card{background:rgba(255,255,255,.17)!important}

/* --- fullscreen entity view: blur-only backdrop, persistent content, no rounding --- */
body.entity-cinema #app{transform:none!important;scale:none!important;opacity:.4!important;filter:blur(17px) saturate(1.06)!important;transition:opacity .55s ease,filter .55s ease!important}
#app{transition:opacity .55s ease,filter .55s ease}
body.entity-cinema .site-header{opacity:0!important;transition:opacity .4s ease!important}
.entity-overlay{border-radius:0!important;z-index:2600!important;transition:opacity .5s ease!important}
.entity-modal-content{border-radius:0!important;overflow:visible!important}
.entity-overlay.is-open .entity-modal-content{opacity:1!important;transform:none!important;filter:none!important;animation:entityContentReveal .8s cubic-bezier(.22,1,.36,1) backwards!important}
.entity-overlay.is-open.show-content .entity-modal-content{opacity:1!important;transform:none!important;filter:none!important;animation:entityContentReveal .8s cubic-bezier(.22,1,.36,1) backwards!important}
@keyframes entityContentReveal{from{opacity:0;filter:blur(18px)}to{opacity:1;filter:blur(0)}}
.entity-overlay.is-closing .entity-modal-content,.entity-overlay.is-open.is-closing .entity-modal-content,.entity-overlay.is-open.show-content.is-closing .entity-modal-content{animation:none!important;transition:opacity .5s ease,filter .5s ease!important}
.entity-modal-close{z-index:2700!important}

/* --- news modal: rounded corners with inner scroll, reachable close button --- */
.news-modal{border-radius:26px!important;overflow:hidden!important;clip-path:inset(0 round 26px)!important}
.news-modal-scroll{border-radius:26px!important}
.news-overlay{z-index:2600!important}
.news-modal-close{z-index:2700!important}

/* --- light theme contrast for news badges and contact chips --- */
html:not([data-theme="dark"]) .news-age,html:not([data-theme="dark"]) .news-card-tag{color:#0c5a6e!important;background:rgba(19,120,142,.13)!important;border:1px solid rgba(19,120,142,.28)!important;text-shadow:none!important}
html:not([data-theme="dark"]) .news-age.is-new{color:#0b6b47!important;background:rgba(22,143,98,.15)!important;border-color:rgba(22,143,98,.34)!important}
html:not([data-theme="dark"]) .news-card-meta,html:not([data-theme="dark"]) .news-card-date{color:#27505c!important}
html:not([data-theme="dark"]) .news-contact-chip,html:not([data-theme="dark"]) .news-card-contacts a,html:not([data-theme="dark"]) .news-card a[href*="t.me"],html:not([data-theme="dark"]) .news-card a[href*="vk.com"],html:not([data-theme="dark"]) .news-modal a[href*="t.me"],html:not([data-theme="dark"]) .news-modal a[href*="vk.com"]{color:#123c48!important;background:rgba(255,255,255,.92)!important;border:1px solid rgba(18,80,94,.26)!important;box-shadow:0 6px 18px rgba(23,76,92,.1)!important}

/* --- news media: visible video badges, ratio-aware video tiles --- */
.news-media-item{position:relative!important}
.news-video-mark{position:absolute!important;left:10px!important;bottom:10px!important;top:auto!important;right:auto!important;z-index:4!important;margin:0!important;padding:5px 11px!important;border-radius:999px!important;background:rgba(9,32,40,.64)!important;color:#fff!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:none!important;white-space:nowrap!important;max-width:calc(100% - 20px)!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1.2!important}
.news-media-item:has(.news-video-mark){aspect-ratio:var(--media-ratio,16/9)!important;height:auto!important}
.news-card-media.media-count-1 .news-media-item,.news-card-media.media-count-2 .news-media-item{aspect-ratio:var(--media-ratio,4/3)!important;height:auto!important}
.news-card-media .news-media-item img{width:100%!important;height:100%!important;object-fit:cover!important}

/* --- contacts: gentle hover, staged entrance --- */
.contact-row,.social-card{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease,background .4s ease,border-color .4s ease!important}
.contact-row:hover,.social-card:hover{transform:translateY(-3px) scale(1.02)!important}

/* --- page transitions: every direct section rises in, no blinking --- */
.page-view.is-entering>section,.page-view.is-entering>div{animation:sectionRise .8s cubic-bezier(.22,1,.36,1) backwards!important}
.page-view.is-entering>*:nth-child(2){animation-delay:.07s!important}
.page-view.is-entering>*:nth-child(3){animation-delay:.14s!important}
.page-view.is-entering>*:nth-child(4){animation-delay:.2s!important}
.page-view.is-entering>*:nth-child(n+5){animation-delay:.26s!important}
.page-view.is-entering .contacts-layout>*{animation:sectionRise .85s cubic-bezier(.22,1,.36,1) backwards!important}
.page-view.is-entering .contacts-layout>*:nth-child(2){animation-delay:.08s!important}
.page-view.is-entering .contacts-layout>*:nth-child(3){animation-delay:.16s!important}
@keyframes sectionRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* --- theme switching: soft cross-fade --- */
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:background-color .55s ease,background .55s ease,color .55s ease,border-color .55s ease,box-shadow .55s ease,fill .55s ease,stroke .55s ease,opacity .55s ease!important}

/* --- wave divider: seamless joint in both themes, no skew --- */
.wave-divider{background:transparent!important;overflow:hidden!important;margin:-2px 0!important}
.wave-divider svg{display:block;width:100%!important;height:100%!important;margin:0!important;transform:none!important}

/* --- buttons: smooth press feedback --- */
.primary-button,.glass-button,.hero-actions a,.hero-actions button{transition:transform .45s cubic-bezier(.34,1.4,.64,1),scale .3s cubic-bezier(.34,1.4,.64,1),background .35s ease,box-shadow .5s ease,border-color .35s ease,color .3s ease!important}
.primary-button:active,.glass-button:active,.hero-actions a:active,.hero-actions button:active{scale:.94!important;transform:none!important;transition:scale .14s ease!important}

/* --- hero arrows: hide at the edges --- */
.hero-switches button{transition:opacity .4s ease,transform .45s cubic-bezier(.22,1,.36,1),background .3s ease!important}
.hero-switches button.is-edge-hidden{opacity:0!important;pointer-events:none!important;transform:scale(.55)!important}

/* --- intro: mark, then full lockup, then slow wave wash --- */
.boot-screen{transition:opacity .9s ease!important}
.boot-mark{position:relative!important;width:min(520px,84vw)!important;height:min(320px,52vh)!important}
.boot-logo-phase-a,.boot-logo-phase-b{position:absolute!important;inset:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:10px!important}
.boot-logo-phase-a{animation:bootMarkIn 1.05s cubic-bezier(.22,1,.36,1) both,bootMarkOut .8s ease 1.9s forwards!important}
.boot-logo-phase-b{opacity:0;animation:bootLockupIn 1.05s cubic-bezier(.22,1,.36,1) 2.3s both!important}
.boot-logo-phase-a img{width:clamp(120px,18vw,190px)!important}
.boot-logo-phase-b img{width:clamp(230px,42vw,440px)!important}
@keyframes bootMarkIn{from{opacity:0;transform:scale(.9);filter:blur(12px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes bootMarkOut{to{opacity:0;transform:scale(1.06);filter:blur(14px)}}
@keyframes bootLockupIn{from{opacity:0;transform:scale(.94);filter:blur(14px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
.boot-wave{animation:bootWaveWash 2.7s cubic-bezier(.45,.05,.2,1) 3.25s both!important;will-change:transform}
@keyframes bootWaveWash{0%{transform:translate3d(0,104%,0)}55%{transform:translate3d(0,42%,0)}72%{transform:translate3d(0,46%,0)}100%{transform:translate3d(0,-6%,0)}}

/* --- ambience: calmer background washes --- */
.page-view[data-page]{background-image:radial-gradient(820px 460px at 92% -80px,rgba(94,205,222,.07),transparent 70%),radial-gradient(700px 420px at -6% 26%,rgba(243,178,80,.05),transparent 72%)!important}
html[data-theme="dark"] .page-view[data-page]{background-image:radial-gradient(820px 460px at 92% -80px,rgba(94,205,222,.05),transparent 70%),radial-gradient(700px 420px at -6% 26%,rgba(243,178,80,.04),transparent 72%)!important}

/* --- dark theme mobile menu: readable glass --- */
html[data-theme="dark"] .mobile-menu{background:linear-gradient(165deg,rgba(7,26,34,.97),rgba(10,36,44,.96) 55%,rgba(20,42,38,.95))!important;color:#ecf6f4!important}
html[data-theme="dark"] .mobile-menu a,html[data-theme="dark"] .mobile-menu button,html[data-theme="dark"] .mobile-menu .nav-link,html[data-theme="dark"] .mobile-menu summary,html[data-theme="dark"] .mobile-menu strong{color:#ecf6f4!important}
html[data-theme="dark"] .mobile-menu .nav-link{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important}
html[data-theme="dark"] .mobile-menu .nav-link.is-active{background:rgba(103,199,214,.16)!important;border-color:rgba(103,199,214,.4)!important;color:#9fe3ee!important}
html[data-theme="dark"] .mobile-menu small,html[data-theme="dark"] .mobile-menu p{color:rgba(236,246,244,.62)!important}
html[data-theme="dark"] .mobile-menu-wave{opacity:.22!important;filter:saturate(.7) brightness(.55)!important}

/* --- content protection --- */
body{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text!important;-moz-user-select:text!important;user-select:text!important}
img{-webkit-user-drag:none!important}

/* --- mobile layout overhaul --- */
@media (max-width:768px){
  body{overflow-x:clip!important}
  img,video,svg,iframe{max-width:100%}
  .hero-content{padding-bottom:118px!important}
  .hero-switches{right:14px!important;left:auto!important;top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)!important;gap:10px!important}
  .hero-switches button{width:44px!important;height:44px!important;font-size:17px!important;border-radius:14px!important}
  .hero h1{font-size:clamp(30px,8.6vw,40px)!important;line-height:1.12!important}
  .hero-lead{font-size:15px!important;max-width:94%!important}
  .hero-actions{flex-wrap:wrap!important;gap:10px!important}
  .wave-divider{height:74px!important}
  .section-heading h1{font-size:clamp(27px,8vw,36px)!important;overflow-wrap:break-word}
  #dogGrid,#puppyGrid,#litterGrid{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .contact-invite{width:100%!important}
  .news-card{padding:16px!important;border-radius:22px!important}
  .news-card-media{grid-template-columns:1fr!important;gap:10px!important}
  .news-card-media .news-media-item{aspect-ratio:var(--media-ratio,4/3)!important;height:auto!important}
  .news-card-meta{display:flex!important;flex-wrap:wrap!important;row-gap:6px!important;column-gap:10px!important}
  .news-card-contacts,.news-card-footer{flex-wrap:wrap!important;gap:8px!important}
  .news-modal{inset:10px!important;width:auto!important;max-width:none!important;margin:0!important;transform:none!important;border-radius:20px!important;clip-path:inset(0 round 20px)!important}
  .entity-modal-content{padding:16px!important}
  .boot-logo-phase-b img{width:min(78vw,340px)!important}
}
@media (max-width:420px){
  .hero-switches button{width:40px!important;height:40px!important}
  .news-card{padding:13px!important}
}

/* --- specificity addendum: dark mobile menu + mobile hero switches --- */
html[data-theme="dark"] .mobile-menu.mobile-menu{background:linear-gradient(165deg,rgba(7,26,34,.97),rgba(10,36,44,.96) 55%,rgba(20,42,38,.95))!important;color:#ecf6f4!important}
html[data-theme="dark"] .mobile-menu.mobile-menu a,html[data-theme="dark"] .mobile-menu.mobile-menu button,html[data-theme="dark"] .mobile-menu.mobile-menu span,html[data-theme="dark"] .mobile-menu.mobile-menu strong,html[data-theme="dark"] .mobile-menu.mobile-menu small,html[data-theme="dark"] .mobile-menu.mobile-menu p,html[data-theme="dark"] .mobile-menu.mobile-menu summary{color:#ecf6f4!important}
html[data-theme="dark"] .mobile-menu.mobile-menu .nav-link{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.12)!important;color:#ecf6f4!important}
html[data-theme="dark"] .mobile-menu.mobile-menu .nav-link.is-active{background:rgba(103,199,214,.16)!important;border-color:rgba(103,199,214,.4)!important;color:#9fe3ee!important}
html[data-theme="dark"] .mobile-menu.mobile-menu small,html[data-theme="dark"] .mobile-menu.mobile-menu p{color:rgba(236,246,244,.62)!important}
html[data-theme="dark"] .mobile-menu.mobile-menu .mobile-menu-wave{opacity:.22!important;filter:saturate(.7) brightness(.55)!important}
@media (max-width:768px){
  #hero .hero-content,.hero .hero-content{padding-bottom:118px!important}
  #hero .hero-switches,.hero .hero-switches{position:absolute!important;right:14px!important;left:auto!important;top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)!important;gap:10px!important;z-index:6!important}
  #hero .hero-switches button,.hero .hero-switches button{width:44px!important;height:44px!important;font-size:17px!important;border-radius:14px!important}
}

/* --- v0.9.2 surgical regression fix: preserves v0.9.0 visual/interaction system --- */
:root{--v092-values-bg:#f6ead0;--v092-wave-back:#7bc9d3;--v092-scroll:rgba(190,222,220,.62)}
html[data-theme="dark"]{--v092-values-bg:#0d242c;--v092-wave-back:#27606b;--v092-scroll:rgba(190,222,220,.52)}

/* Intro keeps the original v0.9.0 timing and wave; only the first asset is now the ready lockup. */
.boot-logo-phase-a img{width:clamp(230px,42vw,440px)!important;height:auto!important}

/* Topbar: same control positions at the top and after scrolling; only the glass layer fades. */
.site-header{transform:none!important;opacity:1!important;background:transparent!important;box-shadow:none!important;transition:none!important}
.site-header>*{transform:none!important;transition:color .35s ease,background-color .35s ease,border-color .35s ease!important}
.site-header::after{opacity:0!important;transform:translateY(-8px)!important;transition:opacity .62s ease,transform .62s cubic-bezier(.16,1,.3,1)!important}
.site-header.is-scrolled::after{opacity:1!important;transform:none!important}
.site-header.is-hero-top::after{opacity:0!important;transform:translateY(-8px)!important}

/* Preserve glass/blur buttons, remove only the broken press jump and shrink. */
.hero-actions .primary-button,.hero-actions .glass-button{-webkit-backdrop-filter:blur(18px) saturate(145%)!important;backdrop-filter:blur(18px) saturate(145%)!important}
.hero-actions .primary-button:active,.hero-actions .glass-button:active,.intro-actions a:active{transform:none!important;filter:brightness(.94)!important}

/* Page switching is one scene; internal cards keep their normal tilt outside a route transition. */
body.is-routing .page-view,body.is-routing .page-view>*{animation:none!important;transition:none!important}
.route-exit-ghost,.page-transition{display:none!important}

/* Entity opening: blur only. The original 3D tilt remains active before/after opening. */
body.entity-cinema #app,body.entity-cinema main{transform:none!important;scale:none!important;filter:blur(17px) saturate(1.04)!important;opacity:.42!important}
body.entity-cinema .site-header{transform:none!important;scale:none!important}
.entity-card.is-morph-source .entity-card-copy,.entity-card.is-morph-source .entity-card-media,.news-card.is-morph-source>*{opacity:1!important;filter:none!important;transform:none!important}

/* Contacts should illuminate but never lift or grow. */
.contact-row:hover,.social-card:hover{box-shadow:0 20px 48px rgba(8,48,58,.17),0 0 30px rgba(104,198,210,.12)!important}
.contact-row:hover .contact-icon,.social-card:hover .social-icon{transform:none!important}

/* Seamless wave: exact same solid surface as the support section. */
.wave-divider{background:transparent!important;color:var(--v092-values-bg)!important;filter:none!important;margin-bottom:-2px!important;overflow:hidden!important}
.wave-divider svg{display:block!important;width:102%!important;height:calc(100% + 2px)!important;margin:0 0 -1px -1%!important;transform:none!important;filter:none!important}
.wave-divider path{animation:none!important;transform:none!important}



/* VK cards: natural dimensions from API/preview metadata, no forced square or 16:9 box. */
.news-card{height:auto!important;min-height:0!important}
.news-card-media{height:auto!important;min-height:0!important;max-height:none!important;background:transparent!important}
.news-card-media.media-count-1,.news-card-media.has-single-media,.news-card-media.has-single-video{
  width:min(calc(100% - 36px),var(--single-media-width,100%))!important;height:auto!important;min-height:0!important;max-height:none!important;
  margin-inline:auto!important;aspect-ratio:var(--media-ratio,auto)!important;overflow:visible!important
}
.news-media-item{position:relative!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:var(--media-ratio,4/3)!important;overflow:hidden!important}
.news-card-media.media-count-1 .news-media-item,.news-card-media.has-single-media .news-media-item,.news-card-media.has-single-video .news-media-item{aspect-ratio:inherit!important}
.news-media-item img,.news-media-item.is-video img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;transform:none!important}
.news-video-mark{
 display:inline-flex!important;position:absolute!important;left:10px!important;bottom:10px!important;top:auto!important;right:auto!important;z-index:30!important;
 width:auto!important;max-width:calc(100% - 20px)!important;padding:7px 11px!important;border-radius:999px!important;
 overflow:visible!important;clip-path:none!important;opacity:1!important;visibility:visible!important;white-space:nowrap!important;
 background:rgba(5,26,34,.76)!important;color:#fff!important;font-size:11px!important;font-weight:800!important;line-height:1!important;
 -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;pointer-events:none!important
}

/* VK modal: natural video ratio and a complete rounded glass shell. */
.news-modal{border:1px solid rgba(161,198,202,.46)!important;border-radius:30px!important;overflow:hidden!important;clip-path:none!important}

.news-modal-scroll{border-radius:inherit;scrollbar-color:var(--v092-scroll) transparent!important;scrollbar-gutter:stable both-edges!important}
.news-modal-scroll::-webkit-scrollbar{width:7px!important;background:transparent!important}
.news-modal-scroll::-webkit-scrollbar-track{background:transparent!important;margin:18px 0!important}
.news-modal-scroll::-webkit-scrollbar-thumb{border:1px solid rgba(255,255,255,.26)!important;border-radius:999px!important;background-color:var(--v092-scroll)!important;background-image:linear-gradient(180deg,rgba(255,255,255,.26),rgba(118,176,184,.26))!important;background-clip:padding-box!important}
.news-modal-media{display:grid!important;grid-template-columns:1fr!important;justify-items:center!important;gap:16px!important}
.news-modal-video,.news-modal-video:has(iframe){position:relative!important;width:min(100%,820px)!important;height:auto!important;min-height:0!important;max-height:min(74svh,820px)!important;aspect-ratio:var(--media-ratio,16/9)!important;margin-inline:auto!important;overflow:hidden!important;border-radius:22px!important;background:#07171c!important}
.news-modal-video.is-vertical{width:min(100%,430px)!important}
.news-modal-video video,.news-modal-video iframe,.news-modal-video:has(iframe) iframe{display:block!important;width:100%!important;height:100%!important;margin:0!important;transform:none!important;border:0!important;object-fit:contain!important;background:#07171c!important}
body:has(.news-overlay.is-open)>.firefox-scrollbar{opacity:0!important}

@media(max-width:700px){
 *::-webkit-scrollbar{width:3px!important;height:3px!important}
 .news-modal{border:0!important;border-radius:0!important}.news-modal::after{display:none!important}
 .news-modal-scroll{scrollbar-gutter:auto!important}.news-modal-scroll::-webkit-scrollbar{width:3px!important}
 .news-modal-video,.news-modal-video.is-vertical{width:100%!important;border-radius:17px!important}
}

/* v0.9.2 final specificity corrections */
.site-header.is-hero-top>*{transform:none!important}

.news-modal-video,.news-modal-video:has(iframe),.news-modal-video.is-vertical{max-height:none!important}

/* ================================================================
   v0.9.4 canonical interaction and media layer
   ================================================================ */
:root{--v094-wave-surface:#133b44;--v094-wave-back:#28717c;--v094-glass-thumb:rgba(218,239,236,.72)}
html[data-theme="light"]{--v094-wave-surface:#dcefed;--v094-wave-back:#79cbd2;--v094-glass-thumb:rgba(54,126,139,.58)}
html{scrollbar-gutter:stable}
/* Donor v24.1 topbar motion. Keep the current strip permanently and never move controls. */
.site-header,.site-header.is-scrolled,.site-header.is-hero-top{transform:none!important;scale:none!important;opacity:1!important;transition:height .35s ease,background .5s ease,border-color .5s ease,box-shadow .5s ease,color .4s ease,-webkit-backdrop-filter .5s ease,backdrop-filter .5s ease!important}
.site-header::after,.site-header.is-hero-top::after,.site-header.is-scrolled::after{opacity:1!important;transform:translate3d(0,0,0)!important;transition:background .5s ease,border-color .5s ease,box-shadow .5s ease,-webkit-backdrop-filter .5s ease,backdrop-filter .5s ease!important}
.site-header.is-hero-top::after{background:linear-gradient(180deg,rgba(4,22,31,.52),rgba(4,22,31,.16) 72%,transparent)!important;border-bottom-color:rgba(255,255,255,.12)!important;box-shadow:none!important;-webkit-backdrop-filter:blur(3px) saturate(115%)!important;backdrop-filter:blur(3px) saturate(115%)!important}
.site-header.is-scrolled::after{background:linear-gradient(180deg,rgba(8,28,36,.84),rgba(8,28,36,.60))!important;border-bottom-color:rgba(233,244,241,.12)!important;box-shadow:0 12px 36px rgba(0,10,16,.24)!important;-webkit-backdrop-filter:blur(22px) saturate(155%)!important;backdrop-filter:blur(22px) saturate(155%)!important}
html[data-theme="light"] .site-header.is-scrolled::after{background:linear-gradient(180deg,rgba(252,250,242,.9),rgba(238,249,250,.72))!important;border-bottom-color:rgba(96,138,148,.22)!important;box-shadow:0 10px 34px rgba(23,76,92,.09)!important}
.site-header>*,.site-header.is-hero-top>*,.site-header.is-scrolled>*{transform:none!important;transition:color .4s ease,background .48s ease,border-color .48s ease,box-shadow .48s ease,-webkit-backdrop-filter .48s ease,backdrop-filter .48s ease!important}
.site-header .icon-button,.site-header .language-switcher>summary{transition:transform .25s ease,background .48s ease,border-color .48s ease,color .4s ease,box-shadow .48s ease,-webkit-backdrop-filter .48s ease,backdrop-filter .48s ease!important}
.site-header.is-hero-top .icon-button,.site-header.is-hero-top .language-switcher>summary{color:#fff!important;background:rgba(8,34,45,.18)!important;border-color:rgba(255,255,255,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.08)!important;-webkit-backdrop-filter:blur(10px) saturate(135%)!important;backdrop-filter:blur(10px) saturate(135%)!important}
.site-header.is-scrolled .icon-button,.site-header.is-scrolled .language-switcher>summary{background:color-mix(in srgb,var(--surface-solid) 60%,transparent)!important;border-color:color-mix(in srgb,var(--line) 78%,transparent)!important;box-shadow:0 10px 30px rgba(20,70,80,.12)!important;-webkit-backdrop-filter:blur(18px) saturate(160%)!important;backdrop-filter:blur(18px) saturate(160%)!important}
.site-header .icon-button:hover,.site-header .language-switcher>summary:hover{transform:translateY(-2px)!important}.site-header .icon-button:active,.site-header .language-switcher>summary:active{transform:translateY(-2px)!important;scale:none!important;filter:brightness(.93)}
/* Genuine two-stage intro: mark, lockup, hold, then water exit. */
.boot-logo-phase-a img{width:clamp(112px,17vw,184px)!important;height:auto!important}.boot-logo-phase-b img{width:clamp(230px,42vw,440px)!important;height:auto!important}
.boot-logo-phase-a{animation:v094MarkIn 1.15s cubic-bezier(.22,1,.36,1) .15s forwards,v094MarkOut .82s cubic-bezier(.4,0,.2,1) 2.05s forwards!important}
.boot-logo-phase-b{animation:v094LockupIn 1.12s cubic-bezier(.22,1,.36,1) 2.48s forwards!important}
.boot-wave{animation:v094BootWave 2.8s cubic-bezier(.45,.05,.2,1) 4.55s both!important;will-change:transform}
@keyframes v094MarkIn{from{opacity:0;filter:blur(14px);transform:scale(.84)}to{opacity:1;filter:none;transform:scale(1)}}
@keyframes v094MarkOut{from{opacity:1;filter:none;transform:scale(1)}to{opacity:0;filter:blur(13px);transform:scale(1.08)}}
@keyframes v094LockupIn{from{opacity:0;filter:blur(14px);transform:scale(.92)}to{opacity:1;filter:none;transform:scale(1)}}
@keyframes v094BootWave{0%{transform:translate3d(0,108%,0)}48%{transform:translate3d(0,42%,0)}65%{transform:translate3d(0,46%,0)}100%{transform:translate3d(0,-112%,0)}}
/* Main lower wave. No filters, no zoom-dependent pseudo glow, exact seam colour. */
.wave-divider{position:relative!important;height:132px!important;margin:-2px 0!important;overflow:hidden!important;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--v094-wave-back) 20%,transparent) 58%,var(--v094-wave-surface) 100%)!important;filter:none!important;color:var(--v094-wave-surface)!important;isolation:isolate}
.wave-divider::before,.wave-divider::after{display:none!important}.wave-divider svg{display:block!important;position:absolute!important;left:-4%!important;bottom:-2px!important;width:108%!important;height:calc(100% + 4px)!important;margin:0!important;filter:none!important;overflow:visible!important;transform:translate3d(0,0,0)!important;backface-visibility:hidden}


@keyframes v094WaveFront{0%{transform:translate3d(-1.1%,1px,0) scale3d(1.025,.985,1)}52%{transform:translate3d(.15%,-3px,0) scale3d(1.012,1.025,1)}100%{transform:translate3d(1.1%,0,0) scale3d(1.025,1,1)}}
@keyframes v094WaveBack{0%{transform:translate3d(1.2%,4px,0) scale3d(1.03,1.025,1)}55%{transform:translate3d(-.2%,-2px,0) scale3d(1.015,.975,1)}100%{transform:translate3d(-1.2%,2px,0) scale3d(1.03,1.015,1)}}
/* About seam: remove the giant zoom-dependent blue orb and animate only a bounded foam layer. */
.story-section::before{display:none!important}.about-page .foam-line{left:-5%!important;right:-5%!important;bottom:-2px!important;height:88px!important;background:var(--bg)!important;border-radius:50% 50% 0 0/68% 68% 0 0!important;filter:none!important;box-shadow:0 -7px 24px rgba(87,190,202,.13),0 -1px 0 color-mix(in srgb,var(--bg) 88%,#79cbd2)!important;animation:v094Foam 9s cubic-bezier(.37,0,.22,1) infinite alternate!important;will-change:transform;transform:translate3d(0,1px,0)}
.about-page .story-section{margin-top:0!important;background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 94%,#f2b65d) 460px,var(--bg))!important}
@keyframes v094Foam{0%{transform:translate3d(-.9%,2px,0) scale3d(1.025,.98,1)}50%{transform:translate3d(.1%,-3px,0) scale3d(1.012,1.045,1)}100%{transform:translate3d(.9%,1px,0) scale3d(1.025,1,1)}}
/* Hero buttons keep their hovered position while pressed; no snap and no shrink. */
.hero-actions .primary-button,.hero-actions .glass-button{scale:none!important;transition:transform .42s cubic-bezier(.16,1,.3,1),filter .28s ease,box-shadow .42s ease,background .42s ease!important}
.hero-actions .primary-button:hover,.hero-actions .glass-button:hover{transform:translateY(-4px) scale(1.025)!important}
.hero-actions .primary-button:active,.hero-actions .glass-button:active,.intro-actions a:active{transform:translateY(-4px) scale(1.025)!important;scale:none!important;filter:brightness(.92)!important;transition:transform .16s ease,filter .16s ease!important}
/* One route scene: blur + opacity both directions, no per-card entrance. */
body.is-routing .page-view *{animation-play-state:paused!important}.page-view{will-change:opacity,filter,transform}.page-view.is-active{opacity:1}.news-grid,.entity-grid,.dog-grid{animation:none!important}
/* Opening entity: app, header and footer use exactly the same blur/opacity timeline. */
body.entity-cinema #app,body.entity-cinema>.site-header,body.entity-cinema>.site-footer,body.entity-cinema>.mobile-menu{transform:none!important;scale:none!important;opacity:.26!important;filter:blur(17px) saturate(.92)!important;transition:opacity .56s ease,filter .62s ease!important;pointer-events:none!important}
#app,.site-header,.site-footer,.mobile-menu{transition:opacity .56s ease,filter .62s ease!important}
/* Entity typography and empty-chip cleanup. */
.entity-card-copy small{font-family:Montserrat,"Segoe UI",Arial,sans-serif!important;font-size:11px!important;font-weight:900!important;line-height:1.25!important;letter-spacing:.105em!important;color:#fff!important;text-shadow:0 2px 12px rgba(0,0,0,.55)!important}.entity-card-copy p{position:relative;padding-left:14px!important;border-left:2px solid color-mix(in srgb,var(--card-accent,#8fdce3) 78%,white)!important;color:rgba(255,255,255,.9)!important;line-height:1.55!important}.entity-card-meta{align-items:center!important}.entity-card-meta span{display:inline-flex!important;align-items:center!important;min-width:max-content!important;white-space:nowrap!important;color:#fff!important;font-weight:800!important}.entity-card-meta span:empty{display:none!important}
/* Polished VK fallback. */
.news-empty-state{grid-column:1/-1!important;min-height:300px!important;width:min(100%,900px)!important;margin-inline:auto!important;padding:clamp(24px,5vw,54px)!important;display:grid!important;grid-template-columns:92px 1fr!important;align-items:center!important;gap:28px!important;background:linear-gradient(135deg,color-mix(in srgb,var(--surface-solid) 82%,#5fc1cc),color-mix(in srgb,var(--surface-solid) 88%,#efb35e))!important;border:1px solid color-mix(in srgb,var(--line) 72%,#8bd7de)!important;border-radius:32px!important;box-shadow:0 26px 80px rgba(5,35,43,.18)!important}.news-empty-icon{width:92px;height:92px;display:grid;place-items:center;border-radius:28px;background:linear-gradient(145deg,#268f9e,#164956);color:#fff;font-weight:950;font-size:25px;box-shadow:inset 0 1px rgba(255,255,255,.25),0 18px 42px rgba(4,31,39,.24)}.news-empty-state h3{font:650 clamp(30px,4vw,48px)/1.06 Georgia,"Times New Roman",serif;margin:14px 0 10px}.news-empty-state p{max-width:620px;color:var(--muted);line-height:1.7}.news-empty-state .news-card-link{display:inline-flex;margin-top:15px;padding:13px 17px;border-radius:14px;background:var(--surface-solid);border:1px solid var(--line);font-weight:850;transition:transform .3s ease,background .3s ease}.news-empty-state .news-card-link:hover{transform:translateY(-2px)}
/* VK modal: natural ratios, dense 12-column layout, no fixed grid rows or overlap. */
.news-modal{overflow:hidden!important;border-radius:30px!important;clip-path:inset(0 round 30px)!important}.news-modal-scroll{overflow-x:hidden!important;overflow-y:auto!important;border-radius:inherit!important;scrollbar-gutter:auto!important}.news-modal-media{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-auto-flow:row dense!important;grid-auto-rows:auto!important;align-items:start!important;justify-items:stretch!important;gap:14px!important}.news-modal-media-item,.news-modal-photo-wrap,.news-modal-video{position:relative!important;grid-column:span 6!important;width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;max-width:none!important;max-height:none!important;aspect-ratio:var(--media-ratio,4/3)!important;margin:0!important;align-self:start!important;justify-self:stretch!important;overflow:hidden!important;border-radius:22px!important;background:transparent!important}.news-modal-media-item.is-single{grid-column:1/-1!important;width:min(100%,820px)!important;justify-self:center!important}.news-modal-media-item.is-portrait{max-width:440px!important;justify-self:center!important}.news-modal-media-item.is-single.is-portrait{width:min(100%,calc(72svh * var(--media-ratio,9/16)))!important}.news-modal-media-item.is-landscape{grid-column:span 6!important}.news-modal-photo,.news-modal-photo img,.news-modal-video video,.news-modal-video iframe,.news-modal-video img{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important;border:0!important;border-radius:inherit!important;object-fit:contain!important;background:transparent!important}.news-modal-photo{position:absolute!important;padding:0!important}.news-modal-photo-credit{position:absolute!important;z-index:4;left:12px;bottom:12px}.news-modal-video:has(iframe){width:100%!important;aspect-ratio:var(--media-ratio,9/16)!important}.news-modal-media[data-count="2"]>.is-portrait,.news-modal-media[data-count="3"]>.is-portrait,.news-modal-media[data-count="4"]>.is-portrait{grid-column:span 6!important}.news-modal-close{z-index:20!important}
/* Rounded glass scrollbars at the actual scrolling nodes. */
.firefox-scrollbar{display:block!important;top:10px!important;bottom:10px!important;height:auto!important;right:7px!important;width:8px!important;border-radius:999px!important;overflow:hidden!important;background:rgba(255,255,255,.035)!important;border:1px solid rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important}.firefox-scrollbar-thumb{width:100%!important;min-height:52px!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(255,255,255,.7),var(--v094-glass-thumb))!important;background-clip:padding-box!important;box-shadow:inset 0 1px rgba(255,255,255,.35),0 4px 14px rgba(0,0,0,.18)!important}
.changelog-scroll,.news-modal-scroll,.entity-overlay,.detail-shell,.mobile-menu{scrollbar-width:thin!important;scrollbar-color:var(--v094-glass-thumb) transparent!important}.changelog-scroll::-webkit-scrollbar,.news-modal-scroll::-webkit-scrollbar,.entity-overlay::-webkit-scrollbar,.detail-shell::-webkit-scrollbar,.mobile-menu::-webkit-scrollbar{width:8px!important;height:8px!important}.changelog-scroll::-webkit-scrollbar-track,.news-modal-scroll::-webkit-scrollbar-track,.entity-overlay::-webkit-scrollbar-track,.detail-shell::-webkit-scrollbar-track,.mobile-menu::-webkit-scrollbar-track{margin:18px 0!important;background:transparent!important;border-radius:999px!important}.changelog-scroll::-webkit-scrollbar-thumb,.news-modal-scroll::-webkit-scrollbar-thumb,.entity-overlay::-webkit-scrollbar-thumb,.detail-shell::-webkit-scrollbar-thumb,.mobile-menu::-webkit-scrollbar-thumb{min-height:46px!important;border:2px solid transparent!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(255,255,255,.72),var(--v094-glass-thumb)) padding-box!important;box-shadow:inset 0 1px rgba(255,255,255,.34),0 3px 12px rgba(0,0,0,.18)!important}.changelog-scroll::-webkit-scrollbar-button,.news-modal-scroll::-webkit-scrollbar-button,.entity-overlay::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}
body:has(.news-overlay.is-open)>.firefox-scrollbar,body.entity-cinema>.firefox-scrollbar,body:has(.changelog-overlay.is-open)>.firefox-scrollbar{opacity:0!important}
/* Theme changes cannot alter footer metrics. */
.site-footer{min-height:190px!important;transform:none!important;translate:none!important;contain:layout!important;transition:color .55s ease,background-color .55s ease,border-color .55s ease!important}.footer-meta,.footer-links,.footer-brand{transform:none!important}
@media(max-width:760px){.wave-divider{height:82px!important}.about-page .foam-line{height:66px!important}.news-empty-state{grid-template-columns:1fr!important;text-align:center!important}.news-empty-icon{margin:auto}.news-modal{border-radius:20px!important;clip-path:inset(0 round 20px)!important}.news-modal-media{grid-template-columns:1fr!important}.news-modal-media-item,.news-modal-photo-wrap,.news-modal-video,.news-modal-media-item.is-landscape,.news-modal-media-item.is-portrait{grid-column:1!important;width:100%!important;max-width:100%!important}.news-modal-media-item.is-single.is-portrait{width:min(100%,calc(68svh * var(--media-ratio,9/16)))!important}.firefox-scrollbar{right:5px!important;width:6px!important}}
@media(prefers-reduced-motion:reduce){.wave-divider path,.about-page .foam-line{animation:none!important}}

/* v0.9.4 intro cascade correction: important base opacity had blocked keyframes. */
.boot-screen{animation:none!important;opacity:1!important;visibility:visible!important}
.boot-screen.is-done{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.boot-logo-phase-a{opacity:0;animation:v094MarkIn 1.15s cubic-bezier(.22,1,.36,1) .15s forwards,v094MarkOut .82s cubic-bezier(.4,0,.2,1) 2.05s forwards!important}
.boot-logo-phase-b{opacity:0;animation:v094LockupIn 1.12s cubic-bezier(.22,1,.36,1) 2.48s forwards!important}
/* Route animation runs on the single app scene, not on individual cards. */
body.is-routing #app{will-change:opacity,filter,transform}


/* ================================================================
   v0.9.5 — continuous intro wipe and persistent compact topbar
   ================================================================ */
/* The boot layer is physically clipped behind the rising water edge. The
   site is therefore revealed progressively instead of disappearing at once. */
.boot-screen{
  opacity:1!important;
  visibility:visible!important;
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
  animation:v095BootReveal 3.25s cubic-bezier(.58,0,.18,1) 4.65s both!important;
  transition:none!important;
  will-change:clip-path;
}
.boot-screen.is-done{
  opacity:1!important;
  visibility:hidden!important;
  clip-path:inset(0 0 100% 0)!important;
  -webkit-clip-path:inset(0 0 100% 0)!important;
  pointer-events:none!important;
}
.boot-wave{
  opacity:0;
  animation:v095BootWave 3.25s cubic-bezier(.58,0,.18,1) 4.65s both!important;
  will-change:transform,opacity;
}
@keyframes v095BootWave{
  0%{opacity:0;transform:translate3d(0,112%,0)}
  7%{opacity:1;transform:translate3d(0,103%,0)}
  46%{opacity:1;transform:translate3d(0,34%,0)}
  62%{opacity:1;transform:translate3d(0,22%,0)}
  72%{opacity:1;transform:translate3d(0,12%,0)}
  100%{opacity:1;transform:translate3d(0,-126%,0)}
}
@keyframes v095BootReveal{
  0%,7%{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}
  24%{clip-path:inset(0 0 8% 0);-webkit-clip-path:inset(0 0 8% 0)}
  46%{clip-path:inset(0 0 35% 0);-webkit-clip-path:inset(0 0 35% 0)}
  62%{clip-path:inset(0 0 51% 0);-webkit-clip-path:inset(0 0 51% 0)}
  72%{clip-path:inset(0 0 63% 0);-webkit-clip-path:inset(0 0 63% 0)}
  100%{clip-path:inset(0 0 100% 0);-webkit-clip-path:inset(0 0 100% 0)}
}

/* Exact donor behaviour: fixed at all times, 82px at the hero and 68px
   after 24px of scroll. Only height/surface interpolate; it never translates
   out of the viewport and the current strip remains fully opaque. */
.site-header,.site-header.is-hero-top,.site-header.is-scrolled{
  position:fixed!important;
  top:0!important;right:0!important;left:0!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translate3d(0,0,0)!important;
  translate:none!important;
  scale:none!important;
  contain:none!important;
  overflow:visible!important;
  height:82px!important;
  min-height:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
  z-index:1500!important;
  transition:height .48s cubic-bezier(.16,1,.3,1),color .42s ease!important;
  backface-visibility:hidden;
}
.site-header.is-scrolled{height:68px!important}
.site-header::after,.site-header.is-hero-top::after,.site-header.is-scrolled::after{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0)!important;
}
.site-header>*,.site-header.is-hero-top>*,.site-header.is-scrolled>*{
  transform:none!important;
  translate:none!important;
}

/* Ratio changes from delayed image/video metadata cannot escape their own
   grid cell or overlap neighbouring media. */
.news-modal-media{isolation:isolate!important;contain:layout style!important}
.news-modal-media-item,.news-modal-photo-wrap,.news-modal-video{
  box-sizing:border-box!important;
  contain:layout paint!important;
  opacity:1!important;
  transition:aspect-ratio .36s cubic-bezier(.16,1,.3,1),opacity .24s ease!important;
}
.news-modal-media-item:not(.is-ratio-ready){aspect-ratio:4/3!important}
.news-modal-video:not(.is-ratio-ready){aspect-ratio:16/9!important}
@media(max-width:760px){
  .site-header,.site-header.is-hero-top{height:72px!important}
  .site-header.is-scrolled{height:62px!important}
}

/* Theme switching must never let off-screen content collapse and pull the footer. */
.photo-stream-section,.news-section,.litters-feed,.litter-family,.documents-strip{
  content-visibility:visible!important;
  
}

/* v0.9.6 — screenshot-driven stabilization */
/* Intro: one continuous physical lift. The SVG wave remains visible at the moving edge. */
.boot-screen{
  clip-path:none!important;-webkit-clip-path:none!important;
  opacity:1!important;visibility:visible!important;
  animation:v096BootLift 3.35s cubic-bezier(.52,0,.16,1) 4.65s both!important;
  transition:none!important;will-change:transform;
}
.boot-screen.is-done{transform:translate3d(0,-112%,0)!important;opacity:1!important;visibility:hidden!important;pointer-events:none!important}
.boot-wave{
  left:-10%!important;right:-10%!important;bottom:-48%!important;height:112%!important;
  opacity:1!important;filter:drop-shadow(0 -13px 24px rgba(255,255,255,.42))!important;
  animation:v096BootWave 3.35s cubic-bezier(.52,0,.16,1) 4.65s both!important;
  will-change:transform!important;
}
.boot-wave-body{animation:v096BootWater 1.25s ease-in-out infinite alternate!important}
.boot-wave-foam{animation:v096BootFoam .9s ease-in-out infinite alternate!important;opacity:.9!important}
@keyframes v096BootLift{0%,5%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-112%,0)}}
@keyframes v096BootWave{0%,5%{transform:translate3d(0,62%,0) scaleX(.96)}38%{transform:translate3d(0,22%,0) scaleX(1.03)}68%{transform:translate3d(0,5%,0) scaleX(1.06)}100%{transform:translate3d(0,-4%,0) scaleX(1.08)}}
@keyframes v096BootWater{to{transform:translate3d(0,-12px,0) scaleX(1.025)}}
@keyframes v096BootFoam{to{transform:translate3d(22px,-8px,0);stroke-dashoffset:-80}}

/* Donor topbar contract: transparent at hero, fixed and glass after 24px; never hidden. */
.site-header,.site-header.is-hero-top,.site-header.is-scrolled{
  position:fixed!important;top:0!important;left:0!important;right:0!important;
  visibility:visible!important;opacity:1!important;display:flex!important;
  transform:none!important;translate:none!important;scale:none!important;
  height:82px!important;min-height:0!important;padding-block:0!important;
  overflow:visible!important;contain:none!important;z-index:2500!important;
  transition:height .48s cubic-bezier(.16,1,.3,1)!important;
}
.site-header.is-scrolled{height:68px!important}
.site-header::after,.site-header.is-hero-top::after,.site-header.is-scrolled::after{
  content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;
  pointer-events:none!important;visibility:visible!important;transform:none!important;
  transition:opacity .52s ease,background .52s ease,box-shadow .52s ease,backdrop-filter .52s ease!important;
}
.site-header.is-hero-top::after{opacity:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header.is-scrolled::after{opacity:1!important;background:linear-gradient(180deg,rgba(8,28,36,.88),rgba(8,28,36,.66))!important;border-bottom:1px solid rgba(233,244,241,.14)!important;box-shadow:0 12px 36px rgba(0,10,16,.24)!important;backdrop-filter:blur(22px) saturate(155%)!important;-webkit-backdrop-filter:blur(22px) saturate(155%)!important}
html[data-theme="light"] .site-header.is-scrolled::after{background:linear-gradient(180deg,rgba(252,250,242,.92),rgba(238,249,250,.78))!important;border-bottom-color:rgba(96,138,148,.22)!important;box-shadow:0 10px 34px rgba(23,76,92,.09)!important}
.site-header>*,.site-header.is-hero-top>*,.site-header.is-scrolled>*{transform:none!important;translate:none!important;visibility:visible!important;opacity:1!important}
@media(max-width:760px){.site-header,.site-header.is-hero-top{height:72px!important}.site-header.is-scrolled{height:62px!important}}

/* Contacts: restore premium pointer-driven 3D volume and hover glow. */
@media(hover:hover) and (pointer:fine){
  .contact-row.card-tilt,.social-card.card-tilt{
    position:relative!important;isolation:isolate!important;overflow:hidden!important;
    transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)!important;
    transform-style:preserve-3d!important;will-change:transform!important;
    transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease,border-color .32s ease!important;
  }
  .contact-row.card-tilt:hover,.social-card.card-tilt:hover{--lift:-8px;box-shadow:0 26px 70px rgba(4,31,39,.25),inset 0 1px rgba(255,255,255,.28)!important;border-color:rgba(132,226,230,.5)!important}
  .contact-row.card-tilt::before,.social-card.card-tilt::before{content:""!important;position:absolute!important;inset:-1px!important;z-index:-1!important;pointer-events:none!important;background:radial-gradient(320px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(123,231,235,.28),transparent 64%)!important;opacity:var(--glow-opacity,0)!important;transition:opacity .35s ease!important}
  .contact-row.card-tilt>* ,.social-card.card-tilt>*{transform:translateZ(22px)}
}

/* VK preview grid: natural row heights, no phantom gap between rows. */
.news-card-media.media-count-2,.news-card-media.media-count-3,.news-card-media.media-count-4{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:none!important;grid-auto-rows:auto!important;grid-auto-flow:row!important;
  align-items:start!important;align-content:start!important;justify-content:stretch!important;
  height:auto!important;min-height:0!important;max-height:none!important;gap:8px!important;
}
.news-card-media.media-count-2 .news-media-item,.news-card-media.media-count-3 .news-media-item,.news-card-media.media-count-4 .news-media-item{position:relative!important;width:100%!important;height:auto!important;min-height:0!important;align-self:start!important;aspect-ratio:var(--media-ratio,4/3)!important}
.news-card-media.media-count-3 .news-media-item:first-child{grid-row:auto!important}
.news-card-media .news-media-item img,.news-card-media .news-media-item.is-video img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}
@media(max-width:560px){.news-card-media.media-count-2,.news-card-media.media-count-3,.news-card-media.media-count-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Modal/entity scrollbars: same rounded glass, inset away from close controls. */
.news-modal-scroll,.entity-overlay,.entity-modal-content,.detail-overlay,.detail-shell{
  scrollbar-width:thin!important;scrollbar-color:rgba(196,229,228,.58) transparent!important;
}
.news-modal-scroll{padding-right:12px!important;box-sizing:border-box!important;scrollbar-gutter:stable!important}
.news-modal-scroll::-webkit-scrollbar,.entity-overlay::-webkit-scrollbar,.detail-overlay::-webkit-scrollbar{width:7px!important;background:transparent!important}
.news-modal-scroll::-webkit-scrollbar-track,.entity-overlay::-webkit-scrollbar-track,.detail-overlay::-webkit-scrollbar-track{background:transparent!important;margin:18px 0!important}
.news-modal-scroll::-webkit-scrollbar-thumb,.entity-overlay::-webkit-scrollbar-thumb,.detail-overlay::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(228,247,245,.72),rgba(126,179,183,.48))!important;border:1px solid rgba(255,255,255,.45)!important;border-radius:999px!important;box-shadow:inset 0 0 7px rgba(255,255,255,.28)!important}
.news-modal-close{right:28px!important;top:20px!important}.entity-modal-close{right:28px!important}

/* Pull hero side arrows inward so the page scrollbar never touches them. */
.hero-arrow.prev,.hero-nav.prev,.hero-control.prev,[data-hero-prev]{left:24px!important}
.hero-arrow.next,.hero-nav.next,.hero-control.next,[data-hero-next]{right:28px!important}
.hero .hero-switches{right:clamp(28px,4vw,70px)!important}

/* Continuous animated support wave with matching section colors. */
.foam-line{animation:v096WaveFoam 4.3s ease-in-out infinite alternate!important;transform-origin:center!important}
@keyframes v096SupportWave{to{transform:translate3d(3.5%,5px,0) scaleX(1.035)}}
@keyframes v096WaveFront{to{transform:translate3d(-2.5%,5px,0) scaleX(1.04)}}
@keyframes v096WaveFoam{to{transform:translate3d(3%,2px,0);stroke-dashoffset:-80}}
.value-icon{position:relative!important;overflow:visible!important;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.48),rgba(103,210,216,.32) 42%,rgba(21,92,105,.38) 72%)!important;box-shadow:inset 0 1px rgba(255,255,255,.42),0 12px 34px rgba(3,35,43,.2),0 0 0 7px rgba(104,210,215,.08)!important;animation:v096ValueOrb 4.8s ease-in-out infinite alternate!important}
.value-icon::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(132,226,230,.25);border-radius:50%;animation:v096ValueRing 5.6s linear infinite!important}
@keyframes v096ValueOrb{to{transform:translateY(-5px) rotate(4deg);box-shadow:inset 0 1px rgba(255,255,255,.55),0 19px 42px rgba(3,35,43,.25),0 0 0 11px rgba(104,210,215,.055)}}
@keyframes v096ValueRing{to{transform:rotate(360deg) scale(1.05);opacity:.55}}

/* v0.9.7 — full-site stabilization pass */

/* 1. INTRO ---------------------------------------------------------------- */
.boot-screen{position:fixed!important;inset:0!important;z-index:9999!important;display:grid!important;place-items:center!important;overflow:hidden!important;opacity:1!important;visibility:visible!important;clip-path:none!important;-webkit-clip-path:none!important;background:linear-gradient(165deg,#0a3446 0%,#0f5f79 48%,#082735 100%)!important;transform:translate3d(0,0,0)!important;animation:v097BootLift 1.65s cubic-bezier(.72,0,.22,1) 5.55s forwards!important}
.boot-screen.is-done{pointer-events:none!important}
@keyframes v097BootLift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-104%,0)}}
.boot-mark{position:relative!important;z-index:3!important}
.boot-wave{position:absolute!important;left:-8%!important;bottom:-1px!important;width:116%!important;height:min(48vh,360px)!important;z-index:2!important;display:block!important;opacity:1!important;visibility:visible!important;clip-path:none!important;-webkit-clip-path:none!important;filter:drop-shadow(0 -10px 30px rgba(8,60,80,.45))!important;animation:v097BootWaveRise 2.4s cubic-bezier(.22,1,.36,1) .55s both,v097BootWaveDrift 4.6s ease-in-out 2.95s infinite alternate!important}
@keyframes v097BootWaveRise{from{transform:translate3d(0,72%,0)}to{transform:translate3d(0,0,0)}}
@keyframes v097BootWaveDrift{from{transform:translate3d(-3.5%,0,0)}to{transform:translate3d(3.5%,-10px,0)}}
.boot-wave-body{opacity:1!important}
.boot-wave-foam{animation:v097BootFoam 3.4s ease-in-out infinite alternate!important}
@keyframes v097BootFoam{from{opacity:.5;stroke-dashoffset:0}to{opacity:1;stroke-dashoffset:-70}}

/* 2. TOPBAR — never hides, only nudges up after hero buttons leave --------- */
.site-header,.site-header.is-hero-top,.site-header.is-scrolled,.site-header.is-compact{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1200!important;display:flex!important;opacity:1!important;visibility:visible!important;transform:none!important;translate:none!important;scale:none!important;filter:none!important;pointer-events:auto!important;height:84px!important;transition:height .55s cubic-bezier(.22,1,.36,1),padding .55s cubic-bezier(.22,1,.36,1)!important}
.site-header.is-compact{height:66px!important}
.site-header>*,.site-header.is-hero-top>*,.site-header.is-scrolled>*{transform:translateY(0)!important;opacity:1!important;visibility:visible!important;transition:transform .55s cubic-bezier(.22,1,.36,1),color .4s ease,background .45s ease,border-color .45s ease,box-shadow .45s ease!important}
.site-header.is-compact>*{transform:translateY(-3px)!important}
.site-header::after,.site-header.is-hero-top::after,.site-header.is-scrolled::after,.site-header.is-compact::after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;transform:none!important;transition:opacity .5s ease,background .5s ease,box-shadow .5s ease,-webkit-backdrop-filter .5s ease,backdrop-filter .5s ease!important}
.site-header.is-hero-top::after{opacity:0!important;background:transparent!important;box-shadow:none!important;border-bottom:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header.is-scrolled::after{opacity:1!important;background:linear-gradient(180deg,rgba(8,28,36,.88),rgba(8,28,36,.66))!important;border-bottom:1px solid rgba(233,244,241,.14)!important;box-shadow:0 12px 36px rgba(0,10,16,.24)!important;backdrop-filter:blur(22px) saturate(155%)!important;-webkit-backdrop-filter:blur(22px) saturate(155%)!important}
html[data-theme="light"] .site-header.is-scrolled::after{background:linear-gradient(180deg,rgba(252,250,242,.92),rgba(238,249,250,.78))!important;border-bottom-color:rgba(96,138,148,.22)!important;box-shadow:0 10px 34px rgba(23,76,92,.09)!important}
@media(max-width:760px){.site-header,.site-header.is-hero-top,.site-header.is-scrolled{height:74px!important}.site-header.is-compact{height:60px!important}}

/* 3. HERO BUTTONS — press animation back ---------------------------------- */
.hero-actions .primary-button,.hero-actions .glass-button,.intro-actions a{transform:translateY(0) scale(1)!important;scale:none!important;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,filter .3s ease!important;will-change:transform}
.hero-actions .primary-button:hover,.hero-actions .glass-button:hover,.intro-actions a:hover{transform:translateY(-3px) scale(1.015)!important;box-shadow:0 20px 44px rgba(6,36,46,.24)!important}
.hero-actions .primary-button:active,.hero-actions .glass-button:active,.intro-actions a:active{transform:translateY(-1px) scale(.972)!important;scale:none!important;filter:brightness(.94)!important;transition:transform .13s ease,filter .13s ease!important}
.hero-switches button{transition:transform .28s cubic-bezier(.22,1,.36,1),background .3s ease!important}
.hero-switches button:active{transform:scale(.9)!important}

/* 4. SUPPORT WAVE — animated, seamless colour ----------------------------- */
.wave-divider{position:relative!important;display:block!important;line-height:0!important;margin-bottom:-1px!important;background:transparent!important;overflow:hidden!important}
.wave-divider svg{display:block!important;width:100%!important;height:100%!important;animation:v097WaveSwell 9.5s ease-in-out infinite alternate!important}




@keyframes v097WaveSwell{from{transform:translate3d(0,2px,0)}to{transform:translate3d(0,-3px,0)}}
@keyframes v097WaveBack{from{transform:translate3d(-2.4%,0,0) scaleY(1)}to{transform:translate3d(2.4%,-4px,0) scaleY(1.05)}}
@keyframes v097WaveFront{from{transform:translate3d(2.2%,0,0) scaleY(1)}to{transform:translate3d(-2.2%,-6px,0) scaleY(1.06)}}

/* 5. VALUE ICONS — flat gradients, distinct colours, plain inner marks ----- */
.value-icon{position:relative!important;overflow:hidden!important;animation:none!important;color:#fff!important;background:linear-gradient(145deg,var(--vi-a,#63c7db),var(--vi-b,#2f8fa8))!important;box-shadow:inset 0 1px rgba(255,255,255,.34),0 14px 32px rgba(4,32,40,.2)!important;border:1px solid rgba(255,255,255,.2)!important}
.value-icon::after,.value-icon::before{display:none!important;content:none!important;animation:none!important}
.support-card .value-icon{--vi-a:#f7bd68;--vi-b:#df8536}
.community-card .value-icon{--vi-a:#6fd0e2;--vi-b:#2c88a4}
.health-card .value-icon{--vi-a:#94dcae;--vi-b:#3a9c78}
.value-icon span,.value-icon small,.value-icon b{color:#fff!important;background:none!important;text-shadow:0 1px 2px rgba(0,0,0,.18)!important}
.value-icon i{background:#fff!important;box-shadow:none!important}
.value-icon.health-mark{font-weight:800!important}

/* 6. CONTACT / CARD TILT — smooth in and smooth back ---------------------- */
.card-tilt{--rx:0deg;--ry:0deg;--lift:0px}
.contact-row.card-tilt,.social-card.card-tilt,.contact-invite.card-tilt,.documents-strip>div.card-tilt{transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))!important;transform-style:preserve-3d!important;transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease,background .34s ease!important;will-change:transform}
.contact-row.card-tilt:hover,.social-card.card-tilt:hover,.contact-invite.card-tilt:hover,.documents-strip>div.card-tilt:hover{--lift:-7px!important;box-shadow:0 26px 60px rgba(6,34,44,.24)!important}

/* 7. THEME SWITCH — smooth ------------------------------------------------ */
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:background-color .62s ease,background-image .62s ease,color .62s ease,border-color .62s ease,box-shadow .62s ease,fill .62s ease,stroke .62s ease!important}

/* 8. VK MODAL — clean rounded corners, contained scrollbar ---------------- */
.news-modal{border-radius:30px!important;overflow:hidden!important;isolation:isolate!important}
.news-modal-scroll{border-radius:30px!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable!important;padding-right:10px!important}
.news-modal-scroll::-webkit-scrollbar{width:8px!important}
.news-modal-scroll::-webkit-scrollbar-track{background:transparent!important;margin:26px 0 22px!important}
.news-modal-scroll::-webkit-scrollbar-thumb{min-height:44px!important;border:2px solid transparent!important;border-radius:999px!important;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(150,196,203,.55)) padding-box!important;box-shadow:inset 0 1px rgba(255,255,255,.35)!important}
.news-modal-close{position:absolute!important;right:20px!important;top:18px!important;z-index:12!important}
.news-modal-head,.news-modal-title{padding-right:76px!important}

/* 9. ENTITY MODAL — close as one blurred fade ----------------------------- */
.entity-overlay.is-closing{transition:opacity .6s ease,filter .6s ease,visibility 0s linear .6s!important}
.entity-overlay.is-closing .entity-modal-content,.entity-overlay.is-open.is-closing .entity-modal-content,.entity-overlay.is-open.show-content.is-closing .entity-modal-content{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;transition:none!important}

/* 10. GLASSY FACT CHIPS --------------------------------------------------- */
.entity-fact,.detail-facts>div,.about-badges>*,.breed-badge,.fact-chip{background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.24)!important;box-shadow:inset 0 1px rgba(255,255,255,.24),0 18px 42px rgba(6,32,40,.16)!important;backdrop-filter:blur(22px) saturate(150%)!important;-webkit-backdrop-filter:blur(22px) saturate(150%)!important}
html[data-theme="light"] .entity-fact,html[data-theme="light"] .detail-facts>div,html[data-theme="light"] .about-badges>*{background:rgba(255,255,255,.42)!important;border-color:rgba(120,160,168,.26)!important}
.entity-fact:hover,.detail-facts>div:hover{background:rgba(255,255,255,.16)!important}

/* 11. MAINTENANCE CARD — fade + blur together ----------------------------- */
@keyframes v097MaintCard{from{opacity:0;filter:blur(26px);transform:scale(.9) translateY(26px)}to{opacity:1;filter:none;transform:none}}
@keyframes v097MaintContent{from{opacity:0;filter:blur(16px);transform:translateY(16px)}to{opacity:1;filter:none;transform:none}}

/* v0.9.7c — contact/social hover lift wins over every legacy override */

/* =========================================================================
   v0.9.8 - summer palette, seamless waves, glass surfaces, mobile pass.
   Appended last on purpose: it resolves the older conflicting layers that
   were removed above instead of being stacked on top of each other.
   ========================================================================= */

/* --- 4. SUMMER PALETTE --------------------------------------------------- */
:root{
  --sun-gold:#f5b23c;--sun-amber:#ffd479;--sun-orange:#ef8a37;--sun-coral:#f6957a;
  --sea-sky:#5cc8e2;--sea-lagoon:#2a9cba;
  --bg:#fdf6e8;--surface-soft:#fff0d6;--surface:rgba(255,252,244,.78);--surface-solid:#fffdf7;
  --sea:#1a9fb2;--sea-deep:#0f7387;--sky:#7fd8ea;--aqua:#5cc8e2;
  --sun:#ef8a37;--sun-deep:#cf6b1f;--sand:#ffe6bd;--coral:#f6957a;
  --line:rgba(32,98,116,.16);
  --shadow:0 30px 92px rgba(31,79,96,.18);
  --summer-cream:#fff6e2;--summer-sand:#ffe6bd;--summer-peach:#ffd0a4;--summer-sun:#f5b23c;
  --accent-gold:#f5b23c;--accent-orange:#ef8a37;--accent-coral:#f6957a;--accent-sky:#9ce4f3;--accent-sea:#2a9cba;
  /* ONE shared value for the support section and its wave, so the joint is pixel-identical */
  --wave-surface:#ffe9c4;
  --wave-back:rgba(240,150,50,.42);
}
html[data-theme="dark"]{
  --bg:#0e2029;--surface-soft:#14303a;--surface:rgba(21,46,56,.82);--surface-solid:#163440;
  --sea:#3fc0c9;--sea-deep:#1c8ea0;--sky:#54c9e0;--aqua:#3fc0c9;
  --sun:#f7a94b;--sun-deep:#d9812c;--sand:#8a6a3c;--coral:#e08a6f;
  --line:rgba(255,222,178,.18);
  --summer-cream:#16323d;--summer-sand:#1b3d47;
  --wave-surface:#123f49;
  --wave-back:rgba(63,192,201,.3);
}
body{background-color:var(--bg)!important;background-image:radial-gradient(1200px 720px at 10% -10%,rgba(255,205,110,.5),transparent 62%),radial-gradient(1020px 660px at 94% 4%,rgba(104,214,238,.42),transparent 64%),radial-gradient(900px 700px at 50% 108%,rgba(246,149,122,.26),transparent 66%)!important;background-attachment:fixed!important}
html[data-theme="dark"] body{background-image:radial-gradient(1200px 720px at 10% -10%,rgba(247,169,75,.18),transparent 62%),radial-gradient(1020px 660px at 94% 4%,rgba(63,192,201,.16),transparent 64%),radial-gradient(900px 700px at 50% 108%,rgba(224,138,111,.12),transparent 66%)!important}
.ambient-orb{opacity:.3!important;filter:blur(96px)!important}
.orb-one{background:radial-gradient(circle,var(--sun-amber),var(--sun-orange))!important}
.orb-two{background:radial-gradient(circle,var(--sea-sky),var(--sea-lagoon))!important}
/* Section-to-section variety instead of one flat fill */

.story-section,.photo-stream-section,.news-section{position:relative;isolation:isolate}

.photo-stream-section::after{background:linear-gradient(180deg,transparent,rgba(92,200,226,.14) 46%,transparent)}

.primary-button{background:linear-gradient(135deg,var(--sun-amber),var(--sun-orange) 62%,var(--sun-coral))!important;color:#2c1704!important;border-color:rgba(255,255,255,.5)!important;box-shadow:0 18px 44px rgba(239,138,55,.32),inset 0 1px rgba(255,255,255,.55)!important}
.primary-button:hover{box-shadow:0 26px 58px rgba(239,138,55,.42),inset 0 1px rgba(255,255,255,.7)!important}

/* --- 1. TOPBAR: present on every tab, never hides, only tightens upward --- */
body:not(.is-modal-open):not(.entity-cinema) .site-header{opacity:1!important;visibility:visible!important;transform:none!important;translate:none!important;pointer-events:auto!important}
.site-header .brand,.site-header .main-nav,.site-header .header-actions{transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease!important;will-change:transform}
.site-header.is-compact .brand,.site-header.is-compact .main-nav,.site-header.is-compact .header-actions{transform:translate3d(0,-4px,0)!important;scale:none!important}
.site-header::after{transition:opacity .6s ease,background .6s ease,box-shadow .6s ease,-webkit-backdrop-filter .6s ease,backdrop-filter .6s ease!important}

/* --- 2. ABOUT / MISSION: full-bleed wash, no rectangular side crops ------- */
.about-page,.about-page .section,.about-page .story-section,.about-page .wave-divider,.about-page .foam-line,.about-page .page-hero{clip-path:none!important;-webkit-clip-path:none!important}
.about-page .story-section{background:none!important;background-image:none!important;overflow:visible!important;border-radius:0!important}
.about-page .story-section::after{content:""!important;position:absolute!important;top:0!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:100vw!important;max-width:100vw!important;z-index:-1!important;pointer-events:none!important;background:linear-gradient(180deg,transparent,rgba(245,178,60,.16) 42%,rgba(92,200,226,.08) 78%,transparent)!important}
.about-page .foam-line{left:0!important;right:0!important;width:100%!important;max-width:none!important}

/* --- 3. SUPPORT WAVE: one colour token, no crop, continuous motion -------- */
.wave-divider{position:relative!important;display:block!important;width:100%!important;max-width:100%!important;margin:0 0 -1px!important;height:clamp(66px,8.6vw,112px)!important;line-height:0!important;background:transparent!important;overflow:hidden!important;clip-path:none!important;-webkit-clip-path:none!important}
.wave-divider svg{position:relative!important;display:block!important;left:0!important;right:0!important;margin:0!important;width:100%!important;max-width:100%!important;height:100%!important;transform:none!important;animation:none!important}
.wave-divider .wave-back{fill:var(--wave-back)!important;transform-box:fill-box;transform-origin:center bottom;animation:v098WaveBack 11s ease-in-out infinite alternate!important;will-change:transform}
.wave-divider .wave-front{fill:var(--wave-surface)!important;transform-box:fill-box;transform-origin:center bottom;animation:v098WaveFront 8s ease-in-out infinite alternate!important;will-change:transform}
@keyframes v098WaveBack{from{transform:translate3d(0,0,0) scaleY(1)}to{transform:translate3d(0,-5px,0) scaleY(1.06)}}
@keyframes v098WaveFront{from{transform:translate3d(0,1px,0) scaleY(1)}to{transform:translate3d(0,-6px,0) scaleY(1.07)}}
.wave-divider+.values-section,.values-section{margin-top:0!important;border-top:0!important;box-shadow:none!important;background:var(--wave-surface)!important;background-color:var(--wave-surface)!important;background-image:none!important;overflow:visible!important;clip-path:none!important}
html[data-theme="light"] .values-section,html[data-theme="dark"] .values-section{background:var(--wave-surface)!important;background-color:var(--wave-surface)!important;background-image:none!important}

/* --- 5. RKF / DNA / FCI CARDS: stronger glass, glow that grows on hover --- */
.documents-strip>div{position:relative!important;isolation:isolate!important;overflow:visible!important;border:1px solid rgba(255,255,255,.55)!important;background:rgba(255,255,255,.14)!important;-webkit-backdrop-filter:blur(30px) saturate(170%)!important;backdrop-filter:blur(30px) saturate(170%)!important;box-shadow:inset 0 1px rgba(255,255,255,.6),0 22px 54px rgba(10,48,60,.15)!important}
html[data-theme="dark"] .documents-strip>div{background:rgba(30,58,68,.28)!important;border-color:rgba(255,232,196,.26)!important}
.documents-strip>div::after{content:""!important;position:absolute!important;inset:-2px!important;z-index:-1!important;border-radius:inherit!important;pointer-events:none!important;opacity:.5!important;filter:blur(7px);background:radial-gradient(360px circle at var(--glow-x,50%) var(--glow-y,50%),rgba(255,203,116,.5),rgba(92,200,226,.28) 46%,transparent 74%)!important;transition:opacity .5s ease,filter .5s ease!important}
.documents-strip>div:hover,.documents-strip>div.card-tilt:hover{background:rgba(255,255,255,.2)!important;border-color:rgba(255,255,255,.75)!important;box-shadow:inset 0 1px rgba(255,255,255,.75),0 32px 74px rgba(239,138,55,.26),0 0 0 1px rgba(255,214,140,.42)!important}
.documents-strip>div:hover::after,.documents-strip>div.card-tilt:hover::after{opacity:1!important;filter:blur(12px)!important}
.documents-strip span{color:var(--sun-deep)!important}
html[data-theme="dark"] .documents-strip span{color:var(--sun-amber)!important}

/* --- 7. GLASS SCROLLBARS EVERYWHERE (pages, modals, cards, VK) ------------ */
*,*::before,*::after{scrollbar-width:thin!important;scrollbar-color:rgba(245,190,110,.62) transparent!important}
*::-webkit-scrollbar{width:8px!important;height:8px!important;background:transparent!important}
*::-webkit-scrollbar-track,*::-webkit-scrollbar-track-piece,*::-webkit-scrollbar-corner{background:transparent!important;border:0!important;box-shadow:none!important}
*::-webkit-scrollbar-thumb{min-height:42px!important;border:2px solid transparent!important;border-radius:999px!important;background-clip:padding-box!important;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,203,116,.62) 52%,rgba(92,200,226,.58))!important;box-shadow:inset 0 1px rgba(255,255,255,.65),0 2px 9px rgba(10,48,60,.16)!important;-webkit-backdrop-filter:blur(12px) saturate(150%)!important;backdrop-filter:blur(12px) saturate(150%)!important}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#fff,rgba(255,190,84,.88) 52%,rgba(72,192,222,.82))!important}
html[data-theme="dark"] *,html[data-theme="dark"] *::before,html[data-theme="dark"] *::after{scrollbar-color:rgba(247,190,120,.5) transparent!important}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,240,214,.5),rgba(247,169,75,.46) 52%,rgba(63,192,201,.44))!important}
.entity-overlay,.entity-modal-content,.news-modal,.news-modal-scroll,.changelog-scroll,.detail-shell,.mobile-menu,.entity-media,.smart-media-grid,.language-switcher>div,.detail-content{scrollbar-width:thin!important;scrollbar-color:rgba(245,190,110,.62) transparent!important}

/* --- 8. CARD CLOSE: content and backdrop fade out as one ------------------ */
#app{transition:filter .64s cubic-bezier(.4,0,.2,1),transform .64s cubic-bezier(.4,0,.2,1)!important}
body.entity-cinema #app,body.entity-cinema>.site-header,body.entity-cinema>.site-footer,body.entity-cinema>.mobile-menu{transition:transform .64s cubic-bezier(.4,0,.2,1),filter .64s cubic-bezier(.4,0,.2,1),opacity .64s ease!important}
.entity-overlay.is-closing,.entity-overlay.is-open.is-closing{pointer-events:none!important;transition:opacity .64s cubic-bezier(.4,0,.2,1),filter .64s cubic-bezier(.4,0,.2,1),visibility 0s linear .64s!important}
.entity-overlay.is-closing .entity-modal-content,.entity-overlay.is-open.is-closing .entity-modal-content,.entity-overlay.is-open.show-content.is-closing .entity-modal-content{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
.entity-overlay.is-closing .entity-hero,.entity-overlay.is-closing #entityHeroBg,.entity-overlay.is-closing #entityHeroImage,.entity-overlay.is-closing .entity-media,.entity-overlay.is-closing .entity-story{opacity:1!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important}
.entity-overlay.is-closing #morphStage,body.entity-cinema.is-closing #morphStage{}

/* --- 9. INTRO: two slow phases, the screen leaves as one sheet ------------ */
.boot-screen{animation:v098BootExit 2.2s cubic-bezier(.76,0,.2,1) 5.6s forwards!important;will-change:transform}
@keyframes v098BootExit{0%{transform:translate3d(0,0,0)}16%{transform:translate3d(0,2.4%,0)}100%{transform:translate3d(0,-108%,0)}}
.boot-mark{position:relative!important;display:grid!important;place-items:center!important;z-index:3!important}
.boot-mark>div{grid-area:1/1!important}
.boot-logo-phase-a{animation:v098MarkOut 1.2s cubic-bezier(.4,0,.2,1) 2.55s both!important}
.boot-logo-phase-b{animation:v098LockupIn 1.6s cubic-bezier(.22,1,.36,1) 2.6s both!important}
@keyframes v098MarkOut{0%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(.965);filter:blur(7px)}}
@keyframes v098LockupIn{0%{opacity:0;transform:scale(.985);filter:blur(12px)}100%{opacity:1;transform:scale(1);filter:blur(0)}}
/* the wave settles before the exit starts, so nothing tears while the sheet leaves */
.boot-wave{animation:v098BootWaveRise 3s cubic-bezier(.22,1,.36,1) .5s both,v098BootWaveSettle 2s ease-in-out 3.5s 1 both!important}
@keyframes v098BootWaveRise{0%{transform:translate3d(0,74%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes v098BootWaveSettle{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-8px,0)}}
.boot-wave-foam{animation:v098BootFoam 2.6s ease-in-out 1.6s 1 both!important}
@keyframes v098BootFoam{0%{opacity:.45;stroke-dashoffset:0}100%{opacity:.95;stroke-dashoffset:-60}}

/* --- 11. THEME SWITCH: smooth everywhere, footer stays put --------------- */
html.theme-switching,html.theme-switching body{transition:background-color .62s ease,background-image .62s ease,color .62s ease!important}
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:background-color .62s ease,background-image .62s ease,color .62s ease,border-color .62s ease,box-shadow .62s ease,fill .62s ease,stroke .62s ease,opacity .62s ease!important}
html.theme-switching .site-footer,html.theme-switching .site-header{transform:none!important;translate:none!important;scale:none!important;min-height:unset}
html.theme-switching .site-footer *{transform:none!important}

/* --- 12. CONTACTS HOVER: smooth 3D lift in, smooth return out ------------ */
.contact-row,.social-card,.contact-invite,.contact-panel,.documents-strip>div{--rx:0deg;--ry:0deg;--lift:0px}
html body .contact-row.card-tilt,html body .social-card.card-tilt,html body .contact-invite.card-tilt,html body .page-view .contact-row.card-tilt,html body .page-view .social-card.card-tilt,html body .page-view .contact-invite.card-tilt{transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)!important;transform-style:preserve-3d!important;scale:none!important;translate:none!important;transition:transform .44s cubic-bezier(.22,1,.36,1),box-shadow .44s ease,background .44s ease,border-color .44s ease!important;transition-delay:0s!important;will-change:transform}
html body .contact-row.card-tilt:hover,html body .social-card.card-tilt:hover,html body .contact-invite.card-tilt:hover,html body .page-view .contact-row.card-tilt:hover,html body .page-view .social-card.card-tilt:hover,html body .page-view .contact-invite.card-tilt:hover{--lift:-9px;transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-9px,0)!important;box-shadow:0 30px 66px rgba(6,34,44,.26)!important}

/* --- 13. VK MODAL: all four corners clipped, scrollbar inside ------------- */
.news-modal{border-radius:30px!important;overflow:hidden!important;isolation:isolate!important;clip-path:inset(0 round 30px)!important;-webkit-clip-path:inset(0 round 30px)!important;contain:paint}
.news-modal-scroll{border-radius:30px!important;overflow-x:hidden!important;overflow-y:auto!important;clip-path:inset(0 round 30px)!important;-webkit-clip-path:inset(0 round 30px)!important;scrollbar-gutter:stable!important;padding-right:8px!important}
.news-modal-scroll>*{max-width:100%!important;min-width:0!important}
.news-modal-scroll::-webkit-scrollbar{width:8px!important}
.news-modal-scroll::-webkit-scrollbar-track{background:transparent!important;margin:24px 0 22px!important}

/* --- 16. MAINTENANCE: the card fades in by opacity AND blur together ------ */
.maintenance-screen::before,.maintenance-screen.is-live::before{animation:v098MaintCard 1.15s cubic-bezier(.22,1,.36,1) both!important}
.maintenance-screen>*:not(.maintenance-wave),.maintenance-screen.is-live>*:not(.maintenance-wave){animation:v098MaintContent 1.05s cubic-bezier(.22,1,.36,1) .16s both!important}
@keyframes v098MaintCard{0%{opacity:0;filter:blur(30px);transform:scale(.91) translateY(30px)}55%{opacity:.7;filter:blur(9px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes v098MaintContent{0%{opacity:0;filter:blur(20px);transform:translateY(18px)}55%{opacity:.65;filter:blur(7px)}100%{opacity:1;filter:blur(0);transform:none}}

/* --- 14. MOBILE PASS ------------------------------------------------------ */
@media(max-width:900px){
  html,body{max-width:100%!important;overflow-x:hidden!important}
  .hero-content,.page-hero-content,.section,.site-footer,.values-section{width:min(100% - 28px,1480px)!important;max-width:calc(100% - 28px)!important;margin-inline:auto!important}
  .values-section{width:100%!important;max-width:100%!important;padding-inline:16px!important;overflow:visible!important;clip-path:none!important}
  .entity-grid,.dog-grid,.value-grid,.news-grid,.documents-strip,.social-grid-full,.mission-list,.contact-grid,.litters-feed{grid-template-columns:1fr!important;gap:16px!important;width:100%!important;max-width:100%!important;padding-inline:0!important}
  .entity-card,.news-card,.value-card,.social-card,.contact-row,.contact-invite,.documents-strip>div,.litter-demo-card,.stream-card{width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important}
  .documents-strip{margin-left:0!important;padding:18px 0!important}
  .value-card{min-height:0!important}
  .news-card{overflow:hidden!important;height:auto!important;min-height:0!important;padding:16px!important}
  .news-card-meta{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px 10px!important;width:100%!important;min-width:0!important;overflow:visible!important}
  .news-card-meta .news-card-tag{grid-area:1/1!important;justify-self:start!important}
  .news-card-meta .news-age{grid-area:1/2!important;justify-self:end!important;max-width:100%!important}
  .news-card-meta time{grid-area:2/1!important;justify-self:start!important}
  /* the views badge always stays inside the card: never clipped, never overflowing */
  .news-card-meta .news-views{grid-area:2/2!important;position:static!important;justify-self:end!important;align-self:center!important;margin:0!important;transform:none!important;inset:auto!important;max-width:100%!important;overflow:visible!important;white-space:nowrap!important;flex:0 0 auto!important}
  .news-card-media,.news-card-text,.news-card-contacts{width:100%!important;max-width:100%!important;min-width:0!important}
  .smart-media-grid,.news-modal-media,.entity-videos{grid-template-columns:1fr!important}
  .wave-divider{height:clamp(52px,13vw,78px)!important}
  .news-modal,.entity-modal-content,.detail-shell{border-radius:22px!important;clip-path:inset(0 round 22px)!important;-webkit-clip-path:inset(0 round 22px)!important}
  .news-modal-scroll{border-radius:22px!important;clip-path:inset(0 round 22px)!important;-webkit-clip-path:inset(0 round 22px)!important;padding-right:6px!important}
  .mobile-menu{max-width:100%!important;overflow-x:hidden!important}
  .hero-arrow.prev,.hero-nav.prev,[data-hero-prev]{left:10px!important}
  .hero-arrow.next,.hero-nav.next,[data-hero-next]{right:10px!important}
  .hero .hero-switches{right:14px!important}
  .site-header{padding-inline:14px!important;gap:10px!important}
  .about-page .story-section::after{width:100%!important}
}
@media(max-width:430px){
  .site-header{padding-inline:10px!important;gap:8px!important}
  .brand-copy small{display:none!important}
  .brand-mark{width:40px!important;height:40px!important}
  .hero-content,.page-hero-content,.section,.site-footer{width:min(100% - 22px,1480px)!important;max-width:calc(100% - 22px)!important}
  .documents-strip>div{padding:20px!important;gap:14px!important}
  .entity-fact,.detail-facts>div{min-width:0!important}
}
@media(prefers-reduced-motion:reduce){
  .wave-divider .wave-back,.wave-divider .wave-front,.boot-wave,.boot-screen{animation:none!important}
}

/* --- 3b. wave joint: the fill and the section read the SAME token --------- */
html .wave-divider .wave-back,html[data-theme="light"] .wave-divider .wave-back,html[data-theme="dark"] .wave-divider .wave-back{fill:var(--wave-back)!important;opacity:1!important;color:transparent!important}
html .wave-divider .wave-front,html[data-theme="light"] .wave-divider .wave-front,html[data-theme="dark"] .wave-divider .wave-front{fill:var(--wave-surface)!important;opacity:1!important}
html .wave-divider,html .wave-divider svg,html .wave-divider path{color:inherit!important}
html .wave-divider .wave-divider-foam,html .wave-divider .foam-line{stroke:rgba(255,255,255,.5)!important;fill:none!important}
html .values-section,html[data-theme="light"] .values-section,html[data-theme="dark"] .values-section{background:var(--wave-surface)!important;background-color:var(--wave-surface)!important;background-image:none!important}


/* ============================================================
   Release layer 0.9.9
   ============================================================ */

/* --- topbar: behaviour copied from donor 24.1.0, applied on every route --- */
html body .site-header,
html body .site-header.is-scrolled,
html body .site-header.is-compact{
  background:color-mix(in srgb,var(--bg) 80%,transparent)!important;
  border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  backdrop-filter:blur(22px) saturate(145%)!important;
  box-shadow:0 8px 34px rgba(16,45,58,.07)!important;
  transition:height .35s ease,background .5s ease,border-color .5s ease,box-shadow .5s ease,color .4s ease,backdrop-filter .5s ease!important;
}
html[data-theme="dark"] body .site-header,
html[data-theme="dark"] body .site-header.is-scrolled,
html[data-theme="dark"] body .site-header.is-compact{
  background:color-mix(in srgb,var(--bg) 82%,transparent)!important;
  box-shadow:0 8px 34px rgba(0,0,0,.18)!important;
}
html body .site-header.is-hero-top{
  color:#fff!important;
  background:linear-gradient(180deg,rgba(4,22,31,.52),rgba(4,22,31,.16) 72%,transparent)!important;
  border-bottom-color:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:blur(3px) saturate(115%)!important;
  backdrop-filter:blur(3px) saturate(115%)!important;
}
/* the older pseudo-element skins fought each other, the bar paints itself now */
html body .site-header::after,
html body .site-header.is-hero-top::after,
html body .site-header.is-scrolled::after,
html body .site-header.is-compact::after{
  content:none!important;
  display:none!important;
}
/* the compact nudge is a hint, not a jump */
html body .site-header.is-compact>*,
html body .site-header.is-compact .brand,
html body .site-header.is-compact .main-nav,
html body .site-header.is-compact .header-actions{
  transform:translate3d(0,-2px,0)!important;
  transition:transform .5s cubic-bezier(.16,1,.3,1)!important;
}
html body .site-header,
html body .site-header.is-scrolled{height:var(--header-h)!important;}
html body .site-header.is-compact{height:calc(var(--header-h) - 8px)!important;}

/* --- header controls keep their motion --- */
html body .icon-button,
html body .language-switcher summary,
html body .theme-toggle{
  transition:transform .28s cubic-bezier(.16,1,.3,1),background .48s ease,border-color .48s ease,color .4s ease,box-shadow .48s ease!important;
}
html body .icon-button:hover,
html body .language-switcher summary:hover,
html body .theme-toggle:hover{transform:translateY(-2px) scale(1.06)!important;}
html body .icon-button:active,
html body .language-switcher summary:active,
html body .theme-toggle:active{transform:scale(.9)!important;}

/* --- pointer glow must leave with the pointer --- */
html body .card-tilt:not(:hover)::before,
html body .card-tilt:not(:hover)::after,
html body .documents-strip>div:not(:hover)::before,
html body .documents-strip>div:not(:hover)::after{
  opacity:0!important;
}
html body .card-tilt:not(:hover){--glow-opacity:0!important;}

/* --- contacts: rotation only, no lift --- */
html body .contact-row.card-tilt,
html body .social-card.card-tilt,
html body .contact-invite.card-tilt,
html body .contact-row.card-tilt:hover,
html body .social-card.card-tilt:hover,
html body .contact-invite.card-tilt:hover{
  transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)!important;
}

/* --- scrollbars: glass thumb on a fully transparent groove --- */
html *::-webkit-scrollbar,
html *::-webkit-scrollbar-track,
html *::-webkit-scrollbar-track-piece,
html *::-webkit-scrollbar-corner{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html *::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(146,214,224,.55))!important;
  border:1px solid rgba(255,255,255,.42)!important;
  border-radius:999px!important;
  -webkit-backdrop-filter:blur(10px) saturate(140%)!important;
  backdrop-filter:blur(10px) saturate(140%)!important;
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(63,192,201,.42))!important;
  border-color:rgba(255,255,255,.2)!important;
}

/* --- VK publication text is displayed, not handed out --- */
html body .news-modal-scroll,
html body .news-modal-text,
html body .news-card-text,
html body .news-modal-body,
html body .entity-story{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none!important;
}
html body .news-modal-scroll a,
html body .news-card-text a{-webkit-user-select:none!important;user-select:none!important;}

/* --- lightbox: the photo itself must be on stage --- */
html body .lightbox.is-open{opacity:1!important;visibility:visible!important;z-index:2400!important;}
html body #lightboxImage{
  opacity:1!important;
  visibility:visible!important;
  display:block!important;
  position:relative!important;
  z-index:6!important;
  max-height:calc(100vh - 120px)!important;
  max-width:min(1180px,92vw)!important;
  filter:none!important;
  transform:none!important;
}
html body .lightbox-blur{z-index:1!important;}
html body .lightbox-stage{z-index:2!important;}


/* --- intro 0.9.9: mark fades in, hands over to the lockup, wave wipes upward --- */
html body .boot-screen .boot-mark{animation:none!important;opacity:1!important;}
html body .boot-mark{display:grid!important;place-items:center!important;}
html body .boot-mark>div{grid-area:1/1!important;}
html body .boot-logo-phase-a,
html body .boot-logo-phase-b{will-change:opacity,transform;}
html body .boot-logo-phase-a{animation:v099MarkIn 1.1s cubic-bezier(.22,1,.36,1) .15s both,v099MarkOut .85s cubic-bezier(.4,0,.2,1) 2.35s both!important;}
html body .boot-logo-phase-b{animation:v099LockupIn 1.15s cubic-bezier(.22,1,.36,1) 2.55s both!important;}
html body .boot-wave{animation:v099WaveWipe 2.3s cubic-bezier(.22,1,.36,1) .55s both,v099WaveSettle 2.6s ease-in-out 2.9s both!important;}
html body .boot-wave-foam{animation:v099Foam 2.4s ease-in-out .9s both!important;}
@keyframes v099MarkIn{from{opacity:0;transform:scale(.9) translateY(14px);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes v099MarkOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:scale(.97);filter:blur(6px)}}
@keyframes v099LockupIn{from{opacity:0;transform:scale(.96) translateY(10px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes v099WaveWipe{from{transform:translate3d(0,62%,0) scaleY(1.08)}to{transform:translate3d(0,0,0) scaleY(1)}}
@keyframes v099WaveSettle{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1.6%,0)}100%{transform:translate3d(0,0,0)}}
@keyframes v099Foam{from{opacity:0}35%{opacity:.85}to{opacity:.6}}
@media(prefers-reduced-motion:reduce){
  html body .boot-logo-phase-a,html body .boot-logo-phase-b,html body .boot-wave,html body .boot-wave-foam{animation:none!important;}
  html body .boot-logo-phase-a{opacity:0!important;}
}


/* --- pedigree table 0.9.10 --- */
html body .pedigree-block{
  margin:26px 0 6px;padding:clamp(16px,2.4vw,28px);
  border:1px solid var(--border-glass,rgba(255,255,255,.28));border-radius:26px;
  background:color-mix(in srgb,var(--surface-soft) 72%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 20px 60px rgba(9,42,54,.12),inset 0 1px 0 rgba(255,255,255,.3);
}
html body .pedigree-heading{
  margin:0 0 4px;font-family:var(--font-display,inherit);
  font-size:clamp(19px,2.2vw,26px);letter-spacing:.01em;
}
html body .pedigree-subheading{margin:18px 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
html body .pedigree-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 18px;margin-top:14px}
html body .pedigree-summary>div{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--surface) 60%,transparent)}
html body .pedigree-summary dt,html body .pedigree-summary b{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
html body .pedigree-summary dd,html body .pedigree-summary span{margin:0;font-weight:650;line-height:1.35}
html body .pedigree-scroll{overflow-x:auto;border-radius:18px;padding-bottom:6px}
html body .pedigree-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:6px}
html body .pedigree-table td,html body .pedigree-cell{
  vertical-align:middle;padding:10px 13px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  background:color-mix(in srgb,var(--surface) 66%,transparent);
}
html body .pedigree-num{font-size:11px;font-weight:800;color:var(--sun);letter-spacing:.08em}
html body .pedigree-name{font-weight:750;line-height:1.3}
html body .pedigree-reg{font-size:12.5px;color:var(--muted)}
html body .pedigree-titles{font-size:12px;color:var(--sea);line-height:1.35}
html body .pedigree-table td:empty,html body .pedigree-cell:empty{background:transparent;border-color:transparent}
@media(max-width:760px){
  html body .pedigree-block{padding:15px;border-radius:20px}
  html body .pedigree-table{min-width:560px}
  html body .pedigree-summary{grid-template-columns:1fr}
}

/* ================= Release layer 0.9.11 ================= */
@keyframes b11MarkIn{from{opacity:0;filter:blur(26px);transform:scale(.94)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes b11MarkOut{from{opacity:1;filter:blur(0);transform:scale(1)}to{opacity:0;filter:blur(26px);transform:scale(1.04)}}@keyframes b11LockIn{from{opacity:0;filter:blur(24px);transform:scale(.96)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes b11WaveRise{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,-6%,0)}}@keyframes b11Foam{from{opacity:0;transform:translate3d(0,100%,0)}18%{opacity:1}to{opacity:.9;transform:translate3d(0,-14%,0)}}.boot-screen .boot-logo-phase-a,.boot-screen .boot-logo-phase-b{position:absolute;inset:0;margin:auto;opacity:0;will-change:opacity,filter,transform}.boot-screen .boot-logo-phase-a{animation:b11MarkIn .8s cubic-bezier(.22,1,.36,1) .1s both,b11MarkOut .7s cubic-bezier(.4,0,.2,1) 3.9s forwards}.boot-screen .boot-logo-phase-b{animation:b11LockIn .75s cubic-bezier(.22,1,.36,1) 4.6s both}.boot-screen .boot-wave{position:absolute;left:-2%;right:-2%;bottom:0;width:104%;height:118vh;transform:translate3d(0,100%,0);animation:b11WaveRise .95s cubic-bezier(.5,0,.2,1) 7.9s forwards;will-change:transform}.boot-screen .boot-wave-foam{animation:b11Foam 1.05s cubic-bezier(.5,0,.2,1) 7.86s forwards}html body .site-header{transition:height .38s cubic-bezier(.22,1,.36,1),background-color .45s ease,border-color .45s ease,box-shadow .45s ease,color .35s ease,transform .38s cubic-bezier(.22,1,.36,1)!important;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);will-change:transform,background-color}html body .site-header.is-hero-top{border-bottom-color:transparent!important;border-bottom-width:0!important;box-shadow:none!important}html body .site-header.is-hero-top::before{content:none!important}html body .icon-button,html body .language-switcher>summary{-webkit-backdrop-filter:blur(18px) saturate(145%)!important;backdrop-filter:blur(18px) saturate(145%)!important;transition:background-color .4s ease,border-color .4s ease,color .35s ease,transform .28s cubic-bezier(.22,1,.36,1)!important}html body .site-header.is-hero-top .icon-button,html body .site-header.is-hero-top .language-switcher>summary{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.20)!important}html body .language-switcher>div{background:color-mix(in srgb,var(--surface-solid) 78%,transparent)!important;-webkit-backdrop-filter:blur(26px) saturate(150%)!important;backdrop-filter:blur(26px) saturate(150%)!important;border:1px solid color-mix(in srgb,var(--line) 55%,transparent)!important;box-shadow:0 22px 48px rgba(9,32,42,.24);transform-origin:top right}html body .site-header.is-hero-top .language-switcher>div{background:color-mix(in srgb,#0a2632 74%,transparent)!important;border-color:rgba(255,255,255,.14)!important}@keyframes langIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}@keyframes langOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px) scale(.96)}}html body .language-switcher[open]>div{animation:langIn .24s cubic-bezier(.22,1,.36,1) both}html body .language-switcher.is-closing>div{animation:langOut .22s cubic-bezier(.4,0,1,1) both;pointer-events:none}html body .contacts-page .card-tilt,html body .contacts-page .card-tilt:hover,html body .contact-card,html body .contact-card:hover,html body .contact-panel,html body .contact-panel:hover{--lift:0px!important;translate:none!important;margin-top:0!important;top:auto!important}html body .contacts-page .card-tilt:hover{transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important}html body .wave-divider{background:var(--bg);position:relative;z-index:1}html body .values-section,html body .about-page .story-section,html body .mission-section{position:relative;isolation:isolate}html body .values-section::before,html body .about-page .story-section::before,html body .mission-section::before{content:'';position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0;background:var(--bg);z-index:-1;pointer-events:none}html body .ambient{z-index:-5!important}

/* --- 0.9.11 mobile layout + performance --- */
html body .page-section,html body .news-section,html body .story-section,html body .values-section,html body .photo-stream-section{content-visibility:visible;}@media(hover:none),(pointer:coarse){html body .ambient-orb{filter:blur(48px)!important;animation:none!important;will-change:auto!important}html body .ambient-ripples{display:none!important}html body .entity-card,html body .news-card,html body .value-card,html body .pedigree-block{-webkit-backdrop-filter:blur(10px) saturate(130%)!important;backdrop-filter:blur(10px) saturate(130%)!important}html body .site-header{-webkit-backdrop-filter:blur(14px) saturate(135%)!important;backdrop-filter:blur(14px) saturate(135%)!important}html body *{box-shadow:none}html body .entity-card,html body .news-card,html body .value-card,html body .entity-modal,html body .news-modal,html body .site-header{box-shadow:0 10px 26px rgba(9,32,42,.16)}}@media(max-width:760px){html body .news-card,html body .news-modal{overflow:hidden;border-radius:22px;max-width:100%}html body .news-card{display:flex;flex-direction:column;min-width:0}html body .news-card *,html body .news-modal *{min-width:0;max-width:100%}html body .news-card-meta,html body .news-card-stats,html body .news-stats,html body .news-modal-stats{display:flex;flex-wrap:wrap;gap:8px;width:100%;box-sizing:border-box;overflow:visible;position:static;inset:auto;transform:none;padding:0 2px}html body .news-card-stats>*,html body .news-stats>*,html body .news-modal-stats>*{flex:0 0 auto;white-space:nowrap}html body .news-modal{width:min(96vw,560px);max-height:88vh}html body .news-modal-scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;border-radius:inherit}html body .entity-grid,html body .news-grid{grid-template-columns:1fr!important;gap:16px}html body img,html body video{max-width:100%;height:auto}html,body{overflow-x:hidden;max-width:100vw}}

/* --- 0.9.11 fixups --- */
html body .language-switcher.is-closing>div{animation:langOut .22s cubic-bezier(.4,0,1,1) both!important;pointer-events:none!important}html body .language-switcher[open]:not(.is-closing)>div{animation:langIn .24s cubic-bezier(.22,1,.36,1) both!important}html body .values-section::before,html body .about-page .story-section::before,html body .mission-section::before{background:inherit!important}

/* ================= Release layer 0.9.12 ================= */
html body .site-header.is-hero-top{background:color-mix(in srgb,#0a2632 46%,transparent)!important;-webkit-backdrop-filter:blur(20px) saturate(140%)!important;backdrop-filter:blur(20px) saturate(140%)!important;border-bottom:1px solid rgba(255,255,255,.16)!important;box-shadow:0 8px 30px rgba(4,22,31,.18)!important}html[data-theme='light'] body .site-header.is-hero-top{background:color-mix(in srgb,#0a2632 38%,transparent)!important}html body .contact-row,html body .contact-row:hover,html body .social-card,html body .social-card:hover,html body .contact-panel:hover,html body .contact-invite:hover{--lift:0px!important}html body .contact-row:hover,html body .social-card:hover,html body .contact-invite:hover{transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important}html body .news-card-text,html body .news-modal-text,html body .news-card-excerpt,html body .news-modal-body,html body .news-modal-scroll p,html body .news-card p{color:var(--text)!important}html body .news-card-more,html body .news-read-more,html body .news-card-cta,html body .news-modal-more{color:var(--sun-deep,var(--sun))!important}html body .news-card-text *,html body .news-modal-text *{color:inherit!important}html body #lightbox{z-index:2600!important}html body .lightbox-blur{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100vw!important;height:100vh!important;background-size:cover!important;background-position:50% 50%!important;background-repeat:no-repeat!important;transform:none!important;z-index:1!important}html body .lightbox-stage{z-index:2!important;overflow:visible!important}html body #lightboxImage{opacity:1!important;visibility:visible!important;display:block!important;position:relative!important;z-index:6!important;max-height:calc(100vh - 110px)!important;max-width:min(1180px,92vw)!important;width:auto!important;height:auto!important;object-fit:contain!important;transition:opacity .32s ease}html body .lightbox:not(.is-open):not(.is-closing){pointer-events:none!important;visibility:hidden!important}html body .pedigree-summary,html body .pedigree-subheading{display:none!important}html body .pedigree-block{order:-1;margin:0 0 26px}html body .boot-screen .boot-logo-phase-a{animation:b11MarkIn .8s cubic-bezier(.22,1,.36,1) .1s both,b11MarkOut .7s cubic-bezier(.4,0,.2,1) 3.9s forwards!important}html body .boot-screen .boot-logo-phase-b{animation:b11LockIn .75s cubic-bezier(.22,1,.36,1) 4.6s both!important}html body .boot-screen .boot-wave{transform:translate3d(0,100%,0);animation:b11WaveRise .95s cubic-bezier(.5,0,.2,1) 7.9s forwards!important;bottom:0!important;height:118vh!important;opacity:1!important}html body .boot-screen .boot-wave-foam{animation:b11Foam 1.05s cubic-bezier(.5,0,.2,1) 7.86s forwards!important}html body .boot-screen{transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s linear .9s!important}html body .boot-screen.is-done{opacity:0!important;visibility:hidden!important}

/* --- 0.9.12 stuck-overlay guard: nothing invisible may swallow clicks --- */
html body .lightbox:not(.is-open):not(.is-closing),html body .entity-overlay:not(.is-open),html body .news-overlay:not(.is-open),html body #morphStage:not(.is-open),html body .modal-backdrop:not(.is-open){pointer-events:none!important;visibility:hidden!important;opacity:0!important}html body:not(.is-locked){overflow:auto!important}html body .boot-screen.is-done{pointer-events:none!important}@keyframes lbSwap{from{opacity:.1;transform:scale(.975)}to{opacity:1;transform:scale(1)}}html body #lightboxImage.is-ready{animation:lbSwap .38s cubic-bezier(.22,1,.36,1)}

/* ================= Release layer 0.9.13 ================= */
html body .lightbox{grid-template-columns:80px minmax(0,1fr) 80px!important;justify-items:center!important;align-items:center!important}html body .lightbox-stage{grid-column:2!important;grid-row:1!important;width:100%!important;display:grid!important;place-items:center!important;justify-items:center!important}html body .lightbox.is-single .lightbox-stage{grid-column:1/-1!important}html body #lightboxImage{margin:0 auto!important;justify-self:center!important;grid-column:1!important}@media(max-width:760px){html body .lightbox{grid-template-columns:minmax(0,1fr)!important}html body .lightbox-stage{grid-column:1/-1!important}}html body .pedigree-block{margin:34px 0 28px!important}html body .about-page .story-section,html body .about-page .mission-section,html body .about-page .values-section{background:transparent!important;isolation:isolate}html body .about-page .story-section::before,html body .about-page .mission-section::before,html body .about-page .values-section::before{content:''!important;position:absolute!important;left:50%!important;transform:translateX(-50%)!important;width:100vw!important;top:0!important;bottom:0!important;background:var(--bg)!important;z-index:-1!important;pointer-events:none!important}html body .about-page .wave-divider{background:var(--bg)!important}html body .about-page .wave-divider svg,html body .about-page .wave-divider svg path,html body .about-page .wave-divider svg use{fill:var(--bg)!important}html body .about-page .ambient,html body .about-page .ambient-orb{display:none!important}@keyframes b13WaveWipe{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,-120%,0)}}@keyframes b13Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}html body .boot-screen{background:transparent!important;overflow:hidden!important}html body .boot-screen::before{content:''!important;position:absolute!important;inset:0!important;z-index:1!important;background:linear-gradient(145deg,#fff4dd,#f8d9c3 50%,#d9c7ef)!important;animation:b13Erase 2s cubic-bezier(.45,0,.25,1) 7.55s forwards!important}html[data-theme='dark'] body .boot-screen::before{background:linear-gradient(145deg,#0b2230,#123845 52%,#1b2f4a)!important}html body .boot-screen .boot-mark,html body .boot-screen .boot-logo-phase-a,html body .boot-screen .boot-logo-phase-b{z-index:3!important}html body .boot-screen .boot-wave{z-index:6!important;animation:b13WaveWipe 2.1s cubic-bezier(.45,0,.25,1) 7.4s forwards!important}html body .boot-screen .boot-wave-foam{z-index:7!important;animation:b13WaveWipe 2.1s cubic-bezier(.45,0,.25,1) 7.36s forwards!important;opacity:.9!important}

/* ================= Release layer 0.9.14 ================= */
html body .lightbox-blur{pointer-events:none!important;z-index:0!important}html body .lightbox-stage{pointer-events:none!important;z-index:2!important}html body #lightboxImage,html body .lightbox-count{pointer-events:auto!important}html body .lightbox-close,html body .lightbox-arrow{position:relative!important;z-index:12!important;pointer-events:auto!important}html body .lightbox-close{position:absolute!important;top:18px!important;right:18px!important}@keyframes b14Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}html body .boot-screen::before{animation:b14Erase 2s cubic-bezier(.45,0,.25,1) 7.55s forwards!important}html body .boot-screen .boot-mark{animation:b14Erase 2s cubic-bezier(.45,0,.25,1) 7.5s forwards!important}html body .language-switcher>div,html body details.language-switcher[open]>div{background:color-mix(in srgb,var(--surface-solid) 74%,transparent)!important;-webkit-backdrop-filter:blur(28px) saturate(155%)!important;backdrop-filter:blur(28px) saturate(155%)!important;border:1px solid color-mix(in srgb,var(--line) 45%,transparent)!important;box-shadow:0 18px 46px rgba(6,30,40,.22)!important}html body.route-about .ambient,html body.route-about .ambient-orb,html body.route-about .ambient-ripples,html body[data-route='about'] .ambient{display:none!important;opacity:0!important}html body.route-about .about-page .story-section,html body[data-route='about'] .about-page .story-section,html body .about-page .story-section,html body .about-page .breed-band{background:transparent!important;position:relative;isolation:isolate}html body .about-page .story-section::before,html body .about-page .breed-band::before{content:''!important;position:absolute!important;left:50%!important;transform:translateX(-50%)!important;width:100vw!important;top:0!important;bottom:0!important;background:var(--bg)!important;z-index:-1!important;pointer-events:none!important}html body .about-page .foam-line{background:var(--bg)!important}html body .about-page .foam-line svg,html body .about-page .foam-line svg path{fill:var(--bg)!important}

/* ================= Release layer 0.9.15 ================= */
/* photo swap: the image is faded out, preloaded, then faded back in */
html body #lightboxImage.is-swapping{opacity:.04!important;transform:scale(.972)!important;filter:blur(8px)!important}
html body #lightboxImage{will-change:opacity,transform,filter}
html body #lightboxImage.is-ready{animation:none!important}
html body #lightboxBlur{transition:opacity .42s ease,background-image .001s!important}
/* nothing that is not open may ever swallow a click */
html body .lightbox:not(.is-open):not(.is-closing),html body .lightbox:not(.is-open):not(.is-closing) *{pointer-events:none!important}
html body:not(.is-locked),html body:not(.is-locked) #app{overflow-x:clip!important;overflow-y:visible!important}
/* contacts: 3D tilt only, no vertical lift at all */
html body .contact-row:hover,html body .social-card:hover,html body .contact-invite:hover,
html body .contact-row.card-tilt:hover,html body .social-card.card-tilt:hover,html body .contact-invite.card-tilt:hover{
transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)!important}
html body .contact-row:active,html body .social-card:active,html body .contact-invite:active{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.988)!important}
/* header controls: one glass recipe on every page and every scroll state */
html body .site-header .icon-button,html body .site-header .language-switcher summary,
html body .site-header.is-hero-top .icon-button,html body .site-header.is-hero-top .language-switcher summary{
background:color-mix(in srgb,var(--surface-solid) 34%,transparent)!important;border:1px solid color-mix(in srgb,var(--line) 42%,transparent)!important;
-webkit-backdrop-filter:blur(18px) saturate(150%)!important;backdrop-filter:blur(18px) saturate(150%)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px rgba(8,39,48,.10)!important;
transition:background .4s ease,border-color .4s ease,transform .32s cubic-bezier(.16,1,.3,1)!important}
html body .site-header.is-hero-top .icon-button,html body .site-header.is-hero-top .language-switcher summary{
background:rgba(10,38,50,.24)!important;border-color:rgba(255,255,255,.30)!important;color:#fff!important}
html body .site-header .icon-button:hover,html body .site-header .language-switcher summary:hover{transform:translateY(-2px)!important}
/* about: the ambient orbs are what cut those rectangles into the page */
html body:has(.page-view[data-page='about'].is-active) .ambient,
html body:has(.page-view[data-page='about'].is-active) .ambient-orb,
html body:has(.page-view[data-page='about'].is-active) .ambient-ripples{display:none!important;opacity:0!important}
html body .about-page,html body .about-page .section{background:var(--bg)!important}
html body .about-page .story-section::before,html body .about-page .breed-band::before{background:var(--bg)!important}
/* intro: the wave now moves at the same pace as the erase that follows it */
@keyframes b15Wave{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,-125%,0)}}
@keyframes b15Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-screen .boot-wave{animation:b15Wave 3.6s cubic-bezier(.36,0,.28,1) 7.2s forwards!important}
html body .boot-screen .boot-wave-foam{animation:b15Wave 3.6s cubic-bezier(.36,0,.28,1) 7.16s forwards!important}
html body .boot-screen::before{animation:b15Erase 3.6s cubic-bezier(.36,0,.28,1) 7.42s forwards!important}
html body .boot-screen .boot-mark{animation:b15Erase 3.6s cubic-bezier(.36,0,.28,1) 7.40s forwards!important}
html body .about-page{position:relative!important;z-index:1!important;background:var(--bg)!important}
html body .about-page>*{position:relative;z-index:1}

/* ================= Release layer 0.9.16 ================= */
/* content-visibility on the long sections desynced layout from hit-testing after an
   overlay closed, which read as "half the page is dead". Rendering is never skipped now. */
html body .page-section,html body .news-section,html body .story-section,html body .values-section,
html body .photo-stream-section,html body .section,html body .page-view{content-visibility:visible!important;contain:none!important}
/* the about page rectangles: this gradient overlay was clamped to the content column
   inside a media query, so its edges showed up as two hard vertical cuts */
html body .about-page .story-section::after,html body .about-page .story-section::before,
html body .about-page .breed-band::after{content:none!important;display:none!important;background:none!important}
html body .about-page,html body .about-page .section,html body .about-page .story-section,
html body .about-page .breed-band{background:var(--bg)!important;background-image:none!important;clip-path:none!important;-webkit-clip-path:none!important;overflow:visible!important}
html body .about-page .foam-line,html body .about-page .foam-line svg,html body .about-page .foam-line svg path{background:var(--bg)!important;fill:var(--bg)!important;box-shadow:none!important}
/* header: the blur must never blink. Only the background tint changes with scroll. */
html body .site-header,html body .site-header.is-hero-top,html body .site-header.is-scrolled{
-webkit-backdrop-filter:blur(22px) saturate(145%)!important;backdrop-filter:blur(22px) saturate(145%)!important;
transition:background .55s ease,border-color .55s ease!important}
html body .site-header.is-hero-top{background:linear-gradient(180deg,rgba(6,26,36,.46),rgba(6,26,36,.14) 74%,rgba(6,26,36,.06))!important}
/* contacts: every card in that tab keeps the tilt and loses the lift */
html body .contacts-page :is(.contact-row,.social-card,.contact-invite,.contact-panel,.card-tilt,.news-contact-chip,.documents-strip>div):hover,
html body .contact-row:hover,html body .social-card:hover,html body .contact-invite:hover{
transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)!important}
/* hero: the slide blur used to feather the edges and let the page background show
   through, so every manual switch looked like a shrunken photo on a backdrop */
html body .hero-media{overflow:hidden!important;background:#0b2430!important}
html body .hero-slide{inset:0!important;overflow:hidden!important;filter:none!important}
html body .hero-slide img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
object-fit:cover!important;object-position:center 43%!important;
filter:blur(12px) saturate(.9) brightness(.94)!important;
transition:transform 7s linear,filter .85s ease,opacity .85s ease!important}
html body .hero-slide.is-active img{filter:none!important}
html body .hero-slide.is-prev img{filter:blur(8px) saturate(.95)!important}
/* intro: the erase now finishes together with the wave instead of trailing behind it */
html body .boot-screen::before{animation:b15Erase 2.8s cubic-bezier(.3,0,.2,1) 7.35s forwards!important}
html body .boot-screen .boot-mark{animation:b15Erase 2.8s cubic-bezier(.3,0,.2,1) 7.32s forwards!important}

/* ================= Release layer 0.9.17 ================= */
/* THE dead-page bug: an id-level rule kept pointer-events:auto on the photo even
   after the viewer closed, so a full-screen invisible image ate clicks, hover and
   the context menu. A child with pointer-events:auto stays hit-testable inside a
   parent with pointer-events:none -- that is exactly what happened here. */
html body .lightbox:not(.is-open):not(.is-closing){display:none!important;visibility:hidden!important;pointer-events:none!important}
html body .lightbox:not(.is-open):not(.is-closing) #lightboxImage,html body .lightbox:not(.is-open):not(.is-closing) .lightbox-count,
html body .lightbox:not(.is-open):not(.is-closing) .lightbox-close,html body .lightbox:not(.is-open):not(.is-closing) .lightbox-arrow,
html body .lightbox:not(.is-open):not(.is-closing) *{pointer-events:none!important;visibility:hidden!important}
html body .lightbox.is-open{display:grid!important;visibility:visible!important}
html body .lightbox.is-open #lightboxImage,html body .lightbox.is-open .lightbox-count,
html body .lightbox.is-open .lightbox-close,html body .lightbox.is-open .lightbox-arrow{pointer-events:auto!important;visibility:visible!important}
/* header: donor behaviour restored, and the blur is transitioned so it cannot blink */
html body .site-header{background:color-mix(in srgb,var(--surface-solid) 80%,transparent)!important;
-webkit-backdrop-filter:blur(22px) saturate(145%)!important;backdrop-filter:blur(22px) saturate(145%)!important;
transition:background .6s ease,backdrop-filter .6s ease,-webkit-backdrop-filter .6s ease,border-color .6s ease!important}
html body .site-header.is-hero-top{background:linear-gradient(180deg,rgba(4,22,31,.52),rgba(4,22,31,.16) 72%,transparent)!important;
-webkit-backdrop-filter:blur(4px) saturate(118%)!important;backdrop-filter:blur(4px) saturate(118%)!important}
/* one glass recipe for the two controls, on every page and every scroll state */
html body .site-header .icon-button,html body .site-header .language-switcher summary,
html body .site-header.is-hero-top .icon-button,html body .site-header.is-hero-top .language-switcher summary{
background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.34)!important;
-webkit-backdrop-filter:blur(18px) saturate(150%)!important;backdrop-filter:blur(18px) saturate(150%)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 8px 22px rgba(8,39,48,.10)!important}
/* about page: keep the centred column that 0.9.16 accidentally stretched to the edge */
html body .about-page .section,html body .about-page .story-section{
width:min(1200px,calc(100% - 64px))!important;max-width:100%!important;margin-inline:auto!important}
@media(max-width:760px){html body .about-page .section,html body .about-page .story-section{width:calc(100% - 36px)!important}}
/* contacts: tilt only, no lift, no matter which rule tries to add one */
html body .contacts-page .contact-row:hover,html body .contacts-page .social-card:hover,
html body .contacts-page .contact-panel:hover,html body .contacts-page .contact-row.card-tilt:hover,
html body .contacts-page .social-card.card-tilt:hover,html body .contacts-page .card-tilt:hover,
html body .contacts-page .contact-row:focus-within,html body .contacts-page .social-card:focus-within{
--lift:0px!important;transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,0,0)!important;
top:auto!important;bottom:auto!important;margin:0!important;translate:none!important}
/* intro: identical linear pacing, so the erase edge rides just behind the crest */
@keyframes b17Wave{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,-125%,0)}}
html body .boot-screen .boot-wave{animation:b17Wave 3.4s linear 7.2s forwards!important}
html body .boot-screen .boot-wave-foam{animation:b17Wave 3.4s linear 7.17s forwards!important}
html body .boot-screen::before{animation:b15Erase 2.95s linear 7.3s forwards!important}
html body .boot-screen .boot-mark{animation:b15Erase 2.95s linear 7.28s forwards!important}

/* ======================= Release layer 0.9.18 ======================= */
/* topbar: one single recipe for every page and every scroll position */
html body .site-header,
html body .site-header.is-hero-top,
html body .site-header.is-scrolled,
html body .site-header.is-compact{
background:color-mix(in srgb,var(--surface-solid) 80%,transparent)!important;
-webkit-backdrop-filter:blur(22px) saturate(145%)!important;
backdrop-filter:blur(22px) saturate(145%)!important;
border-bottom:1px solid var(--line)!important;
box-shadow:0 10px 34px rgba(6,32,44,.14)!important;
transition:height .45s ease,background .45s ease,box-shadow .45s ease!important}
html body .site-header.is-hero-top .brand strong,
html body .site-header.is-hero-top .brand small,
html body .site-header.is-hero-top .nav-link{color:var(--text)!important;text-shadow:none!important}
html body .site-header.is-hero-top::before,
html body .site-header.is-hero-top::after{content:none!important;display:none!important}

/* about: side glows removed at the root, so nothing can be clipped by the wave */
html body .story-section::before,html body .story-section::after,
html body .about-page .story-section::before,html body .about-page .story-section::after,
html body .about-page .story-aside::before,html body .about-page .story-aside::after,
html body .about-page .story-copy::before,html body .about-page .story-copy::after,
html body .about-page .breed-band::before,html body .about-page .breed-band::after,
html body .about-page .section::before,html body .about-page .section::after{
content:none!important;display:none!important;background:none!important;
box-shadow:none!important;filter:none!important;opacity:0!important}
html body .about-page .story-section,
html body .about-page .story-aside,
html body .about-page .story-copy{background:none!important;box-shadow:none!important;filter:none!important}
html body .about-page .story-aside span{text-shadow:none!important}
html body.route-about .ambient,
html body.route-about .ambient-orb,
html body.route-about .ambient-ripples{display:none!important}

/* hero slider: ken-burns is a real animation, restarted on every switch */
@keyframes b18Ken{from{transform:scale(1.02)}to{transform:scale(1.16)}}
html body .hero-slide img{animation:none!important;transform:scale(1.02)}
html body .hero-slide.is-active img{animation:b18Ken 9.4s linear both!important;filter:none!important}
html body .hero-slide{transition:opacity .95s ease,filter .95s ease!important}
html body .hero-slide.is-active{opacity:1!important;filter:none!important;z-index:2!important}
html body .hero-slide:not(.is-active){opacity:0!important;z-index:1!important}
html body .hero-switches button{pointer-events:auto!important}

/* intro: crest and erase edge share one clock -- 50vh per second, both linear */
@keyframes b18Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-175vh,0)}}
@keyframes b18Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-screen{background:transparent!important;animation:none!important;
transform:none!important;clip-path:none!important;overflow:hidden!important}
html body .boot-screen::before{content:""!important;display:block!important;position:fixed!important;
inset:0!important;z-index:0!important;
background:linear-gradient(165deg,#0a3446 0%,#0f5f79 48%,#082735 100%)!important;
animation:b18Erase 2s linear 7.2s forwards!important}
html body .boot-screen .boot-mark{animation:b18Erase 2s linear 7.2s forwards!important;z-index:2!important}
html body .boot-screen .boot-wave{position:fixed!important;left:-6vw!important;right:auto!important;
width:112vw!important;top:90vh!important;bottom:auto!important;height:70vh!important;z-index:3!important;
border-radius:0!important;background:none!important;box-shadow:none!important;filter:none!important;
will-change:transform;animation:b18Wave 3.5s linear 7.2s forwards!important}
html body .boot-screen .boot-wave-body,
html body .boot-screen .boot-wave-foam{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
html body .boot-screen::before,html body .boot-screen .boot-mark,html body .boot-screen .boot-wave{animation:none!important}}

/* ======================= Release layer 0.9.19 ======================= */
/* hero: slides are contained, so the animated water and the shade stay on top */
html body .hero{position:relative!important;isolation:isolate!important}
html body .hero-media{z-index:0!important;isolation:isolate!important;contain:paint!important}
html body .hero-slide.is-active{opacity:1!important;filter:none!important;z-index:2!important}
html body .hero-slide:not(.is-active){opacity:0!important;z-index:1!important}
html body .hero-shade{z-index:2!important}
html body .hero-water{z-index:3!important}
html body .hero-content{z-index:5!important}
html body .hero-switches,html body .hero-progress,html body .scroll-cue{z-index:6!important}
/* ken-burns lasts exactly as long as the slide is on screen, so it never rewinds mid-view */
html body .hero-slide.is-active img{animation:b18Ken var(--ken,9s) linear both!important;filter:none!important}

/* about: the seam colour is one and the same value on both sides */
html body .about-page .page-hero-overlay{background:linear-gradient(180deg,rgba(3,20,28,.10),rgba(3,20,28,.48) 58%,color-mix(in srgb,var(--bg) 78%,transparent) 88%,var(--bg) 100%)!important}
html body .about-page .foam-line,html body .about-page .foam-line svg,html body .about-page .foam-line svg path,
html body .about-page .story-section,html body .about-page .breed-band,html body .about-page .section,
html body .about-page{background:var(--bg)!important;background-image:none!important}
html body .about-page .foam-line svg path{fill:var(--bg)!important}
html body .about-page .foam-line{box-shadow:none!important;filter:none!important}

/* language panel: real glass, nothing opaque and no filter on the ancestors */
html body .site-header .language-switcher>div,
html body .site-header.is-hero-top .language-switcher>div,
html body .language-switcher[open]>div,
html body #languageSwitcher>div{
background:color-mix(in srgb,var(--surface-solid) 52%,transparent)!important;
-webkit-backdrop-filter:blur(30px) saturate(165%)!important;
backdrop-filter:blur(30px) saturate(165%)!important;
border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important;
box-shadow:0 22px 52px rgba(5,25,35,.22),inset 0 1px 0 rgba(255,255,255,.22)!important;
filter:none!important;isolation:isolate!important}
html body .language-switcher,html body .header-actions,html body .site-header{filter:none!important}
html body .language-switcher>div button{background:transparent!important}
html body .language-switcher>div button:hover{background:color-mix(in srgb,var(--surface-solid) 70%,transparent)!important}

/* intro: thick wave, faster pace, and the crest always leads the erase edge */
@keyframes b19Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-198vh,0)}}
@keyframes b19Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-screen{background:transparent!important;animation:none!important;
transform:none!important;clip-path:none!important;overflow:hidden!important}
html body .boot-screen::before{content:""!important;display:block!important;position:fixed!important;
inset:0!important;z-index:0!important;
background:linear-gradient(165deg,#0a3446 0%,#0f5f79 48%,#082735 100%)!important;
animation:b19Erase 1.34s linear 5.4s forwards!important}
html body .boot-screen .boot-mark{animation:b19Erase 1.34s linear 5.4s forwards!important;z-index:2!important}
html body .boot-screen .boot-wave{position:fixed!important;left:-6vw!important;right:auto!important;
width:112vw!important;top:77vh!important;bottom:auto!important;height:112vh!important;z-index:3!important;
border-radius:0!important;background:none!important;box-shadow:none!important;filter:none!important;
will-change:transform;animation:b19Wave 2.4s linear 5.4s forwards!important}
html body .boot-screen .boot-wave-body,
html body .boot-screen .boot-wave-foam{animation:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
html body .boot-screen::before,html body .boot-screen .boot-mark,html body .boot-screen .boot-wave{animation:none!important}}

/* ======================= Release layer 0.9.20 ======================= */
/* hero: the leaving frame keeps zooming, so nothing snaps back mid-fade */
html body .hero-slide.is-active img,
html body .hero-slide.is-prev img{animation:none!important;transform:scale(1.16)!important}
html body .hero-slide.is-active img{filter:none!important}
html body .hero-slide.is-prev img{filter:blur(5px) saturate(.95)!important}
html body .hero-slide.is-prev{opacity:0!important;z-index:1!important}

/* intro: crest starts below the fold, both layers share one curve -- slow start, sharp finish */
@keyframes b20Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-207vh,0)}}
@keyframes b20Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-screen::before{animation:b20Erase 1.9s cubic-bezier(.62,.02,.88,.24) 5.2s forwards!important}
html body .boot-screen .boot-mark{animation:b20Erase 1.9s cubic-bezier(.62,.02,.88,.24) 5.2s forwards!important}
html body .boot-screen .boot-wave{top:95vh!important;height:112vh!important;
animation:b20Wave 1.9s cubic-bezier(.62,.02,.88,.24) 5.2s forwards!important}
@media(prefers-reduced-motion:reduce){
html body .boot-screen::before,html body .boot-screen .boot-mark,html body .boot-screen .boot-wave{animation:none!important}}
/* ======================= Release layer 0.9.21+ (0.9.22) ======================= */
/* nothing may be skipped from rendering: the skip decision depended on the viewport,
   which is exactly why every card animation broke at 90-100% zoom and worked at 60% */
html body .page-section,html body .news-section,html body .story-section,html body .values-section,
html body .photo-stream-section,html body .litters-feed,html body .litter-family,html body .documents-strip,
html body .section,html body .page-view,html body .entity-grid,html body .news-grid,html body .dog-grid,
html body .entity-card,html body .news-card,html body .value-card,html body .social-card,html body .contact-row,
html body .news-card img,html body .entity-card img{content-visibility:visible!important;contain:none!important}

/* hover/tilt must always be a transition, never a jump, whatever state the modal left behind */
html body .value-card,html body .entity-card,html body .news-card,html body .social-card,
html body .contact-row,html body .documents-strip>div,html body .litter-demo-card,html body .card-tilt{
transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease,border-color .42s ease,filter .42s ease!important}
html body .card-tilt::before{transition:opacity .3s ease!important}

/* entity modal: closing is driven by one animation, so no !important opacity can kill it */
@keyframes b22EntityOut{from{opacity:1;filter:blur(0) saturate(1);transform:scale(1)}
to{opacity:0;filter:blur(14px) saturate(.96);transform:scale(.986)}}
html body .entity-overlay.is-closing{animation:b22EntityOut .56s cubic-bezier(.36,0,.24,1) both!important;
transition:none!important;pointer-events:none!important;visibility:visible!important}
html body .entity-overlay.is-closing .entity-modal-content{animation:none!important;opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
html body .entity-overlay.is-closing #morphStage{opacity:0!important}
/* the page behind returns with the same timing instead of snapping back */
html body #app,html body>.site-header,html body>.site-footer,html body>.mobile-menu{
transition:transform .56s cubic-bezier(.36,0,.24,1),filter .56s cubic-bezier(.36,0,.24,1),opacity .56s ease!important}

/* intro: crest and the erased edge travel the same 100vh with one curve, so neither can lead */
@keyframes b22Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-100vh,0)}}
@keyframes b22Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-screen::before{animation:b22Erase 1.65s cubic-bezier(.6,.01,.86,.24) 5.1s forwards!important}
html body .boot-screen .boot-mark{animation:b22Erase 1.65s cubic-bezier(.6,.01,.86,.24) 5.1s forwards!important}
html body .boot-screen .boot-wave{top:95vh!important;height:112vh!important;
animation:b22Wave 1.65s cubic-bezier(.6,.01,.86,.24) 5.1s forwards!important}
@media(prefers-reduced-motion:reduce){
html body .boot-screen::before,html body .boot-screen .boot-mark,html body .boot-screen .boot-wave{animation:none!important}
html body .entity-overlay.is-closing{animation-duration:.01ms!important}}
/* ======================= Release layer 0.9.23 ======================= */
/* hero: one continuous zoom on the media container, so the scale can never reset
   when a frame is swapped. Per-frame zoom is switched off completely. */
@keyframes b23Drift{from{transform:scale(1.045)}to{transform:scale(1.135)}}
html body .hero .hero-media{animation:b23Drift 34s ease-in-out infinite alternate!important;transform-origin:52% 46%!important;will-change:transform}
html body .hero .hero-slide img{animation:none!important;transform:none!important;filter:none!important;transition:none!important;will-change:auto!important}
/* long crossfade: frames dissolve into each other instead of snapping */
html body .hero .hero-slide{transition:opacity 1.7s cubic-bezier(.4,0,.3,1)!important;transform:none!important;filter:none!important}
html body .hero .hero-slide.is-active{opacity:1!important;z-index:2}
html body .hero .hero-slide:not(.is-active){opacity:0!important;z-index:1}

/* the corner glow lives on <body>, which is why no section-level fix ever removed it */
html body,html[data-theme="dark"] body{background-image:none!important;background-color:var(--bg)!important}
html body .sunset-orb{display:none!important}

@media(prefers-reduced-motion:reduce){html body .hero .hero-media{animation:none!important}}

/* ===== 0.9.24 layer ===== */
/* --- intro: faster logos, wave leads the erase and leaves the screen --- */
@keyframes b24LogoA{0%{opacity:0;transform:scale(.94);filter:blur(20px)}24%{opacity:1;transform:scale(1);filter:blur(0)}62%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.04);filter:blur(16px)}}
@keyframes b24LogoB{from{opacity:0;transform:scale(.96);filter:blur(16px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes b24Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-116vh,0)}}
@keyframes b24Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-logo-phase-a{animation:b24LogoA 2.45s cubic-bezier(.22,1,.36,1) 0s both!important}
html body .boot-logo-phase-b{opacity:0;animation:b24LogoB .78s cubic-bezier(.22,1,.36,1) 2.3s both!important}
html body .boot-screen::before{animation:b24Erase 1.5s cubic-bezier(.5,.02,.78,.22) 3.7s forwards!important}
html body .boot-screen .boot-mark{animation:b24Erase 1.5s cubic-bezier(.5,.02,.78,.22) 3.7s forwards!important}
html body .boot-screen .boot-wave{top:96.6vh!important;height:112vh!important;animation:b24Wave 1.5s cubic-bezier(.5,.02,.78,.22) 3.7s forwards!important}
/* --- hero: zoom that you can actually see --- */
@keyframes b24Drift{from{transform:scale(1.05)}to{transform:scale(1.32)}}
html body .hero .hero-media{animation:b24Drift 24s ease-in-out infinite alternate!important;transform-origin:52% 46%!important;overflow:hidden!important}
/* --- closing animation for the opened photo --- */
@keyframes b24LbOut{from{opacity:1;transform:scale(1);filter:blur(0)}to{opacity:0;transform:scale(.93);filter:blur(8px)}}
html body .lightbox.is-closing{display:grid!important;visibility:visible!important;opacity:1;pointer-events:none!important;animation:b24LbOut .42s cubic-bezier(.36,0,.24,1) both!important}
html body .lightbox.is-closing .lightbox-stage,html body .lightbox.is-closing #lightboxImage{transition:none!important;animation:none!important}
/* --- full-bleed bands must follow the real viewport, not 100vw (scrollbar overshoot = the corner glow) --- */
html body .story-section::before,html body .story-section::after,html body .values-section::before,html body .values-section::after,html body .breed-band::before,html body .breed-band::after,html body .wave-divider,html body .foam-line{width:var(--vw,100%)!important;max-width:var(--vw,100%)!important}
html body .wave-divider,html body .foam-line{left:0!important;right:auto!important;margin-left:0!important;transform:none!important}
html body .wave-divider svg{width:100%!important;display:block!important}
html body .about-page .wave-divider svg path{filter:none!important}
/* --- phones --- */
@media (max-width:900px){
html body .hero .hero-switches{position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;width:auto!important;height:auto!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:18px!important;z-index:7!important;pointer-events:auto!important}
html body .hero .hero-switches>button{position:static!important;inset:auto!important;margin:0!important;width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;border-radius:50%!important;display:grid!important;place-items:center!important;opacity:1!important;transform:none!important;-webkit-backdrop-filter:blur(14px) saturate(150%)!important;backdrop-filter:blur(14px) saturate(150%)!important}
html body .hero .hero-switches>button.is-edge-hidden{opacity:.4!important;pointer-events:none!important;transform:none!important}
html body .hero .hero-content{padding-bottom:104px!important}
html body .section{width:min(100%,calc(100% - 28px))!important;margin-left:auto!important;margin-right:auto!important}
html body .site-header{padding-top:env(safe-area-inset-top,0px)!important}
html body .entity-grid,html body .dog-grid,html body .news-grid,html body .entity-videos,html body .documents-strip,html body .contacts-layout,html body .story-section{grid-template-columns:1fr!important}
html body .hero-content h1{font-size:clamp(34px,9vw,50px)!important;line-height:1.06!important;word-break:normal!important;overflow-wrap:anywhere!important}
html body .lightbox{grid-template-columns:minmax(0,1fr)!important;padding:12px!important}
html body .lightbox-stage{grid-column:1!important;width:100%!important}
}
@media (hover:none),(pointer:coarse){
html body .card-tilt,html body .card-tilt:hover,html body .card-tilt:active,html body .value-card:hover,html body .entity-card:hover,html body .dog-card:hover,html body .social-card:hover,html body .contact-row:hover,html body .news-card:hover{--rx:0deg!important;--ry:0deg!important;--lift:0px!important;transform:none!important}
html body .card-tilt{transition:box-shadow .3s ease!important}
}
html,html body{max-width:100%!important;overflow-x:clip!important}
/* ===== 0.9.24 layer, part 2 ===== */
html body .boot-screen .boot-mark .boot-logo-phase-a{animation:b24LogoA 2.4s cubic-bezier(.22,1,.36,1) 0s both!important}
html body .boot-screen .boot-mark .boot-logo-phase-b{animation:b24LogoB .78s cubic-bezier(.22,1,.36,1) 2.25s both!important}
html body .boot-screen::before{animation:b24Erase 1.4s cubic-bezier(.5,.02,.78,.22) 3.82s forwards!important}
html body .boot-screen .boot-mark{animation:b24Erase 1.4s cubic-bezier(.5,.02,.78,.22) 3.82s forwards!important}
@media (max-width:900px){
html body .contact-wave,html body .contact-wave.two{left:0!important;right:0!important;width:100%!important}
html body .contact-panel,html body .contact-ocean{overflow:hidden!important}
}

/* ===== 0.9.25 layer: phone stability diet ===== */
@media (max-width:900px),(pointer:coarse){
/* every glass layer costs a full-screen GPU texture; keep it only where it is part of the UI */
html body .ambient:not(.keep-glass),html body .ambient-orb,html body .ambient-ripples,html body .sunset-orb,html body .wave-divider,html body .foam-line,html body .hero-shade,html body .water-signature,html body .breed-band,html body .litter-family,html body .page-hero-overlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body *{will-change:auto!important}
html body .ambient,html body .ambient-orb,html body .ambient-ripples,html body .sunset-orb{display:none!important}
html body .hero .hero-media{animation:none!important;transform:scale(1.03)!important}
html body .hero-water,html body .contact-wave,html body .foam-line,html body .wave-divider svg path,html body .image-frame,html body .image-frame::after{filter:none!important}
html body .value-card,html body .entity-card,html body .dog-card,html body .news-card,html body .social-card,html body .stream-card,html body .contact-row,html body .card-tilt{box-shadow:0 10px 26px rgba(10,40,52,.16)!important}
html body .dog-card-bg-layer,html body .entity-modal-hero-bg{filter:none!important}
/* nothing may keep a stuck overlay on screen after a route change */
html body:not(.entity-cinema) .entity-overlay:not(.is-open):not(.is-closing),
html body .news-overlay:not(.is-open),html body .detail-overlay:not(.is-open){display:none!important;visibility:hidden!important;pointer-events:none!important}
}
/* ===== 0.9.26 layer: global layout pass ===== */
html body #introImage.image-frame{aspect-ratio:var(--intro-ratio,3/2)!important;height:auto!important;min-height:0!important;max-height:640px!important;background-position:center center!important;background-size:contain!important;background-repeat:no-repeat!important}
html body #aboutHeroImage.page-hero-image{background-position:50% 36%!important}
html body #breedBandPhoto.breed-band-photo{aspect-ratio:3/2!important;height:auto!important;min-height:0!important;background-position:50% 40%!important}
html body .image-frame,html body .breed-band-photo,html body .page-hero-image,html body .entity-modal-hero-bg,html body .dog-card-bg-layer{background-size:cover!important;background-repeat:no-repeat!important}
html body img{max-width:100%}
html body .stream-card img,html body .entity-card img,html body .dog-card img,html body .news-card img{object-position:50% 40%}
html body #hero.hero{overflow:hidden!important}
html body .hero-water{left:0!important;right:0!important;overflow:hidden!important}
html body .contact-wave,html body .contact-wave.two{left:0!important;right:0!important;width:100%!important}
html body .contact-ocean,html body .contact-panel,html body .value-card,html body .story-section{overflow:hidden}
@media (max-width:1200px){html body .section-number{display:none!important}}
@media (max-width:900px){
html body .photo-stream{margin-inline:0!important;padding-inline:16px!important;scroll-padding-left:16px}
html body .stream-card{flex-basis:min(78vw,320px)!important;height:auto!important;aspect-ratio:3/4!important}
html body #introImage.image-frame{aspect-ratio:var(--intro-ratio,3/2)!important;max-height:640px!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center center!important}
html body #aboutHeroImage.page-hero-image{aspect-ratio:4/3!important;height:auto!important;min-height:0!important}
html body .page-hero{min-height:0!important}
html body .intro-visual .floating-note{position:absolute!important;left:16px!important;right:16px!important;bottom:16px!important;top:auto!important;width:auto!important;max-width:none!important;margin:0!important;z-index:3!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:4px 14px!important;border-radius:18px!important;padding:14px 18px!important;background:rgba(8,28,34,.55)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 18px 40px rgba(6,26,32,.35)!important}html body .intro-visual .floating-note strong{color:#ffd77a!important;font-size:20px!important;line-height:1.1!important;grid-row:1!important;grid-column:1!important}html body .intro-visual .floating-note span{color:#fff8ed!important;font-size:12.5px!important;line-height:1.35!important;grid-row:1!important;grid-column:2!important}
html body .card-ripple{width:150px!important;height:150px!important;right:-56px!important;bottom:-56px!important}
}
@media (min-width:901px) and (max-width:1100px){
html body .story-section{grid-template-columns:1fr!important;gap:34px!important}
html body .entity-grid,html body .dog-grid,html body .news-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .contacts-layout{grid-template-columns:1fr!important}
html body .section{width:min(100%,calc(100% - 40px))!important}
}
html body #lightboxImage{object-fit:contain!important;width:auto!important;height:auto!important;max-width:min(94vw,1500px)!important;max-height:86vh!important}
/* ===== 0.9.27 layer: mobile typography, tap targets, spacing ===== */
@media (max-width:900px){
/* 1. readable text: nothing below 13px on a phone */
html body p.eyebrow,html body .eyebrow{font-size:13px!important;letter-spacing:.14em!important;line-height:1.5!important}
html body small,html body .news-badge,html body .entity-card-meta span,html body .entity-card-meta small,html body figcaption{font-size:13px!important;line-height:1.5!important}
html body span,html body b,html body strong,html body em,html body li,html body p,html body td,html body th,html body dd,html body dt{font-size:max(13px,1em)}
html body .pedigree-table,html body .pedigree-table *{font-size:12px!important}
html body .section p,html body .detail-content p,html body .entity-modal-content p{font-size:16px!important;line-height:1.62!important}
html body h2{font-size:clamp(26px,7.2vw,34px)!important;line-height:1.18!important}
html body h3{font-size:clamp(20px,5.6vw,26px)!important;line-height:1.22!important}
/* 2. real tap targets: 44px minimum for anything clickable */
html body button,html body .nav-link,html body .icon-button,html body .primary-button,html body .glass-button,html body .theme-toggle,html body .menu-toggle,html body .lightbox-close,html body .lightbox-arrow,html body .detail-close,html body .social-card a,html body .contact-row a,html body a.primary-button,html body a.glass-button{min-height:44px!important;min-width:44px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
html body .social-card,html body .contact-row{min-height:56px!important;padding-block:14px!important}
html body .contact-row img,html body .social-card img{width:34px!important;height:34px!important}
/* 3. text inside cards must not look clickable or cramped */
html body .entity-card-meta{display:flex!important;flex-wrap:wrap!important;gap:8px 14px!important;cursor:default!important}
html body .entity-card-meta span,html body .news-card-tag{cursor:default!important}
html body .news-card-tag{padding:6px 12px!important;border-radius:999px!important}
/* 4. breathing room and predictable rhythm */
html body .section{padding-block:52px!important}
html body .section+.section{padding-top:0!important}
html body .entity-grid,html body .dog-grid,html body .news-grid,html body .mission-list,html body .documents-strip,html body .entity-videos{gap:18px!important}
html body .entity-card,html body .dog-card,html body .news-card,html body .value-card{padding:20px!important;border-radius:22px!important}
html body .litters-hero,html body .dogs-header{padding-block:34px 8px!important}
/* 5. long words and links can never widen the page */
html body p,html body h1,html body h2,html body h3,html body li,html body a,html body td{overflow-wrap:anywhere!important;word-break:normal!important}
html body table{display:block!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
/* 6. modals and detail views fit the screen */
html body .entity-modal-content,html body .news-modal-content,html body .detail-content{padding:18px!important;border-radius:20px 20px 0 0!important}
html body .entity-overlay,html body .news-overlay,html body .detail-overlay{padding:0!important;align-items:flex-end!important}
html body .entity-modal-hero,html body .detail-hero{aspect-ratio:4/3!important;height:auto!important;min-height:0!important}
html body .detail-close,html body .entity-modal-content .detail-close{position:sticky!important;top:10px!important;margin-left:auto!important;z-index:9!important}
/* 7. sticky header must not swallow content */
html body .page-hero,html body .hero{scroll-margin-top:80px}
html body .page-view.is-active>*:first-child{padding-top:8px}
}
/* ===== 0.9.27 layer B: last mobile details ===== */
@media (max-width:900px){
html body small,html body span,html body b,html body strong,html body em,html body i:not([class*="icon"]),html body label,html body time{font-size:max(13px,1em)!important}
html body .pedigree-table,html body .pedigree-table *{font-size:12px!important}
html body h1 span,html body h2 span,html body h3 span,html body h1 b,html body h2 b,html body h3 b,html body h1 small,html body h2 small{font-size:inherit!important}
html body span:not([class]),html body b,html body strong,html body small,html body em,html body h2,html body h3,html body p,html body img:not([data-full]):not(.tap){cursor:default!important}
html body .contact-row img,html body .social-card img{cursor:inherit!important}
html body .value-icon,html body .contact-row img,html body .social-card img{min-width:0!important;min-height:0!important}
html body .stream-controls button,html body [data-hero-prev],html body [data-hero-next]{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
}
@media (max-width:900px){
html body .entity-card-copy small,html body .contact-row small,html body .social-card small,html body .contact-caption,html body .brand-copy small{font-size:13px!important;line-height:1.45!important}
}
/* ===== 0.9.28 layer: restore effects on phones, lock background, honest intro timing ===== */
/* 1. decorative side glow removed at the root (the dark rectangle left of the story block) */
html body .story-section::before,html body .story-section::after,
html body .about-page .story-section::before,html body .about-page .story-section::after,
html body .values-section::before,html body .values-section::after,
html body .breed-band::before,html body .breed-band::after,
html body .about-page .breed-band::before,html body .about-page .breed-band::after,
html body .photo-stream-section::before,html body .photo-stream-section::after{content:none!important;display:none!important;background:none!important;box-shadow:none!important;filter:none!important;opacity:0!important}
/* 2. opened panels must be opaque: nothing readable behind them */
html body .entity-overlay,html body .news-overlay,html body .detail-overlay,html body .modal-backdrop,html body .changelog-overlay{background:rgba(5,22,30,.9)!important;-webkit-backdrop-filter:blur(20px) saturate(135%)!important;backdrop-filter:blur(20px) saturate(135%)!important}
html:not([data-theme="dark"]) body .entity-overlay,html:not([data-theme="dark"]) body .news-overlay,html:not([data-theme="dark"]) body .detail-overlay,html:not([data-theme="dark"]) body .modal-backdrop,html:not([data-theme="dark"]) body .changelog-overlay{background:rgba(10,42,54,.82)!important}
html body .entity-modal,html body .entity-modal-content,html body .news-modal,html body .news-modal-content,html body .detail-shell,html body .detail-content,html body .changelog-modal{background:var(--surface-solid)!important;-webkit-backdrop-filter:blur(24px) saturate(140%)!important;backdrop-filter:blur(24px) saturate(140%)!important}
html body .lightbox{background:rgba(3,16,22,.94)!important}
html body .lightbox-blur{-webkit-backdrop-filter:blur(26px)!important;backdrop-filter:blur(26px)!important}
/* 3. the page behind an opened card can no longer be scrolled */
html body.is-locked,html body.is-modal-open,html body.lightbox-open,html body.entity-cinema{overflow:hidden!important;touch-action:none!important;overscroll-behavior:none!important}
html:has(body.is-locked),html:has(body.is-modal-open),html:has(body.lightbox-open){overflow:hidden!important;touch-action:none!important}
html body .entity-overlay,html body .news-overlay,html body .detail-overlay,html body .lightbox,html body .changelog-overlay{overscroll-behavior:contain!important}
html body .entity-modal-content,html body .news-modal-content,html body .detail-content,html body .changelog-scroll{overscroll-behavior:contain!important;touch-action:pan-y!important}
/* 4. glass and photo zoom are back on phones, in a compositor-friendly form */
@media (max-width:900px),(pointer:coarse){
html body .entity-card,html body .dog-card,html body .news-card,html body .value-card,html body .social-card,html body .contact-panel,html body .smart-media,html body .entity-modal-content,html body .news-modal-content,html body .detail-content,html body .entity-overlay,html body .news-overlay,html body .detail-overlay,html body .lightbox,html body .lightbox-blur,html body .modal-backdrop,html body .floating-note,html body .documents-strip,html body .glass-button{-webkit-backdrop-filter:blur(16px) saturate(130%)!important;backdrop-filter:blur(16px) saturate(130%)!important}
@keyframes b28Zoom{from{transform:scale(1.04)}to{transform:scale(1.17)}}
html body .hero .hero-media{will-change:transform!important}
html body .hero-water,html body .contact-wave{filter:blur(.2px)!important}
/* 5. news / VK meta: status, date and views stay inside the card and do not drift right */
html body .news-card-meta{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:8px 10px!important;width:100%!important;max-width:100%!important}
html body .news-card-meta>*{margin:0!important;transform:none!important;justify-self:start!important;grid-area:auto!important;position:static!important;max-width:100%!important}
html body .news-card-meta .news-views{order:9!important;margin-left:0!important;flex:0 0 auto!important;overflow:visible!important;white-space:nowrap!important}
html body .news-card-meta time,html body .news-age{flex:0 1 auto!important;white-space:nowrap!important}
}
/* 6. intro: 0.4s pause, logo fades in and holds 1s, logo with text holds 1s, then the wave leads and the background follows */
@keyframes b28LogoA{0%{opacity:0;transform:scale(.94);filter:blur(18px)}26%{opacity:1;transform:scale(1);filter:blur(0)}79%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(1.03);filter:blur(9px)}}
@keyframes b28LogoB{from{opacity:0;transform:scale(.965);filter:blur(14px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes b28Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-134vh,0)}}
@keyframes b28Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-screen .boot-mark .boot-logo-phase-a{animation:b28LogoA 1.9s cubic-bezier(.22,1,.36,1) .4s both!important}
html body .boot-screen .boot-mark .boot-logo-phase-b{opacity:0;animation:b28LogoB .5s cubic-bezier(.22,1,.36,1) 1.95s both!important}
html body .boot-screen .boot-wave{top:97vh!important;height:122vh!important;animation:b28Wave 1.85s cubic-bezier(.4,.02,.68,.3) 3.45s forwards!important}
html body .boot-screen::before{animation:b28Erase 1.85s cubic-bezier(.4,.02,.68,.3) 3.63s forwards!important}
html body .boot-screen .boot-mark{animation:b28Erase 1.85s cubic-bezier(.4,.02,.68,.3) 3.63s forwards!important}
/* 0.9.28 addendum: zoom via the scale property so tilt resets cannot kill it, plus a scroll lock that works without JS */
@media (max-width:900px),(pointer:coarse){
@keyframes b28ZoomS{from{scale:1.04}to{scale:1.18}}
html body .hero .hero-media{animation:b28ZoomS 20s ease-in-out infinite alternate!important;transform-origin:50% 50%!important}
html body .hero .hero-media{scale:1.04}
html body .lightbox.is-open #lightboxImage{animation:none!important}
}
html body:has(.entity-overlay.is-open),html body:has(.news-overlay.is-open),html body:has(.detail-overlay.is-open),html body:has(.lightbox.is-open),html body:has(.changelog-overlay.is-open){overflow:hidden!important;overscroll-behavior:none!important}
html:has(body .entity-overlay.is-open),html:has(body .news-overlay.is-open),html:has(body .detail-overlay.is-open),html:has(body .lightbox.is-open){overflow:hidden!important}
/* ===== 0.9.29 layer ===== */
/* 1. news / VK meta: original layout back, everything nudged left */
@media (max-width:900px),(pointer:coarse){
html body .news-card-meta{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-auto-rows:auto!important;gap:6px 10px!important;align-items:center!important;width:100%!important;max-width:100%!important;padding-right:0!important}
html body .news-card-meta .news-card-tag{grid-area:1/1!important;justify-self:start!important;margin-left:-5px!important;order:0!important;transform:none!important}
html body .news-card-meta time,html body .news-card-meta .news-age{grid-area:1/2!important;justify-self:end!important;margin-right:7px!important;margin-left:0!important;white-space:nowrap!important;order:0!important;transform:none!important}
html body .news-card-meta .news-views{grid-area:2/2!important;justify-self:end!important;margin-right:11px!important;margin-left:0!important;order:0!important;white-space:nowrap!important;max-width:100%!important;overflow:visible!important;transform:none!important}
/* 2. the empty dark band under the hero photo is gone: hero height follows the photo */
html body .about-page .page-hero,html body .page-hero{aspect-ratio:4/3!important;height:auto!important;min-height:0!important;overflow:hidden!important}
html body .page-hero-image,html body #aboutHeroImage.page-hero-image{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important}
html body .page-hero-overlay{position:absolute!important;inset:0!important}
/* 3. the year in the story block is readable again */
html body .about-page .story-aside>span,html body .story-aside>span{font-size:clamp(46px,13vw,84px)!important;line-height:1!important;display:block!important;margin-bottom:6px!important;letter-spacing:-.055em!important}
html body .mission-list article>span,html body .documents-strip span{font-size:15px!important}
}
/* 4. foam line and hero decor can no longer stick out or glow at the left corner */
html body .foam-line,html body .about-page .foam-line{left:0!important;right:0!important;width:100%!important;margin-left:0!important;overflow:hidden!important;filter:none!important;box-shadow:none!important}
html body .page-hero,html body .about-page .page-hero{isolation:isolate!important}
html body .about-page .page-hero::before,html body .about-page .page-hero::after,html body .page-hero::before,html body .page-hero::after{content:none!important;display:none!important}
/* 5. mobile menu now has a real closing animation */
@keyframes b29MenuIn{from{opacity:0;transform:translate3d(0,-14px,0) scale(.985);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes b29MenuOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translate3d(0,-12px,0) scale(.99);filter:blur(9px)}}
html body .mobile-menu.is-open{animation:b29MenuIn .34s cubic-bezier(.22,1,.36,1) both!important}
html body .mobile-menu.is-closing{display:flex!important;visibility:visible!important;pointer-events:none!important;animation:b29MenuOut .36s cubic-bezier(.4,0,.7,.2) both!important}
html body .mobile-menu.is-closing .mobile-menu-wave{opacity:.18!important}
/* 6. closing a photo: the blurred backdrop fades without any scaling */
@keyframes b29LbOut{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(7px)}}
@keyframes b29LbStageOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.94)}}
html body .lightbox.is-closing{display:grid!important;visibility:visible!important;pointer-events:none!important;animation:b29LbOut .42s cubic-bezier(.36,0,.24,1) both!important}
html body .lightbox.is-closing .lightbox-stage,html body .lightbox.is-closing #lightboxImage{animation:b29LbStageOut .4s cubic-bezier(.36,0,.24,1) both!important;transition:none!important}
html body .lightbox.is-closing .lightbox-blur{animation:none!important;transition:opacity .4s ease!important;transform:scale(1.15)!important;scale:none!important;opacity:0!important}
/* 7. intro: the background starts erasing only after the wave has swallowed the screen, and the screen stays until everything is done */
html body .boot-screen .boot-wave{top:97vh!important;height:124vh!important;animation:b28Wave 1.95s cubic-bezier(.38,.02,.66,.32) 3.45s forwards!important}
html body .boot-screen::before{animation:b28Erase 1.15s cubic-bezier(.5,.05,.7,.25) 4.32s forwards!important}
html body .boot-screen .boot-mark{animation:b28Erase 1.15s cubic-bezier(.5,.05,.7,.25) 4.32s forwards!important}
/* 0.9.29 addendum: relative status must be readable too */
html body .news-card-meta .news-age,html body .news-age,html body .news-auto-status{font-size:13px!important;line-height:1.25!important}
/* ===== 0.9.30 layer ===== */
/* 1. the glow was never inside .story-section: .page-view[data-page] itself paints two radial gradients */
html body .page-view[data-page],
html body .page-view[data-page="about"],
html body .page-view[data-page="dogs"],
html body .page-view[data-page="puppies"],
html body .page-view[data-page="litters"],
html body .page-view[data-page="news"],
html body .page-view[data-page="contacts"],
html body .page-view[data-page="home"],
html[data-theme="dark"] body .page-view[data-page],
html[data-theme="dark"] body .page-view[data-page="about"]{background-image:none!important}
html body .about-page,html body .about-page .story-section,html body .about-page .breed-band{background-image:none!important;box-shadow:none!important;filter:none!important}
/* 2. intro: one continuous move, nothing stalls at the top, no abrupt cut, faster overall */
html body .boot-screen{animation:none!important;opacity:1!important;visibility:visible!important;transform:none!important;transition:opacity .34s linear!important}
html body .boot-screen.is-done{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:none!important}
@keyframes b30Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-168vh,0)}}
@keyframes b30Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
html body .boot-screen .boot-wave{top:97vh!important;height:126vh!important;animation:b30Wave 1.5s cubic-bezier(.32,.06,.62,.36) 3.45s forwards!important}
html body .boot-screen::before{animation:b30Erase 1.02s cubic-bezier(.42,.05,.66,.3) 3.93s forwards!important}
html body .boot-screen .boot-mark{animation:b30Erase 1.02s cubic-bezier(.42,.05,.66,.3) 3.93s forwards!important}
/* ===== 0.9.31 layer ===== */
/* 1. "news unavailable" card: real layout instead of a squeezed column, real VK logo */
html body .news-card.news-empty-state{grid-column:1/-1!important;display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important;justify-content:flex-start!important;gap:clamp(18px,3vw,30px)!important;width:100%!important;max-width:900px!important;margin-inline:auto!important;min-height:0!important;padding:clamp(22px,4vw,42px)!important;text-align:left!important}
html body .news-card.news-empty-state>.news-empty-icon{flex:0 0 auto!important;width:84px!important;height:84px!important;margin:0!important;display:grid!important;place-items:center!important;border-radius:26px!important;overflow:hidden!important;padding:14px!important}
html body .news-card.news-empty-state>.news-empty-icon img{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important;filter:none!important}
html body .news-card.news-empty-state>div:not(.news-empty-icon){flex:1 1 300px!important;min-width:0!important;display:block!important;text-align:left!important}
html body .news-card.news-empty-state h3{font-size:clamp(24px,3.4vw,38px)!important;line-height:1.1!important;margin:10px 0 8px!important;overflow-wrap:break-word!important;hyphens:none!important}
html body .news-card.news-empty-state p{font-size:15px!important;line-height:1.55!important;max-width:52ch!important;margin:0!important;overflow-wrap:break-word!important}
html body .news-card.news-empty-state .news-card-link{margin-top:18px!important;display:inline-flex!important;align-items:center!important;gap:10px!important;white-space:nowrap!important}
@media (max-width:640px){
html body .news-card.news-empty-state{flex-direction:column!important;align-items:flex-start!important;text-align:left!important}
html body .news-card.news-empty-state>.news-empty-icon{width:72px!important;height:72px!important;margin:0!important}
}
/* 2. intro: the wave keeps moving while the screen fades, and it leaves the viewport completely */
@keyframes b31Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-215vh,0)}}
html body .boot-screen .boot-wave{top:97vh!important;height:126vh!important;animation:b31Wave 1.95s cubic-bezier(.3,.05,.58,.42) 3.45s forwards!important}
html body .boot-screen::before{animation:b30Erase 1s cubic-bezier(.42,.05,.66,.3) 3.93s forwards!important}
html body .boot-screen .boot-mark{animation:b30Erase 1s cubic-bezier(.42,.05,.66,.3) 3.93s forwards!important}
html body .boot-screen{transition:opacity .36s linear!important}
/* ===== 0.9.32 layer =====
   ANTI-GLOW RULE (do not break): no radial-gradient, no unbounded box-shadow and no filter is
   allowed on any page container. Everything below paints ONLY inside bounded boxes that carry
   overflow:hidden, so no corner spill can ever appear again. .page-view keeps background-image:none. */
html body .page-view[data-page],
html[data-theme="dark"] body .page-view[data-page]{background-image:none!important}

/* 1. Contacts waves: real overhang on both sides, so sliding can never open a gap on the left. */
@keyframes w32WaveA{0%{transform:translate3d(-2.5%,0,0)}50%{transform:translate3d(2.5%,-7%,0)}100%{transform:translate3d(-2.5%,0,0)}}
@keyframes w32WaveB{0%{transform:translate3d(2%,-2%,0)}50%{transform:translate3d(-2.5%,-9%,0)}100%{transform:translate3d(2%,-2%,0)}}
html body .contact-ocean{overflow:hidden!important}
html body .contact-wave,html body .contact-wave.one,html body .contact-wave.two{left:-16%!important;right:auto!important;width:132%!important;animation-name:w32WaveA!important;animation-timing-function:ease-in-out!important;animation-iteration-count:infinite!important;animation-direction:normal!important;will-change:transform}
html body .contact-wave.one{animation-duration:9s!important}
html body .contact-wave.two{animation-name:w32WaveB!important;animation-duration:12s!important}

/* 2. Intro: the wave leaves the viewport COMPLETELY before the screen starts fading. */
@keyframes b32Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-244vh,0)}}
html body .boot-screen .boot-wave{top:97vh!important;height:126vh!important;animation:b32Wave 1.62s cubic-bezier(.34,.06,.6,.4) 3.3s forwards!important}
html body .boot-screen::before{animation:b30Erase .96s cubic-bezier(.42,.05,.66,.3) 3.86s forwards!important}
html body .boot-screen .boot-mark{animation:b30Erase .96s cubic-bezier(.42,.05,.66,.3) 3.86s forwards!important}
html body .boot-screen{transition:opacity .4s linear!important}

/* 3. "About" page: bounded decorative panels are back (no container paint, no radial light). */
html body .about-page .story-section{position:relative!important;overflow:hidden!important;border-radius:34px!important;border:1px solid color-mix(in srgb,var(--line) 78%,#8ed3de)!important;background:linear-gradient(160deg,color-mix(in srgb,var(--surface-soft) 74%,#ffffff),color-mix(in srgb,var(--surface-solid) 90%,#ffe3ab) 58%,color-mix(in srgb,var(--surface-solid) 88%,#cdeef5))!important;background-image:linear-gradient(160deg,color-mix(in srgb,var(--surface-soft) 74%,#ffffff),color-mix(in srgb,var(--surface-solid) 90%,#ffe3ab) 58%,color-mix(in srgb,var(--surface-solid) 88%,#cdeef5))!important;box-shadow:0 22px 60px rgba(9,48,60,.1),inset 0 1px rgba(255,255,255,.6)!important;padding:clamp(26px,4vw,58px)!important}
html[data-theme="dark"] body .about-page .story-section{border-color:rgba(140,214,226,.22)!important;background:linear-gradient(160deg,#173845,#123542 56%,#14414e)!important;background-image:linear-gradient(160deg,#173845,#123542 56%,#14414e)!important;box-shadow:0 24px 64px rgba(2,16,22,.42),inset 0 1px rgba(255,255,255,.08)!important}
html body .about-page .story-aside>span{color:var(--sun)!important}
html body .about-page .mission-list article{overflow:hidden!important;border:1px solid color-mix(in srgb,var(--line) 72%,#8ed3de)!important;border-top:1px solid color-mix(in srgb,var(--line) 72%,#8ed3de)!important;border-radius:22px!important;padding:22px 22px 24px!important;background:linear-gradient(150deg,color-mix(in srgb,var(--surface-solid) 92%,#ffe9c4),color-mix(in srgb,var(--surface-solid) 94%,#d6f0f6))!important;box-shadow:0 12px 30px rgba(9,48,60,.08),inset 0 1px rgba(255,255,255,.6)!important;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease!important}
html[data-theme="dark"] body .about-page .mission-list article{border-color:rgba(140,214,226,.2)!important;background:linear-gradient(150deg,#1a3f4c,#15394699)!important;box-shadow:0 14px 34px rgba(2,16,22,.36),inset 0 1px rgba(255,255,255,.07)!important}
html body .about-page .mission-list article:hover{transform:translateY(-4px)!important;box-shadow:0 20px 44px rgba(9,48,60,.14),inset 0 1px rgba(255,255,255,.7)!important}

html body .about-page .breed-band{position:relative!important;overflow:hidden!important;border-radius:34px!important;border:1px solid rgba(140,214,226,.26)!important;background:linear-gradient(135deg,#0c3b50,#12546b 52%,#0a3244)!important;background-image:linear-gradient(135deg,#0c3b50,#12546b 52%,#0a3244)!important;color:#fff!important;box-shadow:0 26px 70px rgba(6,32,42,.28)!important;clip-path:none!important}
html body .about-page .breed-band .breed-band-copy{position:relative!important;z-index:2!important;color:#fff!important}
html body .about-page .breed-band .breed-band-copy h2,html body .about-page .breed-band .breed-band-copy .eyebrow{color:#fff!important}
html body .about-page .breed-band .breed-band-copy p{color:rgba(255,255,255,.78)!important}
html body .about-page .breed-band .breed-band-copy p.eyebrow{color:#ffd479!important}
html body #breedBandPhoto.breed-band-photo{position:relative!important;overflow:hidden!important;border-radius:26px!important;margin:clamp(14px,2vw,26px)!important;box-shadow:0 20px 46px rgba(3,22,30,.34),inset 0 0 0 1px rgba(255,255,255,.16)!important}

/* 4. Button press: no snap, the lift is kept and the press eases in and out. */
html body .primary-button,html body .glass-button{transition:transform .34s cubic-bezier(.16,1,.3,1),filter .26s ease,box-shadow .38s ease,background .4s ease,color .4s ease,border-color .4s ease!important}
html body .primary-button:active,html body .glass-button:active,html body .changelog-accept:active{transform:translateY(-2px) scale(.972)!important;scale:none!important;filter:brightness(.95)!important;transition:transform .19s cubic-bezier(.3,.9,.4,1),filter .19s ease!important}
html body .primary-button:hover,html body .glass-button:hover{transform:translateY(-4px) scale(1.02)!important}

/* ===== 0.9.33 layer =====
   ANTI-GLOW RULE (do not break): no radial-gradient, no unbounded box-shadow and no filter is
   allowed on any page container. Everything below paints ONLY inside bounded boxes that carry
   overflow:hidden, so no corner spill can ever appear again. .page-view keeps background-image:none. */
html body .page-view[data-page],
html[data-theme="dark"] body .page-view[data-page]{background-image:none!important}

/* 1. Intro: wave travel and background erase run at the SAME constant speed (linear), so the
   background can never fall behind and the wave never speeds up at the end. */
@keyframes b33Wave{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-248vh,0)}}
html body .boot-screen .boot-wave{top:97vh!important;height:126vh!important;animation:b33Wave 2.2s linear 3.3s forwards!important}
html body .boot-screen::before{animation:b30Erase .88s linear 3.36s forwards!important}
html body .boot-screen .boot-mark{animation:b30Erase .88s linear 3.36s forwards!important}
html body .boot-screen{transition:opacity .46s linear!important}

/* 2. About: real vertical breathing room between "Our mission" and the breed band. */
html body .about-page .story-section{margin-top:clamp(26px,4vw,52px)!important;margin-bottom:0!important}

/* 3. About: the breed band is a bounded, centered panel (not full-bleed) and its photo is
   vertically centered because stretch + equal margins keep the same gap top and bottom. */
html body .about-page .breed-band{width:min(1180px,100% - clamp(28px,5vw,64px))!important;max-width:min(1180px,100% - clamp(28px,5vw,64px))!important;margin:clamp(52px,8vw,104px) auto clamp(40px,6vw,84px)!important;min-height:0!important;align-items:stretch!important}
html body .about-page .breed-band .breed-band-photo,html body #breedBandPhoto.breed-band-photo{align-self:stretch!important;height:auto!important;min-height:min(58vh,470px)!important;margin:clamp(16px,2.2vw,30px)!important;background-position:center center!important;background-size:cover!important}
html body .about-page .breed-band .breed-band-copy{padding:clamp(30px,4.4vw,70px)!important;align-self:center!important}

/* 4. Page hero: content must never be clipped on narrow screens (the hero grows instead). */
@media(max-width:1024px){
  html body .page-hero,html body .about-page .page-hero{aspect-ratio:auto!important;height:auto!important;min-height:min(84svh,620px)!important}
  html body .page-hero-content{padding:calc(var(--header-h) + 62px) 0 clamp(38px,7vw,70px)!important}
  html body .about-page .breed-band .breed-band-photo,html body #breedBandPhoto.breed-band-photo{min-height:clamp(240px,54vw,360px)!important}
}

/* 5. News meta: same reading order as desktop, calmer sizes, pill always wraps its whole label. */
html body .news-age,html body .news-auto-status,html body .news-card-meta .news-age{font-size:10.5px!important;padding:3px 9px!important;line-height:1.2!important}
@media(max-width:820px){
  html body .news-card-meta{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:5px 8px!important;padding:0!important;margin:0 0 12px!important;align-items:center!important}
  html body .news-card-meta .news-card-tag{grid-area:1/1!important;justify-self:start!important;display:inline-flex!important;align-items:center!important;margin:0!important;padding:4px 9px!important;font-size:9px!important;letter-spacing:.07em!important;line-height:1.15!important;white-space:nowrap!important;border-radius:999px!important}
  html body .news-card-meta .news-age,html body .news-card-meta .news-auto-status{grid-area:1/2!important;justify-self:end!important;margin:0!important;padding:3px 8px!important;font-size:9px!important;line-height:1.15!important;white-space:nowrap!important}
  html body .news-card-meta time{grid-area:2/1!important;justify-self:start!important;margin:0!important;font-size:10.5px!important;white-space:nowrap!important}
  html body .news-card-meta .news-views{grid-area:2/2!important;justify-self:end!important;margin:0!important;font-size:10.5px!important;white-space:nowrap!important}
  html body .news-card-meta .news-views svg{width:13px!important;height:13px!important}
}

/* 6. Mobile menu: closing is literally the opening animation played backwards. */
/* 6. Mobile menu: closing is the opening animation played backwards. A separate keyframe name is
   required, because reusing b29MenuIn only flips direction and the browser never restarts it. */
@keyframes b33MenuOut{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:translate3d(0,-14px,0) scale(.985);filter:blur(10px)}}
html body .mobile-menu.is-closing{display:flex!important;visibility:visible!important;pointer-events:none!important;animation:b33MenuOut .34s cubic-bezier(.64,0,.78,1) both!important}

/* 7. Home: the photo stream heading gets air under the values section. */
@media(max-width:820px){
  html body .photo-stream-section{padding-top:clamp(58px,11vw,96px)!important;margin-top:clamp(46px,9vw,84px)!important}
}

/* 8. Values section spans the exact same width as the wave above it, so no corner notches. */
@media(max-width:1024px){
  html body .values-section{width:var(--vw,100%)!important;max-width:var(--vw,100%)!important;margin-left:calc(50% - var(--vw,100%)/2)!important;margin-right:0!important;border-radius:0!important;clip-path:none!important;overflow:visible!important}
}

/* 9. VK post modal is centered on phones and uses nearly the whole screen. */
@media(max-width:820px){
  html body .news-overlay{display:grid!important;place-items:center!important;align-items:center!important;justify-items:center!important;padding:10px!important}
  html body .news-modal{position:relative!important;inset:auto!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:calc(100svh - 20px)!important;margin:0!important;border-radius:22px!important;clip-path:inset(0 round 22px)!important}
  html body .news-modal-scroll{max-height:calc(100svh - 20px)!important;padding:18px!important}
  html body .news-modal-content{padding:16px!important;border-radius:22px!important}
}

/* ===== 0.9.34 layer ===== */
/* ANTI-GLOW: на .page-view[data-page] НИКОГДА не возвращать radial-gradient / свечение */
html body .page-view[data-page],html[data-theme="dark"] body .page-view[data-page]{background-image:none!important}

/* Интро: стирание фона и логотипа в АБСОЛЮТНЫХ единицах вьюпорта (vh), а не в % от бокса.
   Раньше .boot-mark был маленьким центрированным боксом, поэтому inset(... %) считался от его
   собственной высоты и логотип стирался в разы быстрее волны. */
@keyframes b34Erase{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100vh 0)}}
html body .boot-screen .boot-mark{position:fixed!important;inset:0!important;width:100%!important;height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:2!important;animation:b34Erase .88s linear 3.36s forwards!important}
html body .boot-screen .boot-mark>.boot-logo-phase-a,html body .boot-screen .boot-mark>.boot-logo-phase-b{position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important}
html body .boot-screen::before{position:fixed!important;inset:0!important;animation:b34Erase .88s linear 3.36s forwards!important}
html body .boot-screen .boot-wave{top:97vh!important;height:126vh!important;animation:b33Wave 2.2s linear 3.3s forwards!important}
html body .boot-screen{transition:opacity .46s linear!important}

/* ===== 0.9.35 layer ===== */
/* ANTI-GLOW: на .page-view[data-page] НИКОГДА не возвращать radial-gradient / свечение */
html body .page-view[data-page],html[data-theme="dark"] body .page-view[data-page]{background-image:none!important}

/* 1. ИНТРО: кромка стирания должна идти ниже САМОЙ НИЗКОЙ точки кромки волны.
   Замер: впадина волны на 15.7vh ниже гребня, а стирание шло всего на 2.3vh ниже гребня
   → по бокам возникала горизонтальная щель. Скорость и амплитуда волны не тронуты. */
html body .boot-screen::before{animation:b34Erase .88s linear 3.55s forwards!important}
html body .boot-screen .boot-mark{animation:b34Erase .88s linear 3.55s forwards!important}

/* 2. BREED-BAND: секция шире, контейнер фото по НАТУРАЛЬНЫМ пропорциям снимка.
   Корень бага: aspect-ratio:3/2 + min-height:470px давали ширину 676px при колонке 485px →
   фото вылезало за колонку, обрезалось и перекрывало текст. */
html body .about-page .breed-band{width:min(1400px,100% - clamp(20px,2.6vw,44px))!important;max-width:min(1400px,100% - clamp(20px,2.6vw,44px))!important;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)!important;gap:clamp(18px,2.4vw,40px)!important;align-items:center!important;padding:clamp(16px,2vw,28px)!important;min-height:0!important;margin:clamp(52px,8vw,104px) auto clamp(40px,6vw,84px)!important}
html body .about-page .breed-band .breed-band-photo,html body #breedBandPhoto.breed-band-photo{position:relative!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;aspect-ratio:var(--natural-ratio,1.4)!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;align-self:center!important;border-radius:26px!important;overflow:hidden!important}
html body .about-page .breed-band .breed-band-copy{padding:clamp(22px,2.8vw,52px)!important;align-self:center!important}
@media (max-width:900px){
html body .about-page .breed-band{grid-template-columns:minmax(0,1fr)!important;gap:clamp(14px,3.4vw,24px)!important}
html body .about-page .breed-band .breed-band-photo,html body #breedBandPhoto.breed-band-photo{min-height:0!important;aspect-ratio:var(--natural-ratio,1.4)!important}
}

/* 3. СТРЕЛКИ ГЕРОЯ: симметричные отступы + плавное появление/исчезновение.
   Корень: контейнер имел right:clamp(28px,4vw,70px) → правая кнопка уезжала влево (72px вместо 27px);
   в transition не было opacity → стрелка исчезала рывком. */
html body .hero .hero-switches,html body #hero .hero-switches{position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;z-index:7!important;pointer-events:none!important;overflow:visible!important}
@media (min-width:901px){
html body .hero .hero-switches{display:block!important}
html body .hero .hero-switches>button{position:absolute!important;top:50%!important;bottom:auto!important;margin:0!important;transform:translateY(-50%)!important;pointer-events:auto!important;transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1),background .3s ease,border-color .3s ease!important;will-change:opacity,transform!important}
html body .hero .hero-switches>#heroPrev{left:clamp(16px,2.2vw,38px)!important;right:auto!important}
html body .hero .hero-switches>#heroNext{right:clamp(16px,2.2vw,38px)!important;left:auto!important}
html body .hero .hero-switches>#heroPrev:hover{transform:translateY(-50%) translateX(-3px) scale(1.06)!important}
html body .hero .hero-switches>#heroNext:hover{transform:translateY(-50%) translateX(3px) scale(1.06)!important}
html body .hero .hero-switches>button.is-edge-hidden{opacity:0!important;transform:translateY(-50%) scale(.82)!important;pointer-events:none!important}
}
@media (max-width:900px){
html body .hero .hero-switches{display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:18px!important;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important}
html body .hero .hero-switches>button{position:static!important;inset:auto!important;margin:0!important;transform:none!important;pointer-events:auto!important;transition:opacity .42s ease,transform .42s cubic-bezier(.22,1,.36,1),background .3s ease!important}
html body .hero .hero-switches>button.is-edge-hidden{opacity:0!important;transform:scale(.82)!important;pointer-events:none!important}
}
/* 0.9.35 addendum: одинаковый размер кнопок — иначе отступы слева/справа расходятся на 4-5px */
html body .hero .hero-switches>button,html body .hero .hero-switches>#heroPrev,html body .hero .hero-switches>#heroNext{box-sizing:border-box!important;width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;max-width:52px!important;max-height:52px!important;padding:0!important;font-size:19px!important;line-height:1!important;border-radius:50%!important;display:grid!important;place-items:center!important}
@media (max-width:900px){
html body .hero .hero-switches>button,html body .hero .hero-switches>#heroPrev,html body .hero .hero-switches>#heroNext{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;max-width:46px!important;max-height:46px!important;font-size:17px!important}
}

/* ===== 0.9.36 layer ===== */
/* ANTI-GLOW: на .page-view[data-page] НИКОГДА не возвращать radial-gradient / свечение */
html body .page-view[data-page],html[data-theme="dark"] body .page-view[data-page]{background-image:none!important}

/* 1. FCI-НОТА. Корень: .image-frame{position:absolute;inset:0} занимает весь .intro-visual,
   а слой 0.9.27 сделал .floating-note статичной -> она встала в поток ВЫШЕ фото и накрыла его. */
@media (max-width:900px){
html body .intro-section .intro-visual{position:relative!important;display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;gap:14px!important}
html body .intro-section .intro-visual>#introImage.image-frame,html body .intro-section .intro-visual>.image-frame{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;order:1!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important}
html body .intro-section .intro-visual>.floating-note{position:absolute!important;order:initial!important;inset:auto!important;left:14px!important;right:14px!important;bottom:14px!important;top:auto!important;width:auto!important;max-width:none!important;margin:0!important;padding:13px 16px!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:4px 12px!important;border-radius:16px!important;z-index:3!important;background:rgba(8,28,34,.6)!important;-webkit-backdrop-filter:blur(16px) saturate(140%)!important;backdrop-filter:blur(16px) saturate(140%)!important;border:1px solid rgba(255,255,255,.26)!important}
html body .intro-section .intro-visual>.floating-note strong{grid-row:1!important;grid-column:1!important;font-size:18px!important;line-height:1.1!important;color:#ffd77a!important}
html body .intro-section .intro-visual>.floating-note span{grid-row:1!important;grid-column:2!important;font-size:12px!important;line-height:1.3!important;color:#fff8ed!important}
}

/* 2. СТРЕЛКИ НА ТЕЛЕФОНАХ: слой 0.9.35 собрал их flex-ом у нижней кромки - ровно поверх "Листайте".
   Разносим по краям и центрируем по вертикали, как на ПК. */
@media (max-width:900px){
html body .hero .hero-switches,html body #hero .hero-switches{display:block!important;align-items:initial!important;justify-content:initial!important;gap:0!important;padding-bottom:0!important}
html body .hero .hero-switches>button{position:absolute!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;margin:0!important;pointer-events:auto!important}
html body .hero .hero-switches>#heroPrev{left:clamp(10px,3.2vw,20px)!important;right:auto!important}
html body .hero .hero-switches>#heroNext{right:clamp(10px,3.2vw,20px)!important;left:auto!important}
html body .hero .hero-switches>button.is-edge-hidden{opacity:0!important;transform:translateY(-50%) scale(.82)!important;pointer-events:none!important}
html body .hero .scroll-cue{z-index:8!important}
}

/* 3. ВОЛНА ИНТРО: вырез справа. Корень: left:-6vw + width:112vw, а 1vw НЕ включает полосу
   прокрутки -> при видимом скроллбаре правый край не доезжает до кромки экрана. */
html body .boot-screen .boot-wave{left:-8vw!important;right:auto!important;width:calc(var(--vw,100vw) + 16vw)!important;min-width:calc(100% + 16vw)!important;max-width:none!important}
html body .boot-screen .boot-wave>svg{width:100%!important;height:100%!important;display:block!important}

/* 4. ОТКРЫТЫЕ КАРТОЧКИ (собаки / помёты / щенки): фото на всю ширину в самом верху, без квадрата,
   со скругленными верхними углами под скругление панели. Корень: interface.css:1818 давал
   .entity-modal-content padding:18px -> фото сжималось внутрь полей, а aspect-ratio:4/3 делал квадрат. */

/* v0.9.37: сетка из 3 фото в VK-постах выглядела буквой «Г»; показываем 2 фото + плашку «+N». */
html body .news-media-item.has-more-overlay{position:relative!important}
html body .news-media-item.has-more-overlay::after{content:attr(data-more-label)!important;position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;justify-content:center!important;background:rgba(4,22,30,.56)!important;color:#fff!important;font-weight:700!important;font-size:15px!important;border-radius:inherit!important;text-align:center!important;padding:8px!important}
html body .news-media-item.has-more-overlay img{filter:brightness(.7)!important}
/* v0.9.37: критичный откат: эти правила были без скобки медиа-запроса и ломали
   верстку/скролл карточек на ПК. Фикс был нужен только на телефонах. */
@media (max-width:900px){
html body .entity-overlay .entity-modal-content{padding:0!important;border-radius:22px!important;overflow:hidden!important;background:var(--surface-solid)!important}
html body .entity-overlay .entity-modal-hero{position:relative!important;width:100%!important;margin:0!important;border-radius:22px 22px 0 0!important;overflow:hidden!important;aspect-ratio:4/3!important;height:auto!important;min-height:0!important;max-height:none!important}
html body .entity-overlay .entity-modal-hero>img,html body .entity-overlay #entityHeroImage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;border-radius:inherit!important;display:block!important}
html body .entity-overlay .entity-modal-hero .entity-modal-title{position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:3!important;padding:clamp(16px,3vw,28px)!important;background:linear-gradient(180deg,transparent,rgba(4,22,30,.72) 62%)!important;color:#fff!important}
html body .entity-overlay .entity-modal-body{padding:16px!important}
}

/* 5. ХИНТ "Нажмите на карточку" стоял вплотную к первой карточке. */
html body .dogs-page .section-heading,html body .litters-page .section-heading,html body .puppies-page .section-heading{margin-bottom:clamp(26px,4.4vw,52px)!important}
html body .dogs-page .section-heading p:last-child,html body .litters-page .section-heading p:last-child,html body .puppies-page .section-heading p:last-child{margin-bottom:0!important}
html body .dogs-page .dog-grid,html body .dogs-page .entity-grid,html body .litters-page .entity-grid,html body .puppies-page .entity-grid{margin-top:clamp(18px,3vw,34px)!important}

/* 6. БУРГЕР: обратная анимация СОДЕРЖИМОГО (раньше анимировалась только сама панель,
   а кнопки исчезали рывком) + закрытие щелей снизу: 100vh на мобильном Firefox короче
   реального вьюпорта при скрывающейся адресной строке -> используем 100dvh и фон на html. */
@keyframes b36MenuItemOut{from{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}to{opacity:0;transform:translateY(14px) scale(.965);filter:blur(5px)}}
@keyframes b36MenuItemIn{from{opacity:0;transform:translateY(20px) scale(.97);filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
html body .mobile-menu{min-height:100dvh!important;height:100dvh!important;bottom:0!important;padding-bottom:calc(34px + env(safe-area-inset-bottom,0px))!important;background-attachment:local!important}
html body .mobile-menu.is-open>*:not(.mobile-menu-wave){animation:b36MenuItemIn .42s cubic-bezier(.22,1,.36,1) both!important}
html body .mobile-menu.is-open>*:nth-child(2){animation-delay:.04s!important}
html body .mobile-menu.is-open>*:nth-child(3){animation-delay:.08s!important}
html body .mobile-menu.is-open>*:nth-child(4){animation-delay:.12s!important}
html body .mobile-menu.is-open>*:nth-child(5){animation-delay:.16s!important}
html body .mobile-menu.is-open>*:nth-child(6){animation-delay:.2s!important}
html body .mobile-menu.is-open>*:nth-child(7){animation-delay:.24s!important}
html body .mobile-menu.is-closing>*:not(.mobile-menu-wave){animation:b36MenuItemOut .3s cubic-bezier(.5,0,.78,.16) both!important}
html body .mobile-menu.is-closing>*:nth-last-child(2){animation-delay:.03s!important}
html body .mobile-menu.is-closing>*:nth-last-child(3){animation-delay:.06s!important}
html body .mobile-menu.is-closing>*:nth-last-child(4){animation-delay:.09s!important}

/* 7. КОНТАКТЫ: телефонная плашка висела вплотную к правому краю и выбивалась из ритма социалок. */
@media (max-width:900px){
html body .contacts-page .contact-row,html body .contacts-page .social-card{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:14px!important;padding:14px 16px!important;min-height:64px!important;border-radius:20px!important}
html body .contacts-page .contact-row>b,html body .contacts-page .social-card>b{justify-self:end!important;margin:0!important;opacity:.55!important;font-size:15px!important}
html body .contacts-page .phone-row>div,html body .contacts-page .social-card>strong{min-width:0!important;overflow-wrap:anywhere!important}
html body .contacts-page .social-card{grid-template-areas:"icon title arrow" "icon sub arrow"!important;grid-template-columns:auto minmax(0,1fr) auto!important;row-gap:2px!important}
html body .contacts-page .social-card>.social-icon{grid-area:icon!important}
html body .contacts-page .social-card>strong{grid-area:title!important;font-size:15.5px!important}
html body .contacts-page .social-card>small{grid-area:sub!important;font-size:12.5px!important}
html body .contacts-page .social-card>b{grid-area:arrow!important}
}

/* 8. КОНФЕТТИ + ПАНЕЛЬ ОБНОВЛЕНИЯ. Корень: canvas лежал ВНУТРИ overlay-сетки и получал
   её padding/стекинг, а модалка закрывала почти всю высоту -> конфетти было не видно. */
/* v0.9.37: конфетти перекрывало модалку, потому что позиционированный элемент с z-index всегда выше
   соседа с z-index:auto независимо от порядка в DOM — даём модалке свой стек выше канваса.
   Размер модалки уменьшался только на телефонах (как просили), на ПК возвращён исходный размер. */
html body .changelog-canvas{position:fixed!important;inset:0!important;left:0!important;top:0!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;z-index:1!important;pointer-events:none!important;display:block!important}
html body .changelog-overlay{z-index:10020!important;padding:clamp(14px,3vw,28px)!important;place-items:center!important}
html body .changelog-modal{position:relative!important;z-index:2!important;margin:0 auto!important}
@media (max-width:760px){
html body .changelog-overlay{padding:14px!important}
html body .changelog-modal{max-width:calc(100vw - 28px)!important;max-height:76dvh!important;border-radius:22px!important}
html body .changelog-scroll{max-height:calc(76dvh - 8px)!important;padding:22px 18px!important}
}

/* 9. ЯЗЫКОВАЯ ПАНЕЛЬ. Корень отсутствия блюра: предок .site-header сам имеет backdrop-filter,
   а вложенный backdrop-filter берёт уже отфильтрованный слой родителя (backdrop root),
   поэтому эффекта не видно. Лечение: JS выносит панель в body (класс lang-portal) и она
   становится position:fixed вне любых фильтрующих предков. */
html body .language-panel-portal{position:fixed!important;z-index:10060!important;display:grid!important;gap:5px!important;padding:7px!important;margin:0!important;justify-items:stretch!important;border-radius:16px!important;background:color-mix(in srgb,var(--surface-solid) 46%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(170%)!important;backdrop-filter:blur(30px) saturate(170%)!important;border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important;box-shadow:0 24px 56px rgba(5,25,35,.26),inset 0 1px 0 rgba(255,255,255,.24)!important;filter:none!important;isolation:isolate!important;transform-origin:top right!important;animation:b36LangIn .26s cubic-bezier(.22,1,.36,1) both!important}
html body .language-panel-portal.is-closing{animation:b36LangOut .2s cubic-bezier(.4,0,1,1) both!important;pointer-events:none!important}
@keyframes b36LangIn{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes b36LangOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.96)}}
html body .language-panel-portal button{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;width:100%!important;min-width:118px!important;height:38px!important;padding:0 12px!important;margin:0!important;border:0!important;border-radius:11px!important;background:transparent!important;color:var(--text)!important;font-weight:800!important;font-size:13px!important;text-align:left!important;cursor:pointer!important;transition:background .22s ease!important}
html body .language-panel-portal button:hover,html body .language-panel-portal button.is-active{background:color-mix(in srgb,var(--surface-solid) 74%,transparent)!important}
html body .language-panel-portal button>span:first-child{flex:0 0 auto!important;font-size:16px!important;line-height:1!important}

/* 10. СКРИНШОТЫ И ВЫДЕЛЕНИЕ. Корень проблемы на телефонах: body{user-select:none} +
   -webkit-touch-callout:none + touch-action:none на панели блокировали штатные жесты браузера.
   Защита текста ВК остаётся, всё остальное снова доступно. */
@media (pointer:coarse){
html body{-webkit-user-select:auto!important;-moz-user-select:auto!important;user-select:auto!important;-webkit-touch-callout:default!important}
html body .mobile-menu{touch-action:pan-y!important}
html body .news-modal-scroll,html body .news-modal-text,html body .news-card-text,html body .news-modal-body,html body .entity-story{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
}

/* 11. ПРОИЗВОДИТЕЛЬНОСТЬ НА ТЕЛЕФОНАХ. Корень лага при открытии бургера: панель с backdrop-filter
   blur(28px) поверх живой страницы заставляет пересчитывать размытие каждый кадр.
   Эффекты НЕ убираю: добавлен contain + фиксация слоя, а подложка страницы при открытом меню
   выключается из отрисовки - блюрить становится нечего. */
@media (max-width:900px){
html body .mobile-menu{contain:layout paint style!important;will-change:opacity,transform!important;transform:translateZ(0)!important}
html body .mobile-menu-wave{will-change:transform!important}
html body:has(.mobile-menu.is-open) #app{content-visibility:hidden!important;contain-intrinsic-size:1px 5000px!important}
html body .hero-media,html body .hero-slide{will-change:opacity!important}
html body .ambient,html body .ambient-orb,html body .ambient-ripples{will-change:transform!important}
}

/* 12. БЛЮР КНОПКИ "Наша история". Корень: у .glass-button backdrop-filter, а родительский
   .hero-content анимируется по opacity/transform при входе. Пока у предка opacity<1 он создаёт
   групповой слой, backdrop-корнем становится эта группа и размывать нечего - блюр "включается"
   только после конца анимации. Лечение: стекло рисует собственный ::after с backdrop-filter,
   который живёт в своём слое и не зависит от opacity родителя. */
html body .hero-actions .glass-button{position:relative!important;isolation:isolate!important;background:rgba(255,255,255,.12)!important}
html body .hero-actions .glass-button::after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;border-radius:inherit!important;-webkit-backdrop-filter:blur(18px) saturate(145%)!important;backdrop-filter:blur(18px) saturate(145%)!important;pointer-events:none!important}
html body .hero-content{will-change:auto!important}

/* 13. ПОМЕТКА РЕПОСТА в карточке ВК (теперь репосты тоже показываются) */
html body .news-repost-tag{display:inline-flex!important;align-items:center!important;gap:5px!important;padding:3px 9px!important;border-radius:999px!important;font-size:11px!important;font-weight:800!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:#0d4552!important;background:linear-gradient(135deg,color-mix(in srgb,var(--sea-sky) 62%,transparent),color-mix(in srgb,var(--sun-amber) 58%,transparent))!important;border:1px solid color-mix(in srgb,var(--sea-lagoon) 34%,transparent)!important;white-space:nowrap!important;flex:0 0 auto!important}
html body .news-repost-tag svg{width:12px!important;height:12px!important;fill:currentColor!important;flex:0 0 auto!important}
html[data-theme="dark"] body .news-repost-tag{color:#eaf9ff!important;background:linear-gradient(135deg,rgba(63,192,201,.34),rgba(247,169,75,.28))!important}
@media (max-width:760px){
html body .news-card-meta{flex-wrap:wrap!important;row-gap:6px!important}
html body .news-repost-tag{font-size:10px!important;padding:2px 8px!important}
}

/* v0.9.38: финальный, самый приоритетный слой правок (всегда побеждает по каскаду) */

/* 1) Кнопка «Смотреть полностью» — оставлена, но сделана явно заметной на тёмной карточке новости */
html body .news-card .news-card-open,html body .news-card-open{display:inline-flex!important;align-items:center!important;gap:6px!important;background:linear-gradient(135deg,#ffd58a,#f2ba62)!important;color:#2a1a04!important;font-weight:800!important;border:none!important;border-radius:999px!important;padding:9px 18px!important;box-shadow:0 10px 26px rgba(242,186,98,.45)!important;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,filter .3s ease!important}
html body .news-card .news-card-open:hover{transform:translateY(-2px)!important;filter:brightness(1.06)!important;box-shadow:0 14px 32px rgba(242,186,98,.55)!important}
html body .news-card .news-card-open:active{transform:translateY(0) scale(.96)!important}
html body .news-card .news-open-hint{color:#ffe3ad!important;margin:10px 0 16px!important;display:block!important}

/* 2) Стрелки hero-слайдера на мобильных — ближе к топ-бару, не наезжая на него */
@media (max-width:760px){
html body .hero .hero-switches>button,html body #hero .hero-switches>button{top:calc(env(safe-area-inset-top,0px) + 84px)!important;bottom:auto!important;transform:none!important}
html body .hero .hero-switches>#heroPrev:hover{transform:translateX(-3px) scale(1.06)!important}
html body .hero .hero-switches>#heroNext:hover{transform:translateX(3px) scale(1.06)!important}
html body .hero .hero-switches>button:active{transform:scale(.92)!important}
}

/* 3) Мобильное меню: докатываем стаггер-анимацию до 7-го пункта «Контакты» (раньше он не входил в список задержек) */
html body .mobile-menu.is-open>*:nth-child(7){animation-delay:.24s!important}
html body .mobile-menu.is-open>*:nth-child(8){animation-delay:.28s!important}
html body .mobile-menu.is-closing>*:nth-last-child(5){animation-delay:.12s!important}
html body .mobile-menu.is-closing>*:nth-last-child(6){animation-delay:.15s!important}
html body .mobile-menu.is-closing>*:nth-last-child(7){animation-delay:.18s!important}

/* 4) Плавное, менее резкое нажатие на nav-link и кнопки */
html body .nav-link,html body .primary-button,html body .glass-button{transition:transform .34s cubic-bezier(.22,1,.36,1),background .35s ease,box-shadow .35s ease,color .25s ease,scale .32s cubic-bezier(.22,1,.36,1)!important}
html body .nav-link:active,html body .primary-button:active,html body .glass-button:active{scale:.96!important}

/* 5) Пресс-анимация карточек (собаки/помёты/щенки) при нажатии, без конфликта с 3D card-tilt */
html body .entity-card,html body .dog-card{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease!important}
html body .entity-card:active,html body .dog-card:active{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.97) translate3d(0,var(--lift,0px),0)!important;transition:transform .16s cubic-bezier(.4,0,.6,1)!important}

/* 6) Единая, предсказуемая анимация открытия модалок сущностей (карточки помётов/щенков) — гасим более старые конкурирующие варианты */
html body .entity-overlay.is-open .entity-modal-content{animation:none!important;opacity:0;transform:scale(.975);filter:blur(14px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .56s cubic-bezier(.16,1,.3,1),filter .58s cubic-bezier(.16,1,.3,1)!important}
html body .entity-overlay.show-content .entity-modal-content{opacity:1!important;transform:scale(1)!important;filter:blur(0)!important}

/* 7) Карточка «Свяжитесь с нами»: плавный, умеренный подъём и явная цветная тень при наведении; подвал сайта остаётся неподвижным */
html body .site-footer{transform:none!important;translate:none!important}
html body .contact-invite,html body .contact-invite.card-tilt{transition:transform .48s cubic-bezier(.22,1,.36,1),box-shadow .48s cubic-bezier(.22,1,.36,1)!important}
html body .contact-invite:hover,html body .contact-invite.card-tilt:hover{--lift:-8px!important;transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-8px,0)!important;box-shadow:0 30px 70px rgba(233,140,42,.4),0 0 0 1px rgba(255,255,255,.3)!important}

/* ===== v0.9.39: bugfix consolidation layer (highest-specificity, appended last, always wins) ===== */

/* -- News card: fix variable gap between text/hint and button (root cause: margin-top:auto on a
   flex column whose row gets stretched by grid align-items:stretch), make hint/button full width
   on desktop like mobile, and show noticeably more preview text. -- */
html body .news-grid{align-items:start!important}
html body .news-card-text{-webkit-line-clamp:9!important;max-height:none!important}
html body .news-card-open{margin-top:14px!important;width:100%!important;box-sizing:border-box!important;justify-content:center!important;gap:8px!important}
html body .news-card.has-no-text .news-card-open{margin-top:2px!important}
html body .news-open-hint{width:100%!important;box-sizing:border-box!important;display:block!important;margin:10px 0 12px!important}
@media(max-width:760px){html body .news-open-hint{font-size:11px!important;margin:6px 0 8px!important}}

/* -- FCI No.336 floating note: the mobile treatment (absolute, blurred, overlaid on the photo)
   was only ever scoped inside mobile media queries. Make it unconditional so desktop gets the
   exact same look. -- */
html body .intro-visual .floating-note,html body .intro-section .intro-visual>.floating-note{position:absolute!important;order:initial!important;inset:auto!important;left:16px!important;right:16px!important;bottom:16px!important;top:auto!important;width:auto!important;max-width:none!important;margin:0!important;padding:14px 18px!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:4px 14px!important;border-radius:18px!important;z-index:3!important;background:rgba(8,28,34,.55)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 18px 40px rgba(6,26,32,.35)!important}
html body .intro-visual .floating-note strong,html body .intro-section .intro-visual>.floating-note strong{grid-row:1!important;grid-column:1!important;color:#ffd77a!important;font-size:20px!important;line-height:1.1!important}
html body .intro-visual .floating-note span,html body .intro-section .intro-visual>.floating-note span{grid-row:1!important;grid-column:2!important;color:#fff8ed!important;font-size:12.5px!important;line-height:1.35!important}

/* -- Open dog card: remove the stray partial-width shadow and inconsistent corner rounding on
   the hero photo/background of the fully opened card. -- */
html body .detail-hero{border-radius:0!important;box-shadow:none!important;width:100%!important}
html body .detail-hero>img{border-radius:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
html body .detail-hero-shade{inset:0!important;width:100%!important;height:100%!important;border-radius:0!important}
html body .detail-shell{border-radius:0!important;box-shadow:none!important}
html body .detail-content{box-shadow:none!important}

/* -- Contacts page: give the whole container an entrance animation, not just its children. -- */
@keyframes contactsPageIn{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
html body .contacts-page.is-active{animation:contactsPageIn .6s cubic-bezier(.16,1,.3,1) both}

/* -- entity-cinema (dog/litter/puppy card opening): dozens of conflicting layers accumulated over
   past releases, some of which set the header to opacity:0 (making it vanish) instead of blurring
   it together with the rest of the page. This is the single authoritative rule (highest
   specificity, last in cascade) so the header/footer/app always blur and fade together, never
   disappear outright. -- */
html body.entity-cinema .site-header{opacity:.3!important;filter:blur(17px) saturate(.92)!important;transform:none!important;scale:none!important;transition:opacity .6s cubic-bezier(.4,0,.2,1),filter .6s cubic-bezier(.4,0,.2,1)!important;pointer-events:none!important}
html body.entity-cinema .site-footer,html body.entity-cinema .mobile-menu{opacity:.26!important;filter:blur(17px) saturate(.92)!important;transform:none!important;scale:none!important;transition:opacity .6s cubic-bezier(.4,0,.2,1),filter .6s cubic-bezier(.4,0,.2,1)!important;pointer-events:none!important}
html body.entity-cinema #app{opacity:.4!important;filter:blur(17px) saturate(1.05)!important;transform:none!important;scale:none!important;transition:opacity .6s cubic-bezier(.4,0,.2,1),filter .6s cubic-bezier(.4,0,.2,1)!important}

/* -- Dog card press feedback: replace the abrupt "snap small" with the same bounce the entity
   cards already use, clearly distinct from the .is-opening morph transition. -- */
html body .dog-card:active{animation:cardBounce .42s cubic-bezier(.34,1.56,.64,1)!important;transform:none!important;transition:none!important}

/* -- Dogs use body.is-modal-open (not entity-cinema) for the detail-overlay. That legacy rule in
   styles.css had NO transition at all on filter/transform, so the background snapped instantly
   with no blur animation. Give it the exact same smooth, synchronized blur treatment as the
   entity-cinema path above, so dogs/litters/puppies all animate identically and the header never
   just disappears. -- */
html body.is-modal-open .site-header{opacity:.3!important;filter:blur(17px) saturate(.92)!important;transform:none!important;scale:none!important;transition:opacity .6s cubic-bezier(.4,0,.2,1),filter .6s cubic-bezier(.4,0,.2,1)!important;pointer-events:none!important}
html body.is-modal-open .site-footer,html body.is-modal-open .mobile-menu{opacity:.26!important;filter:blur(17px) saturate(.92)!important;transform:none!important;scale:none!important;transition:opacity .6s cubic-bezier(.4,0,.2,1),filter .6s cubic-bezier(.4,0,.2,1)!important;pointer-events:none!important}
html body.is-modal-open #app{opacity:.4!important;filter:blur(17px) saturate(1.05)!important;transform:none!important;scale:none!important;transition:opacity .6s cubic-bezier(.4,0,.2,1),filter .6s cubic-bezier(.4,0,.2,1)!important}


/* =========================================================================
   v0.9.40 — bugfix layer. Appended last on purpose: these rules are the final
   word for the issues below.
   ========================================================================= */

/* 1. FCI note: the desktop layout is now literally the mobile layout. The image
      frame becomes a normal flow block and the note is an absolute glass panel
      pinned to the bottom of the photo on every width. */
html body .intro-section .intro-visual{position:relative!important;display:flex!important;flex-direction:column!important;min-height:0!important;height:auto!important;gap:14px!important}
html body .intro-section .intro-visual>#introImage.image-frame,html body .intro-section .intro-visual>.image-frame{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;order:1!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;overflow:hidden!important}
html body .intro-section .intro-visual>.image-frame>img{display:block!important;width:100%!important;height:auto!important;object-fit:cover!important}
html body .intro-visual .floating-note,html body .intro-section .intro-visual>.floating-note{position:absolute!important;order:initial!important;inset:auto!important;left:16px!important;right:16px!important;bottom:16px!important;top:auto!important;width:auto!important;max-width:none!important;margin:0!important;padding:14px 18px!important;display:grid!important;grid-template-columns:auto 1fr!important;align-items:center!important;gap:4px 14px!important;border-radius:18px!important;z-index:3!important;background:rgba(8,28,34,.55)!important;-webkit-backdrop-filter:blur(18px) saturate(140%)!important;backdrop-filter:blur(18px) saturate(140%)!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:0 18px 40px rgba(6,26,32,.35)!important}

/* 2. Reveal on scroll: a slightly longer, softer curve so the motion is visible
      on phones instead of snapping in. */
html body .reveal-on-scroll{transition:opacity .82s ease,transform .82s cubic-bezier(.16,1,.3,1)!important}
@media (max-width:760px){html body .reveal-on-scroll{transform:translateY(26px)}html body .reveal-on-scroll.is-visible{transform:none!important}}

/* 3-4. News mini-card footer: symmetric margins guarantee it is centred and can
        never stick out of the card, on desktop or on a phone. */
html body .news-card .news-open-hint,html body .news-open-hint{width:auto!important;max-width:none!important;margin:12px 20px 6px!important;padding:0!important;box-sizing:border-box!important;display:block!important;text-align:center!important;font-size:11.5px!important;line-height:1.4!important}
html body .news-card .news-card-open,html body .news-card-open{display:flex!important;width:auto!important;max-width:none!important;margin:0 20px 20px!important;justify-content:center!important;align-items:center!important;text-align:center!important;box-sizing:border-box!important;padding:9px 18px!important;font-size:13px!important}
html body .news-card.has-no-text .news-card-open{margin-top:4px!important}
@media (max-width:760px){
  html body .news-card .news-open-hint,html body .news-open-hint{margin:9px 16px 5px!important;font-size:10.5px!important}
  html body .news-card .news-card-open,html body .news-card-open{margin:0 16px 16px!important;padding:8px 15px!important;font-size:12.5px!important}
}

/* 5. Intro wave keeps its proportions on narrow screens (no more stretched blob). */
@media (max-width:760px){html body .boot-wave{left:-80vw!important;width:260vw!important}}
@media (max-width:480px){html body .boot-wave{left:-110vw!important;width:320vw!important}}

/* 6. Open cards must scroll on touch devices. */
html body .detail-shell,html body .entity-overlay,html body .news-modal-scroll,html body .changelog-scroll,html body .mobile-menu,html body .detail-content{touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
html body .detail-shell,html body .entity-overlay{overflow-y:auto!important;overflow-x:hidden!important}
html body .detail-overlay.is-open,html body .entity-overlay.is-open{touch-action:pan-y!important}

/* 7. Hero shade: full-bleed, single vertical gradient. The old horizontal layer is
      what produced those dark strips at the left and right edges on phones. */
html body .detail-hero{position:relative!important;width:100%!important;max-width:100%!important;margin:0!important;left:0!important;right:0!important;overflow:hidden!important;border-radius:0!important;box-shadow:none!important}
html body .detail-hero>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important}
html body .detail-hero-shade{position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:auto!important;height:auto!important;transform:none!important;border-radius:0!important;background:linear-gradient(0deg,rgba(4,26,35,.74),rgba(4,26,35,.18) 46%,transparent 72%)!important}

/* 8. Press feedback + one authoritative cinema state for every overlay. */
html body .dog-card,html body .entity-card,html body .news-card{transition:transform .34s cubic-bezier(.22,1,.36,1),box-shadow .34s ease,opacity .34s ease,filter .34s ease!important}
html body .dog-card:active,html body .entity-card:active,html body .news-card:active,html body .dog-card.is-pressed,html body .entity-card.is-pressed,html body .news-card.is-pressed{transform:none!important;animation:none!important;scale:none!important;transition:none!important}
html body .dog-card.is-opening,html body .entity-card.is-opening{transform:perspective(1100px) scale(.985)!important;opacity:.2!important;filter:blur(3px)!important;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .42s ease,filter .42s ease!important}

html.is-cinema body #app,html.is-cinema body .site-header,html.is-cinema body .site-footer,html.is-cinema body .mobile-menu{filter:blur(17px) saturate(.95)!important;opacity:.42!important;transform:none!important;scale:none!important;visibility:visible!important;pointer-events:none!important;transition:filter .62s cubic-bezier(.22,1,.36,1),opacity .62s cubic-bezier(.22,1,.36,1)!important;transition-delay:0s!important;will-change:filter,opacity}
html.is-cinema body .site-header,html.is-cinema body .site-footer,html.is-cinema body .mobile-menu{pointer-events:none!important}
html:not(.is-cinema) body:not(.is-routing) #app{filter:none!important;transition:filter .3s ease-out,opacity .3s ease-out!important}
html:not(.is-cinema) body .site-header,html:not(.is-cinema) body .site-footer{filter:none!important;opacity:1!important;visibility:visible!important;transition:filter .5s cubic-bezier(.22,1,.36,1),opacity .5s cubic-bezier(.22,1,.36,1)!important}


/* ============================ v0.9.41 ==================================== */

/* Year in the "about" story column: bigger and with air between the digits. */
html body .story-aside>span,html body .about-page .story-aside>span{font-size:clamp(64px,15vw,112px)!important;line-height:1!important;letter-spacing:.02em!important;display:block!important;margin-bottom:10px!important;font-weight:850!important}
@media (max-width:760px){html body .story-aside>span,html body .about-page .story-aside>span{font-size:clamp(58px,17vw,86px)!important;letter-spacing:.03em!important}}

/* Hint + button sit lower in the news mini-card, and the hint stays close to the button. */
html body .news-card .news-open-hint,html body .news-open-hint{margin:28px 20px 7px!important}
html body .news-card .news-card-open,html body .news-card-open{margin:0 20px 22px!important}
@media (max-width:760px){
  html body .news-card .news-open-hint,html body .news-open-hint{margin:22px 16px 6px!important}
  html body .news-card .news-card-open,html body .news-card-open{margin:0 16px 18px!important}
}

/* No press effect on openable cards at all. */
html body .dog-card:active,html body .entity-card:active,html body .news-card:active{transform:none!important;filter:none!important;opacity:1!important;animation:none!important}

/* Page transition must stay animatable: nothing here may pin #app or .page-view. */
html body.is-routing #app{filter:none!important}
html body .page-transition{visibility:visible}


/* ============================ v0.9.42 ==================================== */

/* Year: keep the big size, put the letter spacing back close to the original design. */
html body .story-aside>span,html body .about-page .story-aside>span{letter-spacing:-.045em!important}
@media (max-width:760px){html body .story-aside>span,html body .about-page .story-aside>span{letter-spacing:-.05em!important}}

/* Hint + button really at the bottom of the card: the auto top margin on the hint
   pushes the pair down, and the hint sits right above the button. */
html body .news-card[data-news-id]{display:flex!important;flex-direction:column!important}
html body .news-card .news-open-hint,html body .news-open-hint{margin:38px 20px 6px!important}
html body .news-card .news-card-open,html body .news-card-open{margin:0 20px 18px!important}
html body .news-card.has-no-text .news-card-open{margin-top:26px!important}
@media (max-width:760px){
  html body .news-card .news-open-hint,html body .news-open-hint{margin:30px 16px 5px!important}
  html body .news-card .news-card-open,html body .news-card-open{margin:0 16px 15px!important}
  html body .news-card.has-no-text .news-card-open{margin-top:20px!important}
}

/* Nothing behind the blur may react to the pointer while a card is open. */
html.is-cinema body #app,html.is-cinema body #app *{pointer-events:none!important}
html.is-cinema body .detail-overlay,html.is-cinema body .detail-overlay *,html.is-cinema body .entity-overlay,html.is-cinema body .entity-overlay *,html.is-cinema body .news-overlay,html.is-cinema body .news-overlay *,html.is-cinema body .lightbox,html.is-cinema body .lightbox *,html.is-cinema body .changelog-overlay,html.is-cinema body .changelog-overlay *{pointer-events:auto!important}

/* No press/hover push on openable cards, in any state. */
html body .dog-card:active,html body .entity-card:active,html body .news-card:active{transform:none!important;scale:none!important;animation:none!important}


/* ============================ v0.9.43 ==================================== */

/* The custom glass rails are page-level elements, so they used to hang over an open
   card as a frozen strip. They are parked while any card is open. */
html body .stream-glass-scrollbar.is-hidden-by-cinema,
html body .firefox-scrollbar.is-hidden-by-cinema{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .22s ease!important}
html.is-cinema body .stream-glass-scrollbar,
html.is-cinema body .firefox-scrollbar{opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* The open card gets its own glass scrollbar instead of the raw system one. */
html body .detail-shell,html body .detail-content,html body .entity-overlay,html body .news-modal-scroll,html body .changelog-scroll{scrollbar-width:thin!important;scrollbar-color:rgba(157,227,242,.55) transparent!important}
html body .detail-shell::-webkit-scrollbar,html body .detail-content::-webkit-scrollbar,html body .entity-overlay::-webkit-scrollbar,html body .news-modal-scroll::-webkit-scrollbar,html body .changelog-scroll::-webkit-scrollbar{width:10px!important;background:transparent!important}
html body .detail-shell::-webkit-scrollbar-track,html body .detail-content::-webkit-scrollbar-track,html body .entity-overlay::-webkit-scrollbar-track,html body .news-modal-scroll::-webkit-scrollbar-track,html body .changelog-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05)!important;border-radius:999px!important}
html body .detail-shell::-webkit-scrollbar-thumb,html body .detail-content::-webkit-scrollbar-thumb,html body .entity-overlay::-webkit-scrollbar-thumb,html body .news-modal-scroll::-webkit-scrollbar-thumb,html body .changelog-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(196,240,250,.75),rgba(109,205,218,.55))!important;border:2px solid transparent!important;background-clip:padding-box!important;border-radius:999px!important;backdrop-filter:blur(6px)!important}
html body .detail-shell::-webkit-scrollbar-thumb:hover,html body .detail-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(214,247,255,.9),rgba(133,220,232,.7))!important}

/* Hover on cards must always be smooth, no matter which card was clicked last. */
html body .dog-card,html body .entity-card,html body .news-card[data-news-id]{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .5s ease,background-color .5s ease!important}
html body .dog-card:focus,html body .entity-card:focus,html body .news-card:focus,
html body .dog-card:focus-visible,html body .entity-card:focus-visible,html body .news-card:focus-visible{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .5s ease,background-color .5s ease!important}

/* The contact / empty-state news cards keep their original layout and a calm hover:
   no lift, so the footer below can no longer jump, and the shadow stays visible. */
html body .news-card:not([data-news-id]){display:block!important}
html body .news-card:not([data-news-id]):hover,html body .news-empty-state:hover,html body .news-card-loading:hover{transform:none!important;translate:none!important;scale:none!important;box-shadow:0 24px 60px rgba(4,26,35,.26)!important;transition:box-shadow .45s ease,border-color .45s ease!important}


/* ============================ v0.9.44 ==================================== */
/* One authoritative recipe for the contact cards.
   Root cause of the teleport: the hover state changed margin-top from 16px to 0.
   Margin is a layout property, it was not animated, so the card and the whole
   footer below it snapped upwards. Geometry is now identical in both states and
   the movement is done purely by transform, which is what actually animates.
   Second cause: base and hover used different transform function lists
   (with and without translate3d), which made interpolation unreliable.
   Both states now use the exact same list, only the --lift value differs. */

html body .contact-invite,html body .contact-invite.card-tilt,
html body .contact-invite:hover,html body .contact-invite.card-tilt:hover,
html body .contact-row,html body .contact-row.card-tilt,
html body .contact-row:hover,html body .contact-row.card-tilt:hover,
html body .social-card,html body .social-card.card-tilt,
html body .social-card:hover,html body .social-card.card-tilt:hover,
html body .contacts-page :is(.contact-row,.social-card,.contact-invite,.documents-strip>div),
html body .contacts-page :is(.contact-row,.social-card,.contact-invite,.documents-strip>div):hover{
  transform:perspective(1150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--lift,0px),0)!important;
  transform-style:preserve-3d!important;translate:none!important;scale:none!important;rotate:none!important;
  transition:transform .52s cubic-bezier(.22,1,.36,1),box-shadow .52s ease,border-color .52s ease,background .52s ease!important;
  transition-delay:0s!important;will-change:transform;backface-visibility:hidden}

/* the lift itself */
html body .contact-invite:hover,html body .contact-invite.card-tilt:hover{--lift:-8px!important;box-shadow:0 30px 70px rgba(233,140,42,.34),0 0 0 1px rgba(255,255,255,.26)!important}
html body .contact-row:hover,html body .contact-row.card-tilt:hover,
html body .social-card:hover,html body .social-card.card-tilt:hover{--lift:-6px!important;box-shadow:0 26px 60px rgba(6,34,44,.24)!important}

/* geometry locked: no layout property may differ between rest and hover, so
   nothing below the card can ever be repositioned by a hover */
html body .contact-invite,html body .contact-invite:hover,html body .contact-invite.card-tilt,html body .contact-invite.card-tilt:hover{position:relative!important;top:auto!important;bottom:auto!important;margin-top:16px!important;margin-bottom:0!important;min-height:320px!important}
html body .contact-row,html body .contact-row:hover,html body .social-card,html body .social-card:hover{position:relative!important;top:auto!important;bottom:auto!important;margin-top:0!important;margin-bottom:0!important}
@media (max-width:900px){html body .contact-invite,html body .contact-invite:hover,html body .contact-invite.card-tilt,html body .contact-invite.card-tilt:hover{min-height:0!important}}

/* the footer itself is never allowed to react to a hover anywhere on the page */
html body .site-footer{transition:background .55s ease,border-color .55s ease,color .45s ease!important;transform:none!important;translate:none!important;margin-top:0!important}

/* ============================ v0.9.50 ==================================== */
/* The card itself is exactly the v0.9.44 card: no heights, no widths, no grid or
   flex overrides are added here on purpose. The only new thing is the marker that
   tells how many attachments did not fit into the preview.

   Rules it obeys:
   - it never sits on a photo (its own strip lives under the media block);
   - the photo is not dimmed and its proportions are untouched;
   - it carries no shadow at all, so no container can clip anything;
   - its strip has a locked height and is rendered on every card with media, with or
     without the marker inside, so the card layout is identical either way. */

html body .news-card .news-media-note{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  height:26px!important;min-height:26px!important;max-height:26px!important;
  margin:8px 18px 0!important;padding:0!important;
  background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}

html body .news-media-note .news-media-count{
  display:inline-flex!important;align-items:center!important;position:static!important;
  margin:0!important;padding:4px 11px!important;border-radius:999px!important;
  font-family:Montserrat,Arial,sans-serif!important;font-size:11.5px!important;font-weight:700!important;
  letter-spacing:.02em!important;line-height:1.15!important;white-space:nowrap!important;
  max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;
  background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.28)!important;color:inherit!important;
  box-shadow:none!important;text-shadow:none!important;filter:none!important;transform:none!important;
  -webkit-backdrop-filter:blur(6px)!important;backdrop-filter:blur(6px)!important}
html:not([data-theme="dark"]) body .news-media-note .news-media-count{background:rgba(19,120,142,.11)!important;border-color:rgba(19,120,142,.24)!important;color:#0c5a6e!important}

/* the old marker drawn over the second photo, and its dimming, stay off for good */
html body .news-media-item.has-more-overlay::after{content:none!important;display:none!important}
html body .news-media-item.has-more-overlay img{filter:none!important}

@media(max-width:760px){
  html body .news-card .news-media-note{height:24px!important;min-height:24px!important;max-height:24px!important;margin:7px 16px 0!important}
  html body .news-media-note .news-media-count{font-size:11px!important;padding:3px 10px!important}
}

/* ============================ v0.9.51 ==================================== */
/* Two things, and only these two.

   1. Cards stop jumping in height. NOT by hardcoding pixels (that is what cropped the
      photos before) but by letting the grid equalise the rows: every implicit row is
      1fr, so all rows share the same height, and the card fills its cell completely.
      The photo keeps its own proportions; the surplus/deficit is absorbed by the text
      block, which is the only flexible part and which clips instead of growing.

   2. The hint and the "open" button drop to the bottom of the card: the hint takes the
      leftover space above itself, so the hint, the button and the contacts row sit as
      one compact stack at the very bottom edge.

   Nothing can escape the card: the card clips its content, the text block clips, and
   the hint/button are inside the padding box with their own bottom margins. */

html body .news-grid{align-items:stretch!important;grid-auto-rows:1fr!important}

html body .news-card[data-news-id]{
  display:flex!important;flex-direction:column!important;
  height:100%!important;min-height:0!important;max-height:none!important;
  overflow:hidden!important;box-sizing:border-box!important}

html body .news-card[data-news-id]>*{flex:0 0 auto!important;min-width:0!important;max-width:100%!important}
html body .news-card[data-news-id]:not(.has-no-text) .news-card-media{flex:0 0 auto!important;height:auto!important;max-height:none!important}

/* the text is the only elastic part and it never overflows */

/* hint + button + contacts = one compact stack pinned to the bottom */


/* ============================ v0.9.52 ==================================== */
/* 1. Preview text: truncated BY WHOLE LINES, never sliced through a line.

   Root cause of the ugly half-letters: the text block was the elastic part of the card,
   so its height was whatever pixels were left over - an arbitrary value that had nothing
   to do with the line grid. The container edge therefore landed in the middle of a line
   and we saw the tops of the letters.

   Real fix, not a patch: the text is no longer elastic. Its line box is a round number
   (25px) and its height is capped at an exact multiple of that line box, so the cut can
   only ever happen exactly between two lines. Line clamping adds the ellipsis, so the
   truncation reads as intentional instead of broken. */

html body .news-card[data-news-id] .news-card-text{
  flex:0 1 auto!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:8!important;
  font-size:15px!important;line-height:25px!important;
  max-height:200px!important;min-height:0!important;
  overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:anywhere!important}

/* 2. The bottom stack. The leftover space of the card is collected ABOVE the hint, so the
      hint, the button and the contacts row always sit together at the bottom edge, tight
      against the divider line - and the gaps below them are fixed, small numbers. */

html body .news-card[data-news-id] .news-open-hint,
html body .news-card[data-news-id] .news-card-open{flex:0 0 auto!important}
html body .news-card[data-news-id] .news-open-hint{margin:auto 20px 5px!important;margin-top:auto!important}
html body .news-card[data-news-id] .news-card-open{margin:auto 20px 6px!important;margin-top:auto!important}
html body .news-card[data-news-id] .news-open-hint+.news-card-open{margin-top:0!important;margin-bottom:6px!important}
html body .news-card[data-news-id] .news-card-contacts{margin-top:0!important;padding-top:12px!important}

@media(max-width:760px){
  html body .news-card[data-news-id] .news-card-text{-webkit-line-clamp:6!important;max-height:150px!important}
  html body .news-card[data-news-id] .news-open-hint{margin:auto 16px 4px!important;margin-top:auto!important}
  html body .news-card[data-news-id] .news-card-open{margin:auto 16px 5px!important;margin-top:auto!important}
  html body .news-card[data-news-id] .news-open-hint+.news-card-open{margin-top:0!important;margin-bottom:5px!important}
  html body .news-card[data-news-id] .news-card-contacts{padding-top:10px!important}
}

/* 3. Four photos fit as a clean 2x2 block: rows share the height, tiles keep their ratio. */
html body .news-card[data-news-id] .news-card-media.media-count-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:1fr!important;align-items:stretch!important}
html body .news-card[data-news-id] .news-card-media.media-count-4 .news-media-item{aspect-ratio:1/1!important;height:auto!important;align-self:stretch!important}

/* ============================ v0.9.53 ==================================== */
/* A. Spacing under the media block.

   The real cause of the big gap: the marker strip was rendered on EVERY card with media,
   even when there was nothing to put in it, so an empty 26px band plus its margin pushed
   the text down. The strip is now built only when there are hidden attachments, and as a
   second line of defence an empty strip is removed by CSS too. Both the strip and the
   text are pulled closer to the photos. */

html body .news-card[data-news-id] .news-media-note{margin:4px 18px 0!important;height:23px!important;min-height:23px!important;max-height:23px!important}
html body .news-card[data-news-id] .news-media-note:empty{display:none!important;margin:0!important;height:0!important;min-height:0!important;max-height:0!important}
html body .news-card[data-news-id] .news-media-note .news-media-count{padding:3px 10px!important;line-height:1.15!important}
html body .news-card[data-news-id] .news-card-text{margin-top:10px!important}
html body .news-card[data-news-id] .news-media-note+.news-card-text{margin-top:7px!important}

/* B. Smart grid for posts WITHOUT text.

   Such a card has nothing to fill the middle with, so the media block becomes the elastic
   part instead of the text and grows downwards from its top edge:

     - the two leading items form the top row and keep THEIR OWN aspect ratio, exactly like
       a lone video does today: the container adapts to the media, so there are no black
       bars and no distortion. They are anchored to the top of the row, so they expand
       downwards, never sideways beyond the card;
     - everything else lands in the second row, which takes all the remaining height, so the
       leftover space is consumed by cubes instead of staying blank;
     - the leading row is capped per screen width, so a pair of tall portrait shots can never
       blow the card up or spill out of it.

   Cards that do have text keep the previous behaviour untouched. */

html body .news-card[data-news-id].has-no-text .news-card-media{
  flex:1 1 auto!important;min-height:0!important;max-height:none!important;
  align-content:stretch!important;overflow:hidden!important}

/* two attachments and no text: one row, both keep their own proportions */
html body .news-card[data-news-id].has-no-text .news-card-media.media-count-2{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;align-content:start!important}
html body .news-card[data-news-id].has-no-text .news-card-media.media-count-2 .news-media-item{
  aspect-ratio:var(--media-ratio,4/3)!important;height:auto!important;align-self:start!important;max-height:380px!important}

/* four attachments and no text: leading pair by ratio, cubes below fill the rest */
html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:auto minmax(110px,1fr)!important;grid-auto-rows:auto!important}
html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4 .news-media-item:nth-child(-n+2){
  grid-row:1!important;aspect-ratio:var(--media-ratio,4/3)!important;height:auto!important;
  max-height:320px!important;align-self:start!important}
html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4 .news-media-item:nth-child(n+3){
  grid-row:2!important;aspect-ratio:auto!important;height:auto!important;min-height:0!important;align-self:stretch!important}

/* C. Per-device caps. Two columns are kept on every width so nothing can spill out; only
      the height budget shrinks as the screen narrows. */
@media(max-width:1024px){
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-2 .news-media-item{max-height:330px!important}
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4 .news-media-item:nth-child(-n+2){max-height:280px!important}
}
@media(max-width:760px){
  html body .news-card[data-news-id] .news-media-note{margin:3px 16px 0!important;height:21px!important;min-height:21px!important;max-height:21px!important}
  html body .news-card[data-news-id] .news-card-text{margin-top:8px!important}
  html body .news-card[data-news-id] .news-media-note+.news-card-text{margin-top:6px!important}
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-2,
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4{grid-template-rows:auto minmax(96px,1fr)!important}
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-2 .news-media-item{max-height:290px!important}
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4 .news-media-item:nth-child(-n+2){max-height:240px!important}
}
@media(max-width:520px){
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4{grid-template-rows:auto minmax(84px,1fr)!important}
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-2 .news-media-item{max-height:250px!important}
  html body .news-card[data-news-id].has-no-text .news-card-media.media-count-4 .news-media-item:nth-child(-n+2){max-height:205px!important}
}

/* ============================ v0.9.54 ==================================== */
/* ---------- A. NEWS: why the "smart grid" of v0.9.53 did nothing ----------

   Three earlier rules cancelled it, and I checked each one in the cascade before touching it:
     1. my own v0.9.51 rule pinned EVERY direct child of the card with flex:0 0 auto, so the
        media block was physically forbidden to grow;
     2. interface.css line 92 gives .news-card-media a min-height of 250px, and the phone layer
        forces height:240px - dead space that no grid rule can remove. THAT is the "text sits
        far below the photos" gap: the hole was inside the media block, not above the text;
     3. lines 884+ pin every tile to align-self:start with its own aspect-ratio, so tiles never
        filled the block and the block never filled the card.

   Fix: the media block is the elastic part of the card for EVERY post (not only text-less ones),
   the dead min-height is gone, and tiles share the row height. Any spare space now goes into the
   photos/videos, the text is pushed down towards the button, and a one-letter caption no longer
   holds a hole under itself. */

html body .news-card .news-card-media{min-height:0!important;max-height:none!important}
html body .news-card[data-news-id]>.news-card-media{flex:1 1 auto!important;height:auto!important;min-height:0!important;max-height:none!important}
html body .news-card[data-news-id]>.news-media-note,
html body .news-card[data-news-id]>.news-card-text,
html body .news-card[data-news-id]>.news-card-meta,
html body .news-card[data-news-id]>.news-open-hint,
html body .news-card[data-news-id]>.news-card-open,
html body .news-card[data-news-id]>.news-card-contacts{flex:0 0 auto!important}

/* multi-tile grids: rows share the height and tiles fill them, so the block has no inner holes */
html body .news-card[data-news-id] .news-card-media.media-count-2,
html body .news-card[data-news-id] .news-card-media.media-count-3,
html body .news-card[data-news-id] .news-card-media.media-count-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;grid-template-rows:none!important;align-content:stretch!important;align-items:stretch!important}
html body .news-card[data-news-id] .news-card-media.media-count-2 .news-media-item,
html body .news-card[data-news-id] .news-card-media.media-count-3 .news-media-item,
html body .news-card[data-news-id] .news-card-media.media-count-4 .news-media-item{aspect-ratio:auto!important;height:auto!important;min-height:0!important;max-height:none!important;align-self:stretch!important;grid-row:auto!important}

/* a single photo may fill the spare space; a single video keeps its own proportions, because that
   is exactly the look that already works well */
html body .news-card[data-news-id] .news-card-media.has-single-media:not(.has-single-video),
html body .news-card[data-news-id] .news-card-media.media-count-1:not(.has-single-video){align-content:stretch!important;align-items:stretch!important}
html body .news-card[data-news-id] .news-card-media.has-single-media:not(.has-single-video) .news-media-item,
html body .news-card[data-news-id] .news-card-media.media-count-1:not(.has-single-video) .news-media-item{aspect-ratio:auto!important;height:auto!important;min-height:0!important;align-self:stretch!important}
html body .news-card[data-news-id] .news-card-media.has-single-video{align-self:center!important}

/* the strip with "+2 photos" and the text sit tight under the media, on every width */
html body .news-grid .news-card[data-news-id] .news-media-note{margin:4px 18px 0!important;height:23px!important;min-height:23px!important;max-height:23px!important}
html body .news-grid .news-card[data-news-id] .news-media-note:empty{display:none!important;height:0!important;min-height:0!important;max-height:0!important;margin:0!important}
html body .news-grid .news-card[data-news-id] .news-card-text{margin-top:9px!important}
html body .news-grid .news-card[data-news-id] .news-media-note+.news-card-text{margin-top:6px!important}

@media(max-width:760px){
  html body .news-card .news-card-media{height:auto!important;min-height:0!important}
  html body .news-grid .news-card[data-news-id] .news-media-note{margin:3px 16px 0!important;height:21px!important;min-height:21px!important;max-height:21px!important}
  html body .news-grid .news-card[data-news-id] .news-card-text{margin-top:7px!important}
  html body .news-grid .news-card[data-news-id] .news-media-note+.news-card-text{margin-top:5px!important}
}

/* ---------- B. PHONE PHOTO VIEWER: the real reason it was glued to the right ----------

   The viewer is a grid. Release layer 0.9.13 forces three columns (80px / 1fr / 80px) with no
   media query, and layer 0.9.14 turns both arrows into IN-FLOW grid items (position:relative).
   On a phone the later layer switches the grid to a single column, but the arrows stay in flow
   and grab their own cells, while the image keeps max-width:min(94vw,1500px) - wider than the
   cell it ended up in. Result: the arrows land wherever the auto-placement puts them and the
   photo overflows its cell to the right. Nothing to do with the photo itself.

   Rebuild for touch layouts: the stage owns the whole overlay, the image is centred inside a
   padded safe area, and the controls are taken out of the grid entirely. */
@media (max-width:900px),(pointer:coarse){
  html body .lightbox{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;padding:0!important;place-items:center!important}
  html body .lightbox-stage,html body .lightbox.is-single .lightbox-stage{position:absolute!important;inset:0!important;grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;display:grid!important;place-items:center!important;box-sizing:border-box!important;padding:calc(env(safe-area-inset-top,0px) + 72px) 14px calc(env(safe-area-inset-bottom,0px) + 92px)!important}
  html body #lightboxImage{position:relative!important;grid-column:1!important;grid-row:1!important;margin:0 auto!important;justify-self:center!important;align-self:center!important;width:auto!important;height:auto!important;max-width:calc(100vw - 28px)!important;max-height:calc(100svh - 176px)!important;object-fit:contain!important}
  html body .lightbox-close{position:fixed!important;top:calc(env(safe-area-inset-top,0px) + 12px)!important;right:12px!important;left:auto!important;bottom:auto!important;z-index:24!important;width:48px!important;height:48px!important}
  html body .lightbox-arrow{position:fixed!important;top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 16px)!important;width:56px!important;height:56px!important;min-width:56px!important;min-height:56px!important;border-radius:20px!important;justify-self:auto!important;align-self:auto!important;z-index:24!important}
  html body .lightbox-arrow.prev{left:16px!important;right:auto!important}
  html body .lightbox-arrow.next{right:16px!important;left:auto!important}
  html body .lightbox-count{position:fixed!important;left:50%!important;right:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 32px)!important;transform:translateX(-50%)!important;z-index:24!important}
  html body .lightbox-blur{position:fixed!important;inset:0!important}
}

/* ---------- C. OPENED CARD ON PHONES ----------

   The phone layer (interface.css line 1151) puts border-radius:22px AND clip-path:inset(0 round
   22px) on .detail-shell. The shell is a full-screen panel, so:
     - its corners were rounded and the dark navy overlay behind it showed through them;
     - the shade under the title looked "cut by rectangles" at the left and right, because the
       rounded clip ate its edges;
     - and a clip-path on the scrolling container (together with will-change:clip-path and a
       blur filter) is exactly what kills touch scrolling in Firefox's responsive mode.
   One cause, three symptoms. On touch layouts the shell becomes a plain full-bleed scroller. */
@media (max-width:900px),(pointer:coarse){
  html body .detail-shell{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;border:0!important;border-radius:0!important;clip-path:none!important;-webkit-clip-path:none!important;will-change:auto!important;isolation:auto!important;transform:none!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;overscroll-behavior:contain!important}
  html body .detail-overlay.show-content .detail-shell{filter:none!important;transform:none!important}
  html body .detail-overlay.is-open{touch-action:pan-y!important}
  html body .detail-hero,html body .detail-hero>img,html body .detail-hero-shade,html body .detail-backdrop{border-radius:0!important}
  html body .detail-hero-shade{position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:100%!important;height:100%!important;transform:none!important;clip-path:none!important;-webkit-clip-path:none!important;background:linear-gradient(0deg,rgba(4,26,35,.86) 0%,rgba(4,26,35,.62) 30%,rgba(4,26,35,.18) 64%,rgba(4,26,35,0) 100%)!important}
  /* rounded panels keep their radius, but clipping is done by overflow, which does not break scroll */
  html body .news-modal,html body .entity-modal-content,html body .news-modal-scroll{clip-path:none!important;-webkit-clip-path:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important}
}

/* ---------- D. HAMBURGER: the half-blurred flash after closing ----------
   Closing removed .is-open, but a later layer replaced the panel's transition list and dropped
   visibility from it, so for a moment the fully built glass surface (28px backdrop blur) was
   still painted while already "closed". The closed state is now explicit and instant. */
html body .mobile-menu{transition:opacity .32s ease,transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s!important}
html body .mobile-menu.is-open{transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1),visibility 0s!important}
html body .mobile-menu.is-closing{visibility:visible!important;opacity:0!important;pointer-events:none!important;transition:opacity .28s ease!important}
html body .mobile-menu:not(.is-open):not(.is-closing){visibility:hidden!important;opacity:0!important;pointer-events:none!important;transform:translateY(-12px)!important;transition:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important}
html body .mobile-menu:not(.is-open) .mobile-menu-wave{animation-play-state:paused!important}

/* ---------- E. The discreet "complex effects" switch ---------- */
html body .fx-switch{display:flex!important;justify-content:center!important;width:100%!important}
html body .mobile-menu .fx-switch{margin-top:26px!important}
html body .footer-meta .fx-switch{width:auto!important;margin:0!important}
html body .fx-switch-button{display:inline-flex!important;align-items:center!important;gap:11px!important;min-width:0!important;width:auto!important;padding:8px 14px!important;border-radius:999px!important;border:1px solid var(--line)!important;background:color-mix(in srgb,var(--surface) 52%,transparent)!important;color:inherit!important;font-family:inherit!important;font-size:12.5px!important;font-weight:600!important;letter-spacing:0!important;text-align:left!important;cursor:pointer!important;opacity:.66!important;transform:none!important;box-shadow:none!important;transition:opacity .25s ease,border-color .25s ease,background .25s ease!important}
html body .fx-switch-button:hover,html body .fx-switch-button:focus-visible{opacity:1!important;transform:none!important;border-color:color-mix(in srgb,var(--sea) 55%,var(--line))!important}
html body .fx-switch-track{position:relative!important;flex:0 0 auto!important;width:38px!important;height:21px!important;border-radius:999px!important;background:color-mix(in srgb,var(--sea) 62%,transparent)!important;transition:background .25s ease!important}
html body .fx-switch-track i{position:absolute!important;top:3px!important;left:3px!important;width:15px!important;height:15px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 1px 3px rgba(6,26,34,.35)!important;transition:transform .26s cubic-bezier(.16,1,.3,1)!important}
html body .fx-switch-button[aria-checked="false"] .fx-switch-track{background:color-mix(in srgb,var(--line) 92%,transparent)!important}
html body .fx-switch-button[aria-checked="false"] .fx-switch-track i{transform:translateX(17px)!important}
html body .fx-switch-copy{display:grid!important;gap:1px!important;line-height:1.2!important}
html body .fx-switch-copy strong{font-size:12.5px!important;font-weight:700!important;line-height:1.2!important}
html body .fx-switch-copy small{font-size:10.5px!important;font-weight:500!important;color:var(--muted)!important;line-height:1.2!important}
@media(max-width:760px){html body .fx-switch-copy strong{font-size:13px!important}html body .fx-switch-copy small{font-size:11px!important}}

/* ---------- F. Lite mode: only the most expensive post-processing steps down ----------
   Kept in every case: intro, page transitions, waves, foam, hovers, card openings, cinema
   fade, reveal-on-scroll, gradients, rounded glass surfaces of the header and the menu. */
html.fx-lite body .ambient,html.fx-lite body .ambient-orb,html.fx-lite body .ambient-ripples,html.fx-lite body .sunset-orb{display:none!important}
html.fx-lite body .value-card,html.fx-lite body .entity-card,html.fx-lite body .dog-card,html.fx-lite body .news-card,html.fx-lite body .social-card,html.fx-lite body .contact-row,html.fx-lite body .stream-card,html.fx-lite body .smart-media,html.fx-lite body .contact-panel,html.fx-lite body .litter-demo-card,html.fx-lite body .contact-invite,html.fx-lite body .documents-strip>div{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 12px 28px rgba(10,40,52,.18)!important}
html.fx-lite body .card-tilt,html.fx-lite body .card-tilt:hover,html.fx-lite body .news-card:hover,html.fx-lite body .dog-card:hover,html.fx-lite body .entity-card:hover{--rx:0deg!important;--ry:0deg!important;--glow-opacity:0!important}
html.fx-lite body .hero .hero-media{animation:none!important;transform:scale(1.04)!important}
html.fx-lite body .detail-backdrop{filter:blur(16px) saturate(.85)!important;inset:-18px!important}
html.fx-lite body .detail-shell,html.fx-lite body .detail-overlay.show-content .detail-shell{filter:none!important}
html.fx-lite body .lightbox-blur{filter:blur(30px) saturate(1.1)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.fx-lite body .entity-overlay,html.fx-lite body .news-overlay,html.fx-lite body .detail-overlay,html.fx-lite body .changelog-overlay,html.fx-lite body .modal-backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(5,22,30,.95)!important}
html.fx-lite body .wave-divider svg path,html.fx-lite body .foam-line,html.fx-lite body .hero-water,html.fx-lite body .contact-wave{filter:none!important}
html.fx-lite body .mobile-menu-wave{filter:none!important}
html.fx-lite body *{text-shadow:none!important}

/* ---------- G. Phone smoothness without weakening a single effect ----------
   Paint containment on repeated cards, a stable scrollbar-free compositing path for the
   overlays and no permanent will-change layers. Nothing here changes how the site looks. */
@media (max-width:900px),(pointer:coarse){
  html body .news-card,html body .dog-card,html body .entity-card,html body .value-card,html body .stream-card,html body .social-card,html body .smart-media{contain:layout paint style!important}
  html body .site-footer,html body .pedigree-scroll{content-visibility:auto!important;contain-intrinsic-size:auto 620px!important}
  html body .detail-shell,html body .entity-overlay,html body .news-modal-scroll,html body .changelog-scroll{will-change:auto!important;transform:translateZ(0)!important}
  html body .changelog-canvas{will-change:auto!important}
  html body .page-transition i{will-change:transform!important}
}

/* ============================ v0.9.56 ==================================== */
/* ---------- ROOT CAUSE: every multi-photo preview collapsed to zero height ----------

   I traced the cascade before touching anything, and this one was introduced by v0.9.54
   itself. To remove the inner holes of the media block that release stripped the ratio
   from every tile of a 2/3/4-item grid:

     .news-card-media.media-count-2/3/4 .news-media-item{aspect-ratio:auto}
     .news-card-media.media-count-2/3/4{grid-auto-rows:minmax(0,1fr)}

   But interface.css line 619 positions every <img> absolutely inside its tile, so a tile
   has NO in-flow content whatsoever - its height came exclusively from aspect-ratio.
   Take that away and the chain is: tile content contribution 0 -> the 1fr rows resolve
   against 0 -> the grid is 0 tall -> flex-basis:auto reads that 0 as the flex base size
   -> nothing is left to grow from. The media block was still in the DOM, still 100% wide,
   and exactly 0 pixels tall. That is why a post with two or more attachments showed only
   the meta row, the "+N" caption and the text: the caption about the photos was printed
   while the photos themselves had no height. A lone attachment survived purely by
   accident, because its CONTAINER carries aspect-ratio (line 613-615) instead of relying
   on the tiles.

   Fixed on that same working principle rather than by re-adding a fixed height: the base
   height of a multi-tile grid now comes from the container too. app.js computes
   --grid-ratio from the real VK dimensions of the shown attachments and from the tile
   layout (2 items = one row of two, 4 items = 2x2), so the block always has a correct,
   non-zero base size. The rows stay 1fr and the tiles stretch into them, so any spare
   height of the card is consumed by the media instead of forming a hole - which also
   answers the second half of the report: with no text, or with a single line of it, the
   photos and videos now grow into the free space instead of leaving it blank. No
   hardcoded pixel height comes back, no dead min-height, no effect weakened. */

html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-2,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-3,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-4{
  flex:1 1 auto!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:var(--grid-ratio,4/3)!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-content:stretch!important;align-items:stretch!important;justify-content:stretch!important}

html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-2{
  grid-template-rows:minmax(0,1fr)!important;grid-auto-rows:minmax(0,1fr)!important}
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-3,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-4{
  grid-template-rows:repeat(2,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important}

/* the tiles own no intrinsic height any more, so they must take all of it from the row -
   on every card, with text or without it */
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-2 .news-media-item,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-3 .news-media-item,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-4 .news-media-item{
  position:relative!important;width:100%!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:auto!important;
  align-self:stretch!important;justify-self:stretch!important;grid-row:auto!important}

/* a lone photo or video keeps its own proportions as the BASE size and then grows into the
   spare height of the card exactly like the grids do */
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-1,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-media,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-video{
  flex:1 1 auto!important;align-self:center!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:var(--media-ratio,4/3)!important;
  grid-template-rows:minmax(0,1fr)!important;grid-auto-rows:minmax(0,1fr)!important;
  align-content:stretch!important;align-items:stretch!important}
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-1 .news-media-item,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-media .news-media-item,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-video .news-media-item{
  height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:auto!important;align-self:stretch!important;justify-self:stretch!important}

/* the images keep covering their tile, so a stretched tile never distorts a photo */
html body .news-grid .news-card[data-news-id].has-media .news-card-media .news-media-item>img{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  object-fit:cover!important;object-position:center!important}
/* ============================ v0.9.57 ==================================== */
/* ---------- ROOT CAUSE 1: the top bar never animated at all ----------------
   interface.css:929 gives the header height:84px plus
   transition:height .55s,padding .55s, and :930 gives .is-compact height:66px, so the bar
   really does change height while scrolling. But the LAST rule of the cascade that matches
   the header is the v0.9.43 cinema guard:
       html:not(.is-cinema) body .site-header{...transition:filter .5s,opacity .5s!important}
   specificity (0,2,2) versus (0,2,0) for .site-header.is-compact, and declared later. The
   transition shorthand replaces the entire property list, so height and padding were dropped
   out of the transition set - the 84px -> 66px change was applied in a single frame. There was
   no easing in and no easing out because there was no transition left to ease. Restored here
   with a higher-specificity selector that keeps the cinema filter/opacity fades intact. */
html:not(.is-cinema) body .site-header.site-header,
html:not(.is-cinema) body .site-header.site-header.is-scrolled,
html:not(.is-cinema) body .site-header.site-header.is-compact{
  transition:height .5s cubic-bezier(.22,1,.36,1),
             padding .5s cubic-bezier(.22,1,.36,1),
             background-color .5s ease,border-color .5s ease,box-shadow .5s ease,
             -webkit-backdrop-filter .5s ease,backdrop-filter .5s ease,
             filter .5s cubic-bezier(.22,1,.36,1),
             opacity .5s cubic-bezier(.22,1,.36,1)!important;
  will-change:height!important}

/* the brand, the nav and the action buttons ride along with the same curve, so the row of
   buttons lifts with the bar instead of snapping to its new place */
html body .site-header.site-header>*,
html body .site-header.site-header.is-compact>*,
html body .site-header.site-header .brand,
html body .site-header.site-header .main-nav,
html body .site-header.site-header .header-actions,
html body .site-header.site-header.is-compact .brand,
html body .site-header.site-header.is-compact .main-nav,
html body .site-header.site-header.is-compact .header-actions{
  transition:transform .5s cubic-bezier(.22,1,.36,1),
             color .4s ease,background .45s ease,border-color .45s ease,box-shadow .45s ease!important;
  will-change:transform!important}

/* ---------- ROOT CAUSE 2: media could only grow downwards -------------------
   v0.9.56 made the media block flex:1 1 auto but left its width pinned to
   calc(100% - 36px). With a definite width, aspect-ratio resolves the HEIGHT from it, so the
   only thing flex-grow could add was vertical space - the photo got taller, never bigger.
   Inverting the dependency fixes it: align-self:center makes the cross size (width) content
   driven, flex resolves the HEIGHT along the main axis, and aspect-ratio then derives the
   width from that height. The picture scales in both directions at once, keeps its
   proportions, and max-width keeps it strictly narrower than the card. */
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-1,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-media,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-video{
  flex:1 1 auto!important;align-self:center!important;justify-self:center!important;
  width:auto!important;min-width:0!important;max-width:calc(100% - 44px)!important;
  height:auto!important;min-height:170px!important;max-height:none!important;
  margin-inline:auto!important;
  aspect-ratio:var(--media-ratio,4/3)!important}

html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-2,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-3,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-4{
  align-self:center!important;justify-self:center!important;
  width:auto!important;min-width:0!important;max-width:calc(100% - 44px)!important;
  min-height:170px!important;margin-inline:auto!important}

/* ---------- footer: a logical place for FCI No 336 and the version button ----
   FCI No 336 now reads as part of the credit line instead of floating in the middle of the
   row, and the technical-version button is grouped with the effects switch in one utility
   cluster pinned to the opposite edge. */
html body .site-footer .footer-meta{
  display:flex!important;flex-wrap:wrap!important;
  align-items:center!important;justify-content:space-between!important;gap:14px 22px!important}
html body .site-footer .footer-meta .footer-copy{margin:0 auto 0 0!important;white-space:normal!important}
html body .site-footer .footer-utility{
  display:flex!important;flex-wrap:wrap!important;align-items:center!important;
  justify-content:flex-end!important;gap:10px 18px!important;margin:0!important}
html body .site-footer .footer-utility .fx-switch{width:auto!important;margin:0!important;justify-content:flex-end!important}
html body .site-footer .footer-utility .footer-version{margin:0!important;white-space:nowrap!important}

/* the switch itself was unreadable on a phone: half transparent, stretched and wrapping */
@media(max-width:760px){
  html body .site-footer .footer-meta{
    flex-direction:column!important;align-items:center!important;
    justify-content:center!important;text-align:center!important;gap:14px!important}
  html body .site-footer .footer-meta .footer-copy{margin:0!important}
  html body .site-footer .footer-utility{
    width:100%!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:14px!important}
  html body .fx-switch{justify-content:center!important}
  html body .fx-switch-button{
    width:auto!important;max-width:100%!important;padding:10px 16px!important;
    opacity:1!important;font-size:13px!important;
    background:color-mix(in srgb,var(--surface) 82%,transparent)!important;
    border-color:color-mix(in srgb,var(--line) 88%,transparent)!important}
  html body .fx-switch-copy{gap:2px!important}
  html body .fx-switch-copy strong{font-size:13px!important;white-space:nowrap!important}
  html body .fx-switch-track{width:40px!important;height:22px!important}
  html body .fx-switch-track i{width:16px!important;height:16px!important}
  html body .fx-switch-button[aria-checked="false"] .fx-switch-track i{transform:translateX(18px)!important}
}
/* ============================ v0.9.58 ==================================== */
/* ---------- ROOT CAUSE 1: the tiles were told to ignore their proportions ---
   This one is mine, from v0.9.56. That block gave every tile of a multi item preview
   aspect-ratio:auto together with align-self:stretch inside rows of minmax(0,1fr), and let the
   container drink the spare height of the card through flex:1 1 auto. The consequence is exactly
   what was reported: the tile height came from the CARD instead of from the picture, so a photo
   was stretched to whatever was left over and object-fit:cover cropped the difference - and a
   lone photo could only ever get taller, because with a definite width aspect-ratio resolves the
   height and flex-grow had nothing else to add.
   Every trace of that height soaking is removed here. No media size is derived from spare card
   space any more: the size comes from the real VK dimensions in both directions at once and is
   capped by the width of the card, so a picture either grows as a whole or does not grow.
   Two tiles keep BOTH of their own proportions simultaneously because the columns are no longer
   equal - app.js publishes --grid-cols as r1fr r2fr, and when the widths are proportional to the
   ratios the quotient w/r, which is the tile height, comes out identical for both. Level row,
   zero vertical cropping, full width used, nothing stretched. */
html body .news-grid .news-card[data-news-id].has-media .news-card-media{
  flex:0 0 auto!important}

html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-2{
  display:grid!important;
  align-self:center!important;justify-self:center!important;margin-inline:auto!important;
  width:calc(100% - 44px)!important;min-width:0!important;max-width:calc(100% - 44px)!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:auto!important;
  grid-template-columns:var(--grid-cols,repeat(2,minmax(0,1fr)))!important;
  grid-template-rows:auto!important;grid-auto-rows:auto!important;
  align-items:start!important;align-content:start!important;justify-content:stretch!important}
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-2 .news-media-item{
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:var(--media-ratio,4/3)!important;
  align-self:start!important;justify-self:stretch!important}

/* a lone photo or video scales as a whole, capped by the width of the card - never wider */
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-1,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-media,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-video{
  flex:0 0 auto!important;align-self:center!important;justify-self:center!important;
  margin-inline:auto!important;
  width:min(calc(100% - 44px),var(--single-media-width,calc(100% - 44px)))!important;
  min-width:0!important;max-width:calc(100% - 44px)!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  aspect-ratio:var(--media-ratio,4/3)!important}
html body .news-grid .news-card[data-news-id].has-media .news-card-media.media-count-1 .news-media-item,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-media .news-media-item,
html body .news-grid .news-card[data-news-id].has-media .news-card-media.has-single-video .news-media-item{
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  aspect-ratio:auto!important;align-self:stretch!important;justify-self:stretch!important}

/* ---------- ROOT CAUSE 2: the repost badge had no place in the meta grid ----
   .news-card-meta is an explicit grid (interface.css:1891 on desktop, :2041 on a phone) and only
   the tag, the date, .news-age and .news-views own a grid-area, so .news-repost-tag dropped into
   auto placement and landed in the middle of the header. It now sits in the right hand column,
   directly under the views/age line, and it is never clipped. */
html body .news-card-meta .news-repost-tag{
  grid-area:3/2!important;justify-self:end!important;align-self:center!important;
  order:0!important;margin:0 11px 0 0!important;transform:none!important;
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  max-width:100%!important}
@media(max-width:760px){
  html body .news-card-meta .news-repost-tag{margin:0!important}
}

/* ---------- ROOT CAUSE 3: the tilt and the glow had no GPU promotion -------
   interface.css:1751 sets html body *{will-change:auto!important}, which strips the compositor
   hint from every element on the page. The tilt transform and the glow behind the cursor were
   therefore repainted on the main thread each frame, which is the lag and the overshoot that was
   reported. Restored for the hovered card only - narrow enough to leave the debt rule in place,
   and nothing about the effects themselves is weakened. Containment is added for the same
   reason: it bounds the work per card instead of reducing it. */
html body .news-grid{contain:layout style!important}
html body .news-grid .news-card{contain:layout style!important}
html body .news-card:hover,html body .card-tilt:hover{will-change:transform!important}
html body .news-card:hover::after,html body .card-tilt:hover::after{will-change:opacity!important}