.carousel { overflow: hidden; position: relative; }
.carousel--marquee .carousel__track {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: max-content;
  animation: carousel-scroll 34s linear infinite;
}
@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.carousel--static {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.carousel__card {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 160px; height: 72px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.carousel__card:focus-within {
  outline: 2px solid var(--color-fg-secondary);
  outline-offset: 2px;
}
.carousel__card img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter var(--duration-hover) var(--ease-standard), opacity var(--duration-hover) var(--ease-standard);
}
.carousel__card:hover img, .carousel__card:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .carousel--marquee .carousel__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
}

.fabric-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.fabric-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-4);
  padding-inline: var(--space-2);
  margin-inline: calc(var(--space-2) * -1);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-hover) var(--ease-standard);
}
.fabric-list__item:hover { background: var(--color-brand-soft); }
.fabric-list__index {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--color-border);
  grid-row: 1 / 3;
}
.fabric-list__item h3 { margin: 0; font-size: var(--text-xl); }
.fabric-list__item p {
  margin: 0;
  grid-column: 2;
  font-size: var(--text-sm);
  color: var(--color-fg-secondary);
  max-width: 560px;
}
@media (min-width: 768px) {
  .fabric-list__item { grid-template-columns: 72px 1fr 1.4fr; align-items: baseline; }
  .fabric-list__item h3 { grid-column: 2; }
  .fabric-list__item p { grid-column: 3; }
}

.fabric-gallery-wrap { position: relative; margin-bottom: var(--space-6); }
.fabric-gallery {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--space-3);
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fabric-gallery::-webkit-scrollbar { display: none; }
.fabric-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 2;
  color: var(--color-fg-on-light);
  transition: background-color var(--duration-hover) var(--ease-standard), transform var(--duration-press) ease-out;
}
.fabric-gallery__arrow:hover { background: #fff; }
.fabric-gallery__arrow:active { transform: translateY(-50%) scale(0.92); }
.fabric-gallery__arrow--prev { left: var(--space-2); }
.fabric-gallery__arrow--next { right: var(--space-2); }
@media (prefers-reduced-motion: reduce) {
  .fabric-gallery__arrow:active { transform: translateY(-50%); }
}
.fabric-gallery__item {
  flex: 0 0 auto;
  width: min(320px, 78vw);
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  scroll-snap-align: start;
}
.fabric-gallery img {
  width: 100%; height: 260px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform 500ms var(--ease-standard);
}
.fabric-gallery__item:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .fabric-gallery__item:hover img { transform: none; }
}
@media (min-width: 768px) {
  .fabric-gallery__item { width: min(360px, 30vw); }
}

.fiber-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.fiber-chip {
  padding: 10px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--text-sm);
  color: var(--color-fg-on-light);
  background: var(--color-bg);
}

.cert-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-6);
}
.cert-card {
  background: var(--color-bg-sage-soft);
  border: 1px solid var(--color-border-sage);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.cert-card h4 { color: var(--color-brand); font-size: var(--text-base); }
.cert-card p { font-size: var(--text-sm); color: var(--color-fg-secondary); margin: 0; }
@media (min-width: 640px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cert-grid { grid-template-columns: repeat(5, 1fr); }
}

.trace-strip {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3);
  grid-template-columns: 1fr;
}
.trace-step__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.trace-step__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.trace-step__text {
  border-top: 1px solid var(--color-border-sage);
  padding-top: var(--space-2);
}
.trace-step__index {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-xl);
  color: var(--color-fg-secondary);
}
.trace-step h4 { margin-top: var(--space-1); }
.trace-step p { font-size: var(--text-sm); color: var(--color-fg-secondary); }
@media (min-width: 1024px) { .trace-strip { grid-template-columns: repeat(4, 1fr); } }

.sdg-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-fg-on-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-block: var(--space-6);
}
.sdg-panel__intro { max-width: 640px; color: var(--color-fg-secondary); margin-bottom: var(--space-3); }
.sdg-grid {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: repeat(2, 1fr);
}
.sdg-tile {
  background: var(--sdg-color);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.25;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 88px;
  transition: filter var(--duration-hover) var(--ease-standard);
}
.sdg-tile:hover { filter: brightness(1.08); }
.sdg-tile__num { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; }
.sdg-tile--highlight p { font-size: var(--text-xs); font-weight: 400; opacity: 0.95; margin: 4px 0 0; }
@media (min-width: 640px) {
  .sdg-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  .sdg-grid { grid-template-columns: repeat(6, 1fr); }
}

.contact-form { display: flex; flex-direction: column; gap: var(--space-3); }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: var(--text-sm); font-weight: 500; }
.form-row input, .form-row select, .form-row textarea {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-fg-on-light);
  transition: border-color var(--duration-hover) var(--ease-standard);
}
.form-row select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--color-fg-on-light);
  outline-offset: 1px;
  border-color: var(--color-fg-on-light);
}
.form-status { font-size: var(--text-sm); min-height: 1.2em; }
.form-status--success { color: #2E7D32; }
.form-status--error { color: var(--color-destructive); }

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity var(--duration-hover) var(--ease-standard);
}
.cursor-dot--hidden, .cursor-ring--hidden { opacity: 0; }
.cursor-dot {
  width: 6px; height: 6px;
  background: var(--color-fg-on-light);
  margin-left: -3px; margin-top: -3px;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 32px; height: 32px;
  border: 1px solid var(--color-fg-on-light);
  margin-left: -16px; margin-top: -16px;
  mix-blend-mode: difference;
  transition: width 200ms var(--ease-standard), height 200ms var(--ease-standard), opacity var(--duration-hover) var(--ease-standard);
}
.cursor-ring--active {
  width: 52px; height: 52px;
  margin-left: -26px; margin-top: -26px;
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

.marquee {
  overflow: hidden;
  background: var(--color-bg-sage-soft);
  border-block: 1px solid var(--color-border-sage);
  padding-block: var(--space-2);
}
.marquee__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
  white-space: nowrap;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .marquee__track span:nth-child(n+6) { display: none; }
}

.sustain-video {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 430;
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.sustain-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 640px) {
  .sustain-video { aspect-ratio: 4 / 5; }
}