:root{

    --page: #F8F6F1;

    --paper: #FFFFFF;

    --paper-warm: #F3F1ED;

    --ink: #262F1E;

    --ink-soft: #434C3A;

    --accent: #3A4A2E;

    --accent-deep: #2C3923;
    --accent-tint: rgba(58,74,46,0.06);
    --accent-line: rgba(58,74,46,0.28);

    --seal: #B2452F;
    --seal-line: rgba(178,69,47,0.35);

    --banner: #3A4A2E;
    --line: rgba(58,74,46,0.22);
    --nav-h: 78px;
    --topbar-h: 31px;

    --statement-top: clamp(72px, 11vw, 150px);
    --statement-bottom: clamp(56px, 8vh, 96px);
    --section-gap: clamp(72px, 10vw, 120px);

    --card: #EAE8E2;
    --card-deep: #E1DFD7;
    --card-line: var(--accent-line);

    --font-display: 'Figtree', sans-serif;

    --statement-size-home: clamp(1.35rem, 2.5vw, 1.95rem);
    --statement-size-page: clamp(1.25rem, 2.18vw, 1.66rem);

    --jade: var(--accent);
    --jade-deep: var(--accent-deep);
    --celadon: var(--card);
    --celadon-deep: var(--card-deep);
    --celadon-line: var(--card-line);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  body{
    background: var(--page);
    color: var(--ink);
    font-family: var(--font-display);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  .wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px; position:relative; z-index:1; }
  a{ color:inherit; }

  .brand-mark{
    display:inline-block; flex-shrink:0;
    height: 42px; width: auto;
    filter: none;
    opacity: 1;
  }

  .brand-mark--footer{
    filter: none;
    opacity: 1;
  }

  .accent{
    font-style: italic;
    font-weight: 500;
  }

  .cred-section{
    padding: 0;
  }

  .cred-section--home{
    padding: clamp(4px, 1vw, 14px) 0 clamp(16px, 2.5vw, 30px);
  }

  .cred-section--home + .wrap .notice{
    border-top: 0;
  }
  .cred-strip {
    --cred-ink: #232019;
    --cred-moss: #c1613f;

    --cred-logo-filter: brightness(0) saturate(100%);
    --cred-logo-opacity: 0.72;
    width: 100%;
    background: transparent;
    padding: 24px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  }

  .cred-track {
    display: flex;
    width: max-content;
    animation: credScroll 40s linear infinite;
  }

  .cred-strip:hover .cred-track {
    animation-play-state: paused;
  }

  @keyframes credScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .cred-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 40px;
    white-space: nowrap;
  }

  .cred-badge__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cred-badge__seal {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1.4px solid var(--cred-moss);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .cred-badge__seal::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--cred-moss);
    border-radius: 50%;
    opacity: 0.4;
  }

  .cred-badge__seal svg {
    width: 22px;
    height: 22px;
    color: var(--cred-moss);
    position: relative;
    z-index: 1;
  }

  .cred-badge__seal--logo {
    border: none;
    background: none;
  }

  .cred-badge__seal--logo::after {
    display: none;
  }

  .cred-badge__seal--logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .cred-badge__seal img {
    filter: var(--cred-logo-filter);
    opacity: var(--cred-logo-opacity);
  }

  .cred-badge__seal--cab img {
    filter: grayscale(1) contrast(1.05);
    opacity: 0.9;
  }

  .cred-badge__seal--cab,
  .cred-badge__seal--ppo,
  .cred-badge__seal--malpractice {
    width: 52px;
    height: 52px;
  }

  .cred-badge__seal--nccaom {
    width: 66px;
    height: 52px;
  }

  .cred-badge__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    color: var(--cred-ink);
  }

  .cred-badge__sub {
    font-family: var(--font-display);
    font-size: 12.5px;
    color: #5c584d;
  }

  .cred-badge__seal--photo{
    border: none;
    background: none;
  }
  .cred-badge__seal--photo::after{ display: none; }
  .cred-badge__seal--photo img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: auto;
    height: 36px;
  }

  .cred-badge__wordmark{
    height: 40px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--cred-ink);
    opacity: var(--cred-logo-opacity);
  }

  @media (prefers-reduced-motion: reduce) {
    .cred-track { animation: none; }
  }

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

  .section-head{
    text-align: left;
    margin-bottom: clamp(30px, 4vw, 44px);
  }
  .section-head h2{
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.78rem; color: var(--ink-soft);
  }
  .section-head p{
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    line-height: 1.36; color: var(--ink);
    max-width: 32ch; margin: 22px 0 0;
  }

  .conditions-section .section-head h2,
  .svc-session-section .section-head h2,
  .svc-reading-section .section-head h2{
    font-weight: 400;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    line-height: 1.36; letter-spacing: -0.005em;
    text-transform: none;
    color: var(--ink);
  }

  .cabinet{
    display:grid; grid-template-columns: 1fr 1fr;
    column-gap: 72px; row-gap: 64px;
    align-items: start;
  }

  .drawer{
    position:relative;
  }

  .drawer-top{
    display:flex; align-items:baseline; gap:16px; margin-bottom:16px;
  }
  .char{
    font-family:'Noto Sans SC', sans-serif; font-weight: 500; font-size: 3.1rem;
    color: var(--seal); line-height:1; flex-shrink:0;
  }
  .drawer-title h3{
    font-family:var(--font-display); font-weight:600; font-size:1.55rem; margin-bottom:8px;
  }
  .drawer-title .pinyin{
    font-size:0.9rem; color: var(--ink-soft); letter-spacing:0.04em; text-transform:uppercase;
  }

  .drawer-desc{
    color: var(--ink-soft); font-size: 1.05rem; margin-top: 16px;
  }

  .drawer-media{
    position: relative;
    margin-top: 24px;
    overflow: hidden;
    border-radius: 0;
  }

  .drawer-media::after{
    content:"";
    position: absolute; inset: 0;
    background: linear-gradient(160deg,
                  rgba(36,80,60,0.12) 0%,
                  rgba(42,38,32,0.08) 100%);
    mix-blend-mode: multiply;
    border-radius: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.45s ease;
  }

  .drawer:hover .drawer-media::after{ opacity: 0.35; }

  .drawer-media picture{ display: contents; }
  .drawer-media img{
    display: block; width: 100%; height: 180px;
    object-fit: cover; border-radius: 0;

    filter: saturate(0.84) contrast(1.05) brightness(1.02);

    object-position: center center;
  }

  .drawer-media::before{
    content:"";
    position: absolute; inset: 0;
    border: 1px solid rgba(42,38,32,0.10);
    border-radius: 0;
    pointer-events: none;
    z-index: 1;
  }

  .drawer-meta{
    display:flex; gap: 8px; margin-top: 16px; flex-wrap:wrap;
  }
  .tag{
    font-size: 0.82rem; letter-spacing:0.03em; color: var(--jade-deep);
    border: 1px solid var(--accent-line); border-radius: 0;
    padding: 8px 16px; background: var(--accent-tint);

    transition: translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                background 0.4s ease,
                border-color 0.4s ease;
  }

  .drawer:hover .tag{
    translate: 0 -3px;

    background: rgba(36,80,60,0.12);
    border-color: var(--accent);
  }
  .drawer:hover .tag:nth-child(2){ transition-delay: 0.08s; }
  .drawer:hover .tag:nth-child(3){ transition-delay: 0.16s; }

  @media (max-width: 720px){
    .cabinet{ grid-template-columns: 1fr; row-gap: 56px; }
  }

  @media (prefers-reduced-motion: reduce){
    .drawer-media::after{ transition: none; }

    .tag{ transition: background 0.4s ease, border-color 0.4s ease; }
    .drawer:hover .tag{ translate: none; }
    .drawer:hover .tag:nth-child(2),
    .drawer:hover .tag:nth-child(3){ transition-delay: 0s; }
  }

  .conditions-section{ padding: 0 0 var(--section-gap); }
  .conditions-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .condition-card{
    background: var(--celadon);
    border: 1px solid var(--celadon-line);
    border-radius: 0;
    padding: 32px 20px;
    text-align:center;
    transition: background 0.3s ease, transform 0.3s ease;
  }
  .condition-card:hover{
    background: var(--celadon-deep);
    transform: translateY(-2px);
  }
  .condition-card .char{
    font-family:'Noto Sans SC', sans-serif; font-weight: 500; font-size: 1.9rem;
    color: var(--seal); line-height:1; margin-bottom: 14px;
  }
  .condition-card h3{
    font-family:var(--font-display); font-weight:600; font-size: 1.05rem;
    margin-bottom: 12px;
  }
  .condition-card p{
    color: var(--ink-soft); font-size: 0.9rem;
  }

  @media (max-width: 900px){
    .conditions-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 500px){
    .conditions-grid{ grid-template-columns: 1fr; }
  }

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

  .faq-list{
    max-width: 740px; margin: 0;
    border-top: 1px solid var(--line);
  }
  .faq-item{ border-bottom: 1px solid var(--line); }

  .faq-item:last-child{ border-bottom: none; }

  .faq-q{
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 24px;
    padding: 22px 4px;
    cursor: pointer;
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.06rem; line-height: 1.4;
    transition: color .2s ease;
  }

  .faq-q{ list-style: none; }
  .faq-q::-webkit-details-marker{ display: none; }

  .faq-q:hover{ color: var(--jade); }
  .faq-item[open] > .faq-q{ color: var(--jade); }
  .faq-q:focus-visible{ outline: 2px solid var(--seal); outline-offset: -2px; border-radius: 0; }

  .faq-sign{
    position: relative; flex-shrink: 0;
    width: 14px; height: 14px; margin-top: 6px;
  }
  .faq-sign::before,
  .faq-sign::after{
    content: ""; position: absolute; left: 0; top: 6px;
    width: 14px; height: 1.5px; border-radius: 0;

    background: var(--accent);
    transition: transform .3s ease, opacity .3s ease;
  }
  .faq-sign::after{ transform: rotate(90deg); }
  .faq-item[open] .faq-sign::after{ transform: rotate(0); opacity: 0; }

  .faq-a{
    padding: 0 42px 26px 4px;
    color: var(--ink-soft); font-size: 0.95rem; line-height: 1.72;
    animation: faq-in .28s ease;
  }
  .faq-a p + p,
  .faq-a p + ul{ margin-top: 14px; }
  .faq-a ul{ padding-left: 22px; }
  .faq-a li + li{ margin-top: 8px; }
  .faq-a a{ color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }
  @keyframes faq-in{
    from{ opacity: 0; transform: translateY(-4px); }
    to  { opacity: 1; transform: none; }
  }

  @media (max-width: 560px){
    .faq-q{ font-size: 1rem; gap: 16px; padding: 20px 2px; }
    .faq-a{ padding-right: 8px; }
  }

  .svc-note{ padding: 0 0 var(--section-gap); max-width: 680px; }
  .svc-note p{ color: var(--ink-soft); font-size: 1.02rem; line-height: 1.72; }
  .svc-note p + p{ margin-top: 16px; }

  .news-section{ padding: clamp(48px, 7.5vw, 104px) 0 var(--section-gap); }

  .news-heading{
    font-family: var(--font-display); font-weight: 450;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
    margin-bottom: clamp(32px, 5vw, 52px);
  }

  .news-grid{
    list-style: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(20px, 2.5vw, 32px); row-gap: clamp(44px, 5vw, 64px);
  }

  .news-link{ display: flex; flex-direction: column; height: 100%; text-decoration: none; }
  .news-link:focus-visible{ outline: 2px solid var(--seal); outline-offset: 6px; }

  .news-media{
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 8px;
    background: var(--card) url("../img/lotus-logo.png") center / 56px auto no-repeat;
  }
  .news-media img{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: scale 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .news-link:hover .news-media img{ scale: 1.04; }

  .news-tags{
    position: absolute; top: 12px; left: 12px; z-index: 1;
    display: flex; flex-wrap: wrap; gap: 6px;
  }
  .news-tag{
    font-family: var(--font-display); font-weight: 500; font-size: 0.8rem;
    color: var(--ink); background: var(--page);
    padding: 5px 12px; border-radius: 999px;
  }

  .news-title{
    margin-top: 18px;
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.15rem, 1.6vw, 1.3rem);
    line-height: 1.3; color: var(--ink);
    text-decoration-line: underline; text-decoration-thickness: 1px;
    text-decoration-color: transparent; text-underline-offset: 5px;
    transition: text-decoration-color 0.3s ease;
  }
  .news-link:hover .news-title{ text-decoration-color: var(--accent-line); }

  .news-date{ display: block; margin-top: 8px; font-size: 0.9rem; color: var(--ink-soft); }

  .news-card--soon .news-link{ cursor: default; }
  .news-card--soon .news-link:hover .news-title{ text-decoration-color: transparent; }

  .news-excerpt{
    margin-top: 10px;
    font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft);
  }

  .news-more{
    display: inline-block; margin-top: 14px;
    font-family: var(--font-display); font-weight: 500; font-size: 0.95rem;
    color: var(--jade);
    text-decoration: underline; text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-line); text-underline-offset: 5px;
  }
  .news-link:hover .news-more{ text-decoration-color: var(--accent); }

  @media (prefers-reduced-motion: reduce){
    .news-link:hover .news-media img{ scale: none; }
  }
  @media (max-width: 900px){
    .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 600px){
    .news-grid{ grid-template-columns: 1fr; }
  }

  .post{ padding: clamp(36px, 4.5vw, 60px) 0 var(--section-gap); max-width: 680px; }

  .post-crumbs{ margin-bottom: 20px; font-size: 0.95rem; color: var(--ink-soft); }
  .post-crumbs ol{ list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; }
  .post-crumbs li + li::before{ content: "\203A"; margin: 0 10px; color: var(--ink-soft); }
  .post-crumbs a{ color: var(--jade); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px; }
  .post-crumbs a:hover{ text-decoration-color: var(--accent); }

  .post-date{
    font-size: 0.85rem; letter-spacing: 0.03em; color: var(--ink-soft);
    margin-bottom: 16px;
  }

  .post-title{
    font-family: var(--font-display); font-weight: 420;
    font-size: var(--statement-size-page);
    line-height: 1.32; letter-spacing: -0.005em; color: var(--ink);
  }

  .post-body{
    margin-top: clamp(20px, 2.5vw, 26px);
    color: var(--ink); font-size: 1.02rem; line-height: 1.7;
  }
  .post-body p + p{ margin-top: 20px; }
  .post-body h2{
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.55rem; line-height: 1.3; color: var(--ink);
    margin: clamp(56px, 6vw, 76px) 0 18px;
  }
  .post-body ul,
  .post-body ol{ padding-left: 22px; margin-top: 13px; }
  .post-body h3{
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.32rem; line-height: 1.35; color: var(--ink);
    margin: clamp(40px, 4.5vw, 52px) 0 0;
  }
  .post-body li + li{ margin-top: 6px; }
  .post-body a{ color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }

  .post-lede{
    color: var(--ink);
    font-size: clamp(1.14rem, 1.9vw, 1.3rem);
    font-weight: 500;
    line-height: 1.42;
    margin-bottom: 24px;
  }

  .post-body strong{ color: var(--ink); font-weight: 600; }

  .post-layout{
    max-width: none; padding-left: 24px;
    padding-right: max(24px, calc((100% - 1080px) / 2 + 24px));
    display: grid; grid-template-columns: 150px minmax(0, 1fr);
    gap: clamp(24px, 3.5vw, 48px); align-items: start;
  }
  .post-layout .post{ max-width: none; }

  .post-aside{
    position: sticky; top: calc(var(--nav-h) + var(--topbar-h) + 40px);
    margin-top: clamp(36px, 4.5vw, 60px);
    background: var(--card); border-radius: 12px;
    padding: 14px 11px;
  }
  .post-aside-title{
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.88rem; line-height: 1.3; color: var(--ink);
    margin-bottom: 12px;
  }
  .post-aside-list{ list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .post-aside-link,
  .post-aside-item{ display: block; text-decoration: none; }

  .post-aside-media{
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    border-radius: 6px; margin-bottom: 7px;
    background: var(--page) url("../img/lotus-logo.png") center / 36px auto no-repeat;
  }
  .post-aside-media img{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .post-aside-tag{
    position: absolute; top: 8px; left: 8px; z-index: 1;
    font-family: var(--font-display); font-weight: 500; font-size: 0.66rem;
    color: var(--ink); background: var(--page);
    padding: 3px 8px; border-radius: 999px;
  }
  .post-aside-name{
    display: block;
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 500; line-height: 1.3; color: var(--ink);
  }
  .post-aside-link:hover .post-aside-name{
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  }

  @media (max-width: 900px){
    .post-layout{
      grid-template-columns: 1fr; gap: 0;
      max-width: 1080px; margin: 0 auto; padding: 0 24px;
    }
    .post{ order: 1; padding-bottom: clamp(36px, 6vw, 52px); }
    .post-aside{ order: 2; position: static; margin-top: 0; margin-bottom: var(--section-gap); }
    .post-aside-list{ flex-direction: row; flex-wrap: wrap; gap: 20px; }
    .post-aside-list li{ flex: 1 1 200px; }
  }

  .post-figure{
    margin: clamp(32px, 4.5vw, 44px) 0;
  }
  .post-figure img{
    display: block; width: 100%; height: auto;
    background: var(--card);
    border: 1px solid var(--line);
  }
  .post-figure figcaption{
    margin-top: 12px;
    font-size: 0.87rem; line-height: 1.6; color: var(--ink-soft);
    padding-left: 14px;
    border-left: 1px solid var(--accent-line);
  }

  .post-figure--portrait{ max-width: 420px; }
  .post-figure--small{ max-width: 520px; margin-left: 0; margin-right: auto; }

  .post-figure--slot{ max-width: 720px; }
  .post-figure-slot{
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 9;
    background: var(--card);
    border: 1px dashed var(--accent-line); border-radius: 8px;
  }
  .post-figure-slot-label{
    font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-soft);
  }

  .post-pull{
    margin: clamp(34px, 4.5vw, 46px) 0;
    padding-left: clamp(20px, 3vw, 30px);
    border-left: 2px solid var(--accent);
  }
  .post-pull p{
    font-family: var(--font-display); font-weight: 420;
    font-size: clamp(1.16rem, 2vw, 1.34rem);
    line-height: 1.48; letter-spacing: -0.005em;
    color: var(--ink);
  }
  .post-pull p + p{ margin-top: 12px; }

  .post-callout{
    margin: clamp(26px, 3.2vw, 34px) 0;
    padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 28px);
    background: var(--accent-tint);
    border-left: 3px solid var(--accent);
  }
  .post-callout p{
    color: var(--ink); font-size: 1rem; line-height: 1.55;
  }
  .post-callout p + p{ margin-top: 14px; }

  .post-callout--warn{
    background: rgba(178,69,47,0.06);
    border-left-color: var(--seal);
  }
  .post-callout--warn strong{ color: var(--seal); }

  .post-body .post-list{ margin: 18px 0 26px; }
  .post-list li + li{ margin-top: 16px; }

  .post-disclaimer{
    margin-top: 28px; font-size: 0.85rem; line-height: 1.6; color: var(--ink-soft);
  }

  .post-body .post-refs{
    list-style: none;
    margin-top: 22px; padding-left: 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .post-refs li{
    font-size: 0.88rem; line-height: 1.62;
    padding-left: 20px; text-indent: -20px;
  }
  .post-refs li + li{ margin-top: 12px; }

  .post-back{
    display: inline-block; margin-top: clamp(36px, 5vw, 52px);
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
    color: var(--jade); text-decoration: none;
    border-bottom: 1px solid var(--accent-line); padding-bottom: 5px;
    transition: border-color 0.2s ease;
  }
  .post-back:hover,
  .post-back:focus-visible{ border-color: var(--accent); }

  .topbar{
    min-height: var(--topbar-h);
    display: flex; align-items: center; justify-content: center;
    background: var(--banner); color: var(--paper-warm);
    text-align: center; font-size: 0.9rem; line-height: 1.3;
    padding: 6px 16px;
  }
  .topbar p{ max-width: 1080px; margin: 0 auto; }
  .topbar-zh{ font-family: 'Noto Sans SC', sans-serif; font-weight: 500; }
  .topbar-num{ font-family: var(--font-display); }
  .topbar a{
    color: inherit; font-weight: 600; white-space: nowrap;
    text-decoration: underline; text-underline-offset: 3px;
  }
  .topbar a:hover{ text-decoration-thickness: 2px; }
  .topbar a:focus-visible{ outline: 2px solid var(--paper-warm); outline-offset: 3px; }
  @media (max-width: 560px){
    .topbar{ font-size: 0.85rem; padding: 6px 12px; }
    .topbar-extra{ display: none; }
  }

  .site-header{ position: sticky; top: 0; z-index: 60; }

  html{ scroll-padding-top: calc(var(--nav-h) + var(--topbar-h)); }

  @supports (animation-timeline: scroll()){
    .site-header{
      animation: header-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 72px;
    }
    @keyframes header-settle{
      from{ box-shadow: 0 1px 0 rgba(58,74,46,0); }
      to{ box-shadow: 0 1px 0 var(--line); }
    }
  }

  .nav{
    position: sticky; top: 0; z-index: 70;

    background: var(--page);
    border-bottom: 1px solid var(--line);
  }

  .nav-inner{
    max-width: 1080px; margin: 0 auto; padding: 0 24px;
    height: var(--nav-h);
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 20px;
  }

  .nav-menu{ list-style: none; display: flex; align-items: center; gap: 4px; }
  .nav-item{ position: relative; }

  .nav-link{
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.95rem; color: var(--ink);
    text-decoration: none; background: none; border: 0;
    padding: 10px 14px; border-radius: 0; cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .nav-link:hover, .nav-link:focus-visible{ background: var(--accent-tint); color: var(--jade); }
  .nav-item.is-open > .nav-link{ background: var(--accent-tint); color: var(--jade); }

  .nav-chevron{ width: 10px; height: 10px; transition: transform .22s ease; }
  .nav-item.is-open > .nav-link .nav-chevron{ transform: rotate(180deg); }

  .submenu{
    list-style: none;
    position: absolute; top: calc(100% + 19px); left: 0;
    min-width: 246px;
    background: var(--paper);
    border: 1px solid var(--line); border-radius: 0;
    padding: 8px;
    box-shadow: 0 16px 36px rgba(27,22,17,0.14);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-item.is-open > .submenu{ opacity: 1; visibility: visible; transform: none; }

  .submenu::before{
    content: ""; position: absolute;
    left: 0; right: 0; top: -19px; height: 19px;
  }

  @media (min-width: 921px){
    .nav-item.has-menu:hover > .submenu,
    .nav-item.has-menu:focus-within > .submenu{
      opacity: 1; visibility: visible; transform: none;
    }
    .nav-item.has-menu:hover > .nav-link,
    .nav-item.has-menu:focus-within > .nav-link{
      background: var(--accent-tint); color: var(--jade);
    }
    .nav-item.has-menu:hover > .nav-link .nav-chevron,
    .nav-item.has-menu:focus-within > .nav-link .nav-chevron{ transform: rotate(180deg); }
  }

  .submenu a{
    display: block; padding: 9px 12px; border-radius: 0;
    text-decoration: none; font-size: 0.93rem; line-height: 1.35;
    transition: background .18s ease, color .18s ease;
  }
  .submenu a:hover, .submenu a:focus-visible{ background: var(--accent-tint); color: var(--jade); }
  .submenu-zh{
    display: block; font-family: 'Noto Sans SC', sans-serif;
    font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px;
  }

  .nav-brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
  .nav-brand-name{
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.16rem; letter-spacing: 0.005em; white-space: nowrap;

    color: var(--ink);
  }

  .nav-book{
    justify-self: end;
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.92rem; letter-spacing: 0.02em;
    background: var(--jade); color: var(--paper-warm);
    padding: 13px 28px; border-radius: 0;
    text-decoration: none; white-space: nowrap;
    transition: background .25s ease;
  }
  .nav-book:hover{ background: var(--jade-deep); }

  .nav-toggle{
    display: none;
    width: 42px; height: 42px;
    align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; border-radius: 0;
    color: var(--ink);
  }
  .nav-toggle:hover{ background: var(--accent-tint); }
  .nav-toggle-box{ display:block; width: 20px; height: 14px; position: relative; }
  .nav-toggle-box span{
    position: absolute; left: 0; width: 100%; height: 1.6px;
    background: currentColor; border-radius: 0;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .nav-toggle-box span:nth-child(1){ top: 0; }
  .nav-toggle-box span:nth-child(2){ top: 6.2px; }
  .nav-toggle-box span:nth-child(3){ top: 12.4px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1){ top: 6.2px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2){ opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3){ top: 6.2px; transform: rotate(-45deg); }

  @media (max-width: 920px){
    :root{ --nav-h: 66px; }
    .nav-inner{ grid-template-columns: auto 1fr auto; height: var(--nav-h); gap: 12px; }
    .nav-toggle{ display: inline-flex; }
    .nav-brand{ justify-self: center; }
    .nav-brand-name{ font-size: 1.02rem; }
    .brand-mark{ height: 34px; }
    .nav-book{ padding: 11px 20px; font-size: 0.86rem; }

    .nav-menu{
      display: none;
      position: absolute; top: 100%; left: 0; right: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--page);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 18px 30px rgba(27,22,17,0.10);
      padding: 10px 16px 22px;
      max-height: calc(100dvh - var(--nav-h) - var(--topbar-h)); overflow-y: auto;
    }
    .nav-menu.is-open{ display: flex; }
    .nav-link{ width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 1rem; }

    .submenu{
      position: static; min-width: 0;
      opacity: 1; visibility: visible; transform: none;
      background: none; border: 0; border-left: 1.5px solid var(--line);
      border-radius: 0; box-shadow: none;
      margin: 0 0 8px 14px; padding: 2px 0 2px 10px;
      display: none;
    }
    .nav-item.is-open > .submenu{ display: block; }
    .submenu::before{ display: none; }
  }

  .nav-brand-short{ display: none; }
  @media (max-width: 470px){
    .nav-brand-full{ display: none; }
    .nav-brand-short{ display: inline; }
  }

  .loc-section{
    display: grid; gap: 40px;
    padding: 0 0 var(--section-gap);
  }

  .loc-card{
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    background: var(--paper);
  }
  .loc-body{ padding: 36px 34px; }

  .loc-head{
    display: flex; align-items: flex-start; gap: 14px;
    padding-bottom: 22px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .brand-mark--loc{ height: 34px; margin-top: -3px; }
  .loc-name{
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.3rem; line-height: 1.25;
  }
  .loc-tagline{
    font-size: 0.88rem; line-height: 1.6;
    color: var(--ink-soft); margin-top: 8px;
  }

  .loc-detail{
    display: grid; grid-template-columns: 88px 1fr; gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(27,22,17,0.08);
  }
  .loc-detail:last-of-type{ border-bottom: none; }

  .loc-detail dt{
    font-family: var(--font-display);
    font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    font-weight: 500; color: var(--ink-soft); line-height: 1; padding-top: 5px;
  }
  .loc-detail dd{ font-size: 0.94rem; line-height: 1.6; }
  .loc-detail dd a{
    text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(27,22,17,0.25);
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
  }
  .loc-detail dd a:hover{ color: var(--jade); text-decoration-color: currentColor; }

  .loc-hours{ list-style: none; max-width: 250px; }
  .loc-hours li{
    display: flex; justify-content: space-between; gap: 18px;
    font-size: 0.92rem;
  }
  .loc-hours li + li{ margin-top: 5px; }
  .loc-hours li span:first-child{ color: var(--ink-soft); }

  .loc-map{
    position: relative;
    min-height: 380px;
    background: var(--celadon);
    border-left: 1px solid var(--line);
  }
  .loc-map iframe{
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%;
    border: 0;
  }

  @media (max-width: 900px){
    .loc-card{ grid-template-columns: 1fr; }
    .loc-map{
      border-left: none;
      border-top: 1px solid var(--line);
      min-height: 300px;
    }
  }
  @media (max-width: 560px){
    .loc-section{ gap: 32px; }
    .loc-body{ padding: 28px 22px; }
    .loc-detail{ grid-template-columns: 1fr; gap: 6px; }
    .loc-detail dt{ padding-top: 0; }
    .loc-hours{ max-width: 280px; }
  }

  .site-footer{
    background: var(--jade-deep); color: var(--paper-warm);
    padding: 66px 0 26px; margin-top: 88px;
    position: relative; z-index: 1;
  }
  .footer-inner{ max-width: 1080px; margin: 0 auto; padding: 0 24px; }
  .footer-grid{
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 44px; padding-bottom: 46px;
  }
  .footer-brand{ display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 16px; }
  .brand-mark--footer{ height: 40px; }
  .footer-brand-name{ font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
  .footer-tagline{ font-size: 0.88rem; line-height: 1.65; color: rgba(248,244,234,0.84); max-width: 30ch; }

  .footer-col h4{
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-weight: 600; margin-bottom: 16px; color: rgba(248,244,234,0.55);
  }
  .footer-col ul{ list-style: none; }
  .footer-col li{ margin-bottom: 10px; }
  .footer-col a{
    font-size: 0.9rem; text-decoration: none; color: rgba(248,244,234,0.88);
    transition: color .2s ease;
  }
  .footer-col a:hover{ color: var(--paper-warm); text-decoration: underline; text-underline-offset: 3px; }

  .footer-loc{ font-size: 0.88rem; line-height: 1.6; margin-bottom: 16px; color: rgba(248,244,234,0.95); }
  .footer-loc strong{ display: block; font-weight: 600; margin-bottom: 2px; }
  .footer-loc span{ color: rgba(248,244,234,0.78); }
  .footer-phone{
    display: inline-block; font-family: var(--font-display);
    font-size: 1.08rem; color: var(--paper-warm);
  }

  .footer-bottom{
    border-top: 1px solid rgba(248,244,234,0.16);
    padding-top: 24px;
    display: flex; flex-wrap: wrap; gap: 14px 28px;
    justify-content: space-between; align-items: baseline;
    font-size: 0.78rem; color: rgba(248,244,234,0.72);
  }
  .footer-bottom p{ max-width: 62ch; line-height: 1.6; }

  @media (max-width: 860px){
    .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px; }
  }
  @media (max-width: 520px){
    .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
    .site-footer{ padding-top: 52px; margin-top: 64px; }
  }

  :focus-visible{ outline: 2px solid var(--seal); outline-offset: 3px; border-radius: 0; }
  .skip-link{
    position: absolute; left: -9999px; top: 0;
    background: var(--jade-deep); color: var(--paper-warm);
    padding: 12px 18px; z-index: 200; border-radius: 0;
    font-size: 0.9rem; text-decoration: none;
  }
  .skip-link:focus{ left: 0; }

  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  @media (scripting: enabled){

    .cabinet-section .section-head,
    .conditions-section .section-head,
    .conditions-grid .condition-card,
    .cred-section--home,
    .notice,

    .footer-grid,
    .footer-bottom{
      opacity: 0;
    }

    .is-visible{
      animation: reveal-in 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    }

    @keyframes reveal-in{
      from{ opacity: 0; translate: 0 26px; }
      to  { opacity: 1; translate: 0 0; }
    }
  }

  @media (prefers-reduced-motion: reduce){
    .cabinet-section .section-head,
    .conditions-section .section-head,
    .conditions-grid .condition-card,
    .cred-section--home,
    .notice,
    .footer-grid,
    .footer-bottom{
      opacity: 1;
    }
  }

  .imgph{ margin: 0; }
  .imgph__box{
    display: grid; place-content: center; gap: 8px;
    text-align: center; padding: 20px;
    aspect-ratio: 3 / 2;
    border: 1px dashed var(--celadon-line);
    border-radius: 0;
    background:
      repeating-linear-gradient(45deg,
        var(--accent-tint) 0 10px, transparent 10px 20px),
      var(--celadon);
  }
  .imgph--band .imgph__box{ aspect-ratio: 16 / 6; }
  .imgph__name{
    font-family:var(--font-display); font-weight:600; font-size: 0.95rem;
    color: var(--jade-deep); word-break: break-word;
  }
  .imgph__size{ font-size: 0.82rem; color: var(--ink-soft); }
  .imgph__brief{
    margin-top: 12px; font-size: 0.86rem; line-height: 1.62;
    color: var(--ink-soft); max-width: 62ch;
  }
  .imgph__brief strong{ color: var(--ink); font-weight: 600; }
  @media (max-width: 560px){
    .imgph--band .imgph__box{ aspect-ratio: 4 / 3; }
  }

  .u-label{
    font-family: var(--font-display); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.09em;
    font-size: 0.78rem;
  }

  .u-vh{
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }

  .btn-outline{
    display: inline-block;
    font-family: var(--font-display); font-weight: 400;
    font-size: 0.98rem; letter-spacing: 0.01em;
    color: var(--accent); background: transparent;
    border: 1px solid var(--accent);
    padding: 17px 40px; min-width: 200px; text-align: center;
    text-decoration: none;
    transition: background .2s ease, color .2s ease;
  }
  .btn-outline:hover,
  .btn-outline:focus-visible{ background: var(--accent); color: var(--page); }

  .statement{
    padding: var(--statement-top) 0 var(--statement-bottom);
  }

  .statement--home{
    padding-bottom: clamp(64px, 9vw, 120px);
  }

  .page-services .wrap > .statement{
    padding-bottom: calc(clamp(64px, 9vw, 120px) + clamp(30px, 4.5vw, 46px) + 20px);
  }

  .page-faq .statement{
    padding-bottom: calc(var(--statement-bottom) + 40px);
  }

  .statement p,
  .statement h1{

    font-family: var(--font-display); font-weight: 420;
    font-size: var(--statement-size-page);
    line-height: 1.32; letter-spacing: -0.005em;
    color: var(--ink); max-width: 40ch;
  }

  .statement--home p{
    font-size: var(--statement-size-home);
    line-height: 1.32;
  }

  .statement-zh{
    font-family: 'Noto Sans SC', sans-serif; font-weight: 500;
    font-size: 0.92em; color: var(--ink);
    white-space: nowrap;
  }

  .statement-cta{
    margin-top: clamp(30px, 4.5vw, 46px);
  }

  @supports ((background-clip: text) or (-webkit-background-clip: text)){

    .statement--home p{
      --sheen: #0F1608;

      background-color: var(--ink);
      background-image: linear-gradient(100deg,
        rgba(15,22,8,0)    0%,
        rgba(15,22,8,0.55) 28%,
        rgba(15,22,8,1)    50%,
        rgba(15,22,8,0.55) 72%,
        rgba(15,22,8,0)    100%);
      background-repeat: no-repeat;
      background-size: 55% 100%;

      background-position: -140% 0;

      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;

      animation: statement-sheen 5s linear infinite;
    }

    .statement--home p .statement-zh{ color: transparent; }

    @keyframes statement-sheen{
      from{ background-position: -140% 0; }
      to  { background-position:  240% 0; }
    }
  }

  @media (prefers-reduced-motion: reduce){
    .statement--home p{
      background-image: none;
      animation: none;
      -webkit-background-clip: border-box;
              background-clip: border-box;
      background-color: transparent;
      color: var(--ink);
    }
    .statement--home p .statement-zh{ color: var(--ink); }
  }

  .statement-note,
  .statement p.statement-note,
  .notice__text{
    margin-top: clamp(18px, 2.4vw, 26px);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(0.96rem, 1.72vw, 1.34rem);
    line-height: 1.4;
    letter-spacing: -0.005em;
    max-width: 44ch;
    color: var(--ink);
    background: none;
    animation: none;
    -webkit-background-clip: border-box;
            background-clip: border-box;
  }

  .wrap > .statement-note{
    margin-top: 0;
    margin-bottom: clamp(40px, 5vw, 66px);
  }

  .tiles{
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-bottom: clamp(72px, 10vw, 130px);
  }
  .tile{ display: block; text-decoration: none; color: var(--ink); }
  .tile-media{
    position: relative; overflow: hidden;
    background: var(--card);
  }
  .tile-media img{
    display: block; width: 100%; height: auto;

    aspect-ratio: 4 / 5;
    object-fit: cover; object-position: center center;
    transition: scale .6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .tile:hover .tile-media img,
  .tile:focus-visible .tile-media img{ scale: 1.03; }
  .tile-label{
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.12rem; margin-top: 16px;
  }
  .tile-label::after{

    content: ""; display: block; height: 1px; width: 0;
    background: var(--accent); margin-top: 6px;
    transition: width .35s ease;
  }
  .tile:hover .tile-label::after,
  .tile:focus-visible .tile-label::after{ width: 44px; }

  .notice{
    padding: clamp(64px, 9vw, 120px) 0 clamp(80px, 11vw, 150px);
    border-top: 1px solid var(--line);
  }
  .notice__label{ color: var(--ink-soft); margin-bottom: 28px; }

  .notice__text{
    margin-top: 0;
    margin-bottom: 36px;
  }
  .notice__actions{ display: flex; flex-wrap: wrap; gap: 14px; }

  @media (max-width: 760px){
    .tiles{ grid-template-columns: 1fr; gap: 40px; }
    .tile-media img{ aspect-ratio: 3 / 2; }
    .notice__actions .btn-outline{ flex: 1 1 100%; }
  }

  .notice:has(+ .home-blog){ padding-bottom: clamp(56px, 8vw, 96px); }
  .home-blog{
    padding: clamp(40px, 6vw, 64px) 0 clamp(64px, 9vw, 110px);
    border-top: 1px solid var(--line);
  }
  .home-blog__heading{
    font-family: var(--font-display); font-weight: 500;
    font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.3; color: var(--ink);
    margin-bottom: 24px;
  }
  .home-blog__list{
    list-style: none; display: flex; flex-wrap: wrap;
    gap: 20px clamp(28px, 4.5vw, 56px);
  }
  .home-blog__item{
    display: flex; align-items: center; gap: 18px;
    max-width: 440px; color: var(--ink); text-decoration: none;
  }
  .home-blog__item:focus-visible{ outline: 2px solid var(--seal); outline-offset: 6px; }
  .home-blog__thumb{
    position: relative; flex: 0 0 112px; aspect-ratio: 1; overflow: hidden;
    border-radius: 6px; background: var(--card);
  }
  .home-blog__thumb img{
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  .home-blog__title{
    font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.35;
    text-decoration: underline; text-decoration-thickness: 1px;
    text-decoration-color: transparent; text-underline-offset: 4px;
    transition: text-decoration-color 0.3s ease;
  }
  .home-blog__item:hover .home-blog__title{ text-decoration-color: var(--accent-line); }
  .home-blog__more{
    display: inline-block; margin-top: 28px;
    font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
    color: var(--jade);
    text-decoration: underline; text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-line); text-underline-offset: 5px;
  }
  .home-blog__more:hover{ text-decoration-color: var(--accent); }
  .home-blog__more:focus-visible{ outline: 2px solid var(--seal); outline-offset: 6px; }

  @media (min-width: 921px){
    .nav-inner{ grid-template-columns: auto 1fr auto; gap: 40px; }
    .nav-brand{ order: -1; justify-self: start; }
    .nav-menu{ order: 0; justify-self: start; gap: 26px; }
    .nav-book{ order: 1; }
  }
  .nav{ border-bottom: 0; }
  .nav-link{
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.09em;
    padding: 10px 0; color: var(--ink);
  }

  .nav-link:hover,
  .nav-link:focus-visible,
  .nav-item.is-open > .nav-link{ background: none; color: var(--accent); }
  .nav-brand-name{ font-weight: 600; letter-spacing: 0.02em; }

  @media (min-width: 921px){
    .submenu{
      background: var(--page);
      border: 1px solid var(--accent-line);
      box-shadow: none;
      padding: 6px;
    }
  }
  .submenu a{ font-size: 0.88rem; }
  .submenu a:hover,
  .submenu a:focus-visible{ background: var(--accent-tint); color: var(--accent); }

  .nav-book{
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
    background: transparent; color: var(--accent);
    border: 1px solid var(--accent);
    padding: 13px 26px;
    transition: background .2s ease, color .2s ease;
  }
  .nav-book:hover,
  .nav-book:focus-visible{ background: var(--accent); color: var(--page); }

  .site-footer{ background: var(--accent); margin-top: 0; padding: 88px 0 40px; }
  .footer-grid{ grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
  .footer-col h4{
    font-family: var(--font-display); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem;
    opacity: 0.62;
  }
  .footer-col ul a{
    font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem;
  }
  .footer-brand-name{ letter-spacing: 0.04em; }

  .nav-utils{ display: flex; align-items: center; gap: 20px; justify-self: end; }
  @media (max-width: 560px){

    .nav-utils{ gap: 0; }
  }

  .page-services .cabinet{
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: clamp(48px, 6vw, 76px);
  }
  .page-services .drawer{
    display: block; text-decoration: none; color: var(--ink);
  }

  .page-services .drawer-media{ margin-top: 0; background: var(--card); }

  .page-services .drawer-media img{
    height: auto; aspect-ratio: 16 / 9;
    filter: none;
    transition: scale .6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .page-services .drawer:hover .drawer-media img,
  .page-services .drawer:focus-visible .drawer-media img{ scale: 1.03; }

  .page-services .drawer-media::before,
  .page-services .drawer-media::after{ display: none; }

  .page-services .drawer-media--illustration{ background: var(--page); }

  .page-services .drawer--wide{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }

  .page-services .drawer--wide .drawer-top{ margin-top: 0; }

  .page-services .drawer-top{ margin: 18px 0 0; gap: 12px; }

  .page-services .drawer .char{ font-size: 1.6rem; color: var(--accent); }
  .page-services .drawer-title h3{
    font-weight: 500; font-size: 1.12rem; margin-bottom: 4px;
  }

  .page-services .drawer-title::after{
    content: ""; display: block; height: 1px; width: 0;
    background: var(--accent); margin-top: 10px;
    transition: width .35s ease;
  }
  .page-services .drawer:hover .drawer-title::after,
  .page-services .drawer:focus-visible .drawer-title::after{ width: 44px; }

  .page-services .drawer-desc{
    font-size: 0.98rem; margin-top: 14px; max-width: 46ch;
  }

  .page-services .drawer-meta{ margin-top: 16px; }
  .page-services .tag{
    background: transparent;
    border-color: var(--accent-line);
    color: var(--ink-soft);
    font-family: var(--font-display); font-weight: 500;
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
    padding: 7px 13px;
  }

  .page-services .drawer:hover .tag{
    translate: none;
    background: transparent;
    border-color: var(--accent);
  }

  .page-services .conditions-grid{ gap: 0 clamp(20px, 3vw, 40px); }
  .page-services .condition-card{
    background: none;
    border: 0; border-top: 1px solid var(--line);
    padding: 22px 0 30px;
    text-align: left;
    transition: border-color .25s ease;
  }

  .page-services .condition-card:hover{
    background: none; transform: none;
    border-top-color: var(--accent);
  }
  .page-services .condition-card .char{
    font-size: 1.5rem; color: var(--accent); margin-bottom: 12px;
  }
  .page-services .condition-card h3{
    font-weight: 500; font-size: 1.02rem; margin-bottom: 6px;
  }
  .page-services .condition-card p{ font-size: 0.9rem; }

  @media (max-width: 760px){
    .page-services .cabinet{ grid-template-columns: 1fr; }
    .page-services .drawer-media img,
    .page-services .drawer-media--empty{ aspect-ratio: 3 / 2; }

    .page-services .drawer--wide{ grid-template-columns: 1fr; }
    .page-services .drawer--wide .drawer-top{ margin-top: 18px; }
  }

  .page-service .wrap > .statement{
    padding-bottom: var(--statement-bottom);
  }
  .page-service .svc-plate{
    padding: 0 0 var(--section-gap);
  }

  .page-service .svc-plate img{
    width: 100%; height: auto; display: block;
  }

  .page-service .svc-session-section{
    padding: 0 0 var(--section-gap);
  }
  .page-service .svc-session{
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0 clamp(20px, 3vw, 40px);
  }
  .page-service .svc-session-step{
    border-top: 1px solid var(--line);
    padding: 22px 0 30px;
    transition: border-color .25s ease;
  }

  .page-service .svc-session-step:hover{
    border-top-color: var(--accent);
  }
  .page-service .svc-session-step .char{
    display: block;
    font-family: 'Noto Sans SC', sans-serif; font-weight: 500;
    font-size: 1.5rem; color: var(--accent); margin-bottom: 12px;
  }
  .page-service .svc-session-step .char--num{
    font-family: var(--font-display); font-weight: 500;
    font-size: 1.35rem; font-variant-numeric: tabular-nums;
  }
  .page-service .svc-session-name{
    font-family: var(--font-display);
    font-weight: 500; font-size: 1.02rem;
    margin-bottom: 6px;
  }
  .page-service .svc-session-line{
    display: block; font-size: 0.9rem; color: var(--ink-soft);
    line-height: 1.6;
  }

  @media (max-width: 900px){
    .page-service .svc-session{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 700px){
    .page-service .svc-session{ grid-template-columns: 1fr; }
  }

  .page-service .svc-session-step--optional{ border-top-style: dashed; }
  .page-service .svc-step-top{
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px;
  }
  .page-service .svc-step-top .char{ margin-bottom: 0; }
  .page-service .svc-step-top .svc-session-tag{ line-height: 1; }
  .page-service .svc-session-tag{
    display: block;
    font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ink-soft);
  }
  .page-service .svc-reading-section{ padding: 0 0 var(--section-gap); }
  .page-service .svc-reading{ max-width: 760px; }
  .page-service .svc-reading-text p{
    max-width: 58ch; font-size: 1.1rem; line-height: 1.65; color: var(--ink);
  }
  .page-service .svc-reading-text a{ color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }
  .page-service .svc-reading-text .svc-reading-source{
    margin-top: 16px; font-size: 0.9rem; line-height: 1.5; color: var(--ink-soft);
  }
  .page-service .svc-reading-card{
    grid-template-columns: 1fr;
    margin-top: clamp(64px, 8vw, 96px);
    padding-top: clamp(28px, 4vw, 40px);
    border-top: 1px solid var(--line);
  }
  .page-service .svc-reading-card .news-link{
    display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(20px, 3vw, 32px); align-items: start;
  }
  .page-service .svc-reading-card .news-media{ grid-row: 1 / -1; aspect-ratio: 3 / 2; }
  .page-service .svc-reading-card .news-title{ margin-top: 0; }
  .page-service .svc-reading-card .news-excerpt{ max-width: 44ch; }
  @media (max-width: 560px){
    .page-service .svc-reading-card .news-link{ grid-template-columns: 1fr; }
    .page-service .svc-reading-card .news-media{ grid-row: auto; }
    .page-service .svc-reading-card .news-title{ margin-top: 18px; }
  }

  .page-service .svc-techniques{
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(32px, 5vw, 72px);
  }
  .page-service .svc-technique{
    display: flex; align-items: flex-start; gap: clamp(18px, 2.5vw, 28px);
    padding: 26px 0; border-bottom: 1px solid var(--line);
  }
  .page-service .svc-technique-char{
    font-family: 'Noto Sans SC', sans-serif; font-weight: 500;
    font-size: 1.9rem; line-height: 1;
    color: var(--accent); flex-shrink: 0; margin-top: 2px;
  }
  .page-service .svc-technique-name{
    font-family: var(--font-display); font-weight: 500; font-size: 1.12rem;
    margin: 2px 0 6px;
  }
  .page-service .svc-technique-line{ font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 34ch; }
  @media (max-width: 700px){
    .page-service .svc-techniques{ grid-template-columns: 1fr; }
  }

  .page-service .svc-marks{ max-width: 860px; border-top: 1px solid var(--line); }
  .page-service .svc-mark{
    display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
    gap: 8px clamp(24px, 4vw, 56px); align-items: baseline;
    padding: 20px 0; border-bottom: 1px solid var(--line);
  }
  .page-service .svc-mark-name{
    display: flex; align-items: baseline; gap: 14px;
    font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--ink);
  }
  .page-service .svc-mark-char{
    font-family: 'Noto Sans SC', sans-serif; font-weight: 500;
    font-size: 1.5rem; line-height: 1; color: var(--accent);
  }
  .page-service .svc-mark-line{ margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
  @media (max-width: 700px){
    .page-service .svc-mark{ grid-template-columns: 1fr; }
  }

  .page-service .svc-session-section .faq-list{ max-width: 740px; }
  .page-service .svc-pulse-more{ margin-top: clamp(28px, 4vw, 44px); }
  .page-service .svc-session-section .faq-a p{ max-width: 58ch; }
  .page-service .svc-pulse-more .faq-a .svc-pulse-note{ font-size: 0.88rem; }

  .lang-bubble{
    position: fixed;
    right: 24px;
    bottom: 24px;

    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 50;

    width: 58px; height: 58px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;

    -webkit-appearance: none; appearance: none;
    -webkit-tap-highlight-color: transparent;

    --cut: 100%;
  }

  .lang-bubble__face{
    position: absolute; inset: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;

    font-family: 'Figtree', 'Noto Sans SC', sans-serif;
    font-weight: 600;
    font-size: 0.95rem; line-height: 1; letter-spacing: 0.02em;

    transition: background .2s ease, color .2s ease;
  }

  .lang-bubble__face--page{
    background: var(--accent);
    color: var(--page);
  }

  .lang-bubble__face--footer{
    background: var(--page);
    color: var(--accent);
    clip-path: inset(var(--cut) 0 0 0);
  }

  .lang-bubble:hover .lang-bubble__face--page,
  .lang-bubble:focus-visible .lang-bubble__face--page{
    background: var(--page); color: var(--accent);
  }
  .lang-bubble:hover .lang-bubble__face--footer,
  .lang-bubble:focus-visible .lang-bubble__face--footer{
    background: var(--accent); color: var(--page);
  }

  .lang-bubble__face::after{
    content: "";
    position: absolute; inset: 4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
  }
  .lang-bubble:focus-visible{ outline: none; }
  .lang-bubble:focus-visible .lang-bubble__face::after{ opacity: 1; }

  @media (max-width: 560px){
    .lang-bubble{
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      width: 52px; height: 52px;
    }
    .lang-bubble__face{ font-size: 0.9rem; }
  }

  html[lang="zh-Hans"]{
    --font-display: 'Figtree', 'Noto Sans SC', sans-serif;
  }
  html[lang="zh-Hans"] body{
    font-family: 'Figtree', 'Noto Sans SC', sans-serif;

    line-height: 1.8;
  }

  html[lang="zh-Hans"] .statement p,
  html[lang="zh-Hans"] .statement h1,
  html[lang="zh-Hans"] .statement--home p{
    max-width: 24em; line-height: 1.6; letter-spacing: 0;
  }
  html[lang="zh-Hans"] .notice__text,
  html[lang="zh-Hans"] .statement-note{
    max-width: 30em; line-height: 1.6; letter-spacing: 0;
  }
  html[lang="zh-Hans"] .notice__note,
  html[lang="zh-Hans"] .footer-tagline,
  html[lang="zh-Hans"] .footer-bottom p{ max-width: 34em; }

  html[lang="zh-Hans"] .u-label,
  html[lang="zh-Hans"] .nav-link,
  html[lang="zh-Hans"] .nav-book,
  html[lang="zh-Hans"] .footer-col h4,
  html[lang="zh-Hans"] .footer-col ul a{
    text-transform: none; letter-spacing: 0.04em;
  }
  html[lang="zh-Hans"] .nav-link,
  html[lang="zh-Hans"] .nav-book{ font-size: 0.86rem; }

  html[lang="zh-Hans"] .statement-zh,
  html[lang="zh-Hans"] .submenu-zh{ display: none; }

  html:not([lang="zh-Hans"]) [data-lang="zh"],
  html[lang="zh-Hans"] [data-lang="en"]{ display: none !important; }

  .lang-note{
    max-width: 34em; margin: 0 0 32px; padding: 14px 18px;
    border: 1px solid var(--line);
    font-size: 1rem; line-height: 1.7; color: var(--ink);
  }
  .lang-note a{ color: var(--jade); text-decoration: underline; text-underline-offset: 3px; }
  .news-heading + .lang-note{ margin-top: 20px; }
  .post-title + .lang-note{ margin-top: 24px; }

  .notice__facts{
    display: flex; flex-wrap: wrap;
    gap: 36px 80px;
    margin-bottom: 36px;
  }
  .notice__loc{
    font-family: var(--font-display);
    font-size: 1.3rem; line-height: 1.4;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .notice__loc:last-child{ margin-bottom: 0; }
  .notice__loc strong{ display: block; font-weight: 500; }

  .notice__loc span{ font-size: 0.95rem; color: var(--ink-soft); }
  .notice__hour{
    display: flex; gap: 18px;
    font-size: 1.18rem; line-height: 1.75; color: var(--ink);
  }

  .notice__day{ min-width: 6.5em; color: var(--ink-soft); }
  .notice__time{ font-variant-numeric: tabular-nums; }
  .notice__note{
    font-size: 1rem; line-height: 1.6;
    color: var(--ink); max-width: 64ch;
    margin-bottom: 36px;
  }
  @media (max-width: 560px){
    .notice__facts{ gap: 28px; }
    .notice__loc{ font-size: 1.15rem; }
    .notice__hour{ font-size: 1.05rem; }
    .notice__day{ min-width: 5.8em; }
  }

  .footer-note{
    font-size: 0.82rem; line-height: 1.6;
    color: rgba(248,244,234,0.72);
    max-width: 30ch; margin-top: 10px;
  }

  @media (prefers-reduced-motion: no-preference){
    @view-transition{ navigation: auto; }
  }
  .site-header{ view-transition-name: site-header; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration: 0.22s; }

  .legal{
    max-width: 70ch;
    padding: clamp(48px, 7vw, 88px) 0 var(--section-gap);
    color: var(--ink); font-size: 1rem; line-height: 1.7;
  }
  .legal h1{ font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.3; }
  .legal h2{ font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.4; margin-top: 36px; }
  .legal h2.legal-part{ font-size: 1.6rem; line-height: 1.3; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--line); }
  .legal-updated{ color: var(--ink-soft); font-size: 0.95rem; margin-top: 6px; }
  .legal p, .legal ul, .legal address{ margin-top: 12px; }
  .legal h1 + .legal-updated + p{ margin-top: 28px; }
  .legal ul{ padding-left: 22px; }
  .legal li + li{ margin-top: 8px; }
  .legal address{ font-style: normal; }
  .legal a{ text-decoration: underline; text-underline-offset: 3px; }