/* AUTO-GENERATED FILE. Edit frontend-src/css instead. */

/* Source: css/00-fonts.css */
@font-face {
    font-family: "Puppy Noto Serif SC";
    src: url("/assets/fonts/site-typography/notoserifsc-display.c6c46ed1e872801f.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Puppy Noto Sans SC";
    src: url("/assets/fonts/site-typography/notosanssc-ui.3f9b43b162c0b5ef.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Puppy Cormorant Garamond";
    src: url("/assets/fonts/site-typography/cormorantgaramond-display.d80df8ff5aecd299.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Puppy LXGW WenKai";
    src: url("/assets/fonts/site-typography/lxgwwenkai-about.d3e82e6c38e7c972.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Source: css/00-tokens.css */
/* 基础样式 */
:root {
    --primary-color: #9ca888;
    --secondary-color: #7a886d;
    --accent-color: #c8d0bc;
    --light-color: #f4f6f2;
    --dark-color: #1f261f;
    --warm-bg: #f7f8f5;
    --page-paper: #f7f6f2;
    --page-surface: rgba(255, 255, 255, 0.76);
    --page-border: rgba(110, 124, 96, 0.16);
    --page-ink: #283024;
    --page-muted: #68715f;
    --paper-bg: #ffffff;
    --muted-text: #697064;
    --line-color: rgba(31, 38, 31, 0.1);
    --surface-tint: #eef2ea;
    --shadow-soft: 0 18px 55px rgba(31, 38, 31, 0.1);
    --shadow-card: 0 14px 34px rgba(31, 38, 31, 0.08);
    --radius-lg: 24px;
    --radius-xl: 34px;
    --max-width: 1200px;
    /* 移动端安全区域变量 */
    --safe-area-top: env(safe-area-inset-top, 0px);
}

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

/* Source: css/01-base.css */
/* 添加平滑滚动效果 */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'LXGW WenKai', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'Microsoft YaHei', serif;
    line-height: 1.6;
    color: var(--dark-color);
    background: var(--warm-bg);
    /* 移动端顶部安全区域 */
    padding-top: 0;
}

a {
    text-decoration: none;
    color: var(--dark-color);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
}

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    background: var(--primary-color);
    color: #fff;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn:hover {
    background: var(--secondary-color);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--primary-color);
}

.is-hidden {
    display: none !important;
}

.toast-container {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 1000;
    display: grid;
    gap: 10px;
    max-width: min(360px, calc(100vw - 32px));
}

.toast {
    padding: 12px 16px;
    border-radius: 14px;
    background: #111;
    color: #fff;
    box-shadow: 0 14px 30px rgba(17, 17, 17, 0.18);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast--visible {
    opacity: 1;
    transform: translateY(0);
}

.toast--success {
    background: var(--secondary-color);
}

.toast--error {
    background: #8b3a3a;
}

.scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 99;
    box-shadow: 0 12px 28px rgba(17, 17, 17, 0.12);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.scroll-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
}

@media (max-width: 600px) {
    .scroll-top {
        right: calc(8px + env(safe-area-inset-right, 0px));
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        font-size: 18px;
        box-shadow: 0 8px 20px rgba(17, 17, 17, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}

/* Source: css/02-layout-navigation.css */
/* 导航栏 */
header {
    background: rgba(247, 246, 242, 0.94);
    border-bottom: 0;
    box-shadow: none;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: none;
}

/* 智能导航栏状态 */
header.compact {
    background: rgba(247, 246, 242, 0.96);
    padding: 0;
    box-shadow: 0 8px 22px rgba(17, 17, 17, 0.06);
}

header.compact .logo {
    opacity: 1;
    transform: scale(0.94);
    pointer-events: auto;
}

header.compact nav ul li a {
    padding: 8px 16px;
    font-size: 16px;
}

header.compact .language-toggle {
    padding: 6px 12px;
    font-size: 12px;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: none;
    padding: 16px clamp(22px, 4vw, 56px);
    transition: all 0.3s ease;
}

header.compact .container {
    padding: 10px clamp(22px, 4vw, 56px);
}

.logo {
    flex: 0 0 auto;
    transition: all 0.3s ease;
}

.logo a {
    text-decoration: none;
    display: block;
}

.logo img {
    width: 184px;
    height: 58px;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: drop-shadow(0 10px 18px rgba(17, 17, 17, 0.1));
}

header.compact .logo img {
    width: 146px;
    height: 44px;
}

nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.language-switcher {
    flex: 0 0 auto;
    position: relative;
    z-index: 1000;
}

.language-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(31, 38, 31, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--dark-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    min-width: 106px;
    margin-right: 0;
    box-shadow: 0 10px 24px rgba(31, 38, 31, 0.06);
}

.language-toggle i {
    display: none;
}

.language-label {
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.language-toggle:hover,
.language-toggle:focus-visible {
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--dark-color);
    border-color: rgba(31, 38, 31, 0.2);
    box-shadow: 0 12px 28px rgba(31, 38, 31, 0.1);
    transform: translateY(-2px);
}



nav ul {
    display: flex;
    gap: 30px;
}

nav ul li {
    margin: 0;
}

nav ul li a {
    font-size: 18px;
    padding: 12px 20px;
    transition: all 0.3s ease;
    font-weight: 600;
    border-radius: 25px;
    color: rgba(31, 38, 31, 0.86);
    background: transparent;
    box-shadow: none;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--dark-color);
    background: rgba(255, 255, 255, 0.72);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(31, 38, 31, 0.08);
}

/* Source: css/03-pages-home-announcements.css */
/* 首页 Hero 与公告 */
.home-page {
    --home-paper: var(--page-paper);
    background: var(--home-paper);
}

.hero-image {
    position: relative;
    aspect-ratio: 1454 / 650;
    min-height: 0;
    margin-top: 91px;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
    background: var(--home-paper);
}

.hero-image-container {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}

.hero-image-container::before,
.hero-image-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-image-container::before {
    background:
        linear-gradient(180deg, var(--home-paper) 0%, rgba(247, 246, 242, 0.34) 4%, transparent 10%, transparent 72%, rgba(247, 246, 242, 0.74) 92%, var(--home-paper) 100%),
        linear-gradient(180deg, transparent 0%, rgba(16, 20, 15, 0.03) 48%, rgba(16, 20, 15, 0.08) 100%);
}

.hero-image-container::after {
    inset: auto 0 0;
    height: 24%;
    background: linear-gradient(180deg, transparent, var(--home-paper));
}

.hero-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.6s ease;
}

.hero-image-container img:hover {
    transform: none;
    box-shadow: none;
}

.hero-copy {
    position: absolute;
    left: 50%;
    top: 70%;
    z-index: 2;
    width: min(880px, calc(100% - 40px));
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
    text-shadow: 0 8px 34px rgba(0, 0, 0, 0.4);
}

.hero-copy h1 {
    margin: 0;
    font-size: clamp(2.4rem, 4vw, 3.7rem);
    line-height: 1.06;
    font-weight: 950;
    letter-spacing: -0.055em;
    white-space: pre-line;
}

html[lang="en"] .hero-copy h1 {
    max-width: 720px;
    margin: 0 auto;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.hero-lead {
    margin: 14px auto 0;
    max-width: 620px;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    min-height: 48px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease, color 0.24s ease;
}

.hero-action--primary {
    color: var(--dark-color);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

.hero-action--secondary {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.56);
    background: rgba(31, 38, 31, 0.28);
    backdrop-filter: blur(10px);
}

.hero-action:hover,
.hero-action:focus-visible {
    transform: translateY(-3px);
}

.hero-action--primary:hover,
.hero-action--primary:focus-visible {
    background: var(--surface-tint);
    color: var(--dark-color);
}

.hero-action--secondary:hover,
.hero-action--secondary:focus-visible {
    background: rgba(31, 38, 31, 0.48);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

/* 公告栏 */
.studio-announcements {
    position: relative;
    padding: 72px 0 88px;
    background: var(--home-paper);
}

.announcements-section {
    margin-top: 0;
}

.home-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
}

.home-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--secondary-color);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-section-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.home-section-heading .section-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: fit-content;
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    color: var(--dark-color);
    margin: 0;
    letter-spacing: -0.03em;
}

.home-section-heading .section-title::after {
    display: none;
}

.home-section-heading .section-title i {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    border-radius: 999px;
    font-size: 1.2rem;
    box-shadow: 0 12px 24px rgba(70, 84, 67, 0.2);
}

.home-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(156, 168, 136, 0.24);
    border-radius: 999px;
    color: var(--secondary-color);
    background: rgba(255, 255, 255, 0.66);
    font-weight: 850;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.home-text-link:hover,
.home-text-link:focus-visible {
    color: #fff;
    background: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(122, 136, 109, 0.18);
    transform: translateY(-2px);
}

.announcements-list {
    border: 1px solid var(--line-color);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(250, 251, 248, 0.78));
    box-shadow: 0 18px 46px rgba(31, 38, 31, 0.07);
    overflow: hidden;
}

.announcement-item {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 21px 30px;
    border-bottom: 1px solid var(--line-color);
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

.announcement-item:hover {
    background: rgba(255, 255, 255, 0.68);
    transform: translateX(4px);
}

.announcement-item.clickable:hover {
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 4px 0 0 rgba(111, 128, 104, 0.42);
}

.announcement-item.empty {
    opacity: 0.56;
    cursor: default;
}

.announcement-item.empty:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
}

.announcements-section .announcement-date {
    flex: 0 0 120px;
    color: var(--secondary-color);
    font-size: 0.95rem;
    font-weight: 800;
}

.announcements-section .announcement-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
}

.announcements-section .announcement-tag {
    flex: 0 0 auto;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(156, 168, 136, 0.12);
    color: var(--secondary-color);
    font-size: 0.85rem;
    font-weight: 800;
}

.announcements-section .announcement-item.empty .announcement-tag {
    background: rgba(83, 78, 66, 0.1);
    color: rgba(45, 42, 36, 0.52);
}

.announcements-section .announcement-title {
    overflow: hidden;
    color: var(--dark-color);
    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}

.announcements-section .announcement-title:hover {
    color: var(--secondary-color);
}

.announcements-section .announcement-item.empty .announcement-title {
    color: rgba(45, 42, 36, 0.48);
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .hero-image-container img,
    .hero-action,
    .announcement-item,
    .home-text-link {
        transition: none;
    }
}

/* 公告页面 */
.announcement-page {
    padding: 2rem 0;
    background: #f8f9fa;
    min-height: 100vh;
}

.announcement-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.announcement-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.announcement-tag {
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.announcement-date {
    color: #666;
    font-weight: 500;
    font-size: 1.1rem;
}

.announcement-page .announcement-title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin: 1rem 0;
    font-weight: 700;
    line-height: 1.2;
}

.announcement-info {
    color: #666;
    font-size: 1rem;
    margin: 0;
}

.announcement-body {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    line-height: 1.8;
}

.announcement-body h2 {
    color: #2c3e50;
    font-size: 1.6rem;
    margin: 2.5rem 0 1.2rem 0;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.announcement-body h2:first-child {
    margin-top: 0;
}

.announcement-body p {
    color: #444;
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-size: 1rem;
}

.announcement-body ul,
.announcement-body ol {
    margin: 1rem 0 1.5rem 0;
    padding-left: 1.5rem;
}

.announcement-body ul li,
.announcement-body ol li {
    color: #555;
    margin-bottom: 0.8rem;
    line-height: 1.7;
}

.announcement-body ul li {
    list-style: none;
    position: relative;
    padding-left: 0;
}

.announcement-body ol {
    list-style: none;
}

.announcement-body ol li {
    margin-bottom: 0.6rem;
    list-style: none;
}

.notice {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 1rem;
    margin: 1.5rem 0;
    color: #856404;
    font-style: italic;
    border-radius: 0 5px 5px 0;
}

.form-link {
    display: inline-block;
    background: #007bff;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.5rem;
    transition: background 0.3s ease;
}

.form-link:hover {
    background: #0056b3;
    text-decoration: none;
    color: white !important;
}

.announcement-footer {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
}

.announcement-footer .btn {
    background: var(--primary-color);
    border: none;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 5px;
    transition: background 0.3s ease;
}

.announcement-footer .btn:hover {
    background: var(--secondary-color);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .announcement-page .announcement-title {
        font-size: 2rem;
    }

    .announcement-body {
        padding: 2rem;
        margin: 0 1rem;
    }

    .announcement-body h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .announcement-page .announcement-meta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .announcement-page .announcement-title {
        font-size: 1.8rem;
    }

    .announcement-body {
        padding: 1.5rem;
    }

    .form-link {
        display: block;
        margin: 0.5rem 0;
        text-align: center;
    }
}

/* Source: css/04-pages-about-services-works.css */
/* 关于我们 */
.about {
    padding: 90px 0;
}

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

.about-text-center {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.about-text-center .about-image {
    margin-top: 30px;
}

.about-text p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.8;
}

.about-image {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* 服务内容 */
.services {
    padding: 90px 0;
    background-color: var(--light-color);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 30px;
}

.service-card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-icon {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.lazy-placeholder:hover .load-hint {
    background: var(--primary-color);
    color: white;
    transform: scale(1.05);
}

/* 加载状态样式 */
.work-item.loading .lazy-placeholder {
    background: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.work-item.loading .placeholder-content {
    opacity: 0.5;
}

.work-item.loading .load-hint {
    background: #dee2e6;
    color: #6c757d;
    animation: pulse 1s infinite;
}

.image-error-placeholder__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    background: #f5f5f5;
    color: #666;
    text-align: center;
}

.image-error-placeholder__content i {
    margin-bottom: 8px;
    color: #999;
    font-size: 24px;
}

.image-error-placeholder__title {
    font-size: 14px;
}

.image-error-placeholder__hint {
    margin-top: 4px;
    font-size: 12px;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* 已加载图片样式 */
.work-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease;
    opacity: 1;
}

/* 悬停效果已移除，保持图片简洁显示 */

/* 响应式显示控制 */
.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }
}

/* 隐藏更多作品 */
.more-works.hidden {
    display: none;
}

.more-works {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 展示更多按钮样式 */
.show-more-container {
    text-align: center;
    margin-top: 40px;
}

.show-more-btn {
    position: relative;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(156, 168, 136, 0.35);
}

.show-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(156, 168, 136, 0.45);
}

.show-more-btn i {
    transition: transform 0.3s ease;
}

.show-more-btn:hover i {
    transform: rotate(90deg);
}

.btn-animation {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.6s ease;
}

.show-more-btn:hover .btn-animation {
    left: 100%;
}

/* 按钮状态切换 */
.show-more-btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.show-more-btn.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 作品展示 */
.works-page {
    --works-paper: var(--page-paper);
    --works-surface: var(--page-surface);
    --works-border: var(--page-border);
    --works-ink: var(--page-ink);
    --works-muted: var(--page-muted);
    background:
        radial-gradient(circle at 12% 10%, rgba(199, 208, 188, 0.42), transparent 30rem),
        radial-gradient(circle at 88% 24%, rgba(156, 168, 136, 0.18), transparent 24rem),
        linear-gradient(180deg, var(--works-paper), #fbfaf6 48%, var(--works-paper));
}

.works-page .page-header {
    position: relative;
    overflow: hidden;
    padding: 128px 0 52px;
    background:
        linear-gradient(135deg, rgba(247, 246, 242, 0.96), rgba(239, 242, 233, 0.88)),
        radial-gradient(circle at 50% 0%, rgba(156, 168, 136, 0.26), transparent 34rem);
    color: var(--works-ink);
    border-bottom: 1px solid var(--works-border);
}

.works-page .page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(110, 124, 96, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 124, 96, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.36), transparent 78%);
    pointer-events: none;
}

.works-page .page-header .container {
    position: relative;
    z-index: 1;
    max-width: 920px;
}

.works-page .page-header h1 {
    margin-bottom: 14px;
    color: var(--works-ink);
    font-size: clamp(3.4rem, 7vw, 5.8rem);
    line-height: 0.95;
    letter-spacing: 0.04em;
    text-shadow: 0 18px 42px rgba(87, 98, 76, 0.12);
}

.works-page .page-header p {
    max-width: 560px;
    color: var(--works-muted);
    font-size: clamp(1.02rem, 1.6vw, 1.22rem);
    opacity: 1;
}

.works {
    padding: 58px 0 86px;
}

.works-page .works .container {
    max-width: 1280px;
}

.works-filter {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 42px;
    padding: 7px;
    border: 1px solid var(--works-border);
    border-radius: 999px;
    background: var(--works-surface);
    box-shadow: 0 18px 46px rgba(65, 76, 55, 0.09);
    backdrop-filter: blur(18px);
}

.filter-btn {
    min-width: 74px;
    background: transparent;
    border: 0;
    padding: 10px 18px;
    margin: 0;
    border-radius: 999px;
    color: var(--secondary-color);
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 10px 24px rgba(122, 136, 109, 0.24);
}

.filter-btn:hover {
    transform: translateY(-1px);
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
}

@media (max-width: 1200px) {
    .works-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.work-item {
    overflow: hidden;
    border-radius: 24px;
    aspect-ratio: 3 / 4;
    height: auto;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 44px rgba(35, 43, 31, 0.11);
    transition: transform 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
    position: relative;
    background: #dfe5d9;
}

.works-page .work-item img {
    border-radius: 24px;
    transition: transform 0.42s ease, filter 0.42s ease;
}

.work-item:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

.work-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px 20px 16px;
    background: linear-gradient(180deg, transparent, rgba(19, 23, 18, 0.46));
    color: rgba(255, 255, 255, 0.94);
    border-radius: 0 0 24px 24px;
    border: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.94rem;
    letter-spacing: 0.06em;
    pointer-events: none;
    opacity: 0;
    transform: none;
    transition: opacity 0.25s ease;
    backdrop-filter: blur(2px);
}

.work-overlay__owner {
    text-align: right;
    width: 100%;
}

/* 默认/展开状态统一保持 3:4 比例 */
.work-item.default-show,
.works-expanded .work-item {
    height: auto !important;
    aspect-ratio: 3 / 4;
}

.work-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 56px rgba(35, 43, 31, 0.16);
}

.work-item:hover img {
    transform: scale(1.035);
    filter: saturate(1.04);
}

.work-item:hover .work-overlay,
.work-item.touch-active .work-overlay,
.work-item:focus-visible .work-overlay,
.work-item:focus-within .work-overlay {
    opacity: 1;
}

/* Source: css/05-layout-footer-page-header.css */
/* 页脚 */
footer {
    background:
        radial-gradient(circle at 8% 0%, rgba(156, 168, 136, 0.16), transparent 22rem),
        linear-gradient(180deg, #151913 0%, #0f130f 100%);
    color: rgba(255, 255, 255, 0.88);
    padding: 34px 0 18px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 22px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.footer-logo img {
    width: 176px;
    height: auto;
    padding: 0;
    margin-right: 0;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.28));
}

.social-links a {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    color: #fff;
    background: rgba(156, 168, 136, 0.28);
    border-color: rgba(156, 168, 136, 0.5);
    transform: translateY(-2px);
}

.service-contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: -12px 0 24px;
}

.service-contact-links a,
.platform-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(156, 168, 136, 0.22);
    border-radius: 999px;
    background: rgba(156, 168, 136, 0.12);
    color: var(--secondary-color);
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.service-contact-links a:hover,
.platform-link-pill:hover {
    background: rgba(156, 168, 136, 0.18);
    box-shadow: 0 8px 20px rgba(156, 168, 136, 0.16);
    transform: translateY(-2px);
}

.copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.92rem;
}

/* 页面标题区域 */
.page-header {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(247, 246, 242, 0.96), rgba(239, 242, 233, 0.88)),
        radial-gradient(circle at 50% 0%, rgba(156, 168, 136, 0.24), transparent 34rem);
    padding: 128px 0 56px;
    text-align: center;
    color: var(--page-ink);
    border-bottom: 1px solid var(--page-border);
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(110, 124, 96, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 124, 96, 0.045) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 78%);
    pointer-events: none;
}

.page-header .container {
    position: relative;
    z-index: 1;
    max-width: 920px;
}

.page-header h1 {
    color: var(--page-ink);
    font-size: clamp(3.3rem, 6.4vw, 5.2rem);
    line-height: 0.96;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    font-weight: 700;
    text-shadow: 0 18px 42px rgba(87, 98, 76, 0.12);
}

.page-header p {
    color: var(--page-muted);
    font-size: clamp(1.02rem, 1.55vw, 1.2rem);
    opacity: 1;
    max-width: 620px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .page-header {
        padding: max(188px, calc(146px + var(--safe-area-top))) 20px 46px !important;
    }

    .page-header h1 {
        font-size: clamp(3rem, 14vw, 4.2rem);
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: max(184px, calc(142px + var(--safe-area-top))) 18px 42px !important;
    }
}

/* 作品详情链接 */
.view-work {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 15px;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.view-work:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
}

/* 服务特色列表 */
.service-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.service-features li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 25px;
}

.service-features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.service-features li:last-child {
    border-bottom: none;
}

/* 服务流程 */

/* Source: css/06-pages-services-form.css */
.service-process {
    padding: 100px 0 80px;
    background-color: var(--light-color);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 50px;
    justify-items: center;
}

/* 当有7个步骤时，确保最后一行的步骤居中 */
@media (min-width: 1400px) {
    .process-steps {
        grid-template-columns: repeat(7, 1fr);
        max-width: 1400px;
        margin: 50px auto 0;
    }
}

@media (max-width: 1399px) and (min-width: 1200px) {
    .process-steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .process-steps .step:nth-child(5) {
        grid-column: 1 / 2;
    }

    .process-steps .step:nth-child(6) {
        grid-column: 2 / 3;
    }

    .process-steps .step:nth-child(7) {
        grid-column: 3 / 4;
    }
}

@media (max-width: 1199px) and (min-width: 900px) {
    .process-steps {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-steps .step:nth-child(7) {
        grid-column: 2 / 3;
    }
}

.step {
    text-align: center;
    padding: 30px 20px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.step-number {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    line-height: 50px;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.step h3 {
    color: var(--dark-color);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* 团队成员 */
.team {
    padding: 100px 0 80px;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.team-member {
    text-align: center;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.team-member:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.member-image {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--primary-color);
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member h3 {
    color: var(--dark-color);
    margin-bottom: 10px;
    font-size: 1.3rem;
}

.member-role {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.team-member p:last-child {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 猫猫狗狗 */
.pet-section {
    padding: 90px 0;
    background: var(--warm-bg);
}

.pet-section .section-title {
    text-align: center;
    margin-bottom: 12px;
}

.pet-section .pet-description {
    text-align: center;
    color: #6b7280;
    max-width: 720px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.pet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.pet-card {
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.pet-image {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
    border: 3px solid rgba(156, 168, 136, 0.32);
    background: #fff;
}

.pet-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-role {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.pet-desc {
    color: #6b7280;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .pet-section {
        padding: 60px 0;
    }

    .pet-grid {
        gap: 16px;
    }
}

/* 作品类型展示 */
.service-types {
    padding: 100px 0 80px;
    background-color: var(--light-color);
}

.types-description {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.types-grid {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.type-category {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.type-category h3 {
    text-align: center;
    color: var(--dark-color);
    margin-bottom: 30px;
    font-size: 1.5rem;
    font-weight: 600;
    position: relative;
}

.type-category h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

.type-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.paws-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.type-item {
    text-align: center;
    padding: 20px;
    border-radius: 15px;
    background: #f8f9fa;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.type-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.type-image {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px;
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.type-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.type-item:hover .type-image img {
    transform: scale(1.05);
}

.type-item h4 {
    color: var(--dark-color);
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 600;
}

.type-item p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 480px) {
    /* 作品展示移动端适配 */
    .works {
        padding: 60px 0;
    }

    .works-filter {
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 30px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .works-filter::-webkit-scrollbar {
        display: none;
    }
    .filter-btn {
        flex: 0 0 auto;
        min-width: 80px;
        font-size: 15px;
        padding: 8px 18px;
        border-radius: 20px;
        margin: 0;
    }
}

@media (max-width: 768px) {
    /* 移动端安全区域适配 - 增加额外的顶部间距 */
    body:not(.works-page):not(.services-page):not(.about-page) .page-header,
    body:not(.works-page) .works {
        padding-top: 150px !important;
    }

    /* 首页智能导航栏适配 */
    .hero-image {
        padding-top: 160px !important;
    }
    /* 让works-filter横向滚动且按钮并列不换行 */
    .works-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 10px;
        margin-bottom: 30px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .works-filter::-webkit-scrollbar {
        display: none;
    }
    .filter-btn {
        flex: 0 0 auto;
        min-width: 80px;
        font-size: 15px;
        padding: 8px 18px;
        border-radius: 20px;
        margin: 0;
    }

/* 作品展示项移动端适配 */
    .works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    body:not(.works-page):not(.services-page):not(.about-page) .page-header,
    body:not(.works-page) .works {
        padding-top: 180px !important;
    }

    /* 首页智能导航栏适配 */
    .hero-image {
        padding-top: 190px !important;
    }

    /* 其他页面小屏幕适配 */
    .announcement-page {
        padding-top: 180px !important;
    }

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

    body:not(.about-page) .about {
        padding-top: 180px !important;
    }

    body:not(.services-page) .commission-form {
        padding-top: 180px !important;
    }
    .works-filter {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 8px;
        margin-bottom: 24px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .works-filter::-webkit-scrollbar {
        display: none;
    }
    .filter-btn {
        flex: 0 0 auto;
        min-width: 70px;
        font-size: 14px;
        padding: 7px 14px;
        border-radius: 18px;
        margin: 0;
    }

    .paws-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    }

    /* 作品展示项小屏幕适配 */
    .work-item,
    .work-item.default-show,
    .works-expanded .work-item {
        aspect-ratio: 3 / 4;
        height: auto !important;
    }
}

/* 委托表单样式 */
.commission-form {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.form-description {
    text-align: center;
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

/* 委托开放时间提示 */
.commission-time-notice {
    text-align: center;
    margin-bottom: 20px;
}

.commission-time {
    display: inline-block;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(156, 168, 136, 0.35);
    margin: 0;
    transition: all 0.3s ease;
}

.commission-time--open {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

.commission-time--pending {
    background: linear-gradient(135deg, #a88d5d, #c8b08a);
}

.commission-time--closed {
    background: linear-gradient(135deg, #6f746a, #3f433d);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* 必填信息提示 */
.form-required-note {
    text-align: center;
    font-size: 14px;
    color: #d32f2f;
    margin-bottom: 40px;
    font-weight: 500;
}

.commission-form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 上传区域 */
.upload-section {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.upload-section h3 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-size: 18px;
}

.upload-area {
    border: 2px dashed var(--secondary-color);
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.upload-area:hover {
    border-color: var(--secondary-color);
    background: rgba(156, 168, 136, 0.08);
}

.upload-area--dragover {
    border-color: var(--primary-color);
    background: rgba(156, 168, 136, 0.12);
}

.upload-icon {
    font-size: 48px;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.upload-area p {
    margin: 10px 0;
    color: #333;
}

.upload-info {
    font-size: 14px;
    color: #666 !important;
}

.upload-tip {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--primary-color);
    background: rgba(156, 168, 136, 0.12);
    border: 1px dashed rgba(156, 168, 136, 0.45);
    padding: 10px 16px;
    border-radius: 10px;
    line-height: 1.5;
}

.upload-area input[type="file"] {
    display: none !important;
}

.uploaded-files {
    margin-top: 20px;
}

.uploaded-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f5f5;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.file-preview {
    margin-right: 15px;
}

.file-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    background: #f0f0f0;
    color: #666;
    font-size: 13px;
}

.preview-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #e0e0e0;
}

.form-status {
    margin: 20px 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f5f5f5;
    color: #333;
    border: 1px solid #e5e7eb;
}

.form-status--success {
    background: rgba(156, 168, 136, 0.14);
    border-color: rgba(156, 168, 136, 0.4);
    color: var(--secondary-color);
}

.form-status--error {
    background: rgba(139, 58, 58, 0.1);
    border-color: rgba(139, 58, 58, 0.28);
    color: #8b3a3a;
}

.form-status--warning {
    background: rgba(168, 141, 93, 0.12);
    border-color: rgba(168, 141, 93, 0.32);
    color: #7a633e;
}

.file-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
}

.file-name {
    font-weight: 500;
    color: #333;
    word-break: break-all;
}

.file-size {
    font-size: 12px;
    color: #666;
}

.file-icon {
    color: var(--secondary-color);
}

.remove-file {
    background: none;
    border: none;
    color: #d32f2f;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.remove-file:hover {
    background-color: rgba(211, 47, 47, 0.1);
}

/* 表单区域 */
.form-section {
    background: white;
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-section h4 {
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 600 !important;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eef1ea;
    position: relative;
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
}

.form-section h4::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--secondary-color);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500 !important;
    color: #333;
    position: relative;
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
}

.form-group.required label::after {
    content: '*';
    color: #d32f2f;
    margin-left: 4px;
}

/* 统一表单样式 */
.commission-form h4,
.commission-form label,
.commission-form button,
.form-section h4,
.commission-form-container h4 {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
}

.commission-form h4,
.form-section h4,
.commission-form-container h4 {
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--secondary-color) !important;
    margin-bottom: 25px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #eef1ea !important;
    position: relative !important;
}

.commission-form label {
    font-weight: 500 !important;
}

/* 表单输入元素字体统一 */
.form-group input,
.form-group select,
.form-group textarea,
.form-group label,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
select,
textarea,
option {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
    font-size: 14px !important;
}

/* 占位符字体统一 */
.form-group input::placeholder,
.form-group textarea::placeholder,
input::placeholder,
textarea::placeholder {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 针对英文环境的placeholder优化 */
:lang(en) .form-group input::placeholder,
:lang(en) .form-group textarea::placeholder,
:lang(en) input::placeholder,
:lang(en) textarea::placeholder {
    font-size: 13px !important;
    line-height: 1.1 !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
    transition: all 0.3s ease;
    background: #fafafa;
    min-height: 44px; /* 确保足够的高度显示placeholder */
}

/* 针对英文环境的输入框优化 */
:lang(en) .form-group input,
:lang(en) .form-group select,
:lang(en) .form-group textarea {
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(156, 168, 136, 0.14);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* 按钮样式 */
.form-actions {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    margin-top: 30px;
}

.btn-primary,
.btn-secondary {
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: var(--secondary-color);
    color: white;
}

.btn-primary--available {
    background: var(--secondary-color);
    cursor: pointer;
    opacity: 1;
}

.btn-primary--unavailable {
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-primary:hover {
    background: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(156, 168, 136, 0.35);
}

.btn-secondary {
    background: #f5f5f5;
    color: #666;
    border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
    background: #eef1ea;
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

/* 禁用状态的按钮样式 */
.btn-primary:disabled {
    background: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-primary:disabled:hover {
    background: #cccccc !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .commission-form {
        padding: 40px 0;
    }

    .commission-time {
        font-size: 14px;
        padding: 10px 16px;
    }

    .form-required-note {
        font-size: 13px;
    }

    .commission-form-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Source: css/07-responsive-contact.css */
@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .upload-section,
    .form-section {
        padding: 20px;
        margin-bottom: 20px;
    }

    .upload-area {
        padding: 30px 20px;
    }

    .upload-icon {
        font-size: 36px;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
    }

    /* 关于我们页面移动端适配 */
    .about-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-text-center {
        max-width: 100%;
    }

    .about-text-center h2 {
        text-align: center;
        margin-bottom: 25px;
    }

    .about-text-center p {
        text-align: justify;
        line-height: 1.8;
    }

    /* 工作室展示移动端适配 */
    .studio-announcements {
        padding: 60px 0;
    }

    .studio-showcase {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 60px;
        padding: 22px;
    }

    .studio-info {
        text-align: center;
    }

    .studio-kicker,
    .home-section-eyebrow {
        justify-content: center;
    }

    .studio-note-card {
        max-width: 100%;
        margin: 0 auto;
        text-align: left;
    }

    .studio-info h2 {
        font-size: 2rem;
        text-align: center;
    }

    .studio-info > p,
    .studio-tagline {
        font-size: clamp(1.7rem, 10vw, 3rem);
        text-align: center;
    }

    /* 公告栏移动端适配 */
    .announcements-section .section-title {
        font-size: 1.8rem;
        justify-content: center;
    }

    .announcement-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 18px 20px;
    }

    .announcements-section .announcement-date {
        flex: none;
        margin-bottom: 0;
        font-size: 0.9rem;
    }

    .announcements-section .announcement-content {
        flex: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .home-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .home-section-heading .section-title {
        justify-content: flex-start;
    }

    .home-entry-grid {
        grid-template-columns: 1fr;
        margin-top: 34px;
    }

    .home-work-preview {
        grid-template-columns: 1fr;
    }

    .home-work-card,
    .home-work-card img {
        min-height: 220px;
    }

    .home-card-actions {
        flex-direction: column;
    }

    .home-primary-link,
    .home-secondary-link {
        width: 100%;
    }

    /* 公告页面移动端适配 */
    .announcement-page {
        padding: 150px 0 60px !important;
    }

    /* 关于我们页面移动端适配 */
    body:not(.about-page) .about {
        padding-top: 150px !important;
    }

    /* 委托表单页面移动端适配 */
    body:not(.services-page) .commission-form {
        padding-top: 150px !important;
    }

    .announcement-page .announcement-title {
        font-size: 2rem;
    }

    .announcement-page .announcement-meta {
        flex-direction: column;
        gap: 10px;
    }

    .announcement-page .announcement-content {
        padding: 25px;
    }

    .content-section h2 {
        font-size: 1.3rem;
    }

    /* 作品类型展示移动端适配 */
    .service-types {
        padding: 60px 0 40px;
    }

    .types-description {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .types-grid {
        gap: 40px;
    }

    .type-category {
        padding: 20px;
        border-radius: 15px;
    }

    .type-category h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .type-items {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .type-item {
        padding: 15px;
    }

    .type-image {
        width: 150px;
        height: 150px;
        margin: 0 auto 15px;
    }

    .type-item h4 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }

    .type-item p {
        font-size: 0.9rem;
    }

    /* 服务流程移动端适配 */
    .service-process {
        padding: 60px 0 40px;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .step {
        padding: 20px 15px;
        margin: 0 auto;
        max-width: 300px;
        width: 100%;
    }

    .step-number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .step h3 {
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .step p {
        font-size: 0.9rem;
        line-height: 1.5;
    }


}

@media (max-width: 600px) {
    .hero-image {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 48px;
    }

    .hero-image::before {
        inset: 18px 8px;
        border-radius: 28px;
    }

    .hero-image-container {
        padding: 7px;
        border-radius: 28px;
    }

    .hero-image-container img {
        border-radius: 22px;
    }

    .studio-announcements {
        padding: 48px 0 62px;
    }

    .announcements-section .section-title {
        font-size: 1.65rem;
    }

    .home-guide-card,
    .home-featured-card {
        border-radius: 26px;
    }

    nav ul {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 10px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    nav ul::-webkit-scrollbar {
        display: none;
    }
    nav ul li {
        flex: 0 0 auto;
    }
}

/* iOS设备特殊适配 */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body:not(.works-page):not(.services-page):not(.about-page) .page-header,
        body:not(.works-page) .works {
            padding-top: max(150px, calc(110px + var(--safe-area-top))) !important;
        }

        .hero-image {
            padding-top: max(160px, calc(120px + var(--safe-area-top))) !important;
        }

        .announcement-page {
            padding-top: max(150px, calc(120px + var(--safe-area-top))) !important;
        }

        body:not(.about-page) .about {
            padding-top: max(150px, calc(80px + var(--safe-area-top))) !important;
        }

        body:not(.services-page) .commission-form {
            padding-top: max(150px, calc(80px + var(--safe-area-top))) !important;
        }
    }

    @media (max-width: 480px) {
        body:not(.works-page):not(.services-page):not(.about-page) .page-header,
        body:not(.works-page) .works {
            padding-top: max(180px, calc(140px + var(--safe-area-top))) !important;
        }

        .hero-image {
            padding-top: max(190px, calc(150px + var(--safe-area-top))) !important;
        }

        .announcement-page {
            padding-top: max(180px, calc(150px + var(--safe-area-top))) !important;
        }

        body:not(.about-page) .about {
            padding-top: max(180px, calc(110px + var(--safe-area-top))) !important;
        }

        body:not(.services-page) .commission-form {
            padding-top: max(180px, calc(110px + var(--safe-area-top))) !important;
        }
    }
}

/* 公告页面联系信息样式 */
.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.platform-contact-links {
    display: contents;
}

.contact-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 12px;
    border-left: 4px solid var(--secondary-color);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: #eef1ea;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(156, 168, 136, 0.18);
}

.contact-item i {
    font-size: 24px;
    margin-right: 15px;
    color: var(--secondary-color);
    width: 30px;
    text-align: center;
}

.contact-item span {
    flex: 1;
    line-height: 1.5;
}

.contact-item a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.contact-item strong {
    color: #333;
    margin-right: 8px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .contact-info {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .contact-item {
        padding: 12px 15px;
    }

    .contact-item i {
        font-size: 20px;
        margin-right: 12px;
        width: 25px;
    }
}

/* 锚点跳转偏移，避免被固定header遮挡 */
#commission-form {
    scroll-margin-top: 120px; /* 根据header高度调整 */
}

/* 首页头图与顶栏的二次适配：覆盖旧移动端安全间距规则，避免首屏被顶出画面 */
@media (max-width: 768px) {
    header .container {
        max-width: none;
        padding: 12px 18px;
        gap: 10px;
    }

    .logo img {
        width: 156px;
        height: 52px;
    }

    nav ul {
        gap: 10px;
    }

    nav ul li a {
        padding: 8px 12px;
        font-size: 14px;
    }

    .language-toggle {
        min-width: auto;
        padding: 8px 12px;
        font-size: 12px;
    }

    .home-page .hero-image {
        min-height: 680px;
        margin-top: 112px;
        padding-top: 0 !important;
    }

    .home-page .hero-copy {
        top: 54%;
        width: calc(100% - 28px);
    }

    .home-page .hero-copy h1 {
        font-size: clamp(2.05rem, 10vw, 3.35rem);
    }

    html[lang="en"] .home-page .hero-copy h1 {
        max-width: 340px;
        font-size: clamp(1.75rem, 7.4vw, 2.45rem);
        line-height: 1.1;
    }

    .home-page .hero-lead {
        max-width: 330px;
        letter-spacing: 0.04em;
    }

    .home-page .studio-announcements {
        padding: 54px 0 68px;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-logo {
        width: 100%;
        justify-content: space-between;
    }

    .footer-logo img {
        width: 152px;
    }

    .social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .social-links a {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    header .container {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 14px;
    }

    .logo img {
        width: 138px;
        height: 45px;
    }

    nav {
        order: 3;
        flex: 0 0 100%;
        justify-content: flex-start;
        overflow: hidden;
    }

    nav ul {
        justify-content: flex-start;
        width: 100%;
        padding-bottom: 2px;
    }

    nav ul li a {
        padding: 7px 10px;
        font-size: 13px;
    }

    .language-toggle {
        padding: 7px 10px;
    }

    .home-page .hero-image {
        min-height: 640px;
        margin-top: 126px;
        padding-top: 0 !important;
    }

    .home-page .hero-actions {
        gap: 10px;
        margin-top: 26px;
    }

    .home-page .hero-action {
        min-width: 124px;
        min-height: 44px;
        padding: 10px 18px;
    }
}

@media (max-width: 768px) {
    .works-page .page-header {
        padding: max(188px, calc(146px + var(--safe-area-top))) 20px 46px !important;
    }

    .works-page .page-header h1 {
        font-size: clamp(3.1rem, 15vw, 4.4rem);
    }

    .works-page .page-header p {
        font-size: 1rem;
    }

    .works-page .works {
        padding: 42px 0 72px !important;
    }

    .works-page .works-filter {
        width: auto;
        max-width: calc(100vw - 32px);
        justify-content: flex-start;
        margin-bottom: 28px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .works-page .works-filter::-webkit-scrollbar {
        display: none;
    }

    .works-page .filter-btn {
        min-width: max-content;
        padding: 9px 16px;
        font-size: 0.95rem;
    }

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

    .works-page .desktop-only {
        display: block;
    }

    .works-page .work-item,
    .works-page .work-item.default-show,
    .works-page .works-expanded .work-item {
        border-radius: 18px;
    }

    .works-page .work-item img,
    .works-page .work-overlay {
        border-radius: 18px;
    }
}

@media (max-width: 480px) {
    .works-page .page-header {
        padding: max(184px, calc(142px + var(--safe-area-top))) 18px 42px !important;
    }

    .works-page .works {
        padding-top: 36px !important;
    }

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

    .works-page .works .container {
        padding: 0 14px;
    }

    .works-page .work-overlay {
        padding: 26px 12px 12px;
        font-size: 0.78rem;
    }
}

/* 服务内容 / 关于我们：沿用作品页后的浅纸色信息页风格，不新增页面文案 */
.services-page,
.about-page {
    --info-paper: var(--page-paper);
    --info-surface: var(--page-surface);
    --info-border: var(--page-border);
    --info-ink: var(--page-ink);
    --info-muted: var(--page-muted);
    background:
        radial-gradient(circle at 12% 10%, rgba(199, 208, 188, 0.38), transparent 30rem),
        radial-gradient(circle at 88% 22%, rgba(156, 168, 136, 0.16), transparent 24rem),
        linear-gradient(180deg, var(--info-paper), #fbfaf6 50%, var(--info-paper));
}

.services-page .service-types,
.services-page .service-process,
.services-page .commission-form,
.about-page .about,
.about-page .team,
.about-page .pet-section {
    background: transparent;
}

.services-page .service-types {
    padding: 66px 0 82px;
}

.services-page .service-process {
    padding: 74px 0 82px;
}

.services-page .commission-form {
    padding: 76px 0 98px;
}

.about-page .about {
    padding: 64px 0 76px;
}

.about-page .team {
    padding: 70px 0 78px;
}

.about-page .pet-section {
    padding: 72px 0 92px;
}

.services-page .section-title,
.about-page .section-title,
.about-page .about-text-center h2 {
    color: var(--info-ink);
    text-shadow: 0 12px 32px rgba(87, 98, 76, 0.08);
}

.services-page .section-title {
    margin-bottom: 20px;
}

.services-page .types-description,
.services-page .form-description,
.about-page .pet-description,
.about-page .about-text-center p {
    color: var(--info-muted);
}

.services-page .types-description,
.services-page .form-description,
.about-page .pet-description {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.85;
}

.services-page .types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
}

.services-page .type-category {
    position: relative;
    display: grid;
    grid-template-columns: minmax(150px, 0.24fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
    overflow: hidden;
    padding: 26px;
    border: 1px solid var(--info-border);
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(247, 246, 242, 0.72)),
        var(--info-surface);
    box-shadow: 0 22px 58px rgba(65, 76, 55, 0.09);
    backdrop-filter: blur(18px);
}

.services-page .type-category::before {
    content: '';
    position: absolute;
    inset: 18px auto 18px 0;
    width: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary-color), rgba(156, 168, 136, 0.18));
}

.services-page .type-category h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    padding: 22px 18px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.9), transparent 42%),
        linear-gradient(145deg, rgba(156, 168, 136, 0.18), rgba(255, 255, 255, 0.58));
    color: var(--info-ink);
    text-align: center;
}

.services-page .type-category h3::after {
    display: none;
}

.services-page .type-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.services-page .paws-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.services-page .type-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 248px;
    padding: 20px 16px 18px;
    border: 1px solid rgba(110, 124, 96, 0.12);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 249, 245, 0.64));
    box-shadow: 0 14px 34px rgba(35, 43, 31, 0.06);
}

.services-page .type-item:hover {
    border-color: rgba(156, 168, 136, 0.42);
    box-shadow: 0 20px 42px rgba(35, 43, 31, 0.1);
}

.services-page .type-image {
    width: min(174px, 100%);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto 16px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.9), transparent 48%),
        rgba(247, 246, 242, 0.72);
    box-shadow: 0 14px 32px rgba(35, 43, 31, 0.1);
}

.services-page .type-item h4 {
    margin: auto 0 0;
    color: var(--info-ink);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.services-page .type-image img {
    border-radius: 22px;
}

.services-page .process-steps {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    max-width: 1180px;
    margin: 40px auto 0;
    align-items: stretch;
}

.services-page .process-steps::before {
    display: none;
}

.services-page .process-steps .step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 192px;
    padding: 22px 20px;
    text-align: left;
    border: 1px solid var(--info-border);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(250, 249, 245, 0.72));
    box-shadow: 0 16px 42px rgba(65, 76, 55, 0.08);
}

.services-page .step:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(65, 76, 55, 0.12);
}

.services-page .step-number {
    width: auto;
    height: auto;
    min-width: 52px;
    padding: 7px 12px;
    line-height: 1.1;
    border-radius: 999px;
    background: #fff;
    color: var(--secondary-color);
    font-size: 0.95rem;
    border: 1px solid rgba(122, 136, 109, 0.18);
    box-shadow: 0 10px 22px rgba(65, 76, 55, 0.08);
    margin-bottom: 18px;
}

.services-page .step h3 {
    margin-bottom: 12px;
    color: var(--info-ink);
    font-size: 1.12rem;
    line-height: 1.35;
}

.services-page .step p {
    color: var(--info-muted);
    font-size: 0.94rem;
    line-height: 1.65;
}

.services-page .commission-time {
    box-shadow: 0 16px 34px rgba(65, 76, 55, 0.14);
}

.services-page .form-required-note {
    margin-bottom: 30px;
}

.services-page .commission-form-container,
.services-page .upload-section,
.services-page .form-section {
    border: 1px solid var(--info-border);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 48px rgba(65, 76, 55, 0.08);
}

.services-page .commission-form-container {
    grid-template-columns: minmax(300px, 0.88fr) minmax(0, 1.12fr);
    gap: 26px;
    padding: 28px;
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 246, 242, 0.68));
    backdrop-filter: blur(16px);
}

.services-page .form-left,
.services-page .form-right {
    min-width: 0;
}

.services-page .upload-section,
.services-page .form-section {
    margin-bottom: 22px;
    padding: 26px;
}

.services-page .upload-area {
    padding: 34px 28px;
    border-radius: 22px;
    border-color: rgba(122, 136, 109, 0.42);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.82), transparent 54%),
        rgba(247, 246, 242, 0.58);
}

.services-page .upload-icon {
    color: var(--secondary-color);
    filter: drop-shadow(0 10px 18px rgba(65, 76, 55, 0.12));
}

.services-page .form-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    color: var(--info-ink) !important;
}

.services-page .form-section h4::before {
    position: static;
    display: inline-block;
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--primary-color);
}

.services-page .form-group input,
.services-page .form-group select,
.services-page .form-group textarea {
    border: 1px solid rgba(110, 124, 96, 0.18);
    border-radius: 14px;
    background: rgba(247, 246, 242, 0.5);
}

.services-page .form-group input:focus,
.services-page .form-group select:focus,
.services-page .form-group textarea:focus {
    border-color: rgba(122, 136, 109, 0.52);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(156, 168, 136, 0.14);
}

.services-page .btn-primary,
.services-page .btn-secondary {
    min-height: 46px;
    border-radius: 999px;
}

.about-page .about-text-center {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
    gap: 30px;
    align-items: center;
    max-width: 1120px;
    padding: 28px;
    text-align: left;
    border: 1px solid var(--info-border);
    border-radius: 34px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(247, 246, 242, 0.7)),
        var(--info-surface);
    box-shadow: 0 22px 58px rgba(65, 76, 55, 0.09);
    backdrop-filter: blur(18px);
}

.about-page .about-text-center h2,
.about-page .about-text-center p {
    grid-column: 1;
}

.about-page .about-text-center h2 {
    margin-bottom: 0;
    font-size: clamp(2rem, 3.2vw, 3.1rem);
    padding-left: 22px;
    border-left: 1px solid rgba(122, 136, 109, 0.28);
}

.about-page .about-text-center p {
    align-self: start;
    font-size: 1.04rem;
    line-height: 1.85;
    padding-left: 22px;
    border-left: 1px solid rgba(122, 136, 109, 0.28);
}

.about-page .about-text-center .about-image {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
}

.about-page .about-image {
    border-radius: 30px;
    box-shadow: 0 22px 58px rgba(35, 43, 31, 0.16);
    aspect-ratio: 4 / 3;
    background: rgba(247, 246, 242, 0.7);
}

.about-page .about-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-page .team-grid,
.about-page .pet-grid {
    gap: 18px;
    margin-top: 36px;
}

.about-page .team-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.about-page .pet-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.about-page .team-member,
.about-page .pet-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 24px 18px;
    border: 1px solid var(--info-border);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(250, 249, 245, 0.68));
    box-shadow: 0 16px 42px rgba(65, 76, 55, 0.08);
}

.about-page .team-member::before,
.about-page .pet-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 64px;
    background: linear-gradient(180deg, rgba(156, 168, 136, 0.14), transparent);
    pointer-events: none;
}

.about-page .team-member:hover,
.about-page .pet-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(65, 76, 55, 0.12);
}

.about-page .member-image,
.about-page .pet-image {
    position: relative;
    z-index: 1;
    border-color: rgba(156, 168, 136, 0.28);
    box-shadow: 0 12px 28px rgba(35, 43, 31, 0.1);
}

.about-page .team-member h3,
.about-page .pet-card h3 {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
}

.about-page .member-role,
.about-page .pet-role {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(156, 168, 136, 0.13);
    color: var(--secondary-color);
    font-size: 0.88rem;
}

.about-page .team-member p:last-child,
.about-page .pet-desc {
    position: relative;
    z-index: 1;
    color: var(--info-muted);
    font-size: 0.93rem;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .services-page .service-types,
    .services-page .service-process,
    .services-page .commission-form,
    .about-page .about,
    .about-page .team,
    .about-page .pet-section {
        padding-top: 46px !important;
        padding-bottom: 58px !important;
    }

    .services-page .type-category {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px;
    }

    .services-page .type-category h3 {
        justify-content: flex-start;
        padding: 16px 18px;
    }

    .services-page .type-items,
    .services-page .paws-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .services-page .type-item {
        min-height: 0;
    }

    .services-page .type-image {
        width: min(142px, 100%);
        height: auto;
        aspect-ratio: 1;
    }

    .services-page .process-steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .services-page .process-steps::before {
        display: none;
    }

    .services-page .process-steps .step {
        min-height: 0;
        max-width: none;
    }

    .services-page .commission-form-container {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .about-page .about-text-center {
        grid-template-columns: 1fr;
        padding: 22px;
        text-align: center;
    }

    .about-page .about-text-center h2,
    .about-page .about-text-center p,
    .about-page .about-text-center .about-image {
        grid-column: 1;
        grid-row: auto;
    }

    .about-page .about-text-center h2,
    .about-page .about-text-center p {
        padding-left: 0;
        border-left: 0;
    }

    .about-page .about-text-center p {
        text-align: left;
    }

    .about-page .team-grid,
    .about-page .pet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (max-width: 480px) {
    .services-page .type-items,
    .services-page .paws-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-page .type-image {
        width: min(122px, 100%);
    }

    .about-page .team-grid {
        grid-template-columns: 1fr;
    }

    .about-page .pet-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-page .team-member,
    .about-page .pet-card {
        padding: 20px 14px;
    }

    .about-page .member-image,
    .about-page .pet-image {
        width: 118px;
        height: 118px;
    }
}

/* Source: css/08-pages-home-v2.css */
/* PSD-inspired isolated homepage preview */
.home-v2-page {
    --v2-olive: #5f7134;
    --v2-olive-soft: #9fa77f;
    --v2-olive-pale: #d7dcc8;
    --v2-red: #a33634;
    --v2-ink: #22221d;
    --v2-muted: #777768;
    --v2-paper: #fbfaf4;
    --v2-line: rgba(95, 113, 52, 0.28);
    --v2-shadow: 0 24px 46px rgba(60, 58, 47, 0.16);
    --v2-font-display-zh: "Puppy Noto Serif SC", "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
    --v2-font-display-en: "Puppy Cormorant Garamond", Cormorant, Garamond, Georgia, serif;
    --v2-font-ui: "Puppy Noto Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    background: #f6f6f0;
    color: var(--v2-ink);
    font-family: var(--v2-font-ui);
}

.home-v2-page button,
.home-v2-page input,
.home-v2-page select,
.home-v2-page textarea {
    font-family: var(--v2-font-ui);
}

.home-v2-page .container,
.home-v2-container {
    max-width: 1780px;
    margin: 0 auto;
    padding-left: clamp(22px, 4vw, 72px);
    padding-right: clamp(22px, 4vw, 72px);
}

.home-v2-main {
    overflow: hidden;
    background: #f6f6f0;
}

.home-v2-page header {
    background: rgba(255, 255, 251, 0.96);
    border-bottom: 5px solid var(--v2-olive-soft);
    box-shadow: 0 8px 20px rgba(60, 58, 47, 0.06);
    backdrop-filter: blur(4px);
}

.home-v2-page header.compact {
    background: rgba(255, 255, 251, 0.98);
    border-bottom-width: 4px;
}

.home-v2-page header .container {
    padding-top: 6px;
    padding-bottom: 6px;
}

.home-v2-page .logo img {
    width: clamp(172px, 12.5vw, 196px);
    height: auto;
    filter: none;
}

.home-v2-page header.compact .logo img {
    width: 166px;
    height: auto;
}

.home-v2-page header.compact nav ul li a {
    padding: 4px 4px 10px;
    font-size: clamp(14px, 1.05vw, 17px);
}

.home-v2-page nav ul {
    gap: clamp(18px, 3vw, 48px);
    align-items: center;
}

.home-v2-page nav ul li a {
    display: grid;
    gap: 4px;
    place-items: center;
    padding: 4px 4px 10px;
    border-radius: 0;
    color: rgba(44, 44, 38, 0.72);
    background: transparent;
    font-size: clamp(14px, 1.05vw, 17px);
    font-weight: 500;
    letter-spacing: 0.04em;
    box-shadow: none;
}

.home-v2-page nav ul li a::after {
    color: rgba(44, 44, 38, 0.46);
    font-family: var(--v2-font-display-en);
    font-size: 0.58em;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

html[lang="zh-CN"] .home-v2-page nav ul li:nth-child(1) a::after { content: "Home"; }
html[lang="zh-CN"] .home-v2-page nav ul li:nth-child(2) a::after { content: "Works"; }
html[lang="zh-CN"] .home-v2-page nav ul li:nth-child(3) a::after { content: "Services"; }
html[lang="zh-CN"] .home-v2-page nav ul li:nth-child(4) a::after { content: "About"; }
html[lang="en"] .home-v2-page nav ul li:nth-child(1) a::after { content: "首页"; }
html[lang="en"] .home-v2-page nav ul li:nth-child(2) a::after { content: "作品展示"; }
html[lang="en"] .home-v2-page nav ul li:nth-child(3) a::after { content: "服务内容"; }
html[lang="en"] .home-v2-page nav ul li:nth-child(4) a::after { content: "关于我们"; }

html[lang="en"] .home-v2-page nav ul li a::after {
    font-family: var(--v2-font-ui);
    font-weight: 500;
}

.home-v2-page nav ul li a:hover,
.home-v2-page nav ul li a.active {
    color: var(--v2-ink);
    background: transparent;
    transform: translateY(-1px);
    box-shadow: none;
}

.home-v2-page nav ul li a.active::before {
    content: "";
    order: 3;
    width: 54px;
    height: 5px;
    margin-top: 4px;
    background: var(--v2-olive);
}

.home-v2-page .language-switcher {
    margin-right: clamp(168px, 12vw, 194px);
}

.home-v2-page .language-toggle {
    min-width: 118px;
    border-radius: 0;
    border-color: rgba(95, 113, 52, 0.2);
    background: rgba(255, 255, 255, 0.72);
    color: rgba(44, 44, 38, 0.62);
    box-shadow: none;
}

.home-v2-header-cta {
    position: fixed;
    top: 13px;
    right: clamp(22px, 4vw, 72px);
    z-index: 102;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 5px;
    background: var(--v2-olive);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 20px rgba(95, 113, 52, 0.22);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.home-v2-header-cta::after {
    content: "→";
    font-size: 1.35em;
    line-height: 1;
}

.home-v2-header-cta:hover,
.home-v2-header-cta:focus-visible {
    background: #52642e;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(95, 113, 52, 0.3);
}

.home-v2-hero {
    position: relative;
    isolation: isolate;
    height: clamp(660px, 44.5vw, 790px);
    min-height: 0;
    padding: clamp(88px, 6.5vw, 112px) 0 20px;
    overflow: visible;
}

.home-v2-hero__bg,
.home-v2-notices__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center top;
    background-size: cover;
    opacity: 0.92;
}

.home-v2-hero__bg {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 251, 0.1), rgba(255, 255, 251, 0.3)),
        url("/assets/ui/home-v2/texture-hero.bb67709d9f9576f8.jpg");
}

.home-v2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 96px;
    z-index: -1;
    background: linear-gradient(180deg, rgba(246, 246, 240, 0), #f6f6f0 72%);
}

.home-v2-hero__layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(650px, 1.58fr);
    gap: clamp(24px, 2.2vw, 42px);
    align-items: center;
}

.home-v2-hero__copy {
    position: relative;
    min-height: 520px;
}

.home-v2-hero__paper {
    position: absolute;
    left: clamp(-42px, -2.4vw, -12px);
    top: clamp(82px, 6.6vw, 108px);
    width: min(420px, 96%);
    max-width: none;
    opacity: 0.96;
    filter: drop-shadow(0 24px 24px rgba(65, 61, 50, 0.14));
}

.home-v2-hero__grid-paper {
    position: absolute;
    left: clamp(-12px, 0.4vw, 14px);
    top: clamp(116px, 8.4vw, 142px);
    width: min(374px, 86%);
    opacity: 0.82;
    mix-blend-mode: multiply;
}

.home-v2-hero__hash {
    position: absolute;
    left: clamp(-6px, 1vw, 32px);
    top: 112px;
    width: clamp(62px, 4.8vw, 82px);
    transform: rotate(-3deg);
    filter: drop-shadow(0 12px 12px rgba(65, 61, 50, 0.12));
}

.home-v2-hero__sleepy {
    position: absolute;
    left: clamp(142px, 13vw, 218px);
    top: 0;
    width: clamp(132px, 11.5vw, 188px);
    transform: rotate(-8deg);
    filter: drop-shadow(0 16px 14px rgba(65, 61, 50, 0.16));
}

.home-v2-hero__text {
    position: relative;
    z-index: 2;
    width: min(610px, 100%);
    padding-top: clamp(196px, 14vw, 226px);
    padding-left: clamp(4px, 1vw, 18px);
}

.home-v2-hero__text h1 {
    margin: 0 0 20px;
    color: #171713;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(4.6rem, 5.65vw, 6.5rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.9;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.28);
}

.home-v2-hero__text h1 span {
    display: block;
}

html[lang="en"] .home-v2-hero__text h1 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(4rem, 4.7vw, 5.35rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 0.82;
}

.home-v2-hero__text h1::after {
    content: "";
    display: block;
    width: min(410px, 82vw);
    height: 2px;
    margin-top: 12px;
    background: var(--v2-ink);
}

.home-v2-hero__status {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin: 0;
    padding: 0 22px;
    background: var(--v2-olive);
    color: #f8f8ef;
    font-size: clamp(12px, 0.9vw, 14px);
    letter-spacing: 0.02em;
}

.home-v2-hero__actions {
    display: none;
    flex-wrap: wrap;
    gap: 14px;
}

.home-v2-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid var(--v2-olive);
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.home-v2-button--primary {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: #fff;
}

.home-v2-button--ghost {
    background: rgba(255, 255, 255, 0.72);
    color: var(--v2-olive);
}

.home-v2-button:hover,
.home-v2-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(60, 58, 47, 0.14);
}

.home-v2-hero__art {
    position: relative;
    min-height: 0;
    padding: 0;
    aspect-ratio: 1600 / 1091;
}

.home-v2-hero__art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/assets/ui/home-v2/polaroid-frame.835e4d85523fe23d.png") center / 100% 100% no-repeat;
    filter: drop-shadow(0 20px 24px rgba(65, 61, 50, 0.13));
}

.home-v2-hero__clip {
    position: absolute;
    left: 15%;
    top: 0.8%;
    z-index: 6;
    width: 14.7%;
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.22));
}

.home-v2-hero__scissors {
    position: absolute;
    left: clamp(-122px, -7.6vw, -72px);
    top: -4%;
    z-index: 4;
    width: clamp(70px, 7.4vw, 116px);
    height: 94%;
    object-fit: contain;
    opacity: 0.92;
}

.home-v2-hero__banner {
    position: absolute;
    top: 4%;
    right: 8.5%;
    z-index: 7;
    width: 44.5%;
    min-width: 0;
    transform: none;
}

.home-v2-hero__banner img {
    display: block;
    width: 100%;
    transform: rotate(2.5deg);
    transform-origin: center;
    filter: drop-shadow(0 8px 10px rgba(65, 61, 50, 0.1));
}

.home-v2-hero__banner span {
    position: absolute;
    inset: 10% 10% 0 18%;
    display: grid;
    place-items: center;
    color: #796f55;
    font-family: var(--v2-font-ui);
    font-size: clamp(15px, 1.4vw, 22.5px);
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

html[lang="en"] .home-v2-hero__banner span {
    font-size: clamp(13px, 1.25vw, 20px);
    letter-spacing: 0.035em;
}

.home-v2-hero__quote {
    position: absolute;
    z-index: 7;
    width: 11.25%;
    filter: drop-shadow(0 8px 6px rgba(65, 61, 50, 0.1));
}

.home-v2-hero__quote--left {
    left: -0.5%;
    top: 12.8%;
    transform: rotate(-9deg);
}

.home-v2-hero__quote--right {
    right: 0.8%;
    bottom: 10.2%;
    transform: rotate(8deg);
}

.home-v2-polaroids {
    position: absolute;
    inset: 21.6% 9.5% 15.6% 9.2%;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: rotate(0.4deg);
}

.home-v2-polaroid {
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: clamp(4px, 0.45vw, 7px);
    background: #fff;
    box-shadow: 0 12px 18px rgba(65, 61, 50, 0.12);
    transform: none;
}

.home-v2-polaroid__image {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.home-v2-polaroid__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    filter: saturate(0.94) contrast(1.02);
}

.home-v2-polaroid--black-white img { transform: scale(1.07) translateY(-1.4%); }
.home-v2-polaroid--yellow img { transform: scale(1.08) translateY(-4.2%); }
.home-v2-polaroid--brown img { transform: scale(1.05); }
.home-v2-polaroid--blue-white img { transform: scale(1.08) translateY(3.2%); }

.home-v2-hero__caption {
    position: absolute;
    right: 15%;
    bottom: 8.8%;
    z-index: 8;
    min-width: 0;
    width: 50%;
    margin: 0;
    padding: clamp(9px, 1vw, 15px) clamp(14px, 1.8vw, 26px);
    border: 1px solid rgba(44, 44, 38, 0.82);
    border-radius: 0 0 0 18px;
    background: rgba(255, 255, 255, 0.92);
    color: rgba(44, 44, 38, 0.62);
    font-size: clamp(14px, 1.35vw, 22px);
    text-align: center;
    box-shadow: 0 10px 20px rgba(65, 61, 50, 0.1);
}

.home-v2-notices {
    position: relative;
    isolation: isolate;
    padding: clamp(54px, 4.2vw, 70px) 0 clamp(38px, 2.8vw, 48px);
    overflow: hidden;
}

.home-v2-notices__bg {
    background-image:
        linear-gradient(180deg, rgba(246, 246, 240, 0.78), rgba(246, 246, 240, 0.78)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg");
}

.home-v2-notices::before {
    content: "";
    position: absolute;
    left: 2%;
    top: 2%;
    z-index: -1;
    width: min(760px, 65vw);
    height: min(520px, 50vw);
    background: url("/assets/ui/home-v2/paw-pattern.8b5c2bb97a9d892c.png") center / contain no-repeat;
    opacity: 0.26;
}

.home-v2-notices::after {
    content: "";
    display: block;
    width: min(1540px, calc(100% - 44px));
    height: 6px;
    margin: clamp(36px, 3.6vw, 54px) auto 0;
    background: repeating-linear-gradient(90deg, rgba(95, 113, 52, 0.42) 0 180px, transparent 180px 210px);
}

.home-v2-heading {
    position: relative;
    display: inline-grid;
    gap: 0;
    margin-bottom: clamp(24px, 2.6vw, 38px);
    padding: 6px 16px 6px 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 18px rgba(65, 61, 50, 0.06);
}

.home-v2-heading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: var(--v2-red);
}

.home-v2-heading span {
    color: var(--v2-red);
    font-family: var(--v2-font-display-en);
    font-size: clamp(15px, 1.25vw, 20px);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
}

.home-v2-heading h2 {
    margin: 0;
    color: #282821;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(2.7rem, 4vw, 4.2rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

html[lang="en"] .home-v2-heading h2 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(3rem, 4.1vw, 4.35rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 0.9;
}

.home-v2-notice-board {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.92fr) minmax(150px, 0.42fr);
    gap: clamp(14px, 1.3vw, 22px);
    align-items: stretch;
}

.home-v2-notice-card,
.home-v2-notice-more {
    position: relative;
    min-width: 0;
    border: 1px solid rgba(95, 113, 52, 0.38);
    background: rgba(255, 255, 252, 0.88);
    color: var(--v2-ink);
    box-shadow: 0 16px 28px rgba(65, 61, 50, 0.09);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-v2-notice-card {
    overflow: hidden;
}

.home-v2-notice-card--lead {
    display: grid;
    grid-template-columns: minmax(122px, 0.36fr) minmax(0, 1fr);
    min-height: clamp(292px, 21vw, 334px);
    border-left: 7px solid var(--v2-red);
}

.home-v2-notice-card__tape {
    position: absolute;
    left: 54%;
    top: -2px;
    z-index: 2;
    width: clamp(72px, 6vw, 104px);
    height: 24px;
    background: rgba(214, 203, 165, 0.55);
    box-shadow: 0 3px 8px rgba(65, 61, 50, 0.1);
    transform: translateX(-50%) rotate(-2deg);
    pointer-events: none;
}

.home-v2-notice-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 28px 18px;
    border-right: 1px dashed rgba(95, 113, 52, 0.38);
    background:
        linear-gradient(135deg, rgba(159, 167, 127, 0.16), rgba(255, 255, 255, 0.42)),
        repeating-linear-gradient(0deg, transparent 0 20px, rgba(95, 113, 52, 0.07) 20px 21px);
    text-align: center;
}

.home-v2-notice-date small,
.home-v2-notice-date span {
    color: rgba(44, 44, 38, 0.54);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.home-v2-notice-date strong {
    color: var(--v2-olive);
    font-family: var(--v2-font-display-en);
    font-size: clamp(3.25rem, 4.8vw, 5.1rem);
    font-weight: 600;
    letter-spacing: -0.055em;
    line-height: 0.88;
    white-space: nowrap;
}

.home-v2-notice-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    padding: clamp(30px, 3vw, 48px);
}

.home-v2-notice-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    color: rgba(44, 44, 38, 0.5);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.home-v2-notice-tag {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid rgba(163, 54, 52, 0.3);
    background: rgba(163, 54, 52, 0.08);
    color: var(--v2-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-v2-notice-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--v2-olive);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.home-v2-notice-state i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--v2-olive);
    box-shadow: 0 0 0 4px rgba(95, 113, 52, 0.12);
}

.home-v2-notice-title {
    display: block;
    margin-top: 22px;
    color: #282821;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.65rem, 2.35vw, 2.55rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

html[lang="en"] .home-v2-notice-title {
    font-family: var(--v2-font-display-en);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1;
}

.home-v2-notice-summary {
    display: -webkit-box;
    overflow: hidden;
    max-width: 58ch;
    margin-top: 16px;
    color: rgba(44, 44, 38, 0.58);
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-v2-notice-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: var(--v2-olive);
    font-size: 13px;
    font-weight: 800;
}

.home-v2-notice-link i {
    font-size: 18px;
    font-style: normal;
    transition: transform 0.25s ease;
}

.home-v2-notice-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.3vw, 22px);
    min-width: 0;
}

.home-v2-notice-card--compact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: clamp(20px, 1.8vw, 28px);
    border-left: 5px solid var(--v2-olive-soft);
}

.home-v2-notice-card--compact .home-v2-notice-meta {
    justify-content: space-between;
    gap: 8px;
}

.home-v2-notice-card--compact .home-v2-notice-title {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 14px;
    padding-right: 30px;
    font-size: clamp(1.05rem, 1.42vw, 1.45rem);
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

html[lang="en"] .home-v2-notice-card--compact .home-v2-notice-title {
    font-size: clamp(1.3rem, 1.65vw, 1.7rem);
    line-height: 1.04;
}

.home-v2-notice-card__arrow {
    position: absolute;
    right: 20px;
    bottom: 16px;
    color: var(--v2-olive);
    font-size: 20px;
    font-style: normal;
}

.home-v2-notice-more {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 0;
    padding: 22px 12px;
    border-style: dashed;
    border-color: rgba(95, 113, 52, 0.52);
    background: rgba(255, 255, 255, 0.54);
    text-align: center;
}

.home-v2-notice-more__icon {
    display: grid;
    place-items: center;
    width: clamp(52px, 4vw, 66px);
    height: clamp(52px, 4vw, 66px);
    border-radius: 50%;
    background: var(--v2-olive);
    box-shadow: 0 12px 20px rgba(95, 113, 52, 0.2);
}

.home-v2-notice-more__icon img {
    width: 44%;
    height: auto;
}

.home-v2-notice-more > span:not(.home-v2-notice-more__icon) {
    color: rgba(44, 44, 38, 0.58);
    font-size: clamp(13px, 1vw, 16px);
}

.home-v2-notice-more small {
    color: rgba(44, 44, 38, 0.5);
    font-family: var(--v2-font-display-en);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.home-v2-notice-card:hover,
.home-v2-notice-card:focus-visible,
.home-v2-notice-more:hover,
.home-v2-notice-more:focus-visible {
    border-color: rgba(95, 113, 52, 0.72);
    box-shadow: 0 22px 38px rgba(65, 61, 50, 0.14);
    transform: translateY(-5px);
}

.home-v2-notice-card:hover .home-v2-notice-link i,
.home-v2-notice-card:focus-visible .home-v2-notice-link i {
    transform: translateX(4px);
}

.home-v2-page .home-v2-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(46px, 4vw, 64px) 0 16px;
    border-top: 1px solid rgba(48, 52, 43, 0.16);
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.23), transparent 25rem),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        #a8ad8a;
    color: #30342b;
}

