:root{
  --pink:#C7839E;
  --pink-deep:#A96580;
  --pink-soft:#FBEAF1;
  --pink-wash:#FFF8FB;

  --blue:#83AEC8;
  --blue-soft:#EAF5FB;

  --ink:#4E4650;
  --muted:#817781;
  --line:rgba(199,131,158,.22);

  --shadow:0 14px 36px rgba(103,80,94,.10);
  --shadow-soft:0 8px 22px rgba(103,80,94,.08);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 3% 8%, rgba(255,211,229,.35), transparent 22%),
    radial-gradient(circle at 97% 30%, rgba(206,232,246,.32), transparent 23%),
    radial-gradient(circle at 7% 72%, rgba(255,224,237,.30), transparent 22%),
    linear-gradient(180deg,#fff 0%,#fffafd 48%,#fff 100%);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}

a{
  color:inherit;
}

.mouse-page{
  position:relative;
  overflow:hidden;
}

.bg-decor{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.bg-paw{
  position:absolute;
  font-size:30px;
  opacity:.055;
}

.paw-a{top:790px;left:3%;transform:rotate(-18deg);}
.paw-b{top:1170px;right:4%;transform:rotate(14deg);}
.paw-c{top:1850px;left:6%;transform:rotate(10deg);}
.paw-d{top:2360px;right:6%;transform:rotate(-12deg);}

.bg-spark{
  position:absolute;
  width:18px;
  height:18px;
  opacity:.42;
  animation:twinkle 3.8s ease-in-out infinite;
}

.bg-spark::before,
.bg-spark::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:#E6A8C1;
  border-radius:999px;
  transform:translate(-50%,-50%);
}

.bg-spark::before{width:2px;height:18px;}
.bg-spark::after{width:18px;height:2px;}

.spark-a{top:690px;right:10%;}
.spark-b{top:1430px;left:7%;animation-delay:1s;}
.spark-c{top:2150px;right:9%;animation-delay:2s;}

@keyframes twinkle{
  0%,100%{opacity:.20;transform:scale(.82) rotate(0);}
  50%{opacity:.58;transform:scale(1.08) rotate(18deg);}
}

/* HERO */

.hero{
  position:relative;
  z-index:1;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  background:#eee;
}

.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 42%;
  transform:scale(1.01);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(25,20,24,.10) 0%,
      rgba(25,20,24,.03) 42%,
      rgba(25,20,24,.40) 100%
    );
}

.hero-card{
  position:relative;
  z-index:3;
  width:min(720px,calc(100% - 34px));
  margin-bottom:42px;
  padding:23px 28px 20px;
  text-align:center;
  border-radius:25px;
  background:rgba(255,255,255,.83);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 20px 55px rgba(30,20,27,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(251,234,241,.94);
  color:var(--pink-deep);
  font-size:11px;
  font-weight:900;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.hero-name{
  margin:0;
  color:var(--pink);
  font-size:60px;
  font-weight:900;
  line-height:.98;
  letter-spacing:.2px;
}

.hero-line{
  width:120px;
  height:3px;
  margin:13px auto 11px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
}

.hero-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;
  color:#615762;
  font-size:13px;
  font-weight:800;
}

.hero-meta span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.64);
}

.hero-petal{
  position:absolute;
  z-index:4;
  width:14px;
  height:20px;
  border-radius:70% 70% 70% 70% / 55% 55% 85% 85%;
  background:linear-gradient(#fff2f7,#efb5cc);
  opacity:.8;
  pointer-events:none;
  animation:heroPetal 8s linear infinite;
}

.hero-petal.p1{left:12%;top:-20px;}
.hero-petal.p2{left:31%;top:-20px;animation-delay:1.8s;}
.hero-petal.p3{left:66%;top:-20px;animation-delay:3.1s;}
.hero-petal.p4{left:86%;top:-20px;animation-delay:1s;}

@keyframes heroPetal{
  0%{transform:translate(0,-20px) rotate(0);opacity:0;}
  10%{opacity:.8;}
  100%{transform:translate(30px,610px) rotate(320deg);opacity:0;}
}

/* GENERAL */

.section{
  position:relative;
  z-index:1;
  width:min(1120px,calc(100% - 28px));
  margin:0 auto;
}

.section-title{
  margin:0;
  color:var(--pink);
  font-size:34px;
  font-weight:900;
  line-height:1.1;
}

.section-kicker{
  margin-bottom:7px;
  color:var(--pink-deep);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1.3px;
}

.section-copy{
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

/* PROFILE */

.profile-section{
  margin-top:34px;
}

.profile-shell{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:24px;
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.feature-photo-wrap{
  position:relative;
  min-height:530px;
  overflow:hidden;
  border-radius:22px;
  background:var(--pink-soft);
}

.feature-photo{
  width:100%;
  height:100%;
  min-height:530px;
  object-fit:cover;
  display:block;
  transition:transform .6s ease;
}

.feature-photo-wrap:hover .feature-photo{
  transform:scale(1.025);
}

.photo-label{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.93);
  color:#252125;
  font-size:12px;
  font-weight:900;
  box-shadow:0 5px 15px rgba(0,0,0,.12);
}

.sex-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#F7C9DB;
  color:#8E4966;
  font-size:12px;
}

.profile-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 4px;
}

.profile-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:17px;
}

.profile-price{
  color:var(--pink-deep);
  font-size:22px;
  font-weight:900;
  white-space:nowrap;
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.detail{
  min-height:69px;
  padding:12px 13px;
  border-radius:14px;
  background:linear-gradient(145deg,#fff,var(--pink-wash));
  border:1px solid rgba(199,131,158,.17);
}

.detail-label{
  margin-bottom:4px;
  color:var(--pink-deep);
  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
}

.detail-value{
  color:#494149;
  font-size:14px;
  font-weight:800;
  line-height:1.25;
}

.apply-card{
  position:relative;
  margin-top:18px;
  padding:18px;
  overflow:hidden;
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(215,235,247,.68),transparent 38%),
    linear-gradient(135deg,var(--pink-soft),#fff);
  border:1px solid rgba(199,131,158,.22);
}

.apply-card::before{
  content:"🌸";
  position:absolute;
  top:-11px;
  right:12px;
  font-size:50px;
  opacity:.16;
  transform:rotate(18deg);
}

.apply-title{
  position:relative;
  margin-bottom:5px;
  color:var(--pink-deep);
  font-size:18px;
  font-weight:900;
}

.apply-copy{
  position:relative;
  margin:0 0 12px;
  max-width:480px;
  color:#766A74;
  font-size:12px;
  line-height:1.55;
}

.apply-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:44px;
  border-radius:12px;
  background:var(--pink);
  color:white;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(173,98,130,.22);
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease;
}

.apply-button:hover{
  transform:translateY(-2px);
  background:#BB738F;
  box-shadow:0 11px 24px rgba(173,98,130,.27);
}

/* PERSONALITY */

.personality-section{
  margin-top:28px;
}

.personality-card{
  position:relative;
  padding:38px 40px;
  overflow:hidden;
  text-align:center;
  border-radius:27px;
  background:
    radial-gradient(circle at 6% 16%,rgba(255,213,230,.48),transparent 23%),
    radial-gradient(circle at 95% 82%,rgba(207,233,246,.45),transparent 24%),
    rgba(255,255,255,.90);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}

.personality-card::before,
.personality-card::after{
  position:absolute;
  font-size:38px;
  opacity:.22;
}

.personality-card::before{
  content:"🌸";
  left:18px;
  top:14px;
  transform:rotate(-15deg);
}

.personality-card::after{
  content:"✨";
  right:24px;
  bottom:16px;
}

.personality-card .section-title{
  font-size:31px;
}

.personality-text{
  width:min(800px,100%);
  margin:16px auto 0;
  color:#5E555E;
  font-size:16px;
  line-height:1.85;
}

/* TRAITS */

.traits{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}

.trait{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.83);
  border:1px solid rgba(199,131,158,.20);
  color:var(--pink-deep);
  font-size:11px;
  font-weight:900;
}

