/* Enquiry form, shared by /talk-to-us/ and /contact/ (markup: partials/enquiry-form.html, behaviour: assets/js/enquiry-form.js).
   Load after site.css and before the page CSS, so a page can place the card in its own grid.
   Layout: every visible field is one full-width column. Only the "Add details" grid pairs fields, from a 400px wide form
   (a container query, so it follows the card, not the window). Rhythm: 20px between fields, 8px from label to control,
   24px before each section (the "Add details" hairline, the send row). */

/* Card */
.enq-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-frame); /* a floating frame: 16px below 768, 24px from 768 (site.css) */
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: var(--highlight), var(--shadow-lg);
}
/* Phones: the card lines up with the page gutter like every other card (x = 16 to 359 at 375) */
@media (max-width: 767px) {
  .enq-card { padding: 20px 18px 22px; }
}
.enq-card-head { margin-bottom: var(--s-5); }
.enq-card-title { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; }
.enq-card[data-state="sent"] .enq-card-head { display: none; }

/* Without JavaScript the form can't send, so only the noscript email line shows */
html:not(.js) .enq-form { display: none; }
.enq-noscript { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.enq-form { container: enq / inline-size; }
.enq-summary { margin-bottom: var(--s-5); }
.enq-summary li { line-height: 1.45; }

/* Fields */
.enq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5) var(--s-4); }
@container enq (min-width: 400px) {
  .enq-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enq-grid-2 > .enq-full { grid-column: 1 / -1; }
}
.enq-grid .hint { margin-top: -2px; }
.enq-grid .textarea { min-height: 120px; }
.enq-grid .enq-notes { min-height: 96px; }
.label .optional[hidden], .label .req[hidden] { display: none; }
.enq-in { animation: enq-in var(--t-slow) var(--ease) both; }
@keyframes enq-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* "Add details": one quiet disclosure under a hairline, clearly secondary to the required fields.
   The 44px button row sits 8px under the hairline and 8px over the send button, so its text has the same 20px
   of air above and below as the fields have between them. */
.enq-more { margin-top: var(--s-6); padding-top: var(--s-2); border-top: 1px solid var(--line-soft); }
.enq-more-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 0 -6px; padding: 0 10px 0 6px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-2);
  font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1.3; cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.enq-more-icon {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--muted);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t) var(--ease);
}
/* A plus that turns into a minus when open */
.enq-more-icon::before, .enq-more-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; border-radius: 1px;
  background: currentColor; translate: -50% -50%; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.enq-more-icon::after { transform: rotate(90deg); }
.enq-more-btn[aria-expanded="true"] .enq-more-icon::after { transform: rotate(0deg); opacity: 0; }
.enq-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .01em;
}
@media (hover: hover) {
  .enq-more-btn:hover { color: var(--ink); background: var(--hover); }
  .enq-more-btn:hover .enq-more-icon { border-color: var(--ink-2); color: var(--ink); }
}
.enq-more-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.enq-more-panel { padding: var(--s-3) 0 var(--s-4); }
/* Company is the only optional field for other and no topic, so it takes the full row (support and billing pair it with the plan) */
:is([data-topic="other"], [data-topic="none"]) .enq-more .enq-company { grid-column: 1 / -1; }
.enq-more-panel.is-animating { overflow: hidden; }

/* Chips: native checkboxes and radios, visually replaced (arrows and space work as usual).
   Pills that wrap, 44px tall. A fixed icon slot on the left (a plus, or a ring for one choice) turns into
   a check when selected, so widths never shift. */
/* A select still on its empty placeholder option reads as muted, like the input placeholders */
.enq-form .select:has(> option[value=""]:checked) { color: var(--muted); }
.enq-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.enq-group > legend { padding: 0; margin-bottom: var(--s-2); }
.enq-group > .hint { margin: -2px 0 var(--s-3); }
.enq-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.enq-chip { position: relative; display: inline-flex; min-width: 0; max-width: 100%; cursor: pointer; }
.enq-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.enq-chip span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; padding: 10px 16px 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; color: var(--ink-2);
  font-size: 14.5px; font-weight: 500; line-height: 1.3;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.enq-chip span::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--muted);
  -webkit-mask: var(--enq-m-plus) center / contain no-repeat; mask: var(--enq-m-plus) center / contain no-repeat;
  transition: background-color var(--t-fast) var(--ease);
}
.enq-chip input[type="radio"] + span::before {
  box-sizing: border-box; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%; background: transparent;
  -webkit-mask: none; mask: none;
}
.enq-chip input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.enq-chip input:checked + span::before,
.enq-chip input[type="radio"]:checked + span::before {
  border: 0; border-radius: 0; background: var(--accent-text);
  -webkit-mask: var(--m-check) center / contain no-repeat; mask: var(--m-check) center / contain no-repeat;
}
.enq-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) {
  .enq-chip:hover input:not(:checked) + span { border-color: var(--ink-2); color: var(--ink); }
  .enq-chip:hover input:not(:checked) + span::before { background-color: var(--ink-2); }
  .enq-chip:hover input[type="radio"]:not(:checked) + span::before { background: transparent; border-color: var(--ink-2); }
}
:root { --enq-m-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); }

/* Honeypot: off screen, out of the tab order and hidden from assistive tech */
.enq-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Network error, filled in by the script */
.enq-fail:empty { display: none; }
.enq-fail {
  margin-top: var(--s-5); padding: 14px 16px; border: 1px solid var(--error); border-left-width: 3px; border-radius: 4px var(--r-sm) var(--r-sm) 4px;
  background: var(--surface); background: color-mix(in srgb, var(--error) 7%, var(--surface));
  color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
}
.enq-fail strong { color: var(--ink); font-weight: 600; }
.enq-fail a { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }

/* Send: the button and the reply time on one baseline, then the privacy line */
.enq-submit { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-4); margin-top: var(--s-6); }
.enq-more:not([hidden]) ~ .enq-submit { margin-top: var(--s-2); }
.enq-submit .btn[aria-disabled="true"] { cursor: progress; }
.enq-reply { color: var(--muted); font-size: 14px; line-height: 1.4; }
.enq-consent { margin-top: var(--s-4); font-size: 13.5px; line-height: 1.55; color: var(--muted); max-width: 64ch; }
.enq-consent a { color: var(--ink-2); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (hover: hover) { .enq-consent a:hover { color: var(--accent-text); } }
/* Touch widths: a taller hit area for the small privacy link without moving anything (WCAG 2.5.8) */
@media (max-width: 767px) { .enq-consent a { padding-block: 10px; margin-block: -10px; } }
@container enq (max-width: 439px) {
  .enq-submit { flex-direction: column; align-items: stretch; }
  .enq-submit .btn { width: 100%; }
  .enq-reply { text-align: center; }
}

/* Sent: a compact confirmation with the icon beside the text */
.enq-done { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.enq-done-icon {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text);
}
.enq-done-icon .icon { width: 20px; height: 20px; }
.enq-done-body { min-width: 0; padding-top: 6px; }
/* The heading only takes focus from script (tabindex -1) so screen readers land on it; it isn't a control, so no ring. */
.enq-done-title { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.015em; overflow-wrap: anywhere; }
.enq-done-title:focus, .enq-done-title:focus-visible { outline: none; }
.enq-done-text { margin-top: 6px; color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 52ch; overflow-wrap: anywhere; }
.enq-done-actions { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 479px) { .enq-done-actions { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  .enq-in { animation: none; }
  .enq-chip span, .enq-chip span::before, .enq-more-btn, .enq-more-icon, .enq-more-icon::before, .enq-more-icon::after { transition: none; }
}