.home-v2-page .home-v2-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 14px;
    background:
        radial-gradient(ellipse at 10px -2px, transparent 10px, rgba(247, 246, 240, 0.58) 11px 13px, transparent 14px) 0 0 / 34px 14px repeat-x;
    opacity: 0.72;
    pointer-events: none;
}

.home-v2-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(54px, 10vw, 160px);
    align-items: center;
}

.home-v2-footer__brand,
.home-v2-footer__column {
    min-width: 0;
}

.home-v2-footer__logo {
    display: inline-block;
    margin-bottom: 12px;
}

.home-v2-footer__logo img {
    display: block;
    width: clamp(218px, 18vw, 286px);
    height: auto;
    filter: none;
}

.home-v2-footer__brand p {
    margin: 4px 0;
    color: #3b4035;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.045em;
}

.home-v2-footer__column h2 {
    margin: 0 0 17px;
    color: #2f332b;
    font-size: 18px;
    font-weight: 750;
    letter-spacing: 0.075em;
}

.home-v2-footer__contact {
    min-width: min(330px, 36vw);
    text-align: right;
}

.home-v2-page .home-v2-footer .social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 0;
}

.home-v2-page .home-v2-footer .social-links a {
    width: 44px;
    height: 44px;
    margin-left: 0;
    border: 1px solid rgba(70, 75, 62, 0.2);
    border-radius: 5px;
    background: rgba(249, 246, 236, 0.9);
    color: #353a31;
    box-shadow: 0 7px 14px rgba(54, 59, 48, 0.12);
    transform: rotate(-1deg);
}

.home-v2-page .home-v2-footer .social-links a:nth-child(even) {
    transform: rotate(1deg);
}

.home-v2-page .home-v2-footer .social-links a:hover,
.home-v2-page .home-v2-footer .social-links a:focus-visible {
    border-color: rgba(48, 52, 43, 0.44);
    background: #fffdf6;
    color: #20241e;
    box-shadow: 0 10px 20px rgba(54, 59, 48, 0.18);
    transform: translateY(-3px) rotate(0);
}

.home-v2-page .home-v2-footer .social-links a:focus-visible {
    outline: 3px solid rgba(48, 52, 43, 0.28);
    outline-offset: 3px;
}

.home-v2-footer__bottom {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: clamp(28px, 3vw, 42px);
    padding-top: 14px;
    border-top: 1px solid rgba(48, 52, 43, 0.2);
    color: #41473b;
    font-size: 12px;
}

.home-v2-footer__bottom p {
    margin: 0;
}

@media (max-width: 1240px) {
    .home-v2-page .language-switcher {
        margin-right: 0;
    }

    .home-v2-header-cta {
        display: none;
    }

    .home-v2-hero__layout {
        grid-template-columns: minmax(280px, 0.72fr) minmax(560px, 1.58fr);
        gap: 18px;
    }

    .home-v2-hero__copy {
        min-height: 480px;
    }

    .home-v2-hero {
        height: clamp(620px, 53vw, 670px);
    }

    .home-v2-hero__scissors {
        left: -76px;
        opacity: 0.62;
    }
}

@media (max-width: 920px) {
    .home-v2-page header .container {
        gap: 12px;
    }

    .home-v2-page .logo img {
        width: 176px;
    }

    .home-v2-page nav ul {
        gap: 14px;
    }

    .home-v2-page nav ul li a {
        font-size: 14px;
    }

    .home-v2-hero {
        height: auto;
        min-height: auto;
        padding-top: max(142px, calc(112px + var(--safe-area-top)));
        padding-bottom: 10px;
    }

    .home-v2-hero__layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-v2-hero__paper {
        width: min(440px, 95%);
    }

    .home-v2-hero__grid-paper {
        width: min(390px, 84%);
    }

    .home-v2-hero__text {
        padding-top: 230px;
    }

    .home-v2-hero__text h1 {
        font-size: clamp(4.2rem, 12.8vw, 5.9rem);
    }

    .home-v2-hero__art {
        width: min(760px, 100%);
        margin: 0 auto;
    }

    .home-v2-polaroids {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .home-v2-hero__banner {
        right: 8px;
        width: min(430px, 72%);
        min-width: 280px;
    }

    .home-v2-hero__caption {
        right: 15%;
        bottom: 8.8%;
        min-width: 0;
        width: 50%;
    }

    .home-v2-notice-board {
        grid-template-columns: minmax(0, 1fr) minmax(150px, 0.42fr);
    }

    .home-v2-notice-card--lead {
        grid-column: 1 / -1;
    }

    .home-v2-notice-stack,
    .home-v2-notice-more {
        min-height: 260px;
    }

    .home-v2-footer__grid {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 36px 48px;
    }

    .home-v2-footer__brand {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .home-v2-page header .container {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .home-v2-page .logo {
        min-width: 0;
    }

    .home-v2-page .language-switcher {
        margin-left: auto;
    }

    .home-v2-page .logo img {
        width: 150px;
    }

    .home-v2-page header.compact .logo img {
        width: 144px;
    }

    .home-v2-page header.compact nav ul li a {
        padding-bottom: 6px;
        font-size: 14px;
    }

    .home-v2-page nav {
        order: 3;
        flex: 0 0 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .home-v2-page nav ul {
        box-sizing: border-box;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        gap: 14px;
        padding-bottom: 4px;
    }

    .home-v2-page nav ul li a {
        min-width: 68px;
        padding-bottom: 6px;
    }

    .home-v2-page nav ul li a.active::before {
        width: 38px;
        height: 4px;
    }

    .home-v2-page .language-toggle {
        min-width: auto;
        padding: 7px 10px;
    }

    .home-v2-hero__copy {
        min-height: 450px;
    }

    .home-v2-hero__sleepy {
        left: auto;
        right: 2%;
        top: 20px;
    }

    .home-v2-hero__hash {
        top: 126px;
    }

    .home-v2-hero__text {
        padding-top: 196px;
        padding-left: 0;
    }

    .home-v2-hero__text h1 {
        font-size: clamp(3.55rem, 15vw, 4.25rem);
        letter-spacing: -0.045em;
        line-height: 0.92;
    }

    html[lang="en"] .home-v2-hero__text h1 {
        font-size: clamp(3.15rem, 13.6vw, 3.75rem);
        letter-spacing: -0.03em;
        line-height: 0.86;
    }

    .home-v2-hero__status {
        min-height: 38px;
        padding: 0 18px;
    }

    .home-v2-hero__actions {
        display: flex;
        margin-top: 14px;
        gap: 10px;
    }

    .home-v2-button {
        min-height: 42px;
        padding: 0 18px;
        font-size: 14px;
    }

    .home-v2-hero__clip,
    .home-v2-hero__scissors {
        display: none;
    }

    .home-v2-hero__banner {
        top: 4%;
        left: auto;
        right: 8.5%;
        width: 44.5%;
        min-width: 0;
        transform: none;
    }

    .home-v2-hero__banner img {
        transform: rotate(2deg);
    }

    .home-v2-hero__banner span {
        font-size: clamp(9px, 3vw, 15px);
    }

    html[lang="en"] .home-v2-hero__banner span {
        inset: 10% 8% 0 16%;
        font-size: 8px;
        letter-spacing: 0.01em;
    }

    .home-v2-polaroids {
        gap: 0.35%;
    }

    .home-v2-hero__quote {
        width: 11.25%;
    }

    .home-v2-hero__quote--left {
        left: -0.5%;
        top: 12.8%;
    }

    .home-v2-hero__quote--right {
        right: 0.8%;
        bottom: 10.2%;
    }

    .home-v2-hero__caption {
        padding: 6px 8px;
        font-size: 10px;
    }

    .home-v2-notices {
        padding-top: 46px;
    }

    .home-v2-notice-board {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .home-v2-notice-card--lead {
        grid-column: auto;
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .home-v2-notice-date {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 18px 20px;
        border-right: 0;
        border-bottom: 1px dashed rgba(95, 113, 52, 0.38);
        text-align: left;
    }

    .home-v2-notice-date strong {
        order: -1;
        font-size: 3rem;
    }

    .home-v2-notice-date small,
    .home-v2-notice-date span {
        max-width: 80px;
        line-height: 1.25;
    }

    .home-v2-notice-card__content {
        padding: 24px 22px 26px;
    }

    .home-v2-notice-title {
        margin-top: 18px;
        font-size: 1.6rem;
    }

    html[lang="en"] .home-v2-notice-title {
        font-size: 2rem;
    }

    .home-v2-notice-summary {
        margin-top: 12px;
        font-size: 13px;
        -webkit-line-clamp: 4;
    }

    .home-v2-notice-link {
        margin-top: 18px;
    }

    .home-v2-notice-stack,
    .home-v2-notice-more {
        min-height: 0;
    }

    .home-v2-notice-card--compact {
        min-height: 138px;
        padding: 20px;
    }

    .home-v2-notice-more {
        grid-template-columns: auto minmax(0, max-content);
        gap: 4px 14px;
        min-height: 128px;
        padding: 18px 22px;
        text-align: left;
    }

    .home-v2-notice-more__icon {
        grid-row: 1 / 3;
        width: 54px;
        height: 54px;
    }

    .home-v2-notice-more > span:not(.home-v2-notice-more__icon),
    .home-v2-notice-more small {
        justify-self: start;
    }

    .home-v2-footer__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-v2-footer__brand {
        grid-column: auto;
    }

    .home-v2-footer__contact {
        min-width: 0;
        text-align: left;
    }

    .home-v2-page .home-v2-footer .social-links {
        justify-content: flex-start;
    }

    .home-v2-footer__bottom {
        flex-direction: column;
        gap: 8px;
    }
}

/* Source: css/09-pages-services-v2.css */
/* PSD-referenced services page. Functional form selectors and field IDs remain unchanged. */
.services-v2-page {
    background: #f6f6f0;
}

.services-v2-main {
    overflow: hidden;
    background:
        linear-gradient(rgba(246, 246, 240, 0.72), rgba(246, 246, 240, 0.72)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg") center top / 1920px auto repeat-y;
    color: var(--v2-ink);
}

.services-v2-page .home-v2-container {
    width: 100%;
}

.services-v2-hero {
    position: relative;
    min-height: clamp(430px, 31vw, 530px);
    padding: clamp(150px, 11vw, 184px) 0 clamp(64px, 5vw, 86px);
    background:
        linear-gradient(180deg, rgba(246, 246, 240, 0.24), rgba(246, 246, 240, 0.78)),
        url("/assets/ui/home-v2/texture-hero.bb67709d9f9576f8.jpg") center / cover no-repeat;
}

.services-v2-title-card {
    position: relative;
    display: grid;
    place-items: center;
    width: min(820px, calc(100% - 40px));
    min-height: clamp(245px, 19vw, 320px);
    margin: 0 auto;
    filter: drop-shadow(0 22px 30px rgba(65, 61, 50, 0.14));
}

.services-v2-title-card__paper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0.94;
}

.services-v2-title-card__hash {
    position: absolute;
    left: clamp(-16px, 1.5vw, 18px);
    top: 13%;
    z-index: 2;
    width: clamp(78px, 7vw, 112px);
    transform: rotate(-4deg);
    filter: drop-shadow(0 10px 12px rgba(65, 61, 50, 0.14));
}

.services-v2-title-card__copy {
    position: relative;
    z-index: 1;
    padding: 30px 62px 22px 90px;
    text-align: center;
}

.services-v2-title-card h1 {
    margin: 0;
    color: #27251f;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(4.2rem, 6.3vw, 6.4rem);
    font-weight: 800;
    letter-spacing: -0.065em;
    line-height: 0.95;
}

html[lang="en"] .services-v2-title-card h1 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(4.6rem, 6.7vw, 6.8rem);
    font-weight: 600;
    letter-spacing: -0.045em;
}

.services-v2-title-card__copy p {
    margin: 18px 0 0;
    color: rgba(44, 44, 38, 0.58);
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.05rem, 1.55vw, 1.45rem);
    font-weight: 600;
    letter-spacing: 0.16em;
}

.services-v2-hero__lead {
    max-width: 680px;
    margin: 22px auto 0;
    color: rgba(44, 44, 38, 0.56);
    font-size: 14px;
    line-height: 1.8;
    text-align: center;
}

.services-v2-section {
    position: relative;
    padding: clamp(42px, 4.2vw, 68px) 0;
    background: transparent;
}

.services-v2-section + .services-v2-section {
    padding-top: clamp(26px, 2.4vw, 42px);
}

.services-v2-section-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: min(430px, calc(100% - 12px));
    min-height: 78px;
    margin: 0 0 18px;
    padding: 12px 38px 12px 86px;
    background: url("/assets/ui/services/section-label-paper.eec7398a9896c811.webp") center / 100% 100% no-repeat;
    filter: drop-shadow(0 10px 14px rgba(65, 61, 50, 0.1));
}

.services-v2-section-label > img {
    position: absolute;
    left: 15px;
    top: 50%;
    width: 58px;
    transform: translateY(-50%) rotate(-4deg);
}

.services-v2-section-label > div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px 12px;
}

.services-v2-section-label .section-title {
    width: auto;
    margin: 0;
    color: #292720;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.85rem, 2.4vw, 2.55rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1;
}

.services-v2-section-label .section-title::after {
    display: none;
}

html[lang="en"] .services-v2-section-label .section-title {
    font-family: var(--v2-font-display-en);
    font-size: clamp(2.2rem, 2.8vw, 3rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.services-v2-section-label span {
    color: rgba(44, 44, 38, 0.56);
    font-family: var(--v2-font-display-en);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.services-v2-page .types-description,
.services-v2-page .form-description {
    max-width: 760px;
    margin: 0 0 22px 20px;
    color: rgba(44, 44, 38, 0.56);
    font-size: 13px;
    line-height: 1.8;
    text-align: left;
}

.services-v2-paper-panel {
    position: relative;
    width: 100%;
    isolation: isolate;
}

.services-v2-paper-panel--types {
    min-height: 350px;
    padding: clamp(48px, 4.4vw, 72px) clamp(28px, 3vw, 48px) clamp(46px, 4vw, 66px);
    background: url("/assets/ui/services/torn-paper-types.02b3a3130885d0cc.webp") center / 100% 100% no-repeat;
}

.services-v2-type-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(14px, 1.35vw, 22px);
}

.services-v2-type-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: clamp(280px, 21vw, 330px);
    padding: clamp(13px, 1.2vw, 18px);
    border: 1px solid rgba(95, 113, 52, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 253, 0.82);
    color: var(--v2-ink);
    box-shadow: 0 12px 24px rgba(65, 61, 50, 0.08);
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.services-v2-type-card__image {
    display: grid;
    place-items: center;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

.services-v2-type-card__image img {
    display: block;
    width: 100%;
    height: clamp(150px, 13.5vw, 205px);
    object-fit: contain;
    filter: saturate(0.9) contrast(1.02);
    transition: transform 0.3s ease;
}

.services-v2-type-card strong {
    margin-top: 8px;
    color: #292720;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.2rem, 1.6vw, 1.55rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

html[lang="en"] .services-v2-type-card strong {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.45rem, 1.85vw, 1.8rem);
    font-weight: 600;
}

.services-v2-type-card small {
    display: -webkit-box;
    overflow: hidden;
    min-height: 3.2em;
    margin-top: 9px;
    color: rgba(44, 44, 38, 0.54);
    font-size: 11px;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.services-v2-type-card:hover,
.services-v2-type-card:focus-visible {
    border-color: rgba(95, 113, 52, 0.58);
    box-shadow: 0 18px 30px rgba(65, 61, 50, 0.13);
    transform: translateY(-6px) rotate(-0.4deg);
}

.services-v2-type-card:hover img,
.services-v2-type-card:focus-visible img {
    transform: scale(1.035);
}

.services-v2-paper-panel--process {
    min-height: 330px;
    padding: clamp(54px, 4.8vw, 76px) clamp(30px, 3vw, 50px) clamp(56px, 4.5vw, 72px);
    background: url("/assets/ui/services/torn-paper-process.320ae448b6cfe014.webp") center / 100% 100% no-repeat;
}

.services-v2-page .process-steps {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: clamp(10px, 1.05vw, 17px);
    max-width: none;
    margin: 0;
}

.services-v2-page .process-steps::before {
    display: none;
}

.services-v2-page .process-steps .step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: clamp(270px, 20vw, 320px);
    padding: clamp(40px, 3.5vw, 55px) clamp(15px, 1.4vw, 22px) 24px;
    border: 0;
    border-radius: 0;
    background: url("/assets/ui/services/process-note.d668776868d79dd7.webp") center / 100% 100% no-repeat;
    box-shadow: none;
    text-align: center;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.services-v2-page .process-steps .step:nth-child(1) { transform: rotate(-1.3deg); }
.services-v2-page .process-steps .step:nth-child(2) { transform: rotate(0.8deg); }
.services-v2-page .process-steps .step:nth-child(3) { transform: rotate(-0.5deg); }
.services-v2-page .process-steps .step:nth-child(4) { transform: rotate(1deg); }
.services-v2-page .process-steps .step:nth-child(5) { transform: rotate(-0.8deg); }
.services-v2-page .process-steps .step:nth-child(6) { transform: rotate(0.5deg); }
.services-v2-page .process-steps .step:nth-child(7) { transform: rotate(-1deg); }

.services-v2-page .process-steps .step:hover {
    transform: translateY(-6px) rotate(0);
    filter: drop-shadow(0 15px 16px rgba(65, 61, 50, 0.16));
}

.services-v2-page .step-number {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 9px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--v2-olive-soft);
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.75rem, 2.25vw, 2rem);
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.services-v2-page .step h3 {
    margin: 5px 0 0;
    color: #3a372e;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.3rem, 1.85vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.25;
}

html[lang="en"] .services-v2-page .step h3 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.35rem, 1.7vw, 1.55rem);
    font-weight: 600;
}

.services-v2-page .step p {
    display: block;
    overflow: visible;
    margin: 15px 0 0;
    color: rgba(58, 55, 46, 0.64);
    font-size: clamp(12px, 1.05vw, 14px);
    line-height: 1.65;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

html[lang="en"] .services-v2-page .step p {
    font-size: clamp(11px, 0.88vw, 12.5px);
}

.services-v2-process-sticker {
    position: absolute;
    right: 0;
    bottom: -28px;
    z-index: 2;
    width: clamp(96px, 9vw, 142px);
    transform: rotate(6deg);
    filter: drop-shadow(0 12px 14px rgba(65, 61, 50, 0.16));
}

.services-v2-page .commission-form {
    padding-bottom: clamp(68px, 6vw, 100px);
}

.services-v2-page .commission-form-container {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(280px, 0.82fr);
    gap: clamp(22px, 2.2vw, 36px);
    align-items: start;
    max-width: none;
    margin: 28px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.services-v2-page #commissionFormStatus {
    grid-column: 1 / -1;
}

.commission-application-board {
    position: relative;
    min-width: 0;
    padding: clamp(28px, 2.6vw, 42px);
    border: clamp(8px, 0.8vw, 13px) solid #8c7452;
    border-radius: 12px;
    background:
        repeating-linear-gradient(0deg, rgba(95, 113, 52, 0.045) 0 1px, transparent 1px 34px),
        rgba(255, 255, 252, 0.92);
    box-shadow: 0 24px 42px rgba(65, 61, 50, 0.15), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.commission-application-board::before {
    content: "";
    position: absolute;
    left: -34px;
    top: 13%;
    width: 48px;
    height: 178px;
    border: 7px double rgba(107, 93, 69, 0.78);
    border-radius: 24px 8px 8px 24px;
    background: linear-gradient(90deg, #8a7759, #d0c4a7 42%, #8f7c5e 74%, #6e6049);
    box-shadow: 0 10px 18px rgba(65, 61, 50, 0.2);
}

.commission-application-board__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
    padding: 0 4px 15px 18px;
    border-bottom: 1px solid rgba(95, 113, 52, 0.28);
}

.commission-application-board__heading h3 {
    margin: 0;
    color: #302e27;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.6rem, 2.1vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -0.03em;
}

html[lang="en"] .commission-application-board__heading h3 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(2rem, 2.5vw, 2.6rem);
    font-weight: 600;
}

.services-v2-page .form-required-note {
    margin: 0;
    color: rgba(163, 54, 52, 0.72);
    font-size: 11px;
    text-align: right;
}

.commission-application-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.6vw, 24px);
    align-items: start;
}

.services-v2-page .form-left,
.services-v2-page .form-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    min-width: 0;
}

.services-v2-page .upload-section,
.services-v2-page .form-section {
    margin: 0;
    padding: clamp(18px, 1.6vw, 24px);
    border: 1px solid rgba(95, 113, 52, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 10px 18px rgba(65, 61, 50, 0.05);
}

.services-v2-page .upload-section h3,
.services-v2-page .form-section h4 {
    margin: 0 0 15px;
    color: #353229;
    font-family: var(--v2-font-ui);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.services-v2-page .form-section h4::before {
    background: var(--v2-olive-soft);
}

.services-v2-page .upload-area {
    min-height: 230px;
    padding: 24px 18px;
    border: 1px dashed rgba(95, 113, 52, 0.42);
    border-radius: 8px;
    background: rgba(247, 247, 240, 0.7);
}

.services-v2-page .upload-area:hover,
.services-v2-page .upload-area--dragover {
    border-color: var(--v2-olive);
    background: rgba(215, 220, 200, 0.25);
}

.services-v2-page .upload-icon {
    color: var(--v2-olive);
    font-size: 38px;
}

.services-v2-page .upload-area p {
    font-size: 13px;
}

.services-v2-page .upload-info,
.services-v2-page .upload-tip {
    font-size: 10px;
    line-height: 1.55;
}

.services-v2-page .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.services-v2-page .form-row--single {
    grid-template-columns: minmax(0, 1fr);
}

.services-v2-page .form-row + .form-row,
.services-v2-page .form-row + .form-group,
.services-v2-page .form-group + .form-group {
    margin-top: 13px;
}

.services-v2-page .form-group {
    min-width: 0;
    margin: 0;
}

.services-v2-page .form-group label {
    display: block;
    margin-bottom: 7px;
    color: rgba(44, 44, 38, 0.7);
    font-family: var(--v2-font-ui);
    font-size: 11px;
    font-weight: 700;
}

.services-v2-page .form-group input,
.services-v2-page .form-group select,
.services-v2-page .form-group textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(95, 113, 52, 0.2);
    border-radius: 7px;
    background: rgba(252, 252, 248, 0.86);
    color: var(--v2-ink);
    font-family: var(--v2-font-ui);
    font-size: 12px;
    box-shadow: inset 0 1px 2px rgba(65, 61, 50, 0.04);
}

.services-v2-page .form-group input:focus,
.services-v2-page .form-group select:focus,
.services-v2-page .form-group textarea:focus {
    border-color: var(--v2-olive);
    box-shadow: 0 0 0 3px rgba(95, 113, 52, 0.12);
}

.services-v2-page .form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.services-v2-page .commission-repair-card {
    background: linear-gradient(135deg, rgba(244, 242, 227, 0.88), rgba(255, 255, 255, 0.72));
}

.services-v2-page .commission-repair-option {
    display: flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    margin: 0;
    color: rgba(44, 44, 38, 0.82);
    font-family: var(--v2-font-ui);
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.services-v2-page .commission-repair-option input {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 0;
    accent-color: var(--v2-olive);
}

.commission-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.services-v2-page .commission-privacy-consent {
    padding: 16px 18px;
    border: 1px solid rgba(95, 113, 52, 0.22);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.66);
}

.services-v2-page .commission-privacy-consent label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(44, 44, 38, 0.78);
    font-family: var(--v2-font-ui);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.65;
    cursor: pointer;
}

.services-v2-page .commission-privacy-consent input {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--v2-olive);
}

