/* Colour chapters: one product-led media surface and native channel disclosures. */
.home #channels { overflow: visible; background: #dce7e2; color: #101e24; }
.home #channels .qf-section-head { grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); row-gap: 18px; margin-bottom: 42px; }
.home #channels .qf-section-label { display: block; grid-column: 1 / -1; grid-row: 1; margin: 0; color: #a84328; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: .05em; }
.home #channels .qf-section-title { grid-column: 1; grid-row: 2; }
.home #channels .qf-section-intro { grid-column: 2; grid-row: 2; }
.home #channels .qf-section-title { font-size: clamp(38px, 3.6vw, 60px); line-height: 1.18; letter-spacing: -.045em; }
.home #channels .qf-section-intro { max-width: 39em; font-size: 18px; line-height: 1.75; }
.home #channels .qf-channel-experience {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.home #channels .qf-channel-visual { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 28px); min-width: 0; }
.home #channels .qf-channel-deck { position: relative; box-sizing: border-box; width: 100%; height: clamp(470px, 36vw, 540px); padding: 0; isolation: isolate; overflow: hidden; }
.home #channels .qf-channel-preview {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #0b2635;
  color: #edf2ef;
  transform-origin: center;
  transform: none;
  z-index: calc(5 - var(--qf-preview-order, 0));
}
.home #channels .qf-channel-preview[aria-hidden="true"] { pointer-events: none; opacity: 0; }
.home #channels .qf-channel-preview.is-current { z-index: 6; }
.home #channels .qf-preview-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 15px 22px; background: #173e4c; color: #edf2ef; font-size: 16px; line-height: 1.4; }
.home #channels .qf-preview-context { color: #c4d9db; font-size: 14px; }
.home #channels .qf-preview-media { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.home #channels .qf-preview-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; border: 0; border-radius: 0; }
.home #channels .qf-preview-copy { min-width: 0; padding: 22px 24px; background: #0b2635; }
.home #channels .qf-preview-copy p { margin: 0; color: #d7e3e4; font-size: 16px; line-height: 1.65; }
.home #channels .qf-preview-copy p + p { margin-top: 12px; }
.home #channels .qf-preview-copy .qf-preview-title,
.home #channels .qf-preview-side-copy .qf-preview-title { color: #edf2ef; font-size: clamp(22px, 2vw, 29px); line-height: 1.25; font-weight: 500; letter-spacing: -.025em; }
.home #channels .qf-preview-copy .qf-preview-format { color: #ffae90; font-size: 14px; line-height: 1.5; }
.home #channels .qf-preview-path { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.home #channels .qf-preview-path span { padding: 7px 12px; background: #204654; color: #edf2ef; font-size: 16px; line-height: 1.45; }
.home #channels .qf-preview-path span:last-child { background: #ff794d; color: #101e24; }
.home #channels .qf-preview--social-post .qf-preview-topline { background: #ff794d; color: #101e24; }
.home #channels .qf-preview--social-post .qf-preview-context { color: #273e42; }
.home #channels .qf-preview--social-post .qf-preview-media img { object-position: 50% 55%; }
.home #channels .qf-preview--professional-demo .qf-preview-media img { object-position: 50% 36%; }
.home #channels .qf-preview-portrait-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 22px; min-height: 0; padding: 20px 22px 0; background: #102f3d; }
.home #channels .qf-preview--short-video .qf-preview-media img { object-position: 41% 45%; }
.home #channels .qf-preview-side-copy { min-width: 0; align-self: center; }
.home #channels .qf-preview-side-copy p { margin: 15px 0 0; color: #d7e3e4; font-size: 16px; line-height: 1.5; }
.home #channels .qf-preview-side-copy .qf-preview-title { margin-top: 0; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; }
.home #channels .qf-channel-visual-note { margin: 14px 0 0; color: #3d575c; font-size: 14px; line-height: 1.65; }
.home #channels .qf-channel-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; }
.home #channels .qf-channel-select { appearance: none; min-height: 48px; padding: 10px 14px; border: 0; border-radius: 0; background: #c2d4cd; color: #101e24; font: inherit; font-size: 16px; line-height: 1.5; cursor: pointer; }
.home #channels .qf-channel-select[aria-pressed="true"] { background: #101e24; color: #edf2ef; }
.home #channels .qf-channel-select:hover { background: #adc6bc; }
.home #channels .qf-channel-select[aria-pressed="true"]:hover { background: #163947; }
.home #channels .qf-channel-select:focus-visible { outline: 3px solid #c94e25; outline-offset: 3px; }

