/* ------------------------------------------------------------------------- */
/* Flowenergi content pages (home, iVamp, installers, electrical services,   */
/* about). Scoped under .fp so nothing leaks into the shop / admin pages.    */
/* Uses the site's own fonts (Electro Shackle headings, FlowRegular, Jura).  */
/* Colours are for the site's black page background.                         */
/* ------------------------------------------------------------------------- */
.fp {
    --fp-blue: #007fff;
    --fp-link: #4da3ff;      /* brighter blue for small text on black */
    --fp-navy: #cfe3ff;      /* card headings, labels, chips */
    --fp-ink: #e6ecf7;       /* body text */
    --fp-muted: #a9b6cc;     /* secondary text */
    --fp-line: #1f3a66;      /* borders */
    --fp-tint: #0c1a30;      /* card / field background */
    --fp-card-end: #08111f;
    --fp-green: #2fbf71;
    --fp-amber: #e0a030;
    width: var(--marginedwidth, 82%);
    max-width: 1150px;
    margin: 0 auto;
    padding: 2vh 0 4vh;
    clear: both;
    color: var(--fp-ink);
    font-family: Jura-Regular, Verdana, Arial, Helvetica, sans-serif;
}

.fp p, .fp li {
    color: var(--fp-ink);
    text-shadow: none;
    font-size: 1.05rem;
    line-height: 1.6;
}

.fp h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.2; margin: 0 0 1rem; }
.fp h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); line-height: 1.25; margin: 0 0 1rem; }
.fp h3 { font-family: FlowRegular, 'Electro Shackle', sans-serif; font-size: 1.15rem; color: var(--fp-navy); text-shadow: none; margin: 0 0 0.5rem; }

.fp a { color: var(--fp-link); }

.fp-eyebrow {
    font-family: FlowRegular, sans-serif;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--fp-link);
    margin: 0 0 0.6rem;
}

