/* ==========================================================================
   Automotive ERP (Repair · Trade · Rental) — FRESH bespoke design
   A centered hero with a dark "Live Workshop Board", and numbered
   work-order feature cards — deliberately NOT the split-hero/dashboard-card
   pattern used on the other industry pages.
   Scoped under .au-scope (+ page-only .au-header-bg) so nothing leaks.
   ========================================================================== */
.au-scope {
    --au-ink: #141922;
    --au: #f2661a;            /* automotive orange primary */
    --au-2: #ff8a3d;
    --au-3: #c94e0c;          /* deep burnt orange */
    --au-steel: #64748b;      /* steel-gray secondary */
    --au-dark: #14181f;       /* workshop-board dark base */
    --au-dark-2: #1d2430;
    --au-soft: #fdeee2;
    --au-soft-2: #faf8f5;     /* warm off-white */
    --au-line: #ece9e4;
    --au-muted: #64707d;
    --au-grad: linear-gradient(120deg, #ff8a3d 0%, #f2661a 60%, #c94e0c 100%);
    color: #303a44;
}
.au-scope section { overflow: hidden; }

/* page-only header background so the navbar blends into the hero */
.au-header-bg {
    background:
        radial-gradient(1100px 320px at 88% 130%, #ffe6d3 0%, rgba(255,230,211,0) 70%),
        #faf7f3;
}

/* ---- shared bits ---- */
.au-kicker {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--au-3); background: var(--au-soft);
    padding: .45rem .95rem; border-radius: 2rem; border: 1px solid #f6ddcb;
}
.au-h { font-weight: 800; letter-spacing: -.02em; color: var(--au-ink); line-height: 1.1; }
.au-grad-txt {
    background: var(--au-grad); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.au-lead { color: var(--au-muted); font-size: 1.1rem; line-height: 1.7; }

/* buttons */
.au-btn {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 700;
    padding: .9rem 1.6rem; border-radius: .8rem; border: 0; cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
    text-decoration: none;
}
.au-btn i { transition: transform .25s ease; }
.au-btn:hover i { transform: translate(2px,-2px); }
.au-btn-primary { background: var(--au-grad); color: #fff; box-shadow: 0 .8rem 1.8rem rgba(242,102,26,.34); }
.au-btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 1.2rem 2.4rem rgba(242,102,26,.46); }
.au-btn-ghost { background: #fff; color: var(--au-3); border: 1.5px solid var(--au-line); }
.au-btn-ghost:hover { color: var(--au-3); transform: translateY(-3px); border-color: var(--au); box-shadow: 0 1rem 2rem rgba(242,102,26,.14); }

/* ==========================================================================
   HERO — centered copy + dark "Live Workshop Board"
   ========================================================================== */
.au-hero {
    position: relative;
    background:
        radial-gradient(900px 460px at 82% -10%, #ffe1cb 0%, rgba(255,225,203,0) 60%),
        radial-gradient(760px 420px at 10% 6%, #eef2f7 0%, rgba(238,242,247,0) 55%),
        #faf7f3;
}
.au-hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(20,25,34,.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(20,25,34,.05) 1px, transparent 1px);
    background-size: 44px 44px; -webkit-mask-image: radial-gradient(circle at 50% 20%, #000, transparent 72%);
    mask-image: radial-gradient(circle at 50% 20%, #000, transparent 72%); opacity: .6;
}
.au-hero .container { position: relative; z-index: 2; }
.au-hero__copy { max-width: 820px; margin: 0 auto; text-align: center; }
.au-hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); margin: 1.3rem 0 1.3rem; }
.au-hero__lead { max-width: 640px; margin: 0 auto 2rem; }
.au-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.au-hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.8rem; margin-top: 1.8rem; }
.au-hero__trust span { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--au-ink); }
.au-hero__trust i { color: var(--au); font-size: 1.05rem; }
.au-hero__trust b { color: var(--au-ink); font-weight: 800; }

/* ---- Live Workshop Board (dark) ---- */
.au-board {
    margin-top: 3.4rem; position: relative; z-index: 2;
    background: var(--au-dark);
    border: 1px solid rgba(255,255,255,.08); border-radius: 1.5rem;
    box-shadow: 0 2.6rem 5.5rem rgba(20,24,31,.35);
    padding: 1.5rem; overflow: hidden;
}
.au-board::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(700px 300px at 88% -10%, rgba(242,102,26,.28), transparent 60%),
                radial-gradient(600px 300px at 5% 120%, rgba(100,116,139,.22), transparent 60%);
}
.au-board__head { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; padding: 0 .3rem; }
.au-board__head .lbl { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: #fff; font-size: .98rem; }
.au-board__head .lbl .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: aupulse 1.7s infinite; }
@keyframes aupulse { 70% { box-shadow: 0 0 0 .5rem rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.au-board__head .meta { margin-left: auto; font-size: .78rem; color: #93a0b4; font-weight: 600; }
.au-bays { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.au-bay { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 1.1rem; padding: 1.15rem; transition: transform .3s ease, border-color .3s ease, background .3s ease; }
.au-bay:hover { transform: translateY(-.35rem); border-color: rgba(242,102,26,.45); background: rgba(255,255,255,.06); }
.au-bay__top { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.au-bay__no { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: var(--au-2); background: rgba(242,102,26,.14); border: 1px solid rgba(242,102,26,.3); border-radius: .5rem; padding: .2rem .5rem; }
.au-bay__car { width: 2.1rem; height: 2.1rem; margin-left: auto; border-radius: .55rem; background: rgba(255,255,255,.08); color: #cfd8e6; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.au-bay h6 { margin: 0; color: #fff; font-weight: 800; font-size: .98rem; }
.au-bay .plate { font-size: .72rem; color: #93a0b4; font-weight: 600; letter-spacing: .04em; }
.au-bay .svc { margin: .55rem 0 .7rem; font-size: .8rem; color: #c3ccd9; }
.au-bay__bar { height: .42rem; border-radius: 2rem; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: .7rem; }
.au-bay__bar > i { display: block; height: 100%; border-radius: 2rem; }
.au-bay__bar .p70 { width: 70%; background: var(--au-grad); }
.au-bay__bar .p100 { width: 100%; background: linear-gradient(90deg,#22c55e,#16a34a); }
.au-bay__bar .p35 { width: 35%; background: linear-gradient(90deg,#94a3b8,#64748b); }
.au-bay__foot { display: flex; align-items: center; justify-content: space-between; }
.au-bay__foot .eta { font-size: .72rem; color: #93a0b4; }
.au-bay__st { font-size: .68rem; font-weight: 800; padding: .24rem .6rem; border-radius: 2rem; }
.au-bay__st.svc-in { color: #ffcaa3; background: rgba(242,102,26,.16); }
.au-bay__st.ready { color: #9af0bd; background: rgba(34,197,94,.16); }
.au-bay__st.diag { color: #c7d2e0; background: rgba(148,163,184,.16); }

/* ==========================================================================
   FEATURES — numbered work-order spec cards
   ========================================================================== */
.au-features { background: linear-gradient(180deg, #fff, var(--au-soft-2)); }
.au-head { max-width: 760px; margin: 0 auto 3.2rem; text-align: center; }
.au-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
.au-head p { margin-top: 1rem; }

.au-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.au-card {
    position: relative; background: #fff; border: 1px solid var(--au-line); border-radius: 1.1rem;
    padding: 1.6rem 1.5rem 1.5rem; height: 100%; overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.au-card::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: var(--au-grad); transform: scaleY(0); transform-origin: top; transition: transform .3s ease; }
.au-card:hover { transform: translateY(-.5rem); box-shadow: 0 1.6rem 3.2rem rgba(20,24,31,.12); border-color: transparent; }
.au-card:hover::before { transform: scaleY(1); }
.au-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.au-ico { width: 3.1rem; height: 3.1rem; border-radius: .9rem; background: var(--au-soft); color: var(--au); display: flex; align-items: center; justify-content: center; }
.au-ico img, .au-ico svg { width: 1.65rem; height: 1.65rem; }
/* icons are teal monochrome — recolor to the orange accent */
.au-ico svg [fill]:not([fill="none"]) { fill: currentColor; }
.au-ico svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.au-no { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .95rem; font-weight: 800; color: #d7d2ca; letter-spacing: .02em; }
.au-card h3 { font-size: 1.1rem; font-weight: 800; color: var(--au-ink); margin-bottom: .5rem; }
.au-card p { font-size: .88rem; color: var(--au-muted); margin-bottom: .9rem; line-height: 1.5; }
.au-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.au-ticks li { position: relative; padding-left: 1.5rem; font-size: .84rem; color: #445062; line-height: 1.45; }
.au-ticks li::before {
    content: "\2713"; position: absolute; left: 0; top: 0; font-size: .7rem; font-weight: 700; color: var(--au);
    width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--au-soft);
    display: flex; align-items: center; justify-content: center;
}

/* ==========================================================================
   BUSINESS LINES — Rental · Trade · GEO Fleet Tracking (zig-zag rows)
   ========================================================================== */
.au-lines { }
.au-line + .au-line { margin-top: 4.5rem; }
.au-line h3.au-h { font-size: clamp(1.55rem, 2.6vw, 2.1rem); margin-bottom: .8rem; }
.au-line .au-ticks { margin-top: 1.3rem; gap: .6rem; }
.au-line .au-ticks li { font-size: .92rem; padding-left: 1.65rem; color: #3d4a58; }
.au-line .au-ticks li::before { width: 1.2rem; height: 1.2rem; font-size: .72rem; }

/* generic mini panel (light) */
.au-mini { position: relative; background: #fff; border: 1px solid var(--au-line); border-radius: 1.4rem; box-shadow: 0 1.6rem 4rem rgba(20,24,31,.12); padding: 1.4rem; }
.au-mini__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.au-mini__head .ic { width: 2.4rem; height: 2.4rem; border-radius: .65rem; background: var(--au-soft); color: var(--au); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.au-mini__head h6 { margin: 0; font-weight: 800; color: var(--au-ink); font-size: .96rem; }
.au-mini__head .pill { margin-left: auto; font-size: .72rem; font-weight: 800; color: var(--au-3); background: var(--au-soft); padding: .3rem .65rem; border-radius: 2rem; }

/* status tags */
.au-tag { font-size: .66rem; font-weight: 800; padding: .22rem .55rem; border-radius: 2rem; white-space: nowrap; }
.au-tag.ok { color: #1a8f4c; background: #e5f7ec; }
.au-tag.on { color: var(--au-3); background: var(--au-soft); }
.au-tag.res { color: #a56a00; background: #fbf1db; }
.au-tag.sold { color: #64748b; background: #eef1f5; }

/* rental rows */
.au-rrow { display: flex; align-items: center; gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--au-line); }
.au-rrow:last-of-type { border-bottom: 0; }
.au-rrow .thumb { width: 2.6rem; height: 2.6rem; flex: none; border-radius: .65rem; background: var(--au-soft-2); color: var(--au-steel); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; border: 1px solid var(--au-line); }
.au-rrow h6 { margin: 0; font-size: .9rem; font-weight: 800; color: var(--au-ink); }
.au-rrow .sub { font-size: .72rem; color: var(--au-muted); }
.au-rrow .right { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .28rem; }
.au-rrow .price { font-weight: 800; color: var(--au-ink); font-size: .86rem; }
.au-rrow .price small { color: var(--au-muted); font-weight: 600; font-size: .68rem; }
.au-mini__foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--au-line); display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--au-muted); }
.au-mini__foot b { color: var(--au-ink); }
.au-mini__foot .amt { margin-left: auto; font-weight: 800; color: var(--au-3); font-size: .95rem; }

/* trade listing rows */
.au-lrow { display: flex; align-items: center; gap: .9rem; padding: .85rem 0; border-bottom: 1px solid var(--au-line); }
.au-lrow:last-of-type { border-bottom: 0; }
.au-lrow .car { width: 3.1rem; height: 2.4rem; flex: none; border-radius: .6rem; background: var(--au-grad); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 .4rem .9rem rgba(242,102,26,.3); }
.au-lrow h6 { margin: 0; font-size: .9rem; font-weight: 800; color: var(--au-ink); }
.au-lrow .specs { font-size: .72rem; color: var(--au-muted); }
.au-lrow .right { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .28rem; }
.au-lrow .val { font-weight: 800; color: var(--au-ink); font-size: .95rem; }

/* GEO fleet map (dark) */
.au-map { position: relative; background: var(--au-dark); border: 1px solid rgba(255,255,255,.08); border-radius: 1.4rem; box-shadow: 0 1.8rem 4.4rem rgba(20,24,31,.3); overflow: hidden; min-height: 22rem; padding: 1.2rem; }
.au-map::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 34px 34px; }
.au-map::after { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 260px at 80% -10%, rgba(242,102,26,.22), transparent 60%); }
.au-map__head { position: relative; z-index: 3; display: flex; align-items: center; gap: .5rem; }
.au-map__head .lbl { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: #fff; font-size: .92rem; }
.au-map__head .lbl .dot { width: .5rem; height: .5rem; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: aupulse 1.7s infinite; }
.au-map__head .meta { margin-left: auto; font-size: .74rem; color: #93a0b4; font-weight: 600; }
/* stylised roads */
.au-road { position: absolute; height: 4px; border-radius: 4px; background: rgba(255,255,255,.09); z-index: 1; }
.au-road.r1 { top: 42%; left: -6%; width: 70%; transform: rotate(-13deg); }
.au-road.r2 { top: 30%; right: -10%; width: 62%; transform: rotate(24deg); }
.au-road.r3 { bottom: 20%; left: 8%; width: 84%; transform: rotate(6deg); }
.au-road.live { background: var(--au); box-shadow: 0 0 12px rgba(242,102,26,.6); width: 34%; top: 42%; left: 8%; transform: rotate(-13deg); z-index: 2; }
/* pins */
.au-pin { position: absolute; z-index: 4; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 .3rem .8rem rgba(0,0,0,.5); }
.au-pin.a { background: var(--au); } .au-pin.b { background: #22c55e; } .au-pin.c { background: #64748b; } .au-pin.d { background: var(--au); }
.au-pin.ping::after { content: ""; position: absolute; inset: -.45rem; border-radius: 50%; border: 2px solid rgba(242,102,26,.5); animation: aupulse2 1.8s infinite; }
@keyframes aupulse2 { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
/* selected vehicle callout */
.au-callout { position: absolute; z-index: 5; background: #fff; border-radius: .7rem; padding: .55rem .7rem; box-shadow: 0 .8rem 1.8rem rgba(0,0,0,.35); min-width: 9.5rem; }
.au-callout b { display: block; font-size: .78rem; color: var(--au-ink); font-weight: 800; }
.au-callout span { font-size: .7rem; color: var(--au-muted); }
.au-callout .sp { color: var(--au-3); font-weight: 800; }
/* mini live list */
.au-mlist { position: absolute; z-index: 5; left: 1.2rem; bottom: 1.2rem; right: 1.2rem; display: flex; gap: .6rem; }
.au-mcard { flex: 1; background: rgba(20,24,31,.82); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.1); border-radius: .7rem; padding: .55rem .7rem; }
.au-mcard b { display: block; font-size: .74rem; color: #fff; font-weight: 800; }
.au-mcard span { font-size: .68rem; color: #93a0b4; display: inline-flex; align-items: center; gap: .3rem; }
.au-mcard span .d { width: .45rem; height: .45rem; border-radius: 50%; }
.au-mcard span .d.g { background: #3ddc84; } .au-mcard span .d.o { background: var(--au); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991px) {
    .au-bays { grid-template-columns: 1fr; }
    .au-grid { grid-template-columns: 1fr 1fr; }
    .au-mlist { position: static; margin-top: 1rem; }
    .au-map { min-height: 20rem; }
}
@media (max-width: 767px) {
    .au-grid { grid-template-columns: 1fr; }
    .au-board { padding: 1.1rem; }
}

/* legacy contact textarea marker kept for the untouched lower sections */
.gen-1 { height: 150px; }