:root{
    --cream-1: #fbf6ec;
    --cream-2: #f8f4ea;
    --tan: #f4ecd8;
    --orange: #f9b268;
    --orange-dark: #f0954a;
    --red: #b34b45;
    --red-dark: #9c3e39;
    --brown: #38271e;
    --pink: #e7ada4;
    --ink: #4a352a;
    --ink-soft: #7a6a5e;
    --white: #ffffff;
    --radius-lg: 22px;
    --radius-md: 14px;
    --radius-sm: 8px;
    --maxw: 1080px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family: "Hiragino Maru Gothic ProN","Hiragino Maru Gothic Pro","Yu Gothic Medium","Yu Gothic","Meiryo",sans-serif;
    color:var(--ink);
    background:var(--cream-1);
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;cursor:pointer;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  .hidden{display:none !important;}

  /* ---------- HEADER ---------- */
  header.site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(251,246,236,0.94);
    backdrop-filter: blur(6px);
    border-bottom:1px solid rgba(56,39,30,0.06);
  }
  .header-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:14px 28px;max-width:var(--maxw);margin:0 auto;}
  .header-inner img.logo{height:34px;width:auto;}
  .header-inner img.logo-mobile{display:none;}
  nav.main-nav{display:flex;gap:34px;justify-self:center;font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;}
  nav.main-nav a{font-size:14.5px;letter-spacing:.02em;color:var(--ink);opacity:.85;transition:opacity .2s;font-weight:500;white-space:nowrap;}
  nav.main-nav a:hover{opacity:1;color:var(--red);}
  .nav-toggle{display:none;background:none;border:none;font-size:26px;color:var(--brown);}
  .header-icons{display:flex;gap:10px;justify-self:end;}
  .header-icons a{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;transition:background .18s, transform .18s;flex:none;}
  .header-icons a:hover{background:var(--tan);transform:translateY(-1px);}
  .header-icons a img{width:17px;height:17px;}
  @media (max-width: 880px){
    .header-inner{grid-template-columns:auto 1fr;column-gap:14px;padding:12px 20px;}
    .header-inner img.logo-desktop{display:none;}
    .header-inner img.logo-mobile{display:block;height:46px;width:46px;border-radius:50%;object-fit:cover;}
    nav.main-nav{gap:0;justify-self:stretch;justify-content:space-between;width:100%;overflow-x:visible;}
    nav.main-nav a{font-size:14px;font-weight:700;white-space:nowrap;}
    nav.main-nav a.nav-hide-mobile{display:none;}
    .header-icons{display:none;}
  }

  /* ---------- HERO ---------- */
  section.hero{background:var(--cream-2);padding:64px 0 70px;}
  .hero-grid{display:grid;grid-template-columns:1fr 480px;gap:40px;align-items:center;}
  .eyebrow{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--red);font-style:italic;margin-bottom:18px;letter-spacing:.02em;}
  .eyebrow img{width:16px;height:auto;}
  .eyebrow.hero-eyebrow{font-family:'Caveat',cursive;font-style:normal;font-size:22px;font-weight:700;gap:6px;}
  .eyebrow.about-eyebrow{font-family:'Caveat',cursive;font-style:normal;font-size:22px;font-weight:700;gap:6px;}
  h1.hero-title{font-family:'Yomogi',cursive;font-size:40px;line-height:1.6;font-weight:400;margin:0 0 22px;letter-spacing:.02em;}
  h1.hero-title .accent{color:var(--red);}
  p.hero-desc{font-size:15px;color:var(--ink-soft);max-width:480px;margin:0 0 30px;}
  .hero-buttons{display:flex;gap:16px;flex-wrap:wrap;}
  .img-btn{border:none;background:none;padding:0;transition:transform .18s ease;position:relative;display:inline-flex;}
  .img-btn:hover{transform:translateY(-2px) scale(1.02);}
  .img-btn img{height:52px;width:auto;display:block;}
  .img-btn .btn-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14.5px;font-weight:700;pointer-events:none;white-space:nowrap;}
  .img-btn.btn-red .btn-label{color:#fff;}
  .img-btn.btn-white .btn-label{color:var(--ink);}
  .hero-photos{position:relative;height:750px;}
  .hero-photos img{position:absolute;height:auto;filter:drop-shadow(0 10px 22px rgba(56,39,30,0.22));}
  .hp1{left:0px;top:0px;width:307px;transform:rotate(-6deg);z-index:1;}
  .hp2{left:200px;top:162px;width:300px;transform:rotate(4deg);z-index:3;}
  .hp3{left:5px;top:416px;width:302px;transform:rotate(7deg);z-index:2;}

  /* ---------- ABOUT ---------- */
  section.about{background:var(--tan);padding:74px 0;}
  .about-grid{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:auto 1fr;gap:10px 56px;align-items:start;}
  .about-text-top{grid-column:1;grid-row:1;}
  .about-text-bottom{grid-column:1;grid-row:2;}
  .about-visual{grid-column:2;grid-row:1/3;align-self:center;}
  img.heading-img{max-width:420px;margin-bottom:22px;}
  .heading-text-wrap{margin-bottom:28px;}
  .heading-text{font-family:'Yomogi',cursive;font-weight:400;font-size:30px;color:var(--ink);margin:0;line-height:1.4;}
  .heading-text-wrap.with-hook{position:relative;display:inline-block;padding-left:26px;}
  .heading-text-wrap.with-hook .heading-squiggle{position:absolute;left:-8px;top:10px;width:420px;max-width:none;height:auto;z-index:0;pointer-events:none;}
  .heading-text-wrap.with-hook.cats-heading .heading-squiggle{left:10px;top:30px;width:300px;}
  .heading-text-wrap.with-hook.support-heading .heading-squiggle{left:-4px;top:36px;width:260px;}
  p.support-lead{color:var(--ink-soft);font-size:14px;margin:0 0 34px;}
  .heading-text-wrap.with-hook .heading-text{position:relative;z-index:1;}
  .heading-text-wrap.centered{text-align:center;}
  .heading-text-wrap.centered .heading-squiggle{width:220px;max-width:70%;margin:4px auto 0;display:block;}
  p.about-desc{font-size:15px;color:var(--ink-soft);margin-bottom:30px;max-width:520px;}
  .steps{display:flex;flex-direction:column;gap:14px;max-width:480px;}
  .step{display:flex;align-items:center;gap:16px;background:var(--white);border-radius:var(--radius-md);padding:16px 20px;box-shadow:0 4px 14px rgba(56,39,30,0.06);}
  .step-num{flex:none;width:38px;height:38px;border-radius:50%;background:var(--red);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;}
  .step-text .step-title{font-weight:700;font-size:15px;margin-bottom:2px;}
  .step-text .step-sub{font-size:13px;color:var(--ink-soft);}
  .about-visual{display:flex;justify-content:center;}
  .mascot-frame{width:280px;height:280px;display:flex;align-items:center;justify-content:center;}
  .mascot-frame img{border-radius:50%;width:100%;height:100%;object-fit:contain;}

  /* ---------- CATS ---------- */
  section.cats{background:var(--cream-1);padding:78px 0;}
  .cats-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:8px;}
  p.cats-desc{font-size:14px;color:var(--ink-soft);max-width:360px;margin:0;}
  .cats-controls{display:flex;align-items:center;justify-content:space-between;margin:30px 0 26px;flex-wrap:wrap;gap:16px;border-bottom:1px solid rgba(56,39,30,0.1);padding-bottom:14px;}
  .status-tabs{display:flex;gap:26px;}
  .status-tabs button{background:none;border:none;font-size:14.5px;color:var(--ink-soft);padding:4px 2px;position:relative;font-weight:600;}
  .status-tabs button.active{color:var(--red);}
  .status-tabs button.active img.underline{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:38px;}
  .gender-filter select{border:1px solid rgba(56,39,30,0.2);background:var(--white);border-radius:20px;padding:7px 16px;font-size:13.5px;color:var(--ink);}
  .mobile-filter-row{display:none;}
  .filter-select-group{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);}
  .filter-select-group select{border:1px solid rgba(56,39,30,0.2);background:var(--white);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--ink);}
  .cats-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
  .cat-card{border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 6px 20px rgba(56,39,30,0.07);border:4px solid var(--orange);background:var(--white);}
  .cat-card-image{width:100%;height:auto;display:block;}
  .cat-card .cat-photo-wrap{position:relative;}
  .cat-card img.cat-photo{width:100%;height:230px;object-fit:cover;border-bottom:5px solid var(--orange);}
  .cat-status-badge{position:absolute;top:12px;left:12px;background:var(--orange);color:var(--white);font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:20px;box-shadow:0 2px 6px rgba(0,0,0,0.15);}
  .cat-status-badge.status-trial{background:#9fb98a;}
  .cat-status-badge.status-done{background:#a8a29a;}
  .cat-body{padding:16px 18px 20px;flex:1;display:flex;flex-direction:column;}
  .cat-name-row{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
  .cat-name-badge{background:var(--orange);color:var(--white);font-weight:700;font-size:15px;padding:3px 14px;border-radius:20px;}
  .cat-suffix{font-size:13px;color:var(--ink-soft);}
  .cat-facts{list-style:none;margin:0 0 12px;padding:0;font-size:13px;color:var(--ink-soft);}
  .cat-facts li{position:relative;padding-left:14px;margin-bottom:3px;}
  .cat-facts li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--orange-dark);}
  .cat-personality-label{font-size:12.5px;color:var(--red);font-weight:700;margin-bottom:4px;}
  .cat-personality{background:var(--cream-1);border-radius:var(--radius-sm);padding:12px 14px;font-size:12.8px;color:var(--ink);flex:1;}
  .cat-card.placeholder{display:flex;align-items:center;justify-content:center;background:var(--orange);aspect-ratio:700/494;min-height:0;}
  .cat-card.placeholder img{width:28%;opacity:.9;}
  .pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:40px;font-size:13.5px;}
  .pagination button{background:var(--white);border:1px solid rgba(56,39,30,0.15);width:32px;height:32px;border-radius:8px;color:var(--ink-soft);}
  .pagination button.active{background:var(--orange);color:var(--white);border-color:var(--orange);font-weight:700;}
  .pagination button.nav-btn{width:auto;padding:0 12px;}
  .pagination span.dots{color:var(--ink-soft);}

  /* ---------- SUPPORT ---------- */
  section.support{background:#f4ecd8;padding:20px 0 78px;}
  .support-boxes{display:flex;flex-direction:column;gap:20px;max-width:760px;margin:0 auto;}
  .support-box{display:flex;align-items:center;gap:22px;background:#fdf9f0;border:1.5px solid var(--brown);border-radius:var(--radius-lg);padding:26px 30px;flex-wrap:wrap;}
  .support-icon{flex:none;width:56px;height:56px;display:flex;align-items:center;justify-content:center;}
  .support-icon img{width:100%;height:100%;}
  .support-text{flex:1;min-width:200px;}
  .support-text .support-title{font-weight:700;font-size:15.5px;margin-bottom:4px;}
  .support-text .support-sub{font-size:13px;color:var(--ink-soft);}
  .support-box .img-btn img{height:44px;}

  /* ---------- CONTACT ---------- */
  section.contact{background:var(--cream-1);padding:10px 0 90px;}
  section.contact .wrap{max-width:var(--maxw);}
  .contact-inner{max-width:820px;margin:0 auto;text-align:center;}
  .contact-header{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .contact-header .heading-text-wrap.contact-heading{display:flex;flex-direction:column;align-items:center;margin-bottom:18px;}
  .contact-header .heading-text-wrap.contact-heading .heading-squiggle{width:200px;margin:2px 0 0;}
  .contact-body{display:inline-flex;flex-direction:column;align-items:flex-start;text-align:left;}
  .follow-note{position:relative;display:inline-block;margin:0 0 30px;padding:16px 70px 10px 4px;text-align:left;}
  p.contact-desc{font-size:14px;color:var(--ink-soft);margin:0 0 18px;}
  .follow-doodle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left top;pointer-events:none;z-index:0;}
  .follow-text{position:relative;z-index:1;font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.7;}
  .contact-methods{display:flex;align-items:center;gap:40px;flex-wrap:wrap;}
  .sns-buttons{display:flex;flex-direction:column;gap:16px;max-width:420px;}
  .sns-btn{display:flex;align-items:center;gap:12px;padding:14px 34px;border-radius:30px;font-size:15px;font-weight:700;background:var(--cream-2);border:1.5px solid var(--brown);color:var(--ink);width:100%;max-width:420px;box-sizing:border-box;}
  .sns-btn img{width:34px;height:34px;border-radius:8px;}
  .or-divider{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-soft);font-size:13px;}
  .or-divider .divider-line{width:1.5px;flex:1;background:rgba(56,39,30,0.25);min-height:30px;}
  .phone-box{border:1.5px solid var(--brown);border-radius:var(--radius-md);padding:18px 30px;text-align:left;display:flex;align-items:center;gap:16px;background:#fdf9f0;max-width:100%;}
  .phone-box .phone-icon{width:34px;height:34px;flex:none;}
  .phone-box .phone-label{font-size:12px;color:var(--ink-soft);margin-bottom:2px;}
  .phone-box .phone-num{font-weight:700;font-size:19px;letter-spacing:.03em;}
  .phone-box .phone-rep{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .heading-text-wrap.with-hook.contact-heading .heading-squiggle{left:-4px;top:36px;width:230px;}

  /* ---------- FOOTER ---------- */
  footer.site-footer{background:var(--brown);color:#e8ddd3;padding:38px 0 26px;text-align:center;}
  footer.site-footer img.logo-white{height:26px;margin:0 auto 22px;}
  footer nav{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;font-size:13px;margin-bottom:18px;}
  footer nav a{opacity:.85;}
  footer nav a:hover{opacity:1;}
  .admin-entry{font-size:11px;opacity:.45;}
  .admin-entry:hover{opacity:.8;}

  /* ---------- SECTION DIVIDER DOTS ---------- */
  .dots-divider{text-align:center;color:rgba(56,39,30,0.25);letter-spacing:10px;font-size:12px;padding:0;}

  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px);}

  @media (max-width: 880px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-grid > div:first-child{text-align:center;}
    .hero-eyebrow{justify-content:center;}
    p.hero-desc{margin:0 auto 30px;}
    .hero-buttons{justify-content:center;}
    h1.hero-title{font-size:30px;}
    .hero-photos{width:100%;aspect-ratio:720/635;height:auto;position:relative;margin:0 auto 26px;order:-1;}
    .hero-photos img{position:absolute;height:auto;}
    .hp1{left:25%;top:-10%;width:46%;right:auto;}
    .hp2{left:46.5%;top:24%;width:45%;right:auto;}
    .hp3{left:20%;top:50%;width:46.5%;right:auto;}
    .about-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:0;}
    .about-text-top{grid-column:1;grid-row:auto;}
    .about-text-bottom{grid-column:1;grid-row:auto;}
    .about-visual{grid-column:1;grid-row:auto;margin:18px 0;}
    .mascot-frame{width:200px;height:200px;}
    .heading-text-wrap.with-hook .heading-squiggle{width:230px;top:32px;left:6px;}
    .heading-text-wrap.with-hook{margin-bottom:36px;}
    .heading-text{font-size:23px;line-height:1.5;}
    section.support .about-eyebrow{justify-content:center;}
    section.support p.support-lead{text-align:center;}
    section.support .heading-text-wrap.with-hook.support-heading{display:flex;flex-direction:column;align-items:center;text-align:center;padding-left:0;margin:0 auto 20px;}
    section.support .heading-text-wrap.with-hook.support-heading .heading-text{order:1;}
    section.support .heading-text-wrap.with-hook.support-heading .heading-squiggle{order:2;position:static;display:block;margin:2px auto 0;width:200px;}
    section.contact{text-align:center;}
    section.contact .about-eyebrow{justify-content:center;}
    .follow-note{margin:0 auto 26px;padding:16px 10px 10px;}
    .follow-text{text-align:center;font-size:14px;}
    .phone-box{padding:14px 18px;}
    .phone-box .phone-num{font-size:17px;}
    .phone-box .phone-rep{font-size:13px;}
    .support-box{flex-direction:column;text-align:center;padding:28px 22px;gap:14px;}
    .support-text{min-width:0;width:100%;}
    .support-text .support-title{font-size:16.5px;}
    .support-text .support-sub{font-size:13.5px;line-height:1.7;}
    .support-box .img-btn{margin-top:4px;}
    .contact-methods{flex-direction:column;gap:20px;}
    .contact-body{align-items:center;}
    .sns-buttons{max-width:260px;}
    .sns-btn{max-width:260px;justify-content:center;}
    .or-divider{width:100%;max-width:260px;}
    .or-divider .divider-line{height:1.5px;width:auto;min-height:0;}
    .cats-grid{grid-template-columns:1fr 1fr;gap:12px;}
    .cat-card{border-width:2px;border-radius:12px;}
    .cat-card.placeholder img{width:34%;}
    .status-tabs{display:none;}
    .cats-controls .gender-filter{display:none;}
    .mobile-filter-row{display:flex;justify-content:space-between;align-items:center;width:100%;gap:14px;}
    .cats-controls{border-bottom:none;padding-bottom:0;}
    .form-grid{grid-template-columns:1fr;}
  }