:root {
  --ink: #1e1b18;
  --paper: #eee9dd;
  --paper-deep: #ddd4c3;
  --red: #a94335;
  --slate: #63706f;
  --line: rgba(30, 27, 24, .22);
  --sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --serif: "Songti SC", "Noto Serif SC", "STSong", "SimSun", serif;
  --space: clamp(1.25rem, 4vw, 4.4rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
.site-header { position: fixed; z-index: 10; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.2rem var(--space); mix-blend-mode: multiply; }
.wordmark { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; letter-spacing: .24em; white-space: nowrap; }
nav { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); font-size: .82rem; letter-spacing: .08em; }
nav a { position: relative; padding: .3rem 0; }
nav a::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.menu-toggle { display: none; border: 0; padding: .5rem 0 .5rem .7rem; color: var(--ink); background: transparent; }
.menu-toggle span { display: block; width: 1.5rem; height: 1px; margin: .34rem 0; background: currentColor; transition: transform .25s; }
.section { position: relative; padding-right: var(--space); padding-left: var(--space); }
.hero { display: grid; min-height: 100svh; grid-template-columns: minmax(1.1rem, 8vw) minmax(0, 1fr) minmax(9rem, .7fr); align-items: center; gap: clamp(1.5rem, 5vw, 7rem); padding-top: 6rem; padding-bottom: 3rem; }
.reading-rule { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; width: 1px; background: var(--line); }
.reading-rule i { width: .55rem; height: .55rem; margin-left: -.25rem; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); }
.reading-rule i:first-child { border-color: var(--red); background: var(--red); }
.eyebrow, .section-number { margin: 0 0 1.1rem; color: var(--slate); font-size: .72rem; letter-spacing: .16em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; }
h1 { max-width: 8ch; margin-bottom: 1.5rem; font-family: var(--serif); font-size: clamp(2.7rem, 6.7vw, 7rem); line-height: 1.05; letter-spacing: .06em; }
.hero-highlight { margin-bottom: .65rem; color: var(--red); font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.55rem); }
.hero-subtitle { max-width: 27rem; margin-bottom: 2.1rem; color: #4d4942; font-size: clamp(.92rem, 1.35vw, 1.05rem); line-height: 1.9; }
.inline-link { display: inline-flex; gap: .7rem; align-items: center; border-bottom: 1px solid var(--ink); padding-bottom: .35rem; font-size: .86rem; letter-spacing: .1em; }
.inline-link span { color: var(--red); transition: transform .25s; }.inline-link:hover span { transform: translateY(.3rem); }
.hero-sheet { position: relative; height: min(60vh, 36rem); border: 1px solid var(--ink); background: var(--paper-deep); box-shadow: 1.2rem 1.2rem 0 var(--red); transform: rotate(2.5deg); }
.hero-sheet::before { content: ""; position: absolute; top: 13%; bottom: 13%; left: 18%; width: 1px; background: rgba(30,27,24,.34); }
.hero-sheet span { position: absolute; left: 30%; height: 1px; background: rgba(30,27,24,.4); }.hero-sheet span:nth-child(1) { top: 18%; width: 48%; }.hero-sheet span:nth-child(2) { top: 27%; width: 38%; }.hero-sheet span:nth-child(3) { top: 48%; width: 56%; }.hero-sheet span:nth-child(4) { top: 57%; width: 44%; }.hero-sheet span:nth-child(5) { top: 66%; width: 52%; }.hero-sheet span:nth-child(6) { top: 75%; width: 27%; background: var(--red); }
.services { padding-top: clamp(6rem, 13vw, 13rem); padding-bottom: clamp(6rem, 13vw, 13rem); background: var(--ink); color: var(--paper); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: clamp(2.6rem, 7vw, 7rem); }.section-heading .section-number { color: #b0b9b4; }.section-heading h2, .about h2, .advantages h2 { margin-bottom: 0; font-family: var(--serif); font-size: clamp(2.3rem, 5vw, 5.2rem); letter-spacing: .08em; }
.service-list { border-top: 1px solid rgba(238,233,221,.32); }.service-item { display: grid; grid-template-columns: 10% minmax(9rem, 1fr) minmax(16rem, 1.1fr); gap: 2rem; align-items: start; min-height: 17rem; padding: clamp(2rem, 4vw, 4.4rem) 7% 2rem; border-bottom: 1px solid rgba(238,233,221,.32); }.service-item.reverse { padding-left: 19%; }.service-index { color: #b0b9b4; font-size: .75rem; letter-spacing: .14em; }.service-item h3 { margin-bottom: .45rem; font-family: var(--serif); font-size: clamp(1.55rem, 2.6vw, 2.5rem); letter-spacing: .08em; }.service-point { margin-bottom: 0; color: #dd7768; font-size: .87rem; }.service-item > p { margin-bottom: 0; color: #d5d0c7; font-size: .94rem; line-height: 2; }
.about { display: grid; grid-template-columns: minmax(5rem, .5fr) minmax(0, 1.2fr); gap: clamp(2rem, 9vw, 12rem); align-items: start; padding-top: clamp(7rem, 13vw, 13rem); padding-bottom: clamp(7rem, 13vw, 13rem); }.about-tab { display: grid; width: clamp(5rem, 12vw, 10rem); aspect-ratio: 1/2; place-items: center; border: 1px solid var(--red); color: var(--red); font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 4rem); }.about-tab span + span { align-self: end; justify-self: end; margin: 0 .15em .12em 0; }.about-content { max-width: 48rem; }.about-content h2 { margin-bottom: clamp(2rem, 4vw, 4rem); }.about-content > p:last-child { margin-bottom: 0; font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 2.05; letter-spacing: .035em; }
.advantages { padding-top: clamp(5rem, 9vw, 9rem); padding-bottom: clamp(7rem, 13vw, 13rem); background: #ccd1c9; }.advantages-intro { display: flex; justify-content: space-between; align-items: end; margin-bottom: clamp(3rem, 7vw, 7rem); }.advantage-track { max-width: 73rem; margin: 0 auto; padding: 0; list-style: none; border-left: 1px solid rgba(30,27,24,.38); }.advantage-track li { display: grid; grid-template-columns: 17% 1fr; gap: 1.2rem; padding: 0 0 clamp(2.2rem, 5vw, 4.5rem) clamp(1.2rem, 4vw, 4rem); }.advantage-track li:last-child { padding-bottom: 0; }.advantage-track li > span { position: relative; color: var(--red); font-size: .75rem; letter-spacing: .13em; }.advantage-track li > span::before { content: ""; position: absolute; top: .24rem; left: calc(-1 * clamp(1.2rem, 4vw, 4rem) - .28rem); width: .52rem; height: .52rem; border: 1px solid var(--red); border-radius: 50%; background: #ccd1c9; }.advantage-track h3 { margin-bottom: .7rem; font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 2rem); letter-spacing: .07em; }.advantage-track p { max-width: 51rem; margin-bottom: 0; line-height: 1.95; }
.site-footer { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 4rem var(--space) 2.4rem; color: #ddd5c7; background: var(--ink); font-size: .78rem; letter-spacing: .08em; text-align: center; }.site-footer p { margin-bottom: 0; }.site-footer a { border-bottom: 1px solid rgba(221,213,199,.45); padding-bottom: .18rem; }.footer-mark { width: 1.7rem; height: 1.7rem; margin-bottom: 1rem; border: 1px solid #ddd5c7; transform: rotate(45deg); }
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: none; }
@media (min-width: 1440px) { .hero { grid-template-columns: 8vw minmax(35rem, .9fr) minmax(17rem, .45fr); }.service-item { padding-right: 13%; }.about { grid-template-columns: 18% minmax(0, 54rem); justify-content: center; } }
@media (min-aspect-ratio: 2/1) { .hero { min-height: 44rem; }.hero-sheet { height: 27rem; }.services, .about, .advantages { padding-top: 6rem; padding-bottom: 6rem; } }
@media (max-aspect-ratio: 3/4) { .hero { min-height: 100svh; }.hero-sheet { height: 42vh; }.about { padding-top: 6rem; padding-bottom: 6rem; } }
@media (max-width: 767px) { .site-header { padding-top: 1rem; padding-bottom: 1rem; }.menu-toggle { display: block; position: relative; z-index: 2; }nav { position: absolute; top: 0; right: 0; left: 0; display: flex; visibility: hidden; flex-direction: column; gap: 1.1rem; padding: 4.7rem var(--space) 1.3rem; background: var(--paper); opacity: 0; transform: translateY(-1rem); transition: .25s; }nav.open { visibility: visible; opacity: 1; transform: none; }.menu-toggle.open span:first-child { transform: translateY(.19rem) rotate(45deg); }.menu-toggle.open span:last-child { transform: translateY(-.19rem) rotate(-45deg); }.hero { grid-template-columns: .9rem 1fr; gap: 1.15rem; padding-top: 5.5rem; padding-bottom: 3rem; }.hero-sheet { grid-column: 2; width: min(74vw, 22rem); height: 15rem; margin: .4rem 0 1.4rem auto; }.reading-rule { grid-row: span 2; }.service-item, .service-item.reverse { grid-template-columns: 2.1rem 1fr; gap: .7rem 1rem; min-height: 0; padding: 2rem 0; }.service-item > p { grid-column: 2; }.about { grid-template-columns: 4.7rem 1fr; gap: 1.25rem; }.about-tab { width: 4.7rem; }.advantages-intro { display: block; }.advantages-intro .section-number { margin-bottom: .7rem; }.advantage-track li { grid-template-columns: 2.3rem 1fr; }.site-footer { padding-top: 3.2rem; } }
@media (max-width: 430px) { h1 { font-size: clamp(2.45rem, 14vw, 3.55rem); }.hero-subtitle { font-size: .9rem; }.about-content > p:last-child { font-size: 1.03rem; }.service-item h3 { font-size: 1.45rem; } }
@media (orientation: landscape) and (max-height: 500px) { .site-header { padding-top: .65rem; padding-bottom: .65rem; }.hero { min-height: 34rem; grid-template-columns: 3rem minmax(19rem, 1fr) minmax(11rem, .55fr); padding-top: 4.5rem; }.hero-sheet { height: 19rem; }.hero h1 { font-size: clamp(2.7rem, 7vw, 4.3rem); }.reading-rule { gap: .55rem; } }
@media (min-width: 768px) and (max-width: 1099px) { .hero { grid-template-columns: 3.5rem 1fr minmax(12rem, .6fr); }.service-item, .service-item.reverse { padding-right: 3%; padding-left: 3%; }.about { grid-template-columns: 8rem 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }* { transition-duration: .01ms !important; } }