@layer sections {
  /* ---- video reel ---- */
  .reel { overflow-x: clip; }
  .reel__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
  .reel__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.5rem); list-style: none; margin: 0; padding: 0; }
  .reel__item--1 { grid-column: 1 / 8; grid-row: 1 / 3; }
  .reel__item--2 { grid-column: 8 / 13; }
  .reel__item--3 { grid-column: 8 / 13; }
  .reel__item--4 { grid-column: 1 / 13; }
  .reel__card { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 0.75rem; }
  .reel__frame { position: relative; overflow: hidden; border-radius: var(--radius-l); background: rgb(0 0 0 / 0.35); box-shadow: 0 40px 60px -34px rgb(0 0 0 / 0.7); aspect-ratio: 16 / 10; min-height: 100%; }
  .reel__item--1 .reel__frame { aspect-ratio: auto; min-height: 100%; }
  .reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .reel__toggle { position: absolute; inset: 0; width: 100%; background: none; border: 0; cursor: pointer; display: grid; place-items: center; }
  .reel__icon { width: 4rem; height: 4rem; border-radius: 50%; background: rgb(21 12 8 / 0.55); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / 0.35); position: relative; transition: opacity 0.4s, transform 0.6s var(--ease-spring); }
  .reel__icon::after { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: 0.95rem solid var(--c-cream); border-block: 0.6rem solid transparent; }
  .reel__toggle[aria-pressed='true'] .reel__icon { opacity: 0; transform: scale(0.7); }
  .reel__toggle:hover .reel__icon { transform: scale(1.1); }
  .reel__toggle[aria-pressed='true']:hover .reel__icon { opacity: 1; }
  .reel__toggle:focus-visible { outline: 3px solid var(--c-honey); outline-offset: -6px; border-radius: var(--radius-l); }
  .reel__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; font-weight: 500; }
  .reel__tag { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
  @media (max-width: 849px) {
    .reel__item--1, .reel__item--2, .reel__item--3, .reel__item--4 { grid-column: 1 / -1; grid-row: auto; }
    .reel__frame, .reel__item--1 .reel__frame { aspect-ratio: 16 / 10; min-height: 0; }
  }

  /* ---- testimonials ---- */
  .quotes__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
  .quotes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
  .quote { margin: 0; height: 100%; display: grid; gap: 1.5rem; align-content: space-between; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--radius-l); border: 1px solid var(--line); background: color-mix(in oklab, var(--c-cream) 55%, transparent); }
  .quote__text { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.4; }
  .quote__text::before { content: '\201C'; display: block; font-size: 3.5rem; line-height: 0.6; color: var(--accent-display, var(--accent)); margin-bottom: 0.6rem; }
  .quote__by { display: flex; align-items: center; gap: 0.85rem; }
  .quote__avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; flex: none; }
  .quote__avatar--initial { display: grid; place-items: center; background: var(--c-caramel, #c47a1c); color: var(--c-ink); font-weight: 700; }
  .quote__who { display: grid; font-size: var(--fs-s, 0.9rem); }
  .quote__who a { text-decoration: underline; text-underline-offset: 0.2em; }
  .quotes__more { margin-top: 2rem; }
  .quotes__empty { padding: 2rem; border: 1px dashed var(--line); border-radius: var(--radius-l); }
}
@layer sections {
  /* ---- vertical social reels ---- */
  .sreels { overflow-x: clip; }
  .sreels__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .sreels__track { display: flex; gap: clamp(0.75rem, 1.6vw, 1.5rem); list-style: none; margin: 0; padding: 0 calc((100% - min(100% - 2 * var(--gutter), var(--page-width, 1440px))) / 2) 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100% - min(100% - 2 * var(--gutter), var(--page-width, 1440px))) / 2); scrollbar-width: thin; }
  .sreels__item { flex: 0 0 clamp(14rem, 22vw, 19rem); scroll-snap-align: start; }
  .sreels__frame { aspect-ratio: 9 / 16; min-height: 0; }
  .sreels__item .reel__card { grid-template-rows: auto auto; }
}