/* =========================================================
   REDTECH One — Product Demonstration Request
   Brand stylesheet
   ========================================================= */

:root {
    --black: #000000;
    --panel: #060606;
    --panel-2: #0a0a0a;
    --field: #131313;
    --field-border: #2e2e2e;

    --red: #e2121a;
    --red-bright: #ff2a24;
    --red-deep: #9d0006;
    --red-line: rgba(226, 18, 26, .55);
    --red-line-soft: rgba(226, 18, 26, .28);
    --red-glow: rgba(226, 18, 26, .35);

    --text: #ffffff;
    --text-dim: #b9b9bd;
    --text-mute: #8b8b90;

    --radius: 10px;
    --radius-sm: 6px;

    --header-h: 86px;
    --footer-h: 54px;

    --font: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
}

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

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: var(--black);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.site-header {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    background: #000;
    border-bottom: 1px solid var(--red);
    box-shadow: 0 1px 14px rgba(226, 18, 26, .28);
    position: relative;
    z-index: 5;
}

.brand {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

/* flex must not squeeze the lockup out of its aspect ratio */
.brand > a {
    display: flex;
    flex: none;
}

.brand__logo {
    height: 64px;
    width: auto;
    max-width: none;
    flex: none;
}

.brand__divider {
    width: 1px;
    height: 40px;
    background: #3a3a3a;
}

.brand__product {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
}

.brand__product em {
    font-style: normal;
    color: var(--red-bright);
}

.header__tag {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}

.header__tag svg {
    color: var(--red-bright);
    flex: none;
}

/* ---------------------------------------------------------
   Layout
   --------------------------------------------------------- */

.layout {
    display: grid;
    grid-template-columns: 40% 60%;
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
}

/* ---------------------------------------------------------
   Hero panel (left)
   --------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    padding: 54px 40px 54px 86px;
    display: flex;
    flex-direction: column;

    /* Pinned to the top, not centred. The form opposite grows by roughly
       900px when the visitor answers Yes to the reservation fee, and centred
       content would slide down that whole distance — the pillars would appear
       to jump the moment the section opens. */
    justify-content: flex-start;

    border-right: 1px solid var(--red);
    background: #030303;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;

    /* Sized to the viewport slot, not to the panel. The panel grows by about
       900px when the visitor opens the reservation section, and a `cover`
       background on a box that tall zooms the artwork past double size — the
       globe disappears out of frame. The panel is never shorter than this
       height, so the usual view is unchanged. */
    height: calc(100vh - var(--header-h) - var(--footer-h));

    background: url("../images/hero-bg.png") no-repeat center right / cover;
    transform: scaleX(-1);
    opacity: .95;
    z-index: 0;

    /* Softens the lower edge into the panel colour on the taller layout. */
    -webkit-mask-image: linear-gradient(#000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(#000 calc(100% - 90px), transparent 100%);
}

/* faint diagonal circuit hatching, top-right of the panel */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 46%;
    height: 62%;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(226, 18, 26, .16) 0 1px,
        transparent 1px 16px
    );
    -webkit-mask-image: linear-gradient(215deg, #000 0%, transparent 72%);
    mask-image: linear-gradient(215deg, #000 0%, transparent 72%);
    z-index: 0;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 1;
    max-width: 540px;
}

.hero__title {
    margin: 0 0 20px;
    font-size: clamp(30px, 2.55vw, 43px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.015em;
}

.hero__title span {
    display: block;
    color: var(--red-bright);
}

.hero__lead {
    margin: 0 0 34px;
    max-width: 512px;
    font-size: 17px;
    line-height: 1.5;
    color: #dcdcdf;
    /* Body statements are fully justified per the approved formatting. */
    text-align: justify;
}

.pillars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 400px;
    margin: 0 auto;
}

.pillar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 224px;
    padding: 24px 15px;
    text-align: center;
    background: rgba(12, 4, 5, .72);
    border: 1px solid var(--red-line);
    border-radius: var(--radius);
    box-shadow: inset 0 0 26px rgba(226, 18, 26, .07);
}

.pillar__icon {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--red-bright);
}

.pillar__title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
}

.pillar__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-dim);
}

/* ---------------------------------------------------------
   Form panel (right)
   --------------------------------------------------------- */

.form-panel {
    padding: 10px 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(226, 18, 26, .10) 0%, transparent 55%),
        #050505;
}

.form-shell {
    width: 100%;
    max-width: 930px;
    padding: 12px;
    border: 1px solid var(--red-line);
    border-radius: 14px;
    box-shadow: 0 0 34px rgba(226, 18, 26, .12);
}

.form-card {
    padding: 12px 26px;
    background: rgba(10, 10, 10, .72);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 12px;
}

.form-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 10px;
}

.form-head__badge {
    flex: none;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid var(--red);
    border-radius: 12px;
    color: var(--red-bright);
    background: rgba(226, 18, 26, .08);
}

.form-head__title {
    margin: 0 0 8px;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.form-head__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-dim);
    max-width: 620px;
}

/* Fields ------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 12px;
}

.field--full {
    grid-column: 1 / -1;
}

.field__label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: #ededf0;
}

.req {
    color: var(--red-bright);
    margin-left: 2px;
}

.input,
.select,
.textarea {
    width: 100%;
    height: 36px;
    padding: 0 13px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text);
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.textarea {
    height: 76px;
    min-height: 76px;
    padding: 10px 13px;
    line-height: 1.5;
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: #6d6d72;
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: #3d3d3d;
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(226, 18, 26, .18);
}

/* Native date picker on a dark field. iOS Safari renders date inputs as an
   inline-flex widget with intrinsic width and its own centering, which makes
   the field narrower than the rest of the column on phones — flatten it so it
   sizes exactly like every other .input. */
.input[type="date"] {
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    text-align: left;
}

.input[type="date"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
}

.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23c9c9cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.select option {
    background: #131313;
    color: #fff;
}

.select:invalid,
.select option[value=""] {
    color: #6d6d72;
}

/* error state */
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
    border-color: var(--red-bright);
    box-shadow: 0 0 0 3px rgba(255, 42, 36, .14);
}

.field__error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #ff6b64;
}

/* Consent ------------------------------------------------ */

.consent {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 10px 0 10px;
}

.consent input[type="checkbox"] {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    background: var(--field);
    border: 1px solid #4a4a4a;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: border-color .16s ease, background-color .16s ease;
}

.consent input[type="checkbox"]:hover {
    border-color: #6a6a6a;
}

.consent input[type="checkbox"]:checked {
    background: var(--red);
    border-color: var(--red);
}

.consent input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}

.consent input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(226, 18, 26, .3);
}

.consent__text {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-dim);
    max-width: 700px;
}

