:root {
    --background: #fff7eb;
    --surface: #ffffff;
    --ink: #3f2a22;
    --accent: #ed8b21;
    --accent-dark: #6c351f;
    --accent-soft: #fff0dc;
    --green: #28783f;
    --green-soft: #edf7ee;
    --border: #ead7c3;
    --shadow: 0 1rem 3rem rgb(63 42 34 / 12%);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgb(237 139 33 / 16%), transparent 22rem),
        linear-gradient(180deg, #fffaf3 0, var(--background) 28rem);
    color: var(--ink);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 22%, rgb(255 255 255 / 20%), transparent 11rem),
        linear-gradient(135deg, #552613 0%, var(--accent-dark) 45%, var(--accent) 100%);
    color: white;
    padding: clamp(3rem, 8vw, 7rem) 1.25rem;
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -8rem -11rem auto;
    z-index: -1;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 12%);
}

.hero__content, .container {
    width: min(68rem, 100%);
    margin-inline: auto;
}

.header-layout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.hero-copy { display: grid; gap: 1.15rem; }
.header-actions { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; }
.language-switcher { display: flex; align-items: center; gap: .6rem; }
.button--light, .language-button { border-color: white; background: white; color: var(--accent-dark); }
.language-button { display: inline-flex; align-items: center; gap: .45rem; min-height: 3rem; border: 1px solid white; border-radius: 999px; padding: .45rem .75rem; font-weight: 800; cursor: pointer; box-shadow: 0 .45rem 1.2rem rgb(0 0 0 / 10%); }
.language-button img { width: 1.8rem; height: 1.2rem; border: 1px solid rgb(0 0 0 / 15%); object-fit: cover; }
.header-results { width: 100%; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 1.15rem;
    background: rgb(255 255 255 / 96%);
    color: var(--accent-dark);
    padding: .75rem 1rem;
    text-decoration: none;
    box-shadow: 0 .9rem 2.5rem rgb(0 0 0 / 18%);
    backdrop-filter: blur(8px);
}

.brand__logos {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
}

.brand__logo {
    display: grid;
    width: clamp(13rem, 25vw, 18rem);
    min-height: 4.4rem;
    place-items: center;
    border-radius: .8rem;
    background: #fff;
    padding: .2rem;
}

.brand__logo--bv { width: clamp(10rem, 22vw, 15rem); }
.brand__logo--geoca { width: clamp(5.5rem, 11vw, 8rem); }

.brand__logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.brand__text {
    display: grid;
    gap: .1rem;
    font-weight: 700;
    min-width: 9rem;
}

.brand__text .eyebrow { color: var(--accent-dark); font-size: .8rem; }

.partner-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
}

.partner-strip img,
.partner-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8rem;
    max-height: 3.2rem;
    border: 1px solid rgb(255 255 255 / 78%);
    border-radius: .7rem;
    background: rgb(255 255 255 / 94%);
    color: var(--accent-dark);
    padding: .35rem .75rem;
    font-weight: 800;
    box-shadow: 0 .55rem 1.4rem rgb(0 0 0 / 12%);
}

.partner-strip img {
    max-width: 10rem;
    object-fit: contain;
}

.bird-of-year {
    width: min(13rem, 24vw);
    aspect-ratio: 1;
    border: 3px solid rgb(255 255 255 / 78%);
    border-radius: 50%;
    background: white;
    object-fit: cover;
    box-shadow: 0 .9rem 2rem rgb(0 0 0 / 20%);
}

.hero h1 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 1.05;
    text-wrap: balance;
}

.hero-subtitle {
    max-width: 44rem;
    margin: 0;
    color: rgb(255 255 255 / 90%);
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.eyebrow {
    margin: 0;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.container { padding: clamp(2rem, 5vw, 3.5rem) 1.25rem; }

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps li {
    counter-increment: step;
    display: grid;
    gap: .35rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: 0 .4rem 1.5rem rgb(63 42 34 / 8%);
}

.steps li::before {
    content: counter(step);
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-weight: 800;
}

.steps span { color: #715e55; }

.hero--compact { padding-block: clamp(2.5rem, 6vw, 5rem); }
.hero--compact h1 { font-size: clamp(2.1rem, 5vw, 3.8rem); }

.intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.intro-card {
    border: 1px solid rgb(234 215 195 / 85%);
    border-radius: 1.35rem;
    background: linear-gradient(135deg, white, #fff8ef);
    padding: clamp(1.25rem, 3vw, 1.8rem);
    box-shadow: 0 .8rem 2.4rem rgb(63 42 34 / 8%);
}

.intro h2 { margin: .3rem 0; font-size: clamp(1.7rem, 4vw, 2.5rem); }
.eyebrow--dark { color: var(--accent-dark); }

.instructions { margin-bottom: 2rem; border: 1px solid var(--border); border-left: .45rem solid var(--accent); border-radius: 1rem; background: #fffdf8; padding: clamp(1rem, 3vw, 1.6rem); box-shadow: 0 .6rem 1.8rem rgb(63 42 34 / 7%); }
.instructions h2 { margin: 0 0 .8rem; font-size: 1.35rem; }
.instructions ul { display: grid; gap: .5rem; margin: 0; padding-left: 1.3rem; }

.wizard {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 0;
    padding: 0;
    background: var(--border);
    list-style: none;
}

.progress li {
    padding: 1rem;
    background: #f8eee3;
    color: #76655c;
    text-align: center;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
}

.progress li.is-active { background: linear-gradient(135deg, var(--accent), #f4a036); color: white; }
.progress li.is-complete { background: #f5d7b7; color: var(--accent-dark); }

.panel { padding: clamp(1.25rem, 4vw, 2.75rem); }
.panel h2 { margin-top: .2rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.step-label { margin-bottom: 0; color: #7c6558; font-weight: 700; }

fieldset {
    margin: 0 0 1.4rem;
    padding: 0;
    border: 0;
}

legend, label { font-weight: 700; }
fieldset > div { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: .6rem; }
fieldset > div > div label { display: flex; align-items: center; gap: .45rem; font-weight: 500; }
.date-field > div { display: grid; gap: .55rem; }
.date-field > div > div label { width: fit-content; }

.field { display: grid; gap: .4rem; margin-bottom: 1.15rem; }
.field--small { max-width: 15rem; }
.help-text { margin: 0; color: #66564d; font-size: .9rem; }
.optional { color: #705f57; font-size: .78rem; font-weight: 600; text-transform: uppercase; }
.field-group, .field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.field-grid--three { grid-template-columns: minmax(9rem, .5fr) 1.5fr; }
.time-picker { display: grid; grid-template-columns: minmax(8rem, 1fr) auto; gap: .65rem; }
.time-picker .button { white-space: nowrap; }
.time-picker-panel { display: grid; grid-template-columns: repeat(2, minmax(6rem, 1fr)); gap: .75rem; border: 1px solid var(--border); border-radius: .75rem; background: #fff8ed; padding: .9rem; box-shadow: 0 .5rem 1.5rem rgb(63 42 34 / 12%); }
.time-picker-panel[hidden] { display: none; }
.time-picker-panel label { display: grid; gap: .35rem; }
.time-picker-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: .65rem; }

input, select, textarea {
    width: 100%;
    min-height: 2.8rem;
    border: 1px solid #b9aaa1;
    border-radius: .55rem;
    background: white;
    color: var(--ink);
    padding: .65rem .75rem;
    font: inherit;
}

input[type="radio"], input[type="checkbox"] { width: 1.15rem; min-height: 1.15rem; accent-color: var(--accent-dark); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #3484d2; outline-offset: 2px; }

.check-row { display: flex; align-items: center; gap: .65rem; margin-block: 1rem; }
.check-row input { flex: 0 0 auto; }
.feeding { padding: .2rem 1rem; border: 1px solid #f0dcc8; border-radius: .9rem; background: #fff8ef; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    border: 1px solid var(--accent-dark);
    border-radius: 999px;
    background: var(--accent-dark);
    color: white;
    padding: .7rem 1.1rem;
    font: inherit;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button--secondary { background: white; color: var(--accent-dark); }
.button--submit { background: var(--green); border-color: var(--green); }
.actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.actions--end { justify-content: flex-end; }

.map { width: 100%; height: min(55vh, 28rem); border: 1px solid #b9aaa1; border-radius: 1rem; background: #eef2ef; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 60%); }
.map-toolbar { display: flex; align-items: center; gap: 1rem; margin: .5rem 0 .8rem; }
.coordinates { color: #66564d; font-size: .92rem; }
.field-error, .errorlist { color: #a51d2d; font-weight: 650; }
.errorlist { margin: .2rem 0; padding-left: 1.2rem; }

.species-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.species-card {
    display: grid;
    grid-template-columns: 5.5rem minmax(8rem, 1fr) 10rem;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: linear-gradient(135deg, white, #fffbf6);
    padding: .8rem;
    min-height: 7rem;
    box-shadow: 0 .45rem 1.2rem rgb(63 42 34 / 6%);
}
.species-card img { width: 5.5rem; height: 5.5rem; border-radius: .55rem; background: white; object-fit: contain; padding: .15rem; }
.species-card label { font-size: 1rem; line-height: 1.3; }
.species-card input { min-height: 3rem; text-align: center; }

.counter { display: grid; grid-template-columns: 3rem minmax(3.5rem, 1fr) 3rem; align-items: stretch; width: 10rem; max-width: 100%; }
.counter button { min-width: 3rem; min-height: 3rem; border: 1px solid #9b7a68; background: #fff4e5; color: var(--accent-dark); font-size: 1.5rem; font-weight: 800; cursor: pointer; }
.counter button:first-child { border-radius: .55rem 0 0 .55rem; }
.counter button:last-child { border-radius: 0 .55rem .55rem 0; }
.counter input { min-height: 3rem; border-radius: 0; padding-inline: .2rem; }
.counter input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.counter input[type="number"]::-webkit-inner-spin-button,
.counter input[type="number"]::-webkit-outer-spin-button { margin: 0; appearance: none; }

.extras { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--border); border-radius: 1rem; background: #fffdf9; }
.extras h3 { margin-top: 0; }
.extra-list { display: grid; gap: .75rem; margin-top: 1rem; }
.extra-row { display: grid; grid-template-columns: minmax(12rem, 1fr) auto 3rem; align-items: start; gap: .75rem; }
.species-picker, .address-search { position: relative; }
.suggestions { position: absolute; z-index: 1000; top: 100%; left: 0; right: 0; max-height: 18rem; overflow-y: auto; border: 1px solid #9b7a68; border-radius: .5rem; background: white; box-shadow: 0 .7rem 2rem rgb(0 0 0 / 18%); }
.suggestions button { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--border); background: white; padding: .75rem; text-align: left; cursor: pointer; }
.suggestions button:hover, .suggestions button:focus { background: #fff1df; }
.remove-row { width: 3rem; min-height: 3rem; border: 1px solid #a51d2d; border-radius: .55rem; background: white; color: #a51d2d; font-size: 1.5rem; cursor: pointer; }

.alert { margin: 1rem; border-left: .4rem solid #a51d2d; border-radius: .4rem; background: #fff0f2; padding: 1rem; }
.review-note { margin-top: 1.2rem; border-radius: .75rem; background: var(--green-soft); padding: 1rem; }
.review-note p { margin-bottom: 0; }
.comment-field { margin-top: 1.5rem; }

.confirmation { max-width: 50rem; padding-top: 8vh; text-align: center; }
.confirmation__logo { width: min(14rem, 62vw); margin-bottom: 1.5rem; }
.confirmation__icon { display: grid; width: 5rem; height: 5rem; margin: 0 auto 1rem; place-items: center; border-radius: 50%; background: var(--green); color: white; font-size: 3rem; }

.metric-grid, .ranking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-block: 1.5rem; }
.metric, .ranking { border: 1px solid var(--border); border-radius: 1rem; background: linear-gradient(135deg, white, #fffaf4); padding: 1.2rem; box-shadow: 0 .55rem 1.5rem rgb(63 42 34 / 7%); }
.metric strong { display: block; color: var(--accent-dark); font-size: 2rem; }
.ranking h2 { margin-top: 0; }
.ranking ol { padding-left: 1.6rem; }
.ranking li { margin-block: .45rem; }
.department-chart { margin-block: 1.5rem; border: 1px solid var(--border); border-radius: 1rem; background: white; padding: 1.2rem; box-shadow: 0 .55rem 1.5rem rgb(63 42 34 / 7%); }
.department-chart h2 { margin-top: 0; }
.bar-chart { display: grid; gap: .8rem; }
.bar-row { display: grid; grid-template-columns: minmax(12rem, 1.2fr) minmax(10rem, 3fr) 3rem; align-items: center; gap: .8rem; }
.bar-label { font-weight: 700; }
.bar-track { overflow: hidden; height: 1.35rem; border-radius: 999px; background: #f2e2d2; }
.bar-fill { display: block; width: var(--bar-size); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: .8rem; background: white; }
.results-table { width: 100%; min-width: 62rem; border-collapse: collapse; }
.results-table th, .results-table td { border: 1px solid #d5bda6; padding: .65rem; text-align: right; }
.results-table th:first-child, .results-table td:first-child { position: sticky; left: 0; background: white; text-align: left; }
.results-table thead th { background: #fff0dc; }
.results-table tbody tr:nth-child(even) th,
.results-table tbody tr:nth-child(even) td { background: #fffaf3; }
.results-table tbody tr:nth-child(even) th:first-child { background: #fffaf3; }
.results-table thead tr:first-child th:not(:first-child) { border-left-width: 2px; border-left-color: #a97b5e; }
.results-table tbody td:nth-child(even) { border-left-width: 2px; border-left-color: #a97b5e; }

.site-footer { border-top: 1px solid var(--border); background: #f7eadb; padding: 1.25rem; text-align: center; }
.site-footer p { width: min(68rem, 100%); margin: 0 auto; }
.site-footer a { color: var(--accent-dark); font-weight: 700; }

@media (max-width: 48rem) {
    .container { padding: 1.5rem .8rem; }
    .intro { display: block; }
    .progress li { padding: .7rem .2rem; font-size: .72rem; }
    .field-group, .field-grid, .field-grid--three { grid-template-columns: 1fr; gap: 0; }
    .time-picker { grid-template-columns: 1fr; }
    .time-picker-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bar-row { grid-template-columns: 1fr 2.5rem; gap: .35rem .7rem; }
    .bar-track { grid-column: 1 / -1; grid-row: 2; }
    .bar-value { grid-column: 2; grid-row: 1; }
    .species-grid { grid-template-columns: 1fr; }
    .header-layout { display: grid; }
    .brand { align-items: center; width: 100%; border-radius: 1.2rem; }
    .brand__logos { width: 100%; justify-content: center; }
    .brand__logo--bv { width: min(14rem, 58vw); min-height: 3.5rem; }
    .brand__logo--geoca { width: min(7rem, 32vw); min-height: 3.5rem; }
    .brand__text { min-width: 0; }
    .header-actions { flex-wrap: wrap; }
    .bird-of-year { width: min(12rem, 62vw); }
    .species-card { grid-template-columns: 5.5rem 1fr; }
    .species-card .counter { grid-column: 1 / -1; width: 100%; grid-template-columns: 3rem 1fr 3rem; }
    .extra-row { grid-template-columns: 1fr 3rem; }
    .extra-row .counter { grid-column: 1 / 2; width: 100%; grid-template-columns: 3rem 1fr 3rem; }
}

@media (max-width: 64rem) {
    .species-grid { grid-template-columns: 1fr; }
}