.services-v2-page .commission-privacy-consent input:focus-visible {
    outline: 2px solid var(--v2-olive);
    outline-offset: 3px;
}

.services-v2-page .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin: 0;
}

.services-v2-page .btn-primary,
.services-v2-page .btn-secondary {
    min-width: 118px;
    min-height: 44px;
    border-radius: 6px;
    font-family: var(--v2-font-ui);
    font-size: 13px;
    font-weight: 800;
}

.services-v2-page .btn-primary {
    border-color: var(--v2-olive);
    background: var(--v2-olive);
    color: #fff;
}

.services-v2-page .btn-secondary {
    border-color: rgba(95, 113, 52, 0.28);
    background: rgba(255, 255, 255, 0.7);
    color: rgba(44, 44, 38, 0.65);
}

.commission-notes {
    position: sticky;
    top: 118px;
    min-width: 0;
    padding: clamp(30px, 2.5vw, 42px) clamp(22px, 2vw, 32px);
    border: 1px solid rgba(95, 113, 52, 0.28);
    background:
        repeating-linear-gradient(0deg, transparent 0 31px, rgba(95, 113, 52, 0.06) 31px 32px),
        rgba(255, 255, 252, 0.91);
    box-shadow: 0 20px 34px rgba(65, 61, 50, 0.11);
}

.commission-notes__tape {
    position: absolute;
    left: 50%;
    top: -12px;
    width: 108px;
    height: 30px;
    background: rgba(214, 203, 165, 0.54);
    transform: translateX(-50%) rotate(2deg);
    box-shadow: 0 3px 8px rgba(65, 61, 50, 0.08);
}

.commission-notes__eyebrow {
    margin: 0;
    color: var(--v2-olive);
    font-family: var(--v2-font-display-en);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.commission-notes h3 {
    margin: 3px 0 18px;
    color: #302e27;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.9rem, 2.4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
}

html[lang="en"] .commission-notes h3 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(2.2rem, 2.7vw, 2.8rem);
    font-weight: 600;
}

.services-v2-page .commission-time-notice {
    margin: 0 0 20px;
}

.services-v2-page .commission-time {
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 4px;
    background: rgba(95, 113, 52, 0.1);
    color: var(--v2-olive);
    font-size: 11px;
    line-height: 1.5;
}

.commission-notes ul {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.commission-notes li {
    position: relative;
    padding-left: 25px;
    color: rgba(44, 44, 38, 0.65);
    font-size: 12px;
    line-height: 1.75;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.commission-notes li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--v2-olive);
    font-size: 16px;
    font-weight: 900;
}

.commission-notes__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 52px;
    margin-top: 28px;
    padding: 0 18px;
    background: var(--v2-olive);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 22px rgba(95, 113, 52, 0.22);
}

.commission-notes__cta i {
    font-size: 20px;
    font-style: normal;
}

@media (max-width: 1180px) {
    .services-v2-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .services-v2-page .process-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .services-v2-page .process-steps .step {
        min-height: 270px;
    }

    .services-v2-page .commission-form-container {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .commission-application-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .services-v2-page .commission-form-container {
        grid-template-columns: 1fr;
    }

    .commission-notes {
        position: relative;
        top: auto;
        order: -1;
    }

    .services-v2-page .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-v2-process-sticker {
        right: 2%;
        bottom: -18px;
    }
}

@media (max-width: 640px) {
    .services-v2-hero {
        min-height: auto;
        padding: max(176px, calc(156px + var(--safe-area-top))) 0 48px;
    }

    .services-v2-title-card {
        width: 100%;
        min-height: 210px;
    }

    .services-v2-title-card__hash {
        left: 3px;
        width: 70px;
    }

    .services-v2-title-card__copy {
        padding: 24px 24px 18px 58px;
    }

    .services-v2-title-card h1 {
        font-size: clamp(3.3rem, 17vw, 4rem);
        letter-spacing: -0.055em;
    }

    html[lang="en"] .services-v2-title-card h1 {
        font-size: clamp(3.8rem, 19vw, 4.5rem);
    }

    .services-v2-title-card__copy p {
        margin-top: 12px;
        font-size: 0.86rem;
        letter-spacing: 0.1em;
    }

    .services-v2-hero__lead {
        margin-top: 12px;
        font-size: 12px;
    }

    .services-v2-section {
        padding: 38px 0;
    }

    .services-v2-section-label {
        min-width: 0;
        width: min(100%, 346px);
        min-height: 70px;
        padding: 10px 18px 10px 72px;
    }

    .services-v2-section-label > img {
        left: 12px;
        width: 50px;
    }

    .services-v2-section-label > div {
        gap: 5px 9px;
    }

    .services-v2-section-label .section-title {
        font-size: 1.72rem;
    }

    html[lang="en"] .services-v2-section-label .section-title {
        font-size: 2rem;
    }

    .services-v2-section-label span {
        font-size: 10px;
    }

    .services-v2-page .types-description,
    .services-v2-page .form-description {
        margin-left: 4px;
        font-size: 12px;
    }

    .services-v2-paper-panel--types,
    .services-v2-paper-panel--process {
        padding: 42px 16px 46px;
        background-size: auto 100%;
    }

    .services-v2-type-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .services-v2-type-card {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        min-height: 126px;
        padding: 11px 14px;
        text-align: left;
    }

    .services-v2-type-card__image {
        grid-row: 1 / 3;
        width: 94px;
        height: 100px;
    }

    .services-v2-type-card__image img {
        height: 96px;
    }

    .services-v2-type-card strong {
        align-self: end;
        margin: 0;
        font-size: 1.28rem;
    }

    html[lang="en"] .services-v2-type-card strong {
        font-size: 1.5rem;
    }

    .services-v2-type-card small {
        align-self: start;
        min-height: 0;
        margin-top: 6px;
        font-size: 10px;
    }

    .services-v2-page .process-steps {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .services-v2-page .process-steps .step,
    .services-v2-page .process-steps .step:nth-child(n) {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        min-height: 180px;
        padding: 34px 30px 26px;
        text-align: left;
        transform: rotate(0);
    }

    .services-v2-page .step-number {
        grid-row: 1 / 3;
        margin: 0;
        font-size: 1.7rem;
    }

    .services-v2-page .step h3 {
        margin: 0;
        font-size: 1.12rem;
    }

    html[lang="en"] .services-v2-page .step h3 {
        font-size: 1.3rem;
    }

    .services-v2-page .step p {
        margin-top: 8px;
        font-size: clamp(11px, 3.2vw, 12px);
        line-height: 1.6;
    }

    .services-v2-process-sticker {
        display: none;
    }

    .services-v2-page .commission-form-container {
        margin-top: 20px;
    }

    .commission-application-board {
        padding: 18px 14px;
        border-width: 7px;
    }

    .commission-application-board::before {
        display: none;
    }

    .commission-application-board__heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        padding-left: 5px;
    }

    .commission-application-board__heading h3 {
        font-size: 1.55rem;
    }

    html[lang="en"] .commission-application-board__heading h3 {
        font-size: 1.9rem;
    }

    .services-v2-page .form-required-note {
        text-align: left;
    }

    .services-v2-page .upload-section,
    .services-v2-page .form-section {
        padding: 17px 14px;
    }

    .services-v2-page .form-row {
        grid-template-columns: 1fr;
    }

    .services-v2-page .form-row .form-group + .form-group {
        margin-top: 13px;
    }

    .services-v2-page .form-actions {
        display: grid;
        grid-template-columns: 0.72fr 1.28fr;
    }

    .services-v2-page .btn-primary,
    .services-v2-page .btn-secondary {
        min-width: 0;
        width: 100%;
    }

    .commission-notes {
        padding: 30px 22px 24px;
    }

    .commission-notes h3 {
        font-size: 1.9rem;
    }

    html[lang="en"] .commission-notes h3 {
        font-size: 2.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .services-v2-type-card,
    .services-v2-type-card img,
    .services-v2-page .process-steps .step {
        transition: none;
    }
}

/* Confirmed PSD-aligned service layout revision. */
.services-v2-hero {
    min-height: clamp(330px, 27vw, 430px);
    padding: clamp(118px, 8.5vw, 145px) 0 clamp(42px, 3.8vw, 60px);
}

.services-v2-title-card {
    width: min(620px, calc(100% - 72px));
    min-height: 0;
    aspect-ratio: 1783 / 721;
}

.services-v2-title-card__paper {
    object-fit: contain;
    opacity: 1;
}

.services-v2-title-card__hash {
    left: -4.2%;
    top: 12.9%;
    width: 12.1%;
    transform: none;
}

.services-v2-title-card__copy {
    padding: 5% 8% 0 12%;
}

.services-v2-title-card h1 {
    font-size: clamp(4.3rem, 5.2vw, 5.2rem);
    letter-spacing: -0.06em;
    line-height: 0.95;
}

html[lang="en"] .services-v2-title-card h1 {
    font-size: clamp(4.5rem, 5.4vw, 5.4rem);
}

.services-v2-title-card__copy p {
    margin-top: 14px;
    font-size: clamp(0.88rem, 1.05vw, 1.05rem);
    letter-spacing: 0.14em;
}

.services-v2-section-label {
    z-index: 2;
    width: fit-content;
    max-width: calc(100% - 12px);
    min-width: 0;
    min-height: 76px;
    margin: 0 0 -18px;
    padding: 12px 34px 12px 82px;
}

.services-v2-section-label > div {
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

.services-v2-section-label .section-title {
    font-size: clamp(1.75rem, 2.15vw, 2.25rem);
}

html[lang="en"] .services-v2-section-label .section-title {
    font-size: clamp(2rem, 2.4vw, 2.55rem);
}

.services-v2-section-label span {
    font-size: 12px;
}

.services-v2-paper-panel--types {
    min-height: 330px;
    padding: clamp(52px, 4.4vw, 68px) clamp(28px, 3vw, 48px) clamp(42px, 3.7vw, 58px);
}

.services-v2-type-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.services-v2-type-card {
    min-height: clamp(245px, 19vw, 285px);
    padding: clamp(12px, 1.1vw, 17px);
}

.services-v2-type-card__image img {
    height: clamp(175px, 15vw, 220px);
}

.services-v2-type-card strong {
    margin: 8px 0 2px;
    font-size: clamp(1.35rem, 1.75vw, 1.7rem);
}

html[lang="en"] .services-v2-type-card strong {
    font-size: clamp(1.55rem, 1.95vw, 1.95rem);
}

.services-v2-page .process-steps {
    justify-items: stretch;
}

.services-v2-page .process-steps .step,
.services-v2-page .process-steps .step:nth-child(n) {
    width: auto;
    max-width: none;
    margin: 0;
    grid-column: auto !important;
}

.commission-entry {
    margin-top: 28px;
}

.services-v2-page .commission-form-container {
    display: block;
    width: 100%;
    margin: 28px 0 0;
    scroll-margin-top: 118px;
}

.services-v2-page .commission-form-container[hidden] {
    display: none;
}

.commission-application-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.5vw, 24px);
    align-items: stretch;
}

.commission-application-grid__full,
.services-v2-page #commissionFormStatus {
    grid-column: 1 / -1;
}

.commission-application-grid > .upload-section,
.commission-application-grid > .form-section {
    height: 100%;
}

.commission-grid-card--appearance {
    display: flex;
    flex-direction: column;
}

.commission-grid-card--appearance .form-row:last-child {
    margin-top: auto;
    padding-top: 13px;
}

.commission-grid-card--textarea {
    display: flex;
    flex-direction: column;
}

.commission-grid-card--textarea .form-group {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.commission-grid-card--textarea textarea {
    flex: 1;
    min-height: 155px;
}

.commission-notes {
    position: relative;
    top: auto;
    display: grid;
    grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.65fr) minmax(210px, 0.62fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
    width: 100%;
    padding: clamp(30px, 2.5vw, 42px) clamp(26px, 3vw, 48px);
}

.commission-notes__intro {
    min-width: 0;
}

.commission-notes h3 {
    margin-bottom: 14px;
}

.services-v2-page .commission-time-notice {
    margin: 0;
}

.commission-notes ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 26px;
    margin: 0;
}

.commission-notes li {
    margin: 0;
}

.commission-notes__cta {
    width: 100%;
    min-height: 52px;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.commission-notes__cta i {
    transition: transform 0.2s ease;
}

.commission-notes__cta[aria-expanded="true"] i {
    transform: rotate(90deg);
}

.commission-entry--expanded .commission-notes {
    box-shadow: 0 12px 24px rgba(65, 61, 50, 0.08);
}

@media (max-width: 1280px) and (min-width: 901px) {
    .services-v2-page .process-steps {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .services-v2-page .process-steps .step,
    .services-v2-page .process-steps .step:nth-child(n) {
        grid-column: span 2 !important;
        min-height: 270px;
    }

    .services-v2-page .process-steps .step:nth-child(5) {
        grid-column: 2 / span 2 !important;
    }

    .commission-notes {
        grid-template-columns: minmax(210px, 0.7fr) minmax(0, 1.5fr);
    }

    .commission-notes__cta {
        grid-column: 1 / -1;
        width: min(360px, 100%);
        justify-self: end;
    }
}

@media (max-width: 980px) {
    .services-v2-type-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .commission-notes ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) and (min-width: 641px) {
    .services-v2-page .process-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .services-v2-page .process-steps .step,
    .services-v2-page .process-steps .step:nth-child(n) {
        grid-column: auto !important;
    }

    .services-v2-page .process-steps .step:nth-child(7) {
        grid-column: 1 / -1 !important;
        justify-self: center;
        width: calc(50% - 8px);
    }

    .commission-notes {
        grid-template-columns: minmax(190px, 0.65fr) minmax(0, 1.35fr);
    }

    .commission-notes__cta {
        grid-column: 1 / -1;
        width: min(360px, 100%);
        justify-self: end;
    }
}

@media (max-width: 760px) {
    .commission-application-grid {
        grid-template-columns: 1fr;
    }

    .commission-application-grid__full,
    .services-v2-page #commissionFormStatus {
        grid-column: auto;
    }

    .commission-notes {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .commission-notes ul {
        grid-template-columns: 1fr;
    }

    .commission-notes__cta {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .services-v2-hero {
        min-height: auto;
        padding: max(168px, calc(148px + var(--safe-area-top))) 0 40px;
    }

    .services-v2-title-card {
        width: calc(100% - 42px);
        min-height: 0;
    }

    .services-v2-title-card__hash {
        left: -4.2%;
        top: 12.9%;
        width: 12.1%;
    }

    .services-v2-title-card__copy {
        padding: 5% 8% 0 12%;
    }

    .services-v2-title-card h1 {
        font-size: clamp(2.85rem, 14vw, 3.45rem);
    }

    html[lang="en"] .services-v2-title-card h1 {
        font-size: clamp(3rem, 15vw, 3.7rem);
    }

    .services-v2-title-card__copy p {
        margin-top: 8px;
        font-size: 0.68rem;
        letter-spacing: 0.09em;
    }

    .services-v2-section-label {
        width: fit-content;
        max-width: calc(100% - 8px);
        min-height: 64px;
        margin-bottom: -15px;
        padding: 9px 18px 9px 66px;
    }

    .services-v2-section-label > img {
        left: 10px;
        width: 46px;
    }

    .services-v2-section-label .section-title {
        font-size: 1.48rem;
    }

    html[lang="en"] .services-v2-section-label .section-title {
        font-size: 1.7rem;
    }

    html[lang="en"] .services-v2-section-label--form {
        padding-right: 10px;
        padding-left: clamp(48px, 15vw, 58px);
    }

    html[lang="en"] .services-v2-section-label--form > img {
        width: clamp(36px, 10vw, 40px);
    }

    html[lang="en"] .services-v2-section-label--form > div {
        gap: 4px;
    }

    html[lang="en"] .services-v2-section-label--form .section-title {
        font-size: clamp(1.1rem, 6vw, 1.5rem);
    }

    html[lang="en"] .services-v2-section-label--form span {
        font-size: clamp(6px, 1.8vw, 8px);
        letter-spacing: 0.05em;
    }

    .services-v2-section-label span {
        font-size: 8px;
    }

    .services-v2-paper-panel--types,
    .services-v2-paper-panel--process {
        padding-top: 38px;
    }

    .services-v2-type-grid {
        grid-template-columns: 1fr;
    }

    .services-v2-type-card {
        grid-template-columns: 100px minmax(0, 1fr);
        grid-template-rows: 1fr;
        min-height: 116px;
    }

    .services-v2-type-card__image {
        grid-row: auto;
        width: 92px;
        height: 94px;
    }

    .services-v2-type-card__image img {
        height: 92px;
    }

    .services-v2-type-card strong {
        align-self: center;
        margin: 0;
    }

    .services-v2-page .process-steps .step,
    .services-v2-page .process-steps .step:nth-child(n) {
        width: auto;
        grid-column: auto !important;
    }

    .commission-entry {
        margin-top: 20px;
    }

    .commission-notes {
        padding: 28px 20px 22px;
    }

    .services-v2-page .commission-form-container {
        margin-top: 20px;
        scroll-margin-top: 170px;
    }
}

@media (max-width: 360px) {
    html[lang="en"] .services-v2-section-label {
        padding-right: 8px;
        padding-left: 48px;
    }

    html[lang="en"] .services-v2-section-label > img {
        width: 36px;
    }

    html[lang="en"] .services-v2-section-label > div {
        gap: 4px;
    }

    html[lang="en"] .services-v2-section-label .section-title {
        font-size: 1.2rem;
    }

    html[lang="en"] .services-v2-section-label span {
        font-size: 6px;
        letter-spacing: 0.05em;
    }
}

/* Source: css/10-pages-about-v2.css */
/* PSD-referenced About page. Copy and profile photos remain live HTML content. */
.about-v2-page {
    --about-ink: #373333;
    --about-ink-soft: rgba(55, 51, 51, 0.68);
    --about-brown: #794c31;
    --about-paper: #f2ecdd;
    --about-handwritten: "FZMWJW--GB1-0", "FZ MiaoWu", "Puppy LXGW WenKai", "LXGW WenKai", "Kaiti SC", STKaiti, KaiTi, cursive;
    background: #f4f3ef;
}

.about-v2-main {
    overflow: clip;
    background-color: #f4f3ef;
    background-image:
        linear-gradient(rgba(247, 246, 241, 0.16), rgba(247, 246, 241, 0.16)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg");
    background-position: center top, center top;
    background-size: auto, 1920px auto;
    background-repeat: repeat, repeat-y;
    color: var(--about-ink);
}

.about-v2-main .home-v2-container {
    width: 100%;
    max-width: 1440px;
    padding-right: clamp(22px, 4vw, 72px);
    padding-left: clamp(22px, 4vw, 72px);
}

/* The title uses the PSD paper assets at their original 1783:721 ratio. */
.about-v2-hero {
    position: relative;
    min-height: 0;
    padding: 122px 0 0;
    background: transparent;
}

.about-v2-title-card.services-v2-title-card {
    width: min(550px, calc(100% - 40px));
    min-height: 0;
    aspect-ratio: 1783 / 721;
    filter: drop-shadow(0 12px 16px rgba(65, 61, 50, 0.13));
}

.about-v2-title-card .services-v2-title-card__paper {
    object-fit: contain;
    opacity: 1;
}

.about-v2-title-card .services-v2-title-card__hash {
    left: -4.3%;
    top: 12.9%;
    width: 12.1%;
    transform: none;
    filter: drop-shadow(0 6px 8px rgba(65, 61, 50, 0.12));
}

.about-v2-title-card__sticker {
    position: absolute;
    right: -9.3%;
    bottom: -4.6%;
    z-index: 3;
    width: 23.5%;
    transform: rotate(5deg);
    filter: drop-shadow(0 10px 10px rgba(65, 61, 50, 0.17));
}

.about-v2-title-card .services-v2-title-card__copy {
    width: 100%;
    padding: 34px 54px 20px;
    text-align: center;
}

.about-v2-title-card.services-v2-title-card h1 {
    color: #352d26;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(3rem, 6.42vw, 5.775rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.about-v2-title-card .services-v2-title-card__copy p {
    max-width: 340px;
    margin: 10px auto 0;
    color: rgba(55, 51, 51, 0.66);
    font-family: var(--v2-font-ui);
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1.35;
}

html[lang="en"] .about-v2-title-card.services-v2-title-card h1 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(3.3rem, 5.8vw, 5.2rem);
    font-weight: 600;
    letter-spacing: -0.025em;
}

html[lang="en"] .about-v2-title-card .services-v2-title-card__copy p {
    max-width: 360px;
    font-size: clamp(10px, 0.86vw, 12px);
    letter-spacing: 0.05em;
}

/* Studio illustration and four-paragraph introduction. */
.about-v2-studio {
    padding: 48px 0 42px;
}

.about-v2-studio__layout {
    display: grid;
    grid-template-columns: minmax(0, 703fr) minmax(0, 613fr);
    gap: 28px;
    align-items: center;
}

.about-v2-studio__visual {
    position: relative;
    width: 100%;
    max-width: 703px;
    aspect-ratio: 2281 / 1648;
    margin: 0;
    filter: drop-shadow(0 14px 16px rgba(65, 61, 50, 0.17));
}

.about-v2-studio__illustration {
    position: absolute;
    left: 9.9%;
    top: 4.9%;
    width: 83.4%;
    height: 83.1%;
    object-fit: cover;
}

.about-v2-studio__frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.about-v2-studio__label {
    position: absolute;
    right: -1%;
    bottom: -2.8%;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 36%;
    min-height: 70px;
    padding: 10px 14px 10px 62px;
    background: url("/assets/ui/services/section-label-paper.eec7398a9896c811.webp") center / 100% 100% no-repeat;
    filter: drop-shadow(0 7px 8px rgba(65, 61, 50, 0.12));
}

.about-v2-studio__label > img {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 42px;
    transform: translateY(-50%) rotate(-4deg);
    filter: sepia(0.45) saturate(0.8) hue-rotate(20deg);
}

.about-v2-studio__label h2 {
    margin: 0;
    color: #373333;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.12rem, 1.62vw, 1.45rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1.08;
}

html[lang="en"] .about-v2-studio__label {
    width: 43%;
    padding-left: 54px;
}

html[lang="en"] .about-v2-studio__label h2 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1rem, 1.45vw, 1.3rem);
    font-weight: 600;
}

.about-v2-studio__copy {
    display: grid;
    align-content: center;
    gap: clamp(13px, 1.3vw, 19px);
    min-width: 0;
    padding: 14px 0;
}

.about-v2-studio__copy p {
    margin: 0;
    color: var(--about-ink);
    font-family: var(--about-handwritten);
    font-size: clamp(19px, 1.72vw, 25px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.42;
}

html[lang="en"] .about-v2-studio__copy {
    gap: 14px;
}

html[lang="en"] .about-v2-studio__copy p {
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", var(--v2-font-ui);
    font-size: clamp(16px, 1.45vw, 21px);
    letter-spacing: 0.01em;
    line-height: 1.55;
}

/* Shared torn-paper roster board. */
.about-v2-roster {
    position: relative;
    padding: 36px 0 42px;
}

.about-v2-roster--pets {
    padding-top: 24px;
    padding-bottom: 76px;
}

.about-v2-pets-intro {
    max-width: 900px;
    margin: 0 auto 36px;
    color: #242424;
    font-family: var(--about-handwritten);
    font-size: clamp(20px, 1.8vw, 26px);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    text-align: center;
}

html[lang="en"] .about-v2-pets-intro {
    max-width: 960px;
    font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", var(--v2-font-ui);
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.5;
}

.about-v2-paper-panel {
    position: relative;
    min-height: 410px;
    padding: 70px 44px 26px;
    background: url("/assets/ui/services/torn-paper-types.02b3a3130885d0cc.webp") center / 100% 100% no-repeat;
    isolation: isolate;
}

.about-v2-paper-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(222, 210, 181, 0.42);
    -webkit-mask: url("/assets/ui/services/torn-paper-types.02b3a3130885d0cc.webp") center / 100% 100% no-repeat;
    mask: url("/assets/ui/services/torn-paper-types.02b3a3130885d0cc.webp") center / 100% 100% no-repeat;
    pointer-events: none;
}

.about-v2-board-label {
    position: absolute;
    left: 24px;
    top: -10px;
    z-index: 5;
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: min(285px, 43%);
    min-height: 66px;
    padding: 13px 22px 13px 66px;
    background: url("/assets/ui/services/section-label-paper.eec7398a9896c811.webp") center / 100% 100% no-repeat;
    filter: drop-shadow(0 8px 9px rgba(65, 61, 50, 0.12));
}

.about-v2-board-label > img {
    position: absolute;
    left: 28px;
    top: 50%;
    width: 32px;
    transform: translateY(-50%);
    filter: sepia(0.25) saturate(0.72) hue-rotate(18deg);
}

.about-v2-board-label h2 {
    margin: 0;
    color: #3e3931;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.35rem, 2.15vw, 1.92rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}

.about-v2-board-label span {
    color: rgba(55, 51, 51, 0.68);
    font-family: var(--v2-font-ui);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.about-v2-board-label--pets h2 {
    color: var(--about-brown);
    font-weight: 500;
}

html[lang="en"] .about-v2-board-label {
    width: min(330px, 50%);
}

html[lang="en"] .about-v2-board-label h2 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.55rem, 2.25vw, 2.05rem);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.about-v2-board-decoration {
    position: absolute;
    z-index: 6;
    display: block;
    pointer-events: none;
}

.about-v2-board-decoration--pin {
    left: 30px;
    top: -12px;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(133, 90, 31, 0.55);
    border-radius: 50%;
    background: radial-gradient(circle at 36% 30%, #fff1b8 0 18%, #b77a20 48%, #744816 100%);
    box-shadow: 0 4px 5px rgba(65, 61, 50, 0.28);
}

.about-v2-board-decoration--pin::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 2px;
    height: 18px;
    background: rgba(85, 68, 45, 0.62);
    transform: rotate(-8deg);
    transform-origin: top;
}

.about-v2-board-decoration--clip-left,
.about-v2-board-decoration--clip-right {
    top: 63px;
    width: 31px;
    height: 60px;
    border: 3px solid #918b80;
    border-bottom-color: transparent;
    border-radius: 18px 18px 10px 10px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 2px 3px rgba(65, 61, 50, 0.2);
}

.about-v2-board-decoration--clip-left::after,
.about-v2-board-decoration--clip-right::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 5px;
    width: 14px;
    height: 45px;
    border: 2px solid rgba(145, 139, 128, 0.8);
    border-bottom-color: transparent;
    border-radius: 12px 12px 7px 7px;
}

.about-v2-board-decoration--clip-left {
    left: 67px;
    transform: rotate(38deg);
}

.about-v2-board-decoration--clip-right {
    right: 68px;
    transform: rotate(38deg) scaleX(-1);
}

.about-v2-board-decoration--star {
    left: -11px;
    top: 46%;
    width: 52px;
    aspect-ratio: 1;
    background: #d7a536;
    clip-path: polygon(50% 0%, 62% 35%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 35%);
    filter: drop-shadow(0 4px 4px rgba(65, 61, 50, 0.25));
}

.about-v2-board-decoration--star::after {
    content: "";
    position: absolute;
    inset: 8px;
    background: #f4d47c;
    clip-path: inherit;
}

.about-v2-board-decoration--tape {
    right: -25px;
    top: 42%;
    width: 82px;
    height: 42px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 14% 86%, rgba(255, 255, 255, 0.16)),
        rgba(203, 177, 126, 0.48);
    box-shadow: 0 2px 5px rgba(65, 61, 50, 0.1);
    transform: rotate(-4deg);
}

