/* Brand accents share the existing controls, type scale and content edges. */
.site-header .brand img { width: 12rem; height: auto; }
.site-header__inner { grid-template-columns: 13rem minmax(0, 1fr) auto; }
.site-footer .footer-brand > img { width: 11rem; }
img.brand-seal { display: block; width: 5.5rem; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 50%; flex: none; }
.home-hero__scene-caption .brand-seal--hero { width: 4.5rem; transform: rotate(-12deg); box-shadow: 0 4px 20px #142e2733; }
.story-people > figure { position: relative; }
.story-people img.brand-seal--story { position: absolute; width: 6rem; right: 1rem; top: -1.5rem; transform: rotate(10deg); box-shadow: 0 5px 18px #142e2726; }
.discover-note img.brand-seal--editorial, .journey-banner img.brand-seal--editorial { width: 5rem; margin-bottom: 1.5rem; transform: rotate(-10deg); }
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer > img.brand-seal--footer { position: absolute; z-index: -1; width: 18rem; right: 3%; bottom: 0; opacity: .065; transform: rotate(15deg); pointer-events: none; }

/* Closely spaced slogans: paired bands converge gently, a single band slopes up. */
.brand-ribbon { --ribbon-bg: #dce8c2; --ribbon-ink: #214c3d; --ribbon-second-bg: #244c3f; --ribbon-second-ink: #f7f7ec; overflow: hidden; padding-block: clamp(2rem, 3vw, 3rem); position: relative; isolation: isolate; }
.brand-ribbon--forest { --ribbon-bg: #244c3f; --ribbon-ink: #f7f7ec; --ribbon-second-bg: #dce8c2; --ribbon-second-ink: #214c3d; }
.brand-ribbon--sand { --ribbon-bg: #ece1bc; }
.brand-ribbon__pair { display: grid; gap: calc(1.8vw + .25rem); width: calc(100% + 6rem); margin-inline: -3rem; }
.brand-ribbon__band { background: var(--ribbon-bg); color: var(--ribbon-ink); padding-block: .85rem; overflow: hidden; transform: rotate(1deg); }
.brand-ribbon__band--secondary { background: var(--ribbon-second-bg); color: var(--ribbon-second-ink); transform: rotate(-1deg); }
.brand-ribbon__band:only-child { transform: rotate(-1deg); }
.brand-ribbon__track { display: flex; width: max-content; animation: compass-ribbon 180s linear infinite; animation-play-state: paused; }
.brand-ribbon__band--secondary .brand-ribbon__track, .brand-ribbon--reverse .brand-ribbon__band--primary .brand-ribbon__track { animation-direction: reverse; }
.brand-ribbon--reverse .brand-ribbon__band--secondary .brand-ribbon__track { animation-direction: normal; }
.brand-ribbon__group { display: flex; align-items: center; gap: 1rem; padding-right: 1rem; flex: none; }
.brand-ribbon__group > span { font-size: var(--text-3xl); line-height: 1.2; font-weight: 500; letter-spacing: -.035em; white-space: nowrap; }
.brand-ribbon__group > img.brand-seal { width: 3rem; }
.brand-ribbon.is-in-view .brand-ribbon__track { animation-play-state: running; }
@keyframes compass-ribbon { to { transform: translateX(-50%); } }

/* A nature photograph and two real Compass moments, with clear shop links. */
.home-moments { background: #f2f1e9; }
.home-moments__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.home-moments__landscape { position: relative; grid-row: span 2; margin: 0; min-width: 0; isolation: isolate; }
.home-moments__landscape > picture { height: 100%; border-radius: var(--radius-image); }
.home-moments__landscape > picture img { height: 100%; min-height: 35rem; object-position: 44% center; }
.home-moments__landscape::after { content: ''; position: absolute; inset: 55% 0 0; z-index: 0; border-radius: 0 0 var(--radius-image) var(--radius-image); background: linear-gradient(transparent,#122c27b3); pointer-events: none; }
.home-moments__landscape figcaption { position: absolute; z-index: 1; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; color: #fff; font-size: var(--text-lg); font-weight: 600; }
.home-moments img.brand-seal--moment { position: absolute; width: 6rem; top: 1.25rem; right: 1.25rem; transform: rotate(12deg); }
.home-moments__dose { min-width: 0; display: flex; flex-direction: column; gap: .75rem; }
.home-moments__dose > picture { flex: 1; border-radius: var(--radius-image); min-height: 0; }
.home-moments__dose > picture img { height: 100%; aspect-ratio: 1.85; transition: transform .6s var(--ease); }
.home-moments__dose > span { padding-inline: .25rem; }
.home-moments__dose small { display: block; font-size: var(--text-xs); color: #516757; margin-bottom: .25rem; }
.home-moments__dose strong { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--text-sm); font-weight: 600; }

/* Four films share one player area; inactive players are never left running. */
.brand-films { background: #e9eddf; }
.brand-films .section-heading { margin-bottom: 1.5rem; }
.brand-films .section-heading h2 { margin: 0; }
.brand-films__layout { display: flex; flex-direction: column; gap: 1.5rem; }
.brand-films__stage { min-width: 0; width: 100%; }
.brand-film[hidden] { display: none; }
.brand-film__screen { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1c3a30; border-radius: var(--radius-image); overflow: hidden; }
.brand-film__cover, .brand-film__cover img, .brand-film__screen iframe { width: 100%; height: 100%; }
.brand-film__screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#10282018, transparent 40%, #10282018); pointer-events: none; }
.brand-film.is-playing .brand-film__screen::after, .brand-film.is-playing .brand-film__cover, .brand-film.is-playing .brand-film__play, .brand-film.is-playing .brand-film__platform { display: none; }
.brand-film__screen iframe { position: absolute; inset: 0; border: 0; }
.brand-film .brand-film__play { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; gap: .8rem; justify-content: center; align-items: center; background: transparent; color: #fff; border: 0; padding: 1rem; border-radius: var(--radius-image); }
.brand-film__play > span { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #fafbef; color: #214c3d; box-shadow: 0 5px 24px #0002; transition: transform .25s; }
.brand-film__play strong { font-size: var(--text-sm); padding: .35rem .75rem; border-radius: var(--radius-control); background: #173c31e6; }
.brand-film__platform { position: absolute; left: 1.25rem; top: 1.25rem; z-index: 1; color: #fff; background: #173c31d9; padding: .4rem .6rem; border-radius: var(--radius-control); font-size: var(--text-xs); letter-spacing: .12em; }
.brand-film__consent[hidden] { display: none; }
.brand-film.is-consenting .brand-film__screen { display: grid; place-items: center; aspect-ratio: auto; min-height: clamp(18rem, 38vw, 32rem); }
.brand-film.is-consenting .brand-film__cover { position: absolute; inset: 0; }
.brand-film.is-consenting .brand-film__screen::after { background: #173c31ed; }
.brand-film.is-consenting :is(.brand-film__play, .brand-film__platform) { display: none; }
.brand-film__consent { position: relative; z-index: 2; width: min(100%, 34rem); padding: clamp(1.25rem, 4vw, 2rem); color: #fff; }
.brand-film__consent h3 { color: #fff; font-size: var(--text-lg); margin: 0 0 .75rem; }
.brand-film__consent p { color: #fff; font-size: var(--text-sm); line-height: 1.6; margin: 0 0 1rem; }
.brand-film__consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.brand-film .brand-film__consent-actions button { min-height: 2.75rem; padding: .65rem .85rem; border: 1px solid #fafbef; border-radius: var(--radius-control); background: #fafbef; color: #173c31; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; }
.brand-film .brand-film__consent-actions [data-film-cancel] { background: transparent; color: #fff; border-color: #ffffff80; }
.brand-film__consent button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.brand-film__caption { display: flex; flex-direction: column; align-items: start; gap: 1rem; margin-top: 1.25rem; }
.brand-film__caption h3 { font-size: var(--text-lg); margin: 0 0 .5rem; }
.brand-film__caption p { font-size: var(--text-sm); max-width: 68ch; margin: 0; line-height: 1.6; }
.brand-film__caption .button { flex: none; font-size: var(--text-sm); }
.brand-film__links { display: grid; gap: .65rem; flex: none; justify-items: start; }
.brand-films__choices { display: flex; gap: .75rem; width: 100%; padding: .25rem; margin: -.25rem; overflow-x: auto; overscroll-behavior-inline: contain; }
.brand-films .brand-films__choice { --film-tab-bg: #d8eadd; --film-tab-ink: #21553e; display: inline-flex; flex: none; align-items: center; justify-content: center; padding: .65rem 1rem; min-height: 2.75rem; color: var(--film-tab-ink); background: var(--film-tab-bg); border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.brand-films__choice[data-film-choice="vegan"] { --film-tab-bg: #f7ddcc; --film-tab-ink: #743d28; }
.brand-films__choice[data-film-choice="wildberry"] { --film-tab-bg: #edd8e6; --film-tab-ink: #682c50; }
.brand-films__choice[data-film-choice="menthol"] { --film-tab-bg: #252b28; --film-tab-ink: #fff; }
.brand-films .brand-films__choice[aria-pressed="true"] { border-color: var(--film-tab-ink); box-shadow: inset 0 0 0 1px var(--film-tab-ink); }
.brand-films .brand-films__choice[data-film-choice="menthol"][aria-pressed="true"] { border-color: #252b28; box-shadow: inset 0 0 0 2px #f5f4e9, 0 0 0 1px #252b28; }
.brand-films .brand-films__choice:focus-visible { outline: 2px solid #214c3d; outline-offset: 2px; }
@media (hover: hover) {
  .home-moments__dose:hover picture img { transform: scale(1.04); }
  .brand-film__play:hover > span { transform: scale(1.08); }
}
@media (max-width: 1100px) {
  .site-header .brand img { width: 10.5rem; }
  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto auto; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .home-moments__landscape > picture img { min-height: 30rem; }
}
@media (max-width: 760px) {
  .site-header .brand img { width: 9.75rem; }
  .site-header__inner { min-height: 4.75rem; }
  .brand-ribbon { padding-block: 2rem; }
  .brand-ribbon__band { padding-block: .7rem; }
  .brand-ribbon__group { gap: .75rem; padding-right: .75rem; }
  .brand-ribbon__group > span { font-size: var(--text-2xl); }
  .brand-ribbon__group > img.brand-seal { width: 2.5rem; }
  .home-hero__scene-caption .brand-seal--hero { width: 3.75rem; }
  .home-moments__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; gap: 1.25rem 1rem; }
  .home-moments__landscape { grid-column: 1 / -1; grid-row: auto; }
  .home-moments__landscape > picture img { min-height: 0; aspect-ratio: 1.2; height: auto; }
  .home-moments__landscape figcaption { font-size: var(--text-base); left: 1rem; right: 1rem; bottom: 1rem; }
  .home-moments img.brand-seal--moment { width: 4.5rem; top: 1rem; right: 1rem; }
  .home-moments__dose > picture { flex: none; aspect-ratio: 1; }
  .home-moments__dose > picture img { aspect-ratio: 1; height: 100%; }
  .home-moments__dose strong { gap: .3rem; line-height: 1.4; }
  .story-people img.brand-seal--story { width: 4.5rem; top: -1rem; }
  .brand-films__layout { gap: 1rem; }
  .brand-films__choices { gap: .5rem; }
  .brand-films .brand-films__choice { padding: .5rem .6rem; }
  .brand-film__caption { gap: .75rem; margin-top: 1rem; }
  .brand-film__play > span { width: 3.25rem; height: 3.25rem; }
  .brand-film__platform { top: .75rem; left: .75rem; letter-spacing: .06em; font-size: var(--text-xs); }
  .brand-film .brand-film__play { gap: .5rem; }
  .brand-film__play strong { font-size: var(--text-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-ribbon__track { animation: none; width: 100%; }
  .brand-ribbon__group { min-width: 0; width: 100%; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; padding-inline: 4rem; }
  .brand-ribbon__group + .brand-ribbon__group { display: none; }
  .brand-ribbon__group > span:not(:first-child), .brand-ribbon__group > img.brand-seal:not(:nth-child(2)) { display: none; }
  .brand-ribbon__group > span { white-space: normal; text-align: center; font-size: var(--text-lg); }
  .home-moments__dose > picture img, .brand-film__play > span { transition: none; }
}