.consent__text a {
    color: var(--red-bright);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Submit ------------------------------------------------- */

.submit-row {
    display: flex;
    justify-content: center;
}

.btn-submit {
    min-width: 446px;
    height: 44px;
    padding: 0 30px;
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .005em;
    background: linear-gradient(180deg, #ff2a24 0%, var(--red) 48%, #a30308 100%);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 6px 22px rgba(226, 18, 26, .35);
    transition: filter .16s ease, transform .16s ease, box-shadow .16s ease;
}

.btn-submit:hover {
    filter: brightness(1.09);
    box-shadow: 0 8px 28px rgba(226, 18, 26, .45);
}

.btn-submit:active {
    transform: translateY(1px);
}

.btn-submit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.btn-submit:disabled,
.btn-submit[aria-busy="true"] {
    cursor: progress;
    filter: saturate(.55) brightness(.8);
    box-shadow: none;
}

/* once submitted, nothing in the form can be touched again */
.is-submitting .input,
.is-submitting .select,
.is-submitting .textarea,
.is-submitting .consent input {
    pointer-events: none;
    opacity: .72;
}

/* Alerts ------------------------------------------------- */

.alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 22px;
    padding: 13px 16px;
    font-size: 13px;
    line-height: 1.45;
    border-radius: var(--radius-sm);
}

.alert--error {
    color: #ffb3ae;
    background: rgba(226, 18, 26, .10);
    border: 1px solid var(--red-line);
}

.alert svg {
    flex: none;
    margin-top: 1px;
    color: var(--red-bright);
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.site-footer {
    height: var(--footer-h);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 0 26px;
    background: #000;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px;
}

.footer__support {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
}

.footer__support svg {
    color: var(--red-bright);
    flex: none;
}

.footer__support a {
    color: var(--red-bright);
}

.footer__support a:hover {
    text-decoration: underline;
}

.footer__links {
    display: flex;
    gap: 24px;
    justify-content: center;
    white-space: nowrap;
}

.footer__links a:hover {
    color: var(--red-bright);
}

/* Legal links and the sign-in shortcuts share the centre column, so they sit
   in one flex row rather than fighting over a grid track of their own. */
.footer__center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.footer__pipe {
    flex: none;
    width: 1px;
    height: 18px;
    background: #2c2c2c;
}

/* ---------------------------------------------------------
   Footer sign-in shortcuts
   --------------------------------------------------------- */

.footer__portals {
    display: flex;
    align-items: center;
    justify-content: center;
    /* the labels come back on the stacked footer, where a narrow phone can
       still be too tight to hold both chips on one line */
    flex-wrap: wrap;
    gap: 10px;
}

.footer__portal {
    /* anchors the label when it is visually hidden on narrower desktops */
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: #101010;
    color: var(--text-dim);
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.footer__portal svg {
    flex: none;
    color: var(--red-bright);
}

.footer__portal:hover {
    color: #fff;
    border-color: var(--red-line);
    background: #161616;
}

.footer__portal:focus-visible {
    outline: none;
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--red);
}

.footer__copy {
    text-align: right;
    color: var(--text-dim);
}

/* ---------------------------------------------------------
   Registered-with ribbon
   --------------------------------------------------------- */

/* The agency seals were drawn for white paper, so this is the one
   deliberately light band on the page — no knockouts, no dark plates. */
.registered {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 38px;
    padding: 16px 26px;
    background: #fff;
}

.registered__heading {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    color: #101010;
    white-space: nowrap;
}

.registered__list {
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 34px;
    margin: 0;
    padding: 0;
}

.registered__item {
    display: flex;
}

.registered__logo {
    display: block;
    height: 46px;
    width: auto;
}

@media (max-width: 860px) {
    .registered {
        gap: 12px 26px;
        padding: 14px 18px;
    }

    .registered__list {
        gap: 12px 22px;
    }

    .registered__logo {
        height: 36px;
    }
}

/* ---------------------------------------------------------
   Thank-you + document pages
   --------------------------------------------------------- */

.doc {
    max-width: 900px;
    margin: 0 auto;
    padding: 54px 30px 70px;
}

.doc__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.doc__title {
    margin: 0 0 10px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.doc__rule {
    width: 74px;
    height: 3px;
    margin-bottom: 30px;
    background: linear-gradient(90deg, var(--red-bright), transparent);
    border-radius: 3px;
}

.doc h2 {
    margin: 32px 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.doc p {
    margin: 0 0 14px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-dim);
    /* Legal body text is fully justified per the approved formatting. */
    text-align: justify;
}

.doc a {
    color: var(--red-bright);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--red-bright);
}

.back-link:hover {
    text-decoration: underline;
}

.thanks {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    padding: 50px 30px;
}

.thanks__card {
    width: 100%;
    max-width: 640px;
    padding: 46px 46px 42px;
    text-align: center;
    background: rgba(10, 10, 10, .8);
    border: 1px solid var(--red-line);
    border-radius: 14px;
    box-shadow: 0 0 40px rgba(226, 18, 26, .14);
}

.thanks__icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border: 1px solid var(--red);
    border-radius: 50%;
    color: var(--red-bright);
    background: rgba(226, 18, 26, .08);
}

.thanks__title {
    margin: 0 0 14px;
    font-size: 25px;
    line-height: 1.24;
    font-weight: 800;
}

.thanks__text {
    margin: 0 auto 20px;
    max-width: 500px;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

.thanks__sent {
    margin: 0 auto 18px;
    font-size: 13.5px;
    color: var(--text-dim);
}

.thanks__sent strong {
    color: #fff;
    font-weight: 600;
}

.thanks__ref {
    display: inline-block;
    padding: 11px 22px;
    margin-bottom: 30px;
    font-size: 14px;
    letter-spacing: .06em;
    background: var(--field);
    border: 1px dashed var(--red-line);
    border-radius: var(--radius-sm);
}

.thanks__ref strong {
    color: var(--red-bright);
    letter-spacing: .1em;
}

/* Used on both <a> and <button>. A <button> brings its own font, its own
   background — the browser's ButtonFace, which lands as a white pill carrying
   white text — and its own line-height, so all three are stated here rather
   than left to the user-agent sheet. Without this the Apply and Search buttons
   render as white slabs with invisible labels. */
.btn-ghost {
    display: inline-block;
    padding: 12px 26px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    background: transparent;
    border: 1px solid var(--red);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .16s ease;
}

.btn-ghost:hover {
    background: rgba(226, 18, 26, .14);
}

.btn-ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(226, 18, 26, .35);
}

.btn-ghost--sm {
    padding: 9px 16px;
    font-size: 12.5px;
    border-radius: 6px;
}

/* ---------------------------------------------------------
   Submissions area
   --------------------------------------------------------- */

.admin {
    max-width: 1500px;
    margin: 0 auto;
    padding: 40px 30px 70px;
}

.admin--narrow {
    max-width: 900px;
}

.admin__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.admin__title {
    margin: 0 0 4px;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.admin__count {
    margin: 0;
    font-size: 13px;
    color: var(--text-mute);
}

.admin__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.admin__search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.admin__search .input {
    max-width: 460px;
}

.admin__clear {
    font-size: 12.5px;
    color: var(--text-mute);
}

.admin__clear:hover {
    color: var(--red-bright);
}

.admin__empty {
    padding: 44px 20px;
    text-align: center;
    font-size: 14px;
    color: var(--text-mute);
    background: rgba(10, 10, 10, .6);
    border: 1px dashed #2e2e2e;
    border-radius: var(--radius);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #c9c9cf;
    background: rgba(226, 18, 26, .12);
    border-bottom: 1px solid var(--red-line);
}

.table td {
    padding: 13px 16px;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #e4e4e8;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover td {
    background: rgba(226, 18, 26, .06);
}

.table__ref {
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--red-bright) !important;
}

.table__sub {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-mute);
    white-space: normal;
    max-width: 260px;
}