/* GALLERY */

.gallery-section{
  margin-top:28px;
}

.gallery-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.album-link{
  color:var(--pink-deep);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.album-link:hover{
  text-decoration:underline;
}

.gallery-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  grid-template-rows:260px 260px;
  gap:10px;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:var(--pink-soft);
  box-shadow:var(--shadow-soft);
}

.gallery-item:first-child{
  grid-row:1 / 3;
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s ease,filter .3s ease;
}

.gallery-item:hover img{
  transform:scale(1.045);
  filter:saturate(1.03);
}

.gallery-placeholder{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:20px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,210,229,.65),transparent 35%),
    radial-gradient(circle at 80% 80%,rgba(208,233,246,.68),transparent 34%),
    #fff;
  color:#B07991;
}

.gallery-placeholder strong{
  font-size:14px;
}

.gallery-placeholder span{
  max-width:180px;
  color:#998C96;
  font-size:10px;
  line-height:1.5;
}

/* PARENTS */

.parents-section{
  margin:30px auto 42px;
}

.parents-head{
  text-align:center;
  margin-bottom:15px;
}

.parent-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.parent-card{
  position:relative;
  min-height:405px;
  overflow:hidden;
  border-radius:22px;
  background:#f6f3f5;
  box-shadow:var(--shadow-soft);
}

.parent-card img{
  width:100%;
  height:405px;
  object-fit:cover;
  display:block;
  transition:transform .55s ease;
}

.parent-card:hover img{
  transform:scale(1.035);
}

.parent-overlay{
  position:absolute;
  inset:auto 12px 12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.parent-name{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#292529;
  font-size:12px;
  font-weight:900;
  box-shadow:0 6px 15px rgba(0,0,0,.12);
}

.parent-sex{
  padding:7px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 6px 15px rgba(0,0,0,.10);
}

.parent-sex.male{
  background:rgba(214,234,247,.96);
  color:#527F9B;
}

.parent-sex.female{
  background:rgba(255,218,233,.96);
  color:#A55776;
}

.parent-placeholder{
  height:405px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,220,235,.65),transparent 40%),
    #fff;
  color:#A77A8D;
  text-align:center;
}

/* FOOT NOTE */

.little-note{
  width:min(760px,calc(100% - 28px));
  margin:0 auto 40px;
  text-align:center;
  color:#9A8E98;
  font-size:11px;
  line-height:1.6;
}

/* MOBILE */

@media(max-width:800px){
  .hero{
    min-height:480px;
  }

  .hero-name{
    font-size:48px;
  }

  .profile-shell{
    grid-template-columns:1fr;
    padding:14px;
  }

  .feature-photo-wrap,
  .feature-photo{
    min-height:430px;
  }

  .profile-info{
    padding:6px;
  }

  .gallery-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:320px 210px 210px;
  }

  .gallery-item:first-child{
    grid-column:1 / 3;
    grid-row:auto;
  }
}

@media(max-width:560px){
  .hero{
    min-height:420px;
  }

  .hero-card{
    margin-bottom:20px;
    padding:18px 16px 16px;
    border-radius:20px;
  }

  .hero-name{
    font-size:42px;
  }

  .hero-meta{
    font-size:11px;
  }

  .section-title{
    font-size:29px;
  }

  .profile-shell{
    border-radius:22px;
  }

  .feature-photo-wrap,
  .feature-photo{
    min-height:360px;
  }

  .profile-heading-row{
    align-items:start;
    flex-direction:column;
    gap:4px;
  }

  .detail-grid{
    grid-template-columns:1fr;
  }

  .personality-card{
    padding:32px 20px;
  }

  .personality-text{
    font-size:14px;
  }

  .gallery-head{
    align-items:start;
    flex-direction:column;
  }

  .gallery-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .gallery-item,
  .gallery-item:first-child{
    grid-column:auto;
    grid-row:auto;
    height:300px;
  }

  .parent-grid{
    grid-template-columns:1fr;
  }

  .parent-card,
  .parent-card img,
  .parent-placeholder{
    min-height:360px;
    height:360px;
  }

  .bg-paw{
    display:none;
  }
}

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

/* =========================================
   AVAILABILITY-MATCHED PILLS
========================================= */

.availability-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:7px 10px;
  border-radius:999px;

  font-family:Arial, sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1;

  color:#000;

  box-shadow:
    0 8px 18px rgba(0,0,0,.12);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.availability-pill.female-pill{
  background:rgba(255,218,233,.96);

  box-shadow:
    0 6px 16px rgba(0,0,0,.11),
    0 0 0 1px rgba(220,146,177,.42),
    0 0 14px rgba(231,157,188,.24);
}

.availability-pill.white-pill{
  background:rgba(255,255,255,.98);
}

.pill-emoji{
  font-size:15px;
  line-height:1;
}

.hero-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px;

  color:inherit;
  font-size:inherit;
  font-weight:inherit;
}

.hero-meta span{
  padding:0;
  border-radius:0;
  background:none;
}

.hero-meta .availability-pill{
  padding:7px 10px;
  border-radius:999px;
}

.photo-label.availability-pill{
  position:absolute;
  left:14px;
  bottom:14px;

  z-index:3;
}

.sex-dot{
  display:none;
}

@media(max-width:560px){
  .availability-pill{
    padding:6px 9px;
    font-size:12px;
  }

  .pill-emoji{
    font-size:13px;
  }
}


/* =========================================
   FULL MOUSE PHOTO CAROUSEL
========================================= */

.mouse-carousel{
  width:100%;
}

.carousel-stage{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:#FFF9FC;

  box-shadow:var(--shadow);
  aspect-ratio:16 / 10;
}

.carousel-main{
  position:relative;

  width:100%;
  height:100%;

  object-fit:contain;

  display:block;

  user-select:none;
  -webkit-user-drag:none;

  transition:
    opacity .18s ease,
    transform .35s ease;
}

.carousel-stage:hover .carousel-main{
  transform:scale(1.012);
}

.carousel-arrow{
  position:absolute;
  z-index:4;
  top:50%;
  transform:translateY(-50%);

  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  padding:0;
  margin:0;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.94);
  color:var(--pink-deep);

  box-shadow:0 7px 20px rgba(0,0,0,.14);

  cursor:pointer;

  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);

  transition:
    transform .18s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.carousel-arrow span{
  display:block;
  width:100%;
  text-align:center;

  font-family:Arial,sans-serif;
  font-size:28px;
  font-weight:900;
  line-height:1;

  transform:translateY(-1px);
}

.carousel-arrow:hover{
  transform:translateY(-50%) scale(1.06);
  background:rgba(255,255,255,.98);
  box-shadow:0 9px 24px rgba(0,0,0,.17);
}

.carousel-prev{
  left:14px;
}

.carousel-next{
  right:14px;
}

