@charset "utf-8";
/* ==========================================================================
   BECT Ltd — Contact Page Template Stylesheet
   Phase 3A · 26 July 2026
   Design system:

   THIS FILE EXTENDS bect-redesign-core.css AND DOES NOT REPLACE IT.
   Load order:
       <link rel="stylesheet" href="style/bect-redesign-core.css" />
       <link rel="stylesheet" href="style/bect-redesign-contact.css" />

   Nothing here overrides an approved core value; this file only ADDS.
   Reused from core, no new CSS written: .breadcrumb, .btn, .card, .grid,
   .band, .site-footer, .section, .eyebrow, .link-arrow, .proto-banner.

   ⚠ THIS PAGE IS THE ONE REDESIGNED PAGE THAT STILL LOADS WEBSITE X5's
   JAVASCRIPT, and it must. The contact form has no action or method: it is
   bound entirely by x5engine, which injects the hidden imJsCheck field that
   imemail/imEmailForm.php validates before sending. Removing x5engine would
   silently break enquiry delivery. See

   Because X5's own stylesheets are still NOT loaded, sections 8 and 9 below
   style the small amount of DOM x5engine generates at runtime (validation
   tips and the generic error line), so it does not appear unstyled.

   PROTOTYPE ONLY. Not published. Does not modify any X5 file.
   ========================================================================== */

/* ---------- 1. CONTACT HERO --------------------------------------------- */
/* Text only. A contact page has no photographic subject, and inventing one
   would add weight for nothing. Same navy field and accent rule as the
   approved service and equipment heroes, so the page still reads as one site. */
.contact-hero {
  background: var(--c-navy-deep);
  color: #fff;
  padding-block: var(--s-8);
  border-bottom: 4px solid var(--c-accent);
}
.contact-hero h1 { color: #fff; }
.contact-hero__lead {
  color: rgba(255,255,255,.92);
  font-size: var(--fs-lead);
  margin-top: var(--s-5);
  max-width: 60ch;
}

/* ---------- 2. TWO-COLUMN LAYOUT ---------------------------------------- */
/* Form first in the source order, because it is the purpose of the page.
   Details sit alongside on desktop and below on smaller screens. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-8);
  align-items: start;
}

/* ---------- 3. CONTACT DETAILS PANEL ------------------------------------ */
.contact-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-6);
  position: sticky;
  top: calc(var(--header-h) + var(--s-4));
}
.contact-panel h2 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.contact-panel h3 {
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: var(--s-2);
}
.contact-panel__block + .contact-panel__block {
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}
.contact-panel address { font-size: var(--fs-body); line-height: 1.6; color: var(--c-body); }
.contact-panel a { color: var(--c-navy); font-weight: 600; }

/* ---------- 4. FORM ----------------------------------------------------- */
.enquiry-form fieldset { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.enquiry-form legend {
  padding: 0; margin-bottom: var(--s-4);
  font-size: var(--fs-h4); font-weight: 600; color: var(--c-navy);
}
.form-row { margin-bottom: var(--s-5); }
.form-row label {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--fs-body); font-weight: 600; color: var(--c-navy);
}
/* Required marker. The asterisk is decorative and hidden from assistive
   technology; the accessible name carries "required" as real text, and the
   control also has required + aria-required. Colour is never the only cue. */
.req { color: var(--c-accent); margin-left: 2px; }

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="file"],
.enquiry-form textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-surface);
  /* FUNCTIONAL border: --c-border-fn (#767E8B, 4.10:1 on white). The
     decorative --c-border (1.47:1) would fail the 3:1 non-text threshold on a
     form control. */
  border: 1px solid var(--c-border-fn);
  border-radius: var(--radius);
  padding: 12px var(--s-4);
  min-height: 48px;            /* comfortably above the 44px target */
}
.enquiry-form textarea { min-height: 168px; resize: vertical; line-height: 1.6; }
.enquiry-form input[type="file"] { padding: 10px var(--s-3); }
.enquiry-form input:focus-visible,
.enquiry-form textarea:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-color: var(--c-navy);
}
.enquiry-form input:hover, .enquiry-form textarea:hover { border-color: var(--c-navy-light); }

.form-hint {
  display: block; margin-top: var(--s-2);
  font-size: var(--fs-small); color: var(--c-muted);
  max-width: none;
}
.form-note { font-size: var(--fs-small); color: var(--c-body); max-width: 62ch; }

/* Submit */
#imObjectForm_1_buttonswrap { margin-top: var(--s-6); }
.enquiry-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 32px;
  font: inherit; font-size: var(--fs-body); font-weight: 600; line-height: 1;
  color: #fff; background: var(--c-accent);
  border: 1.5px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.enquiry-form input[type="submit"]:hover { background: var(--c-accent-dark); }
.enquiry-form input[type="submit"]:focus-visible { outline: 3px solid var(--c-navy); outline-offset: 2px; }

/* ---------- 5. HONEYPOT ------------------------------------------------- */
/* X5's spam trap. It MUST remain in the DOM and MUST stay empty: the PHP
   rejects the submission if imSpProt has any value. X5's own stylesheet used
   to hide it; that stylesheet is not loaded here, so it is hidden explicitly.
   Without this rule a visitor would see a stray unlabelled text box, fill it,
   and have their enquiry rejected. */
.imspprot-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 6. ENQUIRY GUIDANCE ----------------------------------------- */
.guidance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin-top: var(--s-5); }
.guidance li {
  position: relative; padding-left: var(--s-5);
  font-size: var(--fs-body); color: var(--c-body);
}
.guidance li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-accent);
}

/* ---------- 7. SERVICE ENQUIRY CATEGORIES ------------------------------- */
.enquiry-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.enquiry-cats > li {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--radius);
  padding: var(--s-5);
}
.enquiry-cats h3 { font-size: var(--fs-h4); margin-bottom: var(--s-2); }
.enquiry-cats p { font-size: var(--fs-small); max-width: none; color: var(--c-body); }

/* ==========================================================================
   8–9. STYLING FOR DOM GENERATED BY x5engine AT RUNTIME
   These class names are produced by res/x5engine.deferrable.js, not written in
   the page source. They are styled here because X5's own stylesheets are not
   loaded. Appearance of these states needs a browser check by the owner.
   ========================================================================== */

/* ---------- 8. VALIDATION TIP ------------------------------------------- */
.imTipContent {
  background: var(--c-navy);
  color: #fff;
  font-size: var(--fs-small);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius);
  max-width: 40ch;
}

/* ---------- 9. GENERIC ERROR LINE --------------------------------------- */
.object-generic-error {
  display: block;
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: #FDECEA;
  border-left: 3px solid #B3261E;   /* --c-error equivalent, 5.9:1 on #FDECEA */
  border-radius: var(--radius);
  color: #7A1A13;
  font-size: var(--fs-small);
}

/* X5 marks invalid controls with .validator; give it a visible, non-colour-only
   treatment (thicker border as well as colour). */
.enquiry-form input.validator,
.enquiry-form textarea.validator { border: 2px solid #B3261E; }

/* ==========================================================================
   10. RESPONSIVE — X5 breakpoints 1162 / 720 / 480
   ========================================================================== */
@media (max-width: 1161px) {
  .contact-grid { gap: var(--s-7); }
  .enquiry-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-panel { position: static; }
}

@media (max-width: 720px) {
  .contact-hero { padding-block: var(--s-7); }
  .contact-panel { padding: var(--s-5); }
  .guidance { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
  .enquiry-cats { grid-template-columns: minmax(0, 1fr); }
  .enquiry-form input[type="submit"] { width: 100%; }
}

/* ---------- 11. REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .enquiry-form input[type="submit"] { transition: none; }
}

/* ---------- 12. PRINT --------------------------------------------------- */
@media print {
  .contact-hero { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .contact-hero h1, .contact-hero__lead { color: #000; }
  .enquiry-form input[type="submit"] { display: none; }
  .contact-panel, .enquiry-cats > li { border: 1px solid #999; break-inside: avoid; }
  .contact-panel { position: static; }
}


/* ---------- GRID ITEM SHRINK -------------------- */
/* A grid item's initial `min-width: auto` resolves to its MIN-CONTENT width,
   so an item refuses to shrink below its longest word even when its track is
   minmax(0, 1fr). At 200% text that made items overflow their own tracks and
   pushed the page sideways. `min-width: 0` releases the item; the text then
   wraps inside the track via the overflow-wrap rule in core section 5.
   No effect at normal text size, where nothing needs to shrink this far. */
.contact-grid > *, .guidance > *, .enquiry-cats > * { min-width: 0; }