.conversation-hub { --hub-accent: #d86f32; background: #f7f3ec; color: #172331; }
.conversation-hub__hero { position: relative; min-height: clamp(34rem, 70vh, 48rem); display: grid; align-items: end; overflow: hidden; background: linear-gradient(135deg, #132536, #27445a); color: #fff; }
.conversation-hub__hero-media, .conversation-hub__hero-media img, .conversation-hub__hero-placeholder, .conversation-hub__hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.conversation-hub__hero-media img { object-fit: cover; }
.conversation-hub__hero-placeholder { display: grid; place-items: center; background: radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--hub-accent) 70%, transparent), transparent 32%), linear-gradient(135deg, #10202e, #29475b); }
.conversation-hub__hero-placeholder span { font-size: clamp(8rem, 24vw, 20rem); font-weight: 800; opacity: .08; letter-spacing: -.08em; }
.conversation-hub__hero-overlay { background: linear-gradient(90deg, rgba(8,19,29,.92) 0%, rgba(8,19,29,.62) 55%, rgba(8,19,29,.2) 100%), linear-gradient(0deg, rgba(8,19,29,.75), transparent 55%); }
.conversation-hub__hero-content { position: relative; z-index: 1; padding-block: clamp(5rem, 11vw, 9rem) clamp(3rem, 7vw, 6rem); }
.conversation-hub__eyebrow, .hub-section-kicker { margin: 0 0 .65rem; color: var(--hub-accent); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.conversation-hub__hero h1 { max-width: 12ch; margin: 0; color: #fff; font-size: clamp(3.4rem, 9vw, 7.8rem); line-height: .9; letter-spacing: -.055em; }
.conversation-hub__tagline { max-width: 32rem; margin: 1.35rem 0 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 700; line-height: 1.3; }
.conversation-hub__intro { max-width: 42rem; margin-top: 1rem; color: rgba(255,255,255,.84); font-size: 1.05rem; }
.conversation-hub__intro p { margin: 0; }
.conversation-hub__facts { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; color: rgba(255,255,255,.76); font-size: .9rem; }
.conversation-hub__facts li + li::before { content: '•'; margin-right: 1.5rem; color: var(--hub-accent); }
.conversation-hub__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: clamp(2.5rem, 6vw, 5.5rem); padding-block: clamp(4rem, 8vw, 7rem); align-items: start; }
.hub-feature, .hub-library { margin-bottom: clamp(4rem, 8vw, 7rem); }
.hub-feature h2, .hub-library h2, .hub-companion > h2 { margin: 0 0 1.6rem; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1; letter-spacing: -.035em; }
.hub-feature__card { display: grid; grid-template-columns: 1.08fr 1fr; overflow: hidden; border-radius: 1.25rem; background: #fff; box-shadow: 0 1.2rem 3rem rgba(24,34,44,.1); }
.hub-feature__media { min-height: 24rem; background: #d9ddd9; }
.hub-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.hub-feature__body { align-self: center; padding: clamp(2rem, 5vw, 3.75rem); }
.hub-feature__badge { color: var(--hub-accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hub-feature__body h3 { margin: .75rem 0; font-size: clamp(1.75rem, 3vw, 2.7rem); line-height: 1.05; }
.hub-feature__body h3 a { color: inherit; text-decoration: none; }
.hub-feature__meta { display: flex; gap: 1.4rem; margin: 0 0 1rem; padding: 0; list-style: none; color: #68727a; font-size: .86rem; }
.hub-feature__cta, .hub-companion__module a { color: var(--hub-accent); font-weight: 800; text-decoration-thickness: .12em; text-underline-offset: .22em; }
.hub-library__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2rem; }
.hub-library .content-card { height: 100%; background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 .6rem 2rem rgba(24,34,44,.07); }
.hub-companion { position: sticky; top: 7rem; padding-left: clamp(1.25rem, 3vw, 2.4rem); border-left: 1px solid color-mix(in srgb, var(--hub-accent) 35%, #d8d3cb); }
.hub-companion > h2 { font-size: 1.8rem; }
.hub-companion .content-card { margin-bottom: 1.5rem; background: #fff; border-radius: .9rem; overflow: hidden; }
.hub-companion .content-card__description { display: none; }
.hub-companion__module { margin-top: 1.5rem; padding: 1.5rem; border-radius: .9rem; background: #fff; }
.hub-companion__module h3 { margin-top: 0; font-size: 1.2rem; }
.hub-companion__thought { color: #fff; background: #172b3b; border-top: .3rem solid var(--hub-accent); }
.hub-companion__thought blockquote { margin: 0; font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.55; }
.hub-companion__thought p { margin-bottom: 0; }
@media (max-width: 64rem) { .conversation-hub__layout { grid-template-columns: 1fr; } .hub-companion { position: static; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; padding-left: 0; border-left: 0; border-top: 1px solid #d8d3cb; padding-top: 2.5rem; } .hub-companion > .hub-section-kicker, .hub-companion > h2 { grid-column: 1/-1; } .hub-companion .content-card, .hub-companion__module { margin: 0; } }
@media (max-width: 47.99rem) { .conversation-hub__hero { min-height: 38rem; } .conversation-hub__hero-overlay { background: linear-gradient(0deg, rgba(8,19,29,.94), rgba(8,19,29,.24) 85%); } .conversation-hub__facts { display: block; } .conversation-hub__facts li + li { margin-top: .35rem; } .conversation-hub__facts li + li::before { display: none; } .hub-feature__card, .hub-library__grid, .hub-companion { grid-template-columns: 1fr; } .hub-feature__media { min-height: 15rem; } }
@media (prefers-reduced-motion: reduce) { .conversation-hub *, .conversation-hub *::before, .conversation-hub *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }