/* Scoped About spacing and typography in Harbor's charcoal and cyan palette. */
.harbor-about-page { min-height:65vh; padding-block:42px 58px; }
.harbor-about-card { max-width:1060px; margin-inline:auto; padding:clamp(25px,4vw,48px); color:#c4cccc; background:#252929; border:1px solid #363e3e; border-radius:14px; box-shadow:0 12px 32px #00000014; }
.harbor-about-heading { position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:30px; padding-bottom:26px; border-bottom:1px solid #394444; }
.harbor-about-heading::after { position:absolute; bottom:-1px; inset-inline-start:0; width:64px; height:3px; background:#2799ca; content:""; }
.harbor-about-heading > div { min-width:0; }
.harbor-about-site-name { margin:0 0 10px; color:#6fc7ed; font-size:12px; font-weight:700; letter-spacing:.08em; overflow-wrap:anywhere; }
.harbor-about-heading h1 { margin:0; color:#f2f6f6; font-size:clamp(30px,3vw,40px); font-weight:800; letter-spacing:-.03em; line-height:1.2; overflow-wrap:anywhere; }
.harbor-about-mark { position:relative; width:88px; height:88px; flex:0 0 88px; display:grid; place-items:center; overflow:hidden; color:#65c8f0; background:linear-gradient(135deg,#263f49,#253237); border:1px solid #375662; border-radius:22px; transform:rotate(5deg); }
.harbor-about-mark::before { position:absolute; width:100px; height:100px; top:31px; left:30px; border:1px solid #3a6170; border-radius:50%; content:""; }
.harbor-about-mark .harbor-icon { position:relative; width:39px; height:39px; flex-basis:39px; stroke-width:1.6; transform:rotate(-5deg); }
.harbor-about-content { max-width:76ch; margin-inline:auto; color:#c4cccc; font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.harbor-about-content p { margin:0 0 1.3em; }
.harbor-about-content > :last-child { margin-bottom:0; }
.harbor-about-content :is(h2,h3,h4,h5,h6) { margin:1.6em 0 .65em; color:#eef6f8; font-weight:750; line-height:1.4; }
.harbor-about-content h2 { font-size:24px; }
.harbor-about-content h3 { font-size:20px; }
.harbor-about-content :is(ul,ol) { margin:0 0 1.3em; padding-inline-start:1.5em; }
.harbor-about-content li + li { margin-top:.35em; }
.harbor-about-content a { color:#65c8f0; text-decoration:underline; text-underline-offset:3px; }
.harbor-about-content a:hover { color:#a7e5ff; }
.harbor-about-content :is(img,video,iframe) { max-width:100%; }
.harbor-about-content img { height:auto; border-radius:8px; }
.harbor-about-content figure { max-width:100%; margin-inline:0; }
.harbor-about-content blockquote { margin:1.5em 0; padding:16px 22px; background:#223238; border-inline-start:3px solid #2799ca; border-radius:0 8px 8px 0; }
.harbor-about-content blockquote p:last-child { margin-bottom:0; }
.harbor-about-content pre { max-width:100%; overflow:auto; padding:16px; background:#1b2326; border-radius:8px; }
.harbor-about-content table { display:block; max-width:100%; overflow-x:auto; }
@media(max-width:600px) {
 .harbor-about-page { padding-block:25px 34px; }
 .harbor-about-card { padding:24px 21px 28px; border-radius:11px; }
 .harbor-about-heading { gap:18px; margin-bottom:24px; padding-bottom:22px; }
 .harbor-about-mark { width:64px; height:64px; flex-basis:64px; border-radius:18px; }
 .harbor-about-mark .harbor-icon { width:30px; height:30px; flex-basis:30px; }
 .harbor-about-content { font-size:15px; line-height:1.85; }
 .harbor-about-content h2 { font-size:22px; }
 .harbor-about-content h3 { font-size:19px; }
}