/*
 * Contact page: the sign-in card (auth.css) inside the website's light header and footer. A Forest band holds the
 * split card; its Forest panel carries the promise and what happens next, its Paper form section the ContactForm
 * component with the shared floating-label fields, button, links, alerts and checkbox row. The light header and footer
 * come from landing.css, landing-precision.css and the shared light-header rules in use-case-film.css; this file holds
 * the card's layout and the parts only this form has (the topic selector, the asset bands, the counter, the receipt).
 * Linked from templates/contact/index.html.twig after auth.css (the CSP forbids CSS imports from JS).
 */
.contact-page {
    --contact-forest: #0e3b2a;
    --contact-ink: #1c1f1d;
    --contact-slate: #5c6660; /* 5.5:1 on paper */
    --contact-on-forest: #c3d2c8; /* secondary text on Forest */
    --contact-rule: #e0ddd5; /* dividers only */
    --contact-edge: #cfcbc1; /* tile edges; the radio inside each tile carries the 3:1 boundary */
    --contact-control: #7f8a83; /* control boundaries: 3.3:1 on paper */
    --contact-paper: #f7f5f0;
    --contact-paper-deep: #efece4;
    --contact-gold: #b8862b;
    --contact-gold-text: #8a6318; /* dark gold: small gold text, rings and focus on Paper */
    --contact-gold-light: #d9ae4e; /* gold on Forest */
    --contact-error: #a3341a;
}

.contact-page .marketing-header { position: sticky; }
/* The Forest band meets the deeper Forest footer directly; the light pages' paper rule would read as a seam. */
.contact-page .marketing-footer { border-top: 0; }
/* landing.css resets every button's font inside the marketing page; the shared button keeps its own. */
.contact-page .auth-button { font: 600 1rem/1.3 var(--font-body); }
/* Focus: dark gold on the light header and the Paper form section; Signal Gold on Forest (the breadcrumb, the panel
   and the footer, which keeps the precision pages' own ring). */
.contact-page :is(.marketing-header, .contact-panel) :is(a, button, summary):focus-visible { outline: 3px solid var(--contact-gold-text); outline-offset: 4px; }
.contact-page :is(.contact-breadcrumb, .auth-visual, .marketing-footer) :is(a, button, summary):focus-visible { outline: 3px solid var(--contact-gold-light); outline-offset: 4px; }
/* The precision pages ring everything in Signal Gold; on Paper, fields keep their own dark-gold ring (auth.css). */
.contact-page .auth-input:focus-visible { outline: 2px solid transparent; outline-offset: 0; }

.contact-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The Forest band the card floats on, between the light header and the footer. */
.contact-band { padding-bottom: clamp(56px, 8vw, 104px); background: var(--contact-forest); }
.contact-shell { width: min(100% - 96px, 1200px); margin-inline: auto; }

.contact-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; padding-block: 22px 26px; color: var(--contact-on-forest); font-size: 12px; }
.contact-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -13px -8px; padding-inline: 8px; color: var(--contact-paper); text-decoration: none; }
.contact-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The card: the Forest panel is two parts (the promise, then what happens next) beside the form section, which spans both rows.
   On narrow screens the form sits between them, so visitors reach it right after the promise. */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro form" "next form";
    width: min(100% - 96px, 1200px);
    max-width: none;
}

.contact-intro,
.contact-next { display: flex; align-items: stretch; justify-content: flex-start; text-align: left; }
.contact-intro { grid-area: intro; padding: 56px 52px 0; }
.contact-intro::after { content: none; }
.contact-next { grid-area: next; padding: 48px 52px 64px; }
.contact-next::before { content: none; }
.contact-panel { grid-area: form; justify-content: flex-start; padding: clamp(28px, 3.6vw, 52px); }

.contact-intro h1 {
    max-width: 11.5em;
    margin: 0;
    color: #fff;
    font: 700 clamp(32px, 2.9vw, 42px)/1.12 var(--font-display);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.contact-intro__summary { max-width: 42ch; margin: 22px 0 0; color: var(--contact-on-forest); font-size: 16px; line-height: 1.75; }

.contact-next__heading { margin: 0 0 24px; color: #fff; font: 600 15px/1.4 var(--font-display); letter-spacing: -0.01em; }
.contact-steps { position: relative; display: grid; gap: 24px; margin: 0; padding: 0 0 0 46px; list-style: none; }
.contact-steps::before { position: absolute; top: 15px; bottom: 15px; left: 14px; width: 1px; background: rgba(247, 245, 240, 0.2); content: ""; }
.contact-steps li { position: relative; }
.contact-steps li > span {
    position: absolute;
    top: -3px;
    left: -46px;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(247, 245, 240, 0.3);
    border-radius: 50%;
    background: var(--contact-forest);
    color: var(--contact-paper);
    font: 500 11px/1 var(--font-mono);
}
.contact-steps h3 { margin: 0; color: #fff; font: 600 15px/1.45 var(--font-display); letter-spacing: -0.005em; }
.contact-steps p { max-width: 42ch; margin: 5px 0 0; color: var(--contact-on-forest); font-size: 14px; line-height: 1.65; }

.contact-routes { margin: 44px 0 0; padding: 0; border-top: 1px solid rgba(247, 245, 240, 0.16); list-style: none; }
.contact-routes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-block: 6px; border-bottom: 1px solid rgba(247, 245, 240, 0.16); color: var(--contact-on-forest); font-size: 14px; }
.contact-routes a,
.contact-note__link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.18s ease;
}
.contact-routes a { color: var(--contact-gold-light); }
.contact-routes a:hover { color: #fff; }
.contact-note .contact-note__link { color: var(--contact-forest); text-decoration: none; }
.contact-note__link:hover,
.contact-sent__links a:hover { color: var(--contact-gold-text); }
.contact-routes a b,
.contact-note__link b,
.contact-sent__links a b { transition: transform 0.2s ease; }
.contact-routes a:hover b,
.contact-note__link:hover b,
.contact-sent__links a:hover b { transform: translateX(3px); }

/* The component inside the form section */
.contact-card { position: relative; }
.contact-card fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
/* Clear of the sticky header: a field reached from the error summary, and the form section, which scrolls into view
   from its top edge after a send (contact_form_controller.js). */
.contact-panel,
.contact-card [id] { scroll-margin-top: 104px; }

/* The result of a send (the error summary or a notice) sits above the form, in the shared summary and notice (auth.css). */
.contact-summary { margin: 0 0 28px; }

/* Topic selector: six Paper tiles edged like the fields; the chosen one turns white with a Forest edge and a gold node. */
.contact-legend { margin: 0 0 16px; padding: 0; color: var(--contact-forest); font: 600 clamp(19px, 1.55vw, 22px)/1.3 var(--font-display); letter-spacing: -0.02em; }
.contact-topics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr; /* every tile as tall as the tallest, so the grid reads evenly */
    gap: 10px;
}
.contact-topic {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-height: 78px;
    margin: 0;
    padding: 16px;
    border: 1.5px solid var(--contact-edge);
    border-radius: 12px;
    background: var(--contact-paper);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}
.contact-topic:hover { border-color: var(--contact-slate); }
.contact-topic:has(.contact-topic__input:checked) { border-color: var(--contact-forest); background: #fff; box-shadow: inset 0 0 0 1px var(--contact-forest); }
.contact-topic:has(.contact-topic__input:focus-visible) { outline: 3px solid var(--contact-gold-text); outline-offset: 2px; }
.contact-topic__input {
    display: grid;
    flex: none;
    place-items: center;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    border: 1.5px solid var(--contact-control);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    appearance: none;
    transition: border-color 0.18s ease;
}
.contact-topic__input::before { width: 8px; height: 8px; border-radius: 50%; background: var(--contact-gold); content: ""; transform: scale(0); transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1.3); }
.contact-topic__input:checked { border-color: var(--contact-gold-text); }
.contact-topic__input:checked::before { transform: scale(1); }
.contact-topic__input:focus-visible { outline: none; }
.contact-topic__label { display: block; color: var(--contact-forest); font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.contact-topic__description { display: block; margin-top: 4px; color: var(--contact-slate); font-size: 13px; line-height: 1.5; }
.contact-topics.has-error .contact-topic { border-color: var(--contact-error); }

/* Fields that follow the topic */
@keyframes contact-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.contact-reveal { animation: contact-reveal 0.26s ease-out both; }

.contact-context { display: grid; gap: 26px; margin-top: 16px; padding: 26px 18px 18px; border: 1px solid var(--contact-rule); border-radius: 12px; }
.contact-context .auth-field { margin-bottom: 0; }
.contact-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; margin: 16px 0 0; padding-block: 8px; }
.contact-note p { max-width: 44ch; margin: 0; font-size: 14px; line-height: 1.6; }
.contact-note strong { color: var(--contact-forest); font-weight: 600; }

.contact-select { position: relative; }
.contact-select::after { position: absolute; top: 50%; right: 20px; width: 8px; height: 8px; border-right: 2px solid var(--contact-forest); border-bottom: 2px solid var(--contact-forest); content: ""; pointer-events: none; transform: translateY(-70%) rotate(45deg); }

.contact-scale__legend { margin: 0 0 10px; padding: 0; color: var(--contact-ink); font-size: 14px; font-weight: 500; line-height: 1.4; }
.contact-scale__options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.contact-scale__option { position: relative; display: flex; margin: 0; }
.contact-scale__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.contact-scale__option span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border: 1.5px solid var(--contact-control);
    border-radius: 12px;
    background: var(--contact-paper);
    color: var(--contact-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.contact-scale__option:hover span { border-color: var(--contact-slate); }
/* Selected: a Forest edge and the gold state node in the corner, so choosing a band never moves its label. */
.contact-scale__option input:checked + span { border-color: var(--contact-forest); background: #fff; box-shadow: inset 0 0 0 1px var(--contact-forest); color: var(--contact-forest); font-weight: 600; }
.contact-scale__option input:checked + span::before { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--contact-gold-text); content: ""; }
.contact-scale__option input:focus-visible + span { outline: 3px solid var(--contact-gold-text); outline-offset: 2px; }
.contact-scale.has-error .contact-scale__option span { border-color: var(--contact-error); }
.contact-scale__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.contact-card .contact-scale__clear { min-height: 44px; margin: 0 0 -12px auto; padding: 0 2px; border: 0; background: none; color: var(--contact-forest); font: 500 13px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.contact-card .contact-scale__clear:hover { color: var(--contact-gold-text); }

/* Text fields: the shared floating-label fields in two columns */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin-top: 34px; }
.contact-field { min-width: 0; }
.contact-field__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.contact-count { flex: none; margin: 8px 0 0 auto; color: var(--contact-slate); font: 400 12px/1.5 var(--font-mono); white-space: nowrap; }
.contact-count.is-over { color: var(--contact-error); }

/* Consent: the shared checkbox row, under a rule */
.contact-consent { padding-top: 24px; border-top: 1px solid var(--contact-rule); }

.contact-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-verify { min-height: 65px; margin-top: 24px; }
.contact-verify__fallback { margin: 0; }

/* Send: the shared Forest button */
.contact-actions { margin-top: 28px; }

/* Sent: the enquiry reads back as a record, with its reference and a gold node for its current state. */
@keyframes contact-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes contact-node { from { transform: scale(0); } to { transform: scale(1); } }
.contact-sent { animation: contact-rise 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.contact-sent__title { max-width: 20ch; margin: 0; color: var(--contact-forest); font: 700 clamp(26px, 2.4vw, 32px)/1.2 var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
/* Focus arrives here from a send, not from the visitor tabbing, so it carries no ring. */
.contact-sent__title:focus { outline: none; }
.contact-sent__reply { margin: 14px 0 0; color: var(--contact-slate); font-size: 15.5px; line-height: 1.6; }
.contact-sent__reply strong { color: var(--contact-ink); font-weight: 600; overflow-wrap: anywhere; }
.contact-receipt { margin-top: 28px; overflow: hidden; border: 1.5px solid var(--contact-edge); border-radius: 12px; background: #fff; }
.contact-receipt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 16px 20px; border-bottom: 1px solid var(--contact-rule); background: var(--contact-paper-deep); }
.contact-receipt__label { color: var(--contact-slate); font-size: 12.5px; }
.contact-receipt__reference { color: var(--contact-forest); font: 500 18px/1.2 var(--font-mono); letter-spacing: 0.05em; }
.contact-receipt__state { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--contact-forest); font-size: 12.5px; font-weight: 600; }
.contact-receipt__state i { width: 9px; height: 9px; border-radius: 50%; background: var(--contact-gold); animation: contact-node 0.32s 0.28s cubic-bezier(0.2, 0.7, 0.2, 1.3) both; }
.contact-receipt__rows { margin: 0; padding: 4px 20px; }
.contact-receipt__rows div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--contact-rule); }
.contact-receipt__rows div:last-child { border-bottom: 0; }
.contact-receipt__rows dt { color: var(--contact-slate); font-size: 13px; font-weight: 400; }
.contact-receipt__rows dd { margin: 0; color: var(--contact-ink); font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.contact-sent__while { margin: 32px 0 6px; color: var(--contact-forest); font: 600 14px/1.4 var(--font-display); }
.contact-sent__links { margin: 0; padding: 0; border-top: 1px solid var(--contact-rule); list-style: none; }
.contact-sent__links a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; border-bottom: 1px solid var(--contact-rule); color: var(--contact-forest); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: color 0.18s ease; }

.contact-notsent,
.contact-noscript { margin: 0 0 20px; }

/* Without scripting the form cannot send, so the note with the email address takes its place. */
@media (scripting: none) {
    .contact-panel .contact-card { display: none; }
}

/* Beside the Forest panel the form section is narrow here; one topic per row keeps labels on one line. */
@media (min-width: 1001px) and (max-width: 1180px) {
    .contact-topics__grid { grid-template-columns: minmax(0, 1fr); }
    .contact-topic { min-height: 0; }
}

@media (max-width: 1000px) {
    .contact-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "form" "next"; width: min(100% - 64px, 720px); }
    .contact-intro { padding: 44px 44px 40px; }
    .contact-intro h1 { max-width: 15ch; }
    .contact-next { padding: 44px 44px 52px; }
}

@media (max-width: 700px) {
    .contact-shell,
    .contact-layout { width: calc(100% - 32px); }
    .contact-breadcrumb { padding-block: 16px 18px; }
    .contact-layout { border-radius: 20px; }
    .contact-intro { padding: 28px 22px 26px; }
    .contact-intro::before { top: -120px; left: -120px; }
    .contact-intro h1 { font-size: 30px; line-height: 1.14; }
    .contact-intro__summary { margin-top: 14px; font-size: 15px; line-height: 1.7; }
    .contact-panel { padding: 26px 18px 30px; }
    .contact-topics__grid,
    .contact-grid { grid-template-columns: minmax(0, 1fr); }
    /* On phones the six topics are a compact list; only the chosen one shows its description. */
    .contact-topics__grid { grid-auto-rows: auto; gap: 8px; }
    .contact-topic { align-items: center; min-height: 52px; padding: 12px 14px; }
    .contact-topic:has(.contact-topic__input:checked) { align-items: flex-start; }
    .contact-topic:not(:has(.contact-topic__input:checked)) .contact-topic__description { display: none; }
    .contact-topic__input { margin-top: 0; }
    .contact-topic:has(.contact-topic__input:checked) .contact-topic__input { margin-top: 1px; }
    .contact-grid { margin-top: 30px; }
    .contact-context { padding: 24px 14px 14px; }
    .contact-scale__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-receipt__head,
    .contact-receipt__rows { padding-inline: 16px; }
    .contact-receipt__rows div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .contact-next { padding: 32px 22px 40px; }
    .contact-routes { margin-top: 36px; }
}