.table a {
    color: #e4e4e8;
}

.table a:hover {
    color: var(--red-bright);
}

.admin__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--text-mute);
}

.admin__pagination-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-link {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    border: 1px solid var(--red-line);
    border-radius: 6px;
}

.page-link:hover {
    background: rgba(226, 18, 26, .14);
}

.page-link.is-disabled {
    color: #55555d;
    border-color: #2a2a2a;
    pointer-events: none;
}

.page-of {
    color: var(--text-dim);
}

/* ---------------------------------------------------------
   QR code card
   --------------------------------------------------------- */

.qr-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 34px 34px 30px;
    text-align: center;
    background: rgba(10, 10, 10, .75);
    border: 1px solid var(--red-line);
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(226, 18, 26, .14);
}

.qr-card__logo {
    width: 250px;
    max-width: 70%;
    margin: 0 auto 18px;
}

.qr-card__lead {
    margin: 0 0 22px;
    font-size: 17px;
    font-weight: 700;
}

.qr-card__code {
    display: inline-block;
    padding: 14px;
    background: #fff;
    border-radius: 12px;
    line-height: 0;
}

.qr-card__code svg {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
}

.qr-card__url {
    margin: 20px 0 0;
    font-size: 12.5px;
    word-break: break-all;
    color: var(--text-dim);
}

.qr-card__tagline {
    margin: 14px 0 0;
    font-size: 12.5px;
    font-style: italic;
    color: var(--red-bright);
}

.qr-note {
    max-width: 520px;
    margin: 26px auto 0;
}

.qr-note p {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-mute);
}

.qr-note code {
    padding: 1px 5px;
    font-size: 11.5px;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: 4px;
    color: #e4e4e8;
}

@media print {
    .site-header,
    .site-footer,
    .registered,
    .admin__head,
    .qr-note {
        display: none !important;
    }

    body,
    .qr-card {
        background: #fff !important;
        box-shadow: none !important;
    }

    .qr-card {
        border-color: #d0d0d4;
    }

    .qr-card__lead,
    .qr-card__url {
        color: #16161a !important;
    }
}

/* ---------------------------------------------------------
   Reservation fee and promotional rate
   --------------------------------------------------------- */

.field__hint {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-mute);
}

.reserve {
    margin: 22px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: rgba(19, 19, 19, .55);
}

.reserve__legend {
    padding: 0 4px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: #ededf0;
}

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.choice {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 104px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}

.choice:hover {
    border-color: #3d3d3d;
    color: #fff;
}

.choice.is-selected {
    color: #fff;
    border-color: var(--red);
    background: rgba(226, 18, 26, .12);
}

.choice input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1px solid #4a4a4a;
    border-radius: 50%;
    background: #0b0b0b;
    cursor: pointer;
    position: relative;
}

.choice input[type="radio"]:checked {
    border-color: var(--red);
}

.choice input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--red-bright);
}

.choice input[type="radio"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(226, 18, 26, .3);
}

.reserve-panel {
    margin-top: 16px;
    padding: 20px 18px 18px;
    border: 1px solid var(--red-line-soft);
    border-radius: var(--radius);
    background:
        linear-gradient(180deg, rgba(226, 18, 26, .07) 0%, rgba(226, 18, 26, 0) 120px),
        rgba(10, 10, 10, .7);
}

.reserve-panel[hidden] {
    display: none;
}

.reserve-panel__title {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
}

/* the payment instructions sit between two field grids, so the grid that
   follows needs the same breathing room the notice above it has */
.reserve-panel .notice + .grid {
    margin-top: 18px;
}

.reserve-panel__title::after {
    content: "";
    display: block;
    width: 44px;
    height: 2px;
    margin-top: 8px;
    background: var(--red);
}

.input--code {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.input--readonly {
    color: #fff;
    font-weight: 700;
    background: #0b0b0b;
    border-style: dashed;
    cursor: default;
}

.input--readonly:hover {
    border-color: var(--field-border);
}

.input.is-valid {
    border-color: #2f9e5c;
    box-shadow: 0 0 0 3px rgba(47, 158, 92, .16);
}

/* Money field ------------------------------------------- */

.input-money {
    position: relative;
}

.input-money__symbol {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-mute);
    pointer-events: none;
}

.input--money {
    padding-left: 28px;
}

/* File field -------------------------------------------- */

.input--file {
    height: auto;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12.5px;
    line-height: 1.6;
    cursor: pointer;
}

.input--file::file-selector-button {
    margin-right: 12px;
    padding: 5px 13px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: #242424;
    border: 1px solid #3d3d3d;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

.input--file::file-selector-button:hover {
    background: #2e2e2e;
    border-color: var(--red-line);
}

/* Promo Code result card --------------------------------- */

.promo-checking {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-mute);
}

.promo-card {
    padding: 16px 18px;
    border: 1px solid rgba(47, 158, 92, .45);
    border-radius: var(--radius-sm);
    background: rgba(47, 158, 92, .07);
}

.promo-card--bad {
    border-color: var(--red-line);
    background: rgba(226, 18, 26, .09);
}

.promo-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.promo-card__badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #7ee0a4;
    background: rgba(47, 158, 92, .16);
    border: 1px solid rgba(47, 158, 92, .5);
    border-radius: 999px;
}

.promo-card__validity {
    font-size: 11.5px;
    color: var(--text-mute);
}

.promo-card__name {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.promo-card--bad .promo-card__name {
    color: #ffb3ae;
}

.promo-card--bad p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: #ffcfcb;
}

.promo-card__price {
    margin: 0 0 6px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.promo-card__fee {
    margin: 0 0 12px;
    font-size: 13.5px;
    color: #ededf0;
}

.promo-card__fee strong {
    color: #7ee0a4;
    font-size: 15px;
}

.promo-card__terms {
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .45);
}

.promo-card__terms h5 {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #c9c9cf;
}

.promo-card__terms p {
    margin: 0 0 9px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

.promo-card__terms p:last-child {
    margin-bottom: 0;
}

.promo-card__note {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-mute);
}

/* Notices ------------------------------------------------ */

.notice {
    margin-top: 18px;
    padding: 15px 17px;
    border: 1px solid var(--field-border);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .4);
}

.notice--pay {
    border-color: var(--red-line-soft);
}

.notice--warn {
    border-color: var(--red-line);
    background: rgba(226, 18, 26, .07);
}

.notice__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
}

.notice--warn .notice__title {
    color: #ffb3ae;
}

.notice--warn .notice__title svg {
    flex: none;
    color: var(--red-bright);
}

.notice p {
    margin: 0 0 9px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
}

.notice p:last-child {
    margin-bottom: 0;
}

.bank {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-sm);
    background: rgba(19, 19, 19, .7);
}

.bank__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.bank__row:last-child {
    border-bottom: 0;
}

.bank dt {
    flex: 0 0 190px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-mute);
}

.bank dd {
    flex: 1 1 200px;
    margin: 0;
    font-size: 13px;
    color: #fff;
}

.bank__number {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--red-bright) !important;
}

/* ---------------------------------------------------------
   Status pills
   --------------------------------------------------------- */

.pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    border: 1px solid;
}

.pill--ok {
    color: #7ee0a4;
    background: rgba(47, 158, 92, .14);
    border-color: rgba(47, 158, 92, .5);
}

.pill--pending {
    color: #ffd27a;
    background: rgba(214, 158, 46, .14);
    border-color: rgba(214, 158, 46, .5);
}

.pill--warn {
    color: #ffb26b;
    background: rgba(214, 106, 26, .14);
    border-color: rgba(214, 106, 26, .55);
}

.pill--bad {
    color: #ffb3ae;
    background: rgba(226, 18, 26, .13);
    border-color: var(--red-line);
}

.pill--muted {
    color: var(--text-mute);
    background: rgba(255, 255, 255, .04);
    border-color: #2e2e2e;
}

/* ---------------------------------------------------------
   Administrator Portal — navigation and sign-in
   --------------------------------------------------------- */

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 30px 0;
}

.admin-nav__link {
    padding: 8px 15px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-dim);
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

.admin-nav__link:hover {
    color: #fff;
    border-color: var(--red-line);
}

.admin-nav__link.is-active {
    color: #fff;
    background: rgba(226, 18, 26, .14);
    border-color: var(--red);
}

.admin-nav__spacer {
    flex: 1 1 auto;
}

.admin-nav__who {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    color: var(--text-mute);
}

.admin-nav__who strong {
    color: #fff;
    font-weight: 600;
}

/* "Signed in as …" doubles as the way into My Account. */
.admin-nav__me {
    color: inherit;
    border-bottom: 1px solid transparent;
    transition: border-color .16s ease;
}

.admin-nav__me:hover,
.admin-nav__me.is-active {
    border-bottom-color: var(--red);
}

.admin-nav__signout {
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--red-bright);
    background: none;
    border: 0;
    cursor: pointer;
}

.admin-nav__signout:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The card is centred in what is left of the viewport between the header and
   the footer, rather than pinned near the top of a tall empty page. */
.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
    padding: 48px 20px 56px;
    position: relative;
    isolation: isolate;
}

/* A soft red bloom behind the card, so the panel reads as lit rather than as
   a box floating in black. Sized in vmax so it scales with the viewport. */
.login::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: min(760px, 90vw);
    height: min(760px, 90vw);
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(226, 18, 26, .16) 0%, rgba(226, 18, 26, .05) 42%, transparent 68%);
    pointer-events: none;
}

.login__card {
    width: 100%;
    max-width: 430px;
    padding: 32px 32px 28px;
    background: linear-gradient(180deg, rgba(18, 8, 9, .92) 0%, rgba(8, 8, 8, .92) 100%);
    border: 1px solid var(--red-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(226, 18, 26, .12);
}

.login__badge {
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    color: var(--red-bright);
    background: rgba(226, 18, 26, .1);
    border: 1px solid var(--red);
    border-radius: 13px;
}

.login__eyebrow {
    margin: 0 0 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red-bright);
}

.login__title {
    margin: 0 0 8px;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.login__text {
    margin: 0 0 22px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-mute);
}

.login__row {
    margin-bottom: 14px;
}

.login .btn-submit {
    min-width: 0;
    width: 100%;
    margin-top: 6px;
}

/* Hairline above the closing note, drawn on the card rather than as a border
   on the paragraph so it spans the full padded width. */
.login__foot {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 22px -32px -28px;
    padding: 16px 32px 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-mute);
}

.login__foot svg {
    flex: none;
    margin-top: 1px;
    color: var(--red-bright);
}

.login__foot a {
    color: var(--red-bright);
}

.login__foot a:hover {
    text-decoration: underline;
}

.login__back {
    font-size: 12.5px;
    color: var(--text-mute);
    transition: color .16s ease;
}

.login__back:hover {
    color: var(--red-bright);
}

/* ---------------------------------------------------------
   Administrator Portal — flash, cards, detail
   --------------------------------------------------------- */

.alert--ok {
    color: #a9e8c2;
    background: rgba(47, 158, 92, .10);
    border: 1px solid rgba(47, 158, 92, .45);
}

.alert--info {
    color: var(--text-dim);
    background: rgba(255, 255, 255, .04);
    border: 1px solid #2e2e2e;
}

.admin__filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.admin__filters .input,
.admin__filters .select {
    max-width: 320px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
    cursor: pointer;
}

.checkbox-inline input {
    width: 16px;
    height: 16px;
    accent-color: var(--red);
}

.stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.stat {
    flex: 1 1 180px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    background: rgba(10, 10, 10, .6);
}

.stat__label {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-mute);
}

.stat__value {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
}

.stat--flag .stat__value {
    color: #ffd27a;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.card {
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    background: rgba(10, 10, 10, .6);
}

.card + .card {
    margin-top: 20px;
}

.card__title {
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.card__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    margin-top: 8px;
    background: var(--red);
}

.card--verify {
    border-color: var(--red-line);
}

/* Explanatory copy sitting between a card title and its form. */
.card__lead {
    margin: -6px 0 18px;
    max-width: 70ch;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-mute);
}

.card__lead--after {
    margin: 18px 0 0;
}

.kv {
    margin: 0;
}

.kv__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.kv__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.kv dt {
    flex: 0 0 200px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-mute);
}

.kv dd {
    flex: 1 1 220px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: #e4e4e8;
    overflow-wrap: anywhere;
}

.kv dd a {
    color: #e4e4e8;
}

.kv dd a:hover {
    color: var(--red-bright);
}

.kv__amount {
    font-weight: 700;
    color: #fff !important;
}

.terms-box {
    max-height: 340px;
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .45);
}

.terms-box p {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-dim);
}

.terms-box p:last-child {
    margin-bottom: 0;
}

.snapshot-note {
    margin: 12px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-mute);
}

/* Proof of payment list ---------------------------------- */

.proof-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.proof-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.proof-list li:last-child {
    border-bottom: 0;
}

.proof__name {
    flex: 1 1 180px;
    min-width: 0;
    font-size: 13px;
    color: #e4e4e8;
    overflow-wrap: anywhere;
}

.proof__meta {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--text-mute);
}

.proof__actions {
    display: flex;
    gap: 8px;
}

.dupe-warning {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(214, 106, 26, .55);
    border-radius: var(--radius-sm);
    background: rgba(214, 106, 26, .10);
}

.dupe-warning p {
    margin: 0 0 6px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #ffcfa8;
}

.dupe-warning ul {
    margin: 0;
    padding-left: 18px;
}

.dupe-warning li {
    font-size: 12.5px;
    color: #ffcfa8;
}

.dupe-warning a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Verification panel ------------------------------------- */

.verify__hint {
    margin: -6px 0 16px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-mute);
}

.verify__row {
    margin-bottom: 14px;
}

.verify__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.verify .btn-submit {
    min-width: 0;
    flex: 1 1 220px;
    height: 42px;
    font-size: 15px;
}

.status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.status-line__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-mute);
}

/* Audit trail -------------------------------------------- */

.trail {
    list-style: none;
    margin: 0;
    padding: 0;
}

.trail li {
    position: relative;
    padding: 0 0 18px 22px;
    border-left: 1px solid rgba(255, 255, 255, .10);
}

.trail li:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
}

.trail li::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
}

