:root {
      --ink: #3c3545;
      --text: #625b6d;
      --muted: #83778e;
      --paper: #fbf7ff;
      --white: #ffffff;
      --cream: #efe7f8;
      --violet: #8c76ad;
      --violet-deep: #66507f;
      --violet-soft: #eee7f7;
      --leaf: #3f7f66;
      --leaf-soft: #d9eee4;
      --sky: #d8ecf4;
      --sky-strong: #6e8fa8;
      --sun: #f5c85f;
      --gold: #b89a54;
      --gold-soft: #f1ded8;
      --coral: #a96f66;
      --coral-soft: #f1ded8;
      --lavender: #e6dcf2;
      --line: rgba(94, 74, 123, 0.16);
      --shadow: 0 18px 50px rgba(91, 70, 120, 0.13);
      --radius: 8px;
      --max: 1180px;
      --page-gutter: clamp(32px, 6vw, 80px);
      --section-y: clamp(104px, 10vw, 152px);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", "Times New Roman", serif;
      line-height: 1.75;
      letter-spacing: 0;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 12% 16%, rgba(230, 220, 242, 0.82), transparent 26%),
        radial-gradient(circle at 88% 8%, rgba(216, 236, 244, 0.58), transparent 22%),
        radial-gradient(circle at 74% 78%, rgba(241, 222, 216, 0.38), transparent 26%),
        radial-gradient(circle at 10% 86%, rgba(217, 238, 228, 0.44), transparent 24%);
      z-index: -2;
    }

    a {
      color: inherit;
    }

    img {
      display: block;
      max-width: 100%;
    }

    button,
    input,
    textarea {
      font: inherit;
    }

    .site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 30;
      background: rgba(251, 247, 255, 0.9);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(18px);
    }

    .header-inner {
      width: min(var(--max), calc(100% - 32px));
      min-height: 72px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: 0;
    }

    .brand-mark {
      width: 34px;
      height: 38px;
      display: block;
      flex: 0 0 auto;
    }

    .brand-logo {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
    }

    .brand-name {
      display: block;
      color: var(--ink);
      font-weight: 800;
      font-size: clamp(0.9rem, 2.2vw, 1.05rem);
      line-height: 1.35;
      white-space: nowrap;
    }

    .brand-sub {
      display: block;
      color: var(--violet-deep);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1.35;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 20px;
      color: var(--text);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .nav a {
      text-decoration: none;
    }

    .nav a:not(.button):hover {
      color: var(--violet-deep);
    }

    .menu-button {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: var(--white);
      color: var(--violet-deep);
      cursor: pointer;
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 46px;
      padding: 12px 18px;
      border: 1px solid transparent;
      border-radius: 999px;
      text-decoration: none;
      font-weight: 800;
      line-height: 1.3;
      transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    }

    .button:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(56, 53, 47, 0.12);
    }

    .button-primary {
      background: var(--coral);
      color: var(--white);
    }

    .button-secondary {
      background: var(--white);
      color: var(--violet-deep);
      border-color: rgba(102, 80, 127, 0.24);
    }

    .button-line {
      background: var(--violet-deep);
      color: var(--white);
    }
    .button-instagram {
      color: var(--white);
      border-color: rgba(255, 255, 255, 0.36);
      background:
        radial-gradient(circle at 30% 108%, #feda75 0 18%, transparent 38%),
        radial-gradient(circle at 10% 12%, #f58529 0 22%, transparent 42%),
        linear-gradient(135deg, #feda75 0%, #fa7e1e 18%, #d62976 45%, #962fbf 72%, #4f5bd5 100%);
      box-shadow: 0 14px 30px rgba(214, 41, 118, 0.26);
    }

    .button-instagram:hover {
      box-shadow: 0 16px 34px rgba(150, 47, 191, 0.34);
      filter: saturate(1.08) brightness(1.03);
    }

    .hero-instagram-button {
      border-color: rgba(214, 41, 118, 0.24);
      background: rgba(255, 255, 255, 0.92);
      color: #d62976;
      box-shadow: 0 10px 24px rgba(91, 70, 120, 0.09);
    }

    .hero-instagram-button:hover {
      background: var(--white);
      box-shadow: 0 14px 30px rgba(214, 41, 118, 0.16);
      filter: none;
    }

    .hero-instagram-button .instagram-button-text {
      background: linear-gradient(135deg, #f58529 0%, #d62976 48%, #4f5bd5 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

    .instagram-button-icon {
      width: 20px;
      height: 20px;
      display: block;
      flex: 0 0 auto;
      border-radius: 5px;
    }

    .icon {
      width: 18px;
      height: 18px;
      display: inline-flex;
      flex: 0 0 auto;
    }

    @keyframes gentle-float {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
      50% { transform: translate3d(0, -12px, 0) rotate(0.8deg); }
    }

    @keyframes walking-breath {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.2deg); }
      44% { transform: translate3d(-10px, -2px, 0) rotate(0.3deg); }
      62% { transform: translate3d(-14px, 1px, 0) rotate(-0.1deg); }
    }

    @keyframes puff {
      0%, 100% { transform: scale(0.82); opacity: 0.5; }
      50% { transform: scale(1.16); opacity: 0.84; }
    }

    @keyframes shimmer {
      0%, 100% { opacity: 0.36; transform: translateX(-2%) scaleX(0.96); }
      50% { opacity: 0.74; transform: translateX(2%) scaleX(1.04); }
    }

    @keyframes butterfly-drift {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg) scale(1); }
      28% { transform: translate3d(12px, -18px, 0) rotate(8deg) scale(1.04); }
      56% { transform: translate3d(-8px, -34px, 0) rotate(-7deg) scale(0.98); }
      78% { transform: translate3d(10px, -16px, 0) rotate(5deg) scaleX(0.94); }
    }

    @keyframes butterfly-flap {
      0%, 100% { transform: perspective(220px) rotateY(0deg) scaleX(1) scaleY(1); }
      42% { transform: perspective(220px) rotateY(24deg) scaleX(0.72) scaleY(1.06); }
      58% { transform: perspective(220px) rotateY(-14deg) scaleX(0.86) scaleY(1.03); }
    }

    @keyframes petal-drift {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.72; }
      35% { transform: translate3d(-10px, -16px, 0) rotate(-6deg); opacity: 0.92; }
      70% { transform: translate3d(8px, -28px, 0) rotate(7deg); opacity: 0.76; }
    }

    @keyframes foreground-violet-sway {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rotate-start, -1.6deg)) scale(var(--scale, 1)); }
      34% { transform: translate3d(4px, -7px, 0) rotate(var(--rotate-mid, 2deg)) scale(var(--scale, 1)); }
      68% { transform: translate3d(-3px, 4px, 0) rotate(var(--rotate-end, -2.4deg)) scale(var(--scale, 1)); }
    }

    @keyframes path-bloom {
      0%, 100% { transform: perspective(460px) rotateX(60deg) translateY(0) scaleX(0.98); opacity: 0.52; }
      50% { transform: perspective(460px) rotateX(60deg) translateY(-4px) scaleX(1.02); opacity: 0.74; }
    }

    @keyframes walkers-base-fade {
      0%, 44%, 100% { opacity: 1; }
      54%, 76% { opacity: 0; }
    }

    @keyframes walkers-alt-fade {
      0%, 44%, 100% { opacity: 0; }
      54%, 76% { opacity: 1; }
    }

    @keyframes section-character-sway {
      0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
      50% { transform: translate3d(0, -8px, 0) rotate(2deg); }
    }

    .hero {
      position: relative;
      min-height: 88svh;
      padding: 92px 0 86px;
      display: grid;
      align-items: center;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(251, 247, 255, 0.97) 0%, rgba(251, 247, 255, 0.88) 38%, rgba(251, 247, 255, 0.56) 70%, rgba(238, 231, 247, 0.42) 100%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.2), rgba(238, 231, 247, 0.38)),
        url("../img/hero-hananomichi.webp") center 38% / cover no-repeat;
    }

    .hero::before {
      content: "";
      position: absolute;
      right: -11vw;
      bottom: 52px;
      width: min(72vw, 980px);
      height: 330px;
      border-radius: 50%;
      background:
        radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.68), rgba(230, 220, 242, 0.34) 48%, transparent 70%),
        linear-gradient(90deg, rgba(184, 154, 84, 0), rgba(184, 154, 84, 0.18), rgba(184, 154, 84, 0));
      filter: blur(2px);
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 180px;
      background: linear-gradient(180deg, rgba(251, 247, 255, 0), var(--paper));
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(var(--max), calc(100% - var(--page-gutter)));
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(430px, 0.88fr);
      gap: 34px;
      align-items: center;
    }

    .hero-copy {
      position: relative;
      align-self: stretch;
      display: grid;
      grid-template-rows: clamp(136px, 16vh, 174px) minmax(max-content, 1fr) auto;
      min-width: 0;
      --hero-copy-breath: clamp(34px, 4.6vh, 58px);
    }

    .eyebrow {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      padding: 8px 14px;
      border: 1px solid rgba(102, 80, 127, 0.22);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      color: var(--violet-deep);
      font-size: 0.88rem;
      font-weight: 800;
    }

    .hero-place {
      position: absolute;
      top: 74px;
      left: 0;
      max-width: 560px;
      margin: -4px 0 18px;
      color: var(--violet-deep);
      font-size: 0.98rem;
      font-weight: 900;
    }

    .hero-place::before {
      content: "";
      display: inline-block;
      width: 40px;
      height: 1px;
      margin: 0 10px 0 0;
      vertical-align: middle;
      background: linear-gradient(90deg, var(--gold), transparent);
    }

    .hero h1 {
      grid-row: 2;
      align-self: center;
      max-width: 680px;
      margin: 0;
      color: var(--ink);
      font-size: clamp(2.3rem, 5.1vw, 4.35rem);
      line-height: 1.08;
      font-weight: 900;
    }

    .hero h1 span {
      display: block;
    }

    .hero-bottom {
      grid-row: 3;
      align-self: end;
      display: grid;
      gap: 22px;
      padding-top: var(--hero-copy-breath);
    }

    .hero-lead {
      max-width: 670px;
      margin: 0;
      color: var(--text);
      font-size: clamp(1rem, 2vw, 1.18rem);
      font-weight: 700;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 0;
      padding-top: 0;
    }

    .hero-note {
      margin-top: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 800;
    }

    .hero-note span {
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid var(--line);
    }

    .hero-side {
      align-self: center;
      display: grid;
      align-content: center;
      gap: 14px;
    }

    .hero-illustration {
      position: relative;
      min-height: 360px;
      margin: 0 -28px 2px -18px;
      display: grid;
      align-items: end;
      isolation: isolate;
      animation: gentle-float 7s ease-in-out infinite;
    }

    .stage-halo {
      position: absolute;
      left: 8%;
      right: 4%;
      bottom: 10px;
      height: 42%;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.92), rgba(230, 220, 242, 0.58) 48%, rgba(255, 255, 255, 0) 72%);
      z-index: 0;
    }

    .flower-path {
      position: absolute;
      left: 1%;
      right: 2%;
      bottom: 12px;
      height: 78px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 11% 42%, rgba(140, 118, 173, 0.34) 0 5px, transparent 6px),
        radial-gradient(circle at 23% 68%, rgba(184, 154, 84, 0.28) 0 4px, transparent 5px),
        radial-gradient(circle at 42% 36%, rgba(63, 127, 102, 0.28) 0 5px, transparent 6px),
        radial-gradient(circle at 64% 62%, rgba(140, 118, 173, 0.32) 0 4px, transparent 5px),
        radial-gradient(circle at 82% 44%, rgba(169, 111, 102, 0.22) 0 4px, transparent 5px),
        linear-gradient(90deg, rgba(140, 118, 173, 0), rgba(140, 118, 173, 0.22), rgba(184, 154, 84, 0.2), rgba(140, 118, 173, 0));
      opacity: 0.86;
      transform: perspective(420px) rotateX(58deg);
      transform-origin: center bottom;
      filter: blur(0.2px);
      z-index: 1;
      animation: shimmer 5.8s ease-in-out infinite;
    }

    .foreground-violets {
      position: absolute;
      inset: auto -5% 18px;
      height: 170px;
      z-index: 6;
      overflow: visible;
      pointer-events: none;
    }

    .foreground-violet {
      position: absolute;
      bottom: var(--bottom, 14px);
      width: var(--size, 160px);
      max-width: none;
      opacity: var(--flower-opacity, 0.88);
      filter: drop-shadow(0 16px 14px rgba(75, 59, 98, 0.18));
      animation: foreground-violet-sway var(--duration, 9.4s) ease-in-out infinite;
      animation-delay: var(--delay, 0s);
      transform-origin: center bottom;
    }

    .foreground-violet-left {
      left: 1%;
      --size: 164px;
      --bottom: 0;
      --duration: 10.6s;
      --delay: -2.5s;
      --scale: 0.94;
    }

    .foreground-violet-right {
      right: -1%;
      --size: 238px;
      --bottom: 4px;
      --duration: 12.2s;
      --delay: -5.8s;
      --scale: 0.9;
      --flower-opacity: 0.9;
      --rotate-start: 1.4deg;
      --rotate-mid: -1.8deg;
      --rotate-end: 2.2deg;
    }

    .walkers-stage {
      position: relative;
      display: block;
      z-index: 3;
      width: 100%;
      max-width: 650px;
      aspect-ratio: 1448 / 1086;
      margin-inline: auto;
      filter: drop-shadow(0 18px 24px rgba(75, 59, 98, 0.18));
      animation: walking-breath 8s ease-in-out infinite;
    }

    .violet-walkers {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .walkers-base {
      animation: walkers-base-fade 8.6s ease-in-out infinite;
    }

    .walkers-alt {
      animation: walkers-alt-fade 8.6s ease-in-out infinite;
    }

    .hero-floats {
      position: absolute;
      inset: 0;
      z-index: 5;
      pointer-events: none;
    }

    .float-piece {
      position: absolute;
      display: block;
      width: var(--float-size, 52px);
      max-width: none;
      opacity: var(--float-opacity, 0.82);
      filter: drop-shadow(0 8px 10px rgba(75, 59, 98, 0.14));
      animation: petal-drift var(--float-duration, 8s) ease-in-out infinite;
      animation-delay: var(--float-delay, 0s);
    }

    .float-butterfly {
      animation-name: butterfly-drift;
      --float-duration: 9.6s;
      --float-opacity: 0.9;
      transform-style: preserve-3d;
      will-change: transform;
    }

    .butterfly-wing {
      display: block;
      width: 100%;
      height: auto;
      transform-origin: center 52%;
      animation: butterfly-flap 640ms ease-in-out infinite;
      will-change: transform;
    }

    .float-two .butterfly-wing {
      animation-delay: -220ms;
      animation-duration: 720ms;
    }

    .float-one {
      left: 4%;
      top: 28%;
      --float-size: 46px;
      --float-delay: -2.4s;
    }

    .float-two {
      right: 11%;
      top: 15%;
      --float-size: 50px;
      --float-duration: 11.2s;
      --float-delay: -5.8s;
    }

    .float-three {
      right: 28%;
      top: 8%;
      --float-size: 44px;
      --float-duration: 10.2s;
      --float-delay: -3.6s;
      --float-opacity: 0.76;
    }

    .float-four {
      left: 17%;
      bottom: 20%;
      --float-size: 34px;
      --float-duration: 8.8s;
      --float-delay: -4.7s;
      --float-opacity: 0.72;
    }

    .pop-bubble {
      position: absolute;
      display: block;
      border-radius: 999px;
      background: rgba(230, 220, 242, 0.62);
      border: 1px solid rgba(255, 255, 255, 0.8);
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5);
      z-index: 0;
      animation: puff 4.8s ease-in-out infinite;
    }

    .bubble-one {
      width: 120px;
      height: 120px;
      right: 5%;
      top: 18px;
    }

    .bubble-two {
      width: 74px;
      height: 74px;
      left: 7%;
      top: 76px;
      background: rgba(217, 238, 228, 0.58);
      animation-delay: 1.2s;
    }

    .bubble-three {
      width: 58px;
      height: 58px;
      right: 29%;
      bottom: 48px;
      background: rgba(241, 222, 216, 0.48);
      animation-delay: 2.1s;
    }

    .quick-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background:
        url("../img/decor-kado-rose-soft.png") right -58px bottom -68px / 156px auto no-repeat,
        rgba(255, 255, 255, 0.88);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      padding: 32px 28px 28px;
      transition: transform 220ms ease, box-shadow 220ms ease;
    }

    .quick-card::before {
      content: "";
      position: absolute;
      top: -34px;
      right: -34px;
      width: 96px;
      height: 96px;
      border-radius: 999px;
      background: rgba(230, 220, 242, 0.62);
      transform: scale(0.62);
      transition: transform 360ms cubic-bezier(.2,.8,.2,1), opacity 360ms ease;
      opacity: 0.72;
      z-index: 0;
    }

    .quick-card::after,
    .feature::after,
    .info-box::after {
      content: "";
      position: absolute;
      inset: 9px;
      --frame-line: rgba(169, 111, 102, 0.26);
      --frame-corner: url("../img/decor-frame-corner-waku-s-tl.png");
      --frame-corner-size: 50px auto;
      --frame-corner-position: left 4px top 4px;
      background-image:
        var(--frame-corner),
        linear-gradient(var(--frame-line), var(--frame-line)),
        linear-gradient(var(--frame-line), var(--frame-line)),
        linear-gradient(var(--frame-line), var(--frame-line)),
        linear-gradient(var(--frame-line), var(--frame-line));
      background-position:
        var(--frame-corner-position),
        left top,
        right top,
        left bottom,
        left top;
      background-size:
        var(--frame-corner-size),
        0 1px,
        1px 0,
        0 1px,
        1px 0;
      background-repeat: no-repeat;
      opacity: 0.58;
      pointer-events: none;
      z-index: 0;
      transition: background-size 980ms var(--draw-frame-ease, cubic-bezier(0.2, 0.8, 0.2, 1)), opacity 360ms ease;
    }

    .quick-card::after {
      inset: 12px;
      --frame-corner-size: 48px auto;
      opacity: 0.56;
    }

    .quick-card.is-frame-visible::after,
    .feature.is-frame-visible::after,
    .info-box.is-frame-visible::after {
      background-size:
        var(--frame-corner-size),
        100% 1px,
        1px 100%,
        100% 1px,
        1px 100%;
      opacity: 0.74;
    }

    .quick-card:hover,
    .feature:hover,
    .info-box:hover {
      transform: translateY(-5px);
      box-shadow: 0 18px 42px rgba(91, 70, 120, 0.16);
    }

    .quick-card:hover::before {
      transform: scale(2.45);
      opacity: 0.9;
    }

    .quick-card > *,
    .feature > *,
    .info-box > * {
      position: relative;
      z-index: 1;
    }

    .quick-label {
      margin: 0 0 12px;
      color: var(--violet-deep);
      font-size: 0.78rem;
      font-weight: 900;
    }

    .quick-value {
      margin: 0;
      color: var(--ink);
      font-size: 1.18rem;
      line-height: 1.45;
      font-weight: 900;
    }

    .quick-meta {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
    }

    .section {
      padding: var(--section-y) 0;
    }

    .section:nth-of-type(even) {
      background: rgba(238, 231, 247, 0.46);
    }

    .container {
      width: min(var(--max), calc(100% - var(--page-gutter)));
      margin: 0 auto;
    }

    .section-head {
      position: relative;
      display: flex;
      justify-content: space-between;
      gap: clamp(30px, 5vw, 68px);
      align-items: end;
      margin-bottom: clamp(42px, 5vw, 70px);
    }

    .section-head::before {
      content: "";
      position: absolute;
      left: -20px;
      top: -22px;
      width: clamp(108px, 12vw, 166px);
      aspect-ratio: 1;
      background: url("../img/decor-heading-corner.png") left top / contain no-repeat;
      opacity: 0.18;
      pointer-events: none;
      z-index: 0;
    }

    .section-head > * {
      position: relative;
      z-index: 1;
    }

    .section-head.has-character {
      min-height: 116px;
      padding-right: 126px;
    }

    .section-head.has-character .section-copy {
      max-width: 390px;
    }

    .section-character {
      position: absolute;
      right: 0;
      bottom: -10px;
      width: var(--character-size, 104px);
      max-height: 142px;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 14px 20px rgba(75, 59, 98, 0.14));
      animation: section-character-sway var(--character-duration, 7.4s) ease-in-out infinite;
      animation-delay: var(--character-delay, 0s);
      transform-origin: center bottom;
    }

    .section-character-wide {
      --character-size: 132px;
    }

    .section-character-small {
      --character-size: 92px;
    }

    .section-kicker {
      margin: 0 0 8px;
      color: var(--violet);
      font-size: 0.82rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .section-title {
      position: relative;
      margin: 0;
      color: var(--ink);
      font-size: clamp(1.8rem, 4vw, 3rem);
      line-height: 1.25;
      font-weight: 900;
    }

    .section-copy {
      max-width: 460px;
      margin: 0;
      color: var(--text);
      font-weight: 700;
    }

    #features .section-head.has-character {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem) auto;
      gap: clamp(28px, 4vw, 52px);
      align-items: end;
      padding-right: 0;
    }

    #features .section-head > div {
      min-width: 0;
    }

    #features .section-title {
      max-width: 15em;
      text-wrap: balance;
    }

    #features .section-head .section-copy {
      max-width: none;
      line-height: 1.9;
    }

    #features .section-character {
      position: static;
      justify-self: end;
      align-self: end;
    }

    .update-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
      gap: clamp(24px, 3vw, 42px);
    }

    #updates {
      background:
        radial-gradient(circle at 12% 20%, rgba(255, 250, 238, 0.82), transparent 30%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.74), rgba(244, 236, 248, 0.58));
    }

    .panel {
      position: relative;
      border-radius: var(--radius);
      border: 1px solid rgba(188, 151, 83, 0.36);
      background:
        linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 250, 241, 0.94)),
        var(--white);
      box-shadow: 0 18px 42px rgba(92, 74, 46, 0.12);
      overflow: hidden;
    }

    .panel::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 5px;
      background: linear-gradient(90deg, rgba(190, 153, 83, 0.88), rgba(239, 219, 168, 0.72));
      pointer-events: none;
      z-index: 2;
    }

    .panel[data-cms-collection="vacancy"] {
      border-color: rgba(178, 117, 97, 0.42);
      box-shadow: 0 22px 52px rgba(92, 74, 46, 0.15);
    }

    .panel-header {
      padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.8vw, 34px) clamp(18px, 2.2vw, 26px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border-bottom: 1px solid rgba(188, 151, 83, 0.24);
      background:
        linear-gradient(90deg, rgba(246, 230, 185, 0.86), rgba(255, 249, 235, 0.72)),
        rgba(255, 253, 248, 0.94);
    }

    .panel-title {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 1.08rem;
      font-weight: 900;
      color: var(--ink);
    }

    .panel-title .icon {
      color: #9b7441;
    }

    .updated {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 999px;
      color: #755d38;
      background: rgba(255, 253, 248, 0.74);
      border: 1px solid rgba(188, 151, 83, 0.24);
      font-size: 0.78rem;
      font-weight: 800;
      white-space: nowrap;
    }

    .panel-body {
      padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 34px) clamp(24px, 3vw, 34px);
    }

    .vacancy-status {
      display: grid;
      gap: 14px;
    }

    .status-row {
      position: relative;
      display: grid;
      grid-template-columns: 92px 1fr;
      gap: 12px;
      align-items: start;
    }

    .vacancy-status .status-row:first-child {
      grid-template-columns: 108px 1fr;
      align-items: center;
      padding: 16px 18px;
      border: 1px solid rgba(178, 117, 97, 0.2);
      border-radius: var(--radius);
      background:
        linear-gradient(105deg, rgba(255, 248, 232, 0.96), rgba(255, 253, 248, 0.72)),
        rgba(255, 255, 255, 0.88);
      box-shadow: 0 12px 26px rgba(92, 74, 46, 0.09);
    }

    .status-label {
      padding: 5px 10px;
      border-radius: 999px;
      text-align: center;
      color: #765a32;
      background: rgba(246, 230, 185, 0.86);
      border: 1px solid rgba(188, 151, 83, 0.18);
      font-size: 0.82rem;
      font-weight: 900;
    }

    .vacancy-status .status-row:first-child .status-label {
      color: var(--white);
      background: linear-gradient(135deg, #b46f62, #c89b55);
      border-color: transparent;
      box-shadow: 0 8px 16px rgba(178, 117, 97, 0.16);
    }

    .status-text {
      margin: 0;
      color: var(--ink);
      font-weight: 800;
    }

    .vacancy-status .status-row:first-child .status-text {
      font-size: clamp(1rem, 1.8vw, 1.18rem);
      line-height: 1.6;
      font-weight: 900;
    }

    .vacancy-status .status-row:first-child .status-text::before {
      content: "募集状況";
      display: inline-flex;
      align-items: center;
      margin: 0 10px 4px 0;
      padding: 3px 9px;
      border-radius: 999px;
      color: #8b5d2d;
      background: rgba(246, 230, 185, 0.7);
      border: 1px solid rgba(188, 151, 83, 0.24);
      font-size: 0.72rem;
      line-height: 1.2;
      font-weight: 900;
      vertical-align: middle;
    }

    .status-note {
      margin: 18px 0 0;
      padding-top: 16px;
      border-top: 1px dashed rgba(188, 151, 83, 0.28);
      color: var(--text);
      font-size: 0.94rem;
      font-weight: 700;
    }

    .news-list {
      display: grid;
      gap: 0;
    }

    .news-item {
      display: grid;
      grid-template-columns: 120px minmax(0, 1fr);
      gap: 18px;
      padding: 16px 0;
      border-bottom: 1px solid rgba(188, 151, 83, 0.18);
      text-decoration: none;
    }

    .news-item:first-child {
      margin: -2px -4px 0;
      padding: 16px 14px;
      border: 1px solid rgba(188, 151, 83, 0.18);
      border-radius: var(--radius);
      background: rgba(255, 253, 248, 0.72);
    }

    .news-item:first-child {
      padding-top: 16px;
    }

    .news-item:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }

    .news-date {
      color: var(--violet);
      font-size: 0.84rem;
      font-weight: 900;
    }

    .news-title {
      margin: 0;
      color: var(--ink);
      font-size: 1rem;
      line-height: 1.55;
      font-weight: 900;
    }

    .news-item:hover .news-title {
      color: var(--violet-deep);
    }

    #updates {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 18% 16%, rgba(255, 250, 238, 0.9), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(238, 231, 247, 0.48), transparent 34%),
        linear-gradient(180deg, rgba(255, 253, 248, 0.9), rgba(249, 244, 236, 0.78));
    }

    #updates.section {
      padding-top: clamp(76px, 8vw, 112px);
      padding-bottom: clamp(96px, 9vw, 140px);
    }

    #updates .container {
      position: relative;
      z-index: 1;
    }

    #updates .container::before,
    #updates .container::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: 0;
      background-repeat: no-repeat;
      background-size: contain;
      filter: drop-shadow(0 18px 24px rgba(75, 59, 98, 0.1));
    }

    #updates .container::before {
      top: clamp(-88px, -6vw, -52px);
      right: clamp(-102px, -6vw, -42px);
      width: clamp(250px, 25vw, 382px);
      aspect-ratio: 1709 / 1991;
      background-image: url("../img/updates-ornament-violet-bird-top-right.png");
    }

    #updates .container::after {
      left: clamp(-112px, -7vw, -46px);
      bottom: clamp(-118px, -8vw, -72px);
      width: clamp(300px, 31vw, 470px);
      aspect-ratio: 1254 / 1122;
      background-image: url("../img/updates-ornament-violet-bottom-left.png");
    }

    #updates .section-head {
      display: grid;
      justify-items: center;
      gap: 18px;
      margin-bottom: clamp(38px, 4vw, 56px);
      padding-inline: clamp(120px, 17vw, 250px);
      text-align: center;
    }

    #updates .section-head::before,
    #updates .section-character,
    #updates .section-kicker {
      display: none;
    }

    #updates .section-head.has-character {
      min-height: 0;
      padding-right: clamp(120px, 17vw, 250px);
    }

    #updates .section-head > div {
      position: relative;
      display: grid;
      justify-items: center;
      padding-top: clamp(30px, 3.2vw, 42px);
    }

    #updates .section-head > div::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: clamp(96px, 11vw, 148px);
      aspect-ratio: 674 / 158;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url("../img/classic-divider-crown-scroll.png");
      opacity: 0.58;
      pointer-events: none;
      transform: translateX(-50%);
    }

    #updates .section-head > div::after {
      display: none;
    }

    #updates .section-title {
      padding-bottom: clamp(31px, 3vw, 42px);
      color: #4c3e44;
      font-size: clamp(2.2rem, 4.3vw, 3.5rem);
      letter-spacing: 0;
      text-shadow: 0 2px 0 rgba(255, 253, 248, 0.72);
    }

    #updates .section-title::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: clamp(160px, 19vw, 260px);
      height: clamp(16px, 1.8vw, 22px);
      background: url("../img/updates-title-flourish-lavender.png") center / contain no-repeat;
      opacity: 0.66;
      transform: translateX(-50%);
      pointer-events: none;
    }

    #updates .section-copy {
      max-width: min(100%, 44rem);
      margin-inline: auto;
      color: #5f555d;
    }

    #updates .update-grid {
      position: relative;
      z-index: 1;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(42px, 5vw, 74px);
    }

    #updates .panel {
      --updates-border: rgba(192, 143, 94, 0.62);
      --updates-border-soft: rgba(192, 126, 111, 0.32);
      --updates-inner-line: rgba(192, 143, 94, 0.34);
      --updates-corner-size: clamp(54px, 5.4vw, 76px);
      --updates-corner-offset: clamp(13px, 1.35vw, 18px);
      --updates-inner-gap: calc(var(--updates-corner-size) + 8px);
      min-height: clamp(420px, 34vw, 482px);
      border: 0;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(255, 250, 241, 0.96));
      box-shadow:
        0 22px 44px rgba(92, 74, 46, 0.12),
        0 2px 0 rgba(255, 255, 255, 0.6) inset;
      clip-path: none;
      overflow: visible;
    }

    #updates .panel::before {
      inset: 0;
      height: auto;
      border: 2px solid var(--updates-border);
      border-radius: inherit;
      background: none;
      clip-path: none;
      z-index: 0;
    }

    #updates .panel::after {
      content: "";
      position: absolute;
      inset: 18px;
      border: 0;
      background:
        linear-gradient(var(--updates-inner-line), var(--updates-inner-line)) left var(--updates-inner-gap) top / calc(100% - var(--updates-inner-gap) - var(--updates-inner-gap)) 1px no-repeat,
        linear-gradient(var(--updates-inner-line), var(--updates-inner-line)) left var(--updates-inner-gap) bottom / calc(100% - var(--updates-inner-gap) - var(--updates-inner-gap)) 1px no-repeat,
        linear-gradient(var(--updates-inner-line), var(--updates-inner-line)) left top var(--updates-inner-gap) / 1px calc(100% - var(--updates-inner-gap) - var(--updates-inner-gap)) no-repeat,
        linear-gradient(var(--updates-inner-line), var(--updates-inner-line)) right top var(--updates-inner-gap) / 1px calc(100% - var(--updates-inner-gap) - var(--updates-inner-gap)) no-repeat;
      clip-path: none;
      pointer-events: none;
      z-index: 0;
    }

    #updates .panel-corner {
      position: absolute;
      width: var(--updates-corner-size);
      aspect-ratio: 1 / 1;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      pointer-events: none;
      z-index: 2;
    }

    #updates .panel-corner-tl {
      top: var(--updates-corner-offset);
      left: var(--updates-corner-offset);
      background-image: url("../img/updates-card-corner-ornate-top-left.png");
    }

    #updates .panel-corner-tr {
      top: var(--updates-corner-offset);
      right: var(--updates-corner-offset);
      background-image: url("../img/updates-card-corner-ornate-top-right.png");
    }

    #updates .panel-corner-bl {
      bottom: var(--updates-corner-offset);
      left: var(--updates-corner-offset);
      background-image: url("../img/updates-card-corner-ornate-bottom-left.png");
    }

    #updates .panel-corner-br {
      right: var(--updates-corner-offset);
      bottom: var(--updates-corner-offset);
      background-image: url("../img/updates-card-corner-ornate-bottom-right.png");
    }

    #updates .panel > * {
      position: relative;
      z-index: 1;
    }

    #updates .panel > .panel-corner {
      position: absolute;
      z-index: 2;
    }

    #updates .panel[data-cms-collection="vacancy"] {
      box-shadow:
        0 24px 48px rgba(92, 74, 46, 0.13),
        0 2px 0 rgba(255, 255, 255, 0.6) inset;
    }

    #updates .panel-header {
      position: relative;
      display: grid;
      grid-template-columns: minmax(5.8rem, 1fr) auto minmax(5.8rem, 1fr);
      gap: clamp(12px, 1.8vw, 24px);
      align-items: center;
      justify-items: center;
      padding: clamp(42px, 4vw, 54px) clamp(38px, 3vw, 48px) clamp(40px, 4vw, 52px);
      border-bottom: 0;
      background: transparent;
    }

    #updates .panel-header::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 14px;
      width: min(58%, 350px);
      height: 22px;
      background: url("../img/updates-card-divider-gold.png") center / contain no-repeat;
      opacity: 0.88;
      transform: translateX(-50%);
      pointer-events: none;
    }

    #updates .panel-title {
      grid-column: 2;
      color: #4d4045;
      font-size: clamp(1.3rem, 2vw, 1.62rem);
      line-height: 1.28;
      letter-spacing: 0;
      justify-content: center;
      text-align: center;
    }

    #updates .panel-title .icon {
      width: 28px;
      height: 28px;
      color: #a17a42;
      flex: 0 0 auto;
    }

    #updates .updated {
      position: static;
      grid-column: 3;
      justify-self: end;
      min-height: 36px;
      padding: 5px 14px;
      color: #82633a;
      background: rgba(255, 253, 248, 0.86);
      border-color: rgba(192, 143, 94, 0.32);
      box-shadow: 0 6px 14px rgba(92, 74, 46, 0.06);
      white-space: nowrap;
    }

    #updates .panel-body {
      padding: clamp(34px, 3.6vw, 48px) clamp(58px, 5vw, 76px) clamp(42px, 4.5vw, 60px);
    }

    #updates .vacancy-status {
      gap: 0;
    }

    #updates .status-row {
      grid-template-columns: 126px minmax(0, 1fr);
      align-items: center;
      gap: 18px;
      padding: 22px 0;
      border-bottom: 1px dashed rgba(188, 151, 83, 0.28);
    }

    #updates .status-row:last-child {
      border-bottom: 0;
    }

    #updates .vacancy-status .status-row:first-child {
      grid-template-columns: 126px minmax(0, 1fr);
      padding: 0 0 24px;
      border: 0;
      border-bottom: 1px dashed rgba(188, 151, 83, 0.28);
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #updates .status-label {
      min-width: 104px;
      padding: 8px 18px;
      border-radius: 999px;
      font-size: 0.94rem;
    }

    #updates .vacancy-status .status-row:first-child .status-label {
      background: linear-gradient(135deg, #b86d61, #c99053);
      box-shadow: 0 10px 18px rgba(178, 117, 97, 0.16);
    }

    #updates .status-text {
      font-size: clamp(1.05rem, 1.7vw, 1.32rem);
      line-height: 1.75;
    }

    #updates .vacancy-status .status-row:first-child .status-text::before {
      margin-right: 10px;
      background: rgba(246, 230, 185, 0.76);
    }

    #updates .status-note {
      margin-top: 22px;
      padding: 24px 10px 0;
      text-align: center;
      line-height: 1.8;
    }

    #updates .news-item {
      padding: 22px 0;
      border-bottom: 1px dashed rgba(188, 151, 83, 0.28);
    }

    #updates .news-item:first-child {
      margin: 0;
      padding: 8px 0 22px;
      border: 0;
      border-bottom: 1px dashed rgba(188, 151, 83, 0.28);
      border-radius: 0;
      background: transparent;
    }

    #updates .news-date {
      color: #7559a7;
      font-size: 1rem;
    }

    #updates .news-title {
      font-size: clamp(1.05rem, 1.45vw, 1.2rem);
      line-height: 1.75;
    }

    #updates .monthly-care-card {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 0.78fr);
      gap: clamp(30px, 4.5vw, 58px);
      margin-top: clamp(44px, 5vw, 72px);
      padding: clamp(42px, 5vw, 68px);
      overflow: hidden;
      border: 1px solid rgba(169, 111, 102, 0.22);
      border-radius: 18px;
      background:
        url("../img/decor-kado-rose-soft.png") right -44px bottom -56px / clamp(260px, 25vw, 380px) auto no-repeat,
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 252, 0.94));
      box-shadow:
        0 22px 46px rgba(91, 70, 120, 0.11),
        0 2px 0 rgba(255, 255, 255, 0.64) inset;
    }

    #updates .monthly-care-card::before {
      content: "";
      position: absolute;
      inset: clamp(18px, 2vw, 26px);
      background:
        url("../img/decor-frame-corner-waku-s-tl.png") left top / 82px auto no-repeat,
        linear-gradient(rgba(169, 111, 102, 0.24), rgba(169, 111, 102, 0.24)) left 78px top / calc(100% - 78px) 1px no-repeat,
        linear-gradient(rgba(169, 111, 102, 0.18), rgba(169, 111, 102, 0.18)) right top / 1px calc(100% - 78px) no-repeat,
        linear-gradient(rgba(169, 111, 102, 0.18), rgba(169, 111, 102, 0.18)) left 78px bottom / calc(100% - 156px) 1px no-repeat,
        linear-gradient(rgba(169, 111, 102, 0.18), rgba(169, 111, 102, 0.18)) left top 78px / 1px calc(100% - 156px) no-repeat;
      opacity: 0.5;
      pointer-events: none;
    }

    #updates .monthly-care-card > * {
      position: relative;
      z-index: 1;
    }

    #updates .monthly-care-copy {
      grid-column: 1;
      grid-row: 1;
    }

    #updates .monthly-care-illustration {
      float: right;
      width: clamp(196px, 19vw, 280px);
      margin: clamp(6px, 1vw, 12px) 0 14px clamp(20px, 3vw, 34px);
      shape-margin: 18px;
      mix-blend-mode: normal;
      opacity: 1;
      filter: drop-shadow(0 16px 22px rgba(91, 70, 120, 0.1));
      pointer-events: none;
    }

    #updates .monthly-care-kicker {
      margin: 0 0 12px;
      color: var(--coral);
      font-size: 0.82rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    #updates .monthly-care-copy h2 {
      max-width: none;
      margin: 0;
      color: var(--ink);
      font-size: clamp(1.58rem, 3vw, 2.38rem);
      line-height: 1.36;
      font-weight: 900;
      text-wrap: balance;
    }

    #updates .monthly-care-title-break {
      display: block;
    }

    #updates .monthly-care-copy p {
      max-width: 43em;
      margin: clamp(18px, 2vw, 24px) 0 0;
      color: var(--text);
      font-weight: 700;
      line-height: 1.95;
    }

    #updates .monthly-care-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: clamp(24px, 3vw, 34px);
      clear: both;
    }

    #updates .monthly-care-details {
      grid-column: 2;
      grid-row: 1;
      display: grid;
      align-content: center;
      gap: 20px;
      padding-left: clamp(26px, 3vw, 42px);
      border-left: 1px dashed rgba(169, 111, 102, 0.28);
    }

    #updates .monthly-care-concerns {
      padding-bottom: 20px;
      border-bottom: 1px dashed rgba(169, 111, 102, 0.24);
    }

    #updates .monthly-care-concerns p {
      margin: 0 0 12px;
      color: var(--violet-deep);
      font-weight: 900;
    }

    #updates .monthly-care-concerns ul {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #updates .monthly-care-concerns li {
      position: relative;
      padding-left: 22px;
      color: var(--ink);
      font-weight: 800;
      line-height: 1.8;
    }

    #updates .monthly-care-concerns li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0.86em;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 0 0 5px rgba(169, 111, 102, 0.12);
    }

    #updates .monthly-care-notes {
      display: grid;
      gap: 16px;
      margin: 0;
    }

    #updates .monthly-care-notes div {
      display: grid;
      gap: 6px;
    }

    #updates .monthly-care-notes dt {
      color: var(--coral);
      font-size: 0.86rem;
      font-weight: 900;
    }

    #updates .monthly-care-notes dd {
      margin: 0;
      color: var(--text);
      font-weight: 700;
      line-height: 1.82;
      overflow-wrap: anywhere;
    }

    #updates .monthly-care-footnote {
      margin: 0;
      padding-top: 16px;
      border-top: 1px dashed rgba(169, 111, 102, 0.2);
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.75;
    }

    .about-layout {
      display: grid;
      grid-template-columns: 0.95fr 1.05fr;
      gap: clamp(38px, 5vw, 76px);
      align-items: center;
    }

    #about .container {
      position: relative;
    }

    #about .container::after {
      content: "";
      position: absolute;
      right: clamp(-58px, -4vw, -24px);
      bottom: clamp(-118px, -7vw, -78px);
      width: clamp(240px, 26vw, 360px);
      aspect-ratio: 1448 / 1086;
      background: url("../img/hero_03.png") center / contain no-repeat;
      opacity: 0.82;
      pointer-events: none;
      z-index: 0;
      filter: drop-shadow(0 16px 20px rgba(75, 59, 98, 0.14));
    }

    #about .about-layout {
      position: relative;
      z-index: 1;
    }

    .photo-stack {
      position: relative;
      min-height: 480px;
    }

    .photo-slider {
      position: relative;
      z-index: 1;
      overflow: visible;
      border-radius: var(--radius);
      border: 8px solid var(--white);
      box-shadow: var(--shadow);
      background: var(--cream);
    }

    .photo-slider::after {
      content: "";
      position: absolute;
      left: clamp(-34px, -2.6vw, -20px);
      bottom: clamp(-28px, -2.2vw, -16px);
      width: clamp(82px, 8.4vw, 112px);
      aspect-ratio: 289 / 264;
      background: url("../img/decor-photo-violet-corner.png") left bottom / contain no-repeat;
      opacity: 0.9;
      pointer-events: none;
      z-index: 3;
      filter: drop-shadow(0 8px 10px rgba(75, 59, 98, 0.18));
    }

    .slider-track {
      position: relative;
      overflow: hidden;
      border-radius: calc(var(--radius) - 8px);
      min-height: 480px;
      aspect-ratio: 4 / 3;
    }

    .slider-slide {
      position: absolute;
      inset: 0;
      margin: 0;
      opacity: 0;
      transform: scale(1.035);
      transition: opacity 720ms ease, transform 1400ms ease;
      pointer-events: none;
    }

    .slider-slide.is-active {
      opacity: 1;
      transform: scale(1);
      pointer-events: auto;
      z-index: 1;
    }

    .slider-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .slider-caption {
      position: absolute;
      left: 16px;
      bottom: 16px;
      z-index: 4;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(102, 80, 127, 0.18);
      background: rgba(255, 255, 255, 0.88);
      color: var(--violet-deep);
      font-size: 0.84rem;
      font-weight: 900;
    }

    .slider-controls {
      position: absolute;
      left: 14px;
      right: 14px;
      top: 50%;
      z-index: 3;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
      pointer-events: none;
    }

    .slider-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(102, 80, 127, 0.18);
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.82);
      color: var(--violet-deep);
      box-shadow: 0 10px 24px rgba(91, 70, 120, 0.14);
      cursor: pointer;
      pointer-events: auto;
      transition: transform 180ms ease, background 180ms ease;
    }

    .slider-button:hover {
      transform: scale(1.06);
      background: var(--white);
    }

    .slider-button svg {
      width: 18px;
      height: 18px;
    }

    .slider-dots {
      position: absolute;
      right: 18px;
      bottom: 20px;
      z-index: 3;
      display: flex;
      gap: 7px;
      align-items: center;
    }

    .slider-dot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(102, 80, 127, 0.32);
      cursor: pointer;
      transition: width 180ms ease, background 180ms ease;
    }

    .slider-dot.is-active {
      width: 22px;
      background: var(--violet-deep);
    }

    .photo-deco {
      display: none;
    }

    .text-block {
      display: grid;
      gap: 20px;
    }

    .lead-title {
      margin: 0;
      font-size: clamp(1.65rem, 3vw, 2.55rem);
      line-height: 1.35;
      font-weight: 900;
    }

    .lead-title::after {
      content: "";
      display: block;
      width: 100%;
      height: clamp(18px, 2.1vw, 24px);
      margin-top: clamp(18px, 2.4vw, 28px);
      background: url("../img/updates-title-flourish-lavender.png") center / 100% auto no-repeat;
      opacity: 0.5;
      pointer-events: none;
    }

    .body-copy {
      margin: 0;
      color: var(--text);
      font-weight: 700;
    }

    .highlight-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
    }

    .highlight-list li {
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.74);
      color: var(--ink);
      font-weight: 900;
      line-height: 1.45;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(26px, 3vw, 42px);
    }

    .feature {
      position: relative;
      overflow: visible;
      min-height: 100%;
      display: grid;
      align-content: start;
      gap: 16px;
      padding: 16px 16px 78px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--white);
      box-shadow: 0 14px 34px rgba(76, 67, 51, 0.08);
      transition: transform 220ms ease, box-shadow 220ms ease;
    }

    .feature::after {
      inset: 10px;
      --frame-corner-size: 52px auto;
      opacity: 0.7;
      z-index: 2;
    }

    .feature.is-frame-visible::after {
      opacity: 0.82;
    }

    .feature:nth-child(1) {
      background:
        url("../img/decor-kado-rose-soft.png") right -64px bottom -74px / 162px auto no-repeat,
        linear-gradient(180deg, #ffffff, rgba(230, 220, 242, 0.8));
    }

    .feature:nth-child(2) {
      background:
        url("../img/decor-kado-rose-soft.png") right -64px bottom -74px / 162px auto no-repeat,
        linear-gradient(180deg, #ffffff, rgba(217, 238, 228, 0.72));
    }

    .feature:nth-child(3) {
      background:
        url("../img/decor-kado-rose-soft.png") right -64px bottom -74px / 162px auto no-repeat,
        linear-gradient(180deg, #ffffff, rgba(216, 236, 244, 0.74));
    }

    .feature:nth-child(4) {
      background:
        url("../img/decor-kado-rose-soft.png") right -64px bottom -74px / 162px auto no-repeat,
        linear-gradient(180deg, #ffffff, rgba(245, 200, 95, 0.28));
    }

    .feature-media {
      position: relative;
      z-index: 1;
      aspect-ratio: 4 / 3;
      margin: 24px 4px 0;
      overflow: hidden;
      border: 1px solid rgba(169, 111, 102, 0.18);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.74);
      box-shadow: 0 12px 24px rgba(76, 67, 51, 0.1);
    }

    .feature-photo {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature:nth-child(1) .feature-photo {
      object-position: center center;
    }

    .feature:nth-child(2) .feature-photo {
      object-position: 34% center;
    }

    .feature:nth-child(3) .feature-photo {
      object-position: 48% center;
    }

    .feature-sticker {
      position: absolute;
      bottom: -8px;
      z-index: 3;
      width: clamp(44px, 4vw, 58px);
      height: auto;
      max-height: 72px;
      object-fit: contain;
      pointer-events: none;
      opacity: 0.74;
      filter: drop-shadow(0 9px 12px rgba(75, 59, 98, 0.16));
      animation: gentle-float 5.8s ease-in-out infinite;
      transform-origin: center bottom;
      right: -14px;
    }

    .feature:nth-child(2) .feature-sticker {
      animation-delay: 0.55s;
    }

    .feature:nth-child(3) .feature-sticker {
      animation-delay: 1.1s;
    }

    .feature:nth-child(4) .feature-sticker {
      animation-delay: 1.65s;
      width: clamp(48px, 4.5vw, 64px);
    }

    .feature h3 {
      margin: 0 8px 8px;
      font-size: 1.1rem;
      line-height: 1.45;
      font-weight: 900;
    }

    .feature p {
      margin: 0 8px;
      color: var(--text);
      font-size: 0.93rem;
      font-weight: 700;
    }

    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(26px, 3vw, 42px);
    }

    .info-box {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background:
        url("../img/decor-kado-rose-soft.png") right -62px bottom -72px / 162px auto no-repeat,
        var(--white);
      padding: 42px 24px 28px;
      box-shadow: 0 14px 34px rgba(76, 67, 51, 0.08);
      transition: transform 220ms ease, box-shadow 220ms ease;
    }

    .info-box::before {
      left: 50%;
      top: 8px;
      right: auto;
      width: min(158px, 68%);
      height: 58px;
      border-radius: 0;
      background: url("../img/decor-message-arch.png") center top / contain no-repeat;
      opacity: 0.12;
      transform: translateX(-50%);
    }

    .info-box h3 {
      margin: 0 0 12px;
      color: var(--violet-deep);
      font-size: 1rem;
      font-weight: 900;
    }

    .info-box p,
    .info-box ul {
      margin: 0;
      color: var(--text);
      font-weight: 700;
    }

    .info-box ul {
      padding-left: 1.2em;
    }

    .event-wrap {
      display: grid;
      grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
      gap: clamp(30px, 4vw, 58px);
      align-items: start;
    }

    .event-gallery {
      display: block;
      min-width: 0;
    }

    .event-photo {
      position: relative;
      width: 100%;
      min-height: 420px;
      margin: 0;
      overflow: hidden;
      border-radius: var(--radius);
      border: 6px solid var(--white);
      background: var(--cream);
      box-shadow: 0 12px 28px rgba(76, 67, 51, 0.12);
    }

    .event-photo img {
      position: absolute;
      inset: 0;
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .event-photo-caption {
      position: absolute;
      left: 16px;
      bottom: 16px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      max-width: calc(100% - 32px);
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      color: var(--ink);
      box-shadow: 0 10px 26px rgba(76, 67, 51, 0.16);
      line-height: 1.35;
      z-index: 1;
    }

    .event-photo-caption small {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      padding: 4px 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, #b96f84, #cf929d);
      color: var(--white);
      font-size: 0.78rem;
      font-weight: 900;
      white-space: nowrap;
    }

    .event-photo-caption span {
      color: var(--ink);
      font-size: clamp(1rem, 2vw, 1.35rem);
      font-weight: 900;
    }

    .event-photo-feature {
      isolation: isolate;
    }

    .event-photo-feature img {
      transition: opacity 220ms ease, transform 420ms ease, filter 420ms ease;
      will-change: opacity, transform, filter;
    }

    .event-photo-feature.is-changing img {
      opacity: 0;
      transform: scale(1.04) translateY(8px);
      filter: blur(4px) saturate(0.88);
    }

    .event-photo-feature.is-fresh img {
      animation: event-photo-reveal 540ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes event-photo-reveal {
      0% { transform: scale(1.02) translateY(6px); }
      100% { transform: scale(1) translateY(0); }
    }

    .event-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .event-list li {
      min-width: 0;
    }

    .event-item {
      position: relative;
      isolation: isolate;
      width: 100%;
      min-height: 62px;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr);
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.72);
      color: var(--ink);
      cursor: pointer;
      font: inherit;
      font-weight: 800;
      text-align: left;
      line-height: 1.45;
      overflow: hidden;
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
    }

    .event-item::after {
      content: "";
      position: absolute;
      right: -44px;
      bottom: -52px;
      width: 148px;
      aspect-ratio: 658 / 645;
      background: url("../img/decor-kado-rose.png") right bottom / contain no-repeat;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
      transform: translate(12px, 12px) scale(0.96);
      transition: opacity 220ms ease, transform 260ms ease;
    }

    .event-item > * {
      position: relative;
      z-index: 1;
    }

    .event-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 32px rgba(91, 70, 120, 0.13);
    }

    .event-item:hover::after {
      opacity: 0.12;
      transform: translate(0, 0) scale(1);
    }

    .event-item:focus-visible {
      outline: 3px solid rgba(185, 111, 132, 0.28);
      outline-offset: 3px;
    }

    .event-item.is-active {
      border-color: rgba(185, 111, 132, 0.36);
      background: linear-gradient(135deg, #b96f84, #cf929d);
      color: var(--white);
      box-shadow: 0 14px 28px rgba(185, 111, 132, 0.17);
      transform: translateY(-1px);
    }

    .event-item.is-active::after {
      right: -34px;
      bottom: -46px;
      width: 158px;
      background-image: url("../img/decor-kado-white.png");
      opacity: 0.2;
      transform: translate(0, 0) scale(1);
    }

    .event-item.is-active .month {
      color: #98566c;
      background: rgba(255, 253, 248, 0.9);
    }

    .event-item-title {
      overflow-wrap: anywhere;
    }

    .month {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 42px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(241, 222, 216, 0.58);
      color: var(--coral);
      font-weight: 900;
      white-space: nowrap;
    }


    .parent-voices {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(circle at 12% 16%, rgba(241, 222, 216, 0.66), transparent 28%),
        radial-gradient(circle at 82% 74%, rgba(230, 220, 242, 0.72), transparent 34%),
        linear-gradient(135deg, rgba(251, 247, 255, 0.96), rgba(255, 251, 244, 0.94));
    }

    .parent-voices::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: clamp(54px, 5vw, 82px);
      border-radius: 0;
      background:
        linear-gradient(180deg, rgba(255, 251, 239, 0), rgba(255, 252, 245, 0.52)),
        repeating-linear-gradient(0deg, rgba(255, 248, 226, 0.42) 0 12px, rgba(245, 215, 131, 0.2) 12px 24px),
        repeating-linear-gradient(90deg, rgba(255, 248, 226, 0.42) 0 12px, rgba(245, 215, 131, 0.2) 12px 24px);
      opacity: 0.74;
      z-index: -1;
    }

    .parent-voices > .container,
    .parent-voices .voice-marquee-track {
      position: relative;
      z-index: 1;
    }

    .parent-voices .section-head {
      min-height: 230px;
      margin-bottom: clamp(28px, 4vw, 52px);
      padding-right: min(42vw, 450px);
      align-items: center;
    }

    .voices-illustration {
      position: absolute;
      right: 0;
      top: 50%;
      width: clamp(250px, 34vw, 440px);
      max-height: 250px;
      object-fit: contain;
      opacity: 0.72;
      pointer-events: none;
      z-index: 0;
      filter: drop-shadow(0 22px 28px rgba(75, 59, 98, 0.16));
      transform: translateY(-50%) rotate(-2deg);
      transform-origin: center;
    }

    .voice-marquee-track {
      width: 100vw;
      margin-left: calc(50% - 50vw);
      overflow: hidden;
      outline: none;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }

    .voice-marquee {
      display: flex;
      align-items: stretch;
      gap: clamp(28px, 3vw, 46px);
      width: max-content;
      padding: 12px 0 20px max(24px, calc((100vw - var(--max)) / 2 + 24px));
      will-change: transform;
    }

    .voice-marquee-track:hover .voice-marquee,
    .voice-marquee-track:focus-within .voice-marquee,
    .voice-marquee-track:focus .voice-marquee {
      animation-play-state: paused;
    }

    .voice-marquee-track.is-enhanced .voice-marquee {
      animation: none;
    }

    .parent-voice-card {
      --voice-frame-line: rgba(176, 125, 112, 0.46);
      --voice-frame-line-soft: rgba(176, 125, 112, 0.26);
      position: relative;
      flex: 0 0 340px;
      min-height: 418px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-radius: 50% 50% 8px 8px / 146px 146px 8px 8px;
      border: 1px solid rgba(188, 151, 83, 0.2);
      background:
        url("../img/decor-kado-rose-soft.png") right -38px bottom -50px / 178px auto no-repeat,
        linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(255, 250, 244, 0.92)),
        rgba(255, 255, 255, 0.86);
      box-shadow: 0 22px 48px rgba(75, 59, 98, 0.12);
      padding: 196px 42px 42px;
      backdrop-filter: blur(6px);
    }

    .parent-voice-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 166px;
      border-radius: 50% 50% 24px 24px / 146px 146px 24px 24px;
      background:
        url("../img/decor-voice-arch.png") center 8px / 100% auto no-repeat,
        linear-gradient(180deg, rgba(255, 248, 237, 0.98), rgba(255, 253, 248, 0.2));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
      opacity: 0.82;
      pointer-events: none;
      z-index: 0;
    }

    .parent-voice-card::after {
      content: "";
      position: absolute;
      left: 18px;
      right: 18px;
      top: 174px;
      bottom: 18px;
      border: 1px solid var(--voice-frame-line);
      border-radius: 0 0 3px 3px;
      box-shadow:
        inset 0 0 0 4px rgba(255, 253, 248, 0.68),
        inset 0 0 0 5px var(--voice-frame-line-soft);
      pointer-events: none;
      z-index: 0;
    }

    .voice-profile {
      position: relative;
      order: 2;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 7px;
      width: max-content;
      max-width: 100%;
      margin: auto 0 0;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(241, 222, 216, 0.7);
      border: 1px solid rgba(169, 111, 102, 0.14);
      color: var(--violet-deep);
      font-size: 0.78rem;
      font-weight: 900;
      text-align: left;
      box-shadow: 0 10px 22px rgba(75, 59, 98, 0.08);
    }

    .voice-profile::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--coral);
      box-shadow: 0 0 0 4px rgba(169, 111, 102, 0.14);
    }

    .voice-quote {
      position: relative;
      order: 1;
      z-index: 1;
      margin: 0 0 28px;
      color: var(--text);
      font-size: 0.96rem;
      font-weight: 700;
      line-height: 1.95;
    }

    .instagram-panel {
      display: grid;
      grid-template-columns: 0.86fr 1.14fr;
      gap: clamp(30px, 4vw, 58px);
      align-items: center;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background:
        url("../img/decor-kado-rose-soft.png") right -34px bottom -44px / clamp(250px, 25vw, 360px) auto no-repeat,
        var(--white);
      box-shadow: var(--shadow);
      padding: clamp(28px, 4vw, 46px);
      overflow: hidden;
    }

    .insta-copy {
      position: relative;
      z-index: 1;
    }

    .insta-copy h3 {
      margin: 0 0 10px;
      font-size: clamp(1.5rem, 3vw, 2.4rem);
      line-height: 1.25;
      font-weight: 900;
    }

    .insta-copy p {
      margin: 0 0 20px;
      color: var(--text);
      font-weight: 700;
    }

    .insta-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .insta-tile {
      margin: 0;
      aspect-ratio: 1;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--cream);
    }

    .insta-tile img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .contact-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(28px, 4vw, 52px);
      align-items: stretch;
    }

    .contact-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background:
        url("../img/decor-kado-white-soft.png") right -38px bottom -46px / clamp(260px, 24vw, 350px) auto no-repeat,
        linear-gradient(135deg, var(--violet-deep), #4f3f63);
      color: var(--white);
      padding: clamp(64px, 6vw, 86px);
      box-shadow: var(--shadow);
    }

    .contact-card::after,
    .access-card::after {
      content: "";
      position: absolute;
      inset: clamp(28px, 2.8vw, 40px);
      --frame-line: rgba(255, 255, 255, 0.32);
      --frame-corner: url("../img/decor-frame-corner-waku-s-light-tl.png");
      --frame-corner-size: 84px auto;
      --frame-corner-position: left 6px top 6px;
      background-image:
        var(--frame-corner),
        linear-gradient(var(--frame-line), var(--frame-line)),
        linear-gradient(var(--frame-line), var(--frame-line)),
        linear-gradient(var(--frame-line), var(--frame-line)),
        linear-gradient(var(--frame-line), var(--frame-line));
      background-position:
        var(--frame-corner-position),
        left top,
        right top,
        left bottom,
        left top;
      background-size:
        var(--frame-corner-size),
        0 1px,
        1px 0,
        0 1px,
        1px 0;
      background-repeat: no-repeat;
      opacity: 0.42;
      pointer-events: none;
      z-index: 0;
      transition: background-size 1180ms var(--draw-frame-ease, cubic-bezier(0.2, 0.8, 0.2, 1)), opacity 360ms ease;
    }

    .contact-card.is-frame-visible::after,
    .access-card.is-frame-visible::after {
      background-size:
        var(--frame-corner-size),
        100% 1px,
        1px 100%,
        100% 1px,
        1px 100%;
      opacity: 0.58;
    }

    .contact-card > *,
    .access-card > * {
      position: relative;
      z-index: 1;
    }

    .card-character {
      position: absolute;
      z-index: 1;
      height: auto;
      object-fit: contain;
      pointer-events: none;
      opacity: 0.82;
      filter: drop-shadow(0 10px 16px rgba(75, 59, 98, 0.16));
      animation: section-character-sway 7.2s ease-in-out infinite;
      transform-origin: center bottom;
    }

    .card-character-contact {
      right: clamp(38px, 4.8vw, 64px);
      bottom: clamp(34px, 4vw, 52px);
      width: clamp(58px, 7vw, 88px);
      opacity: 1;
      filter: drop-shadow(0 12px 18px rgba(255, 255, 255, 0.22));
    }

    .card-character-access {
      right: clamp(36px, 4.8vw, 62px);
      bottom: clamp(34px, 4vw, 52px);
      width: clamp(54px, 6vw, 82px);
      opacity: 0.76;
      animation-delay: 0.8s;
    }

    .contact-card-title {
      margin: 0 0 24px;
      padding-left: clamp(44px, 5vw, 64px);
      font-family: inherit;
      font-weight: 900;
      line-height: 1.34;
      letter-spacing: 0;
    }

    .contact-card-title span {
      display: block;
      white-space: nowrap;
    }

    .contact-card .contact-card-title {
      max-width: 96%;
      color: var(--white);
      font-size: clamp(1.7rem, 3vw, 2.35rem);
    }

    .contact-card p {
      max-width: 90%;
      margin: 0 0 30px;
      color: rgba(255, 255, 255, 0.82);
      font-weight: 700;
    }

    .contact-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding-right: clamp(0px, 13vw, 128px);
    }

    .access-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      background:
        url("../img/decor-kado-rose-soft.png") right -38px bottom -46px / clamp(260px, 24vw, 350px) auto no-repeat,
        var(--white);
      border: 1px solid var(--line);
      padding: clamp(64px, 6vw, 86px);
      box-shadow: var(--shadow);
    }

    .access-card::after {
      --frame-line: rgba(169, 111, 102, 0.3);
      --frame-corner: url("../img/decor-frame-corner-waku-s-tl.png");
      --frame-corner-size: 96px auto;
      opacity: 0.48;
    }

    .access-card .contact-card-title {
      margin-bottom: 30px;
      color: var(--violet-deep);
      font-size: clamp(1.5rem, 2vw, 1.75rem);
      line-height: 1.45;
    }

    .access-card p {
      max-width: calc(100% - 96px);
      margin: 0 0 20px;
      color: var(--text);
      font-weight: 700;
      line-height: 1.9;
    }

    .map-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 12px 18px 0 0;
      color: var(--violet-deep);
      font-weight: 900;
      text-decoration: none;
      border-bottom: 2px solid rgba(102, 80, 127, 0.24);
    }

    @media (prefers-reduced-motion: reduce) {
      .voice-marquee-track {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
      }

      .voice-marquee,
      .feature-sticker,
      .card-character {
        animation: none;
      }
    }


    @media (max-width: 1200px) {
      #updates .update-grid {
        grid-template-columns: minmax(0, 760px);
        justify-content: center;
      }
    }

    @media (max-width: 980px) {
      :root {
        --page-gutter: clamp(28px, 8vw, 56px);
        --section-y: clamp(88px, 13vw, 124px);
      }

      .nav {
        position: fixed;
        top: 72px;
        left: 16px;
        right: 16px;
        display: none;
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px;
        border-radius: var(--radius);
        background: var(--white);
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
      }

      .nav.is-open {
        display: grid;
      }

      .nav a {
        padding: 10px 8px;
      }

      .menu-button {
        display: inline-flex;
      }

      .hero {
        min-height: 82svh;
        padding-top: 108px;
        padding-bottom: 74px;
        align-items: start;
        background:
          linear-gradient(180deg, rgba(251, 247, 255, 0.97) 0%, rgba(251, 247, 255, 0.9) 46%, rgba(238, 231, 247, 0.58) 100%),
          url("../img/hero-hananomichi.webp") 52% center / cover no-repeat;
      }

      .hero-inner,
      .about-layout,
      .event-wrap,
      .instagram-panel,
      .contact-layout,
      .update-grid {
        grid-template-columns: 1fr;
      }

      .hero-side {
        order: -1;
        display: grid;
        align-content: start;
        gap: 0;
      }

      .hero-copy {
        align-self: auto;
        order: 1;
        display: block;
        max-width: 720px;
        margin-inline: auto;
        padding-top: 0;
      }

      .eyebrow {
        position: static;
        width: fit-content;
        max-width: 100%;
        margin: 0 0 14px;
        padding: 7px 12px;
      }

      .hero-place {
        position: static;
        max-width: 34rem;
        margin: 0 0 18px;
        line-height: 1.75;
      }

      .hero-bottom {
        display: grid;
        gap: 18px;
        margin-top: clamp(26px, 5vw, 42px);
        padding-top: 0;
      }

      .hero-side .quick-card {
        display: none;
      }

      .hero-illustration {
        width: min(100%, 660px);
        min-height: 292px;
        margin: 10px auto -4px;
      }

      .walkers-stage {
        max-width: 620px;
      }

      .foreground-violets {
        bottom: 16px;
        height: 150px;
      }

      .foreground-violet-left {
        --size: 148px;
      }

      .foreground-violet-right {
        --size: 206px;
      }

      .feature-grid,
      .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .section-head {
        display: grid;
      }

      .section-head.has-character {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 0;
        padding-right: 0;
        align-items: end;
      }

      .section-head.has-character > div {
        grid-column: 1;
      }

      .section-head.has-character .section-copy {
        grid-column: 1 / -1;
        max-width: none;
      }

      #features .section-head > div {
        min-width: 0;
      }

      #features .section-head.has-character {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: clamp(24px, 4vw, 42px);
      }

      #features .section-head .section-copy {
        grid-column: 1 / -1;
        max-width: none;
      }

      #features .section-character {
        grid-column: 2;
        grid-row: 1;
      }

      #features .section-title {
        max-width: 12em;
      }

      .section-character {
        position: static;
        grid-column: 2;
        grid-row: 1;
        width: 78px;
        max-height: 104px;
        justify-self: end;
        align-self: end;
      }

      #updates .container::before {
        top: -68px;
        right: -78px;
        width: min(34vw, 286px);
        opacity: 0.86;
      }

      #updates .container::after {
        left: -92px;
        bottom: -98px;
        width: min(40vw, 342px);
        opacity: 0.86;
      }

      #updates .section-head,
      #updates .section-head.has-character {
        padding-left: clamp(72px, 12vw, 150px);
        padding-right: clamp(148px, 23vw, 250px);
        margin-bottom: 56px;
      }

      #updates .section-head > div::before {
        width: clamp(130px, 21vw, 190px);
      }

      #updates .section-head > div {
        padding-top: clamp(58px, 7vw, 68px);
      }

      #updates .section-title {
        padding-bottom: 38px;
      }

      #updates .section-copy {
        max-width: 32em;
      }

      .lead-title::after {
        width: min(86%, 640px);
        margin-inline: auto;
        background-size: contain;
      }

      #updates .update-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }

      #updates .panel {
        min-height: auto;
      }

      #updates .panel-header {
        padding: 42px clamp(46px, 7vw, 70px) 40px;
      }

      #updates .panel-body {
        padding: 30px clamp(46px, 7vw, 70px) 48px;
      }

      #updates .monthly-care-card {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: clamp(44px, 7vw, 64px);
      }

      #updates .monthly-care-copy,
      #updates .monthly-care-details {
        grid-column: auto;
        grid-row: auto;
      }

      #updates .monthly-care-copy h2 {
        max-width: 18em;
      }

      #updates .monthly-care-title-break {
        display: none;
      }

      #updates .monthly-care-illustration {
        width: min(34vw, 210px);
        margin: 4px 0 14px 24px;
      }

      #updates .monthly-care-details {
        padding-top: 28px;
        padding-left: 0;
        border-top: 1px dashed rgba(169, 111, 102, 0.28);
        border-left: 0;
      }

      .parent-voices .section-head {
        grid-template-columns: minmax(220px, 0.7fr) minmax(270px, 1fr) minmax(140px, 180px);
        gap: clamp(18px, 3vw, 34px);
        min-height: 0;
        padding-right: 0;
        align-items: center;
      }

      .parent-voices .section-head > div {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
      }

      .parent-voices .section-title {
        white-space: nowrap;
      }

      .parent-voices .section-copy {
        grid-column: 2;
        grid-row: 1;
        max-width: 32em;
      }

      .voices-illustration {
        position: static;
        grid-column: 3;
        grid-row: 1;
        width: min(22vw, 180px);
        max-height: 170px;
        opacity: 0.78;
        justify-self: end;
        transform: none;
      }
    }

    @media (max-width: 680px) {
      :root {
        --page-gutter: clamp(28px, 9vw, 44px);
        --section-y: clamp(78px, 18vw, 104px);
      }

      .brand-name {
        white-space: normal;
      }

      .hero {
        min-height: auto;
        padding-top: 84px;
        padding-bottom: 56px;
        text-align: center;
        background-position: center, 55% center;
      }

      .hero-inner {
        gap: 16px;
      }

      .hero-side {
        margin-bottom: 0;
      }

      .hero-copy {
        display: grid;
        grid-template-rows: none;
        row-gap: 0;
        justify-items: center;
        padding-top: 0;
        text-align: center;
      }

      .eyebrow {
        position: static;
        justify-self: center;
        align-self: start;
        width: auto;
        max-width: min(100%, 18.5rem);
        margin-bottom: 8px;
        padding: 5px 10px;
        gap: 7px;
        border-color: rgba(102, 80, 127, 0.16);
        background: rgba(255, 255, 255, 0.58);
        font-size: 0.72rem;
        line-height: 1.55;
        white-space: nowrap;
        text-align: left;
      }

      .eyebrow .icon {
        width: 16px;
        height: 16px;
      }

      .hero h1 {
        grid-row: auto;
        width: min(100%, 8.6em);
        margin: 0 auto;
        font-size: clamp(2.02rem, 11vw, 3rem);
        line-height: 1.18;
        text-align: center;
      }

      .hero h1 span:nth-child(1) {
        transform: translateX(-0.22em);
      }

      .hero h1 span:nth-child(2) {
        transform: translateX(0.18em);
      }

      .hero h1 span:nth-child(3) {
        transform: translateX(-0.04em);
      }

      .hero h1 span:nth-child(4) {
        transform: translateX(0.2em);
      }

      .hero h1 span:nth-child(5) {
        transform: translateX(-0.16em);
      }

      .hero-place {
        position: static;
        max-width: 20rem;
        margin: 0 auto 10px;
        font-size: 0.82rem;
        line-height: 1.68;
        text-align: center;
      }

      .hero-place::before {
        display: block;
        width: 52px;
        margin: 0 auto 8px;
      }

      .hero-bottom {
        grid-row: auto;
      }

      .hero-lead {
        max-width: 28rem;
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.72;
        text-align: left;
      }

      .hero-bottom {
        width: min(100%, 360px);
        margin-top: 18px;
        gap: 18px;
        justify-items: center;
      }

      .hero-actions {
        width: min(100%, 360px);
        margin-top: 0;
        padding-top: 0;
        gap: 8px;
        justify-content: center;
      }

      .hero-note {
        justify-content: center;
        margin-top: 0;
        gap: 7px;
        font-size: 0.78rem;
      }

      .hero-note span {
        padding: 4px 8px;
      }

      .hero-illustration {
        width: min(100%, 390px);
        min-height: 190px;
        margin: -4px auto 0;
      }

      .section-character {
        width: 62px;
        max-height: 84px;
      }

      #updates .container::before {
        top: -42px;
        right: -146px;
        width: 210px;
        opacity: 0.58;
      }

      #updates .container::after {
        left: -126px;
        bottom: -86px;
        width: 272px;
        opacity: 0.72;
      }

      #updates .section-head,
      #updates .section-head.has-character {
        padding-inline: 0;
        padding-right: 0;
        margin-bottom: 34px;
      }

      #updates .section-head > div::after {
        display: none;
      }

      #updates .section-head > div {
        padding-top: 52px;
      }

      #updates .section-head > div::before {
        display: block;
        width: min(34vw, 120px);
      }

      #updates .section-title {
        padding-bottom: 30px;
        font-size: clamp(1.85rem, 8vw, 2.45rem);
        line-height: 1.28;
      }

      #updates .section-title::after {
        width: min(46vw, 170px);
        height: 18px;
      }

      #updates .section-copy {
        max-width: 21em;
        font-size: 0.88rem;
        line-height: 1.9;
      }

      #updates .update-grid {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      #updates .panel {
        --updates-corner-size: 46px;
        --updates-corner-offset: 12px;
        --updates-inner-gap: 54px;
        border-radius: 16px;
        clip-path: none;
      }

      #updates .panel::after {
        inset: 12px;
      }

      #updates .panel-header {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: center;
        justify-items: center;
        padding: 34px 30px 34px;
      }

      #updates .panel-header::after {
        bottom: 8px;
        width: 72%;
      }

      #updates .panel-title {
        grid-column: 1;
        font-size: clamp(1.08rem, 5.2vw, 1.32rem);
        white-space: nowrap;
      }

      #updates .panel-title .icon {
        width: 22px;
        height: 22px;
      }

      #updates .updated {
        position: static;
        grid-column: 1;
        justify-self: center;
        min-height: 30px;
        margin-top: 2px;
        padding: 4px 10px;
        font-size: 0.72rem;
      }

      #updates .panel-body {
        padding: 24px 30px 38px;
      }

      #updates .status-row,
      #updates .vacancy-status .status-row:first-child {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 18px 0;
      }

      #updates .status-label {
        width: fit-content;
        min-width: 88px;
        padding: 6px 15px;
        font-size: 0.82rem;
      }

      #updates .status-text,
      #updates .news-title {
        font-size: 0.94rem;
        line-height: 1.85;
      }

      #updates .status-note {
        margin-top: 12px;
        padding: 18px 0 0;
        text-align: left;
        font-size: 0.86rem;
      }

      #updates .news-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 18px 0;
      }

      #updates .news-item:first-child {
        padding: 2px 0 18px;
      }

      #updates .monthly-care-card {
        margin-top: 30px;
        padding: 34px 30px 38px;
        border-radius: 16px;
        background:
          url("../img/decor-kado-rose-soft.png") right -54px bottom -48px / 210px auto no-repeat,
          linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 249, 252, 0.94));
      }

      #updates .monthly-care-card::before {
        inset: 12px;
        background:
          url("../img/decor-frame-corner-waku-s-tl.png") left top / 58px auto no-repeat,
          linear-gradient(rgba(169, 111, 102, 0.18), rgba(169, 111, 102, 0.18)) left 58px top / calc(100% - 58px) 1px no-repeat,
          linear-gradient(rgba(169, 111, 102, 0.14), rgba(169, 111, 102, 0.14)) right top / 1px calc(100% - 58px) no-repeat,
          linear-gradient(rgba(169, 111, 102, 0.14), rgba(169, 111, 102, 0.14)) left 58px bottom / calc(100% - 116px) 1px no-repeat,
          linear-gradient(rgba(169, 111, 102, 0.14), rgba(169, 111, 102, 0.14)) left top 58px / 1px calc(100% - 116px) no-repeat;
      }

      #updates .monthly-care-kicker {
        font-size: 0.76rem;
      }

      #updates .monthly-care-copy h2 {
        font-size: clamp(1.38rem, 6.4vw, 1.86rem);
        line-height: 1.42;
      }

      #updates .monthly-care-illustration {
        width: min(36vw, 124px);
        margin: 4px 0 8px 12px;
      }

      #updates .monthly-care-copy p,
      #updates .monthly-care-notes dd,
      #updates .monthly-care-concerns li {
        font-size: 0.9rem;
        line-height: 1.86;
      }

      #updates .monthly-care-actions {
        gap: 10px;
      }

      #updates .monthly-care-details {
        gap: 18px;
        padding-top: 24px;
      }

      .foreground-violets {
        bottom: 6px;
        height: 104px;
      }

      .foreground-violet-left {
        left: -5%;
        --size: 112px;
      }

      .foreground-violet-right {
        right: -10%;
        --size: 166px;
      }

      .float-one {
        --float-size: 34px;
        left: 2%;
        top: 30%;
      }

      .float-two {
        --float-size: 38px;
        right: 5%;
        top: 13%;
      }

      .float-three,
      .float-four {
        --float-size: 28px;
      }

      .bubble-one {
        width: 82px;
        height: 82px;
      }

      .bubble-two,
      .bubble-three {
        width: 48px;
        height: 48px;
      }

      .button {
        width: 100%;
      }

      .section {
        padding: var(--section-y) 0;
      }

      .section-head::before {
        left: -12px;
        top: -14px;
        width: 104px;
        opacity: 0.14;
      }

      .parent-voices .section-head {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px 16px;
        align-items: end;
      }

      .parent-voices .section-copy {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: none;
      }

      .voices-illustration {
        grid-column: 2;
        width: 118px;
        max-height: 118px;
      }

      .quick-card::after,
      .feature::after,
      .info-box::after {
        inset: 8px;
        opacity: 0.64;
      }

      .contact-card::after,
      .access-card::after {
        inset: 20px;
        --frame-corner-size: 64px auto;
        opacity: 0.72;
      }

      .contact-card,
      .access-card {
        padding: 46px 24px 96px;
      }

      .contact-card-title {
        margin-bottom: 20px;
        padding-left: 28px;
      }

      .contact-card .contact-card-title {
        max-width: none;
        font-size: clamp(1.42rem, 6.8vw, 1.62rem);
        line-height: 1.38;
      }

      .access-card .contact-card-title {
        font-size: clamp(1.24rem, 5.4vw, 1.48rem);
      }

      .contact-card p {
        max-width: none;
        font-size: 0.94rem;
        line-height: 1.9;
      }

      .contact-actions {
        padding-right: 0;
      }

      .card-character-contact {
        right: 24px;
        bottom: 22px;
        width: 54px;
        opacity: 1;
      }

      .card-character-access {
        right: 24px;
        bottom: 22px;
        width: 58px;
        opacity: 0.72;
      }

      .access-card p {
        max-width: none;
      }

      .map-link {
        margin-right: 0;
      }

      .news-item,
      .status-row {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .panel-header {
        align-items: flex-start;
      }

      .vacancy-status .status-row:first-child {
        grid-template-columns: 1fr;
        padding: 14px;
      }

      .vacancy-status .status-row:first-child .status-label {
        width: fit-content;
      }

      .news-item:first-child {
        margin-inline: 0;
      }

      .highlight-list,
      .feature-grid,
      .info-grid,
      .event-gallery {
        grid-template-columns: 1fr;
      }

      .instagram-panel {
        gap: 22px;
      }

      .insta-grid {
        display: flex;
        gap: 8px;
        margin-inline: -8px;
        padding: 2px 8px 10px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
      }

      .insta-tile {
        flex: 0 0 min(42vw, 148px);
        scroll-snap-align: center;
        border-radius: 8px;
      }

      .feature {
        padding: 12px 12px 72px;
      }

      .feature-media {
        aspect-ratio: 16 / 10;
        margin: 28px 6px 0;
      }

      .feature-sticker {
        bottom: -5px;
        width: 50px;
        max-height: 64px;
      }

      .event-wrap {
        gap: 16px;
      }

      .event-list {
        display: flex;
        gap: 8px;
        margin-inline: -8px;
        padding: 2px 8px 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
      }

      .event-list li {
        flex: 0 0 auto;
        scroll-snap-align: center;
      }

      .event-item,
      .event-item:hover {
        width: auto;
        min-width: 62px;
        min-height: 44px;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 13px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.76);
        box-shadow: none;
        color: var(--coral);
        font-size: 0.9rem;
        line-height: 1.25;
        text-align: center;
        transform: none;
      }

      .event-item.is-active {
        border-color: rgba(185, 111, 132, 0.36);
        background: linear-gradient(135deg, #b96f84, #cf929d);
        color: var(--white);
      }

      .event-item::after {
        display: none;
      }

      .event-item-title {
        display: none;
      }

      .event-item .month,
      .event-item.is-active .month {
        min-width: auto;
        padding: 0;
        background: transparent;
        color: inherit;
        font-size: 0.9rem;
      }

      .voice-marquee-track {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
        -webkit-mask-image: none;
        mask-image: none;
      }

      .voice-marquee {
        align-items: flex-start;
        gap: 22px;
        padding: 10px 16px 18px;
      }

      .voice-marquee-track.is-enhanced .voice-marquee {
        transform: none !important;
      }


      .parent-voice-card {
        flex-basis: min(88vw, 304px);
        scroll-snap-align: center;
        min-height: 352px;
        border-radius: 50% 50% 8px 8px / 128px 128px 8px 8px;
        background:
          url("../img/decor-kado-rose-soft.png") right -16px bottom -24px / 150px auto no-repeat,
          linear-gradient(180deg, rgba(255, 254, 251, 0.98), rgba(255, 250, 244, 0.92)),
          rgba(255, 255, 255, 0.86);
        padding: 164px 28px 30px;
      }

      .parent-voice-card::before {
        height: 142px;
        border-radius: 50% 50% 20px 20px / 128px 128px 20px 20px;
        background:
          url("../img/decor-voice-arch.png") center 6px / 100% auto no-repeat,
          linear-gradient(180deg, rgba(255, 248, 237, 0.98), rgba(255, 253, 248, 0.2));
      }

      .parent-voice-card::after {
        left: 14px;
        right: 14px;
        top: 150px;
        bottom: 14px;
        box-shadow:
          inset 0 0 0 4px rgba(255, 253, 248, 0.68),
          inset 0 0 0 5px var(--voice-frame-line-soft);
      }

      .voice-quote {
        margin-bottom: 22px;
        font-size: 0.9rem;
        line-height: 1.78;
      }

      .voice-profile {
        padding: 6px 11px;
        font-size: 0.72rem;
      }

      .event-photo {
        min-height: 0;
        aspect-ratio: 4 / 3;
        border-width: 5px;
      }

      .event-photo-caption {
        left: 12px;
        right: auto;
        bottom: 12px;
        max-width: calc(100% - 24px);
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border-radius: 14px;
        line-height: 1.35;
      }

      .event-photo-caption small {
        min-width: 38px;
        padding: 3px 7px;
        font-size: 0.74rem;
      }

      .event-photo-caption span {
        font-size: 0.96rem;
      }

      .photo-stack {
        min-width: 0;
        min-height: 0;
      }

      #about .container::after {
        right: -24px;
        bottom: -72px;
        width: min(58vw, 210px);
        opacity: 0.52;
      }

      .photo-slider {
        width: 100%;
      }

      .photo-slider::after {
        width: 68px;
        opacity: 0.84;
      }

      .slider-track {
        min-height: 0;
        aspect-ratio: 4 / 3;
      }

      .photo-deco {
        display: none;
      }

      .text-block {
        min-width: 0;
      }

      .lead-title {
        overflow-wrap: anywhere;
      }

      .lead-title::after {
        width: min(82vw, 360px);
        height: 18px;
        margin-top: 18px;
        background-size: contain;
      }


    }

.brand > span:last-child { min-width: 0; }
.brand-sub { display: block; color: var(--violet-deep); font-size: 0.78rem; font-weight: 700; line-height: 1.35; }
.nav .button .icon { width: 18px; height: 18px; }