:root {
  --kc-brand-ink: #142b4f;
  --kc-brand-blue: #2c70de;
  --kc-brand-pale: #f3f7fd;
  --kc-brand-line: #dce6f3;
  --kc-brand-max: 1200px;
}

body.kc-brand-body { background: #fff; color: var(--kc-brand-ink); }
.kc-brand-shell { width: min(calc(100% - 48px), var(--kc-brand-max)); margin: 0 auto; }
.kc-brand-matrix-hero, .kc-brand-scene { width: 100%; overflow: hidden; background: #f4f8fc; }
/* These two reference blocks are complete images.  Keep their full canvas instead
   of forcing a responsive crop that could remove customer-supplied lettering. */
.kc-brand-matrix-hero img, .kc-brand-scene img { display: block; width: 100%; height: auto; object-fit: contain; }
.kc-brand-matrix-hero > .kc-brand-empty, .kc-brand-scene > .kc-brand-empty { min-height: clamp(160px, 25vw, 420px); border: 0; font-size: clamp(18px, 2.2vw, 28px); }
.kc-brand-switcher { background: #fff; border-bottom: 1px solid var(--kc-brand-line); }
.kc-brand-switcher-inner { width: min(calc(100% - 48px), var(--kc-brand-max)); margin: 0 auto; min-height: 92px; display: flex; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 58px); overflow-x: auto; }
.kc-brand-switcher-link { flex: 0 0 auto; min-width: 104px; min-height: 56px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; color: var(--kc-brand-ink); border-bottom: 3px solid transparent; transition: color .18s ease, border-color .18s ease, background .18s ease; }
.kc-brand-switcher-link:hover, .kc-brand-switcher-link:focus-visible { color: var(--kc-brand-blue); background: #f8fbff; }
.kc-brand-switcher-link.is-active { border-bottom-color: var(--kc-brand-blue); color: var(--kc-brand-blue); }
.kc-brand-switcher-link img { max-width: 142px; max-height: 38px; object-fit: contain; }
.kc-brand-switcher-link:not(.is-active) img { filter: grayscale(1); opacity: .54; }
.kc-brand-switcher-text { font-weight: 700; font-size: 18px; letter-spacing: .02em; }
.kc-brand-copy { padding: clamp(48px, 6vw, 82px) 0; text-align: center; background: #fff; }
.kc-brand-eyebrow { margin: 0 0 12px; color: var(--kc-brand-blue); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.kc-brand-copy h1, .kc-brand-section h2 { margin: 0; color: var(--kc-brand-ink); font-weight: 700; line-height: 1.15; }
.kc-brand-copy h1 { font-size: clamp(28px, 3vw, 40px); }
.kc-brand-copy h2 { margin-top: 8px; font-size: clamp(17px, 1.8vw, 24px); }
/* The supplied four-brand reference has a compact, paragraph-only introduction.
   Preserve the stored legacy headings for the editor, but do not invent a visible
   heading hierarchy that does not exist in the approved composition. */
.kc-brand-copy .kc-brand-eyebrow, .kc-brand-copy h1, .kc-brand-copy h2 { display: none; }
.kc-brand-copy p { max-width: 680px; margin: 0 auto; color: #384b65; font-size: clamp(12px, 1vw, 15px); line-height: 1.75; }
.kc-brand-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 28px; padding: 0 24px; color: #fff; background: var(--kc-brand-blue); border: 1px solid var(--kc-brand-blue); }
.kc-brand-section { padding: clamp(42px, 5.5vw, 74px) 0; background: #fff; }
.kc-brand-section--soft { background: #fff; }
.kc-brand-section-header { margin-bottom: 28px; text-align: center; }
.kc-brand-section-header p { max-width: 760px; margin: 14px auto 0; color: #536883; line-height: 1.75; }
.kc-brand-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 32px; }
/* The editor permits operators to add and remove cards.  Keep the resulting
   layout intentional for the small-card cases rather than leaving one or four
   cards anchored to the left edge of a three-column grid. */
.kc-brand-product-grid--one { width: min(100%, 390px); margin-inline: auto; grid-template-columns: minmax(0,1fr); }
.kc-brand-product-grid--two, .kc-brand-product-grid--four { width: min(100%, 820px); margin-inline: auto; grid-template-columns: repeat(2, minmax(0,1fr)); }
/* New visible cards retain a balanced last row all the way to the editor's
   12-card limit.  A three-column grid alone would leave the final one or two
   cards stuck against the left edge after an operator adds or deletes one. */
.kc-brand-product-grid--five, .kc-brand-product-grid--seven, .kc-brand-product-grid--eight, .kc-brand-product-grid--ten, .kc-brand-product-grid--eleven { grid-template-columns: repeat(6, minmax(0,1fr)); }
.kc-brand-product-grid--five > .kc-brand-product-card, .kc-brand-product-grid--seven > .kc-brand-product-card, .kc-brand-product-grid--eight > .kc-brand-product-card, .kc-brand-product-grid--ten > .kc-brand-product-card, .kc-brand-product-grid--eleven > .kc-brand-product-card { grid-column: span 2; }
.kc-brand-product-grid--five > .kc-brand-product-card:nth-child(4), .kc-brand-product-grid--eight > .kc-brand-product-card:nth-child(7), .kc-brand-product-grid--eleven > .kc-brand-product-card:nth-child(10) { grid-column: 2 / span 2; }
.kc-brand-product-grid--seven > .kc-brand-product-card:nth-child(7), .kc-brand-product-grid--ten > .kc-brand-product-card:nth-child(10) { grid-column: 3 / span 2; }
.kc-brand-product-card { min-width: 0; background: transparent; border: 0; text-align: center; }
.kc-brand-news-card { min-width: 0; background: transparent; border: 0; }
.kc-brand-product-card, .kc-brand-news-card { color: inherit; text-decoration: none; }
.kc-brand-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f6fa; }
/* A percentage-height replaced element in an aspect-ratio-only box can resolve
   from its intrinsic height.  It then overflows this hidden frame and crops the
   product.  Pin the image to the known media frame instead. */
.kc-brand-media img { position: absolute; inset: 0; box-sizing: border-box; display: block; width: 100%; height: 100%; object-fit: contain; padding: clamp(12px, 2vw, 28px); }
.kc-brand-news-card .kc-brand-media { aspect-ratio: 4 / 3; background: transparent; }
.kc-brand-news-card .kc-brand-media img { object-fit: cover; padding: 0; }
/* LEXY's supplied reference uses tall, light-grey product panels rather than
   landscape marketing tiles. Other brands keep their two-card reference ratio. */
body[data-kc-brand-key="lexy"] .kc-brand-product-card .kc-brand-media { aspect-ratio: 4 / 5; }
body[data-kc-brand-key="lexy"] .kc-brand-product-grid { width: min(100%, 960px); margin-inline: auto; gap: 34px 28px; }
body[data-kc-brand-key="lexy"] .kc-brand-product-card .kc-brand-media img { padding: clamp(12px, 1.6vw, 22px); mix-blend-mode: multiply; }
.kc-brand-product-card-copy { padding: 14px 8px 0; }
.kc-brand-news-card-copy { padding: 20px 20px 24px; }
.kc-brand-product-card h3, .kc-brand-news-card h3 { margin: 0; font-size: clamp(15px, 1.45vw, 18px); line-height: 1.3; }
.kc-brand-product-card p, .kc-brand-news-card p { margin: 8px 0 0; color: #556b86; font-size: 13px; line-height: 1.55; }
.kc-brand-card-link { display: inline-flex; margin-top: 14px; color: var(--kc-brand-blue); font-weight: 700; }
.kc-brand-feature { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.kc-brand-feature-media { aspect-ratio: 16 / 10; overflow: hidden; background: #eaf0f8; }
.kc-brand-feature-media img { width: 100%; height: 100%; object-fit: contain; }
.kc-brand-feature-copy h2 { font-size: clamp(26px, 3vw, 42px); }
.kc-brand-feature-copy p { margin: 18px 0 0; color: #536883; line-height: 1.8; }
.kc-brand-value-list, .kc-brand-rd-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin: 30px 0 0; padding: 0; list-style: none; }
.kc-brand-value-list li, .kc-brand-rd-list li { padding: 24px 20px; background: #fff; border: 1px solid var(--kc-brand-line); color: var(--kc-brand-ink); font-weight: 700; text-align: center; }
.kc-brand-honors { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.kc-brand-honors-media { aspect-ratio: 16 / 10; overflow: hidden; background: #eaf0f8; }
.kc-brand-honors-media img { width: 100%; height: 100%; object-fit: contain; }
.kc-brand-honors h2 { font-size: clamp(26px, 3vw, 42px); }
.kc-brand-honors p { margin: 18px 0 0; color: #536883; line-height: 1.8; }
.kc-brand-artwork { padding-block: clamp(36px, 5vw, 80px); }
.kc-brand-artwork-media { overflow: hidden; background: transparent; }
.kc-brand-artwork-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.kc-brand-artwork--fullbleed { padding: 0; }
.kc-brand-artwork--fullbleed .kc-brand-artwork-media { width: 100%; }
/* r29 banner contract: a full-bleed operator artwork is the source canvas
   itself, never a framed card.  Keep these declarations explicit so later
   generic media styling cannot reintroduce a border, radius, or inset. */
.kc-brand-artwork--fullbleed,
.kc-brand-artwork--fullbleed > .kc-brand-artwork-media,
.kc-brand-artwork--fullbleed > .kc-brand-artwork-media > img {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.kc-brand-video { padding-block: clamp(28px, 4vw, 56px); }
.kc-brand-video-frame { position: relative; width: min(100%, 1280px); margin-inline: auto; aspect-ratio: 16 / 9; background: #111; }
.kc-brand-video video, .kc-brand-video-poster { display: block; width: 100%; aspect-ratio: 16 / 9; background: transparent; object-fit: contain; }
.kc-brand-video-frame video { height: 100%; }
.kc-brand-video-play { position: absolute; inset: 50% auto auto 50%; display: grid; width: 68px; height: 68px; place-items: center; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 50%; color: #fff; background: rgba(10, 25, 47, .76); box-shadow: 0 8px 24px rgba(0,0,0,.24); font-size: 26px; transition: transform .18s ease, background .18s ease; }
.kc-brand-video-play:hover, .kc-brand-video-play:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: rgba(17, 78, 171, .9); }
.kc-brand-video-poster { overflow: hidden; }
.kc-brand-video-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.kc-brand-artwork-media > .kc-brand-empty { min-height: clamp(180px, 28vw, 460px); }
.kc-brand-video-poster > .kc-brand-empty { min-height: 100%; }
.kc-brand-news-grid { display: grid; width: min(100%, 780px); margin-inline: auto; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
.kc-brand-value-grid { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(28px, 6vw, 88px); align-items: center; }
.kc-brand-value-copy h2 { margin: 0; font-size: clamp(28px, 3.2vw, 46px); }
.kc-brand-value-label { margin: 28px 0 0; color: #536883; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.35; }
.kc-brand-value-number { margin: 4px 0 0; color: var(--kc-brand-blue); font-size: clamp(46px, 6.6vw, 90px); font-weight: 700; letter-spacing: -.055em; line-height: .95; }
.kc-brand-value-unit { display: block; margin-top: 12px; color: #274a79; font-size: clamp(17px, 1.9vw, 25px); font-weight: 700; letter-spacing: .03em; }
.kc-brand-value-note { max-width: 520px; margin: 28px 0 0; color: #536883; font-size: 15px; line-height: 1.75; }
.kc-brand-value-media { overflow: visible; background: transparent; }
.kc-brand-value-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.kc-brand-status { margin: 0 auto 22px; width: fit-content; padding: 6px 12px; color: #805d00; background: #fff5d6; border: 1px solid #f0d686; font-size: 12px; font-weight: 700; }
.kc-brand-preview-notice { width: min(calc(100% - 48px), var(--kc-brand-max)); margin: 18px auto 0; padding: 10px 14px; color: #805d00; background: #fff5d6; border: 1px solid #f0d686; font-size: 13px; font-weight: 700; text-align: center; }
.kc-brand-empty { display: grid; width: 100%; min-height: 180px; height: 100%; place-items: center; padding: 28px; color: #6b7280; font-size: 18px; font-weight: 700; letter-spacing: .12em; text-align: center; background: #e5e7eb; border: 1px dashed #aab2bd; }
.kc-brand-error { margin: 32px auto; max-width: 760px; padding: 18px 20px; color: #8d1d1d; background: #fff2f2; border: 1px solid #edbcbc; }
.kc-brand-body .kc-secondary-footer { margin-top: 0; }

@media (max-width: 900px) {
  .kc-brand-product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kc-brand-product-grid--five, .kc-brand-product-grid--seven, .kc-brand-product-grid--eight, .kc-brand-product-grid--ten, .kc-brand-product-grid--eleven { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kc-brand-product-grid--five > .kc-brand-product-card, .kc-brand-product-grid--seven > .kc-brand-product-card, .kc-brand-product-grid--eight > .kc-brand-product-card, .kc-brand-product-grid--ten > .kc-brand-product-card, .kc-brand-product-grid--eleven > .kc-brand-product-card { grid-column: auto; }
  .kc-brand-feature, .kc-brand-honors, .kc-brand-value-grid { grid-template-columns: 1fr; }
  .kc-brand-feature--reverse .kc-brand-feature-media { order: initial; }
}

@media (max-width: 600px) {
  .kc-brand-shell { width: min(calc(100% - 32px), var(--kc-brand-max)); }
  /* The client reference has all four brand tabs visible together.  Do not
     turn this into a hidden horizontal scroller on mobile. */
  .kc-brand-switcher-inner { width: 100%; justify-content: center; min-height: 78px; gap: 0; overflow: hidden; padding: 0 10px; }
  .kc-brand-switcher-link { flex: 1 1 25%; min-width: 0; padding: 8px 4px; }
  .kc-brand-switcher-link img { width: 100%; max-width: 88px; max-height: 28px; }
  .kc-brand-switcher-text { font-size: 15px; }
  .kc-brand-copy { padding: 40px 0 46px; }
  .kc-brand-copy p { text-align: center; }
  .kc-brand-product-grid, .kc-brand-product-grid--two, .kc-brand-news-grid { grid-template-columns: 1fr; }
  body[data-kc-brand-key="lexy"] .kc-brand-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  body[data-kc-brand-key="lexy"] .kc-brand-product-card-copy { padding-inline: 2px; }
  body[data-kc-brand-key="lexy"] .kc-brand-product-card h3 { font-size: 14px; }
  body[data-kc-brand-key="lexy"] .kc-brand-product-card p { font-size: 11px; }
  .kc-brand-value-list, .kc-brand-rd-list { grid-template-columns: 1fr; }
  .kc-brand-feature-copy, .kc-brand-honors-copy { text-align: left; }
  .kc-brand-video-play { width: 58px; height: 58px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-brand-switcher-link { transition: none; }
}