/* Hero: text + picture side by side, stacked on phones */
.fp-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; padding: 2vh 0 3vh; text-align: left; }
.fp-hero .fp-lead { font-size: 1.2rem; color: var(--fp-muted); }
.fp-hero img, .fp-hero video { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: 0 10px 40px rgba(0, 127, 255, 0.22); background: #050b18; }

.fp-section { padding: 4vh 0 1vh; text-align: left; }
.fp-section > h2, .fp-section > .fp-eyebrow, .fp-section > .fp-intro { text-align: center; }
.fp-intro { max-width: 46em; margin: 0 auto 1.6rem; color: var(--fp-muted) !important; }

/* Cards */
.fp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.fp-grid.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.fp-grid.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1050px) { .fp-grid.three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fp-grid.three { grid-template-columns: 1fr; } }
.fp-card {
    border: 1.5px solid var(--fp-line);
    border-top: 4px solid var(--fp-blue);
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    background: linear-gradient(180deg, var(--fp-tint), var(--fp-card-end) 70%);
}
.fp-card.green { border-top-color: var(--fp-green); }
.fp-card.amber { border-top-color: var(--fp-amber); }
.fp-card.navy { border-top-color: #5b7cc4; }
.fp-card p { margin: 0 0 0.6rem; font-size: 1rem; }
.fp-card p:last-child { margin-bottom: 0; }

/* Tick lists */
.fp ul.fp-ticks { list-style: none; padding: 0; margin: 0.4rem 0 1rem; }
.fp ul.fp-ticks li { position: relative; padding-left: 1.6rem; margin: 0 0 0.45rem; }
.fp ul.fp-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--fp-green); font-weight: 800; }
.fp strong { color: #fff; }

/* Buttons */
.fp-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 0; }
.fp-hero .fp-actions { justify-content: flex-start; }
.fp-btn {
    display: inline-block;
    padding: 0.7rem 1.3rem;
    border-radius: 999px;
    background: var(--fp-blue);
    color: #fff !important;
    text-decoration: none;
    font-family: FlowRegular, sans-serif;
    font-size: 1rem;
    border: 2px solid var(--fp-blue);
}
.fp-btn:hover { background: #0066cc; border-color: #0066cc; }
.fp-btn.ghost { background: transparent; color: var(--fp-link) !important; }
.fp-btn.ghost:hover { background: var(--fp-tint); }

/* Credibility band */
.fp-band {
    margin: 4vh 0 1vh;
    padding: 2rem 2.2rem;
    border-radius: 16px;
    background: radial-gradient(circle at 20% 0%, #0b4fa8 0%, #082a5c 45%, #050b18 100%);
    border: 1px solid #1f3a66;
    color: #e8eefc;
    text-align: left;
}
.fp-band h2 { color: #fff; }
.fp-band p, .fp-band li { color: #dbe6ff; }
.fp-band .fp-eyebrow { color: #8fc1ff; }
.fp-band ul.fp-ticks li::before { color: #4fe3b0; }

/* Chips (supported kit, standards) */
.fp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; }
.fp-chip { padding: 0.35rem 0.85rem; border-radius: 999px; border: 1.5px solid var(--fp-line); background: var(--fp-tint); font-family: FlowRegular, sans-serif; font-size: 0.9rem; color: var(--fp-navy); }
.fp-band .fp-chip { background: rgba(255, 255, 255, 0.08); border-color: rgba(143, 193, 255, 0.5); color: #fff; }

/* "Did you know" / note boxes */
.fp-note { border-left: 4px solid var(--fp-amber); background: #231a08; padding: 0.9rem 1.1rem; border-radius: 0 10px 10px 0; margin: 1rem 0; }
.fp-note p { margin: 0; }

/* Steps */
.fp-steps { counter-reset: fpstep; }
.fp-steps .fp-card { position: relative; padding-top: 2.6rem; }
.fp-steps .fp-card::before {
    counter-increment: fpstep; content: counter(fpstep);
    position: absolute; top: 0.9rem; left: 1.4rem;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--fp-blue); color: #fff; font-weight: 800; text-align: center; line-height: 1.7rem;
}

/* Qualifications table */
.fp-quals { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1rem; }
.fp-quals td { padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--fp-line); vertical-align: top; font-size: 1rem; }
.fp-quals td:last-child { color: var(--fp-muted); white-space: nowrap; text-align: right; }

/* Price line */
.fp-price { font-family: FlowRegular, sans-serif; font-size: 1.15rem; color: var(--fp-navy); }

@media (max-width: 860px) {
    .fp { width: auto; margin: 0 16px; }
    .fp-hero { grid-template-columns: 1fr; gap: 1.5rem; }
    .fp-band { padding: 1.5rem 1.2rem; }
    .fp-quals td:last-child { white-space: normal; }
}

/* ---------- Contact page ---------- */
.fp-contact { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.4rem; align-items: start; text-align: left; }
.fp-tip { margin-bottom: 1rem; }
.fp-tip h3 { margin-bottom: 0.3rem; }
.fp-form h2 { text-align: left; }
.fp-field { display: flex; flex-direction: column; margin: 0 0 1rem; }
.fp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.fp-form label { font-family: FlowRegular, sans-serif; font-size: 0.95rem; color: var(--fp-navy); margin: 0 0 0.35rem; }
.fp-form input, .fp-form select, .fp-form textarea {
    font-family: Jura-Regular, Verdana, Arial, sans-serif;
    font-size: 1rem;
    color: var(--fp-ink);
    padding: 0.65rem 0.8rem;
    border: 1.5px solid var(--fp-line);
    border-radius: 10px;
    background: #0a1424;
    width: 100%;
    box-sizing: border-box;
}
.fp-form ::placeholder { color: #6f7f99; opacity: 1; }
.fp-form select option { background: #0a1424; color: var(--fp-ink); }
.fp-form textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.fp-form input:focus, .fp-form select:focus, .fp-form textarea:focus { outline: none; border-color: var(--fp-blue); box-shadow: 0 0 0 3px rgba(0, 127, 255, 0.15); }
.fp-form .input-validation-error { border-color: #e05a5a; }
.fp-err { color: #ff8a8a; font-size: 0.88rem; margin-top: 0.3rem; }
.fp-err:empty { display: none; }
.fp-ok { background: #0f2e1d; border: 1.5px solid #2f7a4c; color: #a8f0c4; border-radius: 10px; padding: 0.8rem 1rem; margin: 0 0 1rem; }
.fp-small { font-size: 0.85rem; color: var(--fp-muted); }
.fp-form button.fp-btn { cursor: pointer; }
.fp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) {
    .fp-contact { grid-template-columns: 1fr; }
    .fp-row { grid-template-columns: 1fr; }
}