/* roulang page: index */
:root {
      --ink: #1C1917;
      --bronze: #8A734A;
      --bronze-soft: #c4b08a;
      --cinnabar: #8F3D2C;
      --paper: #F4F0E8;
      --card: #FBFAF6;
      --dark: #141210;
      --text: #2C2825;
      --muted: #6B6560;
      --line: rgba(28, 25, 23, .12);
      --line-strong: rgba(28, 25, 23, .22);
      --paper-line: rgba(244, 240, 232, .16);
      --radius: 3px;
      --shadow: 0 10px 28px rgba(28, 25, 23, .045);
      --shadow-hover: 0 14px 32px rgba(28, 25, 23, .08);
      --header-top: 38px;
      --header-main: 74px;
      --container: 1240px;
      --ease: 280ms cubic-bezier(.22, .61, .36, 1);
      --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
      --sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: var(--sans);
      font-size: 17px;
      line-height: 1.8;
      color: var(--text);
      background: var(--paper);
      -webkit-font-smoothing: antialiased;
    }
    body.nav-open { overflow: hidden; }
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, select, textarea { font-family: inherit; }
    button { cursor: pointer; }
    h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.25; color: var(--ink); margin: 0; }
    p { margin: 0; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
    .container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
    .skip {
      position: absolute; left: -999px; top: 0;
      background: var(--ink); color: var(--paper); padding: 8px 12px;
    }
    .skip:focus { left: 12px; top: 12px; z-index: 80; }

    .site-header {
      position: sticky; top: 0; z-index: 50;
      background: var(--paper);
      transition: box-shadow var(--ease), border-color var(--ease);
    }
    .site-header.is-stuck .header-main {
      border-bottom: 1px solid var(--ink);
    }
    .header-top {
      display: flex; align-items: center; justify-content: space-between;
      height: var(--header-top);
      padding: 0 20px;
      background: #efe8d9;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .12em;
      overflow: hidden;
      transition: height var(--ease), opacity var(--ease), padding var(--ease);
    }
    .site-header.is-stuck .header-top {
      height: 0; opacity: 0; padding: 0 20px; pointer-events: none;
    }
    .header-top a { color: var(--ink); }
    .header-top a:hover { color: var(--cinnabar); }
    .header-top-left, .header-top-right { display: flex; gap: 22px; align-items: center; }
    .header-main {
      display: flex; align-items: center; justify-content: space-between;
      height: var(--header-main);
      width: min(100% - 40px, var(--container));
      margin-inline: auto;
      border-bottom: 1px solid transparent;
      gap: 24px;
    }
    .logo {
      display: flex; align-items: baseline; gap: 10px;
      font-family: var(--serif); color: var(--ink); white-space: nowrap;
    }
    .logo-mark {
      width: 18px; height: 18px; border: 1px solid var(--bronze);
      display: inline-grid; place-items: center;
      font-size: 11px; color: var(--bronze); letter-spacing: 0;
    }
    .logo-text { font-size: 20px; font-weight: 500; letter-spacing: .08em; }
    .nav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
    .nav-links a {
      position: relative;
      padding: 10px 12px;
      font-size: 14px;
      letter-spacing: .08em;
      color: var(--text);
      min-height: 44px;
      display: inline-flex; align-items: center;
    }
    .nav-links a::after {
      content: "";
      position: absolute; left: 12px; right: 12px; bottom: 8px;
      height: 1px; width: 0; background: var(--bronze);
      transition: width var(--ease);
    }
    .nav-links a:hover::after,
    .nav-links a.is-active::after { width: calc(100% - 24px); }
    .header-cta { display: flex; align-items: center; gap: 12px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 44px; padding: 0 22px;
      border-radius: var(--radius);
      font-size: 14px; letter-spacing: .12em;
      border: 1px solid var(--ink);
      background: transparent; color: var(--ink);
      transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
    }
    .btn:hover { background: var(--ink); color: var(--paper); }
    .btn:active { transform: translateY(1px); }
    .btn-solid {
      background: var(--cinnabar); color: #f8f1ea; border-color: var(--cinnabar);
    }
    .btn-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
    .btn-ghost { border-color: rgba(28,25,23,.4); background: rgba(251,250,246,.72); }
    .btn-ghost:hover { background: var(--ink); color: var(--paper); }
    .menu-toggle {
      display: none; width: 44px; height: 44px;
      border: 1px solid var(--line); background: transparent; padding: 0;
      position: relative;
    }
    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
      position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ink);
      transition: transform var(--ease), opacity var(--ease), top var(--ease);
    }
    .menu-toggle span { top: 21px; }
    .menu-toggle span::before, .menu-toggle span::after { content: ""; left: 0; right: 0; }
    .menu-toggle span::before { top: -7px; }
    .menu-toggle span::after { top: 7px; }
    body.nav-open .menu-toggle span { background: transparent; }
    body.nav-open .menu-toggle span::before { top: 0; transform: rotate(45deg); }
    body.nav-open .menu-toggle span::after { top: 0; transform: rotate(-45deg); }

    .drawer {
      position: fixed; inset: 0; z-index: 60;
      background: var(--paper);
      transform: translateX(100%);
      transition: transform 360ms cubic-bezier(.22, .61, .36, 1);
      display: flex; flex-direction: column;
      padding: 28px 28px 48px;
      overflow: auto;
    }
    body.nav-open .drawer { transform: translateX(0); }
    .drawer-top { font-size: 13px; color: var(--muted); letter-spacing: .08em; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
    .drawer-top p + p { margin-top: 6px; }
    .drawer-top a { color: var(--ink); }
    .drawer nav { display: flex; flex-direction: column; gap: 4px; }
    .drawer nav a {
      min-height: 48px; display: flex; align-items: center;
      font-family: var(--serif); font-size: 22px; border-bottom: 1px solid var(--line);
    }
    .drawer .btn { width: 100%; margin-top: 24px; }

    .hero {
      position: relative; min-height: calc(100vh - 112px);
      isolation: isolate; overflow: hidden;
      background: var(--dark);
    }
    .slides { position: absolute; inset: 0; }
    .slide {
      position: absolute; inset: 0; opacity: 0;
      transition: opacity 700ms ease;
      background-size: cover; background-position: center;
    }
    .slide.is-on { opacity: 1; }
    .slide::after {
      content: ""; position: absolute; inset: 0;
      background:
        linear-gradient(90deg, rgba(244,240,232,.92) 0%, rgba(244,240,232,.72) 42%, rgba(20,18,16,.28) 100%),
        linear-gradient(180deg, rgba(20,18,16,.08), rgba(20,18,16,.28));
    }
    .hero-inner {
      position: relative; z-index: 2;
      display: grid; grid-template-columns: 1.15fr .85fr;
      gap: 48px; align-items: center;
      min-height: calc(100vh - 112px);
      padding: 64px 0 88px;
    }
    .hero-kicker {
      font-size: 12px; letter-spacing: .28em; color: var(--bronze);
      margin-bottom: 18px;
    }
    .hero h1 {
      font-weight: 200; font-size: clamp(40px, 5.4vw, 68px);
      letter-spacing: .06em; line-height: 1.12;
    }
    .hero-lead {
      margin-top: 22px; max-width: 38em;
      font-size: 16px; color: var(--text); line-height: 1.9;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
    .hero-panel {
      background: var(--card);
      border: 1px solid var(--line-strong);
      padding: 28px 26px 24px;
      box-shadow: var(--shadow);
    }
    .panel-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 18px; gap: 12px;
    }
    .panel-head h2 { font-size: 18px; letter-spacing: .08em; }
    .panel-note { font-size: 12px; letter-spacing: .14em; color: var(--muted); }
    .ring-row { display: grid; grid-template-columns: 132px 1fr; gap: 18px; align-items: center; }
    .ring { position: relative; width: 132px; height: 132px; }
    .ring svg { transform: rotate(-90deg); width: 132px; height: 132px; }
    .ring-label {
      position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
      font-family: var(--serif);
    }
    .ring-label strong { display: block; font-size: 28px; font-weight: 400; line-height: 1; }
    .ring-label span { font-size: 12px; letter-spacing: .12em; color: var(--muted); }
    .ring-copy { font-size: 14px; color: var(--muted); }
    .ring-copy b { color: var(--ink); font-weight: 500; }
    .tiers { margin-top: 22px; border-top: 1px solid var(--line); }
    .tier {
      display: grid; grid-template-columns: 64px 1fr auto;
      gap: 10px; align-items: center;
      padding: 14px 0; border-bottom: 1px solid var(--line);
      min-height: 64px;
    }
    .tier-no { font-family: var(--serif); color: var(--bronze); letter-spacing: .12em; font-size: 13px; }
    .tier h3 { font-size: 16px; }
    .tier p { font-size: 13px; color: var(--muted); line-height: 1.6; }
    .tier-tag { font-size: 12px; letter-spacing: .08em; color: var(--bronze); }
    .hero-controls {
      position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3;
      width: min(100% - 40px, var(--container)); margin-inline: auto;
      display: flex; align-items: center; justify-content: space-between;
    }
    .indicators { display: flex; gap: 8px; }
    .indicators button {
      width: 42px; height: 3px; padding: 0; border: 0;
      background: rgba(28,25,23,.22); min-height: 3px;
    }
    .indicators button.is-on { background: var(--ink); }
    .slide-nav { display: flex; gap: 8px; }
    .icon-btn {
      width: 44px; height: 44px; border: 1px solid var(--ink);
      background: rgba(251,250,246,.7); color: var(--ink);
      display: grid; place-items: center;
    }
    .icon-btn:hover { background: var(--ink); color: var(--paper); }

    .panel { position: relative; padding: 112px 0; }
    .panel-alt { background: #efe9dc; }
    .panel-card { background: var(--card); }
    .chap {
      position: absolute; top: 36px; right: max(20px, calc((100% - var(--container)) / 2));
      font-family: var(--serif); font-weight: 200; font-size: 72px;
      color: rgba(28,25,23,.06); letter-spacing: .08em; line-height: 1; pointer-events: none;
    }
    .sec-kicker {
      display: flex; align-items: center; gap: 14px;
      font-size: 12px; letter-spacing: .28em; color: var(--bronze); margin-bottom: 14px;
    }
    .sec-kicker::before { content: ""; width: 28px; height: 1px; background: var(--bronze); }
    .sec-title {
      font-size: clamp(28px, 3.2vw, 40px); letter-spacing: .08em;
      border-left: 2px solid var(--bronze); padding-left: 16px; font-weight: 400;
    }
    .sec-desc {
      margin-top: 18px; max-width: 46em; color: var(--muted); font-size: 16px;
    }
    .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
    .split.reverse { grid-template-columns: .95fr 1.05fr; }
    .split-img { position: relative; }
    .split-img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border: 1px solid var(--line); }
    .img-cap {
      margin-top: 10px; font-size: 12px; letter-spacing: .14em; color: var(--muted);
    }
    .verify {
      margin-top: 24px; padding: 18px 20px;
      border: 1px solid var(--line); background: var(--paper);
      font-size: 15px; color: var(--text);
    }
    .clause { margin-top: 16px; padding-left: 1.15em; text-indent: -1.15em; color: var(--text); }
    .clause + .clause { margin-top: 10px; }

    .matrix { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: stretch; margin-top: 48px; }
    .svc-item {
      display: grid; grid-template-columns: 64px 1fr; gap: 8px 16px;
      padding: 18px 0; border-bottom: 1px solid var(--line);
    }
    .svc-item:first-child { border-top: 1px solid var(--line); }
    .svc-no { font-family: var(--serif); color: var(--bronze); letter-spacing: .16em; font-size: 13px; padding-top: 4px; }
    .svc-item h3 { font-size: 20px; letter-spacing: .06em; }
    .svc-item p { grid-column: 2; color: var(--muted); font-size: 15px; max-width: 36em; }
    .matrix-visual { position: relative; min-height: 100%; }
    .matrix-visual img { width: 100%; height: 100%; object-fit: cover; min-height: 520px; border: 1px solid var(--line); }

    .layout-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; margin-top: 48px; align-items: start; }
    .point-list li {
      display: grid; grid-template-columns: 36px 1fr; gap: 12px;
      padding: 16px 0; border-bottom: 1px solid var(--line);
    }
    .point-list h3 { font-size: 18px; }
    .point-list p { color: var(--muted); font-size: 15px; margin-top: 6px; }
    .dot {
      width: 28px; height: 28px; border: 1px solid var(--bronze); border-radius: 50%;
      display: grid; place-items: center; font-size: 11px; color: var(--bronze); margin-top: 4px;
    }

    .adv-grid {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr;
      gap: 16px; margin-top: 48px;
    }
    .card {
      background: var(--card); border: 1px solid var(--line);
      padding: 28px 24px 24px; transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
    }
    .card:hover { border-color: var(--bronze); transform: translateY(-2px); box-shadow: var(--shadow); }
    .idx {
      font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--bronze); letter-spacing: .12em;
    }
    .card h3 { margin: 18px 0 10px; font-size: 20px; letter-spacing: .06em; }
    .card p { color: var(--muted); font-size: 15px; }
    .adv-grid .card:first-child { grid-row: span 2; padding: 40px 32px; }
    .adv-grid .card:first-child h3 { font-size: 28px; }
    .badge {
      display: inline-block; padding: 3px 8px;
      background: #ebe3d2; color: var(--bronze);
      font-family: var(--serif); font-size: 12px; letter-spacing: .16em;
    }

    .mag { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 48px; }
    .mag-main, .mag-side article {
      position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--dark);
      min-height: 280px;
    }
    .mag-main { min-height: 580px; }
    .mag-side { display: grid; gap: 16px; }
    .mag img { width: 100%; height: 100%; object-fit: cover; opacity: .72; min-height: 280px; }
    .mag-main img { min-height: 580px; }
    .mag-copy {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 28px 24px; color: #f4efe6;
      background: linear-gradient(180deg, transparent, rgba(20,18,16,.88));
    }
    .mag-copy h3 { color: #f4efe6; font-size: 26px; margin: 8px 0; }
    .mag-copy p { color: rgba(244,240,232,.78); font-size: 14px; }
    .more-link {
      display: inline-flex; margin-top: 28px; min-height: 44px; align-items: center;
      letter-spacing: .16em; font-size: 13px; border-bottom: 1px solid var(--bronze); color: var(--ink);
    }

    .stats {
      background: var(--dark); color: #efe8d9; padding: 72px 0;
    }
    .stats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
    .stat {
      padding: 8px 18px; border-left: 1px solid var(--paper-line); text-align: left;
    }
    .stat:first-child { border-left: 0; }
    .stat b {
      display: block; font-family: var(--serif); font-size: 42px; font-weight: 300; color: #f4efe6; line-height: 1.1;
    }
    .stat b em { font-style: normal; font-size: 16px; margin-left: 4px; color: var(--bronze-soft); }
    .stat span { display: block; margin-top: 8px; font-size: 13px; letter-spacing: .08em; color: rgba(244,240,232,.62); }

    .steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 56px; position: relative; }
    .steps::before {
      content: ""; position: absolute; left: 0; right: 0; top: 18px;
      height: 1px; background: var(--line-strong);
    }
    .step { padding: 0 16px 0 0; position: relative; }
    .step i {
      display: block; width: 11px; height: 11px; background: var(--paper);
      border: 1px solid var(--bronze); border-radius: 50%; position: relative; z-index: 1;
    }
    .step h3 { margin-top: 18px; font-size: 18px; }
    .step p { margin-top: 8px; color: var(--muted); font-size: 14px; }

    .cross { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-top: 48px; }
    .cross h3 { font-size: 26px; margin-bottom: 14px; }
    .cross p { color: var(--muted); }
    .cross ul { margin-top: 18px; }
    .cross li {
      padding: 10px 0 10px 18px; border-bottom: 1px solid var(--line);
      position: relative; font-size: 15px;
    }
    .cross li::before {
      content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 1px; background: var(--bronze);
    }

    .dark-idea { background: var(--dark); color: #efe8d9; padding: 120px 0; }
    .quote-wrap { max-width: 920px; }
    .quote-wrap blockquote {
      margin: 0; font-family: var(--serif); font-weight: 300;
      font-size: clamp(26px, 3.4vw, 40px); line-height: 1.55; color: #f4efe6;
    }
    .quote-line { width: 72px; height: 1px; background: var(--bronze); margin: 28px 0; }
    .quote-wrap p { color: rgba(244,240,232,.7); max-width: 46em; }

    .mosaic {
      display: grid; grid-template-columns: 1.3fr 1fr 1fr;
      grid-auto-rows: 220px; gap: 12px; margin-top: 48px;
    }
    .mosaic article {
      position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--ink);
    }
    .mosaic article:first-child { grid-row: span 2; }
    .mosaic img { width: 100%; height: 100%; object-fit: cover; opacity: .78; }
    .mosaic figcaption {
      position: absolute; left: 16px; right: 16px; bottom: 14px; color: #f4efe6;
    }
    .mosaic h3 { color: #f4efe6; font-size: 18px; }
    .mosaic p { font-size: 13px; color: rgba(244,240,232,.75); }

    .story { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; margin-top: 56px; }
    .story.alt { grid-template-columns: 1.15fr .85fr; }
    .story img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border: 1px solid var(--line); }
    .story h3 { font-size: 26px; margin: 10px 0 14px; }
    .story p { color: var(--muted); }
    .story p + p { margin-top: 12px; }

    .quotes { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; margin-top: 48px; }
    .quote-card {
      background: var(--card); border: 1px solid var(--line); padding: 32px 26px;
      transition: border-color var(--ease), transform var(--ease);
    }
    .quote-card:hover { border-color: var(--bronze); transform: translateY(-2px); }
    .quote-card q {
      display: block; font-family: var(--serif); font-size: 20px; line-height: 1.7;
      quotes: "「" "」";
    }
    .quote-card footer { margin-top: 22px; font-size: 13px; letter-spacing: .08em; color: var(--muted); }

    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
    .news-card {
      background: var(--card); border: 1px solid var(--line); padding: 0;
      transition: border-color var(--ease), transform var(--ease);
    }
    .news-card:hover { border-color: var(--bronze); transform: translateY(-2px); }
    .news-card img { width: 100%; height: 180px; object-fit: cover; }
    .news-body { padding: 20px 20px 22px; }
    .news-body time { font-size: 12px; letter-spacing: .16em; color: var(--bronze); }
    .news-body h3 { font-size: 18px; margin: 8px 0 10px; }
    .news-body p { color: var(--muted); font-size: 14px; }

    .partners { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; margin-top: 40px; }
    .partners span {
      font-family: var(--serif); font-size: 18px; color: rgba(28,25,23,.38);
      letter-spacing: .18em; min-height: 44px; display: inline-flex; align-items: center;
    }

    .faq-list { margin-top: 40px; border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-item button {
      width: 100%; text-align: left; background: transparent; border: 0;
      min-height: 64px; padding: 16px 48px 16px 0;
      font-family: var(--serif); font-size: 20px; color: var(--ink);
      position: relative;
    }
    .faq-item button::after {
      content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
      color: var(--bronze); font-size: 22px;
    }
    .faq-item.is-open button::after { content: "–"; }
    .faq-ans { display: none; padding: 0 8% 20px 0; color: var(--muted); background: #f7f3ea; }
    .faq-item.is-open .faq-ans { display: block; padding-top: 0; }

    .guard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; border: 1px solid var(--line); }
    .guard article {
      padding: 28px 24px; border-right: 1px solid var(--line); background: var(--card);
    }
    .guard article:last-child { border-right: 0; }
    .ico { width: 36px; height: 36px; margin-bottom: 16px; color: var(--bronze); }
    .guard h3 { font-size: 18px; margin-bottom: 8px; }
    .guard p { font-size: 14px; color: var(--muted); }

    .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; margin-top: 40px; }
    .contact-meta h3 { font-size: 22px; margin: 18px 0 8px; }
    .contact-meta a { color: var(--ink); border-bottom: 1px solid var(--bronze); }
    .contact-meta p { color: var(--muted); }
    .form {
      background: var(--card); border: 1px solid var(--line); padding: 32px 28px;
    }
    .form-row { margin-bottom: 18px; }
    .form label { display: block; font-size: 13px; letter-spacing: .12em; margin-bottom: 6px; }
    .form input, .form select, .form textarea {
      width: 100%; border: 0; border-bottom: 1px solid var(--line-strong);
      background: transparent; padding: 10px 0; font-size: 16px; color: var(--ink); border-radius: 0;
    }
    .form textarea { min-height: 120px; resize: vertical; }
    .form input:focus, .form select:focus, .form textarea:focus {
      outline: none; border-bottom-color: var(--bronze);
    }
    .form .error input, .form .error select, .form .error textarea { border-bottom-color: var(--cinnabar); }
    .err { display: none; color: var(--cinnabar); font-size: 12px; margin-top: 6px; }
    .form .error .err { display: block; }
    .form-ok {
      display: none; margin-top: 14px; padding: 12px 14px;
      background: #efe8d9; border: 1px solid var(--bronze); color: var(--ink); font-size: 14px;
    }
    .form-ok.show { display: block; }

    .site-footer {
      background: #1a1715; color: rgba(244,240,232,.72); padding: 64px 0 28px;
      font-size: 14px;
    }
    .foot-grid { display: grid; grid-template-columns: 1.3fr .8fr .9fr 1fr; gap: 36px; }
    .site-footer h2, .site-footer h3 { color: #f4efe6; font-size: 18px; margin-bottom: 16px; }
    .site-footer a { color: rgba(244,240,232,.72); }
    .site-footer a:hover { color: #f4efe6; }
    .foot-nav { display: flex; flex-direction: column; gap: 8px; }
    .foot-nav a { min-height: 32px; display: inline-flex; align-items: center; }
    .legal-block { margin-top: 12px; color: rgba(244,240,232,.55); }
    .legal-block h4 { color: #d7c9ae; font-size: 13px; letter-spacing: .16em; margin: 14px 0 6px; font-family: var(--serif); font-weight: 400; }
    .copy {
      margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(244,240,232,.12);
      display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
      font-size: 12px; letter-spacing: .08em; color: rgba(244,240,232,.45);
    }

    @media (max-width: 1199px) {
      .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 0; }
      .stat { border-left: 0; border-top: 1px solid var(--paper-line); padding: 18px 12px; }
      .adv-grid { grid-template-columns: 1fr 1fr; }
      .adv-grid .card:first-child { grid-row: auto; }
      .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
      .quotes { grid-template-columns: 1fr 1fr; }
      .steps { grid-template-columns: repeat(3, 1fr); gap: 28px 12px; }
      .steps::before { display: none; }
    }
    @media (max-width: 991px) {
      .nav-links, .header-cta .btn { display: none; }
      .menu-toggle { display: block; }
      .hero-inner, .split, .split.reverse, .matrix, .layout-grid, .mag, .cross, .contact-grid, .story, .story.alt {
        grid-template-columns: 1fr; gap: 28px;
      }
      .hero { min-height: auto; }
      .hero-inner { min-height: auto; padding: 48px 0 96px; }
      .matrix-visual img, .mag-main, .mag-main img { min-height: 320px; }
      .news-grid { grid-template-columns: 1fr 1fr; }
      .guard { grid-template-columns: 1fr 1fr; }
      .guard article { border-bottom: 1px solid var(--line); }
      .foot-grid { grid-template-columns: 1fr 1fr; }
      .panel { padding: 72px 0; }
      .chap { font-size: 48px; }
    }
    @media (max-width: 767px) {
      .header-top { display: none; }
      .logo-text { font-size: 16px; letter-spacing: .04em; }
      .container { width: min(100% - 28px, var(--container)); }
      .hero h1 { font-size: 34px; }
      .hero-lead { font-size: 15px; }
      .ring-row { grid-template-columns: 1fr; }
      .tier { grid-template-columns: 48px 1fr; }
      .tier-tag { grid-column: 2; }
      .adv-grid, .quotes, .news-grid, .guard, .stats-grid, .steps, .mosaic, .foot-grid {
        grid-template-columns: 1fr;
      }
      .mosaic article:first-child { grid-row: auto; min-height: 260px; }
      .stat b { font-size: 34px; }
      .panel { padding: 60px 0; }
      .btn { width: auto; }
      .hero-actions .btn { min-width: 44px; }
      .copy { flex-direction: column; }
    }
    @media (max-width: 520px) {
      body { font-size: 16px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .form { padding: 22px 16px; }
      .partners span { font-size: 15px; width: calc(50% - 10px); }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; animation: none !important; }
    }

/* roulang page: index */
:root{
  --ink:#161412;
  --ink-2:#12110F;
  --ink-soft:#2A2622;
  --bronze:#8C7048;
  --bronze-2:#A48A62;
  --seal:#6E2C28;
  --paper:#F3EFE6;
  --paper-2:#E7E2D8;
  --card:#FFFbf5;
  --text:#1C1A17;
  --text-2:#5E584F;
  --text-3:#8A847A;
  --text-inv:#F3EFE6;
  --line:rgba(22,20,18,.08);
  --line-2:rgba(22,20,18,.14);
  --radius:6px;
  --shadow:0 8px 24px rgba(22,20,18,.08);
  --space:32px;
  --section:104px;
  --nav-h:72px;
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Menlo",monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;border:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:.02em;line-height:1.28;color:var(--ink);margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
.container{width:min(1240px,calc(100% - 48px));margin:0 auto}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;background:var(--ink);color:var(--paper);padding:8px 12px;z-index:200}

.topbar{
  height:38px;
  background:var(--ink-soft);
  color:#C8C0B4;
  font-size:12px;
  display:flex;
  align-items:center;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar-left,.topbar-right{display:flex;align-items:center;gap:18px;white-space:nowrap}
.topbar a{color:#E8E1D4}
.topbar a:hover{color:#fff}
.dot{width:3px;height:3px;border-radius:50%;background:var(--bronze);display:inline-block}

.site-header{position:relative;z-index:80}
.nav-bar{
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.nav-bar.is-stuck{
  position:sticky;
  top:0;
  background:var(--ink);
  border-bottom-color:rgba(243,239,230,.08);
  box-shadow:0 8px 24px rgba(22,20,18,.18);
}
.nav-bar.is-stuck .logo-mark{border-color:var(--bronze);color:var(--bronze)}
.nav-bar.is-stuck .logo-text{color:var(--text-inv)}
.nav-bar.is-stuck .logo-text small{color:#B7A88F}
.nav-bar.is-stuck .nav-links a{color:#D9D2C6}
.nav-bar.is-stuck .nav-links a:hover,
.nav-bar.is-stuck .nav-links a.is-active{color:var(--text-inv)}
.nav-bar.is-stuck .nav-toggle span{background:var(--text-inv)}
.nav-inner{
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo-mark{
  width:28px;height:28px;
  border:1px solid var(--bronze);
  color:var(--bronze);
  display:grid;place-items:center;
  font-family:var(--serif);
  font-size:13px;
  border-radius:2px;
}
.logo-text{font-family:var(--serif);font-size:18px;color:var(--ink);line-height:1.15;letter-spacing:.04em}
.logo-text small{display:block;font-family:var(--sans);font-size:10px;color:var(--text-3);letter-spacing:.18em;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-links a{
  position:relative;
  padding:10px 12px;
  font-size:14px;
  color:var(--text-2);
  transition:color .2s;
}
.nav-links a::after{
  content:"";
  position:absolute;left:12px;right:12px;bottom:6px;height:1px;
  background:var(--bronze);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.is-active::after{transform:scaleX(1)}
.nav-cta{flex-shrink:0}
.nav-toggle{
  display:none;width:44px;height:44px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink);transition:.2s}
.nav-bar.is-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-bar.is-open .nav-toggle span:nth-child(2){opacity:0}
.nav-bar.is-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 22px;
  border-radius:4px;
  font-size:14px;letter-spacing:.04em;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}
.btn:focus-visible,.nav-links a:focus-visible,.icon-btn:focus-visible,.faq-q:focus-visible,.form-field input:focus-visible,.form-field select:focus-visible,.form-field textarea:focus-visible{
  outline:2px solid var(--bronze);
  outline-offset:2px;
}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{transform:translateY(-1px);background:#0E0D0C;box-shadow:var(--shadow)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border:1px solid var(--bronze);color:var(--ink);background:transparent}
.btn-ghost:hover{background:rgba(140,112,72,.08)}
.btn-ghost.light{border-color:rgba(243,239,230,.35);color:var(--paper)}
.btn-ghost.light:hover{background:rgba(243,239,230,.08)}
.btn-text{
  position:relative;padding:0;min-height:auto;border-radius:0;color:var(--ink);
}
.btn-text::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--bronze);transition:width .18s ease;
}
.btn-text:hover::after{width:100%}
.badge{
  display:inline-flex;align-items:center;
  height:22px;padding:0 8px;
  border:1px solid rgba(140,112,72,.45);
  color:var(--bronze);
  font-size:11px;letter-spacing:.08em;
  border-radius:2px;
  background:transparent;
}

.hero{
  position:relative;
  min-height:88vh;
  color:var(--text-inv);
  display:flex;flex-direction:column;justify-content:flex-end;
  isolation:isolate;
}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1s ease;
}
.hero-slide.is-active{opacity:1}
.hero-slide img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);
  animation:ken 12s ease-out forwards;
}
@keyframes ken{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,15,.28) 0%,rgba(18,17,15,.55) 42%,rgba(18,17,15,.88) 100%);
}
.hero-content{position:relative;z-index:2;padding:72px 0 28px}
.hero-kicker{
  display:flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.22em;color:#D8CDB8;margin-bottom:22px;
}
.hero-kicker i{display:block;width:36px;height:1px;background:var(--bronze)}
.hero h1{
  color:var(--text-inv);
  font-size:clamp(32px,4.6vw,56px);
  max-width:18em;
  margin-bottom:18px;
}
.hero h1 span{display:block;color:#C4A46A;font-size:.86em;margin-top:6px}
.hero-lead{
  max-width:46em;
  font-size:15px;
  line-height:1.9;
  color:#E6DFD2;
  margin-bottom:28px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  padding-top:18px;
  border-top:1px solid rgba(140,112,72,.45);
  font-size:13px;color:#C9C0B0;
}
.hero-trust b{color:#EFE8DA;font-weight:500;margin-right:6px;font-family:var(--serif)}
.hero-ctrl{
  position:absolute;z-index:3;right:24px;top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px;
}
.icon-btn{
  width:44px;height:44px;border:1px solid rgba(243,239,230,.28);
  color:var(--paper);display:grid;place-items:center;border-radius:4px;
  background:rgba(18,17,15,.28);
}
.icon-btn:hover{border-color:var(--bronze);background:rgba(18,17,15,.5)}
.hero-dots{
  position:absolute;z-index:3;left:50%;bottom:168px;transform:translateX(-50%);
  display:flex;gap:8px;
}
.hero-dots button{
  width:28px;height:3px;background:rgba(243,239,230,.28);border-radius:1px;
}
.hero-dots button.is-active{background:var(--bronze)}

.hero-docket{
  position:relative;z-index:2;
  background:rgba(243,239,230,.94);
  color:var(--text);
  border-top:1px solid rgba(140,112,72,.35);
}
.docket-grid{
  display:grid;
  grid-template-columns:160px 1fr auto;
  gap:28px;
  align-items:center;
  padding:22px 0;
}
.ring-wrap{display:flex;align-items:center;gap:14px}
.ring{
  --p:72;
  width:86px;height:86px;border-radius:50%;
  background:conic-gradient(var(--bronze) calc(var(--p)*1%), rgba(22,20,18,.12) 0);
  display:grid;place-items:center;flex-shrink:0;
}
.ring span{
  width:64px;height:64px;border-radius:50%;
  background:var(--paper);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:18px;color:var(--ink);
}
.ring-meta small{display:block;color:var(--text-3);font-size:12px;letter-spacing:.12em}
.ring-meta strong{font-family:var(--serif);font-size:15px}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tier{
  border:1px solid var(--line-2);
  background:var(--card);
  padding:12px 14px;
  border-radius:4px;
  min-height:74px;
}
.tier em{display:block;font-style:normal;font-size:11px;color:var(--bronze);letter-spacing:.12em;margin-bottom:4px}
.tier b{display:block;font-weight:600;font-size:14px;margin-bottom:2px}
.tier p{font-size:12px;color:var(--text-2);line-height:1.55}

.section{padding:var(--section) 0;position:relative}
.section-alt{background:var(--paper-2)}
.section-dark{background:var(--ink-2);color:var(--text-inv)}
.section-dark h2,.section-dark h3{color:var(--text-inv)}
.section-head{max-width:720px;margin-bottom:48px}
.section-head.wide{max-width:860px}
.eyebrow{
  display:flex;align-items:center;gap:10px;
  color:var(--bronze);font-size:12px;letter-spacing:.2em;margin-bottom:14px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--bronze)}
.section h2{font-size:clamp(26px,3vw,36px);margin-bottom:16px}
.lead{color:var(--text-2);font-size:15px;line-height:1.85}
.section-dark .lead{color:#C9C2B6}
.num{font-family:var(--serif);color:var(--bronze);font-variant-numeric:tabular-nums}

.intro-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.cover-frame{
  position:relative;
  overflow:hidden;
  border-radius:6px;
  background:var(--paper-2);
}
.cover-frame img{width:100%;height:560px;object-fit:cover;transition:transform .6s ease}
.cover-frame:hover img{transform:scale(1.04)}
.cover-frame figcaption{
  position:absolute;left:16px;bottom:16px;
  background:rgba(18,17,15,.72);color:var(--paper);
  font-size:12px;padding:6px 10px;border-radius:2px;
}
.dl{margin-top:28px;border-top:1px solid var(--line-2)}
.dl div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl dt{font-size:13px;color:var(--bronze);letter-spacing:.08em}
.dl dd{margin:0;color:var(--text-2);font-size:14px;line-height:1.7}

.matrix-layout{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start}
.matrix-lead{position:sticky;top:96px}
.matrix-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
.matrix-item{
  padding:28px 24px 24px;
  background:var(--card);
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}
.matrix-item:hover{box-shadow:var(--shadow);z-index:1;position:relative;border-color:rgba(140,112,72,.45)}
.matrix-item .num{display:block;font-size:13px;letter-spacing:.16em;margin-bottom:10px}
.matrix-item h3{font-size:20px;margin-bottom:10px}
.matrix-item p{font-size:14px;color:var(--text-2);line-height:1.75;min-height:4.8em}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tags span{
  font-size:11px;color:var(--text-2);
  border:1px solid var(--line-2);padding:2px 8px;border-radius:2px;
}

.adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.adv-card{
  background:var(--card);
  border:1px solid var(--line);
  padding:28px 24px 24px;
  border-radius:6px;
  min-height:220px;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.adv-card:hover{box-shadow:var(--shadow);border-color:var(--bronze);transform:translateY(-2px)}
.adv-card .num{font-size:12px;letter-spacing:.18em}
.adv-ico{width:36px;height:36px;margin:12px 0 14px;color:var(--bronze)}
.adv-card h3{font-size:20px;margin-bottom:10px}
.adv-card p{font-size:14px;color:var(--text-2);line-height:1.75}

.cover-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mag-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .2s,border-color .2s;
}
.mag-card:hover{box-shadow:var(--shadow);border-color:rgba(140,112,72,.5)}
.mag-card .pic{position:relative;height:240px;overflow:hidden}
.mag-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mag-card:hover img{transform:scale(1.04)}
.mag-card .pic .badge{position:absolute;left:14px;top:14px;background:rgba(255,251,245,.9)}
.mag-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.mag-body h3{font-size:22px;margin:8px 0 12px}
.mag-body ul{list-style:none;margin-bottom:18px}
.mag-body li{
  position:relative;padding-left:14px;
  font-size:14px;color:var(--text-2);line-height:1.8;
}
.mag-body li::before{content:"";position:absolute;left:0;top:.75em;width:6px;height:1px;background:var(--bronze)}
.mag-body .btn-text{margin-top:auto;align-self:flex-start}

.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative}
.timeline::before{
  content:"";position:absolute;left:0;right:0;top:18px;height:1px;background:rgba(140,112,72,.35);
}
.step{padding:0 12px 0 0;position:relative}
.step i{
  display:block;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--bronze);background:var(--paper);
  margin-bottom:18px;position:relative;z-index:1;
}
.step .num{font-size:12px;letter-spacing:.14em}
.step h3{font-size:18px;margin:8px 0 8px}
.step p{font-size:13px;color:var(--text-2);line-height:1.75}

.philo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.quote{
  font-family:var(--serif);
  font-size:clamp(28px,3.4vw,44px);
  line-height:1.35;
  color:var(--text-inv);
}
.quote span{color:#C4A46A}
.philo-points{border-top:1px solid rgba(140,112,72,.35);margin-top:28px}
.philo-points li{
  list-style:none;
  padding:16px 0;
  border-bottom:1px solid rgba(243,239,230,.08);
  display:grid;grid-template-columns:48px 1fr;gap:12px;
  color:#D8D1C5;font-size:14px;line-height:1.75;
}
.philo-cover{height:420px;overflow:hidden;border-radius:6px;border:1px solid rgba(140,112,72,.25)}
.philo-cover img{width:100%;height:100%;object-fit:cover}

.case-wall{display:grid;grid-template-columns:1.35fr .9fr;gap:18px}
.case-main,.case-mini{
  position:relative;overflow:hidden;border-radius:6px;background:#1a1816;color:var(--paper);
  border:1px solid var(--line);
}
.case-main{min-height:520px}
.case-main img,.case-mini img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:transform .5s,opacity .3s}
.case-main:hover img,.case-mini:hover img{transform:scale(1.04);opacity:.82}
.case-cap{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(180deg,transparent,rgba(18,17,15,.88))}
.case-cap .badge{margin-bottom:10px}
.case-cap h3{color:var(--text-inv);font-size:24px;margin-bottom:8px}
.case-cap p{color:#D5CDBF;font-size:14px;line-height:1.7}
.case-side{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.case-mini{min-height:251px}
.case-mini .case-cap{padding:16px}
.case-mini h3{font-size:16px}

.story-grid{display:grid;grid-template-columns:1.2fr 1.2fr .8fr;gap:18px}
.story{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  display:flex;flex-direction:column;
}
.story img{height:210px;width:100%;object-fit:cover}
.story-body{padding:22px}
.story blockquote{
  margin:0 0 16px;
  font-family:var(--serif);
  font-size:18px;line-height:1.65;color:var(--ink);
}
.story p{font-size:14px;color:var(--text-2);line-height:1.8}
.story footer{margin-top:16px;font-size:12px;color:var(--text-3);letter-spacing:.08em}
.story.short img{height:140px}
.story.short blockquote{font-size:16px}

.stats-bar{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(140,112,72,.35);
  background:var(--card);
}
.stat{
  padding:36px 24px;
  text-align:left;
  border-right:1px solid rgba(140,112,72,.22);
}
.stat:last-child{border-right:0}
.stat b{
  display:block;
  font-family:var(--serif);
  font-size:42px;
  color:var(--ink);
  line-height:1;
  margin-bottom:10px;
  font-variant-numeric:tabular-nums;
}
.stat b small{font-size:16px;color:var(--bronze);margin-left:4px}
.stat span{display:block;font-size:13px;color:var(--text-2);line-height:1.7}

.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.review{
  background:var(--card);
  border:1px solid var(--line);
  padding:26px 22px;
  border-radius:6px;
  min-height:260px;
}
.review .q{
  font-family:var(--serif);font-size:42px;line-height:1;color:var(--bronze);display:block;margin-bottom:8px;
}
.review p{font-size:14px;color:var(--text-2);line-height:1.8;min-height:8em}
.dots{display:flex;gap:5px;margin:14px 0}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--bronze);display:block;opacity:.85}
.review cite{font-style:normal;font-size:12px;color:var(--text-3);letter-spacing:.06em}

.partner-grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line-2);
  border-left:1px solid var(--line-2);
}
.partner{
  min-height:92px;
  display:grid;place-items:center;
  text-align:center;
  padding:12px;
  border-right:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
  color:#7A736A;
  font-size:13px;letter-spacing:.08em;
  background:var(--card);
  filter:grayscale(.35);
}

.news-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.news-card{
  display:grid;grid-template-columns:72px 1fr;gap:18px;
  background:var(--card);
  border:1px solid var(--line);
  padding:22px;
  border-radius:6px;
  transition:border-color .2s,box-shadow .2s;
}
.news-card:hover{border-color:var(--bronze);box-shadow:var(--shadow)}
.news-date{display:flex;flex-direction:column;align-items:flex-start;border-right:1px solid var(--line-2);padding-right:12px}
.news-date b{font-family:var(--serif);font-size:28px;line-height:1;color:var(--ink)}
.news-date span{font-size:12px;color:var(--text-3);letter-spacing:.08em;margin-top:6px}
.news-card h3{font-size:18px;margin:8px 0 8px}
.news-card p{font-size:14px;color:var(--text-2);line-height:1.75}

.scene-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.scene{
  position:relative;min-height:280px;overflow:hidden;border-radius:6px;color:var(--paper);
  border:1px solid var(--line);
}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.55);transition:transform .5s}
.scene:hover img{transform:scale(1.04)}
.scene-body{position:relative;z-index:1;padding:22px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.scene h3{color:var(--text-inv);font-size:20px;margin:8px 0}
.scene p{color:#DED6C8;font-size:13px;line-height:1.7}

.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-q{
  width:100%;
  text-align:left;
  min-height:64px;
  padding:18px 48px 18px 0;
  font-size:16px;
  color:var(--ink);
  position:relative;
  font-family:var(--serif);
}
.faq-q::after{
  content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;
  border-right:1px solid var(--bronze);border-bottom:1px solid var(--bronze);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .2s;
}
.faq-q[aria-expanded="true"]::after{transform:translateY(-30%) rotate(225deg)}
.faq-a{
  display:none;
  padding:0 8px 22px 14px;
  border-left:2px solid var(--bronze);
  margin:0 0 8px 0;
  color:var(--text-2);
  font-size:14px;line-height:1.85;
}
.faq-item.is-open .faq-a{display:block}
.faq-a ul{padding-left:1.1em;margin-top:8px}
.faq-a li{margin:4px 0}

.g-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(140,112,72,.35);background:var(--card)}
.g-item{padding:28px 22px;border-right:1px solid rgba(140,112,72,.22)}
.g-item:last-child{border-right:0}
.g-item svg{width:28px;height:28px;color:var(--bronze);margin-bottom:12px}
.g-item h3{font-size:18px;margin-bottom:8px}
.g-item p{font-size:13px;color:var(--text-2);line-height:1.75}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.contact-meta{display:grid;gap:14px;margin-top:24px}
.contact-meta div{display:grid;grid-template-columns:72px 1fr;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.contact-meta dt{font-size:12px;color:var(--bronze);letter-spacing:.1em}
.contact-meta dd{margin:0;font-size:15px}
.form{
  background:var(--card);
  border:1px solid var(--line);
  padding:32px 28px;
  border-radius:6px;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{margin-bottom:18px}
.form-field label{display:block;font-size:12px;letter-spacing:.08em;color:var(--text-2);margin-bottom:6px}
.form-field label i{color:var(--seal);font-style:normal;margin-left:3px}
.form-field input,.form-field select,.form-field textarea{
  width:100%;
  border:0;border-bottom:1px solid var(--line-2);
  background:transparent;
  padding:8px 0 10px;
  border-radius:0;
  outline:none;
  transition:border-color .18s;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-bottom-color:var(--bronze)}
.form-field textarea{min-height:110px;resize:vertical;line-height:1.7}
.form-note{font-size:12px;color:var(--text-3);margin:8px 0 18px;line-height:1.7}
.form-success{
  display:none;
  padding:14px 16px;
  border:1px solid rgba(140,112,72,.4);
  background:rgba(140,112,72,.08);
  color:var(--ink);
  font-size:14px;
  margin-bottom:16px;
}
.form.is-ok .form-success{display:block}
.cta-strip{
  margin-top:64px;
  background:var(--ink);
  color:var(--paper);
  padding:28px 0;
}
.cta-strip .container{display:flex;justify-content:space-between;align-items:center;gap:16px}
.cta-strip p{font-family:var(--serif);font-size:22px;margin:0}

.site-footer{
  background:#0E0D0C;
  color:#C9C2B6;
  padding:64px 0 28px;
  font-size:14px;
}
.foot-grid{display:grid;grid-template-columns:1.3fr .9fr 1.1fr .8fr;gap:32px;margin-bottom:40px}
.site-footer h3{color:var(--paper);font-size:16px;margin-bottom:16px}
.site-footer p{color:#A8A196;line-height:1.8}
.foot-links{list-style:none}
.foot-links a{display:inline-block;padding:4px 0;color:#C9C2B6}
.foot-links a:hover{color:var(--paper)}
.foot-bottom{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(243,239,230,.08);
  padding-top:18px;font-size:12px;color:#8A847A;
}
.to-top{color:#C9C2B6}

.drawer-back{
  position:fixed;inset:0;background:rgba(18,17,15,.45);
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:90;
}
.nav-bar.is-open + .drawer-back,.drawer-back.is-on{opacity:1;pointer-events:auto}
.drawer-copy{display:none}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:1199px){
  .adv-grid{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:repeat(2,1fr)}
  .partner-grid{grid-template-columns:repeat(4,1fr)}
  .scene-rail{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:repeat(3,1fr);gap:28px 12px}
  .timeline::before{display:none}
  .docket-grid{grid-template-columns:1fr;gap:18px}
  .philo-grid,.intro-grid,.contact-grid,.matrix-layout{grid-template-columns:1fr}
  .matrix-lead{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:991px){
  :root{--section:80px}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav-bar.is-open .nav-links{
    display:flex;flex-direction:column;align-items:stretch;
    position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);
    background:var(--paper);z-index:120;
    padding:88px 28px 32px;
    box-shadow:-12px 0 32px rgba(22,20,18,.12);
    overflow:auto;
  }
  .nav-bar.is-open .nav-links a{padding:14px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .nav-bar.is-open .nav-cta{display:block;position:fixed;right:28px;bottom:28px;z-index:121}
  .nav-bar.is-stuck.is-open .nav-links{background:var(--paper)}
  .nav-bar.is-stuck.is-open .nav-links a{color:var(--text)}
  .drawer-copy{display:flex;flex-direction:column;gap:8px;padding:12px 0 18px;font-size:13px;color:var(--text-2)}
  .cover-grid,.story-grid,.news-list,.case-wall{grid-template-columns:1fr}
  .case-side{grid-template-columns:1fr 1fr}
  .case-main{min-height:360px}
  .hero-ctrl{display:none}
  .hero-dots{bottom:auto;top:24px;left:auto;right:24px;transform:none}
  .form-row{grid-template-columns:1fr}
  .g-bar{grid-template-columns:1fr 1fr}
  .g-item:nth-child(2){border-right:0}
  .stats-bar{grid-template-columns:1fr 1fr}
  .stat:nth-child(2){border-right:0}
  .stat{border-bottom:1px solid rgba(140,112,72,.22)}
}
@media (max-width:767px){
  :root{--section:64px}
  .container{width:min(1240px,calc(100% - 32px))}
  .topbar-left span:last-child{display:none}
  .hero{min-height:72vh}
  .hero-content{padding-top:48px}
  .hero-docket .tier-row{grid-template-columns:1fr}
  .intro-grid .cover-frame img{height:320px}
  .matrix-list,.adv-grid,.cover-grid,.timeline,.review-grid,.partner-grid,.scene-rail,.g-bar,.stats-bar,.foot-grid,.case-side{
    grid-template-columns:1fr;
  }
  .dl div{grid-template-columns:1fr;gap:4px}
  .cta-strip .container{flex-direction:column;align-items:flex-start}
  .philo-cover{height:240px}
  .quote{font-size:28px}
  .stat b{font-size:34px}
  .g-item{border-right:0;border-bottom:1px solid rgba(140,112,72,.22)}
}
@media (max-width:519px){
  .topbar{font-size:11px}
  .topbar-left{display:none}
  .news-card{grid-template-columns:1fr}
  .news-date{flex-direction:row;gap:8px;align-items:baseline;border:0;padding:0}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .nav-cta .btn{width:auto}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-slide img{transform:none}
  .reveal{opacity:1;transform:none}
}