/* /Components/BodyInjury.razor.rz.scp.css */
/* BodyDiagram.razor.css */

.bd-wrap[b-vsiwbeufzl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    width: 100%;
}

/* ── Toggle ── */
.bd-toggle[b-vsiwbeufzl] {
    display: flex;
    border: 2px solid var(--brand);
    border-radius: 6px;
    overflow: hidden;
    width: 180px;
}

    .bd-toggle button[b-vsiwbeufzl] {
        flex: 1;
        padding: .4rem 0;
        background: transparent;
        border: none;
        color: var(--brand);
        font-family: var(--font-mono);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .12em;
        cursor: pointer;
        transition: background .18s, color .18s;
    }

        .bd-toggle button + button[b-vsiwbeufzl] {
            border-left: 2px solid var(--brand);
        }

.bd-toggle-active[b-vsiwbeufzl] {
    background: var(--brand) !important;
    color: var(--on-brand) !important;
}

/* ── SVG container ── */
.bd-svg-container[b-vsiwbeufzl] {
    position: relative;
    width: 100%;
    max-width: 230px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem .5rem;
    display: flex;
    justify-content: center;
}

.bd-svg[b-vsiwbeufzl] {
    width: 100%;
    display: block;
}

/* ── Body parts default ── */
.bp rect[b-vsiwbeufzl],
.bp ellipse[b-vsiwbeufzl] {
    fill: var(--body-fill);
    stroke: var(--body-stroke);
    stroke-width: 1.5;
    transition: fill .15s, stroke .15s, filter .15s;
    cursor: pointer;
}

.bpl[b-vsiwbeufzl] {
    fill: var(--text-muted);
    font-size: 8.5px;
    pointer-events: none;
    user-select: none;
}

.bpl-xs[b-vsiwbeufzl] {
    font-size: 7px;
}

/* ── Hovered ── */
.bp-hovered rect[b-vsiwbeufzl],
.bp-hovered ellipse[b-vsiwbeufzl] {
    fill: var(--brand-hover-fill);
    stroke: var(--brand);
    filter: drop-shadow(0 0 4px var(--brand-glow));
}

/* ── Selected ── */
.bp-selected rect[b-vsiwbeufzl],
.bp-selected ellipse[b-vsiwbeufzl] {
    fill: var(--brand-selected-fill);
    stroke: var(--brand);
    stroke-width: 2.2;
    filter: drop-shadow(0 0 6px var(--brand-glow));
}

.bp-selected .bpl[b-vsiwbeufzl] {
    fill: var(--brand-light);
    font-weight: 700;
}

/* ── Tooltip ── */
.bd-tooltip[b-vsiwbeufzl] {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translateX(-50%);
    background: #5d720c;
    border: 1px solid var(--brand);
    color: white;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .28rem .7rem;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
    font-family: var(--font-mono);
}

/* ── Count badge ── */
.bd-selected-count[b-vsiwbeufzl] {
    font-size: .78rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    letter-spacing: .04em;
}

    .bd-selected-count span[b-vsiwbeufzl] {
        color: var(--brand);
        font-weight: 700;
        font-size: .9rem;
    }
/* /Components/Incidents/IncidentReportEditor.razor.rz.scp.css */
/* InjuryReportWizard.razor.css
   Design direction: Industrial field-report — warm parchment base,
   #5d720c olive-green authority, mono typography for data, generous structure.
   =========================================================================== */

/* ── Global tokens (cascade into BodyDiagram.razor.css) ── */
.irw-shell[b-gmmskxgaze] {
    /* Brand */
    --brand: #5d720c;
    --brand-dark: #4a5c09;
    --brand-light: #8aaa16;
    --brand-glow: rgba(93,114,12,.35);
    --brand-hover-fill: rgba(93,114,12,.18);
    --brand-selected-fill: rgba(93,114,12,.28);
    --on-brand: #fafaf6;
    /* Neutrals — warm parchment light theme */
    --bg: #f4f1eb;
    --surface: #faf8f3;
    --surface-2: #eeeadf;
    --border: #d4cfc3;
    --border-dark: #b8b3a6;
    /* Body diagram fills */
    --body-fill: #e4e0d5;
    --body-stroke: #c2bdb0;
    --tooltip-bg: rgba(30,28,22,.9);
    /* Text */
    --text: #1c1a15;
    --text-mid: #4a4640;
    --text-muted: #8a857c;
    /* Severity colors passed through CSS vars */
    /* Typography */
    --font-display: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
    --font-mono: 'Montserrat', 'Segoe UI', Roboto, Arial, sans-serif;
    /* Shape */
    --radius: 8px;
    --radius-lg: 12px;
    /* ── Shell layout ── */
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}



/* ══════════════════════════════════════════════════════
   STEP RAIL
══════════════════════════════════════════════════════ */
.irw-rail[b-gmmskxgaze] {
    background:    var(--surface);
    border-bottom: 1px solid var(--border);
    padding:       1rem 2rem;
    display:       flex;
    align-items:   center;
    gap:           0;
    overflow-x:    auto;
    max-width:     100%;
}

.irw-step-btn[b-gmmskxgaze] {
    display:         flex;
    align-items:     center;
    gap:             .55rem;
    background:      transparent;
    border:          none;
    padding:         .35rem .5rem;
    cursor:          pointer;
    opacity:         .45;
    transition:      opacity .2s;
    white-space:     nowrap;
    flex-shrink:     0;
}

.irw-step-btn:not(:disabled)[b-gmmskxgaze] { cursor: pointer; }
.irw-step-btn:disabled[b-gmmskxgaze]        { cursor: default; }

.irw-step-active[b-gmmskxgaze],
.irw-step-done[b-gmmskxgaze] {
    opacity: 1 !important;
}

.irw-step-num[b-gmmskxgaze] {
    width:           26px;
    height:          26px;
    border-radius:   50%;
    border:          2px solid var(--border-dark);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-mono);
    font-size:       .75rem;
    font-weight:     700;
    flex-shrink:     0;
    color:           var(--text-muted);
    transition:      background .2s, border-color .2s, color .2s;
}

.irw-step-active .irw-step-num[b-gmmskxgaze] {
    background:   var(--brand);
    border-color: var(--brand);
    color:        white;
}

.irw-step-done .irw-step-num[b-gmmskxgaze] {
    background:   var(--brand);
    border-color: var(--brand);
    color:        white;
}

.irw-step-done .irw-step-num svg[b-gmmskxgaze] {
    width:  13px;
    height: 13px;
    stroke: white;
}

.irw-step-label[b-gmmskxgaze] {
    font-family:    var(--font-mono);
    font-size:      .72rem;
    letter-spacing: .08em;
    font-weight:    700;
    color:          var(--text-mid);
    text-transform: uppercase;
}

.irw-step-active .irw-step-label[b-gmmskxgaze] { color: var(--brand); }

.irw-step-connector[b-gmmskxgaze] {
    flex:              1;
    min-width:         20px;
    height:            2px;
    background:        var(--border);
    margin:            0 .25rem;
    transition:        background .3s;
}

.irw-connector-done[b-gmmskxgaze] { background: var(--brand); }

/* ══════════════════════════════════════════════════════
   BODY (form area)
══════════════════════════════════════════════════════ */

.irw-body[b-gmmskxgaze] {
    flex: 1;
    overflow-y: auto;
    /* full width scroll area */
    width: 100%;
    box-sizing: border-box;
    /* keep padding */
    padding: 2rem;
}
.irw-body-inner[b-gmmskxgaze] {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}
.irw-rail[b-gmmskxgaze],
.irw-footer[b-gmmskxgaze] {
    flex-shrink: 0;
}
/* Step content entrance animation */
.irw-step-content[b-gmmskxgaze] {
    animation: stepIn-b-gmmskxgaze .25s ease both;
}

@keyframes stepIn-b-gmmskxgaze {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* ── Step heading ── */
.irw-step-heading[b-gmmskxgaze] {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid var(--border);
}

.irw-step-tag[b-gmmskxgaze] {
    font-family:    var(--font-mono);
    font-size:      .65rem;
    letter-spacing: .2em;
    color:          var(--brand);
    font-weight:    700;
    display:        block;
    margin-bottom:  .4rem;
}

.irw-step-heading h2[b-gmmskxgaze] {
    font-family:    var(--font-display);
    font-size:      1.6rem;
    font-weight:    700;
    margin:         0 0 .4rem;
    color:          var(--text);
    letter-spacing: -.02em;
}

.irw-step-heading p[b-gmmskxgaze] {
    color:     var(--text-muted);
    margin:    0;
    font-size: .9rem;
}

.irw-form-grid[b-gmmskxgaze] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}
[b-gmmskxgaze] .mud-input-control {
    width: 100% !important;
    min-width: 0 !important;
    background-color: var(--surface);
}
@media (max-width: 700px) {
    .irw-form-grid[b-gmmskxgaze] {
        grid-template-columns: 1fr !important;
    }
}
/* full width fields if needed */
.irw-field-full[b-gmmskxgaze] {
    grid-column: 1 / -1;
}

