/* MEMANCO theme: typography, colours and background bands modelled on falcongroup.net
   Fonts:    Raleway (navigation, headings, buttons) + Open Sans (body, sub-headings, hero list)
   Colours:  maroon #6F0809 (nav + section titles), navy #00305B (sub-headings),
             black body text, white hero text
   Bands:    blue (white text), white (black text), dark red (white text), alternating
   Brand red #DC2626 (the A in the logo) is kept for the active nav state, slashes and accents. */

:root {
    --maroon: #6F0809;
    --maroon-dark: #4A0506;
    --navy: #00305B;
    --ink: #000000;
    --paper: #FAFAFA;
    --band: #DDDDDD;
    --charcoal: #555555;
    --accent: #DC2626;
    --accent-hover: #B91C1C;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
    background: #fff;
}

section[id], div[id] { scroll-margin-top: 6rem; }

/* ---------- Header ---------- */
.f-header { background: #fff; border-bottom: 1px solid #ececec; height: 78px; }
.f-logo {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .14em;
    color: #222;
}
.f-logo-img { display: block; height: 34px; width: auto; }
@media (min-width: 640px) { .f-logo-img { height: 43px; } }
.f-logo-tag {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #666;
}
.nav-link {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--maroon);
    padding: .5rem 0;
    border-bottom: 2px solid transparent;
    transition: color .2s;
}
.nav-link:hover { color: var(--accent); }
.nav-link.active {
    color: var(--accent) !important;
    font-weight: 700;
    border-bottom: 2px solid var(--accent);
}
.f-mobile-link {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--maroon);
}

/* ---------- Hero ---------- */
/* Drop a photo at assets/img/hero.jpg to show it here; the grey gradient is the fallback. */
.f-hero {
    position: relative;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 70%),
        url('../assets/img/hero.jpg') center / cover no-repeat,
        linear-gradient(120deg, #0B3A6E 0%, #174F8F 55%, #2A6CB5 100%);
}
.f-hero-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    letter-spacing: .1em;
    text-transform: uppercase;
}
.f-hero-title {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.15;
    font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    color: #fff;
}
.f-hero-title .strong { font-weight: 700; display: block; }
.f-hero-title .light  { font-weight: 400; display: block; }
.f-hero-lead {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    color: #fff;
}
.f-slash-list li a {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: #fff;
    display: inline-flex;
    gap: .6rem;
    transition: opacity .2s;
}
.f-slash-list li a::before { content: '/'; color: #F26B6B; }
.f-slash-list li a:hover { opacity: .8; }

/* ---------- Bands (section backgrounds) ---------- */
.band-paper    { background: var(--paper); }
.band-mid      { background: var(--band); }
.band-white    { background: #fff; }
.band-charcoal { background: var(--charcoal); color: #fff; }
.band-blue { background: linear-gradient(120deg, #0B3A6E 0%, #174F8F 55%, #2A6CB5 100%); color: #fff; }
.band-red  { background: linear-gradient(120deg, #5E0709 0%, #7A0C12 60%, #8F1218 100%); color: #fff; }

/* ---------- Typography ---------- */
.f-eyebrow {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--maroon);
}
.band-charcoal .f-eyebrow, .band-blue .f-eyebrow, .band-red .f-eyebrow, .f-hero .f-eyebrow { color: #F4B4B4; }
.f-title {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--maroon);
}
.band-charcoal .f-title, .band-blue .f-title, .band-red .f-title { color: #fff; }
.f-title-lg { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.f-sub {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--navy);
}
.band-charcoal .f-sub, .band-blue .f-sub, .band-red .f-sub { color: #fff; }
.f-card-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--navy);
}
.f-label {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
}
.f-muted { color: #555; }
.band-charcoal .f-muted, .band-blue .f-muted, .band-red .f-muted { color: #e6e6e6; }
.f-num {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 2.25rem;
    line-height: 1;
    color: var(--maroon);
}

/* ---------- Buttons ---------- */
.f-btn {
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .95rem 1.7rem;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.f-btn-solid { background: var(--maroon); color: #fff; border: 1px solid var(--maroon); }
.f-btn-solid:hover { background: var(--maroon-dark); border-color: var(--maroon-dark); }
.f-btn-outline { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.85); }
.f-btn-outline:hover { background: rgba(255,255,255,.15); }
.f-btn-red { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.f-btn-red:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.f-btn-ink { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.f-btn-ink:hover { background: #001f3d; }
.f-btn-light { background: #fff; color: var(--maroon); border: 1px solid #fff; }
.f-btn-light:hover { background: #f1f1f1; }
.f-btn:focus-visible, .nav-link:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- Cards and panels ---------- */
.f-card { background: #fff; border: 1px solid #d4d4d4; }
.f-card:hover { border-color: #b9b9b9; }
.f-chip { background: var(--paper); border: 1px solid #e3e3e3; }
.f-glass { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); }
.f-navy-card { background: var(--navy); color: #fff; }
.f-rule { border-color: #d4d4d4; }
.band-charcoal .f-rule, .band-blue .f-rule, .band-red .f-rule { border-color: rgba(255,255,255,.22); }

details.service > summary { list-style: none; }
details.service > summary::-webkit-details-marker { display: none; }
details.service[open] .chev { transform: rotate(180deg); }

/* ---------- Form ---------- */
.f-input {
    width: 100%;
    padding: .75rem 1rem;
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #000;
}
.f-input:focus { outline: none; border-color: var(--maroon); box-shadow: 0 0 0 2px rgba(111,8,9,.15); }

/* ---------- Dark bands (blue / dark red / charcoal): white text ---------- */
.band-charcoal .f-num, .band-blue .f-num, .band-red .f-num,
.band-charcoal .f-label, .band-blue .f-label, .band-red .f-label,
.band-charcoal .f-card-title, .band-blue .f-card-title, .band-red .f-card-title { color: #fff; }
.band-blue .f-eyebrow, .f-hero .f-eyebrow { color: #CFE3F8; }

/* White cards inside a dark band keep dark text */
.band-charcoal .bg-white .f-card-title, .band-blue .bg-white .f-card-title, .band-red .bg-white .f-card-title { color: var(--navy); }
.band-charcoal .bg-white .f-muted, .band-blue .bg-white .f-muted, .band-red .bg-white .f-muted { color: #555; }
.band-charcoal .bg-white .f-num, .band-blue .bg-white .f-num, .band-red .bg-white .f-num { color: var(--maroon); }
.band-charcoal .bg-white, .band-blue .bg-white, .band-red .bg-white { color: #000; }

/* Cards on a white band get a soft grey fill so they stand out */
.band-white .f-card { background: var(--paper); }


/* ================= Updates from the PowerPoint design (hero, about, services) ================= */

/* Hero: navy panel with copy on the left and the brand visual on the right (about 30%) */
.hero-navy { background: var(--navy); color: #fff; }
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-copy { padding: 4rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.hero-visual { height: 420px; overflow: hidden; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr 30.5%; min-height: 642px; }
    .hero-copy { padding: 4rem 2rem 4rem max(2rem, 12.7%); }
    .hero-visual { height: auto; }
}

/* Mobile hero: fade the photo into the navy panel so there is no hard edge under the text */
@media (max-width: 1023px) {
    .hero-visual { position: relative; height: 380px; background: var(--navy); }
    .hero-visual img {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 40%, #000 100%);
        opacity: .92;
    }
}
.hero-title {
    font-family: 'Raleway', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.12;
    font-size: clamp(1.75rem, 3vw, 2.3rem);
    color: #fff;
}
.hero-title span { display: block; }
.hero-title .light { font-weight: 400; }
.hero-title .strong { font-weight: 700; }
.hero-list {
    list-style: none; padding: 0; margin: 2.25rem 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(1.05rem, 1.7vw, 1.5rem);
    line-height: 1.5;
    color: #fff;
}
.hero-list li::before { content: '/ '; }
.hero-actions a, .hero-actions button { text-decoration: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; }
.hero-btn-primary   { background: #C00000; color: #fff; border: 1px solid #BFBFBF; min-width: 240px; height: 46px; padding: 0 1.5rem; font-weight: 700; }
.hero-btn-primary:hover { background: #A00000; }
.hero-btn-secondary { background: #A6A6A6; color: #000; border: 1px solid #7F7F7F; min-width: 240px; height: 46px; padding: 0 1.5rem; font-weight: 700; }
.hero-btn-secondary:hover { background: #BDBDBD; }

/* About: white band, black text */
.f-title-ink { color: #000; }
.about-copy { color: #000; font-size: 16px; line-height: 1.6; }
.about-copy h3 { font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 1.15rem; text-transform: uppercase; color: #000; margin: 0 0 .9rem; }
.about-copy h3:not(:first-child) { margin-top: 2rem; }
.about-copy p { margin: 0 0 .9rem; }
.about-list { list-style: none; padding: 0; margin: 0 0 .5rem 1.75rem; }
.about-list li { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .2rem; }
.about-list i { font-size: .8rem; }

/* Services: light grey band, dashed outline cards, solid when open */
.band-grey { background: #D9D9D9; color: #000; }
.svc-card { background: transparent; border: 1px dashed #7F7F7F; }
.svc-card > summary { min-height: 200px; }
.svc-card[open] { background: var(--paper); border: 1px solid #B9B9B9; }
.svc-card[open] > summary { min-height: 0; }
.svc-blurb { color: #000; }
.svc-card .f-chip { background: #fff; }

/* Grey bands (signature offerings, data analytics): dark text, light cards */
.band-grey .f-sub, .band-grey .f-eyebrow, .band-grey .f-card-title, .band-grey .f-label, .band-grey .f-muted { color: #000; }
.band-grey .f-glass { background: rgba(255,255,255,.45); border: 1px solid #B9B9B9; }
.band-grey .f-rule { border-color: #B9B9B9; }
.band-grey .f-btn-outline { color: #000; border-color: #000; }
.band-grey .f-btn-outline:hover { background: rgba(0,0,0,.07); }
.band-grey .f-btn-light { color: #000; }
.svc-card .f-card-title, .svc-card .f-label { color: var(--navy); }

/* Contact: white band, black text, grey consultation card */
.contact-ink .f-sub, .contact-ink .f-muted { color: #000; }
.contact-ink .f-glass { background: #D9D9D9; border: 1px solid #fff; }
.contact-ink .f-rule { border-color: #D4D4D4; }
.contact-btn { background: #D9D9D9; color: #C00000; border: 1px solid #fff; font-weight: 700; }
.contact-btn:hover { background: #fff; }

/* ===== Section colour rhythm: white / grey / white / grey / white / grey ===== */
.sec-ink { color: #000; }
.sec-ink .f-sub { color: var(--navy); }
.sec-ink .f-muted { color: #000; }
.sec-ink .f-glass { background: #F4F4F4; border: 1px solid #DADADA; color: #000; }
.sec-ink .f-glass .f-muted { color: #555; }
.sec-ink .f-rule { border-color: #D4D4D4; }
.sec-ink .f-btn-outline { color: #000; border-color: #000; }
.sec-ink .f-btn-outline:hover { background: rgba(0,0,0,.06); }
.offer-chip { background: #fff; border: 1px solid #E3E3E3; padding: .75rem; }
.band-grey .f-title, .band-grey .f-sub, .band-grey .f-card-title, .band-grey .f-label { color: inherit; }
.band-grey .f-title { color: var(--maroon); }
.band-grey .f-sub, .band-grey .f-card-title { color: var(--navy); }
.band-grey p, .band-grey .f-muted { color: #000; }
.contact-card { background: #fff; border: 1px solid #D4D4D4; }
.contact-card .f-sub { color: var(--navy); }
.founder-note { border-left: 3px solid var(--maroon); padding: .25rem 0 .25rem 1.1rem; margin-bottom: 2rem; }
.founder-note h3 { margin-top: 0 !important; }

/* Services dropdown in header */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd > .nav-link { display: block; }
.nav-dd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; z-index: 60; }
.nav-dd-box { background: #fff; border: 1px solid #E3E3E3; box-shadow: 0 14px 34px rgba(0,0,0,.12); min-width: 300px; padding: 8px 0; }
.nav-dd-menu a { display: block; padding: 11px 20px; font-size: 13px; font-weight: 500; color: #000; line-height: 1.35; white-space: nowrap; }
.nav-dd-menu a:hover, .nav-dd-menu a:focus-visible { color: #DC2626; background: #F4F4F4; }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; }
.mobile-sub { padding-left: 1.75rem !important; font-size: .8rem; }
/* Compact text link for service cards */
.svc-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6F0809; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid #6F0809; }
.svc-link i { font-size: .65rem; transition: transform .2s; }
.svc-link:hover i { transform: translateX(3px); }