.citizen-report-page {
    color: #2f211b;
    background: #fbf6f0
}

.report-hero {
    position: relative;
    overflow: hidden;
    padding: 3.2rem 0;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(242, 147, 72, .25), transparent 27%),
        linear-gradient(125deg, #4c1512, #84271d 62%, #40110f)
}

.report-hero::after {
    content: "";
    position: absolute;
    right: -130px;
    bottom: -210px;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(255, 214, 169, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 60px rgba(255, 214, 169, .04), 0 0 0 120px rgba(255, 214, 169, .025)
}

.report-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
    align-items: center;
    gap: 3rem
}

.report-kicker {
    display: block;
    margin-bottom: .55rem;
    color: #ffb47a;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.report-hero h1 {
    max-width: 720px;
    margin: 0;
    color: #fff;
    font-family: "Marcellus", Georgia, serif;
    font-size: clamp(2.35rem, 4vw, 4.2rem);
    font-weight: 400;
    line-height: 1.05
}

.report-hero h1 em {
    color: #ffb36e;
    font-style: normal
}

.report-hero p {
    max-width: 680px;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, .78);
    line-height: 1.7
}

.report-process {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1.15rem;
    border: 1px solid rgba(255, 222, 189, .24);
    border-radius: 14px;
    background: rgba(255, 255, 255, .09);
    backdrop-filter: blur(5px)
}

.report-process span {
    display: grid;
    justify-items: center;
    gap: .35rem;
    color: rgba(255, 255, 255, .86);
    text-align: center;
    font-size: .72rem;
    font-weight: 700
}

.report-process b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #621b16;
    border-radius: 50%;
    background: #ffd7ad
}

.report-process>i {
    color: #f2a15f
}

.report-form-section {
    padding: 3.25rem 0 4.5rem
}

.citizen-report-form {
    display: grid;
    gap: 1.25rem;
    max-width: 1120px;
    margin: 0 auto
}

.report-honeypot {
    position: absolute !important;
    left: -10000px !important
}

.report-success {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    max-width: 1120px;
    margin: 0 auto 1.5rem;
    padding: 1.25rem;
    color: #19563c;
    border: 1px solid #a7d7bd;
    border-radius: 15px;
    background: #f2fbf5
}

.report-success>span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: #fff;
    border-radius: 50%;
    background: #267754;
    font-size: 1.65rem
}

.report-success small {
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.report-success h2 {
    margin: .15rem 0;
    color: #174c36;
    font-size: 1.35rem
}

.report-success p {
    margin: 0;
    color: #4e6e60;
    font-size: .86rem
}

.report-success>a {
    padding: .65rem .85rem;
    color: #fff;
    border-radius: 6px;
    background: #267754;
    font-size: .78rem;
    font-weight: 800
}

.report-error-summary {
    display: grid;
    max-width: 1120px;
    margin: 0 auto 1rem
}

.report-type-chooser {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
    margin: 0;
    padding: 0;
    border: 0
}

.report-type-chooser legend {
    grid-column: 1 / -1;
    margin-bottom: .2rem;
    color: #5b1a16;
    font-family: "Marcellus", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700
}

.report-type-chooser legend span {
    color: #c9481a
}

.report-type-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    overflow: hidden;
    border: 2px solid #eadbd0;
    border-radius: 13px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease
}

.report-type-card:hover {
    transform: translateY(-2px)
}

.report-type-card input {
    position: absolute;
    opacity: 0
}

.type-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 1.25rem
}

.lost-type .type-icon {
    color: #a52c22;
    background: #fae5df
}

.found-type .type-icon {
    color: #217552;
    background: #e4f4eb
}

.report-type-card strong,
.report-type-card small {
    display: block
}

.report-type-card strong {
    color: #3a211b;
    font-size: 1rem
}

.report-type-card small {
    margin-top: .12rem;
    color: #7a6860;
    font-size: .76rem
}

.type-check {
    color: #d5cbc4;
    font-size: 1.2rem
}

.lost-type:has(input:checked) {
    border-color: #b53a2b;
    box-shadow: 0 8px 24px rgba(151, 44, 29, .1)
}

.found-type:has(input:checked) {
    border-color: #287957;
    box-shadow: 0 8px 24px rgba(35, 112, 78, .1)
}

.report-type-card:has(input:checked) .type-check {
    color: currentColor
}

.report-form-card {
    overflow: hidden;
    border: 1px solid #e9d9cd;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 11px 30px rgba(68, 31, 16, .06)
}