.carousel-counter{
  position:absolute;
  z-index:4;
  right:14px;
  bottom:14px;

  padding:7px 11px;

  border-radius:999px;

  background:rgba(255,255,255,.96);
  color:#2E292E;

  font:800 12px/1 Arial,sans-serif;

  box-shadow:0 6px 16px rgba(0,0,0,.13);

  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.carousel-thumbs{
  display:flex;
  gap:8px;

  margin-top:10px;
  padding:2px 1px 6px;

  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;

  scrollbar-width:thin;
  scrollbar-color:rgba(199,131,158,.45) transparent;
}

.carousel-thumbs::-webkit-scrollbar{
  height:7px;
}

.carousel-thumbs::-webkit-scrollbar-track{
  background:transparent;
}

.carousel-thumbs::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(199,131,158,.42);
}

.carousel-thumb{
  flex:0 0 88px;

  width:88px;
  height:66px;

  padding:0;

  overflow:hidden;

  border:2px solid transparent;
  border-radius:12px;

  background:#fff;

  box-shadow:0 4px 12px rgba(0,0,0,.08);

  cursor:pointer;
  scroll-snap-align:center;

  opacity:.72;

  transition:
    opacity .2s ease,
    transform .18s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.carousel-thumb:hover{
  opacity:1;
  transform:translateY(-1px);
}

.carousel-thumb.active{
  opacity:1;

  border-color:rgba(199,131,158,.78);

  box-shadow:
    0 4px 12px rgba(0,0,0,.08),
    0 0 0 2px rgba(255,218,233,.78);
}

.carousel-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media(max-width:560px){

  .carousel-stage{
    aspect-ratio:4 / 3;
    border-radius:18px;
  }

  .carousel-arrow{
    width:40px;
    height:40px;
    font-size:26px;
  }

  .carousel-prev{
    left:8px;
  }

  .carousel-next{
    right:8px;
  }

  .carousel-counter{
    right:9px;
    bottom:9px;
    padding:6px 9px;
    font-size:11px;
  }

  .carousel-thumb{
    flex-basis:72px;
    width:72px;
    height:54px;
    border-radius:10px;
  }

}



/* =========================================
   AVAILABILITY-STYLE PARENT PILLS
========================================= */

.parent-name-pill{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:4;

  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:7px 10px;
  border-radius:999px;

  color:#000;

  font-family:Arial,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1;

  box-shadow:
    0 8px 18px rgba(0,0,0,.12);

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.parent-name-pill.parent-female{
  background:rgba(255,218,233,.96);

  box-shadow:
    0 6px 16px rgba(0,0,0,.11),
    0 0 0 1px rgba(220,146,177,.42),
    0 0 14px rgba(231,157,188,.24);
}

.parent-name-pill.parent-male{
  background:rgba(214,234,247,.96);

  box-shadow:
    0 6px 16px rgba(0,0,0,.11),
    0 0 0 1px rgba(126,174,203,.40),
    0 0 14px rgba(126,174,203,.22);
}

.parent-emoji{
  font-size:15px;
  line-height:1;
}

/* Old split parent labels are no longer used */
.parent-overlay,
.parent-name,
.parent-sex{
  display:none !important;
}

@media(max-width:560px){
  .parent-name-pill{
    left:8px;
    bottom:8px;
    padding:6px 9px;
    font-size:12px;
  }

  .parent-emoji{
    font-size:13px;
  }
}



/* =========================================
   MOBILE POLISH PASS
   Locked baseline for individual cat pages
========================================= */

@media(max-width:700px){

  body{
    background:
      radial-gradient(circle at 0% 6%, rgba(255,220,235,.26), transparent 20%),
      radial-gradient(circle at 100% 28%, rgba(214,235,247,.24), transparent 22%),
      #fff;
  }

  .section{
    width:calc(100% - 20px);
  }

  /* HERO */

  .hero{
    min-height:390px;
    align-items:flex-end;
  }

  .hero-photo{
    object-position:center 38%;
  }

  .hero-card{
    width:calc(100% - 20px);
    margin-bottom:12px;
    padding:15px 12px 13px;

    border-radius:18px;

    background:rgba(255,255,255,.88);

    box-shadow:
      0 12px 30px rgba(30,20,27,.15);
  }

  .hero-eyebrow{
    margin-bottom:4px;
    padding:5px 9px;

    font-size:10px;
    letter-spacing:.65px;
  }

  .hero-name{
    font-size:38px;
    line-height:1;
  }

  .hero-line{
    width:92px;
    height:2px;
    margin:9px auto 8px;
  }

  .hero-meta{
    gap:5px;
  }

  .hero-meta .availability-pill{
    padding:6px 8px;

    font-size:11px;
  }

  .hero-meta .pill-emoji{
    font-size:12px;
  }


  /* PROFILE */

  .profile-section{
    margin-top:14px;
  }

  .profile-shell{
    grid-template-columns:1fr;

    gap:12px;

    padding:10px;

    border-radius:20px;
  }

  .feature-photo-wrap{
    min-height:0;
    aspect-ratio:1 / 1;

    border-radius:16px;
  }

  .feature-photo{
    min-height:0;
    height:100%;
    aspect-ratio:1 / 1;

    object-fit:cover;
  }

  .photo-label.availability-pill{
    left:8px;
    bottom:8px;

    padding:6px 9px;

    font-size:12px;
  }

  .profile-info{
    padding:5px 2px 2px;
  }

  .profile-heading-row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:end;

    gap:8px;

    margin-bottom:11px;
  }

  .section-kicker{
    margin-bottom:4px;
    font-size:9px;
    letter-spacing:1px;
  }

  .section-title{
    font-size:25px;
    line-height:1.08;
  }

  .profile-price{
    font-size:19px;
  }

  .detail-grid{
    grid-template-columns:1fr 1fr;
    gap:7px;
  }

  .detail{
    min-height:62px;

    padding:10px;

    border-radius:12px;
  }

  .detail-label{
    margin-bottom:3px;

    font-size:8px;
    letter-spacing:.55px;
  }

  .detail-value{
    font-size:12px;
    line-height:1.22;
  }

  .apply-card{
    margin-top:12px;

    padding:14px;

    border-radius:15px;
  }

  .apply-title{
    font-size:16px;
  }

  .apply-copy{
    margin-bottom:10px;

    font-size:11px;
    line-height:1.45;
  }

  .apply-button{
    min-height:46px;

    border-radius:11px;

    font-size:13px;
  }


  /* PERSONALITY */

  .personality-section{
    margin-top:16px;
  }

  .personality-card{
    padding:27px 16px 22px;

    border-radius:19px;
  }

  .personality-card::before{
    left:9px;
    top:7px;

    font-size:28px;
  }

  .personality-card::after{
    right:11px;
    bottom:9px;

    font-size:24px;
  }

  .personality-card .section-title{
    font-size:25px;
  }

  .personality-text{
    margin-top:12px;

    font-size:13px;
    line-height:1.65;
  }

  .traits{
    gap:6px;

    margin-top:13px;
  }

  .trait{
    padding:7px 9px;

    font-size:10px;
  }


  /* CAROUSEL */

  .gallery-section{
    margin-top:18px;
  }

  .gallery-head{
    margin-bottom:10px;
  }

  .carousel-stage{
    aspect-ratio:4 / 5;

    border-radius:18px;

    background:#fff9fc;
  }

  .carousel-main{
    object-fit:contain;
  }

  .carousel-arrow{
    width:42px;
    height:42px;

    background:rgba(255,255,255,.96);
  }

  .carousel-arrow span{
    font-size:25px;
    transform:translateY(-1px);
  }

  .carousel-prev{
    left:7px;
  }

  .carousel-next{
    right:7px;
  }

  .carousel-counter{
    right:8px;
    bottom:8px;

    padding:6px 9px;

    font-size:10px;
  }

  .carousel-thumbs{
    gap:6px;

    margin-top:7px;
    padding-bottom:4px;
  }

  .carousel-thumb{
    flex:0 0 62px;

    width:62px;
    height:52px;

    border-radius:9px;
  }


  /* PARENTS */

  .parents-section{
    margin-top:20px;
    margin-bottom:26px;
  }

  .parents-head{
    margin-bottom:10px;
  }

  .parent-grid{
    grid-template-columns:1fr 1fr;

    gap:9px;
  }

  .parent-card{
    min-height:0;

    aspect-ratio:1 / 1.18;

    border-radius:16px;
  }

  .parent-card img{
    width:100%;
    height:100%;

    object-fit:cover;
  }

  .parent-name-pill{
    left:7px;
    bottom:7px;

    padding:6px 8px;

    font-size:11px;
  }

  .parent-emoji{
    font-size:12px;
  }

  .little-note{
    width:calc(100% - 26px);

    margin-bottom:26px;

    font-size:10px;
    line-height:1.5;
  }

}


@media(max-width:390px){

  .hero{
    min-height:360px;
  }

  .hero-name{
    font-size:35px;
  }

  .detail-grid{
    grid-template-columns:1fr;
  }

  .detail{
    min-height:0;
  }

  .profile-heading-row{
    grid-template-columns:1fr;
    align-items:start;
  }

  .profile-price{
    font-size:18px;
  }

  .carousel-stage{
    aspect-ratio:3 / 4;
  }

  .parent-grid{
    grid-template-columns:1fr 1fr;
  }

}



/* =========================================
   MOBILE TWO-COLUMN FIX
   Availability-page rhythm
========================================= */

@media(max-width:700px){

  /* -----------------------------------------
     PROFILE STATS
     Keep the compact side-by-side layout even
     on narrow phones.
  ----------------------------------------- */

  .detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .detail{
    min-width:0;
    min-height:62px;
    padding:9px;
  }

  .detail-label{
    font-size:8px;
    line-height:1.15;
  }

  .detail-value{
    overflow-wrap:anywhere;
    font-size:11.5px;
    line-height:1.22;
  }


  /* -----------------------------------------
     PERSONALITY TRAITS
     Two tidy columns instead of a long row
     of pills wrapping unpredictably.
  ----------------------------------------- */

  .traits{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    width:100%;
  }

  .trait{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:0;
    min-height:39px;

    padding:7px 8px;

    text-align:center;
    white-space:normal;

    font-size:10px;
    line-height:1.25;
  }

  .trait:last-child:nth-child(odd){
    grid-column:1 / -1;
    width:calc(50% - 3.5px);
    justify-self:center;
  }


  /* -----------------------------------------
     PARENTS
     Match Availability cards: true side-by-side
     square tiles with no inherited fixed height.
  ----------------------------------------- */

  .parent-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;

    width:100%;
  }

  .parent-card{
    width:100%;
    min-width:0;

    height:auto !important;
    min-height:0 !important;

    aspect-ratio:1 / 1;

    border-radius:14px;
  }

  .parent-card img{
    width:100%;
    height:100% !important;
    min-height:0 !important;

    aspect-ratio:auto;

    object-fit:cover;
    display:block;
  }

  .parent-placeholder{
    width:100%;
    height:100% !important;
    min-height:0 !important;
  }

  .parent-name-pill{
    left:7px;
    bottom:7px;

    max-width:calc(100% - 14px);

    padding:6px 8px;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    font-size:11px;
  }

}


