/* lululemon: redesigned hero */
.llh { position: relative; isolation: isolate; overflow: hidden; padding: clamp(48px, 7vw, 104px) clamp(24px, 4vw, 72px) clamp(56px, 8vw, 112px); color: #fff; font-family: "Montserrat", sans-serif; background: linear-gradient(135deg, #a3102a 0%, #c8102e 42%, #7e0d20 100%); }
.llh::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(90% 90% at 15% 10%, #000, transparent 75%); -webkit-mask-image: radial-gradient(90% 90% at 15% 10%, #000, transparent 75%); }
.llh__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(50px); pointer-events: none; }
.llh__orb--a { width: 44vw; max-width: 620px; aspect-ratio: 1; right: 6%; top: -26%; background: radial-gradient(circle, rgba(255,160,150,.55), transparent 68%); }
.llh__orb--b { width: 36vw; max-width: 520px; aspect-ratio: 1; left: -10%; bottom: -30%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 68%); }
.llh__rail { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.llh__pill { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 16px; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); }
.llh__pill span { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.llh h1 { margin: 0 0 20px; font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; color: #fff; }
.llh h1 em { display: block; font-style: normal; color: #ffd9d4; }
.llh__lede { margin: 0 0 28px; max-width: 56ch; font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.7; color: rgba(255,255,255,.9); }
.llh__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 clamp(28px, 4vw, 44px); }
html body .llh .btn.llh__btn.btn--primary { background: #fff !important; color: #a3102a !important; border-color: #fff !important; box-shadow: 0 12px 28px rgba(60,0,10,.28) !important; }
html .llh .btn.llh__btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); box-shadow: none; }
@media (hover: hover) {
  html body .llh .btn.llh__btn.btn--primary:hover { background: #fff1ef !important; color: #7e0d20 !important; border-color: #fff1ef !important; }
  html .llh .btn.llh__btn--ghost:hover { background: rgba(255,255,255,.16); color: #fff; border-color: #fff; }
}
.llh__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0; padding: 0; max-width: 780px; border-top: 1px solid rgba(255,255,255,.28); }
.llh__facts > div { padding: 16px 16px 0 0; margin-right: 16px; border-right: 1px solid rgba(255,255,255,.2); }
.llh__facts > div:last-child { border-right: 0; margin-right: 0; }
.llh__facts dt { margin: 0 0 4px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffd9d4; }
.llh__facts dd { margin: 0; font-size: .92rem; line-height: 1.4; font-weight: 600; color: #fff; }
.llh__visual { position: relative; display: grid; place-items: center; padding: 8px 0 24px; }
.llh__art { margin: 0; width: min(100%, 360px); transform: rotate(4deg); filter: drop-shadow(0 40px 60px rgba(40,0,10,.5)); }
.llh__art img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; }
.llh__chip { position: absolute; padding: 10px 16px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: #fff; color: #7e0d20; box-shadow: 0 14px 30px rgba(40,0,10,.3); white-space: nowrap; }
.llh__chip--a { left: 2%; top: 14%; } .llh__chip--b { right: 0; top: 46%; } .llh__chip--c { left: 6%; bottom: 4%; }
@media (prefers-reduced-motion: no-preference) {
  .llh__chip { animation: llhBob 6s ease-in-out infinite alternate; } .llh__chip--b { animation-delay: -2s; } .llh__chip--c { animation-delay: -4s; }
  .llh__art { transition: transform .6s cubic-bezier(.2,.7,.2,1); } .llh__visual:hover .llh__art { transform: rotate(1deg) scale(1.02); }
  @keyframes llhBob { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
}
@media (max-width: 960px) { .llh__rail { grid-template-columns: minmax(0, 1fr); } .llh__art { width: min(100%, 300px); } }
@media (max-width: 560px) { .llh__chip { font-size: .72rem; padding: 8px 12px; } .llh__facts > div { border-right: 0; margin-right: 0; } }

/* lululemon: team section */
.crew { padding: clamp(56px, 8vw, 104px) clamp(24px, 4vw, 72px); font-family: "Montserrat", sans-serif; }
.crew__rail { width: 100%; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.crew__eyebrow { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #c8102e; }
.crew__title { margin: 0 0 16px; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 800; color: var(--ink-900, #141313); text-align: left; }
.crew__sub { margin: 0 0 22px; max-width: 48ch; font-size: 1.04rem; line-height: 1.7; color: var(--ink-600, #4a4949); text-align: left; }
.crew__legend { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; font-size: .85rem; font-weight: 600; color: var(--ink-700, #3a3939); }
.crew__legend li { display: inline-flex; align-items: center; gap: 8px; }
.crew__swatch { width: 12px; height: 12px; border-radius: 50%; }
.crew__swatch--ds { background: #1f6a8f; } .crew__swatch--ux { background: #c8102e; }
.crew__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin: 0; padding: 0; list-style: none; }
.crew__card { display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: 24px; background: var(--surface, #fff); border: 1px solid var(--line-soft, rgba(20,19,19,.08)); box-shadow: 0 12px 28px rgba(15,23,32,.07); }
.crew__card--me { border-color: rgba(200,16,46,.45); box-shadow: 0 0 0 1px rgba(200,16,46,.35), 0 16px 34px rgba(200,16,46,.14); }
.crew__avatar { flex: 0 0 auto; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; color: #fff; }
.crew__card--ds .crew__avatar { background: linear-gradient(135deg, #2a82ae, #14384f); }
.crew__card--ux .crew__avatar { background: linear-gradient(135deg, #e0354f, #8e0f24); }
.crew__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; color: var(--ink-900, #141313); text-transform: none; letter-spacing: 0; }
.crew__me { padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #c8102e; color: #fff; }
.crew__role { display: inline-block; margin: 0; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.crew__role--ds { background: rgba(31,106,143,.12); color: #1f6a8f; } .crew__role--ux { background: rgba(200,16,46,.1); color: #a3102a; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .crew__card { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; } .crew__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(15,23,32,.14); } }
@media (max-width: 900px) { .crew__rail { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .crew__grid { grid-template-columns: minmax(0, 1fr); } }

/* Dark mode: hero button stays readable on the red hero; team section colours */
html body .llh .btn.llh__btn span { color: inherit !important; }
html[data-theme="dark"] .crew__eyebrow { color: #ff9aa8; }
html[data-theme="dark"] .crew__legend { color: #d6dde3; }
html[data-theme="dark"] .crew__role--ds { background: rgba(143,205,238,.16); color: #a9dcf4; }
html[data-theme="dark"] .crew__role--ux { background: rgba(255,120,138,.18); color: #ffc0c8; }
html[data-theme="dark"] .crew__me { background: #e0354f; }