.home-intro { margin: 8px 0 28px; padding: clamp(24px, 3vw, 40px); background: #e9edf2; border: 1px solid #e1e5eb; border-radius: 14px; }
.home-intro h1 { color: #000; font-size: clamp(30px, 3vw, 44px); font-weight: 800; margin: 0 0 10px; }
.home-intro p { font-size: clamp(16px, 1.5vw, 21px); color: #4b5563; margin: 0; }
.home-carousel { border: 1px solid var(--border-soft); border-radius: 16px; overflow: hidden; background: #fff; margin-bottom: 36px; }
.carousel-window { overflow: hidden; }
.carousel-track { display: flex; transition: transform .65s ease; }
.carousel-slide { flex: 0 0 calc((100% - 8px) / 2); min-width: 0; margin: 0; }
.carousel-slide img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.carousel-slide figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 16px 24px; }
.carousel-slide time { color: var(--text-sub); }
.carousel-controls:not([hidden]) { display: flex; align-items: center; gap: 10px; padding: 16px 24px; flex-wrap: wrap; }
.carousel-controls button { font: inherit; cursor: pointer; padding: 8px 16px; border: 1px solid var(--border-soft); border-radius: 8px; background: #fff; color: var(--primary); min-height: 42px; }
.carousel-controls button:hover { background: #f2e9f4; }
.carousel-controls a { margin-left: auto; color: var(--primary); }
.carousel-controls button:focus-visible, .carousel-controls a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .carousel-track { transition: none; } }
@media (max-width: 600px) { .carousel-controls a { width: 100%; margin-left: 0; } }

.home-intro .home-description { margin-top: 22px; font-size: 16px; line-height: 1.8; color: #253040; text-align: justify; }
.carousel-track { position: relative; gap: 8px; }

.home-gallery-title { margin: 30px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); font-size: clamp(22px, 2vw, 28px); color: #111827; }


/* Repeat the chip strip for a seamless loop. */
.chip-banner { overflow: hidden; background: #fff; border: 1px solid var(--border-soft); border-radius: 16px; margin-bottom: 36px; padding: 0; }
.chip-banner-track { display: flex; width: max-content; animation: chip-banner-scroll 160s linear infinite; }
.chip-banner-sequence { flex: 0 0 auto; padding-right: 28px; }
.chip-banner-sequence img { display: block; height: clamp(160px, 18vw, 230px); width: auto; max-width: none; }
.chip-banner:hover .chip-banner-track { animation-play-state: paused; }
@keyframes chip-banner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.chip-banner-window { overflow: hidden; padding: 18px 0; }
.chip-banner-footer { display: flex; justify-content: flex-end; padding: 16px 24px; border-top: 1px solid var(--border-soft); }
.chip-banner-footer a { color: var(--primary); }
.chip-banner-footer a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }