/* ─────────────────────────────────────────────────────────────────────────────
   public.css — the public face of positiveelectrics.com.au

   Loaded ONLY by the anonymous landing page (Views/Home/Index.cshtml). It is
   deliberately separate from site.css: site.css is the internal connector's
   thin layer over Bootstrap, this file is the Positive Electrics brand and
   loads no framework at all.

   Colours and type are Positive Electrics Brand Guidelines v1.0 (Aug 2026).
   Do not introduce off-palette values here.
   ──────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Roboto:wght@400;500&display=swap');

:root {
    --pe-circuit: #053332;
    --pe-signal: #C7F367;
    --pe-insulator: #FFFFFF;
    --pe-current: #66934D;
    --pe-steel: #C8D4C4;

    --pe-font-head: 'Space Grotesk', Arial, 'Helvetica Neue', sans-serif;
    --pe-font-body: 'Roboto', Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.pe-public {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pe-circuit);
    color: var(--pe-insulator);
    font-family: var(--pe-font-body);
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    text-align: left;          /* brand: never centred, never justified */
}

.pe-shell {
    width: 100%;
    max-width: 62rem;
    margin: 0 auto;
    padding: 3rem 1.75rem 2rem;
    flex: 1 0 auto;
}

/* ── Logo ────────────────────────────────────────────────────────────────────
   Circuit background takes the Signal logo. Used as supplied — not recoloured,
   not stretched. The margin below carries the required clear space (the width
   of the P symbol, roughly 18% of the primary lockup's width).                */
.pe-logo {
    display: block;
    width: 15rem;
    max-width: 62%;
    height: auto;
    margin-bottom: 3.25rem;
}

/* ── Accent label ─────────────────────────────────────────────────────────── */
.pe-label {
    font-family: var(--pe-font-head);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pe-signal);
    margin: 0 0 0.75rem;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */
.pe-h1 {
    font-family: var(--pe-font-head);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.01em;
    color: var(--pe-insulator);
    font-size: clamp(2.1rem, 6.5vw, 3.6rem);
    max-width: 18ch;
    margin: 0 0 1.5rem;
}

.pe-lede {
    max-width: 46ch;
    font-size: 1.0625rem;
    margin: 0 0 1rem;
    color: var(--pe-insulator);
}

.pe-lede:last-of-type { margin-bottom: 0; }

.pe-rule {
    height: 3px;
    border: 0;
    background: var(--pe-signal);
    margin: 2.75rem 0;
    max-width: 46ch;
}

/* ── Contact block ────────────────────────────────────────────────────────── */
.pe-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.75rem 2.5rem;
    max-width: 52rem;
    margin: 0;
}

.pe-contact dt {
    font-family: var(--pe-font-head);
    font-weight: 500;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pe-signal);
    margin-bottom: 0.4rem;
}

.pe-contact dd {
    margin: 0;
    font-size: 1.0625rem;
}

.pe-contact a {
    color: var(--pe-insulator);
    text-decoration: none;
    border-bottom: 2px solid var(--pe-signal);
    padding-bottom: 1px;
}

.pe-contact a:hover,
.pe-contact a:focus-visible {
    color: var(--pe-signal);
}

.pe-contact address {
    font-style: normal;
    line-height: 1.4;
}

/* ── Sectors ──────────────────────────────────────────────────────────────── */
.pe-sectors {
    font-family: var(--pe-font-head);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: var(--pe-steel);
    margin: 3.25rem 0 0;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.pe-footer {
    flex-shrink: 0;
    border-top: 1px solid rgba(200, 212, 196, 0.28);
    padding: 1.25rem 1.75rem 2rem;
}

.pe-footer p {
    max-width: 62rem;
    margin: 0 auto;
    font-size: 0.8125rem;
    color: var(--pe-steel);
}

@media (max-width: 30rem) {
    .pe-shell { padding-top: 2.25rem; }
    .pe-logo { margin-bottom: 2.5rem; }
    .pe-rule { margin: 2.25rem 0; }
}