* { box-sizing: border-box; }
:root { --media-bg: #f8f6f1; --media-card: #fffdf9; --media-ink: #2b2a27; --media-muted: #666a63; --media-jade: #2d8568; --media-line: rgba(43,42,39,.12); --media-cover: #e8ede6; }
html { min-height: 100%; background: var(--media-bg); }
.media-page { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--media-bg); color: var(--media-ink); font-family: var(--font-dm-sans),sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.media-header, .media-main, .media-footer { width: min(1180px,100%); margin-inline: auto; padding-inline: clamp(22px,4vw,44px); }
.media-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 26px; border-bottom: 1px solid var(--media-line); }
.media-logo { display: inline-flex; flex-shrink: 0; }
.media-logo img { display: block; object-fit: contain; width: 190px; height: auto; }
.media-logo img + img { display: none; }
.media-home { display: inline-flex; align-items: center; gap: 12px; padding: 12px 17px; border: 1px solid var(--media-line); border-radius: 999px; color: var(--media-jade); font-size: 13px; font-weight: 600; text-decoration: none; }
.media-home:hover { background: var(--media-cover); }
.media-main { flex: 1; padding-block: clamp(44px,7vw,84px) clamp(48px,7vw,88px); }
.media-heading { margin-bottom: clamp(28px,4vw,42px); }
.media-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 17px; color: var(--media-jade); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; }
.media-eyebrow span { width: 22px; height: 1px; background: currentColor; opacity: .6; }
.media-heading h1 { margin: 0; font: 400 clamp(38px,5.4vw,64px)/1.1 var(--font-cormorant),Georgia,serif; text-wrap: balance; }
.media-heading > p:last-child { margin: 18px 0 0; color: var(--media-muted); font-size: 17px; line-height: 1.65; }
.media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(20px,3vw,32px); }
.media-video { overflow: hidden; min-width: 0; border: 1px solid var(--media-line); border-radius: 22px; background: var(--media-card); box-shadow: 0 12px 32px rgba(43,42,39,.045); }
.media-video__frame { position: relative; aspect-ratio: 16/9; background: var(--media-cover); }
.media-video__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; overflow: hidden; color: var(--media-jade); background: linear-gradient(135deg,var(--media-cover),var(--media-bg)); text-decoration: none; }
.media-video__cover[hidden] { display: none; }
.media-video__number { position: absolute; top: 20px; left: 24px; font-size: 12px; font-weight: 600; letter-spacing: .1em; opacity: .8; }
.media-video__play { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--media-jade); color: var(--media-card); transition: transform .2s ease; }
.media-video__play svg { margin-left: -2px; }
.media-video__cover:hover .media-video__play { transform: scale(1.05); }
.media-video__watch { font-size: 14px; font-weight: 600; }
.media-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media-video__caption { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 22px 24px; }
.media-video__caption h2 { margin: 0; font-size: 16px; font-weight: 600; }
.media-video__caption a { color: var(--media-jade); font-size: 12px; line-height: 1.6; text-underline-offset: 4px; }
.media-privacy { margin: 22px 0 0; color: var(--media-muted); font-size: 12px; line-height: 1.7; }
.media-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; padding-block: 24px; border-top: 1px solid var(--media-line); color: var(--media-muted); font-size: 12px; line-height: 1.6; }
.media-footer nav { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.media-footer a, .media-footer button { color: inherit; text-decoration: none; }
.media-footer button { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.media-footer a:hover, .media-footer button:hover { text-decoration: underline; text-underline-offset: 4px; }
.media-skip { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 12px; background: var(--media-jade); color: var(--media-card); transform: translateY(-200%); }
.media-skip:focus { transform: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--media-jade); outline-offset: 4px; }
html[data-theme="dark"] { --media-bg: #181e21; --media-card: #222a2d; --media-ink: #f8f6f1; --media-muted: #c4cbc5; --media-jade: #83d0b2; --media-line: rgba(248,246,241,.14); --media-cover: #293a33; }
html[data-theme="dark"] .media-logo img { display: none; }
html[data-theme="dark"] .media-logo img + img { display: block; }
@media (max-width:680px) { .media-grid { grid-template-columns: minmax(0,1fr); } .media-header { padding-block: 22px; gap: 12px; } .media-logo img { width: 144px; } .media-home { padding: 10px 12px; gap: 6px; font-size: 12px; } .media-video__caption { padding: 18px 20px; } }
@media (max-width:359px) { .media-logo img { width: 120px; } .media-home { padding: 10px; font-size: 11px; } }
@media (prefers-reduced-motion:reduce) { .media-video__play { transition: none; } }