.trail__action {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.trail__meta {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: var(--text-mute);
}

.trail__remarks {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
    overflow-wrap: anywhere;
}

.table__wrapcell {
    white-space: normal;
    min-width: 200px;
    max-width: 380px;
}

.table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.admin__note {
    margin: 0 0 22px;
    padding: 13px 16px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
    background: rgba(255, 255, 255, .03);
    border: 1px solid #2a2a2a;
    border-left: 3px solid var(--red);
    border-radius: var(--radius-sm);
}

.btn-ghost--danger {
    border-color: var(--red-line);
    color: #ffb3ae;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.form-actions .btn-submit {
    min-width: 240px;
    height: 42px;
    font-size: 15px;
}

/* Income tax rate history sits under the two cards, not inside one. */
.tax-history__title {
    margin: 30px 0 14px;
}

@media (max-width: 1024px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .admin-nav {
        padding: 14px 16px 0;
    }

    .kv dt {
        flex-basis: 100%;
    }

    .bank dt {
        flex-basis: 100%;
    }

    .reserve-panel {
        padding: 16px 14px 14px;
    }

    .choice {
        flex: 1 1 130px;
        justify-content: center;
        padding: 12px 16px;
        font-size: 15px;
    }

    .input--file {
        min-height: 46px;
        font-size: 14px;
    }
}

/* ---------------------------------------------------------
   Partner lockups (hero panel)
   --------------------------------------------------------- */

/* A fixed margin, not margin-top:auto. Anchoring these to the bottom of the
   panel would put them back in the business of moving whenever the form
   opposite changes height — the whole left column stays put instead, and the
   slack falls below it. */
.partners {
    width: 100%;
    max-width: 400px;
    margin: 36px auto 0;
}

.partners__group + .partners__group {
    margin-top: 24px;
}

.partners__heading {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--red-bright);
    text-align: center;
}

.partners__heading::after {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    margin: 8px auto 0;
    background: var(--red-line);
}

.partners__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.partners__item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 12px 18px;
    background: rgba(12, 4, 5, .72);
    border: 1px solid var(--red-line-soft);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 26px rgba(226, 18, 26, .07);
}

/* A lone name plate gets the full width; two or more share the row. Logo
   plates are exempt — they size to their artwork just below. */
.partners__list > .partners__item:not(.partners__item--logo):only-child {
    width: 100%;
}

/* Artwork sits on the same dark plate as everything else — partner marks are
   supplied as white knockouts for this panel, so no light backing is needed.
   The plate hugs the lockup rather than filling the row, so a portrait mark is
   not stranded in a box far wider than itself. */
.partners__item--logo {
    width: auto;
    max-width: 100%;
    padding: 18px 26px;
}

/* Capped on both axes so the slot takes a tall stacked lockup and a wide
   horizontal one at a sensible size, whichever a partner supplies. */
.partners__logo {
    max-height: 112px;
    max-width: min(240px, 100%);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Stand-in until the artwork lands — a typeset name reads as deliberate,
   where a broken image box does not. */
.partners__name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: center;
    color: #ededf0;
}

/* ---------------------------------------------------------
   Password reveal
   --------------------------------------------------------- */

.password {
    position: relative;
}

.password .input {
    padding-right: 78px;
}

.password__toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-mute);
    background: none;
    border: 0;
    border-left: 1px solid var(--field-border);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    cursor: pointer;
    transition: color .16s ease, background-color .16s ease;
}

.password__toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

.password__toggle:focus-visible {
    outline: none;
    color: #fff;
    box-shadow: inset 0 0 0 2px var(--red);
}

.password__toggle svg {
    flex: none;
}

/* the label swaps with the state; only one is ever in the flow */
.password__toggle [hidden] {
    display: none;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

/* the header lockup is wide — step it down before it meets the right-hand tag */
/* The footer row runs out of width long before the header does: the support
   address and the copyright hold both flanks, and measured against the real
   text the labels start wrapping the copyright at about 1500px. Below that the
   shortcuts keep their icons and give up their labels — hidden visually only,
   so each link keeps its accessible name, stays addressable by voice control,
   and still names itself on hover through its title. */
@media (max-width: 1540px) {
    .footer__portal-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .footer__portal {
        padding: 0 8px;
    }
}

@media (max-width: 1400px) {
    :root {
        --header-h: 76px;
    }

    .brand__logo {
        height: 56px;
    }

    .brand__product,
    .header__tag {
        font-size: 21px;
    }

    .brand__divider {
        height: 34px;
    }
}

@media (max-width: 1120px) {
    .header__tag span {
        display: none;
    }

    /* The footer stacks here rather than at 860px. On one row this width was
       already wrapping the support line and the copyright into a box fixed at
       54px tall, and the sign-in shortcuts only tighten it further — stacked,
       each group gets a full row of its own instead. */
    .site-footer {
        height: auto;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding: 18px 16px;
        text-align: center;
    }

    .footer__copy {
        text-align: center;
    }

    /* The stacked centre row has the full width back, and a touch screen has
       no hover to reveal a title tooltip — so the labels come back too. */
    .footer__center {
        flex-wrap: wrap;
        gap: 12px 18px;
    }

    .footer__portal-label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip-path: none;
    }

    .footer__portal {
        gap: 8px;
        padding: 0 11px;
    }
}