/* Even on very narrow phones, preserve the paired layout. */
@media(max-width:390px){

  .detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  .detail{
    padding:8px;
  }

  .detail-label{
    font-size:7.5px;
  }

  .detail-value{
    font-size:10.5px;
  }

  .traits{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }

  .trait{
    min-height:37px;
    padding:6px;
    font-size:9.5px;
  }

  .parent-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .parent-card{
    aspect-ratio:1 / 1;
    border-radius:12px;
  }

  .parent-name-pill{
    left:6px;
    bottom:6px;
    padding:5px 7px;
    font-size:10px;
  }

  .parent-emoji{
    font-size:11px;
  }

}



/* =========================================
   SMALLER MOBILE HERO TITLE CARD
========================================= */

@media(max-width:700px){

  .hero{
    min-height:350px;
  }

  .hero-card{
    width:calc(100% - 28px);

    margin-bottom:8px;

    padding:
      10px
      10px
      9px;

    border-radius:15px;
  }

  .hero-eyebrow{
    margin-bottom:2px;

    padding:4px 8px;

    font-size:9px;

    letter-spacing:.55px;
  }

  .hero-name{
    font-size:32px;
  }

  .hero-line{
    width:72px;
    height:2px;

    margin:
      6px
      auto
      6px;
  }

  .hero-meta{
    gap:4px;
  }

  .hero-meta .availability-pill{
    padding:5px 7px;

    font-size:10px;
  }

  .hero-meta .pill-emoji{
    font-size:11px;
  }

}


@media(max-width:390px){

  .hero{
    min-height:330px;
  }

  .hero-card{
    width:calc(100% - 24px);

    padding:
      9px
      9px
      8px;
  }

  .hero-name{
    font-size:30px;
  }

}



/* =========================================
   EXTRA-COMPACT FROSTED MOBILE HERO CARD
========================================= */

@media(max-width:700px){

  .hero{
    min-height:315px;
  }

  .hero-card{
    width:auto;
    max-width:calc(100% - 34px);

    margin-bottom:6px;

    padding:
      7px
      9px
      7px;

    border-radius:14px;

    background:rgba(255,255,255,.93);

    border:
      1px solid rgba(255,255,255,.88);

    box-shadow:
      0 8px 22px rgba(41,29,37,.14),
      inset 0 1px 0 rgba(255,255,255,.72);

    backdrop-filter:
      blur(18px)
      saturate(1.08);

    -webkit-backdrop-filter:
      blur(18px)
      saturate(1.08);
  }

  .hero-eyebrow{
    margin-bottom:1px;

    padding:
      3px
      7px;

    font-size:8px;
    letter-spacing:.45px;
  }

  .hero-name{
    font-size:28px;
    line-height:.96;
  }

  .hero-line{
    width:58px;
    height:2px;

    margin:
      4px
      auto
      4px;
  }

  .hero-meta{
    gap:3px;
  }

  .hero-meta .availability-pill{
    padding:
      4px
      6px;

    font-size:9px;

    box-shadow:
      0 4px 10px rgba(0,0,0,.08);
  }

  .hero-meta .pill-emoji{
    font-size:10px;
  }

}


@media(max-width:390px){

  .hero{
    min-height:300px;
  }

  .hero-card{
    max-width:calc(100% - 24px);

    padding:
      6px
      8px
      6px;
  }

  .hero-name{
    font-size:26px;
  }

  .hero-meta .availability-pill{
    padding:
      3px
      6px;

    font-size:8.5px;
  }

}



/* =========================================
   IOS-STYLE FLOATING GLASS HERO CARD
========================================= */

