/* ==========================================================================
   Techniques — three-up desktop carousel, one-column stack below 1200px
   ========================================================================== */
.techniques {
  padding: clamp(2.4rem, 6vw, 4.2rem) 0;
}

.techniques__head {
  max-width: 70ch;
  margin: 0 auto clamp(2rem, 4.5vw, 3.2rem);
  text-align: center;
}

.techniques__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  color: var(--colour-text);
}

.techniques__intro {
  margin-top: 1rem;
  color: var(--colour-muted);
  font-size: 1.1rem;
}

/* --- Carousel ----------------------------------------------------------- */
.lm-carousel {
  position: relative;
}

.lm-carousel__viewport {
  overflow: hidden;
  padding-inline: 1px;
}

.lm-carousel__track {
  --lm-per-view: 3;
  --lm-gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
  display: flex;
  gap: var(--lm-gap);
  width: 100%;
  margin: 0;
  padding: 4.75rem 0 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.lm-carousel__track::-webkit-scrollbar {
  display: none;
}

.tq-row {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - (var(--lm-per-view) - 1) * var(--lm-gap)) / var(--lm-per-view));
  flex-direction: column;
  min-width: 0;
  overflow: visible;
  scroll-snap-align: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 34px -28px rgba(20, 23, 38, 0.48);
}

.tq-row__media {
  position: relative;
  display: grid;
  width: 100%;
  margin: 0;
  padding: 3.75rem 1rem 0.25rem;
  place-items: center;
  overflow: visible;
}

.tq-row__copy {
  flex: 1;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  padding-top: 0.45rem;
  text-align: center;
}

.tq-row__title {
  font-family: var(--font-heading);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.08;
  color: var(--colour-text);
}

.tq-row__body {
  min-height: 4.65em;
  margin-top: 0.45rem;
  color: var(--colour-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* --- Post-it roundels --------------------------------------------------- */
.lm-icon {
  --lm-face-hi: var(--colour-postit-hi);
  --lm-face: var(--colour-postit);
  --lm-face-lo: var(--colour-postit-lo);
  --lm-edge: #c8a72b;
  --lm-depth: 5px;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  display: grid;
  width: clamp(90px, 8.3vw, 108px);
  height: calc(clamp(90px, 8.3vw, 108px) - var(--lm-depth));
  place-items: center;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--lm-edge) 62%, transparent);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--lm-face-hi) 0%, var(--lm-face) 56%, var(--lm-face-lo) 100%);
  background-clip: padding-box;
  box-shadow:
    0 var(--lm-depth) 0 var(--lm-edge),
    0 12px 18px -10px rgba(20, 23, 38, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  isolation: isolate;
  transform: translate(-50%, calc(-50% - 2.5px));
}