/* Only native details controls close their bodies; CSS never hides the source prose. */
.home #channels .qf-channel-experience .qf-channel-list { min-width: 0; width: 100%; margin: 0; }
.home #channels .qf-channel-list > details { padding: 0 26px; margin: 0 0 10px; border: 0; background: #ccddd5; transition: none; }
.home #channels .qf-channel-list > details[open] { background: #edf2ef; }
.home #channels .qf-channel-list > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; margin: 0; padding: 20px 0; color: #101e24; font-size: clamp(24px, 2vw, 30px); line-height: 1.3; font-weight: 500; letter-spacing: -.025em; cursor: pointer; }
.home #channels .qf-channel-list > details > summary::-webkit-details-marker { display: none; }
.home #channels .qf-channel-list > details > summary::after { content: "+"; flex: 0 0 30px; color: #31595d; font-size: 32px; line-height: 1; text-align: center; font-weight: 400; }
.home #channels .qf-channel-list > details[open] > summary::after { content: "−"; }
.home #channels .qf-channel-list > details[open] > summary { color: #101e24; }
.home #channels .qf-channel-list > details > summary:focus-visible { outline: 3px solid #c94e25; outline-offset: 5px; }
.home #channels .qf-channel-list > details > :not(summary) { margin-top: 0; margin-bottom: 24px; }
.home #channels .qf-channel-list > details p,
.home #channels .qf-channel-list > details li { color: #101e24; font-size: 16px; line-height: 1.75; }
.home #channels .qf-channel-list > details p + p { margin-top: 16px; }
.home #channels .qf-channel-list > details ul { padding-left: 1.2em; margin-block: 12px 22px; }
.home #channels .qf-channel-list > details li + li { margin-top: 8px; }
.home #channels .qf-channel-cooperation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 24px 0 20px; }
.home #channels .qf-channel-note { margin: 0; }
.home #channels .qf-channel-note > p + p { margin-top: 8px; }
.home #channels .qf-channel-list > details h3,
.home #channels .qf-channel-list > details h4 { margin-top: 24px; margin-bottom: 12px; color: #101e24; font-size: 20px; line-height: 1.5; }
.home #channels .qf-channel-footnote { margin-top: 44px; }

@media (min-width: 901px) and (max-height: 760px) {
  .home #channels .qf-channel-visual { top: calc(var(--wp-admin--admin-bar--height, 0px) + 16px); }
  .home #channels .qf-channel-deck { height: 450px; }
  .home #channels .qf-preview-copy { padding-top: 18px; padding-bottom: 18px; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .home #channels .qf-channel-experience { gap: 32px; }
  .home #channels .qf-preview-topline { padding-inline: 18px; }
  .home #channels .qf-preview-copy { padding-inline: 18px; }
  .home #channels .qf-preview-portrait-stage { gap: 16px; padding-inline: 18px; }
}
@media (max-width: 900px) {
  .home #channels .qf-section-head { display: block; margin-bottom: 32px; }
  .home #channels .qf-section-label { margin-bottom: 18px; }
  .home #channels .qf-section-title { font-size: clamp(34px, 5vw, 46px); }
  .home #channels .qf-section-intro { margin-top: 22px; font-size: 17px; }
  .home #channels .qf-channel-experience { grid-template-columns: minmax(0, 1fr); gap: 42px; }
  .home #channels .qf-channel-visual { position: static; top: auto; width: 100%; max-width: 640px; margin-inline: auto; }
  .home #channels .qf-channel-deck { height: clamp(460px, 75vw, 540px); }
  .home #channels .qf-channel-list > details > summary { font-size: clamp(23px, 4.3vw, 30px); }
}
@media (max-width: 480px) {
  .home #channels .qf-section-title { font-size: clamp(31px, 8.4vw, 40px); }
  .home #channels .qf-channel-deck { height: 480px; padding: 0; }
  .home #channels .qf-preview-topline { padding: 13px 16px; gap: 4px 12px; font-size: 14px; }
  .home #channels .qf-preview-context { font-size: 14px; }
  .home #channels .qf-preview-copy { padding: 19px 18px; }
  .home #channels .qf-preview-copy p { font-size: 16px; line-height: 1.65; }
  .home #channels .qf-preview-copy .qf-preview-title { font-size: 23px; }
  .home #channels .qf-preview-copy .qf-preview-format { font-size: 14px; }
  .home #channels .qf-preview-portrait-stage { gap: 16px; padding: 16px 16px 0; }
  .home #channels .qf-preview-side-copy p { font-size: 14px; margin-top: 15px; }
  .home #channels .qf-preview-side-copy .qf-preview-title { font-size: 25px; }
  .home #channels .qf-preview-path { gap: 6px; }
  .home #channels .qf-preview-path span { padding-inline: 9px; }
  .home #channels .qf-channel-visual-note { margin-inline: 0; }
  .home #channels .qf-channel-selector { margin-inline: 0; gap: 7px; }
  .home #channels .qf-channel-select { padding-inline: 12px; }
  .home #channels .qf-channel-list > details { padding-inline: 20px; }
  .home #channels .qf-channel-cooperation { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .home #channels .qf-channel-list > details p,
  .home #channels .qf-channel-list > details li { font-size: 16px; }
  .home #channels .qf-channel-list > details > summary { padding-block: 22px; font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .home #channels .qf-channel-preview { transition: none; }
}