@media (max-width: 360px) {
    .contact-scale__options { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .contact-reveal,
    .contact-sent,
    .contact-receipt__state i { animation: none; }
    .contact-topic,
    .contact-topic__input::before,
    .contact-scale__option span,
    .contact-routes a b,
    .contact-note__link b,
    .contact-sent__links a b { transition: none; }
}

/* Windows High Contrast and other forced palettes drop backgrounds and shadows: draw state and focus with system colours. */
@media (forced-colors: active) {
    .contact-topic__input { border-color: CanvasText; }
    .contact-topic__input:checked::before { background: CanvasText; forced-color-adjust: none; }
    .contact-topic:has(.contact-topic__input:checked) { outline: 2px solid CanvasText; outline-offset: -3px; }
    .contact-topic:has(.contact-topic__input:focus-visible) { outline: 3px solid Highlight; outline-offset: 2px; }
    .contact-scale__option input:checked + span { outline: 2px solid CanvasText; outline-offset: -3px; }
    .contact-scale__option input:is(:checked, :focus-visible) + span::before { background: CanvasText; forced-color-adjust: none; }
    .contact-scale__option input:focus-visible + span { outline: 3px solid Highlight; outline-offset: 2px; }
    .contact-receipt__state i { background: CanvasText; forced-color-adjust: none; }
}