@media(max-width:700px){

  .hero-card{
    position:relative;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.58),
        rgba(255,255,255,.36)
      );

    border:
      1px solid rgba(255,255,255,.58);

    box-shadow:
      0 12px 30px rgba(35,24,31,.16),
      0 2px 8px rgba(255,255,255,.22) inset,
      0 -1px 0 rgba(255,255,255,.12) inset;

    backdrop-filter:
      blur(24px)
      saturate(1.35)
      brightness(1.06);

    -webkit-backdrop-filter:
      blur(24px)
      saturate(1.35)
      brightness(1.06);

    overflow:hidden;
  }

  .hero-card::before{
    content:"";

    position:absolute;

    left:10px;
    right:10px;
    top:5px;

    height:34%;

    border-radius:
      999px
      999px
      55% 55%;

    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.34),
        rgba(255,255,255,0)
      );

    pointer-events:none;
  }

  .hero-card::after{
    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.16);

    pointer-events:none;
  }

  .hero-card > *{
    position:relative;
    z-index:1;
  }

  .hero-eyebrow{
    background:
      rgba(255,255,255,.34);

    border:
      1px solid rgba(255,255,255,.28);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.24);

    backdrop-filter:
      blur(10px)
      saturate(1.18);

    -webkit-backdrop-filter:
      blur(10px)
      saturate(1.18);
  }

  .hero-meta .availability-pill{
    background:
      rgba(255,255,255,.42);

    border:
      1px solid rgba(255,255,255,.28);

    box-shadow:
      0 4px 12px rgba(34,25,31,.08),
      inset 0 1px 0 rgba(255,255,255,.26);

    backdrop-filter:
      blur(12px)
      saturate(1.22);

    -webkit-backdrop-filter:
      blur(12px)
      saturate(1.22);
  }

  .hero-meta .availability-pill.female-pill{
    background:
      linear-gradient(
        145deg,
        rgba(255,224,236,.58),
        rgba(255,236,244,.34)
      );

    border:
      1px solid rgba(255,255,255,.30);
  }

}


@media(max-width:390px){

  .hero-card{
    box-shadow:
      0 10px 24px rgba(35,24,31,.15),
      0 2px 7px rgba(255,255,255,.20) inset;
  }

}



/* =========================================
   MOBILE GLASS PILL HERO
========================================= */

@media(max-width:700px){

  .hero-card{
    width:max-content;
    max-width:calc(100% - 24px);

    margin-left:auto;
    margin-right:auto;
    margin-bottom:7px;

    padding:
      7px
      12px
      8px;

    border-radius:999px;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.62),
        rgba(255,255,255,.40)
      );

    border:
      1px solid rgba(255,255,255,.62);

    box-shadow:
      0 10px 26px rgba(35,24,31,.15),
      inset 0 1px 0 rgba(255,255,255,.42);

    backdrop-filter:
      blur(24px)
      saturate(1.35)
      brightness(1.05);

    -webkit-backdrop-filter:
      blur(24px)
      saturate(1.35)
      brightness(1.05);
  }

  .hero-card::before{
    left:12px;
    right:12px;
    top:4px;

    height:38%;

    border-radius:999px;
  }

  .hero-card::after{
    border-radius:999px;
  }

  .hero-eyebrow{
    display:inline-flex;

    margin-bottom:1px;

    padding:
      3px
      7px;

    border-radius:999px;
  }

  .hero-name{
    font-size:27px;
    line-height:.95;

    white-space:nowrap;
  }

  .hero-line{
    width:50px;

    margin:
      4px
      auto
      4px;
  }

  .hero-meta{
    flex-wrap:nowrap;

    gap:3px;
  }

  .hero-meta .availability-pill{
    padding:
      4px
      6px;

    font-size:8.5px;

    white-space:nowrap;
  }

  .hero-meta .pill-emoji{
    font-size:9px;
  }

}


@media(max-width:390px){

  .hero-card{
    max-width:calc(100% - 16px);

    padding:
      6px
      9px
      7px;
  }

  .hero-name{
    font-size:25px;
  }

  .hero-meta{
    gap:2px;
  }

  .hero-meta .availability-pill{
    padding:
      3px
      5px;

    font-size:8px;
  }

}



/* =========================================
   TRUE CONTENT-HUGGING MOBILE GLASS PILL
========================================= */

@media(max-width:700px){

  .hero-card{
    display:inline-flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    width:fit-content !important;
    min-width:0 !important;
    max-width:calc(100% - 18px) !important;

    margin:
      0
      auto
      7px !important;

    padding:
      8px
      14px
      9px !important;

    gap:0;

    border-radius:22px !important;
  }

  .hero-eyebrow{
    margin:
      0
      0
      2px !important;
  }

  .hero-name{
    margin:0 !important;

    font-size:27px !important;
    line-height:.94 !important;
  }

  .hero-line{
    width:46px !important;

    margin:
      4px
      auto
      5px !important;
  }

  .hero-meta{
    display:flex;
    justify-content:center;
    align-items:center;

    width:auto !important;

    gap:4px !important;

    flex-wrap:wrap !important;
  }

  .hero-meta .availability-pill{
    flex:0 0 auto;

    padding:
      4px
      7px !important;

    font-size:8.5px !important;
  }

}


@media(max-width:390px){

  .hero-card{
    max-width:calc(100% - 12px) !important;

    padding:
      7px
      10px
      8px !important;

    border-radius:19px !important;
  }

  .hero-name{
    font-size:25px !important;
  }

  .hero-meta{
    gap:3px !important;
  }

  .hero-meta .availability-pill{
    padding:
      3px
      6px !important;

    font-size:8px !important;
  }

}



/* =========================================
   TRUE COMPACT GLASS — MOBILE + TABLET
========================================= */

@media(max-width:900px){

  .hero{
    min-height:320px;
  }

  .hero-card{
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:calc(100% - 20px) !important;

    padding:8px 14px 9px !important;
    margin:0 auto 8px !important;

    border-radius:22px !important;

    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.62),
        rgba(255,255,255,.40)
      ) !important;

    border:1px solid rgba(255,255,255,.62) !important;

    box-shadow:
      0 10px 26px rgba(35,24,31,.15),
      inset 0 1px 0 rgba(255,255,255,.42) !important;

    backdrop-filter:
      blur(24px)
      saturate(1.35)
      brightness(1.05) !important;

    -webkit-backdrop-filter:
      blur(24px)
      saturate(1.35)
      brightness(1.05) !important;
  }

  .hero-card::before{
    left:10px !important;
    right:10px !important;
    top:4px !important;
    height:36% !important;
    border-radius:999px !important;
  }

  .hero-card::after{
    border-radius:22px !important;
  }

  .hero-eyebrow{
    margin:0 0 2px !important;
    padding:3px 7px !important;
    font-size:8px !important;
  }

  .hero-name{
    margin:0 !important;
    font-size:27px !important;
    line-height:.94 !important;
    white-space:nowrap !important;
  }

  .hero-line{
    width:46px !important;
    margin:4px auto 5px !important;
  }

  .hero-meta{
    display:flex !important;
    width:auto !important;
    max-width:none !important;

    justify-content:center !important;
    align-items:center !important;

    gap:4px !important;
    flex-wrap:wrap !important;
  }

  .hero-meta .availability-pill{
    flex:0 0 auto !important;

    padding:4px 7px !important;

    font-size:8.5px !important;
    white-space:nowrap !important;
  }

  .hero-meta .pill-emoji{
    font-size:9px !important;
  }

}


@media(max-width:430px){

  .hero{
    min-height:300px;
  }

  .hero-card{
    max-width:calc(100% - 12px) !important;
    padding:7px 10px 8px !important;
    border-radius:19px !important;
  }

  .hero-card::after{
    border-radius:19px !important;
  }

  .hero-name{
    font-size:25px !important;
  }

  .hero-meta{
    gap:3px !important;
  }

  .hero-meta .availability-pill{
    padding:3px 6px !important;
    font-size:8px !important;
  }

}



/* =========================================
   CUTESY NAME TREATMENT ONLY
   Keep hero/background unchanged
========================================= */

@media(max-width:900px){

  .hero-name{
    position:relative;

    display:inline-block;

    margin:2px 0 3px !important;

    padding:
      6px
      14px
      7px !important;

    border-radius:18px;

    background:
      radial-gradient(
        circle at 12% 18%,
        rgba(255,214,230,.46),
        transparent 34%
      ),
      radial-gradient(
        circle at 90% 80%,
        rgba(216,237,248,.40),
        transparent 36%
      ),
      rgba(255,255,255,.88);

    border:
      1px solid rgba(232,190,207,.48);

    box-shadow:
      0 6px 16px rgba(73,49,63,.08),
      inset 0 1px 0 rgba(255,255,255,.72);

    color:#CE82A0 !important;

    font-size:27px !important;
    line-height:.96 !important;

    white-space:nowrap !important;
  }

  .hero-name::before{
    content:"🌸";

    position:absolute;
    left:-8px;
    top:-7px;

    font-size:13px;
    line-height:1;

    opacity:.34;
  }

  .hero-name::after{
    content:"✨";

    position:absolute;
    right:-7px;
    bottom:-7px;

    font-size:11px;
    line-height:1;

    opacity:.38;
  }

}


@media(max-width:430px){

  .hero-name{
    padding:
      5px
      12px
      6px !important;

    border-radius:16px;

    font-size:25px !important;
  }

  .hero-name::before{
    left:-6px;
    top:-6px;

    font-size:12px;
  }

  .hero-name::after{
    right:-6px;
    bottom:-6px;

    font-size:10px;
  }

}



/* =========================================
   COMPACT HERO TITLE PANEL
   This is the white rounded panel behind
   Available / Mouse / info pills.
========================================= */

@media(max-width:900px){

  .hero-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    /* Explicit compact width so it cannot stretch */
    width:min(440px, calc(100% - 24px)) !important;
    min-width:0 !important;
    max-width:440px !important;

    margin:
      0
      auto
      8px !important;

    padding:
      10px
      14px
      11px !important;

    border-radius:24px !important;

    background:
      rgba(255,255,255,.90) !important;

    border:
      1px solid rgba(255,255,255,.82) !important;

    box-shadow:
      0 10px 26px rgba(35,24,31,.14),
      inset 0 1px 0 rgba(255,255,255,.72) !important;

    backdrop-filter:
      blur(18px)
      saturate(1.18) !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(1.18) !important;

    overflow:hidden;
  }

  /* Cute tiny corner accents belong to the PANEL */
  .hero-card::before{
    content:"🌸" !important;

    position:absolute !important;
    left:10px !important;
    top:9px !important;

    width:auto !important;
    height:auto !important;

    background:none !important;

    font-size:14px !important;
    line-height:1 !important;

    opacity:.20 !important;
  }

  .hero-card::after{
    content:"✨" !important;

    position:absolute !important;
    right:10px !important;
    bottom:8px !important;

    inset:auto !important;

    width:auto !important;
    height:auto !important;

    background:none !important;
    box-shadow:none !important;

    font-size:12px !important;
    line-height:1 !important;

    opacity:.24 !important;
  }

  .hero-eyebrow{
    margin:
      0
      0
      2px !important;

    padding:
      3px
      8px !important;
  }

  /* Remove the separate name background from v19 */
  .hero-name{
    margin:0 !important;

    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:none !important;
    box-shadow:none !important;

    color:#CE82A0 !important;

    font-size:28px !important;
    line-height:.96 !important;
  }

  .hero-name::before,
  .hero-name::after{
    content:none !important;
    display:none !important;
  }

  .hero-line{
    width:46px !important;

    margin:
      4px
      auto
      5px !important;
  }

  .hero-meta{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    width:auto !important;

    gap:4px !important;

    flex-wrap:wrap !important;
  }

  .hero-meta .availability-pill{
    flex:0 0 auto !important;

    padding:
      4px
      7px !important;

    font-size:8.5px !important;
  }

}


@media(max-width:500px){

  .hero-card{
    width:min(360px, calc(100% - 18px)) !important;
    max-width:360px !important;

    padding:
      8px
      10px
      9px !important;

    border-radius:20px !important;
  }

  .hero-name{
    font-size:26px !important;
  }

  .hero-meta{
    gap:3px !important;
  }

  .hero-meta .availability-pill{
    padding:
      3px
      6px !important;

    font-size:8px !important;
  }

}



/* =========================================
   ACTUAL CONTENT-HUGGING HERO PANEL
   Apply through tablet/embed widths so Google
   Sites preview scaling cannot fall back to the
   oversized desktop panel.
========================================= */

@media(max-width:1400px){

  .hero-card{
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    flex:none !important;

    width:fit-content !important;
    min-width:0 !important;
    max-width:calc(100% - 24px) !important;

    align-self:center !important;

    margin:0 0 8px !important;

    padding:9px 13px 10px !important;

    border-radius:22px !important;
  }

  .hero-eyebrow{
    margin:0 0 2px !important;
  }

  .hero-name{
    margin:0 !important;
    padding:0 !important;

    font-size:28px !important;
    line-height:.96 !important;
  }

  .hero-line{
    width:46px !important;
    margin:4px auto 5px !important;
  }

  .hero-meta{
    display:inline-flex !important;
    flex:0 0 auto !important;

    width:max-content !important;
    max-width:100% !important;

    justify-content:center !important;
    align-items:center !important;

    gap:4px !important;
    flex-wrap:wrap !important;
  }

  .hero-meta .availability-pill{
    flex:0 0 auto !important;
    padding:4px 7px !important;
    font-size:8.5px !important;
  }

}


@media(max-width:430px){

  .hero-card{
    max-width:calc(100% - 12px) !important;
    padding:7px 9px 8px !important;
    border-radius:19px !important;
  }

  .hero-name{
    font-size:25px !important;
  }

  .hero-meta{
    gap:3px !important;
  }

  .hero-meta .availability-pill{
    padding:3px 6px !important;
    font-size:8px !important;
  }

}



/* =========================================
   RESPONSIVE HERO TITLE PANEL
   Desktop + tablet + mobile tuned separately
========================================= */

/* DESKTOP */
@media(min-width:901px){

  .hero-card{
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    width:fit-content !important;
    min-width:0 !important;
    max-width:min(620px, calc(100% - 48px)) !important;

    margin:0 auto 34px !important;

    padding:
      16px
      26px
      17px !important;

    border-radius:28px !important;

    background:
      rgba(255,255,255,.88) !important;

    border:
      1px solid rgba(255,255,255,.78) !important;

    box-shadow:
      0 18px 44px rgba(35,24,31,.16),
      inset 0 1px 0 rgba(255,255,255,.72) !important;

    backdrop-filter:
      blur(18px)
      saturate(1.18) !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(1.18) !important;

    overflow:hidden;
  }

  .hero-eyebrow{
    margin:0 0 5px !important;

    padding:
      5px
      10px !important;

    font-size:10px !important;
  }

  .hero-name{
    margin:0 !important;
    padding:0 !important;

    background:none !important;
    border:0 !important;
    box-shadow:none !important;

    color:#CE82A0 !important;

    font-size:48px !important;
    line-height:.98 !important;
  }

  .hero-name::before,
  .hero-name::after{
    content:none !important;
    display:none !important;
  }

  .hero-line{
    width:86px !important;
    height:2px !important;

    margin:
      8px
      auto
      9px !important;
  }

  .hero-meta{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    width:auto !important;

    gap:7px !important;
    flex-wrap:wrap !important;
  }

  .hero-meta .availability-pill{
    flex:0 0 auto !important;

    padding:
      7px
      10px !important;

    font-size:12px !important;
  }

  .hero-meta .pill-emoji{
    font-size:13px !important;
  }

}


