/* Nepaw site. Palette: red #E71F2D, cream #E5E4D2, brown #9B4B28, charcoal #1F1E1B */
:root{
  --red:#E71F2D; --red-deep:#B8141F; --cream:#E5E4D2; --art:#E4E1D0; --paper:#F4F3EA; --white:#fff;
  --brown:#9B4B28; --char:#1F1E1B; --char-2:#2B2A26; --muted:#5A564D; --rule:#D6D3C1; --gold:#D9A441;
  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --wrap:1180px; --head:72px;
  --paw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 32 32'%3E%3Cg fill='%231F1E1B' stroke='%23fff' stroke-width='1.6'%3E%3Cellipse cx='8' cy='12' rx='3.2' ry='4.2'/%3E%3Cellipse cx='14' cy='7' rx='3.2' ry='4.4'/%3E%3Cellipse cx='21' cy='7.5' rx='3.2' ry='4.4'/%3E%3Cellipse cx='26.5' cy='13' rx='3' ry='4'/%3E%3Cpath d='M17 15c-4.5 0-9 5.5-9 9.5 0 3 2.4 4.5 5 4 1.6-.3 2.6-1 4-1s2.4.7 4 1c2.6.5 5-1 5-4 0-4-4.5-9.5-9-9.5z'/%3E%3C/g%3E%3C/svg%3E");
  --paw-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 32 32'%3E%3Cg fill='%23E71F2D' stroke='%23fff' stroke-width='1.6'%3E%3Cellipse cx='8' cy='12' rx='3.2' ry='4.2'/%3E%3Cellipse cx='14' cy='7' rx='3.2' ry='4.4'/%3E%3Cellipse cx='21' cy='7.5' rx='3.2' ry='4.4'/%3E%3Cellipse cx='26.5' cy='13' rx='3' ry='4'/%3E%3Cpath d='M17 15c-4.5 0-9 5.5-9 9.5 0 3 2.4 4.5 5 4 1.6-.3 2.6-1 4-1s2.4.7 4 1c2.6.5 5-1 5-4 0-4-4.5-9.5-9-9.5z'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;cursor:var(--paw) 15 15,auto}
a,button,summary,label,select,.size-card,[role="button"]{cursor:var(--paw-red) 15 15,pointer}
input[type=text],input[type=email],textarea{cursor:text}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--char);font:400 1.0625rem/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:800}
h3{font-size:1.3rem;font-weight:700;letter-spacing:-.01em}
/* CJK locales: Noto covers glyphs Bricolage/Literata lack; keep Latin faces first so mixed text renders well */
html[lang="ja"]{--display:"Bricolage Grotesque","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;--body:"Literata","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
html[lang="ko"]{--display:"Bricolage Grotesque","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;--body:"Literata","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .btn,html[lang="ja"] .kicker,
html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3,html[lang="ko"] .btn,html[lang="ko"] .kicker{letter-spacing:0}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ko"] h1,html[lang="ko"] h2,html[lang="ko"] h3{line-height:1.32}
.nw{white-space:nowrap}
:focus-visible{outline:3px solid var(--char);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.site-head :focus-visible{outline-color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#fff;color:var(--char);padding:10px 14px;border-radius:8px;font:600 1rem var(--display)}
.skip:focus{top:12px}
[id]{scroll-margin-top:calc(var(--head) + 16px)}
section{padding:100px 0}
.kicker{display:inline-block;font:700 .9rem/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--brown);margin-bottom:16px}
.lede{font-size:1.2rem;color:var(--muted);margin-top:18px;max-width:58ch}
.center{text-align:center}.center .lede{margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;font:700 1.05rem/1.1 var(--display);padding:15px 28px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:transform .15s,background-color .15s,color .15s}
.btn:hover{transform:translateY(-2px) rotate(-1deg)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-deep)}
.btn-dark{background:var(--char);color:#fff}.btn-dark:hover{background:#000}
.btn-cream{background:var(--cream);color:var(--char)}.btn-cream:hover{background:#fff}
.btn-line{border-color:currentColor}
.btn[disabled]{opacity:.6}
.link{font:700 1.02rem var(--display);color:var(--red-deep);text-underline-offset:5px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:var(--red);color:#fff;height:var(--head)}
.site-head .bar{display:flex;align-items:center;gap:28px;height:var(--head)}
.logo img{height:40px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;font:600 1rem var(--display)}
.nav a{text-decoration:none;padding:6px 0;white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:#fff}
.head-cta{background:#fff;color:var(--red);padding:10px 18px;border-radius:999px;font:700 .98rem var(--display);text-decoration:none;white-space:nowrap}
.head-cta:hover{background:var(--cream)}
.menu-btn{display:none;margin-left:auto;background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);border-radius:999px;padding:8px 16px;font:700 .98rem var(--display)}
@media (max-width:1020px){
  .menu-btn{display:inline-block}
  .nav{display:none;position:absolute;left:0;right:0;top:var(--head);flex-direction:column;gap:0;background:var(--red-deep);padding:8px 24px 22px;margin:0;box-shadow:0 18px 30px rgba(0,0,0,.2)}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:1.12rem}
  .nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.2);text-decoration:underline;text-underline-offset:6px}
}
@media (max-width:560px){.head-cta{display:none}.logo img{height:34px}}

/* hero (home) */
.hero{background:var(--art);padding:0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;min-height:min(78vh,760px)}
.hero-copy{padding:60px 0 180px}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.6rem);font-weight:800;letter-spacing:-.035em;line-height:.95}
.hero h1 em{font-style:normal;color:var(--red)}
.hero-p{font-size:clamp(1.1rem,1.5vw,1.28rem);max-width:50ch;margin:26px 0 32px;color:#3D3A33}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-note{margin:22px 0 0;font:600 1rem var(--display);color:var(--brown)}
.hero-art{align-self:center;position:relative;margin-bottom:150px}
.hero-logo-card{background:var(--red);border-radius:36px;padding:clamp(36px,5vw,72px);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(231,31,45,.22)}
.hero-logo-card img{width:min(420px,72%);height:auto}
.hero-art img{width:100%;height:auto;-webkit-mask-image:radial-gradient(ellipse 72% 78% at 55% 48%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 78% at 55% 48%,#000 62%,transparent 100%)}
.ridge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(70px,9vw,130px);z-index:1}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr;min-height:0}.hero-copy{padding:56px 0 0}.hero-art{max-width:460px;margin:0 auto 110px}}

/* page hero (inner pages) */
.page-hero{background:var(--red);color:#fff;padding:84px 0 150px;position:relative;overflow:hidden}
.page-hero h1{font-size:clamp(2.6rem,6vw,5rem);font-weight:800;letter-spacing:-.03em;max-width:16ch}
.page-hero .kicker{color:#fff}
.page-hero p{font-size:1.2rem;color:#fff;max-width:56ch;margin-top:20px}
.page-hero .ridge path:nth-child(1){fill:var(--red-deep)}
.page-hero .ridge path:nth-child(2){fill:var(--paper)}
.page-hero .ridge path:nth-child(3){fill:var(--paper)}

/* 35 band */
.cure{background:var(--char);color:var(--cream);padding:30px 0 90px}
.cure-grid{display:grid;grid-template-columns:auto 1fr;column-gap:48px;align-items:center}
.big{font:800 clamp(7rem,20vw,14rem)/.78 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.06em;color:var(--red)}
.cure h2{color:#fff;margin-bottom:14px}
.cure p{color:#CFCDBD;max-width:56ch}
@media (max-width:720px){.cure-grid{grid-template-columns:1fr;row-gap:10px}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* layout helpers */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:880px){.two{grid-template-columns:1fr;gap:40px}}
.panel{background:var(--cream);border-radius:32px;padding:clamp(20px,4vw,44px)}
.panel img{margin:0 auto}
.ticks{list-style:none;padding:0;margin:28px 0 0}
.ticks li{position:relative;padding:14px 0 14px 44px;border-top:1px solid var(--rule)}
.ticks li::before{content:"";position:absolute;left:0;top:15px;width:28px;height:28px;background:var(--red);-webkit-mask:var(--pawmask) center/contain no-repeat;mask:var(--pawmask) center/contain no-repeat}
.ticks b{font-family:var(--display);font-size:1.12rem;display:block}
.ticks span{color:var(--muted)}
:root{--pawmask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='8' cy='12' rx='3.2' ry='4.2'/%3E%3Cellipse cx='14' cy='7' rx='3.2' ry='4.4'/%3E%3Cellipse cx='21' cy='7.5' rx='3.2' ry='4.4'/%3E%3Cellipse cx='26.5' cy='13' rx='3' ry='4'/%3E%3Cpath d='M17 15c-4.5 0-9 5.5-9 9.5 0 3 2.4 4.5 5 4 1.6-.3 2.6-1 4-1s2.4.7 4 1c2.6.5 5-1 5-4 0-4-4.5-9.5-9-9.5z'/%3E%3C/svg%3E")}

/* also-known-as strip */
.aka{background:var(--white);border-radius:24px;padding:26px 30px;margin-top:30px;border-left:10px solid var(--red)}
.aka .names{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.aka .names span{background:var(--paper);border:1.5px solid var(--rule);border-radius:999px;padding:6px 14px;font:600 .98rem var(--display)}

/* video band */
.video-band{position:relative;padding:0;min-height:min(80vh,640px);display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#222}
.video-band video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.65))}
.video-band .wrap{position:relative;z-index:1;padding-top:120px;padding-bottom:64px;width:100%}
.video-band h2{max-width:18ch;color:#fff}
.video-band p{max-width:52ch;color:#EDEBE0;margin-top:14px;font-size:1.15rem}
.vid-toggle{position:absolute;right:24px;bottom:24px;z-index:2;background:rgba(0,0,0,.45);color:#fff;border:1.5px solid rgba(255,255,255,.6);border-radius:999px;padding:8px 14px;font:600 .9rem var(--display)}

/* ingredients */
.ing{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--char)}
.ing li{padding:24px 18px 4px 0}
.ing b{display:block;font:800 clamp(1.5rem,2.4vw,2rem)/1.1 var(--display);letter-spacing:-.02em;margin-bottom:8px}
.ing li:first-child b{color:var(--red)}
.ing span{color:var(--muted);font-size:.98rem}
.ing-note{margin-top:26px;font:600 1rem var(--display);color:var(--brown)}
@media (max-width:820px){.ing{grid-template-columns:1fr 1fr}}

/* sizes */
.sizes{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.size{display:flex;flex-direction:column;gap:8px;border:2px solid var(--char);border-radius:22px;padding:24px;background:#fff;transition:transform .15s,border-color .15s,background-color .15s}
.size:hover{transform:translateY(-3px)}
.size.is-on{border-color:var(--red);background:#FFF1F1}
.s-code{font:800 3.2rem/1 "Bricolage Grotesque",Arial,sans-serif;letter-spacing:-.03em}
.s-g{font:700 1.1rem var(--display)}
.s-dog{margin:0;color:var(--muted)}
.s-for{margin:0;font-size:.95rem;color:var(--brown);font-style:italic}
.s-scale{height:18px;margin:6px 0 8px}
.s-scale span{display:block;height:100%;border-radius:6px;background:linear-gradient(180deg,#F1D58E,#D9A441 60%,#B7802F);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.s-btn{margin-top:auto;align-self:flex-start;background:var(--char);color:#fff;border:0;border-radius:999px;padding:11px 18px;font:700 .98rem var(--display)}
.s-btn:hover,.size.is-on .s-btn{background:var(--red)}
.scale-note{margin:14px 0 0;font-size:.92rem;color:var(--muted)}
@media (max-width:900px){.sizes{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.sizes{gap:10px}.size{padding:18px 14px}.s-code{font-size:2.5rem}}
.safety{margin-top:34px;background:var(--cream);border-left:6px solid var(--brown);padding:22px 26px;border-radius:0 16px 16px 0}
.safety p{margin:0;max-width:none}.safety b{font-family:var(--display)}

/* cards */
.cards{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{display:flex;flex-direction:column;background:#fff;border-radius:26px;padding:26px;border:1px solid var(--rule)}
.card .art{height:200px;margin:0 0 20px;background:var(--cream);border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .art img{max-height:180px;width:auto}
.card p{color:var(--muted);margin:8px 0 18px}
.card .link{margin-top:auto}
.card .soon{align-self:flex-start;font:700 .8rem var(--display);letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--brown);border-radius:999px;padding:4px 10px;margin-bottom:10px}
@media (max-width:880px){.cards{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps li{counter-increment:s;background:#fff;border-radius:24px;padding:28px;position:relative;border:1px solid var(--rule)}
.steps li::before{content:counter(s);font:800 3rem/1 "Bricolage Grotesque",Arial,sans-serif;color:var(--red)}
.steps h3{margin:12px 0 6px}
.steps p{margin:0;color:var(--muted)}
@media (max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* infographics */
.graphics{display:grid;gap:28px;margin-top:44px}
.graphics figure{margin:0;background:#fff;border-radius:24px;overflow:hidden;border:1px solid var(--rule)}
.graphics figcaption{padding:14px 22px;font:600 .98rem var(--display);color:var(--muted)}

/* waitlist */
.waitlist{background:var(--char);color:#fff}
.waitlist .kicker{color:#E5B9A4}
.waitlist .lede{color:#CFCDBD}
.tf-embed{width:100%;height:520px;border:0;border-radius:18px;background:#fff}
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field>span,.fs legend{font:700 .98rem var(--display)}
.input,.select,.textarea{width:100%;min-height:54px;padding:13px 16px;border-radius:14px;border:2px solid transparent;font:inherit;font-size:1rem;background:#fff;color:var(--char)}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--char)}
.fs{border:0;margin:0;padding:0}.fs legend{margin-bottom:10px;padding:0}
.checks{display:flex;flex-wrap:wrap;gap:10px}
.check{display:inline-flex;align-items:center;gap:8px;background:var(--char-2);border:1.5px solid #46443D;border-radius:999px;padding:8px 14px;font:600 .95rem var(--display)}
.check input{width:18px;height:18px;accent-color:var(--char);margin:0}
.check:has(input:checked){background:#fff;color:var(--char);border-color:#fff}
.form-note{font-size:.92rem;margin:0;opacity:.9}
.msg{margin:0;min-height:1.5em;font:700 1.02rem var(--display)}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.form .btn{justify-self:start}
.waitlist .two,.wholesale-form .two{align-items:start}

/* wholesale */
.ws-hero{background:#1F1E1B}
.dark{background:var(--char);color:var(--cream)}
.dark h2{color:#fff}.dark .lede,.dark p{color:#CFCDBD}.dark a{color:#fff}
.dark .input,.dark .select,.dark .textarea{background:var(--char-2);color:#fff;border-color:#46443D}
.dark .input:focus,.dark .select:focus,.dark .textarea:focus{border-color:var(--cream)}
.stats{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stats li{background:#fff;border-radius:22px;padding:24px;border:1px solid var(--rule)}
.stats b{display:block;font:800 2.4rem/1 var(--display);color:var(--red);letter-spacing:-.03em}
.stats span{display:block;margin-top:8px;color:var(--muted)}
@media (max-width:880px){.stats{grid-template-columns:1fr 1fr}}
.photo-band{position:relative;padding:0;height:min(52vh,460px);overflow:hidden}
.photo-band img{width:100%;height:100%;object-fit:cover}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--rule);border-radius:18px;margin-bottom:12px;padding:0 24px}
.faq summary{list-style:none;padding:20px 36px 20px 0;font:700 1.15rem/1.35 var(--display);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:14px;font:800 1.8rem/1 var(--display);color:var(--red);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding-bottom:6px}

/* contact band (faq) */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.contact-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.contact-list li{background:var(--char-2);border:1px solid #46443D;border-radius:18px;padding:18px 22px}
.contact-list b{display:block;font:700 .88rem var(--display);letter-spacing:.1em;text-transform:uppercase;color:#A9A796;margin-bottom:4px}
.contact-list a{font:600 1.15rem var(--display);color:#fff;text-decoration:none}
.contact-list a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:880px){.contact-grid{grid-template-columns:1fr;gap:32px}}

/* cta strip */
.cta-strip{background:var(--cream)}
.cta-strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-strip h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}

/* footer */
.site-foot{background:var(--char);color:#A9A796;font-size:.96rem;position:relative}
.foot-band{background:var(--red);color:#fff;text-align:center;padding:16px 24px;font:700 .9rem var(--display);letter-spacing:.14em;text-transform:uppercase;border-radius:50% 50% 0 0/40px 40px 0 0;margin-top:-1px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;padding:52px 24px 30px}
.site-foot .logo img{height:40px}
.site-foot a{color:var(--cream)}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-links a{text-decoration:none}.foot-links a:hover{text-decoration:underline}
.foot-h{font:700 .85rem var(--display);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:12px}
.copy{border-top:1px solid #36352F;padding:20px 24px 28px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr}}

/* little wiggle on paw marks */
@keyframes wag{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.wag:hover{animation:wag .4s ease-in-out 2}