@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Manrope:wght@400;500;600;700&display=swap');
:root {
  --u:min(.131406vw,1.892px);
  --paper:#f6efe6;
  --sand:#eedcc8;
  --ink:#28221c;
  --brown:#7c4b28;
  --line:#eaded4;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Manrope',Arial,sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:25px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(12px,1.45vw,21px);
  -webkit-font-smoothing:antialiased}
button,input {
  font:inherit}
button,a {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
button {
  color:inherit}
a {
  color:inherit;
  text-decoration:none}
button {
  border:0;
  background:none;
  padding:0}
img {
  display:block;
  max-width:100%}
svg {
  display:block;
  width:24px;
  height:24px}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:2px solid #9b653d;
  outline-offset:5px}
h1,h2,h3,p {
  margin:0}
h1,h2 {
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:-.035em}
h2 {
  font-size:calc(32 * var(--u));
  line-height:1.04}
p {
  line-height:1.45}
.container {
  width:91.2%;
  max-width:1314px;
  margin-inline:auto}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:calc(9 * var(--u));
  padding:calc(11 * var(--u)) calc(20 * var(--u));
  min-height:calc(39 * var(--u));
  font-size:calc(10 * var(--u));
  font-weight:600;
  border:1px solid transparent;
  border-radius:calc(4 * var(--u));
  white-space:nowrap;
  transition:box-shadow .2s,transform .2s}