/* TABLET + MOBILE */
@media(max-width:900px){

  .hero{
    min-height:315px;
  }

  .hero-card{
    display:inline-flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;

    width:fit-content !important;
    min-width:0 !important;
    max-width:calc(100% - 20px) !important;

    margin:0 auto 8px !important;

    padding:
      9px
      13px
      10px !important;

    border-radius:22px !important;

    background:
      rgba(255,255,255,.90) !important;

    border:
      1px solid rgba(255,255,255,.82) !important;

    box-shadow:
      0 10px 26px rgba(35,24,31,.14),
      inset 0 1px 0 rgba(255,255,255,.72) !important;

    backdrop-filter:
      blur(18px)
      saturate(1.18) !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(1.18) !important;
  }

  .hero-eyebrow{
    margin:0 0 2px !important;

    padding:
      3px
      8px !important;

    font-size:8px !important;
  }

  .hero-name{
    margin:0 !important;
    padding:0 !important;

    background:none !important;
    border:0 !important;
    box-shadow:none !important;

    color:#CE82A0 !important;

    font-size:28px !important;
    line-height:.96 !important;
  }

  .hero-name::before,
  .hero-name::after{
    content:none !important;
    display:none !important;
  }

  .hero-line{
    width:46px !important;
    height:2px !important;

    margin:
      4px
      auto
      5px !important;
  }

  .hero-meta{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    width:auto !important;

    gap:4px !important;
    flex-wrap:wrap !important;
  }

  .hero-meta .availability-pill{
    flex:0 0 auto !important;

    padding:
      4px
      7px !important;

    font-size:8.5px !important;
  }

  .hero-meta .pill-emoji{
    font-size:9px !important;
  }

}


/* SMALL PHONES */
@media(max-width:430px){

  .hero{
    min-height:295px;
  }

  .hero-card{
    max-width:calc(100% - 12px) !important;

    padding:
      7px
      9px
      8px !important;

    border-radius:19px !important;
  }

  .hero-name{
    font-size:25px !important;
  }

  .hero-meta{
    gap:3px !important;
  }

  .hero-meta .availability-pill{
    padding:
      3px
      6px !important;

    font-size:8px !important;
  }

}



/* =========================================
   HERO PANEL CHARACTER PASS
   Keep v22 sizing exactly the same
========================================= */

.hero-card{
  position:relative;

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(255,218,233,.34),
      transparent 28%
    ),
    radial-gradient(
      circle at 92% 78%,
      rgba(216,236,247,.28),
      transparent 30%
    ),
    rgba(255,255,255,.90) !important;

  border:
    1px solid rgba(232,194,209,.42) !important;

  box-shadow:
    0 14px 34px rgba(46,31,40,.13),
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(229,207,217,.16) !important;

  overflow:hidden;
}


/* soft glossy sheen */
.hero-card .hero-eyebrow::before{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  top:-3px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.88),
      transparent
    );

  pointer-events:none;
}


/* cute panel corner accents */
.hero-card::before{
  content:"🌸" !important;

  position:absolute !important;
  left:11px !important;
  top:9px !important;

  width:auto !important;
  height:auto !important;

  background:none !important;

  font-size:15px !important;
  line-height:1 !important;

  opacity:.22 !important;

  transform:rotate(-10deg);

  pointer-events:none;
}


.hero-card::after{
  content:"✨" !important;

  position:absolute !important;
  right:12px !important;
  bottom:9px !important;

  inset:auto !important;

  width:auto !important;
  height:auto !important;

  background:none !important;
  box-shadow:none !important;

  font-size:13px !important;
  line-height:1 !important;

  opacity:.28 !important;

  transform:rotate(7deg);

  pointer-events:none;
}


/* slightly richer title color */
.hero-name{
  color:#CB7C9A !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.62);
}


/* softer decorative underline */
.hero-line{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(203,124,154,.66),
      transparent
    ) !important;

  box-shadow:
    0 0 8px rgba(224,163,188,.18);
}


/* Available badge gets a gentle candy-glass feel */
.hero-eyebrow{
  position:relative;

  background:
    linear-gradient(
      145deg,
      rgba(255,227,239,.90),
      rgba(255,241,247,.76)
    ) !important;

  border:
    1px solid rgba(227,177,198,.30) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 3px 9px rgba(116,74,92,.05) !important;
}


/* make white info pills feel a little softer */
.hero-meta .availability-pill.white-pill{
  background:
    rgba(255,255,255,.94) !important;

  border:
    1px solid rgba(227,210,218,.52) !important;

  box-shadow:
    0 4px 11px rgba(57,40,49,.07),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}


/* female pill ties into the sakura palette */
.hero-meta .availability-pill.female-pill{
  background:
    linear-gradient(
      145deg,
      rgba(255,216,232,.96),
      rgba(255,232,241,.92)
    ) !important;

  border:
    1px solid rgba(222,153,181,.38) !important;

  box-shadow:
    0 4px 11px rgba(114,66,86,.08),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}


/* Mobile/tablet decorations stay subtle */
@media(max-width:900px){

  .hero-card::before{
    left:8px !important;
    top:7px !important;
    font-size:12px !important;
    opacity:.20 !important;
  }

  .hero-card::after{
    right:8px !important;
    bottom:7px !important;
    font-size:11px !important;
    opacity:.24 !important;
  }

}


/* Tiny phones: hide corner accents if cramped */
@media(max-width:360px){

  .hero-card::before,
  .hero-card::after{
    display:none !important;
  }

}



/* =========================================
   GOOGLE SITES HERO ANCHOR FIX
   Keep title panel pinned near bottom of hero
   instead of drifting toward vertical center.
========================================= */

.hero{
  position:relative !important;
}

.hero-card{
  position:absolute !important;
  left:50% !important;
  bottom:28px !important;

  transform:translateX(-50%) !important;

  margin:0 !important;

  z-index:6 !important;
}


/* Desktop keeps a little more breathing room */
@media(min-width:901px){

  .hero-card{
    bottom:28px !important;
  }

}


/* Tablet/mobile sits slightly closer to the bottom */
@media(max-width:900px){

  .hero-card{
    bottom:10px !important;
  }

}


/* Small phones */
@media(max-width:430px){

  .hero-card{
    bottom:7px !important;
  }

}


/* =========================================
   MOBILE SCROLLBAR CLEANUP
   Keep horizontal swipe functional, but hide
   the visible thumbnail scrollbar.
========================================= */