.lm-icon i {
  display: block;
  width: clamp(38px, 3.6vw, 47px);
  height: clamp(38px, 3.6vw, 47px);
  color: var(--colour-postit-ink);
  background: currentColor;
  -webkit-mask-image: var(--lm-icon);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: var(--lm-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.tq-row:nth-child(4n + 2) .lm-icon {
  --lm-face-hi: var(--postit-green-hi);
  --lm-face: var(--postit-green);
  --lm-face-lo: var(--postit-green-lo);
  --lm-edge: #87ad43;
}

.tq-row:nth-child(4n + 2) .lm-icon i { color: #274821; }

.tq-row:nth-child(4n + 3) .lm-icon {
  --lm-face-hi: var(--postit-blue-hi);
  --lm-face: var(--postit-blue);
  --lm-face-lo: var(--postit-blue-lo);
  --lm-edge: #62a8ce;
}

.tq-row:nth-child(4n + 3) .lm-icon i { color: #225f83; }

.tq-row:nth-child(4n + 4) .lm-icon {
  --lm-face-hi: var(--postit-pink-hi);
  --lm-face: var(--postit-pink);
  --lm-face-lo: var(--postit-pink-lo);
  --lm-edge: #ca647d;
}

.tq-row:nth-child(4n + 4) .lm-icon i { color: #7c3047; }

/* Self-contained Font Awesome Free glyphs. */
.fa-magnifying-glass {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}

.fa-table-cells-large {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm88 64l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0zM64 224l88 0 0 64-88 0 0-64zm232 0l0 64-88 0 0-64 88 0zm64 0l88 0 0 64-88 0 0-64zM152 352l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0z'/%3E%3C/svg%3E");
}

.fa-clipboard-check {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM305 273L177 401c-9.4 9.4-24.6 9.4-33.9 0L79 337c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L271 239c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");
}

.fa-arrow-pointer {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M0 55.2L0 426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320l118.1 0c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z'/%3E%3C/svg%3E");
}

.fa-list-check {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M152.1 38.2c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 113C-2.3 103.6-2.3 88.4 7 79s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zm0 160c9.9 8.9 10.7 24 1.8 33.9l-72 80c-4.4 4.9-10.6 7.8-17.2 7.9s-12.9-2.4-17.6-7L7 273c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l22.1 22.1 55.1-61.2c8.9-9.9 24-10.7 33.9-1.8zM224 96c0-17.7 14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32zm0 160c0-17.7 14.3-32 32-32l224 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-224 0c-17.7 0-32-14.3-32-32zM160 416c0-17.7 14.3-32 32-32l288 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-288 0c-17.7 0-32-14.3-32-32zM48 368a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E");
}

.fa-wand-magic-sparkles {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/svg%3E");
}

.fa-scissors {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 192l-39.5-39.5c4.9-12.6 7.5-26.2 7.5-40.5C224 50.1 173.9 0 112 0S0 50.1 0 112s50.1 112 112 112c14.3 0 27.9-2.7 40.5-7.5L192 256l-39.5 39.5c-12.6-4.9-26.2-7.5-40.5-7.5C50.1 288 0 338.1 0 400s50.1 112 112 112s112-50.1 112-112c0-14.3-2.7-27.9-7.5-40.5L499.2 76.8c7.1-7.1 7.1-18.5 0-25.6c-28.3-28.3-74.1-28.3-102.4 0L256 192zm22.6 150.6L396.8 460.8c28.3 28.3 74.1 28.3 102.4 0c7.1-7.1 7.1-18.5 0-25.6L342.6 278.6l-64 64zM64 112a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm48 240a48 48 0 1 1 0 96 48 48 0 1 1 0-96z'/%3E%3C/svg%3E");
}

.fa-layer-group {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M264.5 5.2c14.9-6.9 32.1-6.9 47 0l218.6 101c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 149.8C37.4 145.8 32 137.3 32 128s5.4-17.9 13.9-21.8L264.5 5.2zM476.9 209.6l53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 277.8C37.4 273.8 32 265.3 32 256s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0l152-70.2zm-152 198.2l152-70.2 53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 405.8C37.4 401.8 32 393.3 32 384s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0z'/%3E%3C/svg%3E");
}

.fa-rocket {
  --lm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2l0 82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9l0-107.2c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168a40 40 0 1 0 0-80 40 40 0 1 0 0 80z'/%3E%3C/svg%3E");
}

/* --- Controls ----------------------------------------------------------- */
.lm-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.lm-carousel__arrow {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  cursor: pointer;
  color: var(--colour-text);
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 50%;
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.3);
}

.lm-carousel__arrow::before {
  font-size: 1.25rem;
  line-height: 1;
}

.lm-carousel__arrow--prev::before { content: "\2190"; }
.lm-carousel__arrow--next::before { content: "\2192"; }

.lm-carousel__arrow:disabled {
  cursor: default;
  opacity: 0.3;
}

.lm-carousel__count {
  min-width: 3.5rem;
  font-size: 0.94rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 1200px) {
  .lm-carousel__track {
    --lm-per-view: 2;
  }
}

@media (max-width: 640px) {
  .lm-carousel__track {
    --lm-per-view: 1;
  }

  .lm-icon {
    width: 98px;
    height: calc(98px - var(--lm-depth));
  }

  .lm-icon i {
    width: 42px;
    height: 42px;
  }
}