.button:hover {
  transform:translateY(-2px);
  box-shadow:0 7px 20px #70411f22}
.primary {
  background:linear-gradient(135deg,#a06c43,#75431f);
  color:#fff;
  box-shadow:inset 0 1px 1px #ffffff36}
.outline {
  border-color:#a16d48;
  color:var(--brown);
  background:#fff9f144}
.hero {
  position:relative;
  height:calc(357 * var(--u));
  max-width:1440px;
  margin:auto;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(110deg,#ecded2,#faf4eb 35%,#eddfd1)}
.hero-image {
  position:absolute;
  inset:0 0 0 35.2%;
  background:url('assets/hero-cats.png') right center/100% 100% no-repeat;
  z-index:-1}
.hero-image:before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#f6ede3 0%,#f6ede3aa 3%,transparent 13%)}
.header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:flex-start;
  gap:calc(23 * var(--u));
  padding:calc(10 * var(--u)) 3.3%;
  z-index:5}
.brand {
  flex:0 0 calc(145 * var(--u))}
.brand img {
  width:100%;
  height:auto;
  mix-blend-mode:multiply}
.header nav {
  display:flex;
  align-items:center;
  gap:calc(20 * var(--u));
  padding-top:calc(10 * var(--u));
  white-space:nowrap;
  flex:1}
.header nav a,.header nav button {
  font-size:calc(9 * var(--u));
  position:relative}
.header nav a:first-child {
  color:var(--brown)}
.header nav a:first-child:after {
  content:'';
  position:absolute;
  bottom:calc(-6 * var(--u));
  left:0;
  right:0;
  height:1px;
  background:var(--brown)}
.header nav a:hover,.header nav button:hover {
  color:#a46c43}
.header-tools {
  display:flex;
  gap:calc(8 * var(--u));
  align-items:center;
  padding-top:calc(5 * var(--u))}
.language {
  background:#fff9f2;
  border-radius:calc(5 * var(--u));
  padding:calc(4 * var(--u)) calc(7 * var(--u));
  font-size:calc(9 * var(--u));
  white-space:nowrap;
  color:var(--brown)}
.search svg {
  width:calc(16 * var(--u));
  height:calc(16 * var(--u));
  color:var(--brown)}
.menu-toggle {
  display:none}
.hero-copy {
  position:absolute;
  top:calc(141 * var(--u));
  left:4.4%}
.eyebrow {
  display:block;
  font-family:var(--sans);
  font-weight:400;
  letter-spacing:normal;
  text-transform:uppercase;
  font-size:calc(14 * var(--u));
  line-height:1.16;
  color:var(--brown)}
h1 {
  font-size:calc(42 * var(--u));
  line-height:1.04;
  color:#553418;
  margin-top:calc(2 * var(--u));
  font-weight:500}
.tagline {
  font-size:calc(13 * var(--u));
  line-height:1.24;
  margin-top:calc(9 * var(--u))}
.hero-actions {
  display:flex;
  gap:calc(12 * var(--u));
  margin-top:calc(21 * var(--u))}
.whatsapp {
  background:white;
  color:#20201e;
  box-shadow:0 2px 8px #7e57341a}
.wa-icon {
  color:#2bc765;
  font-size:calc(19 * var(--u));
  line-height:1}
.benefits {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  max-width:1440px;
  margin:auto;
  height:calc(95 * var(--u));
  padding:calc(20 * var(--u)) 4.4%;
  background:linear-gradient(100deg,#fdf7f2,#fcf7f1)}
.benefits>div {
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  gap:calc(7 * var(--u));
  text-align:center}
.benefits>div+div:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:calc(52 * var(--u));
  width:1px;
  background:var(--line)}
.benefits svg {
  width:calc(25 * var(--u));
  height:calc(25 * var(--u));
  color:#8d542d}
.benefits p {
  font-size:calc(9 * var(--u));
  line-height:1.22;
  font-weight:500}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:calc(13 * var(--u))}
.section-heading p {
  font-size:calc(11 * var(--u));
  margin-top:calc(2 * var(--u))}
.kittens {
  padding-top:calc(18 * var(--u));
  padding-bottom:calc(12 * var(--u))}
.catalog-controls {
  display:flex;
  gap:calc(7 * var(--u));
  align-items:center}
.text-button {
  font-size:calc(9 * var(--u));
  color:var(--brown);
  white-space:nowrap}
.text-button:hover {
  text-decoration:underline}
.arrow {
  background:#f4eae1;
  border-radius:calc(5 * var(--u));
  width:calc(23 * var(--u));
  height:calc(23 * var(--u));
  font:calc(25 * var(--u))/1 Georgia;
  color:var(--brown)}
.kitten-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:calc(9 * var(--u))}
.kitten-card {
  background:#fcf7f0;
  border:1px solid #e5d6c6;
  border-radius:calc(5 * var(--u));
  overflow:hidden;
  box-shadow:0 2px 7px #60442c06;
  transition:transform .2s}
.kitten-card:hover {
  transform:translateY(-3px)}
.photo-button {
  display:block;
  width:100%;
  overflow:hidden}
.photo-button img {
  width:100%;
  aspect-ratio:1.59;
  object-fit:cover;
  transition:transform .4s}
.photo-button:hover img {
  transform:scale(1.025)}
.card-body {
  padding:calc(11 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u))}
.card-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4px}
.card-title button {
  font-size:calc(11 * var(--u));
  font-weight:700}
.status {
  background:#48bc64;
  color:#fff;
  font-size:calc(9 * var(--u));
  padding:calc(4 * var(--u)) calc(6 * var(--u));
  border-radius:calc(5 * var(--u));
  white-space:nowrap}
.reserved {
  background:#f8dfc5;
  color:#88552e}
.card-body p {
  font-size:calc(9 * var(--u));
  color:#8a8987;
  margin-top:calc(3 * var(--u))}
.card-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:calc(10 * var(--u))}
.card-bottom strong {
  font-size:calc(12 * var(--u));
  font-weight:700}
.favorite {
  color:#975c35;
  padding:3px}
.favorite svg {
  width:calc(18 * var(--u));
  height:calc(18 * var(--u))}
.favorite[aria-pressed=true] svg {
  fill:#975c35}
.breed {
  display:grid;
  grid-template-columns:41% 36% 23%;
  max-width:1440px;
  margin:auto;
  height:calc(212 * var(--u));
  background:#f5e7d8;
  overflow:hidden}
.breed-image {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:38% center;
  mask-image:linear-gradient(90deg,#000 90%,transparent)}
.breed-copy {
  padding:calc(20 * var(--u)) calc(15 * var(--u)) calc(17 * var(--u))}
.breed-copy h2 {
  font-size:calc(31 * var(--u));
  line-height:.93}
.breed-copy p {
  font-size:calc(11 * var(--u));
  line-height:1.4;
  margin:calc(12 * var(--u)) 0 calc(12 * var(--u))}
.breed-copy .button {
  min-width:calc(166 * var(--u))}
.traits {
  margin:calc(4 * var(--u)) 0;
  background:#fff8eead;
  border-radius:calc(13 * var(--u)) 0 0 calc(13 * var(--u));
  padding:calc(17 * var(--u)) calc(20 * var(--u));
  display:flex;
  flex-direction:column;
  justify-content:space-between}
.traits>div {
  display:flex;
  align-items:center;
  gap:calc(16 * var(--u))}
.traits svg {
  width:calc(25 * var(--u));
  height:calc(25 * var(--u));
  flex-shrink:0;
  color:#92572d}
.traits span {
  font-size:calc(10 * var(--u));
  line-height:1.35}
.about {
  max-width:1440px;
  margin:auto;
  display:grid;
  grid-template-columns:39% 61%;
  min-height:calc(217 * var(--u));
  background:#fffaf5}
.about-copy {
  padding:calc(11 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u)) calc(34 * var(--u))}
.about-copy h2 {
  margin-bottom:calc(17 * var(--u))}
.about-copy p {
  font-size:calc(10.5 * var(--u));
  line-height:1.48;
  margin-bottom:calc(14 * var(--u))}
.about-copy .button {
  width:100%;
  padding-inline:calc(8 * var(--u))}
.about>img {
  width:100%;
  height:calc(217 * var(--u));
  object-fit:cover;
  border-radius:calc(5 * var(--u)) 0 0 calc(5 * var(--u))}
.articles {
  padding-top:calc(23 * var(--u));
  padding-bottom:calc(34 * var(--u))}
.article-grid {
  display:grid;
  border-top:1px solid #d9c8b6;
}
.article-card {
  border-bottom:1px solid #d9c8b6;
  transition:background-color .2s;
}
.article-topic {
  grid-area:1 / 1 / span 2;
  color:var(--brown);
  font-size:clamp(12px,1vw,15px);
}
.article-card:hover,.article-card:focus-within {
  background:#efe3d5;
}
.article-body {
  display:grid;
  grid-template-columns:minmax(84px,14%) minmax(0,1fr) auto;
  gap:5px clamp(12px,2vw,28px);
  align-items:baseline;
  padding:clamp(14px,1.8vw,25px) clamp(10px,1.4vw,20px);
}
.article-body h3 {
  grid-area:1 / 2;
  font-family:var(--serif);
  font-size:clamp(23px,2.4vw,34px);
  font-weight:600;
  line-height:1.08;
}
.article-body h3 button {
  text-align:left;
}
.article-body h3 button:hover {
  color:var(--brown);
}
.article-body h3 button::after {
  content:' →';
  color:var(--brown);
}
.article-body p {
  grid-area:2 / 2;
  color:#685a4e;
  font-size:clamp(12px,1vw,15px);
}
.article-body time {
  grid-area:1 / 3;
  color:#685a4e;
  font-size:clamp(11px,.9vw,14px);
  white-space:nowrap;
}
.article-reading {
  max-width:65ch;
  line-height:1.65;
}
.article-reading p + p {
  margin-top:.8em;
}
.article-reading h3 {
  font-family:var(--serif);
  font-size:clamp(22px,2vw,28px);
  line-height:1.15;
  margin:1em 0 .35em;
}
.article-reading h3:first-child { margin-top:0; }
.article-reading ul { padding-inline-start:1.4em; }
.article-reading a {
  color:var(--brown);
  text-decoration:underline;
}
@media(max-width:700px) {
  .article-body { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; }
  .article-topic { grid-area:1 / 1; }
  .article-body time { grid-area:1 / 2; }
  .article-body h3 { grid-area:2 / 1 / 3 / -1; }
  .article-body p { grid-area:3 / 1 / 4 / -1; }
}

.contact {
  position:relative;
  isolation:isolate;
  height:calc(262 * var(--u));
  max-width:1440px;
  margin:auto;
  background:linear-gradient(100deg,#fffaf4,#f4e4d5);
  overflow:hidden}
.contact-image {
  position:absolute;
  inset:0 0 0 42%;
  background:url('assets/hero-eye-restored.webp') center 25%/cover no-repeat;
  mask-image:linear-gradient(90deg,transparent 0%,#000 32%);
  z-index:-1}
.contact-copy {
  padding:calc(48 * var(--u)) 0 0 4.5%}
.contact-copy p {
  font-size:calc(13 * var(--u));
  line-height:1.35;
  margin:calc(16 * var(--u)) 0 calc(22 * var(--u))}
.contact-actions {
  display:flex;
  gap:calc(13 * var(--u))}
.contact-actions .outline {
  min-width:calc(126 * var(--u))}
footer {
  background:linear-gradient(130deg,#fdf9f5,#faf7f4);
  max-width:1440px;
  margin:auto}
.footer-main {
  display:grid;
  grid-template-columns:30% 19% 27% 24%;
  padding-top:calc(33 * var(--u));
  padding-bottom:calc(59 * var(--u));
  gap:0}
.footer-brand img {
  width:calc(155 * var(--u));
  height:auto;
  mix-blend-mode:multiply}
.footer-brand p {
  font-size:calc(10 * var(--u));
  line-height:1.5;
  color:#99938d;
  margin-top:calc(16 * var(--u))}
.footer-column {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:calc(13 * var(--u));
  padding-top:calc(6 * var(--u));
  font-size:calc(9 * var(--u))}
.footer-column h3 {
  font-size:calc(10 * var(--u));
  color:var(--brown);
  margin-bottom:calc(2 * var(--u));
  font-weight:600}
.footer-column nav {
  display:flex;
  flex-direction:column;
  gap:calc(12 * var(--u));
  align-items:flex-start}
.footer-column a:hover,.footer-column nav button:hover {
  text-decoration:underline}
.social-icons {
  display:flex;
  gap:calc(18 * var(--u));
  align-items:center;
  color:#9a6339}
.social-icons button {
  font-size:calc(23 * var(--u));
  line-height:1;
  font-weight:700}
.socials .button {
  font-size:calc(9 * var(--u));
  border-radius:99px;
  min-height:calc(35 * var(--u));
  padding-inline:calc(15 * var(--u));
  margin-top:calc(6 * var(--u))}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:calc(19 * var(--u));
  padding-bottom:calc(72 * var(--u));
  font-size:calc(9 * var(--u));
  color:#98918b}
.footer-bottom button:last-child {
  color:var(--brown)}
dialog {
  width:min(560px,92vw);
  max-height:85vh;
  overflow:auto;
  border:1px solid #e4d0bf;
  border-radius:14px;
  padding:35px;
  color:var(--ink);
  background:#fffbf7;
  box-shadow:0 20px 100px #39271c44}
dialog::backdrop {
  background:#38281d80;
  backdrop-filter:blur(4px)}
dialog h2 {
  font-size:32px;
  margin-bottom:18px}
dialog p {
  font-size:15px;
  margin-bottom:18px}
dialog .button {
  font-size:13px;
  min-height:44px;
  padding:12px 20px}
dialog a:not(.button) {
  text-decoration:underline;
  color:var(--brown)}
.dialog-close {
  position:absolute;
  right:14px;
  top:8px;
  font-size:30px}
.dialog-image {
  width:100%;
  border-radius:8px;
  margin-bottom:18px}
.dialog-links {
  display:flex;
  flex-direction:column;
  gap:15px;
  align-items:flex-start}
.search-input {
  width:100%;
  border:1px solid #d7bda7;
  background:white;
  border-radius:5px;
  padding:12px;
  margin:10px 0 18px}
.search-results {
  display:flex;
  flex-direction:column;
  gap:14px}
.sr-only,.skip-link {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
.skip-link:focus {
  clip:auto;
  width:auto;
  height:auto;
  padding:15px;
  background:#fff;
  z-index:20;
  margin:0}

@media(min-width:1441px) {
  body {
  max-width:1440px;
  margin:auto;
  box-shadow:0 0 100px #6b412411}
}

@media(max-width:700px) {
  :root {
  --u:1px}
body {
  font-size:14px}
h2 {
  font-size:32px}
.container {
  width:90%}
.hero {
  height:640px}
.header {
  padding:14px 5%;
  align-items:flex-start;
  gap:12px}
.brand {
  flex-basis:120px}
.header-tools {
  margin-left:auto;
  padding-top:10px}
.language {
  font-size:11px;
  padding:5px 7px}
.search svg {
  width:18px;
  height:18px}
.menu-toggle {
  display:block;
  position:absolute;
  top:24px;
  left:49%;
  font-size:25px;
  color:var(--brown)}
.header nav {
  display:none;
  position:absolute;
  top:110px;
  left:5%;
  right:5%;
  padding:20px;
  background:#fffaf6;
  box-shadow:0 10px 30px #71482125;
  border-radius:8px;
  flex-direction:column;
  align-items:stretch;
  gap:18px}
.header nav.open {
  display:flex}
.header nav a,.header nav button {
  font-size:15px;
  text-align:left}
.header nav a:first-child:after {
  display:none}
.hero-image {
  inset:230px -60px 0 0;
  background-size:auto 100%;
  background-position:right bottom}
.hero-image:before {
  background:linear-gradient(#f7eee4 0,transparent 25%)}
.hero-copy {
  top:135px;
  left:5%;
  right:5%}
.eyebrow {
  font-size:12px}
h1 {
  font-size:42px;
  line-height:1.1}
.tagline {
  font-size:13px;
  margin-top:7px}
.hero-actions {
  position:absolute;
  top:420px;
  left:0;
  right:0;
  gap:8px}
.button {
  font-size:11px;
  min-height:42px;
  padding:12px 14px}
.whatsapp {
  font-size:10px}
.benefits {
  height:auto;
  grid-template-columns:repeat(2,1fr);
  padding:25px 5%;
  gap:24px 0}
.benefits>div:nth-child(3):before {
  display:none}
.benefits svg {
  width:29px;
  height:29px}
.benefits p {
  font-size:11px;
  line-height:1.35}
.benefits>div+div:before {
  height:60px}
.section-heading {
  align-items:flex-start;
  margin-bottom:16px;
  gap:12px}
.section-heading p {
  font-size:12px;
  margin-top:6px}
.catalog-controls {
  gap:6px;
  padding-top:7px}
.catalog-controls .text-button {
  display:none}
.text-button {
  font-size:10px}
.arrow {
  width:28px;
  height:28px;
  font-size:27px}
.kittens {
  padding-block:28px}
.kitten-grid {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px}
.photo-button,
.catalog-photo {
  position:relative;
  aspect-ratio:4 / 3;
}
.photo-button img,
.catalog-photo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 30%;
}
.card-body {
  padding:10px}
.card-title {
  flex-wrap:wrap;
  gap:6px}
.card-title button {
  font-size:12px}
.status {
  font-size:9px}
.card-body p {
  font-size:10px}
.card-bottom strong {
  font-size:13px}
.favorite svg {
  width:20px;
  height:20px}
.breed {
  height:auto;
  grid-template-columns:1fr 1fr}
.breed-image {
  grid-column:1/-1;
  height:250px;
  mask-image:none}
.breed-copy {
  padding:25px 18px}
.breed-copy h2 {
  font-size:30px}
.breed-copy p {
  font-size:12px}
.breed-copy .button {
  min-width:0;
  width:100%;
  font-size:10px}
.traits {
  padding:25px 20px;
  margin:0}
.traits span {
  font-size:11px}
.traits>div {
  gap:12px}
.about {
  grid-template-columns:1fr}
.about-copy {
  padding:28px 5%}
.about-copy h2 {
  margin-bottom:16px}
.about-copy p {
  font-size:13px;
  max-width:500px}
.about-copy .button {
  width:auto;
  padding-inline:20px}
.about>img {
  height:260px;
  border-radius:0}
.articles {
  padding-block:30px}
.articles .section-heading {
  flex-direction:column}

.contact {
  height:550px}
.contact-copy {
  padding:30px 5%}
.contact-copy p {
  font-size:14px;
  margin:16px 0 20px}
.contact-image {
  inset:250px 0 0 0;
  background-position:right 25%;
  mask-image:linear-gradient(180deg,transparent 0%,#000 24%)}
.contact-actions {
  gap:10px}
.contact-actions .outline {
  min-width:110px}
.contact-actions .button {
  font-size:10px}
.footer-main {
  grid-template-columns:1fr 1fr;
  gap:30px 15px;
  padding-block:35px}
.footer-brand img {
  width:145px}
.footer-brand p {
  font-size:11px}
.footer-column {
  font-size:11px;
  gap:15px}
.footer-column h3 {
  font-size:12px}
.footer-column nav {
  gap:13px}
.socials .button {
  font-size:10px;
  padding-inline:12px}
.social-icons button {
  font-size:26px}
.footer-bottom {
  flex-wrap:wrap;
  justify-content:flex-start;
  font-size:10px;
  padding-block:20px 35px;
  gap:18px}
.footer-bottom>span {
  flex-basis:100%}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  transition:none!important;
  animation:none!important}
}


/* Blend the extracted photography into the live page, hiding raster UI at its edges. */
@media(min-width:701px) {
  .hero-image:before {
  background:linear-gradient(90deg,#f6ede3 0%,#f6ede3 16%,#f6ede300 27%)}
.hero-image:after {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:calc(45 * var(--u));
  background:linear-gradient(100deg,#eee1d4,#eadccc);
  mask-image:linear-gradient(#000 75%,transparent)}
.hero-copy {
  z-index:1}
.hero-actions {
  margin-top:calc(18 * var(--u))}
.card-body {
  padding-bottom:calc(8 * var(--u))}
.card-bottom {
  margin-top:calc(8 * var(--u))}
.breed-image {
  object-position:center;
  mask-image:linear-gradient(90deg,#000 92%,transparent)}
}

.brand img,.footer-brand img {
  mask-image:radial-gradient(ellipse at center,#000 55%,transparent 80%)}


@media(min-width:701px) {
  .hero-image {
  mask-image:url('assets/hero-mask.svg');
  mask-size:100% 100%;
  mask-repeat:no-repeat}
.hero-image:before,.hero-image:after {
  display:none}
}

.brand img,.footer-brand img {
  mask-image:none}


@media(max-width:700px) {
  .hero {
  height:600px}
.hero-image {
  inset:275px 0 0;
  background-image:url('assets/hero-mobile.png');
  background-size:100% auto;
  background-position:center top;
  mask-image:url('assets/hero-mobile-mask.svg');
  mask-size:100% auto;
  mask-repeat:no-repeat}
.hero-image:before {
  display:none}
.hero-actions {
  top:405px}
.hero-image:after {
  display:none}
}

@keyframes enter {
  from {
  opacity:0;
  transform:translateY(8px)}
to {
  opacity:1;
  transform:translateY(0)}
}

.hero-copy {
  animation:enter .65s ease-out both}


@media(max-width:700px) {
  .hero-image {
  height:calc(100vw * .63083);
  bottom:auto;
  mask-size:100% 100%}
}


.brand img,.footer-brand img {
  filter:brightness(1.1) contrast(1.18)}


.hero-image {
  inset:4% 0 0 36%;
  height:auto;
  background:none;
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%),linear-gradient(180deg,transparent 0%,#000 10%);
  mask-composite:intersect;
  mask-size:100% 100%;
  mask-repeat:no-repeat;
}
.hero-image :is(img, canvas) {
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center top;
}
.hero-image canvas {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hero-image::before,.hero-image::after { display:none; }
@media(max-width:700px) {
  .hero-image {
    inset:270px 0 auto;
    height:auto;
    aspect-ratio:4 / 3;
    mask-image:none;
    background:none;
  }
  .hero-image img { object-fit:contain; object-position:center; }
}
@media (max-width:700px), (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
  .hero-image canvas { display:none; }
}

/* Native vector logo, with a transparent background and its own brand colors. */
.brand img,.footer-brand img {
  filter:none;
  mix-blend-mode:normal;
  mask-image:none;
}
.brand-lockup {
  display:inline-flex;
  width:100%;
  max-width:clamp(120px,14vw,240px);
  flex-direction:column;
  align-items:center;
  color:#59371f;
  line-height:1;
}
.brand .brand-lockup img,.footer-brand .brand-lockup img {
  width:51%;
  height:auto;
  margin-bottom:-3%;
}
.brand-name {
  font:clamp(17px,2vw,34px)/1.05 Georgia,serif;
  letter-spacing:-.045em;
}
.brand-caption {
  margin-top:5px;
  font-size:clamp(6px,.62vw,10px);
  letter-spacing:.24em;
  text-transform:uppercase;
}

/* A lighter secondary contact action on the first screen. */
.hero-actions { align-items:center; }
.hero .whatsapp {
  min-height:40px;
  padding:10px 15px;
  gap:8px;
  font-size:clamp(11px,.9vw,13px);
  font-weight:500;
  line-height:1.2;
  color:var(--brown);
  background:rgba(255,251,246,.94);
  border:1px solid rgba(164,109,67,.24);
  border-radius:6px;
  box-shadow:none;
}
.hero .whatsapp:hover {
  background:#fffaf4;
  border-color:rgba(164,109,67,.55);
  box-shadow:0 3px 10px #70411f12;
  transform:translateY(-1px);
}
.hero .whatsapp .wa-icon {
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:currentColor;
}
@media(max-width:700px) {
  .hero .whatsapp { min-height:42px; padding:10px 12px; font-size:10px; gap:6px; }
  .hero .whatsapp .wa-icon { width:16px; height:16px; flex-basis:16px; }
}

/* One continuous cream transition: hero → benefits → kitten catalogue. */
.hero::after {
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:clamp(38px,5vw,72px);
  background:linear-gradient(180deg,rgba(252,248,244,0),rgba(252,248,244,.55) 65%,var(--paper));
  pointer-events:none;
  z-index:0;
}
.benefits {
  height:auto;
  background:var(--paper);
  padding-top:clamp(15px,1.8vw,26px);
  padding-bottom:clamp(12px,1.5vw,22px);
  column-gap:calc(9 * var(--u));
  align-items:start;
}
.benefits>div { gap:clamp(7px,.75vw,11px); }
.benefits p {
  min-height:3.75em;
  line-height:1.25;
}
.benefits>div+div::before {
  left:calc(-4.5 * var(--u));
  top:4px;
  height:75%;
  background:linear-gradient(180deg,transparent,#dfcbbb 25%,#dfcbbb 75%,transparent);
  opacity:.65;
}
.kittens {
  padding-top:clamp(8px,1vw,14px);
  padding-bottom:clamp(16px,1.8vw,26px);
}
.kittens .section-heading {
  align-items:flex-end;
  margin-bottom:clamp(13px,1.5vw,22px);
}
.kittens .catalog-controls { padding-bottom:3px; }
@media(max-width:700px) {
  .hero { display:flex; flex-direction:column; height:auto; }
  .hero .header { position:relative; }
  .hero-copy { display:contents; }
  .hero-copy h1 { margin:16px 5% 0; }
  .hero-copy .tagline { margin:7px 5% 20px; }
  .hero-actions {
    position:static;
    order:2;
    justify-content:center;
    margin:0;
    padding:12px 5% 8px;
    background:var(--paper);
  }
  .hero-image { position:relative; inset:auto; order:1; z-index:0; }
  .hero::after { display:none; }
  .hero .hero-image::after {
    content:'';
    display:block;
    position:absolute;
    inset:auto 0 0;
    height:36px;
    background:linear-gradient(transparent,var(--paper));
    pointer-events:none;
  }
  .benefits { padding:18px 5% 12px; gap:16px 12px; }
  .benefits>div+div::before { left:-6px; }
  .kittens { padding-top:14px; padding-bottom:24px; }
  .kittens .section-heading { align-items:flex-start; margin-bottom:16px; }
}

/* Mini catalogue: independent sizing keeps twelve cards readable at any viewport. */
dialog.catalog-dialog {
  width:min(1080px,calc(100vw - 32px));
  max-width:none;
  max-height:88vh;
  padding:30px;
  scrollbar-gutter:stable;
}
.catalog-intro { margin-bottom:22px; }
.catalog-count { display:block; color:var(--brown); font-size:14px; font-weight:600; margin-bottom:8px; }
.catalog-intro p { max-width:680px; color:#8a7b70; font-size:12px; margin:0; line-height:1.5; }
.mini-catalog { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.catalog-card { overflow:hidden; background:#fff; border:1px solid #eaded4; border-radius:9px; }
.catalog-photo { display:block; width:100%; overflow:hidden; }
.catalog-photo img { width:100%; aspect-ratio:1.35; object-fit:cover; transition:transform .25s; }
.catalog-photo:hover img { transform:scale(1.03); }
.catalog-card-body { padding:12px; }
.catalog-card-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; }
.catalog-card-heading h3 { font-size:13px; font-weight:600; }
.catalog-status { font-size:10px; color:#467044; background:#edf4e9; padding:4px 6px; border-radius:5px; }
.catalog-card-body p { font-size:11px; line-height:1.4; color:#8a7b70; margin:8px 0 16px; }
.catalog-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.catalog-card-bottom strong { font-size:13px; }
.catalog-card-bottom button,.catalog-back { font-size:12px; color:var(--brown); }
.catalog-card-bottom button:hover,.catalog-back:hover { text-decoration:underline; }
.catalog-back { display:block; margin:0 0 16px; padding:5px 0; }
@media(max-width:850px) { .mini-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) {
  dialog.catalog-dialog { width:calc(100vw - 20px); max-height:90vh; padding:26px 15px 18px; }
  .mini-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .catalog-card-body { padding:10px; }
  .catalog-card-bottom { flex-wrap:wrap; }
  .catalog-card-heading h3 { font-size:12px; }
  .catalog-intro { margin-bottom:16px; }
  /* Keep the catalogue entry available on phones too. */
  .catalog-controls .text-button { display:inline-block; font-size:11px; white-space:normal; text-align:right; }
  .kittens .section-heading { flex-wrap:wrap; }
  .catalog-controls { margin-left:auto; }
}
@media(max-width:340px) { .mini-catalog { grid-template-columns:1fr; } }
@media(min-width:601px) and (max-width:700px) {
  .catalog-controls .text-button { display:inline-block; font-size:11px; }
  .kittens .section-heading { flex-wrap:wrap; }
}

/* Soft catalogue entrance, staggered cards, and an animated exit (including Escape). */
@keyframes catalog-open {
  from { opacity:0; transform:translateY(8px) scale(.995); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes catalog-backdrop-in { from { opacity:0; } to { opacity:1; } }
@keyframes catalog-card-in {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes catalog-close {
  from { opacity:1; transform:translateY(0) scale(1); }
  to { opacity:0; transform:translateY(5px) scale(.995); }
}
@keyframes catalog-backdrop-out { from { opacity:1; } to { opacity:0; } }
dialog.catalog-dialog[open] { animation:catalog-open 600ms cubic-bezier(.22,1,.36,1) both; }
dialog.catalog-dialog[open]::backdrop { animation:catalog-backdrop-in 550ms ease-out both; }
dialog.catalog-dialog .catalog-card {
  animation:catalog-card-in 700ms cubic-bezier(.22,1,.36,1) both;
  animation-delay:var(--card-delay,0ms);
}
dialog.catalog-dialog.is-closing { animation:catalog-close 320ms ease-in-out both; pointer-events:none; }
dialog.catalog-dialog.is-closing::backdrop { animation:catalog-backdrop-out 320ms ease-in-out both; }
@media(prefers-reduced-motion:reduce) {
  dialog.catalog-dialog[open],dialog.catalog-dialog[open]::backdrop,
  dialog.catalog-dialog .catalog-card,dialog.catalog-dialog.is-closing,
  dialog.catalog-dialog.is-closing::backdrop { animation:none!important; }
}

/* Compact kitten profile: photo and essentials, with optional detail below. */
dialog.kitten-profile-dialog { width:min(850px,calc(100vw - 32px)); max-width:none; max-height:90vh; padding:26px; animation:catalog-open 450ms cubic-bezier(.22,1,.36,1) both; }
.kitten-profile-dialog #dialog-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.profile-nav { display:flex; justify-content:space-between; align-items:center; padding-right:26px; margin-bottom:16px; color:#9b8878; font-size:11px; }
.profile-nav .catalog-back { margin:0; padding:3px 0; }
.kitten-profile { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); gap:26px; align-items:start; }
.profile-gallery { overflow:hidden; border-radius:10px; background:#f3e9de; }
.profile-gallery img { width:100%; aspect-ratio:1 / 1; object-fit:contain; }
.profile-photo-caption { display:block; text-align:center; padding:12px; color:#947d69; font-size:11px; border-top:1px solid #e8d9ca; }
.profile-title { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.profile-title h3 { font:600 36px/1.1 var(--serif); color:#59371f; }
.profile-status { background:#edf3e7; color:#557444; font-size:11px; padding:5px 9px; border-radius:20px; white-space:nowrap; }
.profile-status.is-reserved { background:#f7e7d7; color:#9a6236; }
.profile-info p.profile-subtitle { margin:5px 0 18px; font-size:12px; color:#948374; }
.profile-facts { margin:0 0 15px; display:grid; gap:9px; font-size:12px; }
.profile-facts>div { display:grid; grid-template-columns:1fr 1.1fr; gap:12px; }
.profile-facts dt { color:#948374; }
.profile-facts dd { margin:0; font-weight:500; }
.profile-info p.profile-character { font-size:12px; line-height:1.6; margin:0 0 15px; }
.profile-documents { display:flex; flex-wrap:wrap; gap:8px 18px; border-top:1px solid #eaded4; border-bottom:1px solid #eaded4; padding:11px 0; font-size:10px; color:#948374; }
.profile-documents span { display:flex; flex-direction:column; gap:3px; }
.profile-documents b { font-weight:500; color:#655446; }
.profile-purchase { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:17px 0; }
.profile-purchase>div { display:flex; flex-direction:column; gap:3px; }
.profile-purchase>div>span { font-size:10px; color:#948374; }
.profile-purchase strong { font-size:23px; font-weight:600; }
.profile-purchase .button { font-size:11px; padding:11px 14px; min-height:42px; }
.profile-details { border-top:1px solid #eaded4; padding-top:12px; }
.profile-details summary { cursor:pointer; color:var(--brown); font-size:11px; line-height:1.5; }
.profile-details summary:focus-visible { outline:2px solid #9b653d; outline-offset:4px; }
.profile-details p { font-size:12px; line-height:1.6; margin:10px 0 0; color:#877365; }
.profile-info p.profile-demo { font-size:10px; color:#a39283; line-height:1.5; margin:14px 0 0; }
@media(max-width:600px) {
  dialog.kitten-profile-dialog { width:calc(100vw - 20px); padding:20px 16px; }
  .kitten-profile { grid-template-columns:1fr; gap:18px; }
  .profile-gallery img { aspect-ratio:1.5; }
  .profile-photo-caption { padding:8px; }
  .profile-title h3 { font-size:32px; }
  .profile-purchase .button { flex:1; }
}

.breed,.about {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.7vw,25px);
  height:auto;
  padding-inline:4.4%;
  overflow:visible;
  align-items:center;
}
.breed {
  padding-block:clamp(18px,2.3vw,34px);
  background:linear-gradient(180deg,var(--paper),#f5ece2 32%,#f2e6d8);
}
.breed-image {
  grid-column:1 / 6;
  height:clamp(240px,25vw,360px);
  object-position:50% 35%;
  border-radius:12px;
  mask-image:none;
}
.breed-copy { grid-column:6 / 10; padding:12px 0; }
.breed-copy h2 { line-height:1.04; }
.breed-copy p { margin-block:clamp(12px,1.4vw,20px); line-height:1.5; }
.traits {
  grid-column:10 / 13;
  align-self:stretch;
  margin:0;
  padding:clamp(16px,2vw,28px) clamp(12px,1.5vw,22px);
  border-radius:12px;
  background:linear-gradient(110deg,rgba(255,251,246,.5),rgba(255,251,246,.15));
  justify-content:space-evenly;
  gap:16px;
}
.traits>div { gap:clamp(10px,1.3vw,18px); }
.about {
  padding-top:clamp(12px,1.6vw,24px);
  padding-bottom:clamp(24px,3vw,44px);
  background:linear-gradient(180deg,#f2e6d8,#f7efe6 48%,var(--paper));
}
.about-copy { grid-column:1 / 6; padding:12px 0; }
.about-copy h2 { margin-bottom:clamp(14px,1.6vw,23px); }
.about-copy p { line-height:1.6; margin-bottom:clamp(16px,1.8vw,26px); }
.about-copy .button { width:auto; padding-inline:calc(20 * var(--u)); }
.about>img {
  grid-column:6 / 13;
  height:clamp(240px,25vw,360px);
  border-radius:12px;
  object-position:50% 68%;
}
.articles { padding-top:clamp(12px,1.6vw,24px); }
@media(max-width:700px) {
  .breed,.about { grid-template-columns:1fr 1fr; padding-inline:5%; column-gap:16px; }
  .breed { padding-block:20px; row-gap:18px; }
  .breed-image { grid-column:1 / -1; height:auto; aspect-ratio:4 / 3; }
  .breed-copy { grid-column:1; padding:8px 0; }
  .traits { grid-column:2; padding:14px 12px; gap:16px; }
  .about { padding-top:12px; padding-bottom:26px; row-gap:18px; }
  .about-copy { grid-column:1 / -1; padding:8px 0; }
  .about>img { grid-column:1 / -1; height:260px; }
  .about-copy .button { padding-inline:20px; }
  .articles { padding-top:16px; }
}

.article-content { padding:0 clamp(10px,1.4vw,20px) 12px; }
.article-content summary { cursor:pointer; color:var(--brown); font-size:clamp(12px,1vw,15px); }
.article-content[open] .article-reading { margin-top:16px; }