.report-form-card>header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1.2rem;
    border-bottom: 1px solid #eee0d6;
    background: linear-gradient(90deg, #fff7ef, #fff)
}

.report-form-card>header>span {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(145deg, #83261e, #cf4e19);
    font-size: 1.1rem
}

.report-form-card header small {
    color: #d1511c;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.report-form-card h2 {
    margin: .05rem 0;
    color: #5e1b17;
    font-size: 1.18rem
}

.report-form-card header p {
    margin: 0;
    color: #7d6a60;
    font-size: .75rem
}

.report-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.2rem
}

.report-fields.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.report-fields label,
.report-fields label>span {
    display: block
}

.report-fields label>span {
    margin-bottom: .38rem;
    color: #4b3028;
    font-size: .78rem;
    font-weight: 800
}

.report-fields .wide-two {
    grid-column: span 2
}

.report-fields .full-width {
    grid-column: 1 / -1
}

.report-fields .form-control,
.report-fields .form-select {
    min-height: 45px;
    border-color: #dfcfc4;
    border-radius: 7px;
    color: #32231d;
    font-size: .86rem
}

.report-fields textarea.form-control {
    min-height: 105px;
    resize: vertical
}

.report-fields .form-control:focus,
.report-fields .form-select:focus {
    border-color: #c9511d;
    box-shadow: 0 0 0 3px rgba(201, 81, 29, .11)
}

.report-fields em,
.report-field-error {
    display: block;
    margin-top: .3rem;
    color: #b4232b;
    font-size: .72rem;
    font-style: normal;
    font-weight: 700
}

.report-photo-card {
    padding-bottom: 1.2rem
}

.report-photo-upload {
    display: grid;
    justify-items: center;
    gap: .25rem;
    margin: 1.2rem;
    padding: 1.5rem;
    color: #704536;
    border: 2px dashed #d9b9a5;
    border-radius: 12px;
    background: #fffaf6;
    text-align: center;
    cursor: pointer
}

.report-photo-upload:hover {
    border-color: #c9511d;
    background: #fff5ed
}

.report-photo-upload>i {
    color: #c9511d;
    font-size: 2rem
}

.report-photo-upload span {
    color: #8b756a;
    font-size: .72rem
}

.report-photo-upload input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

.report-photo-card>.report-field-error {
    margin: -.8rem 1.2rem 0
}

.report-consent {
    padding: 1rem 1.15rem;
    border: 1px solid #e6d4c7;
    border-radius: 12px;
    background: #fff
}

.report-consent label {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 0;
    cursor: pointer
}

.report-consent input {
    width: 18px;
    height: 18px;
    margin-top: .15rem;
    accent-color: #a4371e
}

.report-consent strong,
.report-consent small {
    display: block
}

.report-consent strong {
    color: #4e251e;
    font-size: .83rem
}

.report-consent small {
    margin-top: .18rem;
    color: #79675e;
    font-size: .73rem;
    line-height: 1.45
}

.report-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: .2rem
}

.report-submit-row p {
    margin: 0;
    color: #716159;
    font-size: .76rem
}

.report-submit-row button {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .7rem 1.15rem;
    color: #fff;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, #9d301f, #d75418);
    box-shadow: 0 9px 22px rgba(141, 43, 21, .2);
    font-size: .83rem;
    font-weight: 800
}

.report-submit-row button:hover {
    background: #742018
}

@media(max-width:991.98px) {
    .report-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem
    }

    .report-process {
        max-width: 540px
    }

    .report-fields.three-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:767.98px) {
    .report-hero {
        padding: 2.5rem 0
    }

    .report-form-section {
        padding: 2rem 0 3rem
    }

    .report-type-chooser,
    .report-fields,
    .report-fields.three-columns {
        grid-template-columns: 1fr
    }

    .report-fields .wide-two,
    .report-fields .full-width {
        grid-column: auto
    }

    .report-success {
        grid-template-columns: 48px minmax(0, 1fr)
    }

    .report-success>a {
        grid-column: 1 / -1;
        justify-self: start
    }

    .report-submit-row {
        align-items: stretch;
        flex-direction: column
    }

    .report-submit-row button {
        justify-content: center;
        width: 100%
    }
}

@media(max-width:480px) {
    .report-process {
        align-items: stretch;
        flex-direction: column
    }

    .report-process>i {
        transform: rotate(90deg);
        align-self: center
    }

    .report-type-card {
        grid-template-columns: 42px minmax(0, 1fr) auto;
        padding: .8rem
    }

    .type-icon {
        width: 40px;
        height: 40px
    }
}