/* ============================================================
   Freimann & Co - Shared page components

   Palette and metrics measured off the rendered freimannco.com, not
   guessed: every value here was read back with getComputedStyle at
   1440px wide.

     section tint  #f6f8fa      accent / regulatory strip  #5b7e96
     white         #ffffff      footer                     #454649
     headings      #333333      body copy                  #666666
     stats block   #1e3b56      button label               #83959f

   The live site sets its headings and most body copy in Montserrat and
   everything else (nav, hero, stat labels) in Open Sans; the "Our Group
   at a Glance" block is deliberately serif. --frm-serif carries that.
   ============================================================ */

:root {
    --frm-tint: #f6f8fa;
    --frm-white: #ffffff;
    --frm-accent: #5b7e96;
    --frm-accent-dark: #4a6a80;
    --frm-navy: #333333;
    --frm-body: #666666;
    --frm-muted: #83959f;
    --frm-glance: #1e3b56;
    --frm-rule: rgba(51, 51, 51, 0.12);
    --frm-footer: #454649;
    --frm-footer-bottom: #171717;
    --frm-sans: 'Open Sans', Arial, Helvetica, sans-serif;
    --frm-head: 'Montserrat', Helvetica, Arial, sans-serif;
    --frm-serif: 'Times New Roman', Georgia, serif;
    --frm-container: 1080px;
}

/* ============================================================
   PAGE HERO  (every page uses the same ocean background)
   ============================================================ */
.page-hero {
    position: relative;
    width: 100%;
    background-color: #08101a;
    background-image: url('/Shared/assets/images/Freimann/MainOcean.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Every hero is a full viewport, home page and inner pages alike.
       svh first so the mobile address bar sliding away does not resize the
       band mid-scroll; vh is the fallback for anything that predates it.
       The old fixed band (293/294 padding, 185 on the home page) is kept
       below as the MINIMUM padding, so a short window still gets air around
       the title instead of pressing it against the header. */
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 200px 0 200px;
    overflow: hidden;
}

.page-hero-home { padding-top: 160px; }

/* Dalebrook's shade: a vertical wash over the photo, heaviest at the top
   where the nav sits and at the bottom where the next section meets it,
   almost clear across the middle so the surf still reads. It is what keeps
   white type legible over a photo that is bright in places. Sits at z-index
   1, under .page-hero-inner's 2. */
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(8, 16, 26, 0.62) 0%,
        rgba(8, 16, 26, 0.22) 26%,
        rgba(8, 16, 26, 0.28) 64%,
        rgba(8, 16, 26, 0.50) 100%);
    z-index: 1;
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 648px;
    margin: 0 auto;
    /* The live row adds 27px above the title and 26px below the last thing
       in it. */
    padding: 27px 0 26px;
    text-align: center;
}

.page-hero-title {
    font-family: var(--frm-sans);
    color: #ffffff;
    font-size: 50px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 50px;
    margin: 0;
    padding-bottom: 10px;
}

.page-hero-title strong {
    font-weight: 700;
}

.page-hero-subtitle {
    font-family: var(--frm-sans);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.55;
    color: #ffffff;
    margin: 0;
}

.hero-scroll-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: 46px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: frmFadeIn 1s ease-in-out 1.2s forwards;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.hero-scroll-arrow:hover {
    color: #ffffff;
    border-color: #ffffff;
}

.hero-scroll-arrow svg {
    width: 22px;
    height: 22px;
    animation: frmBounce 2s ease-in-out infinite;
}

@keyframes frmFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes frmBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
    display: inline-block;
    font-family: var(--frm-sans);
    padding: 4.5px 15px;
    border: 2px solid transparent;
    border-radius: 99px;
    background: var(--frm-white);
    color: var(--frm-muted);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 25.5px;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.btn:hover {
    background: transparent;
    border-color: var(--frm-white);
    color: var(--frm-white);
}

/* On a light section the pill inverts: the live site's buttons over white
   read as accent-on-white rather than white-on-white. */
.section-white .btn,
.section-tint .btn {
    background: var(--frm-accent);
    color: var(--frm-white);
}

.section-white .btn:hover,
.section-tint .btn:hover {
    background: var(--frm-accent-dark);
    border-color: transparent;
    color: var(--frm-white);
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
    /* The live sections are top-light and bottom-heavy: 54px above the
       heading, 119px below the last row. */
    padding: 54px 0 119px;
    background: var(--frm-tint);
    color: var(--frm-body);
}

.section-tint { background: var(--frm-tint); }

.section-white { background: var(--frm-white); }

/* The band that carries a heading and a row of cards together (the home
   page's "We offer ..." plus its three pillars) is evenly padded: 120px on
   the section and 27px more inside each row. */
.section-even { padding: 147px 0; }

/* The partner strip closes tighter than a text section does. */
.section-tail { padding: 54px 0 40px; }

.section-inner {
    max-width: var(--frm-container);
    margin: 0 auto;
    padding: 0;
}

.section-inner-narrow {
    max-width: 900px;
}

/* The live card rows sit in a wider row than the text rows do: 1152px
   against 1080px, which is what puts the outer edge of the first card at
   x=144 rather than 180. */
.section-inner-wide {
    max-width: 1152px;
}

.section-title {
    font-family: var(--frm-head);
    color: var(--frm-navy);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.5em;
    text-align: center;
    margin: 0 0 10px;
    padding-bottom: 10px;
}

.section-title strong {
    font-weight: 700;
}

.section-title-md {
    font-size: 24px;
    line-height: 1.5em;
}

.section-title-sm {
    font-family: var(--frm-head);
    color: var(--frm-navy);
    font-size: 40px;
    font-weight: 500;
    letter-spacing: normal;
    line-height: 1.5em;
    text-align: center;
    margin: 0 0 10px;
    padding-bottom: 10px;
}

.section-lead {
    font-family: var(--frm-head);
    font-size: 14px;
    font-weight: 500;
    line-height: 32.4px;
    color: var(--frm-body);
    text-align: center;
    max-width: 864px;
    margin: 0 auto;
}

/* ============================================================
   SERVICE SUB-PAGES  (Investment Services / How We Do It / The Outcome)

   These three share one layout on the live site and one here: an evenly
   padded tinted band, a small centred title over a smaller centred lead,
   then one big centred line and a run of numbered headings with bullet
   paragraphs under them.
   ============================================================ */
.subpage-band { padding: 54px 0; }

.subpage-title {
    font-family: var(--frm-sans);
    color: var(--frm-navy);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4em;
    text-align: center;
    margin: 0;
    padding-bottom: 10px;
}

.subpage-lead {
    font-family: var(--frm-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 23.8px;
    color: #000000;
    text-align: center;
    margin: 0;
}

/* The one line the page is built around, set large and centred. */
.subpage-statement {
    font-family: var(--frm-sans);
    color: var(--frm-navy);
    font-size: 30px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    margin: 79px 0 0;
    padding-bottom: 10px;
}

.subpage-prose {
    font-family: var(--frm-sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 23.8px;
    color: var(--frm-body);
}

.subpage-prose h2 {
    font-family: var(--frm-sans);
    color: var(--frm-navy);
    font-size: 26px;
    font-weight: 500;
    line-height: 26px;
    margin: 48px 0 0;
    padding-bottom: 10px;
}

.subpage-prose p { margin: 0 0 14px; }

.subpage-prose ul {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

/* The live page writes these bullets as plain paragraphs with a literal
   bullet character. Kept as a real list here - it is a list, and a screen
   reader should be told so - with the marker drawn to match. */
.subpage-prose li {
    margin: 0 0 14px;
    padding-left: 1.1em;
    position: relative;
}

.subpage-prose li::before {
    content: '\2022';
    position: absolute;
    left: 0;
}

.subpage-prose strong { font-weight: 700; color: var(--frm-navy); }

/* An outline pill, black on the tint, unlike the accent buttons elsewhere. */
.subpage-cta {
    text-align: center;
    margin-top: 60px;
}

.subpage-cta .btn {
    background: transparent;
    border: 2px solid #000000;
    border-radius: 99px;
    color: #000000;
    font-size: 22px;
    font-weight: 500;
    line-height: 37.4px;
    padding: 6.6px 22px;
    text-transform: none;
}

.subpage-cta .btn:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

@media (max-width: 600px) {
.subpage-statement { font-size: 24px; line-height: 30px; }
.subpage-prose h2 { font-size: 21px; line-height: 27px; }
.subpage-cta .btn { font-size: 18px; }
}

/* ============================================================
   PROSE
   ============================================================ */
.prose {
    font-family: var(--frm-head);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--frm-body);
}

.prose p { margin: 0 0 1.4rem; }

.prose p:last-child { margin-bottom: 0; }

/* The one-line summary that opens each service sub-page */
.prose .prose-lead {
    color: var(--frm-navy);
    font-weight: 600;
}

.prose a {
    color: var(--frm-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose a:hover { color: var(--frm-accent-dark); }

.prose h2,
.prose h3 {
    color: var(--frm-navy);
    font-weight: 500;
    letter-spacing: 0.01em;
    margin: 2.4rem 0 1.1rem;
}

.prose h2 { font-size: 26px; }

.prose h3 { font-size: 22px; }

.prose ul { margin: 0 0 1.5rem; padding-left: 1.3rem; }

.prose li { margin-bottom: 0.7rem; line-height: 1.85; }

/* ============================================================
   FUND CARDS  (factsheets index + fund pages)
   ============================================================ */
.fund-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding: 38px 22px 34px;
    background: var(--frm-white);
    border: 1px solid var(--frm-rule);
    text-decoration: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.fund-card:hover {
    border-color: var(--frm-accent);
    box-shadow: 0 14px 30px rgba(31, 45, 61, 0.10);
    transform: translateY(-4px);
}

.fund-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--frm-accent);
    color: var(--frm-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
}

.fund-card-title {
    color: var(--frm-navy);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
}

.fund-card-note {
    font-size: 0.74rem;
    color: var(--frm-muted);
    margin: 0;
}

.fund-card-single {
    max-width: 320px;
    margin: 0 auto;
}

/* The grids the /manage publish step emits, and the one Factsheets.html has
   always used. These were in Factsheets.css, which is loaded by the index page
   only — so the five fund pages, which now publish a grid of their own when a
   fund has more than one document, had no rule for it. One definition, in the
   stylesheet every page loads. */
.card-grid   { display: grid; gap: 24px; }
.card-grid-5 { grid-template-columns: repeat(5, 1fr); }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ============================================================
   NEWS ARTICLES  (generated by /manage into the two News pages)

   Every class here is emitted by frm_news_render_article() in
   Backend/Backend_Secure/Functions/Content/news.php. Renaming one
   here without renaming it there leaves the next publish
   producing unstyled markup, so keep the two together.
   ============================================================ */
.news-item {
    background: var(--frm-white);
    border: 1px solid var(--frm-rule);
    padding: 34px 38px;
    margin: 0 auto 24px;
    max-width: 820px;
    text-align: left;
}

.news-item:last-child { margin-bottom: 0; }

.news-date {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--frm-accent);
    margin: 0 0 10px;
}

.news-headline {
    color: var(--frm-navy);
    font-size: clamp(1.02rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 14px;
}

.news-summary {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.8;
    color: var(--frm-navy);
    margin: 0 0 14px;
}

.news-item p {
    font-size: 0.9rem;
    line-height: 1.9;
    color: var(--frm-body);
    margin: 0 0 12px;
}

.news-item p:last-of-type { margin-bottom: 0; }

.news-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--frm-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.news-link:hover { border-bottom-color: var(--frm-accent); }

/* ============================================================
   EMBEDS
   ============================================================ */
.embed-frame {
    width: 100%;
    border: 0;
    display: block;
}

.contact-form .form-status {
    font-size: 0.85rem;
    line-height: 1.7;
    margin: 0;
    color: var(--frm-body);
}

.contact-form .form-status[data-status="success"] { color: #2f7d55; }

.contact-form .form-status[data-status="error"] { color: #b3453f; }

/* ============================================================
   PASSWORD GATE  (news pages)
   ============================================================ */
.gate {
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.gate-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 2rem;
}

.gate-form input {
    flex: 1 1 240px;
    background: var(--frm-white);
    border: 1px solid var(--frm-rule);
    border-radius: 3px;
    padding: 12px 16px;
    color: var(--frm-navy);
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    outline: none;
}

.gate-form input:focus { border-color: var(--frm-accent); }

.gate-note {
    font-size: 0.78rem;
    line-height: 1.85;
    color: var(--frm-muted);
    margin: 2rem 0 0;
}

.section-cta {
    margin-top: 2.8rem;
    text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .card-grid-5     { grid-template-columns: repeat(3, 1fr); }
    .doc-list        { grid-template-columns: repeat(2, 1fr); }
    .capability-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1140px) {
.section-inner { padding: 0 30px; }
}

@media (max-width: 900px) {
.section { padding: 48px 0 80px; }
.section-even { padding: 80px 0; }
.section-inner { padding: 0 30px; }
.page-hero { padding: 190px 0 190px; }
.page-hero-home { padding-top: 150px; }
.page-hero-inner { padding-left: 30px; padding-right: 30px; }
.page-hero-title { font-size: 40px; line-height: 44px; }
.card-grid-5 { grid-template-columns: repeat(2, 1fr); }
.card-grid-3 { grid-template-columns: repeat(2, 1fr); }
.news-item { padding: 28px 26px; }
}

@media (max-width: 600px) {
.section { padding: 40px 0 64px; }
.section-even { padding: 64px 0; }
.section-inner { padding: 0 25px; }
.page-hero { padding: 150px 0 140px; }
.page-hero-home { padding-top: 130px; }
.page-hero-title { font-size: 32px; line-height: 38px; }
.page-hero-subtitle { font-size: 16px; }
.card-grid-5 { grid-template-columns: 1fr; }
.card-grid-3 { grid-template-columns: 1fr; }
.embed-market, .embed-map { height: 380px; }
}