.thermal-page { color: var(--black); }
.thermal-page .site-header .nav-link.active::after { background: var(--white); }

.thermal-hero { position: relative; display: flex; align-items: center; overflow: hidden; min-height: 350px; color: var(--white); background: var(--deep-blue); }
.thermal-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.thermal-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, color-mix(in srgb, var(--deep-blue) 75%, transparent) 0, color-mix(in srgb, var(--deep-blue) 34%, transparent) 54%, color-mix(in srgb, var(--deep-blue) 4%, transparent) 100%); }
.thermal-hero-main { position: absolute; top: 65px; right: -3%; width: min(60vw, 850px); height: auto; }
.thermal-hero-content { position: relative; z-index: 1; width: 100%; padding-top: 104px; padding-bottom: 56px; }
.thermal-hero h1 { margin: 0 0 16px; font-size: 48px; font-weight: 700; }
.thermal-hero-content > p { max-width: 660px; margin: 0; color: var(--white); font-size: 16px; line-height: 1.8; }

.thermal-section { padding: 64px 0; }
.thermal-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
.thermal-number { color: var(--line); font-size: 58px; font-style: italic; font-weight: 700; line-height: 1; }
.thermal-heading p { margin: 5px 0 4px; color: var(--gray); font-size: 14px; }
.thermal-heading h2 { margin: 0; color: var(--deep-blue); font-size: 24px; font-weight: 700; }
.thermal-intro-copy { color: var(--black); font-size: 16px; line-height: 1.8; }
.thermal-intro-copy p { margin: 0; }
.thermal-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.thermal-tags li { min-width: 78px; padding: 5px 14px; border: 1px solid var(--line); border-radius: 18px; color: var(--light-blue); background: var(--surface); font-size: 14px; text-align: center; }
.thermal-intro-visual { position: relative; overflow: hidden; min-height: 280px; margin-top: 22px; border-radius: 12px; background: var(--deep-blue) url("../images/kooland/space-background-v2.png") center / cover; }
.thermal-intro-visual img { display: block; width: 100%; height: 280px; object-fit: contain; }
@media (min-width: 992px) {
  .thermal-intro { padding-bottom: 48px; }
  .thermal-intro-visual { max-width: 460px; margin-left: auto; }
}
.thermal-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 58px; height: 58px; padding-left: 3px; border-radius: 50%; color: var(--deep-blue); background: var(--white); font-size: 21px; transform: translate(-50%, -50%); animation: thermal-play-breathe 2.4s ease-in-out infinite; }
.thermal-play::after { position: absolute; inset: -8px; border: 2px solid var(--white); border-radius: 50%; content: ""; animation: thermal-play-ring 2.4s ease-out infinite; }
@keyframes thermal-play-breathe { 50% { transform: translate(-50%, -50%) scale(1.08); } }
@keyframes thermal-play-ring { 0% { opacity: .75; transform: scale(.82); } 70%, 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .thermal-play, .thermal-play::after { animation: none; } .thermal-play::after { display: none; } }
.thermal-media-note { position: absolute; right: 16px; bottom: 12px; color: var(--white); font-size: 12px; }

.thermal-products { background: var(--surface); }
.thermal-product-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); overflow: hidden; min-height: 358px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 10px 28px color-mix(in srgb, var(--deep-blue) 6%, transparent); }
.thermal-product-tabs { display: flex; flex-direction: column; gap: 5px; padding: 20px 14px; background: var(--surface); }
.thermal-product-tabs button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; padding: 8px 14px; border: 0; border-radius: 7px; color: var(--black); background: transparent; font-size: 14px; text-align: left; }
.thermal-product-tabs button span { visibility: hidden; }
.thermal-product-tabs button:hover { color: var(--deep-blue); background: var(--white); }
.thermal-product-tabs button.is-active { color: var(--white); background: var(--light-blue); box-shadow: 0 6px 15px color-mix(in srgb, var(--light-blue) 18%, transparent); }
.thermal-product-tabs button.is-active span { visibility: visible; }
.thermal-product-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); min-width: 0; background: var(--white); }
.thermal-product-visual { position: relative; grid-column: 2; grid-row: 1; min-width: 0; min-height: 358px; margin: 0; background: var(--surface); }
.thermal-product-image { display: block; width: 100%; height: 100%; min-height: 358px; object-fit: cover; object-position: right center; }
.thermal-product-copy { grid-column: 1; grid-row: 1; align-self: center; min-width: 0; padding: 34px 28px; }
.thermal-product-label { display: inline-block; margin-bottom: 8px; padding: 3px 8px; border-radius: 12px; color: var(--light-blue); background: var(--surface); font-size: 12px; }
.thermal-product-copy h3 { margin: 0 0 16px; color: var(--black); font-size: 24px; font-weight: 700; }
.thermal-product-copy p { min-height: 80px; margin: 0 0 22px; color: var(--gray); font-size: 14px; line-height: 1.75; }
.thermal-feature-list { display: flex; flex-wrap: wrap; gap: 8px; }
.thermal-feature-list span { padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--black); background: var(--surface); font-size: 13px; font-weight: 600; }
.thermal-feature-list[hidden] { display: none; }
.thermal-product-detail-button { display: inline-flex; align-items: center; gap: 12px; min-height: 42px; margin-top: 24px; padding: 8px 20px; border: 0; border-radius: 22px; color: var(--white); background: var(--light-blue); font-size: 14px; letter-spacing: .1em; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.thermal-product-detail-button:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 4px; }
@media (hover: hover) { .thermal-product-detail-button:hover { box-shadow: 0 8px 18px color-mix(in srgb, var(--light-blue) 25%, transparent); transform: translateY(-3px); } }
.thermal-product-detail-button:active { transform: scale(.985); }