.about-v2-card-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 1.05vw, 16px);
    align-items: stretch;
}

.about-v2-card {
    min-width: 0;
    min-height: 296px;
}

.about-v2-card__trigger {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 296px;
    flex-direction: column;
    padding: 9px 9px 15px;
    border: 1px solid rgba(119, 108, 88, 0.2);
    border-radius: 2px;
    background:
        linear-gradient(rgba(250, 248, 241, 0.86), rgba(244, 240, 229, 0.9)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg") center / 760px auto;
    color: var(--about-ink);
    box-shadow: 0 4px 9px rgba(65, 61, 50, 0.14), inset 0 0 0 4px rgba(255, 255, 255, 0.32);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.about-v2-card__trigger::after {
    content: "+";
    position: absolute;
    right: 10px;
    bottom: 9px;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border: 1px solid rgba(95, 113, 52, 0.24);
    border-radius: 50%;
    color: rgba(95, 113, 52, 0.62);
    font-family: var(--v2-font-ui);
    font-size: 15px;
    line-height: 1;
}

.about-v2-card__trigger:hover {
    border-color: rgba(95, 113, 52, 0.34);
    box-shadow: 0 7px 13px rgba(65, 61, 50, 0.17), inset 0 0 0 4px rgba(255, 255, 255, 0.38);
}

.about-v2-card__trigger:focus-visible {
    outline: 3px solid rgba(95, 113, 52, 0.48);
    outline-offset: 4px;
}

.about-v2-card__image {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    height: clamp(164px, 13.6vw, 194px);
    flex: 0 0 auto;
    border: 4px solid rgba(255, 255, 253, 0.88);
    border-radius: 1px;
    background: #ebe8de;
    box-shadow: 0 5px 10px rgba(65, 61, 50, 0.11), inset 0 0 0 1px rgba(95, 113, 52, 0.08);
}

.about-v2-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-v2-card__copy {
    display: flex;
    min-height: 76px;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 20px 0;
}

.about-v2-card__name-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.about-v2-card__name-row::after {
    content: "";
    width: 17px;
    height: 17px;
    background: url("/assets/ui/services/section-label-paw.5acec7299edf701a.webp") center / contain no-repeat;
    filter: sepia(0.38) saturate(0.72) hue-rotate(18deg);
    opacity: 0.64;
}

.about-v2-card__name {
    color: #4a4339;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.12rem, 1.45vw, 1.38rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.about-v2-card__role {
    display: block;
    margin-top: 8px;
    color: rgba(74, 67, 57, 0.9);
    font-family: var(--v2-font-display-zh);
    font-size: clamp(11px, 0.98vw, 14px);
    font-weight: 500;
    line-height: 1.32;
}

.about-v2-card__description[hidden] {
    display: none;
}

html[lang="en"] .about-v2-card__copy {
    min-height: 94px;
    padding-right: 17px;
    padding-left: 17px;
}

html[lang="en"] .about-v2-card__name {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.35rem, 1.72vw, 1.62rem);
    font-weight: 600;
}

html[lang="en"] .about-v2-card__role {
    font-family: var(--v2-font-ui);
    font-size: clamp(10px, 0.84vw, 12px);
    line-height: 1.35;
}

/* Accessible profile detail drawer. */
body.about-details-open {
    overflow: hidden;
}

.about-v2-details[hidden] {
    display: none;
}

.about-v2-details {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    justify-items: end;
}

.about-v2-details__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(32, 31, 27, 0.54);
    opacity: 0;
    cursor: default;
    transition: opacity 0.24s ease;
}

.about-v2-details__sheet {
    position: relative;
    z-index: 1;
    width: min(460px, 100%);
    height: 100%;
    overflow-y: auto;
    padding: 66px 40px 44px;
    background:
        linear-gradient(rgba(248, 245, 234, 0.76), rgba(242, 236, 219, 0.88)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg") center top / 1120px auto repeat-y;
    box-shadow: -20px 0 42px rgba(32, 31, 27, 0.22);
    transform: translateX(100%);
    transition: transform 0.28s ease;
}

.about-v2-details.is-open .about-v2-details__backdrop {
    opacity: 1;
}

.about-v2-details.is-open .about-v2-details__sheet {
    transform: translateX(0);
}

.about-v2-details__close {
    position: absolute;
    right: 24px;
    top: 22px;
    display: grid;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(55, 51, 51, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 251, 0.72);
    color: #373333;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}

.about-v2-details__close:hover,
.about-v2-details__close:focus-visible {
    border-color: rgba(95, 113, 52, 0.48);
    outline: none;
    background: rgba(255, 255, 251, 0.96);
}

.about-v2-details__media {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 9px solid rgba(255, 255, 253, 0.9);
    background: #e7e3d8;
    box-shadow: 0 13px 22px rgba(65, 61, 50, 0.16);
}

.about-v2-details__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-v2-details__copy {
    padding: 28px 4px 0;
}

.about-v2-details__copy h2 {
    margin: 0;
    color: #352d26;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(2rem, 3.2vw, 2.7rem);
    font-weight: 700;
    line-height: 1.1;
}

.about-v2-details__role {
    display: inline-block;
    margin: 12px 0 0;
    color: #5f7134;
    font-family: var(--v2-font-display-zh);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.about-v2-details__description {
    margin: 24px 0 0;
    color: rgba(55, 51, 51, 0.84);
    font-family: var(--v2-font-ui);
    font-size: 15px;
    line-height: 1.9;
    white-space: pre-line;
}

html[lang="en"] .about-v2-details__copy h2 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(2.25rem, 3.5vw, 3rem);
    font-weight: 600;
}

html[lang="en"] .about-v2-details__role,
html[lang="en"] .about-v2-details__description {
    font-family: var(--v2-font-ui);
}

/* Preserve the five-card board on desktop; below it, scroll the same portrait cards. */
@media (max-width: 1180px) {
    .about-v2-studio__layout {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 24px;
    }

    .about-v2-paper-panel {
        min-height: 412px;
        padding-right: 30px;
        padding-left: 38px;
    }

    .about-v2-card-grid {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        padding: 4px 4px 14px;
        overscroll-behavior-inline: contain;
        scroll-padding-left: 4px;
        scroll-snap-type: x mandatory;
        scrollbar-color: rgba(95, 113, 52, 0.36) transparent;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .about-v2-card-grid::-webkit-scrollbar {
        height: 7px;
    }

    .about-v2-card-grid::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(95, 113, 52, 0.34);
    }

    .about-v2-card {
        flex: 0 0 clamp(216px, 25vw, 240px);
        scroll-snap-align: start;
    }

    .about-v2-card__image {
        height: 195px;
    }
}

@media (max-width: 900px) {
    .about-v2-studio {
        padding-top: 44px;
    }

    .about-v2-studio__layout {
        grid-template-columns: 1fr;
        gap: 52px;
    }

    .about-v2-studio__visual {
        max-width: 703px;
        margin: 0 auto;
    }

    .about-v2-studio__copy {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 12px;
    }

    .about-v2-studio__copy p {
        font-size: clamp(19px, 3vw, 24px);
        line-height: 1.5;
    }

    .about-v2-roster--team {
        padding-top: 40px;
    }
}

@media (max-width: 640px) {
    .about-v2-main .home-v2-container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .about-v2-hero {
        padding: max(164px, calc(144px + var(--safe-area-top))) 0 16px;
    }

    .about-v2-title-card.services-v2-title-card {
        width: min(550px, calc(100% - 28px));
    }

    .about-v2-title-card .services-v2-title-card__copy {
        padding: 20px 34px 12px;
    }

    .about-v2-title-card.services-v2-title-card h1 {
        font-size: clamp(2.65rem, 12.6vw, 3.25rem);
    }

    html[lang="en"] .about-v2-title-card.services-v2-title-card h1 {
        font-size: clamp(2.65rem, 12vw, 3.15rem);
    }

    .about-v2-title-card .services-v2-title-card__copy p,
    html[lang="en"] .about-v2-title-card .services-v2-title-card__copy p {
        max-width: 82%;
        margin-top: 5px;
        font-size: 9px;
        letter-spacing: 0.045em;
    }

    .about-v2-studio {
        padding: 28px 0 24px;
    }

    .about-v2-studio__layout {
        gap: 46px;
    }

    .about-v2-studio__label {
        width: 44%;
        min-height: 54px;
        padding: 8px 10px 8px 47px;
    }

    .about-v2-studio__label > img {
        left: 8px;
        width: 34px;
    }

    .about-v2-studio__label h2 {
        font-size: clamp(0.95rem, 4.5vw, 1.15rem);
    }

    html[lang="en"] .about-v2-studio__label {
        width: 55%;
        padding-left: 43px;
    }

    html[lang="en"] .about-v2-studio__label h2 {
        font-size: clamp(0.86rem, 3.8vw, 1rem);
    }

    .about-v2-studio__copy {
        gap: 14px;
        padding: 0 5px;
    }

    .about-v2-studio__copy p {
        font-size: 18px;
        line-height: 1.55;
    }

    html[lang="en"] .about-v2-studio__copy p {
        font-size: 15px;
        line-height: 1.6;
    }

    .about-v2-roster {
        padding: 32px 0 30px;
    }

    .about-v2-roster--pets {
        padding-top: 16px;
        padding-bottom: 58px;
    }

    .about-v2-pets-intro {
        margin-bottom: 26px;
        padding: 0 6px;
        font-size: 18px;
        line-height: 1.5;
    }

    html[lang="en"] .about-v2-pets-intro {
        font-size: 15px;
    }

    .about-v2-paper-panel {
        min-height: 428px;
        margin-right: -8px;
        margin-left: -8px;
        padding: 70px 18px 26px 28px;
        background-size: auto 100%;
    }

    .about-v2-paper-panel::before {
        -webkit-mask-size: auto 100%;
        mask-size: auto 100%;
    }

    .about-v2-board-label {
        left: 12px;
        top: -8px;
        width: min(248px, 76%);
        min-height: 58px;
        padding: 11px 16px 11px 54px;
    }

    .about-v2-board-label > img {
        left: 22px;
        width: 27px;
    }

    .about-v2-board-label h2 {
        font-size: 1.35rem;
    }

    .about-v2-board-label span {
        font-size: 10px;
    }

    html[lang="en"] .about-v2-board-label {
        width: min(286px, 84%);
    }

    html[lang="en"] .about-v2-board-label h2 {
        font-size: 1.45rem;
    }

    .about-v2-board-decoration--pin {
        left: 17px;
    }

    .about-v2-board-decoration--clip-left {
        left: 35px;
    }

    .about-v2-board-decoration--clip-right {
        right: 30px;
    }

    .about-v2-board-decoration--star {
        left: -4px;
        width: 42px;
    }

    .about-v2-board-decoration--tape {
        right: -17px;
        width: 58px;
    }

    .about-v2-card-grid {
        gap: 12px;
        padding-bottom: 12px;
    }

    .about-v2-card {
        flex-basis: min(230px, 72vw);
        min-height: 326px;
    }

    .about-v2-card__trigger {
        min-height: 326px;
    }

    .about-v2-card__image {
        height: 208px;
    }

    .about-v2-card__name {
        font-size: 1.3rem;
    }

    .about-v2-card__role {
        font-size: 12px;
    }

    .about-v2-details {
        align-items: end;
    }

    .about-v2-details__sheet {
        width: 100%;
        height: auto;
        max-height: 86vh;
        padding: 58px 24px 34px;
        border-radius: 22px 22px 0 0;
        transform: translateY(100%);
    }

    .about-v2-details.is-open .about-v2-details__sheet {
        transform: translateY(0);
    }

    .about-v2-details__close {
        right: 18px;
        top: 14px;
    }

    .about-v2-details__media {
        max-width: 320px;
        margin: 0 auto;
    }

    .about-v2-details__copy {
        max-width: 520px;
        margin: 0 auto;
        padding-top: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-v2-card__trigger,
    .about-v2-details__backdrop,
    .about-v2-details__sheet {
        transition: none;
    }
}

/* Source: css/11-pages-works-v2.css */
/* PSD-referenced works page. Copy stays in the existing i18n dictionary; this file only changes presentation. */
.works-v2-page {
    background: #f6f6f0;
}

.works-v2-main {
    overflow: hidden;
    color: var(--v2-ink);
    background:
        linear-gradient(rgba(246, 246, 240, 0.72), rgba(246, 246, 240, 0.72)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg") center top / 1920px auto repeat-y;
}

.works-v2-main .home-v2-container {
    width: 100%;
}

.works-v2-hero {
    position: relative;
    min-height: clamp(330px, 27vw, 430px);
    padding: clamp(118px, 8.5vw, 145px) 0 clamp(42px, 3.8vw, 60px);
    background:
        linear-gradient(180deg, rgba(246, 246, 240, 0.24), rgba(246, 246, 240, 0.72)),
        url("/assets/ui/home-v2/texture-hero.bb67709d9f9576f8.jpg") center / cover no-repeat;
}

.works-v2-title-card .services-v2-title-card__copy {
    padding-left: 12.5%;
    padding-right: 7%;
}

.works-v2-title-card .services-v2-title-card__copy p {
    max-width: 88%;
    margin: 12px auto 0;
    font-family: var(--v2-font-ui);
    font-size: clamp(10px, 0.95vw, 14px);
    font-weight: 650;
    letter-spacing: 0.04em;
    line-height: 1.35;
}

html[lang="en"] .works-v2-title-card h1 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(4.25rem, 5.2vw, 5.15rem);
    font-weight: 600;
    letter-spacing: -0.045em;
}

html[lang="en"] .works-v2-title-card .services-v2-title-card__copy p {
    max-width: 94%;
    font-size: clamp(9px, 0.78vw, 12px);
    letter-spacing: 0.015em;
}

.works-v2-page .works-v2-gallery {
    padding: 0 0 clamp(50px, 5vw, 84px);
}

.works-v2-filter-shell {
    position: relative;
    display: grid;
    min-height: clamp(152px, 10.8vw, 184px);
    place-items: center;
    isolation: isolate;
}

.works-v2-filter-shell__paper {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: fill;
    filter: drop-shadow(0 8px 11px rgba(65, 61, 50, 0.08));
}

.works-v2-filter-shell__loop {
    position: absolute;
    top: 50%;
    z-index: -1;
    width: clamp(96px, 9vw, 142px);
    height: auto;
    transform: translateY(-50%);
    opacity: 0.76;
}

.works-v2-filter-shell__loop--left {
    left: clamp(12px, 2.6vw, 48px);
}

.works-v2-filter-shell__loop--right {
    right: clamp(12px, 2.6vw, 48px);
}

.works-v2-filter-viewport {
    position: relative;
    z-index: 1;
}

.works-v2-page .works-filter {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(12px, 2vw, 30px);
    width: min(1120px, calc(100% - 220px));
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.works-v2-page .filter-btn {
    --filter-accent: var(--v2-olive);
    position: relative;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 12px 32px 12px 24px;
    overflow: hidden;
    border: 0;
    border-left: 7px solid var(--filter-accent);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.82);
    color: #342f2a;
    box-shadow: 0 8px 18px rgba(63, 60, 50, 0.06);
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.25rem, 1.8vw, 1.72rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1;
    text-align: left;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.works-v2-page .filter-btn:nth-child(1) { --filter-accent: #8fa65d; }
.works-v2-page .filter-btn:nth-child(2) { --filter-accent: #d9828b; }
.works-v2-page .filter-btn:nth-child(3) { --filter-accent: #a83a38; }
.works-v2-page .filter-btn:nth-child(4) { --filter-accent: #3c913d; }
.works-v2-page .filter-btn:nth-child(5) { --filter-accent: #356d9c; }

.works-v2-page .filter-btn::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--filter-accent);
    transform: translateY(-50%) scale(0.62);
    opacity: 0.72;
    transition: transform 180ms ease, opacity 180ms ease;
}

.works-v2-page .filter-btn:hover,
.works-v2-page .filter-btn.active {
    background: rgba(255, 255, 255, 0.98);
    color: #292721;
    box-shadow: 0 15px 28px rgba(63, 60, 50, 0.13);
    transform: translateY(-4px);
}

.works-v2-page .filter-btn:hover::after,
.works-v2-page .filter-btn.active::after {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.works-v2-page .filter-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--filter-accent), white 25%);
    outline-offset: 4px;
}

html[lang="en"] .works-v2-page .filter-btn {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.15rem, 1.55vw, 1.52rem);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.works-v2-gallery__inner {
    padding-top: clamp(38px, 4vw, 66px);
}

.works-v2-page .works-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 1.45vw, 24px);
}

.works-v2-page .works-grid.is-filtering {
    overflow: clip;
    transition: height 300ms cubic-bezier(0.22, 0.72, 0.28, 1);
}

.works-v2-page .works-grid.is-filtering-out .work-item:not([hidden]) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.985) rotate(var(--card-tilt));
    transition-duration: 120ms;
    transition-timing-function: ease-in;
}

.works-v2-page .works-grid.is-filtering-in .work-item:not([hidden]) {
    animation: works-v2-card-enter 280ms cubic-bezier(0.2, 0.75, 0.28, 1) both;
    animation-delay: calc(var(--works-transition-index, 0) * 30ms);
}

@keyframes works-v2-card-enter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985) rotate(var(--card-tilt));
    }
    to {
        opacity: 1;
        transform: rotate(var(--card-tilt));
    }
}

