/* roulang page: index */
:root {
      --c-clay: #B85A3E;
      --c-clay-deep: #9A4730;
      --c-clay-soft: #D08A72;
      --c-sage: #6F8668;
      --c-sage-deep: #587054;
      --c-brass: #C2A15A;
      --c-brass-soft: #E4D3A4;
      --c-gypsum: #F6F1E8;
      --c-sand: #E8DCCB;
      --c-sand-2: #F3EADF;
      --c-walnut: #3F2C22;
      --c-ink: #2C2622;
      --c-muted: #6B6158;
      --c-line: rgba(63, 44, 34, .14);
      --c-white: #FFFaf4;
      --grad-hero: linear-gradient(120deg, rgba(246, 241, 232, .94) 0%, rgba(232, 220, 203, .55) 48%, rgba(63, 44, 34, .28) 100%);
      --grad-btn: linear-gradient(135deg, #C56A4C 0%, #B85A3E 52%, #A dig4A34 100%);
      --grad-btn: linear-gradient(135deg, #C56A4C 0%, #B85A3E 52%, #A44A34 100%);
      --grad-dark: linear-gradient(180deg, #4A3428 0%, #3F2C22 42%, #2A1D17 100%);
      --shadow: 0 10px 28px rgba(63, 44, 34, .10);
      --shadow-sm: 0 6px 16px rgba(63, 44, 34, .08);
      --shadow-hover: 0 14px 30px rgba(63, 44, 34, .14);
      --radius: 24px;
      --radius-sm: 16px;
      --radius-xs: 12px;
      --pill: 999px;
      --container: 1220px;
      --nav-h: 72px;
      --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
      --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --ease: cubic-bezier(.22, .8, .28, 1);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; padding: 0; overflow-x: clip; }
    body {
      font-family: var(--font-sans);
      color: var(--c-ink);
      background: var(--c-gypsum);
      line-height: 1.78;
      font-size: 16px;
      min-width: 320px;
    }
    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(--font-serif); line-height: 1.28; margin: 0; color: var(--c-walnut); font-weight: 700; }
    p { margin: 0; }
    ul { margin: 0; padding: 0; list-style: none; }
    :focus-visible { outline: 2px solid var(--c-brass); outline-offset: 3px; }
    .skip {
      position: absolute; left: -999px; top: 8px;
    }
    .skip:focus { left: 8px; background: #fff; padding: 8px 12px; z-index: 80; }
    .container { width: min(100% - 32px, var(--container)); margin: 0 auto; }
    .muted { color: var(--c-muted); }
    .lead { max-width: 40em; color: var(--c-muted); font-size: 15.5px; }
    .section { padding: 96px 0; position: relative; }
    .section-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 760px; }
    .section-kicker {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--c-clay); font-size: 13px; font-weight: 600; letter-spacing: .08em;
    }
    .section-kicker::before { content: ""; width: 18px; height: 1.5px; background: var(--c-brass); }
    h2 { font-size: 32px; }
    h3 { font-size: 22px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 22px; border-radius: var(--pill);
      border: 1px solid transparent; font-weight: 600; font-size: 15px;
      transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s, border-color .25s;
    }
    .btn-primary {
      background: var(--grad-btn); color: #fff; box-shadow: 0 8px 18px rgba(184, 90, 62, .28);
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(184, 90, 62, .34); }
    .btn-primary:active { transform: translateY(0); }
    .btn-ghost {
      background: transparent; color: var(--c-sage-deep); border-color: var(--c-sage);
    }
    .btn-ghost:hover { background: rgba(111, 134, 104, .1); transform: translateY(-2px); }
    .btn-light { background: var(--c-white); color: var(--c-walnut); border-color: rgba(255,255,255,.4); }
    .btn-light:hover { transform: translateY(-2px); }
    .btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
    .badge {
      display: inline-flex; align-items: baseline; gap: 6px;
      padding: 8px 14px; border-radius: var(--pill);
      background: rgba(246, 241, 232, .88); border: 1px solid rgba(194, 161, 90, .45);
      color: var(--c-walnut); backdrop-filter: blur(8px);
    }
    .badge b { font-family: var(--font-serif); font-size: 22px; color: var(--c-clay); line-height: 1; }
    .badge span { font-size: 12px; color: var(--c-muted); }
    .tag {
      display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
      border-radius: var(--pill); background: rgba(184, 90, 62, .1); color: var(--c-clay-deep);
      font-size: 12px; font-weight: 600;
    }
    .card {
      background: var(--c-white); border-radius: var(--radius); box-shadow: var(--shadow-sm);
      border: 1px solid rgba(63, 44, 34, .06); overflow: hidden;
      transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s;
    }
    .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(184, 90, 62, .35); }
    .promo-bar {
      background: linear-gradient(90deg, #9A4730, #B85A3E 40%, #C2A15A);
      color: #fff; min-height: 44px;
    }
    .promo-inner {
      width: min(100% - 24px, var(--container)); margin: 0 auto;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      min-height: 44px; font-size: 13px; flex-wrap: wrap; padding: 8px 0;
    }
    .promo-rules { opacity: .92; }
    .countdown { display: flex; gap: 6px; align-items: center; font-weight: 600; }
    .countdown i {
      font-style: normal; min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.16); border-radius: 8px; padding: 0 6px;
    }
    .site-header { position: sticky; top: 0; z-index: 40; }
    .nav-utility {
      background: var(--c-sand); border-bottom: 1px solid var(--c-line);
      transition: transform .3s var(--ease), opacity .3s;
    }
    .site-header.is-compact .nav-utility {
      transform: translateY(-100%); opacity: 0; pointer-events: none; height: 0; overflow: hidden; border: 0;
    }
    .nav-utility-inner {
      width: min(100% - 32px, var(--container)); margin: 0 auto;
      min-height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
      font-size: 13px; color: var(--c-muted);
    }
    .brand-line { font-weight: 600; color: var(--c-walnut); }
    .utility-phone { text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .utility-phone a { color: var(--c-clay-deep); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
    .utility-right { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
    .nav-main {
      background: rgba(246, 241, 232, .92); backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--c-line);
    }
    .site-header.is-stuck .nav-main { box-shadow: var(--shadow-sm); }
    .nav-main-inner {
      width: min(100% - 32px, var(--container)); margin: 0 auto;
      min-height: var(--nav-h); display: flex; align-items: center; gap: 20px;
    }
    .logo {
      display: flex; align-items: center; gap: 10px; min-height: 44px; flex: 0 0 auto;
    }
    .logo-mark {
      width: 40px; height: 40px; border-radius: 12px;
      background: linear-gradient(145deg, #C56A4C, #B85A3E);
      display: grid; place-items: center; box-shadow: 0 6px 14px rgba(184, 90, 62, .28);
    }
    .logo-text { font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--c-walnut); }
    .logo-text small { display: block; font-family: var(--font-sans); font-size: 11px; color: var(--c-muted); font-weight: 500; margin-top: 1px; }
    .nav-links { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; }
    .nav-links a {
      min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center;
      color: var(--c-muted); font-size: 14px; font-weight: 500; border-radius: 12px; position: relative;
    }
    .nav-links a:hover { color: var(--c-walnut); background: rgba(184, 90, 62, .06); }
    .nav-links a.is-active { color: var(--c-clay-deep); }
    .nav-links a.is-active::after {
      content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px;
      background: var(--c-clay); border-radius: 2px;
    }
    .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
    .menu-toggle {
      display: none; width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 12px;
      background: var(--c-white); align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    }
    .menu-toggle span { width: 18px; height: 2px; background: var(--c-walnut); display: block; transition: .2s; }
    .drawer {
      display: none; position: fixed; inset: 0; background: rgba(63, 44, 34, .42); z-index: 50;
    }
    .drawer.is-open { display: block; }
    .drawer-panel {
      position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 360px);
      background: var(--c-gypsum); padding: 24px 20px; display: flex; flex-direction: column; gap: 8px;
      box-shadow: -12px 0 30px rgba(63, 44, 34, .16);
    }
    .drawer-panel a {
      min-height: 48px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; font-weight: 600;
    }
    .drawer-panel a:hover, .drawer-panel a.is-active { background: var(--c-sand); color: var(--c-clay-deep); }
    #hero { padding: 28px 0 40px; }
    .hero-bento {
      display: grid; grid-template-columns: 1.7fr .95fr; grid-template-areas: "main side" "cta cta";
      gap: 16px;
    }
    .hero-main {
      grid-area: main; min-height: 560px; border-radius: 28px; overflow: hidden; position: relative;
      box-shadow: var(--shadow);
    }
    .slides { position: absolute; inset: 0; }
    .slide {
      position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease;
      background-size: cover; background-position: center;
    }
    .slide.is-active { opacity: 1; }
    .slide::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(110deg, rgba(42, 29, 23, .62) 0%, rgba(63, 44, 34, .28) 46%, rgba(184, 90, 62, .18) 100%);
    }
    .hero-copy {
      position: relative; z-index: 2; height: 100%;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 36px; color: #fff; gap: 16px;
    }
    .hero-copy h1 { color: #fff; font-size: 46px; max-width: 16em; text-shadow: 0 8px 24px rgba(0,0,0,.25); }
    .hero-copy .lead { color: rgba(255,250,244,.9); max-width: 38em; }
    .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
    .hero-badges .badge { background: rgba(255,250,244,.16); border-color: rgba(255,255,255,.28); color: #fff; }
    .hero-badges .badge b { color: #F6E2C8; font-size: 20px; }
    .hero-badges .badge span { color: rgba(255,250,244,.86); }
    .carousel-nav {
      position: absolute; z-index: 3; top: 20px; right: 20px; display: flex; gap: 8px;
    }
    .carousel-btn {
      width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
      background: rgba(42, 29, 23, .35); color: #fff; display: grid; place-items: center;
    }
    .carousel-btn:hover { background: rgba(184, 90, 62, .8); }
    .dots { position: absolute; z-index: 3; left: 36px; bottom: 22px; display: flex; gap: 8px; }
    .dots button {
      width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.4); padding: 0; min-height: 10px;
    }
    .dots button.is-active { background: var(--c-brass-soft); width: 22px; border-radius: 8px; }
    .hero-side { grid-area: side; display: grid; gap: 16px; }
    .hero-mini {
      border-radius: 24px; padding: 22px; background: var(--c-white); box-shadow: var(--shadow-sm);
      display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 168px;
      border: 1px solid rgba(63, 44, 34, .06);
    }
    .hero-mini:last-child {
      background: linear-gradient(160deg, #4A3428, #2A1D17); color: #fff;
    }
    .hero-mini h3 { font-size: 20px; }
    .hero-mini:last-child h3, .hero-mini:last-child p { color: #f6f1e8; }
    .mini-num { font-family: var(--font-serif); font-size: 34px; color: var(--c-clay); line-height: 1; }
    .hero-mini:last-child .mini-num { color: var(--c-brass-soft); }
    .hero-cta-bar {
      grid-area: cta; border-radius: 24px; background: var(--c-white);
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 16px 22px; box-shadow: var(--shadow-sm); flex-wrap: wrap;
    }
    .hero-cta-bar p { color: var(--c-muted); font-size: 14px; }
    .hero-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    #metrics { background: var(--c-sand-2); }
    .metrics-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
    }
    .metric-card {
      background: linear-gradient(180deg, #FFFaf4, #F3EADF); border-radius: 24px; padding: 24px;
      min-height: 180px; border: 1px solid rgba(194, 161, 90, .25); box-shadow: var(--shadow-sm);
      display: flex; flex-direction: column; gap: 10px;
    }
    .metric-card:hover { transform: translateY(-4px); border-color: var(--c-clay); }
    .metric-card .num { font-family: var(--font-serif); font-size: 36px; color: var(--c-clay); line-height: 1; }
    .metric-card .unit { font-size: 13px; color: var(--c-sage-deep); font-weight: 600; }
    #intro { background: var(--c-gypsum); }
    .intro-grid {
      display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
    }
    .intro-visual { position: relative; }
    .intro-visual img { width: 100%; height: 460px; object-fit: cover; border-radius: 28px; }
    .intro-float {
      position: absolute; left: 18px; bottom: -22px; background: var(--c-white); border-radius: 20px;
      padding: 16px 18px; box-shadow: var(--shadow); max-width: 240px; border: 1px solid rgba(194,161,90,.35);
    }
    .check-list { display: grid; gap: 10px; margin-top: 18px; }
    .check-list li { display: flex; gap: 10px; color: var(--c-ink); }
    .check-list i {
      flex: 0 0 22px; height: 22px; border-radius: 50%; background: rgba(111,134,104,.16); color: var(--c-sage-deep);
      display: grid; place-items: center; font-style: normal; font-size: 12px; margin-top: 4px;
    }
    #services { background: #fffaf4; }
    .svc-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(170px, auto); gap: 16px;
    }
    .svc {
      border-radius: 24px; padding: 24px; background: var(--c-white); border: 1px solid var(--c-line);
      display: flex; flex-direction: column; gap: 10px; min-height: 100%;
      transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
    }
    .svc:hover { transform: translateY(-5px); border-color: var(--c-clay); box-shadow: var(--shadow); }
    .svc-main {
      grid-column: span 2; grid-row: span 2; padding: 0; overflow: hidden; position: relative; color: #fff;
      background: #3F2C22;
    }
    .svc-main img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; opacity: .78; }
    .svc-main .svc-body { position: absolute; inset: auto 0 0 0; padding: 28px; background: linear-gradient(transparent, rgba(26,16,12,.88)); }
    .svc-main h3, .svc-main p, .svc-main a { color: #fff; }
    .svc-stat {
      background: linear-gradient(160deg, #B85A3E, #8F3F2C); color: #fff; border: 0;
    }
    .svc-stat h3, .svc-stat p, .svc-stat a { color: #fff; }
    .svc-stat .num { font-family: var(--font-serif); font-size: 40px; }
    .ico {
      width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
      background: rgba(184, 90, 62, .1); color: var(--c-clay); font-family: var(--font-serif); font-weight: 700;
    }
    .svc a.more { margin-top: auto; color: var(--c-clay); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
    #plans { background: var(--c-sand-2); }
    .plan-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
    .plan { display: flex; flex-direction: column; min-height: 100%; }
    .plan img { height: 230px; width: 100%; object-fit: cover; }
    .plan.wide img { height: 320px; }
    .plan-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .plan-meta { display: flex; flex-wrap: wrap; gap: 8px; }
    .wall {
      margin-top: 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
    }
    .wall img { height: 110px; width: 100%; object-fit: cover; border-radius: 16px; }
    #compare { background: var(--c-gypsum); }
    .compare-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
    .compare-visual { position: relative; border-radius: 24px; overflow: hidden; min-height: 420px; }
    .compare-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .compare-visual .after { clip-path: inset(0 0 0 52%); }
    .compare-range {
      position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; width: calc(100% - 40px); margin: 0 20px;
    }
    .compare-bars { display: grid; gap: 14px; }
    .cbar { background: var(--c-white); border-radius: 20px; padding: 16px 18px; border: 1px solid var(--c-line); }
    .cbar-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 8px; }
    .track { height: 10px; background: var(--c-sand); border-radius: 99px; overflow: hidden; display: flex; }
    .track .a { background: #C4B6A6; height: 100%; }
    .track .b { background: var(--c-clay); height: 100%; }
    #cases { background: var(--grad-dark); color: #f6f1e8; }
    #cases h2, #cases .section-kicker { color: #f3e2c8; }
    #cases .lead { color: rgba(246,241,232,.78); }
    .cases-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
    .case-hero { position: relative; border-radius: 28px; overflow: hidden; min-height: 420px; }
    .case-hero img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
    .case-hero figcaption {
      position: absolute; left: 0; right: 0; bottom: 0; padding: 24px;
      background: linear-gradient(transparent, rgba(20,12,8,.86));
    }
    .case-slices { display: grid; gap: 12px; }
    .slice {
      display: grid; grid-template-columns: 96px 1fr; gap: 12px; background: rgba(255,250,244,.06);
      border: 1px solid rgba(194,161,90,.22); border-radius: 18px; padding: 10px; color: #f6f1e8;
    }
    .slice img { width: 96px; height: 86px; object-fit: cover; border-radius: 12px; }
    .mile-note { margin-top: 18px; font-size: 13px; color: var(--c-brass-soft); }
    #milestones { background: var(--c-white); }
    .timeline {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; position: relative;
    }
    .timeline::before {
      content: ""; position: absolute; left: 8%; right: 8%; top: 28px; height: 2px;
      background: linear-gradient(90deg, transparent, var(--c-brass), transparent);
    }
    .node {
      background: var(--c-gypsum); border-radius: 20px; padding: 18px 14px 16px; position: relative;
      border: 1px solid var(--c-line); min-height: 210px;
    }
    .node b {
      width: 18px; height: 18px; border-radius: 50%; background: var(--c-clay); display: block; margin-bottom: 16px;
      box-shadow: 0 0 0 6px rgba(184,90,62,.16);
    }
    .node h3 { font-size: 16px; margin-bottom: 8px; }
    .node p { font-size: 13px; color: var(--c-muted); }
    #stories { background: var(--c-sand-2); }
    .story-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; gap: 16px; }
    .story img { height: 210px; width: 100%; object-fit: cover; }
    .story-grid .story:first-child img { height: 280px; }
    .story-body { padding: 18px 20px 22px; display: grid; gap: 8px; }
    #stats {
      padding: 42px 0; background: linear-gradient(90deg, #B85A3E, #9A4730 55%, #6F8668);
      color: #fff;
    }
    .stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: center; }
    .stat-item .n { font-family: var(--font-serif); font-size: 38px; line-height: 1; }
    .stat-item span { display: block; font-size: 13px; opacity: .9; margin-top: 6px; }
    #reviews { background: var(--c-gypsum); }
    .review-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .review { padding: 22px; min-height: 240px; display: flex; flex-direction: column; gap: 10px; }
    .stars { color: var(--c-brass); letter-spacing: 2px; font-size: 14px; }
    .score {
      margin-left: auto; background: rgba(194,161,90,.15); color: var(--c-walnut);
      border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700;
    }
    #news { background: #fffaf4; }
    .news-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
    .news-feature { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 280px; }
    .news-feature img { height: 100%; object-fit: cover; min-height: 280px; }
    .news-list { display: grid; gap: 12px; }
    .news-item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 0; }
    .news-item img { height: 92px; width: 120px; object-fit: cover; }
    .news-item div { padding: 10px 12px 12px 0; }
    .news-item time, .news-feature time { font-size: 12px; color: var(--c-muted); }
    .more-row { margin-top: 18px; }
    #guarantee { background: var(--c-sand-2); }
    .shields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .shield {
      background: var(--c-white); border-radius: 24px; padding: 22px; border: 1px solid rgba(111,134,104,.2);
      min-height: 210px;
    }
    .shield .mark {
      width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
      background: rgba(111,134,104,.12); color: var(--c-sage-deep); margin-bottom: 12px; font-size: 20px;
    }
    .cert-bar {
      margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px;
    }
    .cert-bar span {
      border: 1px dashed var(--c-brass); color: var(--c-walnut); border-radius: 999px; padding: 8px 12px; font-size: 12px;
      background: rgba(194,161,90,.08);
    }
    #scenes { background: var(--c-gypsum); }
    .scene-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 14px; }
    .scene { position: relative; border-radius: 24px; overflow: hidden; min-height: 210px; }
    .scene img { width: 100%; height: 100%; object-fit: cover; min-height: 210px; }
    .scene:first-child { grid-row: span 2; min-height: 440px; }
    .scene figcaption {
      position: absolute; inset: auto 0 0 0; padding: 16px 18px;
      background: linear-gradient(transparent, rgba(42,29,23,.82)); color: #fff;
    }
    #answers { background: #fffaf4; }
    .qa-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
    .qa { background: var(--c-gypsum); border-radius: 20px; padding: 18px; min-height: 180px; border: 1px solid var(--c-line); }
    .qa h3 { font-size: 18px; margin-bottom: 8px; }
    .faq-list { display: grid; gap: 10px; max-width: 920px; }
    .faq-item { background: var(--c-white); border-radius: 18px; border: 1px solid var(--c-line); overflow: hidden; }
    .faq-item button {
      width: 100%; text-align: left; background: none; border: 0; min-height: 56px; padding: 14px 48px 14px 18px;
      font-size: 16px; font-weight: 650; color: var(--c-walnut); position: relative;
    }
    .faq-item button::after {
      content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px;
      border-right: 2px solid var(--c-clay); border-bottom: 2px solid var(--c-clay);
      transform: translateY(-70%) rotate(45deg); transition: transform .2s;
    }
    .faq-item.is-open button::after { transform: translateY(-20%) rotate(225deg); }
    .faq-item .faq-a { display: none; padding: 0 18px 16px; color: var(--c-muted); }
    .faq-item.is-open .faq-a { display: block; }
    #contact { background: var(--c-sand-2); padding-bottom: 80px; }
    .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: stretch; }
    .contact-aside {
      border-radius: 28px; overflow: hidden; position: relative; min-height: 520px; color: #fff;
    }
    .contact-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .contact-aside .shade {
      position: relative; z-index: 1; height: 100%; min-height: 520px; padding: 28px;
      background: linear-gradient(180deg, rgba(42,29,23,.2), rgba(42,29,23,.82));
      display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
    }
    .map-box {
      margin-top: 12px; background: rgba(255,250,244,.1); border: 1px solid rgba(255,255,255,.2);
      border-radius: 16px; padding: 12px; font-size: 13px;
    }
    form.lead {
      background: var(--c-white); border-radius: 28px; padding: 26px; box-shadow: var(--shadow);
      display: grid; gap: 12px;
    }
    .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    label { display: grid; gap: 6px; font-size: 13px; color: var(--c-muted); font-weight: 600; }
    input, select, textarea {
      width: 100%; border: 1px solid var(--c-line); background: var(--c-sand-2); border-radius: 14px;
      min-height: 46px; padding: 10px 12px; color: var(--c-ink); font-size: 15px;
    }
    textarea { min-height: 96px; resize: vertical; }
    input:focus, select:focus, textarea:focus { border-color: var(--c-clay); background: #fff; outline: none; }
    .err { color: #9A4730; font-size: 12px; min-height: 16px; }
    .full { grid-column: 1 / -1; }
    .form-success {
      display: none; background: rgba(111,134,104,.1); border: 1px solid var(--c-sage); color: var(--c-sage-deep);
      border-radius: 16px; padding: 14px;
    }
    .form-success.is-show { display: block; }
    .bottom-cta {
      margin-top: 22px; border-radius: 24px; background: var(--c-walnut); color: #fff;
      display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; flex-wrap: wrap;
    }
    .site-footer { background: #2A1D17; color: rgba(246,241,232,.8); padding: 56px 0 24px; }
    .foot-grid { display: grid; grid-template-columns: 1.3fr .9fr 1fr; gap: 28px; }
    .site-footer h3 { color: #f6f1e8; font-size: 18px; margin-bottom: 12px; }
    .site-footer a { color: rgba(246,241,232,.8); min-height: 36px; display: inline-flex; align-items: center; }
    .site-footer a:hover { color: var(--c-brass-soft); }
    .copy {
      margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08);
      font-size: 13px; color: rgba(246,241,232,.55); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }
    @media (max-width: 1280px) {
      .hero-copy h1 { font-size: 40px; }
      .plan-grid, .story-grid { grid-template-columns: 1fr 1fr; }
      .plan.wide, .story-grid .story:first-child { grid-column: span 2; }
    }
    @media (max-width: 1024px) {
      h2 { font-size: 28px; }
      .hero-bento { grid-template-columns: 1fr 1fr; }
      .hero-main { min-height: 480px; }
      .metrics-grid, .review-grid, .shields, .qa-tiles { grid-template-columns: repeat(2, 1fr); }
      .svc-grid { grid-template-columns: repeat(2, 1fr); }
      .timeline { grid-template-columns: 1fr 1fr; }
      .timeline::before { display: none; }
      .intro-grid, .compare-wrap, .cases-layout, .contact-grid, .news-grid, .news-feature { grid-template-columns: 1fr; }
      .scene-grid { grid-template-columns: 1fr 1fr; }
      .scene:first-child { grid-row: auto; min-height: 240px; }
      .nav-links { display: none; }
      .menu-toggle { display: flex; }
      .stats-row { grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .wall { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
      .section { padding: 72px 0; }
      .nav-utility-inner { grid-template-columns: 1fr auto; }
      .brand-line { display: none; }
      .utility-right .hours { display: none; }
      .hero-bento { grid-template-columns: 1fr; grid-template-areas: "main" "side" "cta"; }
      .hero-copy { padding: 22px; }
      .hero-copy h1 { font-size: 32px; }
      .hero-main { min-height: 520px; }
      .plan-grid, .story-grid, .foot-grid { grid-template-columns: 1fr; }
      .plan.wide, .story-grid .story:first-child { grid-column: auto; }
      .fields { grid-template-columns: 1fr; }
      .metrics-grid { grid-template-columns: 1fr 1fr; }
      .intro-visual img { height: 280px; }
      .wall { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px) {
      .container { width: min(100% - 20px, var(--container)); }
      h2 { font-size: 26px; }
      .hero-copy h1 { font-size: 30px; }
      .qa-tiles, .metrics-grid, .review-grid, .shields, .scene-grid, .stats-row { grid-template-columns: 1fr; }
      .svc-grid { grid-template-columns: 1fr; }
      .svc-main { grid-column: auto; grid-row: auto; }
      .timeline { grid-template-columns: 1fr; }
      .promo-inner { justify-content: center; text-align: center; }
      .hero-cta-bar, .bottom-cta { justify-content: center; text-align: center; }
      .copy { justify-content: center; text-align: center; }
      .news-item { grid-template-columns: 1fr; }
      .news-item img { width: 100%; height: 160px; }
      .slice { grid-template-columns: 1fr; }
      .slice img { width: 100%; height: 140px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition: none !important; animation: none !important; }
    }

/* roulang page: index */
:root {
      --terra: #B85A3E;
      --terra-d: #9A4630;
      --terra-l: #C9785E;
      --sage: #6F8668;
      --sage-d: #587056;
      --brass: #C2A15A;
      --gypsum: #F6F1E8;
      --sand: #E8DCCB;
      --cream: #FBF7F0;
      --walnut: #3F2C22;
      --ink: #241811;
      --text: #2C2622;
      --muted: #6B6158;
      --line: rgba(63, 44, 34, .14);
      --line-s: rgba(63, 44, 34, .08);
      --white: #FFFCFA;
      --danger: #A33B2B;
      --ok: #5E7A58;
      --r-card: 24px;
      --r-hero: 28px;
      --r-btn: 999px;
      --r-in: 14px;
      --shadow: 0 8px 24px rgba(63, 44, 34, .10);
      --shadow-sm: 0 4px 14px rgba(63, 44, 34, .08);
      --shadow-h: 0 12px 28px rgba(63, 44, 34, .14);
      --w: 1240px;
      --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
      --sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --grad-btn: linear-gradient(135deg, #B85A3E 0%, #C97A62 100%);
      --grad-sage: linear-gradient(135deg, #6F8668, #88A07E);
      --grad-dark: linear-gradient(180deg, #3F2C22 0%, #1E1410 100%);
      --space: 96px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.78;
      color: var(--text);
      background: var(--gypsum);
      overflow-x: 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: 600; line-height: 1.28; color: var(--walnut); margin: 0; }
    p { margin: 0; }
    ul { margin: 0; padding: 0; list-style: none; }
    :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
    .container { width: min(100% - 40px, var(--w)); margin: 0 auto; }
    .skip {
      position: absolute; left: -999px; top: 8px;
    }
    .skip:focus { left: 8px; z-index: 80; background: #fff; padding: 8px 12px; }

    .promo {
      background: linear-gradient(90deg, #3F2C22, #5A3B2C);
      color: #F6F1E8;
      font-size: 13px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 8px 16px;
      letter-spacing: .02em;
    }
    .promo strong { color: var(--brass); font-weight: 600; }
    .promo-time { display: inline-flex; gap: 6px; align-items: center; }
    .promo-time b {
      min-width: 28px; height: 28px; padding: 0 6px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(194,161,90,.18); border: 1px solid rgba(194,161,90,.45);
      border-radius: 6px; color: #F3E2B0; font-variant-numeric: tabular-nums;
    }

    .site-header { position: relative; z-index: 50; }
    .topbar {
      background: var(--cream);
      border-bottom: 1px solid var(--line-s);
      min-height: 44px;
    }
    .topbar-inner {
      width: min(100% - 40px, var(--w));
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      min-height: 44px;
      gap: 12px;
      font-size: 13px;
      color: var(--muted);
    }
    .topbar-brand { justify-self: start; }
    .topbar-phone { justify-self: center; display: flex; align-items: center; gap: 8px; }
    .topbar-phone a {
      color: var(--walnut); font-weight: 600; min-height: 44px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .topbar-phone a:hover { color: var(--terra); }
    .topbar-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
    .topbar-right a.mini {
      min-height: 36px; padding: 0 14px; border-radius: var(--r-btn);
      background: var(--grad-btn); color: #fff; font-size: 13px; font-weight: 600;
      display: inline-flex; align-items: center;
    }
    .topbar-right a.mini:hover { filter: brightness(1.05); }
    .mainbar {
      background: rgba(246, 241, 232, .92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line-s);
    }
    .mainbar.is-sticky {
      position: sticky; top: 0; box-shadow: var(--shadow-sm);
    }
    .mainbar-inner {
      width: min(100% - 40px, var(--w));
      margin: 0 auto;
      display: flex; align-items: center; gap: 20px;
      min-height: 72px;
    }
    .logo {
      display: flex; align-items: center; gap: 10px;
      min-height: 44px; flex-shrink: 0;
    }
    .logo-mark {
      width: 40px; height: 40px; border-radius: 12px;
      background: linear-gradient(145deg, #C9785E, #B85A3E);
      color: #fff; display: grid; place-items: center;
      font-family: var(--serif); font-size: 18px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    }
    .logo-text { display: flex; flex-direction: column; line-height: 1.15; }
    .logo-text b { font-family: var(--serif); font-size: 18px; color: var(--walnut); font-weight: 700; }
    .logo-text span { font-size: 11px; color: var(--muted); letter-spacing: .12em; }
    .nav {
      display: flex; align-items: center; gap: 4px; margin-left: auto;
    }
    .nav a {
      min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center;
      font-size: 14px; color: var(--text); border-radius: 999px; position: relative;
    }
    .nav a:hover { color: var(--terra); background: rgba(184,90,62,.06); }
    .nav a.is-active { color: var(--terra); font-weight: 600; }
    .nav a.is-active::after {
      content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px;
      background: var(--terra); border-radius: 2px;
    }
    .nav-cta {
      margin-left: 8px; min-height: 44px; padding: 0 18px; border: 0;
      border-radius: var(--r-btn); background: var(--grad-btn); color: #fff !important;
      font-weight: 600; display: inline-flex; align-items: center; box-shadow: var(--shadow-sm);
    }
    .nav-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
    .nav a.nav-cta::after { display: none; }
    .menu-btn {
      display: none; width: 44px; height: 44px; border: 1px solid var(--line);
      background: #fff; border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
    }
    .menu-btn span { width: 18px; height: 2px; background: var(--walnut); display: block; }
    .drawer {
      display: none; position: fixed; inset: 0; z-index: 70;
      background: rgba(36, 24, 17, .46);
    }
    .drawer.open { display: block; }
    .drawer-panel {
      position: absolute; right: 0; top: 0; bottom: 0; width: min(86vw, 360px);
      background: var(--gypsum); padding: 24px 22px; overflow: auto;
      box-shadow: -12px 0 32px rgba(63,44,34,.16);
    }
    .drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
    .drawer a {
      display: flex; align-items: center; min-height: 48px; padding: 0 12px;
      border-radius: 12px; color: var(--walnut);
    }
    .drawer a:hover, .drawer a.is-active { background: var(--sand); color: var(--terra); }
    .icon-btn {
      width: 44px; height: 44px; border: 1px solid var(--line); background: #fff;
      border-radius: 12px; display: grid; place-items: center;
    }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); border: 1px solid transparent;
      font-size: 15px; font-weight: 600; transition: .2s ease; text-align: center;
    }
    .btn-primary { background: var(--grad-btn); color: #fff; box-shadow: var(--shadow-sm); }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }
    .btn-primary:active { transform: translateY(0); }
    .btn-ghost {
      background: transparent; color: var(--sage-d); border-color: var(--sage);
    }
    .btn-ghost:hover { background: rgba(111,134,104,.1); }
    .btn-light { background: #fff; color: var(--walnut); border-color: var(--line); }
    .btn-light:hover { border-color: var(--terra); color: var(--terra); }
    .btn[disabled] { opacity: .5; pointer-events: none; }

    .badge {
      display: inline-flex; align-items: baseline; gap: 6px;
      padding: 6px 12px; border-radius: 999px; background: rgba(246,241,232,.9);
      border: 1px solid rgba(194,161,90,.45); color: var(--walnut); font-size: 13px;
    }
    .badge b { font-family: var(--serif); font-size: 22px; color: var(--terra); line-height: 1; }
    .badge em { font-style: normal; color: var(--muted); font-size: 12px; }
    .tag {
      display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
      border-radius: 999px; background: rgba(184,90,62,.1); color: var(--terra); font-size: 12px; font-weight: 600;
    }
    .tag.sage { background: rgba(111,134,104,.14); color: var(--sage-d); }
    .tag.brass { background: rgba(194,161,90,.18); color: #8A6D2C; }

    main { display: block; }
    section { position: relative; }
    .sec {
      padding: var(--space) 0;
    }
    .sec-sand { background: var(--sand); }
    .sec-white { background: var(--cream); }
    .sec-gypsum { background: var(--gypsum); }
    .kicker {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 13px; letter-spacing: .18em; color: var(--terra); font-weight: 600; margin-bottom: 10px;
    }
    .kicker::before { content: ""; width: 18px; height: 1px; background: var(--brass); }
    .sec-head { max-width: 42em; margin-bottom: 36px; }
    .sec-head h2 { font-size: 32px; margin-bottom: 12px; }
    .sec-head p { color: var(--muted); font-size: 16px; }
    .link-more {
      display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
      color: var(--terra); font-weight: 600; font-size: 14px;
    }
    .link-more:hover { gap: 10px; }

    .hero { padding: 28px 0 8px; }
    .hero-bento {
      display: grid;
      grid-template-columns: 1.55fr .95fr;
      grid-template-rows: auto auto auto;
      gap: 16px;
    }
    .hero-main {
      grid-row: 1 / 3;
      min-height: 520px;
      border-radius: var(--r-hero);
      overflow: hidden;
      position: relative;
      box-shadow: var(--shadow);
    }
    .slides { position: absolute; inset: 0; }
    .slide {
      position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
      background-size: cover; background-position: center;
    }
    .slide.is-on { opacity: 1; }
    .slide::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(36,24,17,.72) 8%, rgba(36,24,17,.28) 58%, rgba(184,90,62,.18) 100%);
    }
    .slide-inner {
      position: relative; z-index: 2; height: 100%;
      padding: 42px 42px 88px; display: flex; flex-direction: column; justify-content: flex-end;
      color: #F6F1E8; max-width: 640px;
    }
    .slide-inner h1, .slide-inner h2 { color: #FFFCFA; font-size: 42px; margin: 8px 0 14px; }
    .slide-inner p { color: rgba(246,241,232,.9); max-width: 36em; }
    .hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
    .hero-badges .badge { background: rgba(255,252,250,.12); border-color: rgba(194,161,90,.4); color: #F6F1E8; }
    .hero-badges .badge b { color: #F3E2B0; font-size: 20px; }
    .carousel-nav {
      position: absolute; z-index: 3; right: 18px; bottom: 18px; display: flex; gap: 8px; align-items: center;
    }
    .carousel-nav button {
      width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
      background: rgba(36,24,17,.35); color: #fff; display: grid; place-items: center;
    }
    .carousel-nav button:hover { background: var(--terra); }
    .dots { position: absolute; z-index: 3; left: 42px; bottom: 26px; display: flex; gap: 8px; }
    .dots button {
      width: 28px; height: 8px; border: 0; border-radius: 99px; background: rgba(255,255,255,.35); padding: 0; min-height: 8px;
    }
    .dots button[aria-current="true"] { background: var(--brass); width: 36px; }
    .pause-btn {
      position: absolute; z-index: 3; right: 118px; bottom: 18px;
      min-height: 44px; padding: 0 14px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.28); background: rgba(36,24,17,.35); color: #fff; font-size: 13px;
    }
    .hero-side {
      border-radius: var(--r-card); overflow: hidden; min-height: 248px;
      background: #fff; box-shadow: var(--shadow-sm); border: 1px solid var(--line-s);
      padding: 22px; display: flex; flex-direction: column; justify-content: space-between;
      background-size: cover; background-position: center; position: relative;
    }
    .hero-side::before {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(251,247,240,.2), rgba(251,247,240,.92) 48%, #FBF7F0);
    }
    .hero-side > * { position: relative; z-index: 1; }
    .hero-side h3 { font-size: 22px; margin: 8px 0; }
    .hero-side p { color: var(--muted); font-size: 14px; }
    .hero-cta {
      grid-column: 1 / -1;
      background: linear-gradient(135deg, #FBF7F0, #E8DCCB);
      border: 1px solid var(--line-s);
      border-radius: var(--r-card);
      padding: 16px 20px;
      display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
      box-shadow: var(--shadow-sm);
    }
    .hero-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .hero-cta p { color: var(--muted); font-size: 14px; }
    .hero-cta strong { color: var(--walnut); }

    .metrics-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    }
    .metric-card {
      background: #fff; border-radius: var(--r-card); padding: 22px 20px 20px;
      border: 1px solid var(--line-s); box-shadow: var(--shadow-sm);
      min-height: 168px; transition: .2s ease;
    }
    .metric-card:hover { transform: translateY(-4px); border-color: rgba(184,90,62,.35); box-shadow: var(--shadow); }
    .metric-card .num { font-family: var(--serif); font-size: 34px; color: var(--terra); line-height: 1; }
    .metric-card .unit { font-size: 13px; color: var(--muted); margin-left: 4px; }
    .metric-card h3 { font-size: 16px; margin: 10px 0 6px; font-family: var(--sans); }
    .metric-card p { font-size: 13px; color: var(--muted); }

    .intro-grid {
      display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
    }
    .intro-visual { position: relative; }
    .intro-visual img {
      width: 100%; height: 520px; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow);
    }
    .intro-float {
      position: absolute; left: -18px; bottom: 28px; width: min(78%, 320px);
      background: rgba(251,247,240,.94); border-radius: 20px; padding: 16px 18px;
      border: 1px solid rgba(194,161,90,.35); box-shadow: var(--shadow);
    }
    .intro-copy h2 { font-size: 32px; margin: 8px 0 14px; }
    .intro-copy p { color: var(--muted); margin-bottom: 12px; max-width: 38em; }
    .spec-list { display: grid; gap: 10px; margin: 18px 0 22px; }
    .spec-list li {
      display: grid; grid-template-columns: 86px 1fr; gap: 10px; align-items: start;
      padding: 12px 14px; background: #fff; border-radius: 16px; border: 1px solid var(--line-s);
      font-size: 14px;
    }
    .spec-list b { color: var(--terra); font-size: 13px; }

    .service-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: auto auto auto;
      gap: 16px;
    }
    .svc {
      background: #fff; border-radius: 26px; padding: 24px; border: 1px solid var(--line-s);
      box-shadow: var(--shadow-sm); transition: .22s ease; display: flex; flex-direction: column; min-height: 210px;
    }
    .svc:hover { transform: translateY(-6px); border-color: var(--terra); box-shadow: var(--shadow-h); }
    .svc:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 360px; background: linear-gradient(160deg, #fff, #F6F1E8); }
    .svc:nth-child(2) { grid-column: 3 / 5; }
    .svc:nth-child(3) { grid-column: 3 / 4; }
    .svc:nth-child(4) { grid-column: 4 / 5; }
    .svc:nth-child(5) { grid-column: 1 / 3; }
    .svc:nth-child(6) {
      grid-column: 3 / 5;
      background: linear-gradient(160deg, #3F2C22, #2A1C16); color: #F6F1E8;
      border-color: transparent;
    }
    .svc:nth-child(6) h3, .svc:nth-child(6) p { color: #F6F1E8; }
    .svc-no {
      width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
      background: rgba(184,90,62,.12); color: var(--terra); font-family: var(--serif); font-weight: 700;
    }
    .svc:nth-child(6) .svc-no { background: rgba(194,161,90,.16); color: var(--brass); }
    .svc h3 { font-size: 22px; margin: 14px 0 8px; }
    .svc p { color: var(--muted); font-size: 14px; flex: 1; }
    .svc .link-more { margin-top: 12px; }

    .plan-grid {
      display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px;
    }
    .plan {
      background: #fff; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-s);
      box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: .2s ease;
    }
    .plan:hover { transform: translateY(-6px); border-color: var(--terra); }
    .plan img { width: 100%; height: 220px; object-fit: cover; }
    .plan:first-child img { height: 280px; }
    .plan-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
    .plan-body h3 { font-size: 20px; }
    .plan-body p { color: var(--muted); font-size: 14px; }
    .plan-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }

    .compare-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
    .compare-stage { position: relative; border-radius: 28px; overflow: hidden; min-height: 420px; box-shadow: var(--shadow); }
    .compare-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .compare-stage .after { clip-path: inset(0 0 0 50%); }
    .compare-stage input[type=range] {
      position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3;
    }
    .compare-handle {
      position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #F3E2B0; z-index: 2;
    }
    .compare-handle span {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 44px; height: 44px; border-radius: 50%; background: var(--terra); color: #fff;
      display: grid; place-items: center; box-shadow: var(--shadow);
    }
    .lab {
      position: absolute; top: 16px; z-index: 2; padding: 6px 12px; border-radius: 999px;
      background: rgba(36,24,17,.55); color: #fff; font-size: 12px;
    }
    .lab.l { left: 16px; } .lab.r { right: 16px; }
    .compare-list { display: grid; gap: 12px; }
    .cmp {
      background: #fff; border-radius: 18px; padding: 14px 16px; border: 1px solid var(--line-s);
    }
    .cmp h3 { font-size: 16px; font-family: var(--sans); margin-bottom: 8px; }
    .bar { height: 8px; background: var(--sand); border-radius: 99px; overflow: hidden; display: flex; }
    .bar i { display: block; height: 100%; }
    .bar .before { background: #C4B3A3; }
    .bar .after { background: var(--terra); }
    .cmp-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }

    .cases {
      background: var(--grad-dark); color: #F6F1E8; padding: 96px 0;
    }
    .cases h2, .cases h3 { color: #FFFCFA; }
    .cases .sec-head p { color: rgba(246,241,232,.78); }
    .case-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; }
    .case-hero {
      min-height: 460px; border-radius: 28px; overflow: hidden; position: relative;
      background-size: cover; background-position: center;
    }
    .case-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(24,16,12,.78)); }
    .case-hero-copy { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 24px; }
    .case-slices { display: grid; gap: 14px; }
    .slice {
      display: grid; grid-template-columns: 112px 1fr; gap: 12px; background: rgba(255,252,250,.06);
      border: 1px solid rgba(194,161,90,.22); border-radius: 20px; overflow: hidden;
    }
    .slice img { width: 112px; height: 112px; object-fit: cover; }
    .slice-body { padding: 12px 12px 12px 0; }
    .slice-body p { color: rgba(246,241,232,.72); font-size: 13px; }
    .mile-note {
      margin-top: 10px; font-size: 13px; color: var(--brass);
    }

    .timeline {
      display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; position: relative;
    }
    .timeline::before {
      content: ""; position: absolute; left: 8px; right: 8px; top: 22px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--brass), transparent);
    }
    .node {
      background: #fff; border-radius: 20px; padding: 18px 14px 16px; border: 1px solid var(--line-s);
      position: relative; min-height: 210px;
    }
    .node i {
      width: 14px; height: 14px; border-radius: 50%; background: var(--terra);
      display: block; margin-bottom: 18px; box-shadow: 0 0 0 4px rgba(184,90,62,.16);
    }
    .node h3 { font-size: 16px; margin-bottom: 8px; }
    .node p { font-size: 13px; color: var(--muted); }
    .node .out { margin-top: 10px; font-size: 12px; color: var(--terra); font-weight: 600; }

    .story-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; }
    .story { background: #fff; border-radius: 26px; overflow: hidden; border: 1px solid var(--line-s); box-shadow: var(--shadow-sm); }
    .story img { width: 100%; height: 200px; object-fit: cover; }
    .story-body { padding: 18px; }
    .story-body h3 { font-size: 20px; margin: 8px 0; }
    .story-body p { color: var(--muted); font-size: 14px; }

    .stats {
      background: linear-gradient(90deg, #B85A3E, #9A4630);
      color: #fff; padding: 42px 0;
    }
    .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: center; }
    .stat b { display: block; font-family: var(--serif); font-size: 36px; line-height: 1.1; }
    .stat span { font-size: 13px; opacity: .88; }

    .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .review {
      background: #fff; border-radius: 24px; padding: 22px; border: 1px solid var(--line-s);
      box-shadow: var(--shadow-sm); min-height: 220px;
    }
    .review:hover { transform: translateY(-4px); border-color: rgba(184,90,62,.3); }
    .mono {
      width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
      background: var(--sand); color: var(--walnut); font-family: var(--serif); font-weight: 700;
    }
    .review-top { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
    .stars { color: var(--brass); letter-spacing: 2px; font-size: 13px; }
    .review p { font-size: 14px; color: var(--text); }
    .review .meta { margin-top: 12px; font-size: 12px; color: var(--muted); }

    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .news {
      background: #fff; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-s);
      display: grid; grid-template-columns: 128px 1fr;
    }
    .news img { width: 128px; height: 100%; object-fit: cover; min-height: 140px; }
    .news-body { padding: 14px 16px; }
    .news time { font-size: 12px; color: var(--muted); }
    .news h3 { font-size: 16px; margin: 6px 0; }
    .news p { font-size: 13px; color: var(--muted); }

    .shield-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 14px; }
    .shield {
      background: #fff; border-radius: 22px; padding: 20px; border: 1px solid var(--line-s); min-height: 180px;
    }
    .shield.lead {
      background: linear-gradient(160deg, #FBF7F0, #E8DCCB);
      border-color: rgba(194,161,90,.35);
    }
    .shield h3 { font-size: 18px; margin: 10px 0; }
    .shield p { font-size: 14px; color: var(--muted); }
    .certs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .certs span {
      border: 1px solid rgba(194,161,90,.45); color: #8A6D2C; border-radius: 999px;
      padding: 6px 10px; font-size: 12px;
    }

    .scene-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
    .scene {
      grid-column: span 2; min-height: 210px; border-radius: 22px; overflow: hidden; position: relative;
      display: flex; align-items: flex-end; color: #fff; padding: 18px; background-size: cover; background-position: center;
    }
    .scene:nth-child(1) { grid-column: span 3; min-height: 240px; }
    .scene:nth-child(2) { grid-column: span 3; min-height: 240px; }
    .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,24,17,.1), rgba(36,24,17,.72)); }
    .scene > * { position: relative; z-index: 1; }
    .scene h3 { font-size: 20px; color: #fff; margin-bottom: 6px; }
    .scene p { font-size: 13px; color: rgba(246,241,232,.86); }

    .qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
    .qa {
      background: #fff; border-radius: 20px; padding: 18px; border: 1px solid var(--line-s); min-height: 180px;
    }
    .qa h3 { font-size: 16px; margin-bottom: 8px; }
    .qa p { font-size: 14px; color: var(--muted); }
    .faq-list { display: grid; gap: 10px; }
    .faq-item { background: #fff; border-radius: 18px; border: 1px solid var(--line-s); overflow: hidden; }
    .faq-item button {
      width: 100%; text-align: left; background: none; border: 0; min-height: 56px;
      padding: 14px 52px 14px 18px; font-size: 16px; font-weight: 600; color: var(--walnut); position: relative;
    }
    .faq-item button::after {
      content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px;
      border-right: 2px solid var(--terra); border-bottom: 2px solid var(--terra);
      transform: translateY(-70%) rotate(45deg); transition: .2s;
    }
    .faq-item.open button::after { transform: translateY(-20%) rotate(225deg); }
    .faq-item .ans { display: none; padding: 0 18px 16px; color: var(--muted); font-size: 14px; }
    .faq-item.open .ans { display: block; }

    .contact-sec { padding-bottom: 40px; }
    .contact-grid { display: grid; grid-template-columns: 1fr .86fr; gap: 24px; align-items: start; }
    .form-card {
      background: #fff; border-radius: 28px; padding: 28px; border: 1px solid var(--line-s); box-shadow: var(--shadow);
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .field { display: flex; flex-direction: column; gap: 6px; }
    .field.full { grid-column: 1 / -1; }
    label { font-size: 13px; color: var(--walnut); font-weight: 600; }
    input, select, textarea {
      width: 100%; border: 1px solid var(--line); background: var(--gypsum);
      border-radius: var(--r-in); min-height: 46px; padding: 10px 12px; color: var(--text); font-size: 15px;
    }
    textarea { min-height: 110px; resize: vertical; }
    input:focus, select:focus, textarea:focus { border-color: var(--terra); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(184,90,62,.12); }
    .err { display: none; color: var(--danger); font-size: 12px; }
    .field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--danger); }
    .field.has-err .err { display: block; }
    .form-card .btn { width: 100%; margin-top: 8px; }
    .form-ok {
      display: none; background: rgba(111,134,104,.12); border: 1px solid rgba(111,134,104,.35);
      color: var(--ok); border-radius: 16px; padding: 16px;
    }
    .form-ok.show { display: block; }
    .aside-map {
      border-radius: 28px; min-height: 280px; background-size: cover; background-position: center; position: relative; overflow: hidden;
    }
    .aside-map::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36,24,17,.1), rgba(36,24,17,.72)); }
    .map-card {
      position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 16px;
      background: rgba(251,247,240,.94); border-radius: 18px; padding: 16px; color: var(--text);
    }
    .map-card h3 { font-size: 18px; margin-bottom: 6px; }
    .map-card p { font-size: 13px; color: var(--muted); }
    .cta-strip {
      margin-top: 22px; border-radius: 24px; padding: 22px 24px;
      background: linear-gradient(135deg, #3F2C22, #5A3B2C); color: #F6F1E8;
      display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .cta-strip h3 { color: #fff; font-size: 22px; }
    .cta-strip p { color: rgba(246,241,232,.78); font-size: 14px; }

    .site-footer {
      background: var(--ink); color: rgba(246,241,232,.82); padding: 56px 0 24px;
    }
    .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 28px; margin-bottom: 28px; }
    .site-footer h3 { color: #F6F1E8; font-size: 18px; margin-bottom: 12px; }
    .site-footer a { color: rgba(246,241,232,.82); min-height: 36px; display: inline-flex; align-items: center; }
    .site-footer a:hover { color: var(--brass); }
    .foot-links { display: grid; gap: 4px; }
    .copy {
      border-top: 1px solid rgba(246,241,232,.12); padding-top: 16px; font-size: 13px; color: rgba(246,241,232,.55);
      display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    }

    @media (max-width: 1279px) {
      .sec-head h2, .intro-copy h2, .slide-inner h1, .slide-inner h2 { font-size: 34px; }
      .plan-grid { grid-template-columns: 1fr 1fr; }
      .plan:first-child { grid-column: 1 / -1; }
      .scene-grid { grid-template-columns: repeat(2, 1fr); }
      .scene, .scene:nth-child(1), .scene:nth-child(2) { grid-column: span 1; }
    }
    @media (max-width: 1023px) {
      :root { --space: 72px; }
      .nav { display: none; }
      .menu-btn { display: inline-flex; margin-left: auto; }
      .hero-bento { grid-template-columns: 1fr 1fr; }
      .hero-main { grid-column: 1 / -1; grid-row: auto; min-height: 460px; }
      .metrics-grid, .review-grid, .qa-grid { grid-template-columns: repeat(2, 1fr); }
      .service-grid { grid-template-columns: 1fr 1fr; }
      .svc:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 220px; }
      .svc:nth-child(1) { grid-column: 1 / -1; min-height: 240px; }
      .intro-grid, .compare-wrap, .case-layout, .contact-grid, .foot-grid { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: 1fr 1fr; }
      .timeline::before { display: none; }
      .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
      .shield-grid { grid-template-columns: 1fr 1fr; }
      .story-grid { grid-template-columns: 1fr; }
      .news { grid-template-columns: 100px 1fr; }
      .slide-inner { padding: 28px 24px 86px; }
      .slide-inner h1, .slide-inner h2 { font-size: 32px; }
    }
    @media (max-width: 767px) {
      .container, .topbar-inner, .mainbar-inner { width: min(100% - 28px, var(--w)); }
      .topbar-inner { grid-template-columns: 1fr auto; }
      .topbar-brand { display: none; }
      .topbar-phone { justify-self: start; }
      .promo { font-size: 12px; }
      .hero-bento { grid-template-columns: 1fr; }
      .hero-main { min-height: 520px; }
      .metrics-grid, .qa-grid, .plan-grid, .review-grid, .news-grid, .shield-grid { grid-template-columns: 1fr; }
      .form-grid { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr 1fr; }
      .intro-visual img { height: 320px; }
      .intro-float { left: 12px; right: 12px; width: auto; }
      .pause-btn { display: none; }
      .sec-head h2 { font-size: 28px; }
      .hero-cta { padding: 14px; }
      .btn { width: 100%; }
      .hero-cta-actions { width: 100%; }
      .news { grid-template-columns: 1fr; }
      .news img { width: 100%; height: 180px; min-height: 0; }
      .copy { flex-direction: column; }
    }
    @media (max-width: 520px) {
      .slide-inner h1, .slide-inner h2 { font-size: 30px; }
      .metric-card .num { font-size: 28px; }
      .hero-badges .badge b { font-size: 16px; }
      .compare-stage { min-height: 280px; }
      .stat b { font-size: 28px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      * { transition: none !important; animation: none !important; }
    }