.thermal-section-description { margin: -8px 0 32px; color: var(--gray); font-size: 16px; line-height: 1.7; }
.thermal-service-card { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 6px 22px color-mix(in srgb, var(--deep-blue) 5%, transparent); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.thermal-service-card img { display: block; width: 100%; height: 190px; object-fit: cover; transition: transform .2s ease; }
.thermal-service-card > div { padding: 20px 22px 22px; }
.thermal-service-card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; color: var(--black); font-size: 18px; font-weight: 700; }
.thermal-service-card h3 span { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--black); background: var(--surface); font-size: 14px; }
.thermal-service-card p { min-height: 70px; margin: 0 0 15px; color: var(--gray); font-size: 14px; line-height: 1.7; }
.thermal-service-link { position: relative; padding: 0; border: 0; color: var(--light-blue); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.thermal-service-link span { display: inline-block; transition: transform .2s ease; }
.thermal-service-link:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 4px; }
@media (hover: hover) {
  .thermal-service-card:hover { transform: translateY(-3px); border-color: var(--light-blue); box-shadow: 0 14px 32px color-mix(in srgb, var(--deep-blue) 14%, transparent); }
  .thermal-service-card:hover img { transform: scale(1.025); }
  .thermal-service-card:hover .thermal-service-link span { transform: translateX(4px); }
}
.thermal-service-card:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .thermal-service-card, .thermal-service-card img, .thermal-service-link span, .thermal-product-detail-button { transition: none; }
  .thermal-service-card:hover, .thermal-service-card:active, .thermal-service-card:hover img, .thermal-service-card:hover .thermal-service-link span, .thermal-product-detail-button:hover, .thermal-product-detail-button:active { transform: none; }
}


@media (max-width: 991.98px) {
  .thermal-hero { min-height: 360px; }
  .thermal-hero-main { top: 90px; right: -14%; width: 70vw; }
  .thermal-hero-content { padding-top: 96px; padding-bottom: 48px; }
  .thermal-hero-content > p { max-width: 68%; }
  .thermal-desktop-break { display: none; }
  .thermal-product-card { display: block; }
  .thermal-product-tabs { flex-direction: row; overflow-x: auto; gap: 8px; padding: 12px; }
  .thermal-product-tabs button { flex: none; width: auto; min-height: 38px; padding: 7px 12px; white-space: nowrap; }
  .thermal-product-tabs button span { display: none; }
  .thermal-product-visual, .thermal-product-image { min-height: 330px; }
}

@media (max-width: 575.98px) {
  .thermal-hero { min-height: 420px; align-items: flex-start; }
  .thermal-hero-bg { object-position: 62% center; }
  .thermal-hero::after { background: linear-gradient(180deg, color-mix(in srgb, var(--deep-blue) 89%, transparent) 0, color-mix(in srgb, var(--deep-blue) 56%, transparent) 58%, color-mix(in srgb, var(--deep-blue) 8%, transparent) 100%); }
  .thermal-hero-main { top: auto; right: -23%; bottom: 5px; width: 95vw; height: auto; }
  .thermal-hero-content { padding-top: 116px; padding-bottom: 136px; }
  .thermal-hero h1 { margin-bottom: 14px; font-size: 34px; }
  .thermal-hero-content > p { max-width: 100%; font-size: 14px; line-height: 1.75; }
  .thermal-desktop-break { display: none; }
  .thermal-section { padding: 40px 0 48px; }
  .thermal-heading { gap: 8px; margin-bottom: 24px; }
  .thermal-number { font-size: 44px; }
  .thermal-heading p { margin-top: 3px; font-size: 12px; }
  .thermal-heading h2 { font-size: 20px; }
  .thermal-intro-copy { font-size: 14px; }
  .thermal-intro-copy br { display: none; }
  .thermal-tags { margin-top: 20px; }
  .thermal-tags li { min-width: 0; padding: 5px 12px; font-size: 12px; }
  .thermal-intro-visual { min-height: 220px; margin-top: 0; }
  .thermal-intro-visual img { height: 220px; }
  .thermal-product-content { grid-template-columns: 1fr; }
  .thermal-product-visual { grid-column: 1; grid-row: 2; height: 220px; min-height: 0; }
  .thermal-product-image { height: 220px; min-height: 0; }
  .thermal-product-copy { grid-column: 1; grid-row: 1; padding: 24px 20px; }
  .thermal-product-copy h3 { margin-bottom: 10px; font-size: 20px; }
  .thermal-product-copy p { min-height: 0; margin-bottom: 14px; font-size: 14px; }
  .thermal-feature-list span { padding: 6px 8px; font-size: 12px; }
  .thermal-product-detail-button { margin-top: 16px; }
  .thermal-section-description { margin: -6px 0 24px; font-size: 14px; }
  .thermal-service-card img { height: 180px; }
  .thermal-service-card p { min-height: 0; }
}