/* =============================================================================
   CMS content pages — About Us, Contact Us, the two legal documents, the blog.

   One stylesheet for all five: they share a hero, a prose container and a CTA.
   Splitting them per page would mean maintaining the same rules five times —
   the mistake the per-module detail sheets already made.

   cp- prefix = content page.
   ============================================================================= */
.cp-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- Hero ---------- */
.cp-hero {
    position: relative; left: 50%; right: 50%; width: 100vw;
    margin-left: -50vw; margin-right: -50vw;
    overflow: hidden; color: #fff;
    background: linear-gradient(150deg, #0b1f3a 0%, #163a68 55%, #0a1a30 100%);
}
.cp-hero--compact { padding: 3.5rem 0 3rem; }
.cp-hero--plain { padding: 3.5rem 0 3rem; }
.cp-hero--article { min-height: 380px; display: flex; align-items: flex-end; padding-bottom: 2.5rem; }

.cp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cp-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4,12,26,.45) 0%, rgba(4,12,26,.68) 55%, rgba(4,12,26,.92) 100%);
}
.cp-hero-inner { position: relative; z-index: 1; padding: 3.5rem 20px 0; }
.cp-hero--article .cp-hero-inner { padding-top: 0; }

.cp-eyebrow {
    display: inline-block; font-size: .74rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-gold-bright, #e0b955); margin-bottom: .6rem;
}
.cp-hero-title {
    font-family: var(--pt-font-display); font-weight: 600;
    font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.15; margin-bottom: .55rem;
    text-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.cp-hero-sub { font-size: 1rem; color: rgba(255,255,255,.82); max-width: 640px; margin: 0; }
.cp-hero-meta { font-size: .85rem; color: rgba(255,255,255,.7); margin: .7rem 0 0; }

.cp-back {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85);
    text-decoration: none; margin-bottom: .9rem;
}
.cp-back:hover { color: #fff; }
.cp-back .icon { width: 14px; height: 14px; }

/* ---------- Page body ---------- */
.cp-page-bg {
    position: relative; left: 50%; right: 50%; width: 100vw;
    margin-left: -50vw; margin-right: -50vw;
    background: #f6f8fb; padding: 2.5rem 0 4rem;
}

.cp-doc {
    background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem;
    padding: 2rem 2.25rem; box-shadow: 0 10px 24px rgba(11,31,58,.06);
    max-width: 860px;
}
.cp-doc--wide { max-width: none; }

/* ---------- Prose ----------
   Admin-authored HTML, so typography is applied by tag rather than by class —
   the editor knows nothing about our stylesheet. */
.cp-prose { font-size: 1rem; line-height: 1.75; color: #4b5565; }
.cp-prose > *:first-child { margin-top: 0; }
.cp-prose > *:last-child { margin-bottom: 0; }
.cp-prose p { margin: 0 0 1rem; }
.cp-prose h1, .cp-prose h2, .cp-prose h3,
.cp-prose h4, .cp-prose h5, .cp-prose h6 {
    font-family: var(--pt-font-display); color: var(--brand-navy, #0b1f3a);
    font-weight: 600; line-height: 1.3; margin: 1.9rem 0 .7rem;
    /* Clears the sticky header when jumped to from the contents nav. */
    scroll-margin-top: 90px;
}
.cp-prose h1 { font-size: 1.5rem; }
.cp-prose h2 { font-size: 1.25rem; }
.cp-prose h3 { font-size: 1.08rem; }
.cp-prose h4, .cp-prose h5, .cp-prose h6 { font-size: 1rem; }
.cp-prose ul, .cp-prose ol { margin: 0 0 1.1rem; padding-left: 1.35rem; }
.cp-prose li { margin-bottom: .45rem; }
.cp-prose li::marker { color: var(--brand-gold, #c8a24a); }
.cp-prose strong, .cp-prose b { color: var(--brand-navy, #0b1f3a); font-weight: 600; }
.cp-prose a { color: #17457f; text-decoration: underline; }
.cp-prose hr { border: 0; border-top: 1px solid #eef1f6; margin: 1.75rem 0; }
.cp-prose img { max-width: 100%; height: auto; border-radius: .6rem; }
.cp-prose blockquote {
    margin: 0 0 1.1rem; padding: .3rem 0 .3rem 1.1rem;
    border-left: 3px solid var(--brand-gold, #c8a24a); color: #5b6478; font-style: italic;
}
/* CMS tables carry no widths and would push the column wider than the layout. */
.cp-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; font-size: .9rem; }
.cp-prose th, .cp-prose td { border: 1px solid #eef1f6; padding: .55rem .7rem; text-align: left; }
.cp-prose th { background: #f6f8fb; color: var(--brand-navy, #0b1f3a); font-weight: 600; }
/* The editor pastes font-family and absolute sizes onto elements. Inline styles
   beat any normal rule, so these must be !important; scoped to [style] so only
   elements it actually touched are reset. */
.cp-prose [style] { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; }
.cp-prose h1[style], .cp-prose h2[style], .cp-prose h3[style],
.cp-prose h4[style], .cp-prose h5[style], .cp-prose h6[style] {
    font-family: var(--pt-font-display) !important;
}

/* Paragraphs the script identified as section titles — the CMS editor writes
   these as fully-bold paragraphs rather than heading tags, so without this they
   would read as body copy in a document that is otherwise a wall of prose. */
.cp-prose .cp-pseudo-heading {
    font-family: var(--pt-font-display);
    font-size: 1.18rem; font-weight: 600; line-height: 1.3;
    color: var(--brand-navy, #0b1f3a);
    margin: 1.9rem 0 .7rem;
    scroll-margin-top: 90px;
}
/* The inner <strong> would otherwise double up the weight. */
.cp-prose .cp-pseudo-heading strong,
.cp-prose .cp-pseudo-heading b { font-weight: inherit; color: inherit; }

.cp-doc-foot {
    margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #eef1f6;
    font-size: .88rem; color: #6b7385;
}
.cp-doc-foot p { margin: 0; }
.cp-doc-foot a { color: #17457f; }

/* ---------- Legal contents nav ---------- */
.cp-legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; }
.cp-toc {
    position: sticky; top: 88px;
    background: #fff; border: 1px solid #eef1f6; border-radius: 1rem;
    padding: 1.1rem 1.15rem; box-shadow: 0 8px 20px rgba(11,31,58,.05);
    max-height: calc(100vh - 120px); overflow-y: auto;
}
.cp-toc-title {
    display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: #8b95a5; margin-bottom: .7rem;
}
.cp-toc-links { display: flex; flex-direction: column; gap: .1rem; }
.cp-toc-link {
    font-size: .82rem; line-height: 1.4; color: #5b6478;
    text-decoration: none; padding: .3rem .5rem; border-radius: .4rem;
    border-left: 2px solid transparent;
}
.cp-toc-link:hover { background: #f6f8fb; color: var(--brand-navy, #0b1f3a); }
.cp-toc-link.is-active {
    color: var(--brand-navy, #0b1f3a); font-weight: 600;
    border-left-color: var(--brand-gold, #c8a24a); background: #f6f8fb;
}
.cp-toc-link--h3 { padding-left: 1.1rem; font-size: .78rem; }

/* ---------- Sections, gallery, CTA ---------- */
.cp-section { margin-top: 2.5rem; }
.cp-section-title {
    font-family: var(--pt-font-display); font-size: 1.5rem;
    color: var(--brand-navy, #0b1f3a); margin-bottom: .4rem;
}
.cp-section-sub { color: #6b7385; font-size: .9rem; margin-bottom: 1.4rem; }

.cp-gallery {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
}
.cp-gallery-img {
    aspect-ratio: 4 / 3; border-radius: 1rem;
    background-size: cover; background-position: center; background-color: #e6ebf3;
    box-shadow: 0 12px 26px rgba(11,31,58,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.cp-gallery-img:hover { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(11,31,58,.18); }
.cp-gallery--article { margin-top: 2rem; }

.cp-cta {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem;
    background: linear-gradient(140deg, #0b1f3a, #17457f);
    border-radius: 1.25rem; padding: 1.75rem 2rem; color: #fff;
}
.cp-cta h2 { font-family: var(--pt-font-display); font-size: 1.4rem; margin: 0 0 .25rem; }
.cp-cta p { margin: 0; color: rgba(255,255,255,.78); font-size: .92rem; }
.cp-cta-actions { display: flex; flex-wrap: wrap; gap: .65rem; }

.cp-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--brand-gold, #c8a24a); color: #16233c;
    font-weight: 700; font-size: .88rem; text-decoration: none;
    padding: .7rem 1.35rem; border-radius: .7rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.cp-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.22); color: #16233c; }
.cp-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.28); }
.cp-btn--ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---------- Contact ---------- */
.cp-quick {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}
.cp-quick-card {
    display: flex; align-items: center; gap: .85rem;
    background: #fff; border: 1px solid #eef1f6; border-radius: 1rem;
    padding: 1.1rem 1.25rem; text-decoration: none; color: inherit;
    box-shadow: 0 8px 20px rgba(11,31,58,.05);
    transition: transform .15s ease, box-shadow .15s ease;
}
a.cp-quick-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(11,31,58,.12); color: inherit; }
.cp-quick-card--static { cursor: default; }
.cp-quick-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(155deg, var(--brand-navy, #0b1f3a), #1c4272);
    color: var(--brand-gold-bright, #e0b955);
}
.cp-quick-icon .icon { width: 18px; height: 18px; }
.cp-quick-text { display: flex; flex-direction: column; min-width: 0; }
.cp-quick-label { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8b95a5; }
.cp-quick-value { font-size: .96rem; font-weight: 600; color: var(--brand-navy, #0b1f3a); word-break: break-word; }

.cp-branch-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.25rem;
}
.cp-branch {
    background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem;
    padding: 1.4rem 1.5rem; box-shadow: 0 10px 24px rgba(11,31,58,.06);
}
.cp-branch-name {
    font-family: var(--pt-font-display); font-size: 1.15rem;
    color: var(--brand-navy, #0b1f3a); margin: 0 0 .9rem;
}
.cp-branch-row { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .85rem; }
.cp-branch-row:last-child { margin-bottom: 0; }
.cp-branch-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: .55rem;
    background: var(--brand-navy-soft, #eef1f6); color: var(--brand-navy, #0b1f3a);
}
.cp-branch-icon .icon { width: 14px; height: 14px; }
.cp-branch-line { margin: 0 0 .25rem; font-size: .88rem; line-height: 1.55; color: #4b5565; }
.cp-branch-line:last-child { margin-bottom: 0; }
.cp-branch-line a { color: #17457f; text-decoration: none; }
.cp-branch-line a:hover { text-decoration: underline; }

/* ---------- Blog ---------- */
.cp-lead {
    display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
    background: #fff; border: 1px solid #eef1f6; border-radius: 1.25rem;
    overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 14px 32px rgba(11,31,58,.09); margin-bottom: 1.75rem;
    transition: transform .18s ease, box-shadow .18s ease;
}
.cp-lead:hover { transform: translateY(-4px); box-shadow: 0 24px 46px rgba(11,31,58,.16); color: inherit; }
.cp-lead-image { min-height: 300px; background-size: cover; background-position: center; background-color: #e6ebf3; }
.cp-lead-body { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: 2rem 2.25rem; }
.cp-lead-title { font-family: var(--pt-font-display); font-size: 1.7rem; line-height: 1.25; color: var(--brand-navy, #0b1f3a); }
.cp-lead-sub { font-size: .95rem; line-height: 1.6; color: #6b7385; }
.cp-lead-meta { font-size: .78rem; color: #8b95a5; }

.cp-tag {
    display: inline-block; align-self: flex-start;
    background: var(--brand-gold, #c8a24a); color: #16233c;
    font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    padding: .22rem .6rem; border-radius: 2rem;
}
.cp-tag--float { position: absolute; top: .8rem; left: .8rem; }

.cp-blog-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
}
.cp-blog-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #eef1f6; border-radius: 1.1rem;
    text-decoration: none; color: inherit;
    box-shadow: 0 10px 24px rgba(11,31,58,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}
.cp-blog-card:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(11,31,58,.14); color: inherit; }
.cp-blog-image { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: #e6ebf3; }
.cp-blog-body { display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.25rem 1.3rem; flex: 1; }
.cp-blog-title { font-family: var(--pt-font-display); font-size: 1.08rem; line-height: 1.35; color: var(--brand-navy, #0b1f3a); }
.cp-blog-sub { font-size: .85rem; line-height: 1.55; color: #6b7385; }
.cp-blog-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: .8rem; border-top: 1px solid #f1f4f9;
}
.cp-blog-date { font-size: .76rem; color: #8b95a5; }
.cp-blog-more { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 700; color: #17457f; }
.cp-blog-more .icon { width: 13px; height: 13px; transition: transform .15s ease; }
.cp-blog-card:hover .cp-blog-more .icon { transform: translateX(3px); }

.cp-block { margin-bottom: 2rem; }
.cp-block:last-child { margin-bottom: 0; }
.cp-block-figure { margin: 0 0 1.1rem; }
.cp-block-figure img { width: 100%; height: auto; border-radius: .85rem; display: block; }
.cp-block-figure figcaption { margin-top: .5rem; font-size: .8rem; color: #8b95a5; text-align: center; }
.cp-article-h2 { font-family: var(--pt-font-display); font-size: 1.35rem; color: var(--brand-navy, #0b1f3a); margin: 0 0 1.2rem; }
.cp-article-h3 { font-family: var(--pt-font-display); font-size: 1.15rem; color: var(--brand-navy, #0b1f3a); margin: 2rem 0 .8rem; }

/* ---------- Empty state ---------- */
.cp-empty { text-align: center; padding: 3rem 1rem; }
.cp-empty-text { font-size: 1rem; color: #6b7385; margin-bottom: 1.5rem; }
.cp-empty-actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.cp-empty .cp-btn--ghost { background: #fff; color: var(--brand-navy, #0b1f3a); border-color: #dde3ec; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    /* The contents nav goes first: it needs a column of its own to be useful,
       and stacked above the document it just delays the content. */
    .cp-legal-layout { grid-template-columns: 1fr; }
    .cp-toc { display: none; }
    .cp-lead { grid-template-columns: 1fr; }
    .cp-lead-image { min-height: 220px; }
}

@media (max-width: 575.98px) {
    .cp-doc { padding: 1.35rem 1.25rem; }
    .cp-lead-body { padding: 1.35rem 1.25rem; }
    .cp-lead-title { font-size: 1.35rem; }
    .cp-cta { padding: 1.35rem 1.25rem; }
    .cp-cta-actions { width: 100%; }
    .cp-btn { flex: 1; justify-content: center; }
}