* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; color: #111827; font-family: Montserrat, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.lw-head { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 28px; padding: 16px 40px; background: #fff; }
.lw-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; }
.lw-logo .material-symbols-outlined { color: #1D4ED8; font-size: 28px; }
.lw-head nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; font-weight: 600; }
.lw-phone { font-weight: 700; color: #1D4ED8; }
.lw-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; max-width: 1180px; margin: 0 auto; padding: 36px 40px 20px; }
.lw-hero img { width: 100%; height: min(72vh, 640px); object-fit: cover; object-position: center; display: block; border-radius: 0 0 0 80px; }
.lw-hero h1 { margin: 0 0 16px; font-size: clamp(34px, 4.4vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.lw-hero__copy > p { margin: 0 0 22px; max-width: 42ch; color: #4B5563; line-height: 1.55; font-weight: 500; }
.lw-hero__form { display: grid; gap: 10px; max-width: 440px; }
.lw-hero__form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; }
.lw-hero__form input, .lw-hero__form textarea { border: 0; background: #F3F4F6; border-radius: 16px; padding: 14px 16px; font: inherit; resize: vertical; }
.lw-hero__form button { border: 0; background: #1D4ED8; color: #fff; border-radius: 999px; padding: 16px 20px; font: inherit; font-weight: 700; cursor: pointer; }
.form-note { margin: 0; font-size: 13px; color: #4B5563; }
.lw-tick { overflow: hidden; background: #1D4ED8; color: #fff; }
.lw-tick__track { display: flex; gap: 40px; width: max-content; padding: 14px 0; font-weight: 700; font-size: 14px; animation: lw-marquee 22s linear infinite; }
.lw-tick span + span::before { content: "•"; margin-right: 40px; }
@keyframes lw-marquee { to { transform: translateX(-50%); } }
.lw-svc, .lw-how { scroll-margin-top: 72px; max-width: 1180px; margin: 0 auto; padding: 56px 40px 24px; }
.lw-svc h2, .lw-room h2, .lw-how h2, .lw-ask h2 { margin: 0 0 24px; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.03em; }
.lw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lw-card { display: grid; gap: 8px; align-content: start; padding: 22px; border: 1px solid #E5E7EB; border-radius: 20px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; outline: none; }
.lw-card i { width: 44px; height: 44px; border-radius: 12px; background: #EFF6FF; color: #1D4ED8; display: grid; place-items: center; }
.lw-card h3 { margin: 0; font-size: 18px; font-weight: 800; }
.lw-card p { margin: 0; color: #6B7280; font-size: 14px; line-height: 1.45; }
.lw-card.on { background: #1D4ED8; color: #fff; border-color: #1D4ED8; }
.lw-card.on i { background: #fff; }
.lw-card.on p { color: #DBEAFE; }
.lw-room { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; max-width: 1180px; margin: 0 auto; padding: 24px 40px 40px; align-items: center; }
.lw-room img { width: 100%; height: 340px; object-fit: cover; display: block; border-radius: 24px; }
.lw-room p { margin: 0 0 12px; color: #4B5563; line-height: 1.55; font-weight: 500; }
.lw-addr { font-weight: 700; color: #111827; }
.lw-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lw-step { padding: 20px; border-radius: 20px; background: #F3F4F6; }
.lw-step b { color: #1D4ED8; font-size: 22px; font-weight: 800; }
.lw-step h3 { margin: 8px 0 8px; font-size: 18px; }
.lw-step p { margin: 0; color: #6B7280; font-size: 14px; line-height: 1.45; }
.lw-ask { scroll-margin-top: 72px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; max-width: 1180px; margin: 0 auto 48px; padding: 8px 40px 0; align-items: center; }
.lw-ask__tel { display: inline-block; margin: 8px 0; font-size: 30px; font-weight: 800; color: #1D4ED8; }
.lw-ask img { width: 100%; height: 280px; object-fit: cover; display: block; border-radius: 24px; }
.lw-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 20px 40px 28px; background: #111827; color: #9CA3AF; font-size: 13px; }
.fp-note { margin: 0; }
@media (max-width: 900px) {
  .lw-head { padding: 14px 18px; }
  .lw-head nav { display: none; }
  .lw-hero, .lw-grid, .lw-room, .lw-steps, .lw-ask { grid-template-columns: 1fr; }
  .lw-hero, .lw-svc, .lw-room, .lw-how, .lw-ask { padding-left: 18px; padding-right: 18px; }
  .lw-hero img { height: 42vh; border-radius: 24px; }
  .lw-room img, .lw-ask img { height: 220px; }
}

button, a[href] { transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer; } button:active, a[href]:active { transform: scale(0.97); }
i[class^="ph"], .ti, .material-symbols-outlined, .material-symbols-rounded { font-size: 1.15em; vertical-align: -0.14em; } .lw-hero__copy { animation: lw-up 520ms cubic-bezier(0.23, 1, 0.32, 1) both; } @keyframes lw-up { from { opacity: 0; transform: translateY(18px); } } .lw-card { transition: background 220ms cubic-bezier(0.23, 1, 0.32, 1), color 220ms cubic-bezier(0.23, 1, 0.32, 1), border-color 220ms cubic-bezier(0.23, 1, 0.32, 1), transform 220ms cubic-bezier(0.23, 1, 0.32, 1); } @media (hover: hover) and (pointer: fine) { .lw-card:hover { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .v-in, .v-pop, .v-ken, .v-draw, .v-dock, .v-pulse, [data-stagger] { animation: none !important; transform: none !important; opacity: 1 !important; } }