/* The enquiry form as a quote builder (8 Oct 2026), on the Paper section of contact.html.
   Editorial, not SaaS: hairline cards, square corners, Times names, no icons or badges. Without JavaScript
   every step shows at once (quote.js adds .is-stepped and the step controls). */

.qb { --line: rgb(26 21 18 / 0.18); --line-strong: var(--ink); scroll-margin-top: calc(var(--header-h, 6rem) + var(--s-5)); }   /* each step scrolls in below the sticky menu */

/* Steps: the counter and the hairline that fills as the visitor moves through */
.qb__progress { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-7); padding: 0 0 var(--s-4); list-style: none;
  position: relative; border-bottom: 1px solid var(--line); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--umber); }
.qb__progress::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; transform: scaleX(var(--at, 0)); transform-origin: left; background: var(--line-strong); transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); }   /* 11 Oct: scaleX, not width (Emil review) */
.qb__progress li::before { content: attr(data-n) " "; font-family: var(--display); letter-spacing: 0; font-size: 1.2em; margin-right: 0.2em; }
.qb__progress li[aria-current="step"] { color: var(--ink); }
.qb__progress li.is-done { color: var(--ink); opacity: 0.55; }
@media (max-width: 48rem) {
  .qb__progress li:not([aria-current]) { display: none; }   /* phones: just the step you're on, e.g. "02 Package" */
  .qb__progress li[aria-current]::after { content: "  /  06"; color: var(--umber); }
}
@media (prefers-reduced-motion: reduce) { .qb__progress::after { transition: none; } }

.qb__step legend:focus { outline: none; }
.qb__step > .hint { margin: calc(var(--s-3) * -1) 0 var(--s-5); }
.qb__error { margin: 0 0 var(--s-4); }

/* Cards: a whole card is the choice. The real radio stays in the card for keyboards and screen readers. */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-6); }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-4) var(--s-5); border: 1px solid var(--line); cursor: pointer;
  transition: border-color var(--t-fast, 150ms) var(--ease-ui, ease), background-color var(--t-fast, 150ms) var(--ease-ui, ease); }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice__name { font-family: var(--display); font-size: calc((var(--step-1)) * 1.2); line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.choice__note { font-size: calc((var(--step--1)) * 1.2); color: var(--body-on-paper, var(--umber)); }
.choice__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); font-size: calc((var(--step--1)) * 1.2); color: var(--body-on-paper, var(--umber)); }
.choice__list li { padding-top: var(--s-1); border-top: 1px solid var(--line); }
.choice:has(input:checked) { border-color: var(--line-strong); box-shadow: inset 0 0 0 1px var(--line-strong); background: rgb(26 21 18 / 0.035); }
.choice:has(input:checked)::after { content: "Chosen"; position: absolute; top: var(--s-4); right: var(--s-4); font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.choice:has(input:focus-visible) { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: rgb(26 21 18 / 0.45); } }
.choice--line { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-6); }

/* Chips: small square tick buttons for "where it's used", how long, and where */
.field__label { font-size: calc((var(--step--1)) * 1.2); font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); font-size: calc((var(--step--1)) * 1.2); transition: border-color var(--t-fast, 150ms) var(--ease-ui, ease), background-color var(--t-fast, 150ms) var(--ease-ui, ease), color var(--t-fast, 150ms); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip input:focus-visible + span { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip:hover span { border-color: rgb(26 21 18 / 0.45); } }

/* Ticks: the extras, as a ruled list in two columns */
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); margin-bottom: var(--s-6); border-top: 1px solid var(--line); }
.tick-wrap, .ticks > .tick { border-bottom: 1px solid var(--line); }
.tick { display: flex; align-items: flex-start; gap: var(--s-3); padding-block: var(--s-3); cursor: pointer; font-size: calc((var(--step-0)) * 1.2); }
.tick input { appearance: none; flex: none; width: 1.05rem; height: 1.05rem; margin: 0.2rem 0 0; border: 1px solid var(--ink); background: transparent; cursor: pointer; display: grid; place-content: center; }
.tick input::after { content: ""; width: 0.55rem; height: 0.55rem; background: var(--ink); transform: scale(0); transition: transform 120ms var(--ease-ui, ease); }
.tick input:checked::after { transform: scale(1); }
.tick input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.tick small { display: block; font-size: calc((var(--step--1)) * 1.2); color: var(--body-on-paper, var(--umber)); }
.qb__step > .tick { margin-bottom: var(--s-5); }
.choice__count { display: flex; align-items: center; gap: var(--s-3); padding: 0 0 var(--s-3) calc(1.05rem + var(--s-3)); font-size: calc((var(--step--1)) * 1.2); }
.choice__count input { width: 4.5rem; }

/* Check and send: what they picked, as a ruled list */
.qb__review { margin: 0 0 var(--s-5); border-top: 1px solid var(--line); }
.qb__review div { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.qb__review dt { font-size: calc((var(--step--2)) * 1.2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--umber); padding-top: 0.2em; }
.qb__review dd { margin: 0; }

.qb__nav { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.qb__nav [data-next] { margin-left: auto; }

/* Without JavaScript: every step is visible and the Send button sits at the end, so hide nothing */
.qb:not(.is-stepped) .qb__review { display: none; }

@media (max-width: 48rem) {
  .choices, .choices--3, .ticks { grid-template-columns: minmax(0, 1fr); }
  .qb__review div { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
}
.choice__name { padding-right: 4.5rem; }   /* room for "Chosen" */
.choice__count input { font: inherit; padding: var(--s-1) var(--s-2); border: 0; border-bottom: 1px solid var(--umber); background: transparent; color: inherit; }
.qb .form__legal a { color: var(--ink); text-decoration-color: var(--umber); }
.qb__nav .qb__send { margin-left: auto; }
/* The date picker, styled like the other fields (styles.css covers text, email and tel only) */
.qb input[type="date"] { font: inherit; font-size: calc((var(--step-0)) * 1.2); color: inherit; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--umber); border-radius: 0; padding: var(--s-3) 0; min-height: 2.75rem; }
.qb input[type="date"]:focus-visible { outline: none; border-color: currentColor; box-shadow: 0 1px 0 0 currentColor; }
.qb .field.is-invalid input[type="date"] { border-color: currentColor; border-bottom-width: 2px; }

/* Required fields: a quiet asterisk, explained once at the top */
.qb .req { color: var(--umber); font-weight: 400; }
.qb legend .req { font-size: 0.6em; vertical-align: super; margin-left: 0.1em; }
.qb__req-note { margin: calc(var(--s-3) * -1) 0 var(--s-5); }

/* The practical details (11 Oct 2026): the title on the left, the questions on the right, as on the home FAQ */
.faq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--s-7); align-items: start; }
.faq-split h2 { margin: 0; }
@media (max-width: 48rem) { .faq-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }