/* Supporting pages and the contact form. Same tokens as the homepage. */

/* Photographic page header (featured image set in the page editor). */
.page-head { position: relative; isolation: isolate; overflow: hidden; }
.page-head--photo { padding-block: clamp(6rem, 4rem + 8vw, 11rem) var(--sp-5); border-bottom: 0; }
.page-head__media { position: absolute; inset: 0; z-index: -1; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
.page-head--photo .page-head__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(25 29 31 / 0.92) 0%, rgb(25 29 31 / 0.6) 55%, rgb(25 29 31 / 0.25) 100%), linear-gradient(0deg, rgb(25 29 31 / 0.7), transparent 50%); }
.page-head__intro { margin: var(--sp-2) 0 0; max-width: 38rem; font-size: var(--fs-lg); color: rgb(255 255 255 / 0.85); }
.page { background: var(--warm-white); }
.page__body > * + * { margin-top: var(--sp-5); }

/* Contact: form beside details. */
.contact { display: grid; gap: var(--sp-4); max-width: none; margin-top: 0; }
@media (min-width: 64em) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--sp-5); align-items: start; } .contact__details { position: sticky; top: calc(var(--header-h) + var(--sp-3)); } }
.contact__form { background: var(--white); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.contact__details { background: var(--graphite); color: var(--white); padding: var(--sp-4); border-radius: var(--radius-panel); }
.contact__details h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.contact__details .contact__list div { grid-template-columns: 1fr; gap: 0.2rem; border-bottom-color: rgb(255 255 255 / 0.15); }
.contact__details dt { color: var(--steel-light); }
.contact__details a { color: var(--white); }

.enquiry { display: grid; gap: var(--sp-3) var(--sp-3); }
@media (min-width: 40em) { .enquiry { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--wide, .enquiry__errors, .enquiry__intro { grid-column: 1 / -1; } }
.enquiry__intro { margin: 0; font-size: var(--fs-lg); }
.field { display: grid; gap: 0.35rem; align-content: start; }
.field label { font-weight: 600; font-size: var(--fs-sm); }
.field input, .field select, .field textarea {
	width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; border: 1px solid var(--steel-light); border-radius: var(--radius-control);
	background: var(--paper); color: var(--graphite); font: 400 var(--fs-md)/1.4 var(--font-body);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--graphite); outline-offset: 1px; background: var(--white); }
.field [aria-invalid="true"] { border-color: #b42318; border-width: 2px; }
.field__error { margin: 0; color: #b42318; font-size: var(--fs-sm); font-weight: 600; }
.enquiry__errors { padding: var(--sp-2) var(--sp-3); border: 2px solid #b42318; border-radius: var(--radius-control); background: #fef3f2; }
.enquiry__notice, .enquiry__required { margin: 0; font-size: var(--fs-sm); color: var(--steel); }
.enquiry__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry .btn--primary { border-color: var(--graphite); }
.enquiry-done { padding: var(--sp-4); border-top: 4px solid var(--signal); }
.enquiry-done h2 { font-size: var(--fs-xxl); margin-bottom: var(--sp-2); }

/* Applications: alternating editorial rows. */
.app-rows { display: grid; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }
.app-row { display: grid; gap: var(--sp-3); align-items: center; }
.app-row__media { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: var(--graphite); }
.app-row__media img { width: 100%; height: 100%; object-fit: cover; }
.app-row__title { font-size: var(--fs-xxl); }
.app-row__text { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-lg); color: var(--steel); }
.app-row .index__grades { margin: 0 0 var(--sp-3); }
@media (min-width: 64em) { .app-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-5); } .app-row--flip .app-row__media { order: 2; } }

/* Quality page, empty states, Our Story figure. */
.quality-points { margin-top: 0; }
.page-docs h2, .page-empty-block h2 { font-size: var(--fs-xxl); margin-bottom: var(--sp-2); }
.page-empty { max-width: 40rem; color: var(--steel); font-size: var(--fs-lg); }
.page-empty__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--sp-3); }
.page .grade { border-radius: var(--radius-panel); padding-inline: clamp(1rem, 3vw, 3rem); }
.story-figure { margin: 0; }
.story-figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
.story-figure figcaption { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--steel); }

/* Long product names in the select must not widen the form on small phones. */
.contact > *, .enquiry > *, .field { min-width: 0; }
.field select { max-width: 100%; text-overflow: ellipsis; }