.works-v2-page .work-item,
.works-v2-page .work-item.default-show,
.works-v2-page .works-expanded .work-item {
    --card-tilt: -0.24deg;
    position: relative;
    display: block;
    height: auto !important;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(87, 84, 70, 0.09);
    border-radius: 4px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.92), transparent 34%),
        linear-gradient(145deg, #fffefa, #f8f6ee);
    box-shadow:
        0 2px 3px rgba(67, 63, 52, 0.07),
        0 13px 24px rgba(67, 63, 52, 0.11);
    opacity: 1;
    transform: rotate(var(--card-tilt));
    transform-origin: 50% 62%;
    transition: opacity 120ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.works-v2-page .work-item:nth-child(4n + 2) { --card-tilt: 0.22deg; }
.works-v2-page .work-item:nth-child(4n + 3) { --card-tilt: -0.12deg; }
.works-v2-page .work-item:nth-child(4n) { --card-tilt: 0.3deg; }

.works-v2-page .work-item[hidden],
.works-v2-page .work-item.is-hidden,
.works-v2-page .more-works.hidden {
    display: none !important;
}

.works-v2-page .work-item img {
    position: absolute;
    inset: 8px 8px 54px;
    width: calc(100% - 16px);
    height: calc(100% - 62px);
    border-radius: 2px;
    object-fit: cover;
    object-position: center;
    transition: transform 300ms ease, filter 300ms ease;
}

.works-v2-page .work-overlay {
    position: absolute;
    inset: auto 8px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 9px;
    border: 0;
    border-top: 1px solid rgba(95, 113, 52, 0.15);
    border-radius: 0;
    background: transparent;
    color: #6c6a61;
    opacity: 1;
    transform: none;
    backdrop-filter: none;
    font-family: var(--v2-font-ui);
    font-size: clamp(0.75rem, 0.88vw, 0.9rem);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.works-v2-page .work-overlay::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-left: 12px;
    border-radius: 50%;
    background: #a7b48e;
    box-shadow: 0 0 0 3px rgba(167, 180, 142, 0.1);
}

.works-v2-page .work-overlay__owner {
    width: auto;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.works-v2-page .work-item:hover {
    box-shadow:
        0 3px 5px rgba(67, 63, 52, 0.08),
        0 20px 34px rgba(67, 63, 52, 0.16);
    transform: translateY(-5px) rotate(0deg);
}

.works-v2-page .work-item:hover img {
    filter: saturate(1.04);
    transform: scale(1.025);
}

.works-v2-page .work-item:hover .work-overlay,
.works-v2-page .work-item.touch-active .work-overlay,
.works-v2-page .work-item:focus-visible .work-overlay,
.works-v2-page .work-item:focus-within .work-overlay {
    opacity: 1;
}

.works-v2-page .show-more-container {
    display: grid;
    min-height: 190px;
    margin: clamp(8px, 1.5vw, 22px) auto -34px;
    place-items: start center;
}

.works-v2-page .works-v2-show-more {
    position: relative;
    display: block;
    width: clamp(250px, 20vw, 300px);
    aspect-ratio: 560 / 421;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url("/assets/ui/works/show-more-sign.29a66db10c151571.webp") center / contain no-repeat;
    color: #171713;
    box-shadow: none;
    filter: drop-shadow(0 11px 10px rgba(56, 54, 45, 0.13));
    cursor: pointer;
    transition: transform 180ms ease, filter 180ms ease;
}

.works-v2-page .works-v2-show-more[hidden],
.works-v2-page .works-v2-show-more.is-hidden {
    display: none !important;
}

.works-v2-page .works-v2-show-more > i,
.works-v2-page .works-v2-show-more > .btn-animation {
    display: none;
}

.works-v2-page .works-v2-show-more > span[data-i18n] {
    position: absolute;
    left: 13%;
    right: 13%;
    top: 67%;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.12rem, 1.5vw, 1.42rem);
    font-weight: 850;
    letter-spacing: -0.03em;
    line-height: 1.15;
    text-align: center;
    transform: translateY(-50%) rotate(-1deg);
}

html[lang="en"] .works-v2-page .works-v2-show-more > span[data-i18n] {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.08rem, 1.35vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0;
}

.works-v2-page .works-v2-show-more:hover {
    background-color: transparent;
    box-shadow: none;
    filter: drop-shadow(0 16px 13px rgba(56, 54, 45, 0.18));
    transform: translateY(-5px) rotate(0.5deg);
}

.works-v2-page .works-v2-show-more:focus-visible {
    outline: 3px solid var(--v2-olive);
    outline-offset: -38px;
}

@media (max-width: 1180px) {
    .works-v2-page .works-filter {
        gap: 12px;
        width: min(960px, calc(100% - 160px));
    }

    .works-v2-page .filter-btn {
        min-height: 70px;
        padding-left: 18px;
        padding-right: 26px;
    }

    .works-v2-page .works-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .works-v2-hero {
        min-height: 282px;
        padding: 104px 0 38px;
    }

    .works-v2-filter-shell {
        min-height: 132px;
    }

    .works-v2-filter-shell__loop {
        display: none;
    }

    .works-v2-filter-viewport {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .works-v2-filter-viewport::-webkit-scrollbar {
        display: none;
    }

    .works-v2-page .works-filter {
        display: flex;
        width: max-content;
        min-width: 100%;
        gap: 10px;
        padding: 0 22px;
    }

    .works-v2-page .filter-btn,
    html[lang="en"] .works-v2-page .filter-btn {
        flex: 0 0 118px;
        min-height: 62px;
        padding: 10px 26px 10px 15px;
        font-size: 1.08rem;
    }

    .works-v2-page .filter-btn::after {
        right: 10px;
        width: 9px;
        height: 9px;
    }

    .works-v2-gallery__inner {
        padding-top: 34px;
    }

    .works-v2-page .works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .works-v2-page .desktop-only {
        display: block;
    }
}

@media (max-width: 560px) {
    .works-v2-hero {
        min-height: auto;
        padding: max(168px, calc(148px + var(--safe-area-top))) 0 34px;
    }

    .works-v2-title-card {
        width: min(440px, calc(100% - 18px));
    }

    .works-v2-title-card .services-v2-title-card__copy {
        padding-left: 13%;
    }

    .works-v2-title-card h1 {
        font-size: clamp(2.65rem, 13.5vw, 3.45rem);
    }

    html[lang="en"] .works-v2-title-card h1 {
        font-size: clamp(2.8rem, 14vw, 3.55rem);
    }

    .works-v2-title-card .services-v2-title-card__copy p,
    html[lang="en"] .works-v2-title-card .services-v2-title-card__copy p {
        max-width: 90%;
        margin-top: 6px;
        font-size: clamp(7px, 2.35vw, 10px);
        line-height: 1.25;
    }

    .works-v2-page .works-grid {
        gap: 10px;
    }

    .works-v2-page .work-item,
    .works-v2-page .work-item.default-show,
    .works-v2-page .works-expanded .work-item {
        border-radius: 3px;
    }

    .works-v2-page .work-item img {
        inset: 6px 6px 46px;
        width: calc(100% - 12px);
        height: calc(100% - 52px);
    }

    .works-v2-page .work-overlay {
        inset: auto 6px 6px;
        height: 40px;
        padding: 0 7px;
        font-size: clamp(0.58rem, 2.65vw, 0.72rem);
    }

    .works-v2-page .work-overlay::after {
        width: 7px;
        height: 7px;
        margin-left: 7px;
    }

    .works-v2-page .show-more-container {
        min-height: 164px;
        margin-bottom: -28px;
    }

    .works-v2-page .works-v2-show-more {
        width: 235px;
    }

    .works-v2-page .works-v2-show-more > span[data-i18n],
    html[lang="en"] .works-v2-page .works-v2-show-more > span[data-i18n] {
        font-size: 1.05rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-v2-page .works-grid.is-filtering {
        transition: none;
    }

    .works-v2-page .works-grid.is-filtering-in .work-item:not([hidden]) {
        animation: none;
    }

    .works-v2-page .filter-btn,
    .works-v2-page .work-item,
    .works-v2-page .work-item img,
    .works-v2-page .works-v2-show-more {
        transition: none;
    }
}

/* Source: css/12-pages-announcement-v2.css */
/* Announcement detail pages: preserve the original copy while bringing the page into the paper-collage system. */
.announcement-v2-page {
    background: #f3f2ea;
}

.announcement-v2-page .announcement-v2-main {
    min-height: 100vh;
    padding: 0 !important;
    overflow: hidden;
    background: #f3f2ea;
    color: var(--v2-ink);
}

.announcement-v2-hero {
    position: relative;
    padding: clamp(152px, 11vw, 188px) 0 clamp(76px, 6.5vw, 106px);
    background:
        linear-gradient(180deg, rgba(246, 246, 240, 0.18), rgba(246, 246, 240, 0.72)),
        url("/assets/ui/home-v2/texture-hero.bb67709d9f9576f8.jpg") center / cover no-repeat;
}

.announcement-v2-hero::before,
.announcement-v2-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.announcement-v2-hero::before {
    inset: auto -5% -36px;
    height: 80px;
    background: rgba(255, 255, 250, 0.66);
    clip-path: polygon(0 38%, 4% 50%, 9% 39%, 14% 55%, 20% 42%, 26% 57%, 32% 40%, 39% 53%, 46% 37%, 53% 55%, 60% 39%, 67% 54%, 74% 40%, 81% 56%, 88% 39%, 94% 51%, 100% 37%, 100% 100%, 0 100%);
}

.announcement-v2-hero::after {
    right: clamp(22px, 5vw, 88px);
    bottom: 32px;
    width: clamp(110px, 13vw, 210px);
    height: clamp(70px, 8vw, 130px);
    background: url("/assets/ui/home-v2/paw-pattern.8b5c2bb97a9d892c.png") center / contain no-repeat;
    opacity: 0.055;
    transform: rotate(-8deg);
}

.announcement-v2-title-wrap {
    position: relative;
    width: min(1050px, calc(100% - 52px));
    margin: 0 auto;
    filter: drop-shadow(0 22px 30px rgba(63, 60, 50, 0.18));
    transform: rotate(-0.22deg);
}

.announcement-v2-page .announcement-v2-title-sheet {
    position: relative;
    min-height: clamp(330px, 26vw, 410px);
    margin: 0;
    padding: clamp(78px, 6.2vw, 104px) clamp(52px, 7vw, 108px) clamp(54px, 4.8vw, 78px);
    overflow: visible;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(rgba(255, 254, 248, 0.78), rgba(255, 254, 248, 0.86)),
        url("/assets/ui/home-v2/grid-paper.a733da932471be56.png") center / 48px auto repeat;
    box-shadow: none;
    text-align: center;
    clip-path: polygon(2% 2%, 18% 0, 35% 1.5%, 52% 0.5%, 71% 1.7%, 88% 0, 98.5% 2.2%, 100% 23%, 99% 49%, 100% 76%, 97.5% 98%, 80% 99.3%, 62% 98.3%, 45% 100%, 26% 98.6%, 3% 99.4%, 0.7% 79%, 1.5% 55%, 0 27%);
}

.announcement-v2-title-sheet::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(95, 113, 52, 0.2);
    pointer-events: none;
}

.announcement-v2-title-sheet::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 27px;
    width: min(360px, 42%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(95, 113, 52, 0.4), transparent);
    transform: translateX(-50%);
}

.announcement-v2-clip {
    position: absolute;
    top: -25px;
    left: 50%;
    z-index: 4;
    width: clamp(72px, 6.6vw, 102px);
    height: auto;
    filter: drop-shadow(0 8px 8px rgba(35, 34, 28, 0.22));
    transform: translateX(-50%) rotate(1.5deg);
}

.announcement-v2-tape {
    position: absolute;
    top: 26px;
    right: 8.5%;
    z-index: 3;
    width: clamp(90px, 10vw, 142px);
    height: 36px;
    background: rgba(209, 198, 160, 0.34);
    box-shadow: inset 0 0 0 1px rgba(135, 125, 93, 0.08);
    transform: rotate(4deg);
}

.announcement-v2-page .announcement-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0 0 clamp(22px, 2vw, 30px);
}

.announcement-v2-page .announcement-tag {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 17px;
    border-radius: 2px;
    background: var(--v2-olive);
    color: #fff;
    font-family: var(--v2-font-ui);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 4px 5px 0 rgba(95, 113, 52, 0.13);
    clip-path: polygon(0 0, 91% 0, 100% 26%, 97% 100%, 7% 96%, 0 72%);
}

.announcement-v2-page .announcement-date {
    color: rgba(43, 42, 35, 0.62);
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.15rem, 1.45vw, 1.4rem);
    font-weight: 650;
    letter-spacing: 0.05em;
}

.announcement-v2-page .announcement-title {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    color: #28271f;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(3.45rem, 5.1vw, 5.15rem);
    font-weight: 850;
    letter-spacing: -0.055em;
    line-height: 1.08;
    text-wrap: balance;
}

.announcement-v2-page .announcement-info {
    position: relative;
    z-index: 1;
    margin: clamp(22px, 2vw, 30px) 0 0;
    color: rgba(43, 42, 35, 0.58);
    font-family: var(--v2-font-ui);
    font-size: clamp(12px, 1.05vw, 15px);
    font-weight: 550;
    letter-spacing: 0.045em;
}

html[lang="en"] .announcement-v2-page .announcement-title {
    max-width: 940px;
    font-family: var(--v2-font-display-en);
    font-size: clamp(3.55rem, 5vw, 5rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 0.98;
}

html[lang="en"] .announcement-v2-page .announcement-tag,
html[lang="en"] .announcement-v2-page .announcement-info {
    letter-spacing: 0.025em;
}

.announcement-v2-content {
    position: relative;
    padding: 10px 0 clamp(88px, 8vw, 132px);
    background:
        linear-gradient(rgba(246, 246, 240, 0.66), rgba(246, 246, 240, 0.76)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg") center top / 1920px auto repeat-y;
}

.announcement-v2-layout {
    position: relative;
    z-index: 2;
    width: 100%;
}

.announcement-v2-paper {
    position: relative;
    isolation: isolate;
    width: min(980px, calc(100% - 70px));
    margin: -34px auto 0;
    padding: clamp(72px, 7vw, 102px) clamp(58px, 7vw, 106px) clamp(58px, 6vw, 88px);
    border: 1px solid rgba(91, 87, 70, 0.1);
    border-radius: 7px 5px 12px 4px;
    background:
        radial-gradient(circle at 86% 7%, rgba(230, 232, 216, 0.54), transparent 21%),
        linear-gradient(145deg, #fffefa 0%, #fbfaf4 60%, #f6f2e8 100%);
    box-shadow:
        12px 14px 0 #e9e6da,
        0 2px 3px rgba(67, 63, 52, 0.07),
        0 24px 48px rgba(67, 63, 52, 0.16);
    transform: rotate(0.08deg);
}

.announcement-v2-paper::before {
    content: none;
}

.announcement-v2-paper::after {
    content: "";
    position: absolute;
    top: 36px;
    right: 24px;
    z-index: -1;
    width: 260px;
    height: 150px;
    background: url("/assets/ui/home-v2/paw-pattern.8b5c2bb97a9d892c.png") right top / contain no-repeat;
    opacity: 0.035;
    pointer-events: none;
    transform: rotate(7deg);
}

.announcement-v2-paper-hole {
    position: absolute;
    left: 30px;
    z-index: 2;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #dedbcf;
    box-shadow: inset 1px 2px 3px rgba(50, 48, 40, 0.25), 0 0 0 5px rgba(255, 255, 255, 0.48);
}

.announcement-v2-paper-hole--one {
    top: 156px;
}

.announcement-v2-paper-hole--two {
    top: 214px;
}

.announcement-v2-page .announcement-body {
    position: relative;
    z-index: 1;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #444239;
    font-family: var(--v2-font-ui);
    font-size: 16px;
    line-height: 1.9;
}

.announcement-v2-page .announcement-body h2 {
    position: relative;
    margin: clamp(54px, 5.5vw, 74px) 0 24px;
    padding: 14px 20px 15px;
    border: 0;
    border-left: 7px solid var(--v2-olive);
    background: linear-gradient(90deg, rgba(215, 220, 200, 0.72), rgba(245, 245, 237, 0.54) 72%, transparent);
    color: #29281f;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.7rem, 2.45vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.28;
    box-shadow: inset 0 -1px rgba(95, 113, 52, 0.1);
}

.announcement-v2-page .announcement-body h2:first-child {
    margin-top: 0;
}

.announcement-v2-page .announcement-body h2:nth-of-type(3n + 2) {
    border-left-color: #c87f85;
    background: linear-gradient(90deg, rgba(237, 214, 216, 0.66), rgba(248, 243, 237, 0.48) 72%, transparent);
}

.announcement-v2-page .announcement-body h2:nth-of-type(3n) {
    border-left-color: #6b8ea8;
    background: linear-gradient(90deg, rgba(211, 225, 233, 0.66), rgba(242, 244, 238, 0.48) 72%, transparent);
}

html[lang="en"] .announcement-v2-page .announcement-body h2 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(1.95rem, 2.65vw, 2.45rem);
    font-weight: 650;
    letter-spacing: -0.015em;
}

.announcement-v2-page .announcement-body p {
    margin: 0 0 1.25em;
    color: #4f4c42;
    font-size: 1rem;
    line-height: 1.92;
}

.announcement-v2-page .announcement-body strong {
    color: #2f3525;
    font-weight: 800;
}

.announcement-v2-page .announcement-body ul,
.announcement-v2-page .announcement-body ol {
    display: grid;
    gap: 9px;
    margin: 18px 0 26px;
    padding: 0;
    list-style: none;
    counter-reset: announcement-step;
}

.announcement-v2-page .announcement-body li {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 12px 18px 12px 46px;
    border: 1px solid rgba(95, 113, 52, 0.11);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.54);
    color: #555247;
    font-size: 0.97rem;
    line-height: 1.7;
}

.announcement-v2-page .announcement-body ul li::before {
    content: "";
    position: absolute;
    top: 1.05em;
    left: 20px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--v2-olive-soft);
    box-shadow: 0 0 0 4px rgba(159, 167, 127, 0.15);
}

.announcement-v2-page .announcement-body ol li {
    counter-increment: announcement-step;
}

.announcement-v2-page .announcement-body ol li::before {
    content: counter(announcement-step, decimal-leading-zero);
    position: absolute;
    top: 11px;
    left: 14px;
    color: var(--v2-olive);
    font-family: var(--v2-font-display-en);
    font-size: 14px;
    font-weight: 700;
}

.announcement-v2-page .announcement-body .notice {
    margin: 24px 0 30px;
    padding: 17px 20px;
    border: 0;
    border-left: 5px solid #c5984e;
    border-radius: 2px;
    background: rgba(243, 227, 188, 0.48);
    color: #65543a;
    font-style: normal;
    box-shadow: inset 0 0 0 1px rgba(156, 120, 61, 0.08);
}

.announcement-v2-page .contact-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.announcement-v2-page .platform-contact-links {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.announcement-v2-page .contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 58px;
    margin: 0;
    padding: 13px 16px;
    border: 1px solid rgba(95, 113, 52, 0.12);
    border-radius: 4px;
    background: rgba(239, 241, 230, 0.62);
    color: #49473d;
}

.announcement-v2-page .contact-item > i {
    flex: 0 0 22px;
    color: var(--v2-olive);
    font-size: 18px;
    text-align: center;
}

.announcement-v2-page .contact-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.announcement-v2-page .contact-item a,
.announcement-v2-page .form-link {
    display: inline;
    margin: 0 0 0 6px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(95, 113, 52, 0.38);
    border-radius: 0;
    background: transparent;
    color: var(--v2-olive) !important;
    font-weight: 750;
    text-decoration: none;
    transition: color 160ms ease, border-color 160ms ease;
}

.announcement-v2-page .contact-item a:hover,
.announcement-v2-page .contact-item a:focus-visible,
.announcement-v2-page .form-link:hover,
.announcement-v2-page .form-link:focus-visible {
    border-color: var(--v2-ink);
    background: transparent;
    color: var(--v2-ink) !important;
}

.announcement-v2-page .announcement-footer {
    position: relative;
    z-index: 1;
    margin: clamp(54px, 6vw, 76px) 0 0;
    padding: 30px 0 0;
    border-top: 1px dashed rgba(95, 113, 52, 0.28);
    text-align: center;
}

.announcement-v2-page .announcement-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--v2-olive);
    border-radius: 2px;
    background: var(--v2-olive);
    color: #fff;
    font-family: var(--v2-font-ui);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 6px 7px 0 rgba(95, 113, 52, 0.14);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.announcement-v2-page .announcement-footer .btn:hover,
.announcement-v2-page .announcement-footer .btn:focus-visible {
    background: #4f6028;
    box-shadow: 3px 4px 0 rgba(95, 113, 52, 0.16);
    transform: translate(2px, 2px);
}

.announcement-v2-page--brief .announcement-v2-current-state {
    color: var(--v2-olive);
    font-family: var(--v2-font-ui);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.announcement-v2-paper--brief {
    width: min(820px, calc(100% - 70px));
}

.announcement-v2-page .announcement-v2-brief-copy {
    max-width: 650px;
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    text-align: center;
}

.announcement-v2-inline-action {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.announcement-v2-inline-action a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--v2-olive);
    border-radius: 2px;
    background: var(--v2-olive);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 6px 7px 0 rgba(95, 113, 52, 0.14);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.announcement-v2-inline-action a:hover,
.announcement-v2-inline-action a:focus-visible {
    background: #4f6028;
    box-shadow: 3px 4px 0 rgba(95, 113, 52, 0.16);
    transform: translate(2px, 2px);
}

@media (max-width: 900px) {
    .announcement-v2-title-wrap {
        width: min(820px, calc(100% - 34px));
    }

    .announcement-v2-page .announcement-v2-title-sheet {
        min-height: 330px;
        padding-right: 46px;
        padding-left: 46px;
    }

    .announcement-v2-paper {
        width: calc(100% - 34px);
    }
}

@media (max-width: 768px) {
    .announcement-v2-page .announcement-v2-main {
        padding: 0 !important;
    }

    .announcement-v2-hero {
        padding: max(166px, calc(146px + var(--safe-area-top))) 0 72px;
    }

    .announcement-v2-title-wrap {
        width: calc(100% - 28px);
    }

    .announcement-v2-page .announcement-v2-title-sheet {
        min-height: 310px;
        padding: 70px 34px 52px;
    }

    .announcement-v2-page .announcement-title {
        font-size: clamp(2.65rem, 9vw, 3.6rem);
    }

    html[lang="en"] .announcement-v2-page .announcement-title {
        font-size: clamp(2.8rem, 9.5vw, 3.7rem);
    }

    .announcement-v2-paper {
        width: calc(100% - 24px);
        margin-top: -20px;
        padding: 66px 38px 58px;
    }

    .announcement-v2-paper-hole {
        display: none;
    }

    .announcement-v2-page .announcement-body h2 {
        font-size: 1.65rem;
    }

    html[lang="en"] .announcement-v2-page .announcement-body h2 {
        font-size: 1.9rem;
    }
}

@media (max-width: 560px) {
    .announcement-v2-hero {
        padding: max(158px, calc(138px + var(--safe-area-top))) 0 60px;
    }

    .announcement-v2-hero::after {
        display: none;
    }

    .announcement-v2-title-wrap {
        width: calc(100% - 22px);
        transform: rotate(-0.12deg);
    }

    .announcement-v2-page .announcement-v2-title-sheet {
        min-height: 286px;
        padding: 64px 22px 46px;
        clip-path: polygon(2% 2%, 22% 0, 45% 1.5%, 68% 0, 98% 2%, 100% 24%, 99% 51%, 100% 78%, 97% 98%, 73% 99%, 48% 98%, 24% 100%, 2% 98%, 0 73%, 1% 47%, 0 21%);
    }

    .announcement-v2-title-sheet::before {
        inset: 12px;
    }

    .announcement-v2-clip {
        top: -18px;
        width: 68px;
    }

    .announcement-v2-tape {
        top: 20px;
        right: 9%;
        width: 78px;
        height: 28px;
    }

    .announcement-v2-page .announcement-meta {
        flex-direction: row;
        gap: 10px;
        margin-bottom: 21px;
    }

    .announcement-v2-page .announcement-tag {
        min-height: 30px;
        padding: 6px 13px;
        font-size: 10px;
    }

    .announcement-v2-page .announcement-date {
        font-size: 1.05rem;
    }

    .announcement-v2-page .announcement-title {
        font-size: clamp(2.15rem, 10.8vw, 2.75rem);
        letter-spacing: -0.05em;
        line-height: 1.12;
    }

    html[lang="en"] .announcement-v2-page .announcement-title {
        font-size: clamp(2.05rem, 10.4vw, 2.7rem);
        line-height: 1;
    }

    .announcement-v2-page .announcement-info {
        margin-top: 18px;
        font-size: 11px;
        line-height: 1.55;
    }

    .announcement-v2-content {
        padding-bottom: 72px;
    }

    .announcement-v2-layout {
        padding-right: 8px;
        padding-left: 8px;
    }

    .announcement-v2-paper {
        width: 100%;
        margin-top: -15px;
        padding: 52px 20px 46px;
        border-radius: 4px;
        transform: none;
    }

    .announcement-v2-paper--brief {
        width: 100%;
    }

    .announcement-v2-paper::after {
        top: 26px;
        right: 8px;
        width: 150px;
        height: 90px;
    }

    .announcement-v2-page .announcement-body {
        font-size: 15px;
        line-height: 1.82;
    }

    .announcement-v2-page .announcement-body h2 {
        margin: 44px 0 19px;
        padding: 12px 13px;
        border-left-width: 5px;
        font-size: 1.4rem;
        line-height: 1.3;
    }

    html[lang="en"] .announcement-v2-page .announcement-body h2 {
        font-size: 1.62rem;
    }

    .announcement-v2-page .announcement-body p {
        font-size: 0.95rem;
        line-height: 1.82;
    }

    .announcement-v2-page .announcement-body li {
        padding: 11px 13px 11px 40px;
        font-size: 0.92rem;
        line-height: 1.62;
    }

    .announcement-v2-page .announcement-body ul li::before {
        left: 17px;
    }

    .announcement-v2-page .announcement-body ol li::before {
        left: 11px;
    }

    .announcement-v2-page .contact-info,
    .announcement-v2-page .platform-contact-links {
        grid-template-columns: 1fr;
    }

    .announcement-v2-page .contact-item {
        min-height: 54px;
        padding: 12px 13px;
        font-size: 0.9rem;
    }

    .announcement-v2-page .form-link {
        display: inline;
        margin-left: 4px;
        text-align: inherit;
    }

    .announcement-v2-page .announcement-footer {
        margin-top: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .announcement-v2-page .announcement-footer .btn {
        transition: none;
    }
}

/* Source: css/13-pages-announcements-index.css */
/* Announcement archive: a durable home for current and historical notices. */
.announcements-index-page {
    background: #f3f2ea;
}

.announcements-index-main {
    overflow: hidden;
    color: var(--v2-ink);
    background: #f3f2ea;
}

.announcements-index-hero {
    position: relative;
    padding: clamp(150px, 10.5vw, 182px) 0 clamp(68px, 6vw, 96px);
    background:
        linear-gradient(180deg, rgba(246, 246, 240, 0.2), rgba(246, 246, 240, 0.74)),
        url("/assets/ui/home-v2/texture-hero.bb67709d9f9576f8.jpg") center / cover no-repeat;
}

.announcements-index-hero::after {
    content: "";
    position: absolute;
    right: clamp(24px, 6vw, 110px);
    bottom: 26px;
    width: clamp(110px, 12vw, 190px);
    height: clamp(70px, 8vw, 125px);
    background: url("/assets/ui/home-v2/paw-pattern.8b5c2bb97a9d892c.png") center / contain no-repeat;
    opacity: 0.05;
    transform: rotate(-8deg);
}

.announcements-index-title-card {
    position: relative;
    display: grid;
    place-items: center;
    width: min(760px, calc(100% - 44px));
    min-height: clamp(260px, 21vw, 330px);
    margin: 0 auto;
    padding: 52px 72px 46px;
    background:
        linear-gradient(rgba(255, 254, 248, 0.8), rgba(255, 254, 248, 0.88)),
        url("/assets/ui/home-v2/grid-paper.a733da932471be56.png") center / 48px auto repeat;
    box-shadow: 0 22px 34px rgba(63, 60, 50, 0.17);
    text-align: center;
    clip-path: polygon(2% 2%, 22% 0, 44% 1.4%, 69% 0, 98% 2%, 100% 25%, 99% 52%, 100% 78%, 97% 98%, 75% 99%, 49% 98%, 24% 100%, 2% 98%, 0 74%, 1% 47%, 0 20%);
    transform: rotate(-0.18deg);
}

.announcements-index-title-card::before {
    content: "";
    position: absolute;
    inset: 17px;
    border: 1px solid rgba(95, 113, 52, 0.2);
}

.announcements-index-title-card__tape {
    position: absolute;
    top: 22px;
    left: 50%;
    width: 128px;
    height: 34px;
    background: rgba(209, 198, 160, 0.36);
    box-shadow: inset 0 0 0 1px rgba(135, 125, 93, 0.08);
    transform: translateX(-50%) rotate(-2deg);
}

.announcements-index-title-card p,
.announcements-index-title-card h1 {
    position: relative;
    z-index: 1;
}

.announcements-index-title-card p {
    align-self: end;
    margin: 22px 0 8px;
    color: var(--v2-olive);
    font-family: var(--v2-font-display-en);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.announcements-index-title-card h1 {
    align-self: start;
    margin: 0;
    color: #29281f;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(4rem, 6.1vw, 6rem);
    font-weight: 850;
    letter-spacing: -0.06em;
    line-height: 1;
}

html[lang="en"] .announcements-index-title-card h1 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(4.25rem, 6.25vw, 6.2rem);
    font-weight: 650;
    letter-spacing: -0.045em;
}

.announcements-index-archive {
    position: relative;
    padding: clamp(64px, 6vw, 96px) 0 clamp(88px, 8vw, 128px);
    background:
        linear-gradient(rgba(246, 246, 240, 0.68), rgba(246, 246, 240, 0.78)),
        url("/assets/ui/home-v2/texture-works.087b2fbf05b2e558.jpg") center top / 1920px auto repeat-y;
}

.announcements-index-archive::before {
    content: "";
    position: absolute;
    top: -30px;
    left: -3%;
    width: 106%;
    height: 66px;
    background: rgba(255, 255, 250, 0.7);
    clip-path: polygon(0 38%, 5% 50%, 11% 39%, 17% 55%, 24% 42%, 31% 57%, 38% 40%, 45% 53%, 52% 37%, 60% 55%, 68% 39%, 76% 54%, 84% 40%, 92% 56%, 100% 39%, 100% 100%, 0 100%);
}

.announcements-index-archive__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.announcements-index-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.4vw, 34px);
    width: min(1120px, calc(100% - 52px));
    margin: 0 auto;
}

.announcements-index-card {
    --archive-accent: var(--v2-olive-soft);
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 300px;
    flex-direction: column;
    padding: clamp(34px, 3.4vw, 48px);
    overflow: hidden;
    border: 1px solid rgba(91, 87, 70, 0.1);
    border-top: 7px solid var(--archive-accent);
    border-radius: 5px 4px 8px 3px;
    background:
        radial-gradient(circle at 88% 10%, rgba(230, 232, 216, 0.52), transparent 25%),
        linear-gradient(145deg, #fffefa, #f8f6ee);
    color: #302f28;
    box-shadow:
        9px 10px 0 #e7e4d8,
        0 20px 36px rgba(67, 63, 52, 0.13);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.announcements-index-card:nth-child(3n + 2) {
    --archive-accent: #c87f85;
}

.announcements-index-card:nth-child(3n) {
    --archive-accent: #6b8ea8;
}

.announcements-index-card::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -35px;
    width: 180px;
    height: 120px;
    background: url("/assets/ui/home-v2/paw-pattern.8b5c2bb97a9d892c.png") center / contain no-repeat;
    opacity: 0.025;
    transform: rotate(12deg);
}

.announcements-index-card:hover,
.announcements-index-card:focus-visible {
    border-color: color-mix(in srgb, var(--archive-accent), #554f43 18%);
    box-shadow:
        6px 7px 0 #e2dfd2,
        0 26px 44px rgba(67, 63, 52, 0.17);
    transform: translateY(-5px) rotate(-0.12deg);
}

.announcements-index-card:focus-visible {
    outline: 3px solid rgba(95, 113, 52, 0.36);
    outline-offset: 5px;
}

.announcements-index-card--current {
    --archive-accent: var(--v2-olive);
    grid-column: 1 / -1;
    min-height: 330px;
    padding-right: clamp(42px, 8vw, 120px);
}

.announcements-index-card__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    color: rgba(48, 47, 40, 0.56);
    font-family: var(--v2-font-display-en);
    font-size: 15px;
    font-weight: 650;
    letter-spacing: 0.05em;
}

.announcements-index-card__tag {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 6px 14px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--archive-accent), white 78%);
    color: color-mix(in srgb, var(--archive-accent), #25231e 34%);
    font-family: var(--v2-font-ui);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.announcements-index-card__state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--v2-olive);
    font-family: var(--v2-font-ui);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.announcements-index-card__state i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #82a542;
    box-shadow: 0 0 0 5px rgba(130, 165, 66, 0.13);
}

.announcements-index-card h2 {
    position: relative;
    z-index: 1;
    max-width: 820px;
    margin: 0 0 18px;
    color: #2a2922;
    font-family: var(--v2-font-display-zh);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.2;
    text-wrap: balance;
}

.announcements-index-card--current h2 {
    font-size: clamp(2.7rem, 4.25vw, 4.3rem);
}

html[lang="en"] .announcements-index-card h2 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(2.25rem, 3.25vw, 3.3rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

html[lang="en"] .announcements-index-card--current h2 {
    font-size: clamp(3rem, 4.45vw, 4.55rem);
}

.announcements-index-card > p {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0;
    color: rgba(48, 47, 40, 0.66);
    font-size: 14px;
    line-height: 1.8;
}

.announcements-index-card__link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: max-content;
    margin-top: auto;
    padding-top: 30px;
    color: var(--v2-olive);
    font-size: 13px;
    font-weight: 850;
}

.announcements-index-card__link i {
    font-family: var(--v2-font-ui);
    font-style: normal;
    transition: transform 180ms ease;
}

.announcements-index-card:hover .announcements-index-card__link i,
.announcements-index-card:focus-visible .announcements-index-card__link i {
    transform: translateX(5px);
}

.announcements-index-back {
    display: flex;
    justify-content: center;
    margin-top: clamp(50px, 5vw, 76px);
}

.announcements-index-back a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 24px;
    border: 1px solid var(--v2-olive);
    border-radius: 2px;
    background: var(--v2-olive);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 6px 7px 0 rgba(95, 113, 52, 0.14);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.announcements-index-back a:hover,
.announcements-index-back a:focus-visible {
    background: #4f6028;
    box-shadow: 3px 4px 0 rgba(95, 113, 52, 0.16);
    transform: translate(2px, 2px);
}

@media (max-width: 820px) {
    .announcements-index-hero {
        padding: max(166px, calc(146px + var(--safe-area-top))) 0 70px;
    }

    .announcements-index-title-card {
        width: calc(100% - 32px);
        min-height: 280px;
        padding: 54px 34px 42px;
    }

    .announcements-index-list {
        grid-template-columns: 1fr;
        width: calc(100% - 30px);
    }

    .announcements-index-card--current {
        grid-column: auto;
        padding-right: clamp(34px, 6vw, 48px);
    }
}

@media (max-width: 560px) {
    .announcements-index-hero {
        padding: max(158px, calc(138px + var(--safe-area-top))) 0 58px;
    }

    .announcements-index-hero::after {
        display: none;
    }

    .announcements-index-title-card {
        width: calc(100% - 22px);
        min-height: 250px;
        padding: 54px 24px 38px;
    }

    .announcements-index-title-card::before {
        inset: 12px;
    }

    .announcements-index-title-card__tape {
        top: 18px;
        width: 92px;
        height: 28px;
    }

    .announcements-index-title-card p {
        font-size: 12px;
        letter-spacing: 0.16em;
    }

    .announcements-index-title-card h1 {
        font-size: clamp(3.25rem, 16vw, 4.1rem);
    }

    html[lang="en"] .announcements-index-title-card h1 {
        font-size: clamp(2.55rem, 11vw, 3rem);
        letter-spacing: -0.05em;
    }

    .announcements-index-archive {
        padding-top: 54px;
        padding-bottom: 76px;
    }

    .announcements-index-archive__inner {
        padding-right: 8px;
        padding-left: 8px;
    }

    .announcements-index-list {
        width: 100%;
        gap: 20px;
    }

    .announcements-index-card,
    .announcements-index-card--current {
        min-height: 282px;
        padding: 30px 24px;
        box-shadow:
            6px 7px 0 #e7e4d8,
            0 16px 28px rgba(67, 63, 52, 0.12);
    }

    .announcements-index-card__meta {
        gap: 9px;
        margin-bottom: 21px;
        font-size: 13px;
    }

    .announcements-index-card h2,
    .announcements-index-card--current h2 {
        font-size: clamp(1.9rem, 9.4vw, 2.5rem);
    }

    html[lang="en"] .announcements-index-card h2,
    html[lang="en"] .announcements-index-card--current h2 {
        font-size: clamp(2.1rem, 10.2vw, 2.75rem);
    }

    .announcements-index-card > p {
        font-size: 13px;
        line-height: 1.7;
    }
}

@media (max-width: 360px) {
    html[lang="en"] .announcements-index-title-card h1 {
        font-size: 2.2rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .announcements-index-card,
    .announcements-index-card__link i,
    .announcements-index-back a {
        transition: none;
    }
}

/* Source: css/14-image-resilience.css */
/* Stable image loading and graceful network failure states. */
.site-logo {
    position: relative;
    display: grid !important;
    width: 184px;
    aspect-ratio: 700 / 230;
    overflow: hidden;
    transition: width 0.3s ease;
}

header.compact .site-logo {
    width: 146px;
}

.home-v2-page .site-logo {
    width: clamp(172px, 12.5vw, 196px);
}

.home-v2-page header.compact .site-logo {
    width: 166px;
}

.site-logo__image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

.site-logo__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 3px 7px;
    color: #282821;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease;
}

.site-logo__fallback strong {
    font-family: var(--v2-font-display-zh, "Microsoft YaHei", sans-serif);
    font-size: clamp(16px, 1.15vw, 20px);
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.05;
    white-space: nowrap;
}

.site-logo__fallback small {
    margin-top: 5px;
    font-family: var(--v2-font-display-en, Georgia, serif);
    font-size: clamp(8px, 0.62vw, 10px);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1;
    white-space: nowrap;
}

.logo.is-image-retrying .site-logo__image,
.logo.is-image-unavailable .site-logo__image {
    visibility: hidden;
}

.logo.is-image-retrying .site-logo__fallback,
.logo.is-image-unavailable .site-logo__fallback {
    opacity: 1;
    visibility: visible;
}

img.is-image-retrying:not(.site-logo__image) {
    opacity: 0.16;
    background:
        linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.58) 42%, transparent 64%),
        rgba(222, 221, 211, 0.46);
    background-size: 220% 100%;
    animation: image-resilience-shimmer 1.4s ease-in-out infinite;
}

img.image-load-failed[aria-hidden="true"],
img.image-load-failed[data-image-role="decorative"],
img.image-load-failed--decorative {
    visibility: hidden;
}

.image-error-placeholder {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: min(100%, var(--image-placeholder-width, 100%));
    height: var(--image-placeholder-height, auto);
    min-height: 120px;
    aspect-ratio: var(--image-placeholder-ratio, auto);
    margin: 0;
    padding: 0;
    border: 1px dashed rgba(95, 113, 52, 0.42);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(231, 231, 220, 0.72)),
        #efeee7;
    color: rgba(44, 44, 38, 0.68);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.image-error-placeholder:hover,
.image-error-placeholder:focus-visible {
    border-color: rgba(95, 113, 52, 0.72);
    background: #f8f8f2;
    color: #4f612c;
    outline: none;
}

.image-error-placeholder--passive {
    pointer-events: none;
    cursor: default;
}

.image-error-placeholder .image-error-placeholder__content {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
}

.image-error-placeholder__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: rgba(95, 113, 52, 0.11);
    color: #5f7134;
    font-size: 20px;
    line-height: 1;
}

.image-error-placeholder .image-error-placeholder__title {
    font-size: 13px;
    font-weight: 700;
}

.image-error-placeholder .image-error-placeholder__hint {
    margin-top: 4px;
    font-size: 11px;
}

.home-v2-hero__bg,
.home-v2-notices__bg {
    background-color: #f0efe8;
}

.works-v2-page .work-item > .image-error-placeholder {
    position: absolute;
    inset: 8px 8px 54px;
    width: calc(100% - 16px);
    height: calc(100% - 62px);
    min-height: 0;
    z-index: 0;
}

.about-v2-studio__visual > .image-error-placeholder {
    position: absolute;
    left: 9.9%;
    top: 4.9%;
    width: 83.4%;
    height: 83.1%;
    min-height: 0;
}

.home-v2-polaroid > .image-error-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.services-v2-type-card__image > .image-error-placeholder {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.home-v2-footer__logo {
    width: clamp(220px, 18vw, 292px);
    aspect-ratio: 900 / 222;
}

.home-v2-footer__logo > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes image-resilience-shimmer {
    from { background-position: 160% 0; }
    to { background-position: -80% 0; }
}

@media (max-width: 920px) {
    .home-v2-page .site-logo {
        width: 176px;
    }
}

@media (max-width: 768px) {
    .site-logo {
        width: 156px;
    }

    .services-v2-type-card__image > .image-error-placeholder .image-error-placeholder__content {
        padding: 6px;
    }

    .services-v2-type-card__image > .image-error-placeholder .image-error-placeholder__icon {
        width: 24px;
        height: 24px;
        margin-bottom: 4px;
        font-size: 15px;
    }

    .services-v2-type-card__image > .image-error-placeholder .image-error-placeholder__title {
        font-size: 10px;
        line-height: 1.15;
    }

    .services-v2-type-card__image > .image-error-placeholder .image-error-placeholder__hint {
        display: none;
    }
}

@media (max-width: 640px) {
    .home-v2-page .site-logo {
        width: 150px;
    }

    .home-v2-page header.compact .site-logo {
        width: 144px;
    }
}

@media (max-width: 480px) {
    .site-logo {
        width: 138px;
    }
}

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

    img.is-image-retrying:not(.site-logo__image) {
        animation: none;
    }
}

/* Source: css/15-pages-error.css */
/* 404 page aligned with the current paper and olive visual system. */
.error-v2-main {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: min(760px, 100svh);
    place-items: center;
    overflow: hidden;
    padding: max(150px, calc(116px + var(--safe-area-top))) 22px 82px;
    background:
        linear-gradient(180deg, rgba(255, 255, 251, 0.32), rgba(246, 246, 240, 0.78)),
        url("/assets/ui/home-v2/texture-hero.bb67709d9f9576f8.jpg") center / cover;
}

.error-v2-main::before,
.error-v2-main::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(95, 113, 52, 0.16);
    background-image:
        linear-gradient(rgba(95, 113, 52, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 113, 52, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
}

.error-v2-main::before {
    top: 18%;
    left: -68px;
    width: 310px;
    height: 220px;
    transform: rotate(-7deg);
}

.error-v2-main::after {
    right: -74px;
    bottom: 10%;
    width: 280px;
    height: 190px;
    transform: rotate(8deg);
}

.error-v2-stage {
    width: min(100%, 760px);
}

.error-v2-paper {
    position: relative;
    padding: clamp(52px, 8vw, 84px) clamp(26px, 7vw, 76px) clamp(42px, 6vw, 64px);
    border: 1px solid rgba(95, 113, 52, 0.25);
    border-radius: 3px;
    background:
        linear-gradient(rgba(95, 113, 52, 0.035) 1px, transparent 1px),
        var(--v2-paper);
    background-size: 100% 34px;
    box-shadow: var(--v2-shadow);
    text-align: center;
}

.error-v2-paper__tape {
    position: absolute;
    top: -17px;
    left: 50%;
    width: 142px;
    height: 34px;
    background: rgba(205, 211, 181, 0.84);
    box-shadow: 0 4px 10px rgba(60, 58, 47, 0.08);
    transform: translateX(-50%) rotate(-1deg);
}

.error-v2-paper__sticker {
    position: absolute;
    top: clamp(18px, 4vw, 32px);
    right: clamp(16px, 4vw, 34px);
    width: clamp(62px, 10vw, 88px);
    transform: rotate(7deg);
}

.error-v2-paper__eyebrow {
    margin: 0;
    color: var(--v2-olive);
    font-family: var(--v2-font-display-en);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
}

.error-v2-paper h1 {
    margin: 4px 0 0;
    color: var(--v2-olive);
    font-family: var(--v2-font-display-en);
    font-size: clamp(6.5rem, 18vw, 10rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 0.82;
}

.error-v2-paper h2 {
    margin: 30px 0 0;
    color: var(--v2-ink);
    font-family: var(--v2-font-display-zh);
    font-size: clamp(1.9rem, 5vw, 2.8rem);
    line-height: 1.15;
}

html[lang="en"] .error-v2-paper h2 {
    font-family: var(--v2-font-display-en);
    font-size: clamp(2.3rem, 6vw, 3.4rem);
}

.error-v2-paper__description {
    max-width: 520px;
    margin: 18px auto 0;
    color: #5f6056;
    font-size: clamp(14px, 2.2vw, 17px);
}

.error-v2-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.error-v2-action {
    display: inline-flex;
    min-width: 138px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border: 1px solid var(--v2-olive);
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.error-v2-action--primary {
    background: var(--v2-olive);
    color: #fff;
    box-shadow: 0 10px 20px rgba(95, 113, 52, 0.2);
}

.error-v2-action--secondary {
    background: rgba(255, 255, 255, 0.72);
    color: #4f612c;
}

.error-v2-action:hover,
.error-v2-action:focus-visible {
    transform: translateY(-2px);
}

.error-v2-action--primary:hover,
.error-v2-action--primary:focus-visible {
    background: #52642e;
    color: #fff;
    box-shadow: 0 14px 24px rgba(95, 113, 52, 0.28);
}

.error-v2-action--secondary:hover,
.error-v2-action--secondary:focus-visible {
    background: #eef0e7;
    color: #39471e;
}

@media (max-width: 640px) {
    .error-v2-main {
        min-height: 720px;
        padding: max(176px, calc(148px + var(--safe-area-top))) 16px 60px;
    }

    .error-v2-paper {
        padding-top: 64px;
    }

    .error-v2-paper__sticker {
        width: 62px;
    }
}

@media (max-width: 420px) {
    .error-v2-actions {
        display: grid;
    }

    .error-v2-action {
        width: 100%;
    }
}