/* NYANKO / GLOBAL NAVIGATION 1.0
   This is the sole header stylesheet for all seven pages.
   ny-* names deliberately avoid older page/brand/footer styles.
   Native <details> works without JS; the small shared script adds close behavior. */
:root { --ny-header-height:92px; }
html { scroll-padding-top:calc(var(--ny-header-height) + 18px); }
.ny-skip-link { position:fixed; top:8px; left:12px; z-index:10001; transform:translateY(-180%); padding:10px 18px; border-radius:8px; background:#fff; color:#356783; font:700 14px/1.5 -apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN',sans-serif; box-shadow:0 3px 18px #1e344a26; }
.ny-skip-link:focus { transform:translateY(0); }
#ny-global-header { --ny-accent:#3C6E8C; --ny-main:#497E9F; --ny-ink:#344f5c; --ny-border:#e8eff2; --ny-soft:#F0F8FC; --ny-green:#148347; --ny-teal:#397880;
  position:sticky; top:0; z-index:2000; width:100%; margin:0; padding:0; border:0; border-bottom:1px solid var(--ny-border); background:#fff; color:var(--ny-ink); box-shadow:0 2px 10px #254c6710; font:400 14px/1.5 -apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif; -webkit-text-size-adjust:100%; text-align:left; letter-spacing:normal; isolation:isolate;
}
#ny-global-header *,#ny-global-header *::before,#ny-global-header *::after { box-sizing:border-box; }
#ny-global-header a { color:inherit; text-decoration:none; text-underline-offset:5px; }
#ny-global-header a:focus-visible,#ny-global-header summary:focus-visible { outline:3px solid #497E9F !important; outline-offset:3px; }
#ny-global-header ul { list-style:none; margin:0; padding:0; }
#ny-global-header li { margin:0; padding:0; }
#ny-global-header img { display:block; object-fit:contain; max-width:100%; border:0; }
#ny-global-header .ny-header-inner { position:relative; width:calc(100% - 48px); max-width:1240px; min-height:var(--ny-header-height); margin:0 auto; padding:0; display:flex; align-items:center; gap:22px; }
#ny-global-header .ny-brand { display:flex; align-items:center; gap:9px; flex:none; }
#ny-global-header .ny-brand-cat { width:50px; height:42px; flex:none; }
#ny-global-header .ny-brand-words { display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
#ny-global-header .ny-brand-name { display:block; color:var(--ny-accent); font-size:19px; line-height:1.3; font-weight:800; white-space:nowrap; letter-spacing:0; }
#ny-global-header .ny-brand-logo { width:126px; height:16px; object-position:left; }
#ny-global-header .ny-desktop-nav { margin-left:auto; flex:1 1 auto; min-width:0; }
#ny-global-header .ny-desktop-nav ul { display:flex; justify-content:center; gap:18px; align-items:center; }
#ny-global-header .ny-desktop-nav a { display:flex; align-items:center; position:relative; min-height:48px; padding:12px 0; font-size:12px; line-height:1.5; white-space:nowrap; font-weight:600; }
#ny-global-header .ny-desktop-nav a:hover { color:var(--ny-accent); }
#ny-global-header .ny-desktop-nav a[aria-current="page"] { color:var(--ny-accent); }
#ny-global-header .ny-desktop-nav a[aria-current="page"]::after { content:''; position:absolute; left:0; right:0; bottom:3px; height:2px; background:var(--ny-main); border-radius:3px; }
#ny-global-header .ny-header-actions { display:flex; flex-direction:column; align-items:center; gap:5px; flex:none; }
#ny-global-header .ny-header-phone { display:flex; align-items:center; justify-content:center; gap:6px; color:var(--ny-teal); font:700 21px/1.3 Arial,sans-serif; white-space:nowrap; }
#ny-global-header .ny-header-phone .ny-icon { width:20px; height:20px; }
#ny-global-header .ny-header-buttons { display:flex; align-items:center; gap:7px; }
#ny-global-header .ny-action { display:inline-flex; justify-content:center; align-items:center; min-height:34px; gap:6px; padding:8px 15px; border:1px solid transparent; border-radius:999px; background:var(--ny-accent); color:#fff; font-size:11px; font-weight:700; line-height:1.4; white-space:nowrap; text-align:center; }
#ny-global-header .ny-action:hover { filter:brightness(.93); }
#ny-global-header .ny-action-line { background:var(--ny-green); }
#ny-global-header .ny-action-phone { background:var(--ny-teal); }
#ny-global-header .ny-action-contact[aria-current="page"] { box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ny-accent); }
#ny-global-header .ny-icon { display:inline-block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
#ny-global-header .ny-fill { fill:currentColor; stroke:none; }
/* Always available, including on desktop, so Instagram stays reachable. */
#ny-global-header .ny-menu { position:static; margin:0; padding:0; border:0; flex:none; background:transparent; }
#ny-global-header .ny-menu-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:50px; height:58px; margin:0; padding:7px; color:var(--ny-accent); border:1px solid transparent; border-radius:12px; cursor:pointer; list-style:none; -webkit-tap-highlight-color:transparent; }
#ny-global-header .ny-menu-toggle::-webkit-details-marker { display:none; }
#ny-global-header .ny-menu-toggle::marker { content:''; }
#ny-global-header .ny-menu-toggle:hover,#ny-global-header .ny-menu[open] .ny-menu-toggle { background:var(--ny-soft); border-color:#D6E7F1; }
#ny-global-header .ny-menu-bars { display:block; position:relative; width:26px; height:20px; }
#ny-global-header .ny-menu-bars span { position:absolute; left:0; width:26px; height:2px; border-radius:2px; background:currentColor; transition:transform .16s ease,opacity .16s ease; }
#ny-global-header .ny-menu-bars span:nth-child(1){top:2px;}
#ny-global-header .ny-menu-bars span:nth-child(2){top:9px;}
#ny-global-header .ny-menu-bars span:nth-child(3){top:16px;}
#ny-global-header .ny-menu[open] .ny-menu-bars span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#ny-global-header .ny-menu[open] .ny-menu-bars span:nth-child(2){opacity:0;}
#ny-global-header .ny-menu[open] .ny-menu-bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#ny-global-header .ny-menu-label { font:600 9px/1.2 Arial,sans-serif; letter-spacing:.08em; }
#ny-global-header .ny-label-close { display:none; }
#ny-global-header .ny-menu[open] .ny-label-open { display:none; }
#ny-global-header .ny-menu[open] .ny-label-close { display:block; }
#ny-global-header .ny-menu-panel { position:absolute; right:0; top:calc(100% + 8px); width:360px; max-width:calc(100vw - 32px); max-height:calc(100vh - var(--ny-header-height) - 32px); max-height:calc(100dvh - var(--ny-header-height) - 32px); margin:0; padding:20px 22px; overflow-y:auto; overscroll-behavior:contain; border:1px solid #D6E7F1; border-radius:20px; background:#fff; box-shadow:0 15px 45px #31506525; scrollbar-width:thin; scrollbar-color:#B6D1E0 #fff; }
#ny-global-header .ny-menu:not([open]) .ny-menu-panel { display:none; }
#ny-global-header .ny-panel-heading { display:flex; align-items:center; gap:9px; color:var(--ny-accent); font-size:12px; font-weight:700; padding-bottom:13px; border-bottom:1px solid var(--ny-border); }
#ny-global-header .ny-panel-heading img { width:30px; height:24px; }
#ny-global-header .ny-menu-links { display:block; margin:6px 0 0; }
#ny-global-header .ny-menu-links a { position:relative; display:flex; align-items:center; justify-content:space-between; padding:13px 32px 13px 10px; min-height:46px; border-bottom:1px solid #eef2f4; border-radius:5px; color:var(--ny-ink); font-size:14px; font-weight:600; line-height:1.5; }
#ny-global-header .ny-menu-links a::after { content:''; display:block; position:absolute; right:12px; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.55; }
#ny-global-header .ny-menu-links a:hover { background:#F4FAFD; color:var(--ny-accent); }
#ny-global-header .ny-menu-links a[aria-current="page"] { color:var(--ny-accent); background:var(--ny-soft); box-shadow:inset 3px 0 var(--ny-main); }
#ny-global-header .ny-instagram { display:flex; align-items:center; gap:11px; min-height:66px; padding:12px 13px; margin-top:15px; border-radius:14px; background:linear-gradient(105deg,#EFF7FC,#F5FAFC); border:1px solid #D6E7F1; color:var(--ny-accent); }
#ny-global-header .ny-instagram:hover { border-color:var(--ny-main); }
#ny-global-header .ny-instagram-mark { display:grid; place-items:center; width:37px; height:37px; border:1px solid #B8D4E5; border-radius:12px; color:var(--ny-accent); background:#fff; flex:none; }
#ny-global-header .ny-instagram-label { flex:1; min-width:0; }
#ny-global-header .ny-instagram-label strong { display:block; font-size:13px; line-height:1.5; }
#ny-global-header .ny-instagram-label small { display:block; color:#546E7D; font:11px/1.6 Arial,sans-serif; }
#ny-global-header .ny-external-icon { width:17px; height:17px; }
#ny-global-header .ny-panel-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
#ny-global-header .ny-panel-actions .ny-action { min-height:42px; font-size:12px; padding:10px 12px; }
@media(max-width:1199px) {
  :root { --ny-header-height:78px; }
  #ny-global-header .ny-header-inner { justify-content:space-between; }
  #ny-global-header .ny-desktop-nav,#ny-global-header .ny-header-actions { display:none; }
  #ny-global-header .ny-menu { margin-left:auto; }
  #ny-global-header .ny-brand-name { font-size:20px; }
}
@media(max-width:767px) {
  :root { --ny-header-height:76px; }
  #ny-global-header .ny-header-inner { width:calc(100% - 32px); gap:8px; }
  #ny-global-header .ny-brand { gap:7px; min-width:0; }
  #ny-global-header .ny-brand-cat { width:42px; height:36px; }
  #ny-global-header .ny-brand-name { font-size:18px; }
  #ny-global-header .ny-brand-logo { width:110px; height:14px; }
  #ny-global-header .ny-brand-words { gap:4px; }
  #ny-global-header .ny-menu-toggle { width:46px; height:54px; padding:5px; }
  #ny-global-header .ny-menu-panel { width:100%; max-width:100%; padding:17px 18px; max-height:calc(100vh - var(--ny-header-height) - 110px); max-height:calc(100dvh - var(--ny-header-height) - 110px - env(safe-area-inset-bottom)); }
}
@media(max-width:359px) {
  #ny-global-header .ny-brand-name { font-size:16px; }
  #ny-global-header .ny-brand-cat { width:36px; height:32px; }
  #ny-global-header .ny-brand-logo { width:101px; height:13px; }
  #ny-global-header .ny-header-inner { width:calc(100% - 24px); }
  #ny-global-header .ny-brand { gap:6px; }
}
@media(prefers-reduced-motion:reduce) { #ny-global-header * { transition:none !important; scroll-behavior:auto !important; } }
@media print { #ny-global-header { position:static; box-shadow:none; } #ny-global-header .ny-menu,#ny-global-header .ny-header-actions { display:none; } .ny-skip-link{display:none;} }


/* ================================================================
   SOFT BLUE + GINGER / 2026-09-09
   HTML and header behaviour are unchanged.
   Legacy orange token names remain as aliases for backward compatibility.
   ================================================================ */
:root {
  --ny-theme-blue:#6D9FBD;
  --ny-theme-ink:#3C6E8C;
  --ny-theme-soft:#EFF7FC;
  --ny-theme-border:#CDE2EF;
  --brand:#497E9F;
  --blue:#497E9F;
  --blue2:#95BED6;
  --blue-deep:#3C6E8C;
  --accent-orange:#6D9FBD;
  --accent-orange-deep:#3C6E8C;
  --accent-orange-light:#B9D7E9;
  --accent-orange-pale:#EFF7FC;
  --accent-orange-line:#CDE2EF;
  --warm-soft:#EFF7FC;
}
/* Keep blue legible: pale fills + a deeper blue for small text. */
#ny-global-header {
  --ny-accent:#3C6E8C;
  --ny-main:#6D9FBD;
  --ny-soft:#EFF7FC;
  --ny-border:#D6E7F1;
}
#ny-global-header .ny-action-contact {
  background:#DCECF6;
  color:#315E79;
  border-color:#AFCDDF;
}
#ny-global-header .ny-instagram {
  background:linear-gradient(105deg,#EFF7FC,#F7FBFD);
  border-color:#CDE2EF;
}
.hero .hero-title__accent { color:#5887A3; }
/* Functional LINE and phone colours remain distinct. */
.btn:not(.btn-line):not(.line):not(.btn-phone):not(.phone-btn):not(.btn-outline):not(.outline) {
  background:linear-gradient(105deg,#DEEEF7,#BEDBED);
  color:#315E79;
  border-color:#AECEDF;
}
.btn.outline,.btn-outline {
  color:#3C6E8C !important;
  border-color:#A7C9DE !important;
  background:#fff !important;
}
.btn.line,.btn.btn-line {
  background:linear-gradient(90deg,#148347,#199352) !important;
  border-color:#148347 !important;
  color:#fff !important;
}
.mobile-contact a:nth-child(3) {
  background:#DFEEF7 !important;
  color:#315E79 !important;
}
/* Site logo and photographs are not recoloured or animated by CSS filters. */

/* GENTLE CAT MOTION
   No looping auto-play: hero motion stops in 4 seconds.
   Existing transform (position/rotation) is left intact; animate translate/rotate.
   Header brand marks and small navigation icons stay still. */
@keyframes ny-cat-welcome {
  0%,100% { translate:0 0; rotate:0deg; }
  18% { translate:0 -3px; rotate:-1.3deg; }
  38% { translate:0 0; rotate:1deg; }
  60% { translate:0 -2px; rotate:-.8deg; }
  80% { translate:0 0; rotate:.5deg; }
}
@keyframes ny-cat-hello {
  0%,100% { translate:0 0; rotate:0deg; }
  30% { translate:0 -3px; rotate:-1.2deg; }
  65% { translate:0 -1px; rotate:1.2deg; }
}
@keyframes ny-cat-arrive {
  0%,100% { translate:0 0; rotate:0deg; }
  45% { translate:0 -3px; rotate:-1deg; }
  75% { translate:0 -1px; rotate:.7deg; }
}
@media (prefers-reduced-motion:no-preference) {
  main :is(img.hero-cat, .hero-cat > img, img.hero-cat-main, .hero-cat-main > img):not(.hero-cat-friend) {
    transform-origin:50% 90%;
    animation:ny-cat-welcome 4s ease-in-out .2s 1;
  }
  /* Scroll-linked entrances only on supporting browsers. Scrolling stops motion. */
  @supports (animation-timeline:view()) {
    main :is(.reason-grid,.reason-cards,.flow-grid,.flow-steps,.values-grid,.category-grid,.faq-group,.faq-sidebar,.method-grid,.method-cards,.contact-inner,.contact-heading,.record-note,.estimate-box,.message-visual,.anniversary-art,.form-sidebar,.closing-inner) img:is([src*="flow-"],[src*="value-"],[src*="cat-sit"]) {
      transform-origin:50% 90%;
      animation:ny-cat-arrive 1s ease-in-out both;
      animation-timeline:view(block);
      animation-range:entry 0% entry 100%;
    }
  }
  @media (hover:hover) and (pointer:fine) {
    main img:is([src*="cat-sit"],[src*="flow-inquiry"],[src*="flow-schedule"],[src*="flow-estimate"],[src*="flow-cleaning"],[src*="flow-complete"],[src*="value-care"],[src*="value-explain"],[src*="value-support"]):hover {
      transform-origin:50% 90%;
      animation:ny-cat-hello 1.2s ease-in-out 1;
      animation-timeline:auto;
      animation-range:normal;
    }
  }
}
@media (prefers-reduced-motion:reduce) {
  main img:is([src*="cat-"],[src*="flow-"],[src*="value-"]) {
    animation:none !important;
    translate:none !important;
    rotate:none !important;
  }
}
@media print {
  main img:is([src*="cat-"],[src*="flow-"],[src*="value-"]) {
    animation:none !important;
    translate:none !important;
    rotate:none !important;
  }
}