/* ===== PROSERIES: royal blue, bright clean white, colour-coded bags ===== */
:root{
 --bg:#ffffff;--ink:#14213d;--accent:#054fa3;--on-accent:#fff;--panel:#eef4fb;--card:#fff;--line:rgba(20,33,61,.12);
 --blue:#054fa3;--blue-dk:#033a7a;--blue-lt:#e7f0fb;
 --display:"Urbanist",system-ui,sans-serif;--body:"Albert Sans",system-ui,sans-serif;--mono:"Albert Sans",system-ui,sans-serif;
 --dw:800;--dls:-.025em;--head-bg:#054fa3;--foot-bg:#033a7a;--foot-ink:#e7f0fb;--radius:999px;--r2:22px;--strip-bg:#022a5a;
}
.eyebrow{color:var(--blue);font-weight:800;letter-spacing:.14em}
.site{background:var(--blue);color:#fff}
.scrolled .site{background:var(--blue);box-shadow:0 6px 24px rgba(3,58,122,.25)}
.site .wrap{min-height:80px}
.logo img{height:40px;width:auto}
.menu a{font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
.menu a:not(.btn)::after{background:#fff}
.site .btn{background:#fff;color:var(--blue)}
.lang{display:flex;gap:2px;background:rgba(255,255,255,.14);border-radius:99px;padding:3px;font-size:.72rem;font-weight:800}
.lang a{padding:.35em .7em;border-radius:99px;text-decoration:none}.lang a[aria-current]{background:#fff;color:var(--blue)}
.lang a::after{display:none}
@media(max-width:880px){.menu{background:var(--blue)}}
.btn{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;padding:1.05em 1.7em}
.btn.white{background:#fff;color:var(--blue)}
.btn.ghost.light{color:#fff}.btn.ghost.light:hover{background:#fff;color:var(--blue)}
h1,h2{line-height:.98}
.hl{font-weight:300}

/* hero */
.p-hero{height:calc(100svh - 114px);min-height:640px;padding:40px 0;position:relative;overflow:hidden;color:#fff;display:flex;align-items:center}
.p-hero>.frame{position:absolute;inset:0}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,40,90,.72) 0%,rgba(3,40,90,.25) 55%,rgba(3,40,90,0) 80%)}
.p-hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:30px}
.p-hero h1{font-size:clamp(2.8rem,5.6vw,5.8rem);margin:0 0 .25em}
.p-hero h1 .hl{font-size:.72em;margin-top:.12em}
.p-hero h1 .hl{display:block}
.p-hero p{max-width:40ch;font-size:1.2rem;margin:0 0 30px}
.p-hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.p-hero .lineup{width:100%;max-width:560px;justify-self:end;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45));animation:float 6s ease-in-out infinite alternate}
@keyframes float{to{transform:translateY(-16px)}}
.stars{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;font-weight:700;font-size:.85rem;letter-spacing:.06em;background:rgba(255,255,255,.14);padding:8px 14px;border-radius:99px}
.stars i{color:#ffd24a;font-style:normal;letter-spacing:2px}
@media(max-width:860px){.p-hero .wrap{grid-template-columns:1fr}.p-hero .lineup{display:none}}

.band{background:var(--blue-dk);color:#fff;padding:18px 0;font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.8rem);letter-spacing:-.01em}
.band .track span::after{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#7fb3f0;margin-left:3rem;vertical-align:middle}

/* story */
.story{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,100px);align-items:center}
.story h2{font-size:clamp(2.4rem,5vw,4.6rem)}
.story h2 .hl{color:var(--blue)}
.duo{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:end}
.duo .frame{border-radius:22px}
.duo .a{aspect-ratio:4/5}.duo .b{aspect-ratio:1;margin-bottom:60px}
@media(max-width:820px){.story{grid-template-columns:1fr}}

/* formula finder */
.finder{background:var(--blue-lt)}
.finder h2{font-size:clamp(2.4rem,5vw,4.8rem);text-align:center}
.finder .eyebrow{justify-content:center;display:flex}
.pettoggle{display:flex;width:max-content;margin:30px auto 56px;background:#fff;border-radius:99px;padding:6px;position:relative;box-shadow:0 10px 30px rgba(5,79,163,.12)}
.pettoggle button{font:inherit;font-weight:800;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;padding:.9em 2.2em;border:0;background:none;border-radius:99px;cursor:pointer;position:relative;z-index:2;color:var(--ink);transition:color .3s}
.pettoggle button[aria-pressed=true]{color:#fff}
.pettoggle .pill{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);background:var(--blue);border-radius:99px;transition:transform .55s cubic-bezier(.3,1.3,.5,1)}
.pettoggle[data-pet=cat] .pill{transform:translateX(100%)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px}
.fcard{--c:#054fa3;background:#fff;border-radius:22px;text-decoration:none;display:flex;flex-direction:column;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;position:relative}
.fcard .shelf{background:color-mix(in srgb,var(--c) 16%,#fff);height:300px;display:grid;place-items:end center;padding-top:26px;position:relative;overflow:hidden}
.fcard .shelf::before{content:"";position:absolute;left:50%;bottom:-40%;width:120%;aspect-ratio:1;border-radius:50%;background:var(--c);opacity:.18;transform:translateX(-50%) scale(.6);transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .6s}
.fcard img{height:270px;width:auto;position:relative;transition:transform .7s cubic-bezier(.3,1.3,.5,1);filter:drop-shadow(0 16px 18px rgba(0,0,0,.18))}
.fcard:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px color-mix(in srgb,var(--c) 70%,#000)}
.fcard:hover .shelf::before{transform:translateX(-50%) scale(1);opacity:.32}
.fcard:hover img{transform:translateY(-12px) rotate(-4deg)}
.fcard .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1;border-top:6px solid var(--c)}
.fcard h3{font-size:1.45rem;margin:0}
.fcard p{font-size:.95rem;margin:0;opacity:.8}
.fcard .ga{margin-top:auto;padding-top:10px;display:flex;gap:18px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.85}
.fcard .ga b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--c);letter-spacing:-.02em}
.fcard.hide{display:none}
.fcard.pop{animation:pop .65s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes pop{from{opacity:0;transform:translateY(40px) scale(.94)}}

/* coreytec */
.ptec{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:center}
.ptec h2{font-size:clamp(2.4rem,5vw,4.4rem)}
.tri{display:grid;gap:14px}
.tri article{display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:center;padding:22px;border-radius:22px;background:#fff;border:1px solid var(--line);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s}
.tri article:hover{transform:translateX(8px);border-color:var(--blue);box-shadow:0 20px 40px -26px rgba(5,79,163,.5)}
.tri img{width:110px;height:auto}
.tri h3{font-size:1.5rem;margin:0 0 .2em}
.tri p{margin:0;font-size:.98rem;opacity:.85}
.kibble{aspect-ratio:4/5;border-radius:22px}
@media(max-width:820px){.ptec{grid-template-columns:1fr}}

.promise{background:var(--blue);color:#fff;text-align:center}
.promise h2{font-size:clamp(2.6rem,6.5vw,6rem);max-width:13ch;margin-inline:auto}
.promise .eyebrow{color:#bcd6ff;justify-content:center;display:flex}
.checks{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:40px 0 0;padding:0;list-style:none}
.checks li{border:2px solid rgba(255,255,255,.4);border-radius:99px;padding:.65em 1.25em;font-weight:700;transition:background .3s,color .3s}
.checks li:hover{background:#fff;color:var(--blue)}

/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px;grid-auto-flow:dense}
.mosaic .frame{border-radius:22px}
.mosaic .t{grid-row:span 2}.mosaic .w{grid-column:span 2}
@media(max-width:820px){.mosaic{grid-template-columns:1fr 1fr;grid-auto-rows:170px}}
.quote{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.5vw,3.8rem);color:var(--blue);text-align:center;max-width:18ch;margin:0 auto;letter-spacing:-.03em}

/* product page */
.ph{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding-top:40px}
.ph h1{font-size:clamp(2.8rem,6vw,5.6rem);color:var(--c)}
.ph .stage{background:color-mix(in srgb,var(--c) 15%,#fff);border-radius:30px;aspect-ratio:1;display:grid;place-items:center;position:relative;overflow:hidden}
.ph .stage::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:var(--c);opacity:.22;animation:breathe 6s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.15)}}
.ph .stage img{height:auto;width:auto;max-height:82%;max-width:62%;position:relative;filter:drop-shadow(0 30px 30px rgba(0,0,0,.22));animation:float 6s ease-in-out infinite alternate}
.gagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:30px 0}
.gagrid div{background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:18px;padding:16px;text-align:center}
.gagrid b{display:block;font-family:var(--display);font-size:1.9rem;color:var(--c)}
.gagrid span{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.benefits{columns:2;gap:40px;padding:0;list-style:none}
.benefits li{break-inside:avoid;padding:10px 0 10px 34px;position:relative;border-bottom:1px solid var(--line)}
.benefits li::before{content:"✓";position:absolute;left:0;top:9px;width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;font-size:.8rem;display:grid;place-items:center;font-weight:800}
.guide{border-radius:18px;border:1px solid var(--line);max-width:760px;width:100%;height:auto}
.ingr{font-size:.92rem;line-height:1.75;opacity:.85}
@media(max-width:820px){.ph{grid-template-columns:1fr}.benefits{columns:1}.gagrid{grid-template-columns:1fr 1fr}}
.card{border:1px solid var(--line)}
.card:hover{border-color:var(--blue)}
.card .k{color:var(--blue);font-weight:700}
.foot .flogo{height:42px;width:auto;margin-bottom:16px}
.dist{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.dist li{background:var(--blue-lt);color:var(--blue);border-radius:99px;padding:.55em 1.1em;font-weight:700;font-size:.92rem}