/* About, webcam and legal pages */
.story-page { padding: 70px 0 82px; }
.story-page__layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 76px; align-items: start; }
.story-page__content { max-width: 780px; color: var(--muted); font-size: 1rem; line-height: 1.8; }
.story-page__content h2 { margin: 44px 0 14px; color: var(--navy); font-family: var(--serif); font-size: 2.2rem; font-weight: 500; line-height: 1.08; }
.story-page__lead { margin: 0 0 34px; color: var(--ink); font-family: var(--serif); font-size: 1.55rem; line-height: 1.45; }
.story-page__values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 35px 0 46px; }
.story-page__values div { padding: 23px 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 7px 22px rgba(8,47,86,.05); }
.story-page__values span { color: var(--teal); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.story-page__values h3 { margin: 12px 0 8px; color: var(--navy); font-size: .94rem; }
.story-page__values p { margin: 0; font-size: .78rem; line-height: 1.55; }
.story-page__aside { position: sticky; top: 24px; }
.story-page__card { padding: 32px; border-radius: 18px; background: linear-gradient(145deg, #0b4773 0%, var(--navy) 48%, #075e68 100%); color: #fff; box-shadow: 0 16px 38px rgba(8,47,86,.18); }
.story-page__card h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 2rem; font-weight: 500; }
.story-page__card > p:not(.eyebrow) { color: #d5e2ea; }
.story-page__card .button { margin: 8px 0 28px; }
.story-page__card dl { margin: 0; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.18); }
.story-page__card dl div + div { margin-top: 16px; }
.story-page__card dt { color: #79d9dc; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.story-page__card dd { margin: 3px 0 0; color: #fff; font-size: .84rem; line-height: 1.5; }
.story-page__card dd a { color: #fff; }
.story-cta { padding: 48px 0; background: linear-gradient(120deg, #fbf6ee 0%, var(--sand) 48%, #e8f5f3 100%); }
.story-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.story-cta h2 { max-width: 730px; margin: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(2rem,4vw,3rem); font-weight: 500; line-height: 1.05; }

.webcam-page { padding: 68px 0 84px; }
.webcam-page__heading { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: end; margin-bottom: 28px; }
.webcam-page__heading h2 { margin: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(2rem,4vw,3.25rem); font-weight: 500; line-height: 1; }
.webcam-page__heading > p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.webcam-page__frame { position: relative; overflow: hidden; aspect-ratio: 16/9; border: 10px solid #fff; border-radius: 19px; background: linear-gradient(145deg, #061f38, #07505f); box-shadow: 0 22px 55px rgba(8,47,86,.2); }
.webcam-page__frame iframe { width: 100%; height: 100%; border: 0; }
.webcam-page__live { position: absolute; z-index: 2; top: 18px; left: 18px; display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; background: rgba(8,47,86,.83); color: #fff; font-size: .7rem; font-weight: 800; pointer-events: none; }
.webcam-page__live i { width: 8px; height: 8px; border-radius: 50%; background: #ef534f; box-shadow: 0 0 0 4px rgba(239,83,79,.2); }
.webcam-page__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.webcam-page__notes div { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.webcam-page__notes h3 { margin: 0 0 8px; color: var(--navy); font-family: var(--serif); font-size: 1.45rem; font-weight: 500; }
.webcam-page__notes p { margin: 0; color: var(--muted); line-height: 1.6; }
.webcam-page__notes a { display: inline-block; margin-top: 13px; color: var(--teal); font-weight: 800; }

.legal-hero { padding: 72px 0 68px; background: radial-gradient(circle at 78% 20%, rgba(24,151,157,.3), transparent 34%), linear-gradient(120deg, #041f39 0%, var(--navy) 54%, #075b68 100%); color: #fff; }
.legal-hero h1 { margin: 0 0 13px; font-family: var(--serif); font-size: clamp(2.8rem,6vw,4.7rem); font-weight: 500; line-height: 1; }
.legal-hero > .container > p:not(.eyebrow) { max-width: 650px; margin: 0 0 20px; color: #d4e3ec; font-size: 1.05rem; }
.legal-hero span { color: #79d9dc; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.legal-page { padding: 64px 0 90px; }
.legal-page__layout { display: grid; grid-template-columns: 230px minmax(0,760px); justify-content: center; gap: 70px; align-items: start; }
.legal-page__nav { position: sticky; top: 24px; display: flex; flex-direction: column; padding: 21px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.legal-page__nav strong { margin-bottom: 10px; color: var(--navy); }
.legal-page__nav a { padding: 8px 0; border-top: 1px solid #edf1f2; color: var(--muted); font-size: .78rem; }
.legal-page__nav a:hover { color: var(--teal); }
.legal-page__content { color: var(--muted); font-size: .94rem; line-height: 1.75; }
.legal-page__lead { margin: 0 0 36px; color: var(--ink); font-family: var(--serif); font-size: 1.42rem; line-height: 1.48; }
.legal-page__content section { padding-top: 22px; scroll-margin-top: 25px; }
.legal-page__content section + section { margin-top: 22px; border-top: 1px solid var(--line); }
.legal-page__content h2 { margin: 0 0 18px; color: var(--navy); font-family: var(--serif); font-size: 2rem; font-weight: 500; line-height: 1.12; }
.legal-page__content section h2:not(:first-child) { margin-top: 34px; }
.legal-page__content h3 { margin: 25px 0 7px; color: var(--ink); font-size: 1rem; }
.legal-page__content ul,.legal-page__content ol { padding-left: 22px; }
.legal-page__content li + li { margin-top: 8px; }
.legal-contact { display: grid; grid-template-columns: 1.4fr .8fr 1.2fr; gap: 15px; }
.legal-contact p { margin: 0; padding: 18px; border-radius: 11px; background: linear-gradient(145deg, #f5fcfc, var(--aqua)); font-size: .8rem; }
.legal-page__help { margin-top: 40px; padding: 28px; border-radius: 15px; background: linear-gradient(125deg, #fbf6ee 0%, var(--sand) 55%, #e8f5f3 100%); }
.legal-page__help h2 { margin-bottom: 7px; }
.legal-page__help p { margin: 0 0 18px; }

@media (max-width: 900px) {
  .story-page__layout { grid-template-columns: 1fr; gap: 40px; }
  .story-page__aside { position: static; }
  .legal-page__layout { grid-template-columns: 1fr; gap: 30px; }
  .legal-page__nav { position: static; display: grid; grid-template-columns: repeat(2,1fr); }
  .legal-page__nav strong { grid-column: 1/-1; }
}
@media (max-width: 650px) {
  .story-page { padding: 45px 0 60px; }
  .story-page__values,.webcam-page__heading,.webcam-page__notes,.legal-contact { grid-template-columns: 1fr; }
  .webcam-page__heading { gap: 18px; }
  .webcam-page__frame { aspect-ratio: 4/3; border-width: 5px; }
  .story-cta .container { align-items: flex-start; flex-direction: column; }
  .legal-page__nav { grid-template-columns: 1fr; }
}