@font-face {
  font-family: 'Pretendard';
  font-weight: 400;
  font-style: normal;
  src: url('font/Pretendard-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 500;
  font-style: normal;
  src: url('font/Pretendard-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 700;
  font-style: normal;
  src: url('font/Pretendard-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 600;
  font-style: normal;
  src: url('font/Pretendard-SemiBold.otf') format('opentype');
}

@font-face {
  font-family: 'Pretendard';
  font-weight: 800;
  font-style: normal;
  src: url('font/Pretendard-ExtraBold.otf') format('opentype');
}

body {
  overflow-x: hidden;
  overflow-y: auto;
}

.clir-page {
  position: relative;
  width: 100vw;
  min-height: 970vw;
  background: #fff;
}

/* Override time-area from style.css */
.clir-page .time-area {
  top: calc(56 / 1728 * 100vw);
}

/* Back arrow */
.clir-back {
  position: absolute;
  left: calc(208 / 1728 * 100vw);
  top: calc(189 / 1728 * 100vw);
  width: calc(20 / 1728 * 100vw);
  height: calc(20 / 1728 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.clir-back img {
  width: 100%;
  height: auto;
}

/* Clir wordmark */
.clir-logo {
  position: absolute;
  left: calc(301 / 1728 * 100vw);
  top: calc(171 / 1728 * 100vw);
  width: calc(94 / 1728 * 100vw);
  height: auto;
}

.clir-hero-meta {
  position: absolute;
  left: calc(408 / 1728 * 100vw);
  top: calc(207 / 1728 * 100vw);
  margin: 0;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 1;
  color: #114835;
  white-space: nowrap;
}

.clir-visit-btn {
  position: absolute;
  right: calc(220 / 1728 * 100vw);
  top: calc(185 / 1728 * 100vw);
  width: calc(135 / 1728 * 100vw);
  height: calc(43 / 1728 * 100vw);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0C4A35;
  border-radius: calc(999 / 1728 * 100vw);
  color: #fff;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(20 / 1728 * 100vw);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  z-index: 10;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.clir-visit-btn:hover {
  background: #063C2A;
  transform: translateY(calc(-2 / 1728 * 100vw));
}

.clir-main-image {
  position: absolute;
  left: 50%;
  top: calc(300 / 1728 * 100vw);
  width: 100%;
  max-width: 100vw;
  height: auto;
  display: block;
  object-fit: contain;
  transform: translateX(-50%);
}

/* Gradient overlay above hero: green -> white top-to-bottom */
.clir-hero-gradient {
  position: absolute;
  left: 0;
  top: calc(251 / 1728 * 100vw);
  width: 100%;
  height: calc(479 / 1728 * 100vw);
  background: linear-gradient(180deg, rgba(159, 194, 182, 1) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Hero section */
.clir-hero {
  position: absolute;
  left: 0;
  top: calc(303 / 1728 * 100vw);
  width: 100%;
  background: #9FC2B6;
}

.clir-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Section navigation ─── */
.clir-section-nav {
  position: absolute;
  left: calc(220 / 1728 * 100vw);
  display: flex;
  align-items: center;
  gap: calc(11 / 1728 * 100vw);
}

.clir-nav-01 { top: calc(1198 / 1728 * 100vw); }
.clir-nav-03 {
  left: calc(182 / 1728 * 100vw);
  top: calc(2558 / 1728 * 100vw);
}

.clir-nav-04 {
  left: calc(189 / 1728 * 100vw);
  top: calc(3711 / 1728 * 100vw);
}

.clir-nav-05 {
  left: calc(189 / 1728 * 100vw);
  top: calc(4570 / 1728 * 100vw);
}

.clir-nav-06 {
  left: calc(189 / 1728 * 100vw);
  top: calc(5835 / 1728 * 100vw);
}

.clir-nav-07 {
  left: calc(189 / 1728 * 100vw);
  top: calc(6202 / 1728 * 100vw);
}

.clir-nav-08 {
  left: calc(187 / 1728 * 100vw);
  top: calc(7386 / 1728 * 100vw);
}

.clir-nav-09 {
  left: calc(187 / 1728 * 100vw);
  top: calc(6570 / 1728 * 100vw);
}

.clir-nav-03,
.clir-nav-04,
.clir-nav-05,
.clir-nav-06,
.clir-nav-07,
.clir-nav-08,
.clir-nav-09 {
  gap: calc(8 / 1728 * 100vw);
}

.clir-nav-03 .clir-nav-num,
.clir-nav-04 .clir-nav-num,
.clir-nav-05 .clir-nav-num,
.clir-nav-06 .clir-nav-num,
.clir-nav-07 .clir-nav-num,
.clir-nav-08 .clir-nav-num,
.clir-nav-09 .clir-nav-num {
  font-size: calc(25 / 1728 * 100vw);
}

.clir-nav-03 .clir-nav-pill,
.clir-nav-04 .clir-nav-pill,
.clir-nav-05 .clir-nav-pill,
.clir-nav-06 .clir-nav-pill,
.clir-nav-07 .clir-nav-pill,
.clir-nav-08 .clir-nav-pill,
.clir-nav-09 .clir-nav-pill {
  height: calc(29 / 1728 * 100vw);
  padding: calc(10 / 1728 * 100vw) calc(20 / 1728 * 100vw);
  border-radius: calc(30 / 1728 * 100vw);
  font-size: calc(15 / 1728 * 100vw);
}

.clir-nav-num {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(33 / 1728 * 100vw);
  text-transform: uppercase;
  color: #B3CFC6;
  line-height: 1;
}

.clir-nav-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(13 / 1728 * 100vw) calc(26 / 1728 * 100vw);
  height: calc(38 / 1728 * 100vw);
  background: #DBE9E4;
  border: calc(0.5 / 1728 * 100vw) solid #044733;
  border-radius: calc(39 / 1728 * 100vw);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(20 / 1728 * 100vw);
  line-height: 112%;
  color: #114835;
  white-space: nowrap;
}

/* ─── Overview ─── */
.clir-overview {
  position: absolute;
  left: calc(220 / 1728 * 100vw);
  top: calc(1248 / 1728 * 100vw);
  width: calc(904 / 1728 * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(54 / 1728 * 100vw);
}

.clir-overview-title {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: calc(55 / 1728 * 100vw);
  line-height: 114%;
  color: #114835;
  margin: 0;
  white-space: nowrap;
}

.clir-overview-title strong {
  font-weight: 700;
}

/* ─── Solution Radial Gradient ─── */
.clir-solution-gradient {
  position: absolute;
  left: 0;
  top: calc(2480 / 1728 * 100vw);
  width: 100%;
  height: calc(1300 / 1728 * 100vw);
  background: radial-gradient(ellipse 60% 70% at 71% 42%, #84DEC0 0%, #BFDFDB 58%, #FFFFFF 100%);
  pointer-events: none;
  z-index: 0;
}

/* ─── Second Hero ─── */
.clir-second-hero-img {
  position: absolute;
  left: 0;
  top: calc(3100 / 1728 * 100vw);
  width: 100%;
  height: auto;
  display: block;
}

/* ─── User Flow ─── */
.clir-flow-statement {
  position: absolute;
  left: calc(189 / 1728 * 100vw);
  top: calc(5885 / 1728 * 100vw);
  width: calc(906 / 1728 * 100vw);
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: calc(50 / 1728 * 100vw);
  line-height: 130%;
  color: #114835;
}

.clir-flow-statement strong {
  font-weight: 700;
}

.clir-flow-body {
  position: absolute;
  left: calc(189 / 1728 * 100vw);
  top: calc(6184 / 1728 * 100vw);
  width: calc(317 / 1728 * 100vw);
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 140%;
  color: #09412E;
}

.clir-userflow-img {
  position: absolute;
  left: calc(191 / 1728 * 100vw);
  top: calc(6361 / 1728 * 100vw);
  width: calc(1346 / 1728 * 100vw);
  height: auto;
  display: block;
}

/* ─── Information Architecture ─── */
.clir-ia-img {
  position: absolute;
  left: calc(608 / 1728 * 100vw);
  top: calc(6255 / 1728 * 100vw);
  width: calc(512 / 1728 * 100vw);
  height: auto;
  display: block;
}

.clir-wireframes-title {
  position: absolute;
  left: calc(220 / 1728 * 100vw);
  top: calc(7450 / 1728 * 100vw);
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: calc(55 / 1728 * 100vw);
  line-height: 114%;
  color: #114835;
  white-space: nowrap;
}

.clir-wireframes-grid {
  position: absolute;
  left: 0;
  top: calc(7549 / 1728 * 100vw);
  width: 100vw;
  height: calc(471 / 1728 * 100vw);
  overflow: hidden;
}

.clir-wireframes-grid::before,
.clir-wireframes-grid::after {
  content: "";
  position: absolute;
  top: 0;
  width: calc(320 / 1728 * 100vw);
  height: 100%;
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.clir-wireframes-grid::before {
  left: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
}

.clir-wireframes-grid::after {
  right: 0;
  background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(270deg, #000 0%, transparent 100%);
}

.clir-wireframes-track {
  display: flex;
  width: max-content;
  gap: calc(28 / 1728 * 100vw);
  padding-left: calc(320 / 1728 * 100vw);
  animation: clir-wireframe-marquee 44s linear infinite;
  will-change: transform;
}

.clir-wireframes-grid img {
  flex: 0 0 auto;
  width: calc(170 / 1728 * 100vw);
  height: auto;
  display: block;
  clip-path: inset(0 6% 0 5.6%);
  opacity: 0.38;
  filter: saturate(0.65) contrast(0.92);
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
  transition: opacity 0.38s ease, filter 0.38s ease, transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.clir-wireframes-grid img:hover {
  opacity: 1;
  filter: saturate(1) contrast(1);
  transform: translateY(calc(-6 / 1728 * 100vw)) scale(1.018);
}

@keyframes clir-wireframe-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% + (146 / 1728 * 100vw)));
  }
}

.clir-image-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.34s ease, visibility 0s linear 0.34s;
}

.clir-image-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.clir-image-modal-img {
  max-width: min(56vw, calc(480 / 1728 * 100vw));
  max-height: 76vh;
  width: auto;
  height: auto;
  display: block;
  background: transparent;
  clip-path: inset(0 6% 0 5.6%);
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(18 / 1728 * 100vw)) scale(0.94);
  transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.22, 1, 0.36, 1);
}

.clir-image-modal.is-open .clir-image-modal-img {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.clir-image-modal-close {
  position: fixed;
  right: calc(44 / 1728 * 100vw);
  top: calc(34 / 1728 * 100vw);
  width: calc(44 / 1728 * 100vw);
  height: calc(44 / 1728 * 100vw);
  border: 0;
  background: #0C4A35;
  border-radius: 50%;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: calc(26 / 1728 * 100vw);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.88);
  transition: opacity 0.24s ease 0.08s, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) 0.08s, background-color 0.2s ease;
}

.clir-image-modal.is-open .clir-image-modal-close {
  opacity: 1;
  transform: scale(1);
}

.clir-image-modal-close:hover {
  background: #063C2A;
}

/* ─── Design System ─── */
.clir-design-system {
  position: absolute;
  left: 0;
  top: calc(6340 / 1728 * 100vw);
  width: 100vw;
  height: calc(950 / 1728 * 100vw);
  color: #123D1E;
  font-family: 'Pretendard', sans-serif;
}

.clir-ds-font-title {
  position: absolute;
  left: calc(129 / 1728 * 100vw);
  top: calc(290 / 1728 * 100vw);
  font-weight: 700;
  font-size: calc(80 / 1728 * 100vw);
  line-height: 1.41;
  letter-spacing: 0;
  color: #044733;
}

.clir-ds-palette {
  position: absolute;
  left: calc(218 / 1728 * 100vw);
  top: calc(446 / 1728 * 100vw);
  width: calc(508 / 1728 * 100vw);
  height: calc(150 / 1728 * 100vw);
}

.clir-ds-swatch {
  position: absolute;
  border-radius: calc(18.211 / 1728 * 100vw);
}

.clir-ds-swatch-soft {
  left: 0;
  top: 0;
  width: calc(342.356 / 1728 * 100vw);
  height: calc(97.742 / 1728 * 100vw);
  background: linear-gradient(90deg, #FDFFFD 0%, #F6FDF1 100%);
}

.clir-ds-swatch-primary {
  left: calc(342.36 / 1728 * 100vw);
  top: 0;
  width: calc(103.087 / 1728 * 100vw);
  height: calc(97.8 / 1728 * 100vw);
  background: #044733;
}

.clir-ds-swatch-muted {
  left: calc(445.41 / 1728 * 100vw);
  top: 0;
  width: calc(62.447 / 1728 * 100vw);
  height: calc(97.8 / 1728 * 100vw);
  background: #A9B6A8;
}

.clir-ds-gradient-bar {
  position: absolute;
  left: 0;
  top: calc(105.6 / 1728 * 100vw);
  width: calc(508 / 1728 * 100vw);
  height: calc(44.4 / 1728 * 100vw);
  display: grid;
  grid-template-columns: calc(344.45 / 1728 * 100vw) calc(110.02 / 1728 * 100vw) calc(53.53 / 1728 * 100vw);
  overflow: hidden;
  border-radius: calc(18.211 / 1728 * 100vw);
}

.clir-ds-gradient-bar span {
  display: block;
}

.clir-ds-grad-1 {
  background: linear-gradient(90deg, #E4ECE2 0%, #A9B6A8 61.058%, #044733 100%);
}

.clir-ds-grad-2 {
  background: linear-gradient(90deg, #F9FFF3 0%, #BDDCCB 100%);
}

.clir-ds-grad-3 {
  background: linear-gradient(90deg, #BFD4CE 0%, #044733 100%);
}

.clir-ds-type-scale {
  position: absolute;
  left: calc(795 / 1728 * 100vw);
  top: calc(382 / 1728 * 100vw);
  width: calc(460 / 1728 * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(18 / 1728 * 100vw);
}

.clir-ds-type-row {
  display: grid;
  grid-template-columns: calc(114 / 1728 * 100vw) 1fr;
  align-items: baseline;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 1.35;
  color: #1C3A19;
}

.clir-ds-type-row span {
  font-weight: 400;
}

.clir-ds-type-row strong {
  font-weight: 400;
}

.clir-ds-title-1 {
  font-size: calc(30 / 1728 * 100vw);
  font-weight: 800;
  line-height: 1.35;
}

.clir-ds-title-1 span,
.clir-ds-title-1 strong,
.clir-ds-title-2 span,
.clir-ds-title-2 strong {
  font-weight: 800;
}

.clir-ds-title-2 {
  font-size: calc(20 / 1728 * 100vw);
  line-height: calc(32 / 20);
}

.clir-ds-type-row:nth-child(4) strong {
  font-weight: 600;
}

.clir-ds-type-row:nth-child(5) strong {
  font-weight: 700;
}

.clir-ds-caption {
  font-size: calc(13 / 1728 * 100vw);
  font-weight: 500;
}

.clir-ds-controls {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.clir-ds-large-btn,
.clir-ds-field,
.clir-ds-pill-btn,
.clir-ds-mini-btn {
  font-family: 'Pretendard', sans-serif;
}

.clir-ds-large-btn {
  position: absolute;
  left: calc(218 / 1728 * 100vw);
  width: calc(342 / 1728 * 100vw);
  height: calc(94 / 1728 * 100vw);
  border-radius: calc(16 / 1728 * 100vw);
  border: calc(0.5 / 1728 * 100vw) solid #A9B6A8;
  padding-left: calc(44 / 1728 * 100vw);
  text-align: left;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
}

.clir-ds-large-btn-light {
  top: calc(688 / 1728 * 100vw);
  background: #F9FFFB;
  color: #044733;
}

.clir-ds-large-btn-dark {
  top: calc(793 / 1728 * 100vw);
  background: #044733;
  color: #fff;
  font-weight: 600;
}

.clir-ds-field {
  position: absolute;
  left: calc(596 / 1728 * 100vw);
  top: calc(688 / 1728 * 100vw);
  width: calc(348 / 1728 * 100vw);
  height: calc(49 / 1728 * 100vw);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: calc(17 / 1728 * 100vw);
  border: calc(1 / 1728 * 100vw) solid #044733;
  border-radius: calc(10 / 1728 * 100vw);
  color: #A9B6A8;
  font-weight: 600;
  font-size: calc(16 / 1728 * 100vw);
}

.clir-ds-pill-btn {
  position: absolute;
  left: calc(596 / 1728 * 100vw);
  width: calc(360 / 1728 * 100vw);
  height: calc(53 / 1728 * 100vw);
  border-radius: calc(35 / 1728 * 100vw);
  border: calc(1 / 1728 * 100vw) solid #044733;
  font-weight: 700;
  font-size: calc(16 / 1728 * 100vw);
}

.clir-ds-pill-btn-light {
  top: calc(766 / 1728 * 100vw);
  background: #fff;
  color: #044733;
}

.clir-ds-pill-btn-dark {
  top: calc(828 / 1728 * 100vw);
  height: calc(58 / 1728 * 100vw);
  background: #044733;
  color: #F9FFF3;
}

.clir-ds-card-samples {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.clir-ds-product-card {
  position: absolute;
  left: calc(977 / 1728 * 100vw);
  top: calc(688 / 1728 * 100vw);
  width: calc(342 / 1728 * 100vw);
  height: calc(125 / 1728 * 100vw);
  background: #F9FFFB;
  border-radius: calc(15.385 / 1728 * 100vw);
  overflow: hidden;
  box-shadow: calc(2 / 1728 * 100vw) calc(2 / 1728 * 100vw) calc(19.4 / 1728 * 100vw) rgba(0, 0, 0, 0.1);
}

.clir-ds-thumb {
  position: absolute;
  left: calc(21.15 / 1728 * 100vw);
  top: calc(24.04 / 1728 * 100vw);
  width: calc(77.885 / 1728 * 100vw);
  height: calc(77.885 / 1728 * 100vw);
  border-radius: calc(10.577 / 1728 * 100vw);
  border: calc(0.288 / 1728 * 100vw) solid #1C3A19;
  background: linear-gradient(135deg, #BCBCBC 0%, #999 100%);
}

.clir-ds-product-copy {
  position: absolute;
  left: calc(110.58 / 1728 * 100vw);
  top: calc(24.04 / 1728 * 100vw);
  color: #000;
  font-family: 'Pretendard', sans-serif;
}

.clir-ds-product-copy div {
  display: flex;
  align-items: center;
  gap: calc(9 / 1728 * 100vw);
  font-size: calc(15.385 / 1728 * 100vw);
  line-height: 1.5;
  letter-spacing: calc(-0.2923 / 1728 * 100vw);
}

.clir-ds-product-copy strong {
  font-weight: 700;
}

.clir-ds-product-copy p {
  margin: calc(2 / 1728 * 100vw) 0 calc(30 / 1728 * 100vw);
  font-size: calc(11.538 / 1728 * 100vw);
  line-height: 1.5;
  letter-spacing: calc(-0.2192 / 1728 * 100vw);
}

.clir-ds-product-copy a {
  color: #9E9E9E;
  font-size: calc(11.538 / 1728 * 100vw);
  line-height: 1.5;
  letter-spacing: calc(-0.2192 / 1728 * 100vw);
  text-decoration: underline;
}

.clir-ds-card-close {
  position: absolute;
  right: calc(12 / 1728 * 100vw);
  top: calc(12.5 / 1728 * 100vw);
  color: #1C3A19;
  font-size: calc(24 / 1728 * 100vw);
  line-height: 1;
}

.clir-ds-card-arrow {
  position: absolute;
  right: calc(10 / 1728 * 100vw);
  top: calc(49 / 1728 * 100vw);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: calc(46 / 1728 * 100vw);
  line-height: 1;
}

.clir-ds-mini-buttons {
  position: absolute;
  left: calc(977 / 1728 * 100vw);
  top: calc(830 / 1728 * 100vw);
  display: flex;
  gap: calc(13 / 1728 * 100vw);
}

.clir-ds-mini-btn {
  width: auto;
  height: calc(31 / 1728 * 100vw);
  padding: calc(3 / 1728 * 100vw) calc(20 / 1728 * 100vw);
  border-radius: calc(20 / 1728 * 100vw);
  border: calc(1 / 1728 * 100vw) solid #044733;
  font-size: calc(12 / 1728 * 100vw);
}

.clir-ds-mini-btn-light {
  background: #fff;
  color: #044733;
}

.clir-ds-mini-btn-dark {
  background: #044733;
  color: #fff;
}

.clir-ds-dark-card {
  position: absolute;
  left: calc(1336 / 1728 * 100vw);
  top: calc(688 / 1728 * 100vw);
  width: calc(183 / 1728 * 100vw);
  height: calc(183 / 1728 * 100vw);
  border-radius: calc(15 / 1728 * 100vw);
  background: #044733;
  color: #fff;
  box-sizing: border-box;
  padding: calc(25 / 1728 * 100vw) calc(22 / 1728 * 100vw);
  font-family: 'Pretendard', sans-serif;
}

.clir-ds-dark-card span,
.clir-ds-dark-card p {
  color: #A9B6A8;
  font-size: calc(13 / 1728 * 100vw);
}

.clir-ds-dark-card strong {
  display: block;
  margin-top: calc(8 / 1728 * 100vw);
  font-weight: 700;
  font-size: calc(20 / 1728 * 100vw);
  line-height: 1.41;
}

.clir-ds-dark-card p {
  position: absolute;
  left: calc(22 / 1728 * 100vw);
  bottom: calc(22 / 1728 * 100vw);
  margin: 0;
  font-weight: 300;
  font-size: calc(11 / 1728 * 100vw);
  line-height: calc(13 / 11);
}

.clir-overview-meta {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 145%;
  color: #36735E;
  margin: 0;
}

/* Horizontal divider */
.clir-divider {
  position: absolute;
  left: calc(220 / 1728 * 100vw);
  top: calc(1634 / 1728 * 100vw);
  width: calc(1284 / 1728 * 100vw);
  height: 0;
  border-top: 0.5px solid #9FC2B6;
}

/* ─── Design Process ─── */

/* ─── Problem & Solution section label ─── */
.clir-label-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.clir-label {
  font-family: 'Arial', sans-serif;
  font-weight: 400;
  font-size: calc(25 / 1728 * 100vw);
  line-height: 150%;
  color: #000;
}

.clir-label-underline {
  width: calc(121 / 1728 * 100vw);
  height: 0;
  border-top: 0.3px solid #000;
}

/* ─── Problem section ─── */
.clir-problem {
  position: absolute;
  left: calc(221 / 1728 * 100vw);
  top: calc(2630 / 1728 * 100vw);
  width: calc(394 / 1728 * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(33 / 1728 * 100vw);
}

.clir-problem-content {
  display: flex;
  flex-direction: column;
  gap: calc(22 / 1728 * 100vw);
}

.clir-problem-text {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 150%;
  color: #09412E;
  margin: 0;
}

.clir-problem-text strong {
  font-weight: 700;
}

/* Stats */
.clir-stat {
  display: flex;
  flex-direction: column;
}

.clir-stat-num {
  display: block;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(65 / 1728 * 100vw);
  line-height: 120%;
  color: #0F4634;
  margin-bottom: calc(-6 / 1728 * 100vw);
}

.clir-stat-desc {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 150%;
  color: #09412E;
  margin: 0;
}

.clir-stat-desc strong {
  font-weight: 700;
}

/* ─── Solution card ─── */
.clir-solution-card {
  position: absolute;
  left: calc(1010 / 1728 * 100vw);
  top: calc(2608 / 1728 * 100vw);
  width: calc(430 / 1728 * 100vw);
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: calc(22 / 1728 * 100vw);
  box-sizing: border-box;
}

.clir-solution-icon {
  width: calc(82 / 1728 * 100vw);
  height: calc(82 / 1728 * 100vw);
  border-radius: calc(18 / 1728 * 100vw);
  box-shadow: 0 calc(4 / 1728 * 100vw) calc(20 / 1728 * 100vw) rgba(0, 0, 0, 0.12);
}

.clir-solution-title {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: calc(25 / 1728 * 100vw);
  line-height: 150%;
  color: #000;
  margin: 0;
  padding-bottom: calc(2 / 1728 * 100vw);
  border-bottom: calc(0.3 / 1728 * 100vw) solid #000;
}

.clir-solution-desc {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 160%;
  color: #0F4634;
  text-align: center;
  margin: 0;
}

.clir-solution-desc strong {
  font-weight: 700;
}

.clir-solution-features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 / 1728 * 100vw);
  width: 100%;
  margin-top: calc(10 / 1728 * 100vw);
}

.clir-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(10 / 1728 * 100vw);
}

.clir-feature-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(10 / 1728 * 100vw) calc(29 / 1728 * 100vw);
  border: calc(1.5 / 1728 * 100vw) solid #0F4634;
  border-radius: calc(50 / 1728 * 100vw);
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 1;
  color: #0F4634;
  background: #fff;
  white-space: nowrap;
}

.clir-feature-desc {
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 150%;
  color: #0F4634;
  text-align: center;
  margin: 0;
}

/* ─── Research ─── */
.clir-research-intro {
  position: absolute;
  left: calc(226 / 1728 * 100vw);
  top: calc(3759 / 1728 * 100vw);
  width: calc(1287 / 1728 * 100vw);
  margin: 0;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: calc(16 / 1728 * 100vw);
  line-height: 140%;
  color: #09412E;
}

.clir-research-quotes {
  position: absolute;
  left: calc(260 / 1728 * 100vw);
  top: calc(3881 / 1728 * 100vw);
  display: flex;
  flex-direction: column;
  gap: calc(12 / 1728 * 100vw);
}

.clir-quote-row {
  display: flex;
  align-items: center;
  gap: calc(16 / 1728 * 100vw);
}

.clir-quote-icon {
  flex-shrink: 0;
  width: calc(90 / 1728 * 100vw);
  height: calc(90 / 1728 * 100vw);
  object-fit: cover;
}

.clir-research-quotes blockquote {
  width: calc(367 / 1728 * 100vw);
  min-height: calc(120 / 1728 * 100vw);
  margin: 0;
  padding: calc(28 / 1728 * 100vw) calc(25 / 1728 * 100vw);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background: #E7F6F1;
  border-radius: calc(8 / 1728 * 100vw);
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: calc(20 / 1728 * 100vw);
  line-height: 150%;
  color: #09412E;
}

/* ─── Persona ─── */
.clir-persona-img {
  position: absolute;
  left: calc(1084 / 1728 * 100vw);
  top: calc(4633 / 1728 * 100vw);
  width: calc(465 / 1728 * 100vw);
  height: calc(580 / 1728 * 100vw);
  object-fit: cover;
  display: block;
}