/*
 * Brand layer on top of the AgencyCo template (style.css). Loaded last.
 *
 * The template ships placeholder photos ("1920x1080" grey boxes) and placeholder logos,
 * so nothing here references template imagery: backgrounds are gradients, the logo is an
 * inline SVG wordmark, and every colour comes from the tokens below.
 *
 * maintenance/css/brand.css and marketing/css/brand.css are identical copies. Each
 * static site publishes only its own directory, so neither can reach the other's files.
 * Change one, copy it to the other.
 */

:root {
    --primary: #00438b;        /* template primary, navy */
    --primary-deep: #002a5c;
    --ink: #081d43;            /* template heading ink */
    --body: #5f6b7a;

    /* The two states a traffic figure can be in. The wordmark repeats the idea:
       a full-length rule (measured) and a shorter one (forecasted). */
    --observed: #0ba077;       /* template's green accent */
    --observed-soft: #ddedea;
    --forecast: #ff7700;       /* template secondary, orange */
    --forecast-soft: #ffe9d6;
}

body { color: var(--body); }
h1, h2, h3, h4, h5, h6 { color: var(--ink); }

/* ---------- wordmark ---------- */
.wordmark {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
    color: #fff;
    text-decoration: none;
}
.wordmark:hover { color: #fff; }
.wordmark svg { width: 26px; height: 26px; flex: none; }

/* ---------- backgrounds that replace the template's placeholder photos ---------- */
.brand-bg {
    position: relative;
    background-color: var(--primary-deep);
    background-image:
        radial-gradient(1200px 600px at 85% 10%, rgba(11, 160, 119, .22), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(255, 119, 0, .14), transparent 60%),
        linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
    overflow: hidden;
}
/* A faint road-grid: long lanes at two angles, like a network seen from above. */
.brand-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 90px),
        repeating-linear-gradient(25deg, rgba(255,255,255,.035) 0 1px, transparent 1px 140px);
}
.brand-bg > * { position: relative; z-index: 2; }
.brand-bg .bottom-img { z-index: 3; }

.text-white-soft { color: rgba(255, 255, 255, .78); }

.eyebrow {
    display: inline-block;
    font-family: 'Comfortaa', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--observed);
    margin-bottom: 1rem;
}
.brand-bg .eyebrow { color: #7fe0c2; }

/* ---------- observed / forecasted badges ---------- */
.role {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.6;
}
.role::before {
    content: '';
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
}
.role--observed { background: var(--observed-soft); color: #08795a; }
.role--forecast { background: var(--forecast-soft);  color: #b25300; }

/* ---------- email behind a bot check (js/email-gate.js) ---------- */
.email-reveal { text-align: center; width: 100%; max-width: 340px; }
.email-reveal__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 26px;
}
.email-reveal__challenge:not(:empty) { display: flex; justify-content: center; margin-top: .25rem; }
.email-reveal__note { font-size: .82rem; color: rgba(255, 255, 255, .65); margin: .85rem 0 0; }
.email-reveal__note.is-error { color: #ffc69b; }
.email-reveal__address {
    display: inline-block;
    font-family: 'Comfortaa', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    word-break: break-all;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, .35);
}
.email-reveal__address:hover { color: #7fe0c2; }