/* below this the lockup needs the whole bar to itself */
@media (max-width: 640px) {
    /* the shortcuts drop to a row of their own around here, which would leave
       the divider dangling at the end of the legal links */
    .footer__pipe {
        display: none;
    }

    .header__tag {
        display: none;
    }
}

/* on small phones the logo alone carries the branding */
@media (max-width: 440px) {
    .brand__divider,
    .brand__product {
        display: none;
    }
}

@media (max-width: 1280px) {
    .hero {
        padding: 48px 44px;
    }

    .form-panel {
        padding: 24px 20px;
    }

    .form-card {
        padding: 22px 22px 26px;
    }

    .form-head__title {
        font-size: 27px;
    }

    .btn-submit {
        min-width: 340px;
    }
}

@media (max-width: 1024px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .hero {
        border-right: 0;
        border-bottom: 1px solid var(--red);
        padding: 54px 40px 60px;
    }

    .hero__inner,
    .hero__lead,
    .pillars {
        max-width: 640px;
    }

    .pillars {
        max-width: 560px;
    }
}

@media (max-width: 860px) {
    :root {
        --header-h: 68px;
    }

    .site-header {
        padding: 0 16px;
    }

    .brand {
        gap: 14px;
    }

    .brand__logo {
        height: 46px;
    }

    .brand__divider {
        height: 28px;
    }

    .brand__product {
        font-size: 18px;
    }

    .header__tag svg {
        width: 28px;
        height: 28px;
    }

    .hero {
        padding: 40px 22px 46px;
    }

    .grid {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 15px;
    }

    /* 16px keeps iOS Safari from zooming the page on focus, and the taller
       controls give thumbs a proper target. */
    .input,
    .select,
    .textarea {
        height: 46px;
        font-size: 16px;
    }

    /* keep the flattened date field the same height as the other controls */
    .input[type="date"] {
        min-height: 46px;
    }

    .textarea {
        height: 120px;
        min-height: 120px;
    }

    .field__label {
        font-size: 13.5px;
    }

    .consent {
        margin: 18px 0 16px;
    }

    .consent input[type="checkbox"] {
        width: 26px;
        height: 26px;
    }

    .consent input[type="checkbox"]:checked::after {
        left: 9px;
        top: 5px;
        width: 6px;
        height: 12px;
    }

    .consent__text {
        font-size: 13px;
    }

    .btn-submit {
        min-width: 0;
        width: 100%;
        height: 52px;
        font-size: 16px;
    }
}

@media (max-width: 860px) {
    .admin {
        padding: 28px 16px 50px;
    }

    .admin__head {
        align-items: flex-start;
    }

    .admin__search {
        flex-wrap: wrap;
    }

    .admin__search .input {
        max-width: none;
        flex: 1 1 200px;
    }
}

@media (max-width: 560px) {
    .pillars {
        grid-template-columns: 1fr;
    }

    .form-shell {
        padding: 12px;
    }

    .form-head {
        gap: 14px;
    }

    .form-head__title {
        font-size: 23px;
    }

    .doc__title {
        font-size: 27px;
    }

    .thanks__card {
        padding: 34px 24px 30px;
    }
}

/* ---------------------------------------------------------
   Admin — Events and Engagements Gallery
   --------------------------------------------------------- */

.gallery-upload {
    margin: 0 0 26px;
    padding: 18px 20px;
    background: var(--panel-2);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
}

.gallery-upload__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.gallery-upload__row .input {
    flex: 1;
}

.gallery-upload__hint {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--text-mute);
}

.gallery-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.gallery-card {
    display: flex;
    flex-direction: column;
    background: var(--panel-2);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.gallery-card--inactive {
    border-style: dashed;
}

.gallery-card--inactive .gallery-card__photo {
    opacity: .45;
}

.gallery-card__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-bottom: 1px solid var(--field-border);
}

.gallery-card__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px 0;
}

.gallery-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-card__date {
    font-size: 12px;
    color: var(--text-mute);
}

.gallery-card__flag {
    font-size: 12px;
    font-weight: 600;
    color: var(--red-bright);
}

.gallery-card__settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
}

.gallery-card__order {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
}

.gallery-card__order .input {
    width: 74px;
    padding: 6px 8px;
    font-size: 13px;
}

.gallery-card__check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text-dim);
    cursor: pointer;
}

.gallery-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 14px;
}

/* The Replace control is a styled label over a hidden file input, so
   choosing a file submits immediately. */
.gallery-card__replace-label {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.gallery-card__replace-label input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}