.irw-label[b-gmmskxgaze] {
    margin-bottom: 5px;
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color:          var(--text-mid);
    font-family:    var(--font-mono);
}

.req[b-gmmskxgaze] { color: #c0392b; }

.irw-spec-divider[b-gmmskxgaze] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 1.5rem;
}

.irw-spec-divider-line[b-gmmskxgaze] {
    flex: 1;
    height: 1px;
    background: var(--border);
}

.irw-spec-divider-label[b-gmmskxgaze] {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(93,114,12,.08);
    border: 1px solid rgba(93,114,12,.18);
    white-space: nowrap;
}

/* ── Chip group ── */
.irw-chip-group[b-gmmskxgaze] {
    display:   flex;
    flex-wrap: wrap;
    gap:       .45rem;
}

.irw-chip[b-gmmskxgaze] {
    padding:       .35rem .8rem;
    border:        1.5px solid var(--border-dark);
    border-radius: 99px;
    background:    var(--surface);
    color:         var(--text-mid);
    font-size:     0.9rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all .18s;
    font-family:   var(--font-body);
}
.irw-chip:disabled[b-gmmskxgaze] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    filter: grayscale(0.4);
}
.irw-chip:hover[b-gmmskxgaze] {
    border-color: var(--brand);
    color:        var(--border-dark);
}

.irw-chip-active[b-gmmskxgaze] {
    background:   var(--brand);
    border-color: var(--brand);
    color:        white;
}

/* ── Radio group ── */
.irw-radio-group[b-gmmskxgaze] {
    display: flex;
    gap:     1.25rem;
}

.irw-radio[b-gmmskxgaze] {
    display:     flex;
    align-items: center;
    gap:         .45rem;
    cursor:      pointer;
    font-weight: 600;
    font-size:   .9rem;
}

.irw-radio input[type="radio"][b-gmmskxgaze] {
    accent-color: var(--brand);
    width:        16px;
    height:       16px;
    cursor:       pointer;
}

/* ══════════════════════════════════════════════════════
   STEP 3 · Injury layout
══════════════════════════════════════════════════════ */
.irw-injury-layout[b-gmmskxgaze] {
    display:     flex;
    gap:         2rem;
    align-items: flex-start;
    flex-wrap:   wrap;
}

.irw-diagram-col[b-gmmskxgaze] {
    flex:      0 0 240px;
    min-width: 200px;
}

.irw-injury-details-col[b-gmmskxgaze] {
    flex:           1 1 320px;
    display:        flex;
    flex-direction: column;
    gap:            1.25rem;
}

.irw-empty-parts[b-gmmskxgaze] {
    color:       var(--text-muted);
    font-style:  italic;
    font-size:   .875rem;
    padding:     .65rem .85rem;
    background:  var(--surface-2);
    border:      1.5px dashed var(--border-dark);
    border-radius: var(--radius);
}

.irw-parts-list[b-gmmskxgaze] {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            .4rem;
}
.irw-part-name[b-gmmskxgaze] {
    flex: 1; /* Pushes the X button to the far right */
}

.irw-part-remove[b-gmmskxgaze] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: .2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all .2s;
}

.irw-part-remove:hover[b-gmmskxgaze] {
    color: #ef4444; /* Red color on hover to indicate destructive action */
    background: rgba(239, 68, 68, 0.1);
}

.irw-part-remove svg[b-gmmskxgaze] {
    width: 14px;
    height: 14px;
}
.irw-parts-item[b-gmmskxgaze] {
    display:       flex;
    align-items:   center;
    gap:           .6rem;
    font-size:     .875rem;
    font-weight:   500;
    padding:       .45rem .75rem;
    background:    rgba(93,114,12,.08);
    border:        1px solid rgba(93,114,12,.25);
    border-radius: 6px;
}

.irw-parts-dot[b-gmmskxgaze] {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    background:   var(--brand);
    flex-shrink:  0;
    box-shadow:   0 0 5px var(--brand-glow);
}

/* ── Severity ── */
.irw-severity-row[b-gmmskxgaze] {
    display: flex;
    gap:     .5rem;
}

.irw-sev-btn[b-gmmskxgaze] {
    flex:          1;
    padding:       .45rem .25rem;
    border:        1.5px solid var(--border-dark);
    border-radius: var(--radius);
    background:    transparent;
    color:         var(--text-muted);
    font-size:     .78rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    all .18s;
    font-family:   var(--font-mono);
    letter-spacing: .04em;
}
.irw-gravity-scale[b-gmmskxgaze] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
}

.irw-gravity-card[b-gmmskxgaze] {
    border: 2px solid var(--gravity-color);
    background: var(--surface);
    border-radius: var(--radius);
    padding: .9rem .75rem;
    cursor: pointer;
    transition: all .18s ease;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-height: 92px;
    text-align: left;
}

.irw-gravity-card:hover[b-gmmskxgaze] {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--gravity-color) 8%, white);
}

.irw-gravity-active[b-gmmskxgaze] {
    background: color-mix(in srgb, var(--gravity-color) 16%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gravity-color) 25%, transparent);
}

.irw-gravity-number[b-gmmskxgaze] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gravity-color);
    font-family: var(--font-display);
}

.irw-gravity-text[b-gmmskxgaze] {
    font-size: .78rem;
    line-height: 1.25;
    color: var(--text-mid);
    font-weight: 600;
}

.irw-sev-btn:hover[b-gmmskxgaze] { border-color: var(--sev-col, #888); color: var(--sev-col, #888); }

.irw-sev-active[b-gmmskxgaze] {
    background:   var(--sev-col, #888);
    border-color: var(--sev-col, #888);
    color:        white;
}

/* ══════════════════════════════════════════════════════
   STEP 4 · Response placeholder
══════════════════════════════════════════════════════ */
.irw-placeholder-block[b-gmmskxgaze] {
    margin-top:    1.5rem;
    border:        2px dashed var(--border-dark);
    border-radius: var(--radius-lg);
    padding:       2rem;
}

.irw-placeholder-inner[b-gmmskxgaze] {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .75rem;
    color:          var(--text-muted);
    text-align:     center;
    font-size:      .875rem;
}

.irw-placeholder-inner svg[b-gmmskxgaze] {
    width:   36px;
    height:  36px;
    opacity: .4;
    stroke:  var(--text-muted);
}

/* ══════════════════════════════════════════════════════
   STEP 5 · Review
══════════════════════════════════════════════════════ */
.irw-review-grid[b-gmmskxgaze] {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1.25rem;
    margin-bottom:         1.5rem;
}

.irw-review-card[b-gmmskxgaze] {
    background:    var(--surface);
    border:        1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       1.25rem;
}

.irw-review-card-title[b-gmmskxgaze] {
    font-family:    var(--font-mono);
    font-size:      .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          var(--brand);
    font-weight:    700;
    margin-bottom:  .85rem;
}

.irw-review-card dl[b-gmmskxgaze] {
    display:               grid;
    grid-template-columns: auto 1fr;
    gap:                   .35rem .75rem;
    margin:                0;
}

.irw-review-card dt[b-gmmskxgaze] {
    color:       var(--text-muted);
    font-size:   .78rem;
    font-weight: 700;
    font-family: var(--font-mono);
    white-space: nowrap;
    align-self:  start;
}

.irw-review-card dd[b-gmmskxgaze] {
    margin:      0;
    font-size:   .875rem;
    color:       var(--text);
    font-weight: 500;
    word-break:  break-word;
}

.dd-wrap[b-gmmskxgaze] {
    white-space: pre-wrap;
    font-size:   .82rem !important;
    color:       var(--text-mid) !important;
}

.irw-validation-error[b-gmmskxgaze] {
    background:    rgba(192,57,43,.1);
    border:        1.5px solid rgba(192,57,43,.4);
    border-radius: var(--radius);
    color:         #c0392b;
    font-size:     .875rem;
    font-weight:   600;
    padding:       .75rem 1rem;
    margin-bottom: 1rem;
}

.irw-submit-row[b-gmmskxgaze] {
    display:         flex;
    justify-content: flex-end;
}

/* ── Success ── */
.irw-success[b-gmmskxgaze] {
    text-align:   center;
    padding:      3rem 1rem;
    display:      flex;
    flex-direction: column;
    align-items:  center;
    gap:          .75rem;
}

.irw-success-icon[b-gmmskxgaze] {
    width:         64px;
    height:        64px;
    border-radius: 50%;
    background:    var(--brand);
    display:       flex;
    align-items:   center;
    justify-content: center;
    box-shadow:    0 0 24px var(--brand-glow);
}

.irw-success-icon svg[b-gmmskxgaze] {
    width:  30px;
    height: 30px;
    stroke: white;
}

.irw-success h3[b-gmmskxgaze] {
    font-family: var(--font-display);
    font-size:   1.6rem;
    margin:      0;
}

.irw-success p[b-gmmskxgaze] {
    color:  var(--text-muted);
    margin: 0;
}

/* ══════════════════════════════════════════════════════
   FOOTER NAV
══════════════════════════════════════════════════════ */
.irw-footer[b-gmmskxgaze] {
    background:     var(--surface);
    border-top:     1.5px solid var(--border);
    padding:        1rem 2rem;
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    gap:            1rem;
}

.irw-progress-dots[b-gmmskxgaze] {
    display: flex;
    gap:     .45rem;
}

.irw-dot[b-gmmskxgaze] {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--border-dark);
    transition:    background .2s, transform .2s;
}

.irw-dot-done[b-gmmskxgaze]   { background: var(--brand); }
.irw-dot-active[b-gmmskxgaze] { background: var(--brand); transform: scale(1.4); }

/* ══════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════ */
.irw-btn-primary[b-gmmskxgaze] {
    display:        inline-flex;
    align-items:    center;
    gap:            .5rem;
    background:     var(--brand);
    color:          white;
    border:         none;
    border-radius:  var(--radius);
    padding:        .6rem 1.4rem;
    font-size:      .875rem;
    font-weight:    700;
    cursor:         pointer;
    font-family:    var(--font-body);
    letter-spacing: .02em;
    transition:     background .18s, box-shadow .18s;
    box-shadow:     0 2px 10px var(--brand-glow);
}

.irw-btn-primary:hover[b-gmmskxgaze] {
    background:  var(--brand-dark);
    box-shadow:  0 4px 18px var(--brand-glow);
}

.irw-btn-primary svg[b-gmmskxgaze] {
    width:  16px;
    height: 16px;
}

.irw-btn-lg[b-gmmskxgaze] {
    padding:   .75rem 2rem;
    font-size: 1rem;
}

.irw-btn-secondary[b-gmmskxgaze] {
    background:    transparent;
    border:        1.5px solid var(--border-dark);
    border-radius: var(--radius);
    color:         var(--text-mid);
    padding:       .6rem 1.25rem;
    font-size:     .875rem;
    font-weight:   600;
    cursor:        pointer;
    font-family:   var(--font-body);
    transition:    border-color .18s, color .18s;
}

.irw-btn-secondary:hover[b-gmmskxgaze] {
    border-color: var(--brand);
    color:        var(--brand);
}

.irw-btn-secondary:disabled[b-gmmskxgaze] {
    opacity: .35;
    cursor:  default;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .irw-grid-2[b-gmmskxgaze]            { grid-template-columns: 1fr; }
    .irw-review-grid[b-gmmskxgaze]       { grid-template-columns: 1fr; }
    .irw-injury-layout[b-gmmskxgaze]     { flex-direction: column; }
    .irw-diagram-col[b-gmmskxgaze]       { width: 100%; flex: unset; }
    .irw-body[b-gmmskxgaze]              { padding: 1.25rem 1rem; }
    .irw-footer[b-gmmskxgaze]            { padding: .75rem 1rem; }
    .irw-step-label[b-gmmskxgaze]        { display: none; }
    .irw-header[b-gmmskxgaze]            { padding: 0 1rem; }
    .irw-rail[b-gmmskxgaze]              { padding: .75rem 1rem; }
}
/* /Pages/Incident.razor.rz.scp.css */
body[b-ir0shvivap] {
}
/* /Pages/IncidentHome.razor.rz.scp.css */
@ :root {
    --primary: #5d720c;
    --primary-dark: #4a5a0a;
    --secondary: #005e9c;
    --dark: #0f172a;
    --light: #f8fafc;
}

.hero[b-m709lpktej] {
    padding: 45px 6%;
    background-color: #faf8f3;
}

.hero-content[b-m709lpktej] {
    gap: 35px;
}

.hero-logo[b-m709lpktej] {
    max-width: 150px;
    margin-bottom: 20px;
}

.hero-badge[b-m709lpktej] {
    margin-bottom: 15px;
    padding: 8px 16px;
}

.hero h1[b-m709lpktej] {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: 15px;
    color: #5d720c;
}
.hero h1:focus[b-m709lpktej]{
    outline:none;
}

.hero-subtitle[b-m709lpktej] {
    font-size: 1.15rem;
    line-height: 1.5;
    margin-bottom: 25px;
}


/* Incident categories */
.types-grid[b-m709lpktej] {
    gap: 16px;
}

.type-card[b-m709lpktej] {
    padding: 25px 20px;
    border-radius: 18px;
}

    .type-card i[b-m709lpktej] {
        font-size: 2.8rem;
        margin-bottom: 12px;
    }

    .type-card h3[b-m709lpktej] {
        margin-bottom: 10px;
        font-size: 1.3rem;
    }

    .type-card p[b-m709lpktej] {
        line-height: 1.5;
    }


.primary-btn[b-m709lpktej],
.secondary-btn[b-m709lpktej] {
    text-decoration: none;
    padding: 18px 28px;
    border-radius: 18px;
    font-weight: 700;
    transition: 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.primary-btn[b-m709lpktej] {
    /* Using explicit hex codes to prevent Blazor scoping issues */
    background: linear-gradient(135deg, #5d720c, #4a5a0a);
    color: white;
}

.secondary-btn[b-m709lpktej] {
    background: linear-gradient(135deg, #005e9c, #003f6a);
    color: white;
}

    .primary-btn:hover[b-m709lpktej],
    .secondary-btn:hover[b-m709lpktej] {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);
        color: white; /* Ensure it stays white on hover */
    }

.screen-card[b-m709lpktej] {
    background: white;
    width: 100%;
    max-width: 450px;
    border-radius: 28px;
    padding: 35px;
    box-shadow: 0 20px 50px rgba(93, 114, 12, 0.08); /* Brand tinted shadow */
    border-top: 5px solid #5d720c; /* Added brand color accent at the top */
}

.screen-header[b-m709lpktej] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #5d720c; /* Brand color */
}

    .screen-header i[b-m709lpktej] {
        color: #5d720c;
        font-size: 1.8rem;
    }

.screen-lines[b-m709lpktej] {
    margin: 35px 0;
}

    .screen-lines div[b-m709lpktej] {
        height: 12px;
        background: #e2e8f0;
        border-radius: 999px;
        margin-bottom: 14px;
    }

        .screen-lines div:nth-child(1)[b-m709lpktej] {
            width: 90%;
        }

        .screen-lines div:nth-child(2)[b-m709lpktej] {
            width: 75%;
        }

        .screen-lines div:nth-child(3)[b-m709lpktej] {
            width: 60%;
        }

.screen-card button[b-m709lpktej] {
    border: none;
    /* Hardcoded gradient to fix white button issue */
    background: linear-gradient(135deg, #5d720c, #4a5a0a);
    color: white;
    padding: 16px 24px;
    border-radius: 14px;
    font-weight: bold;
    width: 100%;
}

    .screen-card button:hover[b-m709lpktej] {
        color: white;
    }

.types-section[b-m709lpktej] {
    padding: 90px 8%;
    background: #faf8f3;
}

.section-title[b-m709lpktej] {
    text-align: center;
    margin-bottom: 50px;
}

    .section-title h2[b-m709lpktej] {
        font-size: 2.7rem;
        color: #5d720c; /* Brand color */
    }

.section-logo[b-m709lpktej] {
    display: block;
    margin: 0 auto 20px auto;
    height: 60px;
}

.types-grid[b-m709lpktej] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}

.type-card[b-m709lpktej] {
    background: white;
    padding: 35px 25px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transition: 0.25s ease;
    border-bottom: 3px solid transparent;
}

    .type-card:hover[b-m709lpktej] {
        transform: translateY(-6px);
        border-bottom-color: #5d720c;
    }

    .type-card i[b-m709lpktej] {
        font-size: 3.4rem;
        margin-bottom: 18px;
    }

.spill i[b-m709lpktej] {
    color: #06b6d4;
}

.cyber i[b-m709lpktej] {
    color: cornflowerblue;
}

.material i[b-m709lpktej] {
    color: #5d720c;
}

.incident i[b-m709lpktej] {
    color: darkorange;
}

.safety i[b-m709lpktej] {
    color: #ef4444;
}

.type-card h3[b-m709lpktej] {
    margin-bottom: 16px;
    font-size: 1.5rem;
    color: #5d720c; /* Set card titles to brand color */
}

.type-card p[b-m709lpktej] {
    line-height: 1.7;
    color: #475569;
}

.cta-section[b-m709lpktej] {
    padding: 80px 8%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
    background: #faf8f3;
}

.cta-card[b-m709lpktej] {
    border-radius: 28px;
    padding: 35px;
    color: white;
    display: flex;
    align-items: center;
    gap: 25px;
}

.incident-card[b-m709lpktej] {
    background: linear-gradient(135deg, #5d720c, #4a5a0a);
}

.cta-icon i[b-m709lpktej] {
    font-size: 3rem;
}

.cta-text h2[b-m709lpktej] {
    margin-bottom: 10px;
    font-size: 2rem;
}

.cta-card a[b-m709lpktej] {
    margin-left: auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    flex-shrink: 0;
    background: white;
    color: #5d720c; /* Arrow inside the circle will be brand color */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.4rem;
    transition: 0.2s;
}

    .cta-card a:hover[b-m709lpktej] {
        transform: scale(1.1);
    }

@media (max-width: 768px) {

    .hero[b-m709lpktej] {
        padding: 35px 16px 20px;
    }

    .hero-content[b-m709lpktej] {
        display: block;
    }

    .hero-left[b-m709lpktej] {
        min-width: unset;
        text-align: center;
    }

    .hero-logo[b-m709lpktej] {
        max-width: 150px;
        margin: 0 auto 20px;
    }

    .hero-badge[b-m709lpktej] {
        font-size: 0.85rem;
        padding: 8px 14px;
        margin-bottom: 20px;
    }

    .hero h1[b-m709lpktej] {
        font-size: 2.4rem;
        line-height: 1.05;
        margin-bottom: 18px;
    }

    .hero-subtitle[b-m709lpktej] {
        font-size: 1.05rem;
        line-height: 1.5;
        margin: 0 auto 30px;
        max-width: 350px;
    }


    /* Incident type cards */
    .types-grid[b-m709lpktej] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .type-card[b-m709lpktej] {
        padding: 24px 20px;
        border-radius: 18px;
        display: grid;
        grid-template-columns: 55px 1fr;
        grid-template-areas:
            "icon title"
            "icon text";
        text-align: left;
        align-items: center;
    }

        .type-card i[b-m709lpktej] {
            grid-area: icon;
            font-size: 2.5rem;
            margin: 0;
        }

        .type-card h3[b-m709lpktej] {
            grid-area: title;
            font-size: 1.2rem;
            margin: 0 0 5px;
        }

        .type-card p[b-m709lpktej] {
            grid-area: text;
            font-size: 0.9rem;
            line-height: 1.4;
            margin: 0;
        }


    /* CTA */
    .cta-section[b-m709lpktej] {
        padding: 30px 16px 50px;
    }

    .cta-card[b-m709lpktej] {
        padding: 25px 20px;
        border-radius: 22px;
        display: grid;
        grid-template-columns: 50px 1fr;
        grid-template-areas:
            "icon text"
            "button button";
        gap: 15px;
    }

    .cta-icon[b-m709lpktej] {
        grid-area: icon;
    }

        .cta-icon i[b-m709lpktej] {
            font-size: 2.3rem;
        }

    .cta-text[b-m709lpktej] {
        grid-area: text;
    }

        .cta-text h2[b-m709lpktej] {
            font-size: 1.4rem;
            margin-bottom: 5px;
        }

        .cta-text p[b-m709lpktej] {
            font-size: 0.95rem;
            margin: 0;
        }

    .cta-card a[b-m709lpktej] {
        grid-area: button;
        width: 100%;
        height: 48px;
        border-radius: 14px;
        margin: 10px 0 0;
        font-size: 1.2rem;
    }
}