@media(max-width:900px){

  html,
  body{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }

  .carousel-thumbs{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .carousel-thumbs::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

}


/* Avoid accidental page-level horizontal scroll in Google Sites */
html,
body,
.mouse-page{
  max-width:100%;
  overflow-x:hidden !important;
}



/* =========================================
   MOBILE / GOOGLE SITES SCROLL FEEL FIX
   Hide scrollbar visually without interfering
   with normal vertical touch scrolling.
========================================= */

html{
  scroll-behavior:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;

  -webkit-overflow-scrolling:touch;
}

body{
  overflow-x:hidden !important;
  overflow-y:visible !important;

  touch-action:pan-y pinch-zoom;
}

.mouse-page{
  overflow-x:hidden !important;
  overflow-y:visible !important;
}


/* The large carousel should never "hold" a vertical swipe. */
.carousel-stage{
  touch-action:pan-y pinch-zoom;
}


/* Thumbnail row may move horizontally, but vertical page
   scrolling should still begin immediately. */
.carousel-thumbs{
  touch-action:pan-x pan-y pinch-zoom;

  -webkit-overflow-scrolling:touch;
}


/* Hide scrollbar chrome only — do not disable scrolling. */
@media(max-width:900px){

  html,
  body{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:0;
    height:0;
    background:transparent;
  }

  .carousel-thumbs{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }

  .carousel-thumbs::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    background:transparent !important;
  }

}



/* =========================================
   MOBILE SCROLL-TRAP FIX
   Remove nested thumbnail scrolling inside
   Google Sites while preserving carousel swipe.
========================================= */

@media(max-width:900px){

  /* Hide the only nested scroll container on mobile/tablet.
     Carousel arrows, counter, and swipe remain available. */
  .carousel-thumbs{
    display:none !important;
  }

  /* Let the page own vertical gestures immediately. */
  .carousel-stage{
    touch-action:pan-y pinch-zoom !important;
    overscroll-behavior:auto !important;
  }

  html{
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  body,
  .mouse-page{
    overflow-y:visible !important;
    overscroll-behavior-y:auto !important;
  }

}



/* =========================================
   SAFE GOOGLE SITES MOBILE SCROLLING
   No iframe auto-height manipulation.
========================================= */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

.mouse-page{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}


/* Keep the page vertically intact and allow Google Sites
   to manage the embed height normally. */
body,
.mouse-page{
  overflow-y:visible !important;
}


@media(max-width:900px){

  /* Avoid the nested thumbnail scroll trap on mobile. */
  .carousel-thumbs{
    display:none !important;
  }

  /* Vertical page scrolling gets priority. */
  .carousel-stage{
    touch-action:pan-y pinch-zoom !important;
  }

  /* Hide browser scrollbar chrome where supported,
     without changing page height or iframe sizing. */
  html,
  body{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:0;
    height:0;
    background:transparent;
  }

}



/* =========================================
   GOOGLE SITES CAROUSEL SCROLL-LOCK FIX
========================================= */

@media(max-width:900px){

  .carousel-stage,
  .carousel-main{
    touch-action:pan-y pinch-zoom !important;
  }

  .carousel-thumbs{
    display:none !important;
  }

}



/* =========================================
   SAFE GOOGLE SITES SCROLL BASELINE
   No parent iframe resizing of any kind.
========================================= */

html{
  scroll-behavior:auto !important;
  overflow-x:hidden !important;
}

body,
.mouse-page{
  overflow-x:hidden !important;
  overflow-y:visible !important;
}


/* Prevent the carousel from stealing vertical gestures. */
@media(max-width:900px){

  .carousel-thumbs{
    display:none !important;
  }

  .carousel-stage,
  .carousel-main{
    touch-action:pan-y pinch-zoom !important;
    overscroll-behavior:auto !important;
  }

}


/* Do not manipulate iframe height/scrolling from inside this document. */



/* =========================================
   HARD MOBILE SCROLL FIX
   Prevent any nested vertical scroll surfaces.
========================================= */

/*
  `overflow-x:hidden` + `overflow-y:visible` can compute to a
  scrollable overflow mode in browsers. `clip` trims horizontal
  decoration without creating another scrolling container.
*/
html,
body{
  overflow-x:clip !important;
}

.mouse-page{
  overflow:clip !important;
}


/* The carousel is display-only for touch gestures on mobile.
   Photo navigation remains available through the arrow buttons. */
@media(max-width:900px){

  .carousel-stage{
    touch-action:pan-y pinch-zoom !important;
    overscroll-behavior:initial !important;
  }

  .carousel-main{
    pointer-events:none !important;
    touch-action:pan-y pinch-zoom !important;
  }

  .carousel-arrow{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  .carousel-counter{
    pointer-events:none !important;
  }

  .carousel-thumbs{
    display:none !important;
  }

}


/* Remove momentum/snap behavior from any hidden or desktop-only
   thumbnail strip so it cannot influence mobile gesture routing. */
.carousel-thumbs{
  overscroll-behavior:auto;
}

@media(max-width:900px){
  .carousel-thumbs{
    scroll-snap-type:none !important;
    overflow:visible !important;
  }
}



/* =========================================
   CLEAN SCROLL RESET
   Return scrolling to normal browser behavior.
   Keep only visual scrollbar hiding on mobile.
========================================= */

html,
body{
  touch-action:auto !important;
  overscroll-behavior:auto !important;
  -webkit-overflow-scrolling:auto !important;
}

html{
  overflow-y:visible !important;
  overflow-x:visible !important;
}

body{
  overflow-y:visible !important;
  overflow-x:hidden !important;
}

.mouse-page{
  overflow:hidden !important;
  touch-action:auto !important;
  overscroll-behavior:auto !important;
}


/* Do not make content sections their own gesture/scroll surfaces. */
.profile-section,
.profile-shell,
.profile-info,
.apply-card,
.personality-section,
.personality-card,
.gallery-section,
.parents-section,
.carousel-stage,
.carousel-main{
  touch-action:auto !important;
  overscroll-behavior:auto !important;
}


/* On mobile, thumbnails stay hidden and carousel navigation is arrows-only.
   No swipe JS remains in v33, so vertical page scrolling is untouched. */
@media(max-width:900px){

  .carousel-thumbs{
    display:none !important;
  }

  html,
  body{
    scrollbar-width:none;
    -ms-overflow-style:none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:0;
    height:0;
    background:transparent;
  }

}



/* =========================================
   MOBILE CAROUSEL INTERACTION RESTORE
========================================= */

@media(max-width:900px){

  .carousel-stage{
    touch-action:pan-y pinch-zoom !important;
  }

  .carousel-main{
    pointer-events:auto !important;
    touch-action:pan-y pinch-zoom !important;
  }

  .carousel-arrow{
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  .carousel-prev,
  .carousel-next{
    z-index:10 !important;
  }

}



/* Gallery controls and adult-profile sections use the current kitten layout. */
.gallery-section { margin: 30px auto; }
.carousel-arrow { font: 600 32px/1 Arial, sans-serif; }
.carousel-thumb[aria-pressed="true"] {
  opacity: 1;
  border-color: rgba(199,131,158,.78);
  box-shadow: 0 0 0 2px rgba(255,218,233,.78);
}
.parent-card { display: block; text-decoration: none; }
.profile-back { padding: 0 0 36px; text-align: center; }
.profile-back a { color: var(--pink-deep); font-size: 15px; font-weight: 700; text-underline-offset: 4px; }
.mouse-page button:focus-visible, .mouse-page a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.bubblegum-awards { margin: 30px auto; padding: 24px; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.bubblegum-awards h2 { margin: 0 0 20px; color: var(--pink); font-size: 29px; text-align: center; }
.bubblegum-award-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; align-items: start; }
.bubblegum-award-grid figure { margin: 0; }
.bubblegum-award-grid img { width: 100%; height: auto; display: block; border-radius: 14px; }
.bubblegum-award-grid figcaption { margin-top: 12px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.bubblegum-regional { grid-column: 1 / -1; max-width: 580px; justify-self: center; }
@media(max-width:700px) {
  .bubblegum-awards { padding: 16px; }
  .bubblegum-award-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .bubblegum-awards h2 { font-size: 25px; }
}