/* Quote request page: the form on one side, direct contact on the other. Inherits tokens from home.css. */
.q { padding: calc(var(--m) + 110px) var(--m) clamp(72px, 9vw, 120px); max-width: 1320px; margin-inline: auto; }
.q__head { max-width: 46rem; }
.q__head h1 { font-size: var(--t-head); line-height: 1.3; }
.q__head p { margin-top: 14px; font-size: var(--t-lead); font-weight: 300; color: var(--muted); }
.q__grid { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; align-items: start; }

.q__form { padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: #ECE4D2; }
.q__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 20px; }
.q__row + .q__row, .q__field--full, .q__set { margin-top: 20px; }
.q__field { display: grid; gap: 8px; min-width: 0; }
.q__field label, .q__set legend { font-size: .9375rem; font-weight: 500; }
.q__field label b, .q__set legend b { color: #B5462F; font-weight: 600; }
.q__field input, .q__field select, .q__field textarea { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid transparent; border-radius: 14px; background: var(--cream); color: var(--ink); font: inherit; font-size: 1rem; transition: border-color .25s, box-shadow .25s; }
.q__field textarea { min-height: 150px; resize: vertical; line-height: 1.7; }
.q__field input::placeholder, .q__field textarea::placeholder { color: #8C867D; }
.q__field input:focus, .q__field select:focus, .q__field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(249, 192, 68, .45); }
.q__field input[dir="ltr"] { text-align: right; }
html[lang="en"] .q__field input[dir="ltr"] { text-align: left; }
.q__field .q__err { display: none; font-size: .875rem; color: #B5462F; }
.q__field.is-bad input, .q__field.is-bad textarea { border-color: #B5462F; }
.q__field.is-bad .q__err { display: block; }

.q__set { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.q__set legend { padding: 0; margin-bottom: 10px; }
.q__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.q__chip { position: relative; }
.q__chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.q__chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--cream); font-size: .9375rem; transition: background-color .25s, color .25s; cursor: pointer; }
.q__chip input:checked + span { background: var(--ink); color: var(--cream); }
.q__chip input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.q__set.is-bad .q__chips + .q__err { display: block; }
.q__set .q__err { display: none; margin-top: 8px; font-size: .875rem; color: #B5462F; }

.q__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.q__actions .btn { min-height: 50px; gap: 12px; padding-block: 5px; padding-inline: 22px 5px; border: 0; border-radius: 999px; font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; -webkit-appearance: none; appearance: none; background: var(--ink); color: var(--cream); text-decoration: none; transition: background-color .3s, transform .4s var(--spring); }
.q__actions .btn:hover { background: #3d3b37; }
.q__actions .btn:active { transform: scale(.97); }
.q__actions .btn .btn__ic { width: 40px; height: 40px; }
.q__actions .btn--wa .btn__ic { background: #25D366; color: #fff; }
.q__actions .btn--mail .btn__ic { background: var(--yellow); color: var(--ink); }
.q__actions .btn__ic svg { width: 18px; height: 18px; }
html[dir="ltr"] .q__actions .btn { padding-inline: 22px 5px; }
.q__note { margin-top: 14px; font-size: .875rem; color: var(--muted); }

.q__side { display: grid; gap: 16px; position: sticky; top: 104px; }
.q__card { padding: 28px; border-radius: 28px; background: var(--ink); color: var(--cream); }
.q__card h2 { font-size: 1.375rem; line-height: 1.4; }
.q__card p { margin-top: 8px; color: rgba(247, 241, 229, .78); font-weight: 300; }
.q__card .btn { margin-top: 20px; width: 100%; justify-content: space-between; background: #25D366; color: #fff; }
.q__card .btn .btn__ic { background: rgba(255, 255, 255, .2); }
.q__lines { margin-top: 20px; display: grid; gap: 10px; list-style: none; }
.q__lines a { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--ink-2); font-size: .9375rem; }
.q__lines a span:last-child { font-family: "Readex Pro", sans-serif; direction: ltr; }
.q__lines a:hover { background: #3d3b37; }
.q__card--light { background: #ECE4D2; color: var(--ink); }
.q__card--light p { color: var(--muted); }
.q__card--light ol { margin-top: 14px; display: grid; gap: 10px; padding-inline-start: 1.2em; }
.q__card--light li { font-size: .9375rem; }

/* the header sits on cream here, so it is solid from the start */
.page-quote .bar { top: 12px; inset-inline: 16px; padding: 8px 22px 8px 8px; border-radius: 999px; background: rgba(247, 241, 229, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); box-shadow: 0 18px 44px -20px rgba(40, 39, 37, .28), inset 0 0 0 1px rgba(40, 39, 37, .07); } /* taste-skill-ignore: the one floating sticky bar */
html[dir="ltr"] .page-quote .bar { padding: 8px 8px 8px 22px; }
.page-quote .bar .bar__logo .cream { display: none; }
.page-quote .bar .bar__logo .ink { display: block; }
.page-quote .bar__logo img { height: 34px; }
.page-quote .bar nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: .4em; }

@media (max-width: 1000px) { .q__grid { grid-template-columns: minmax(0, 1fr); } .q__side { position: static; } }
@media (max-width: 700px) {
  .q { padding-top: calc(var(--m) + 96px); }
  .q__row { grid-template-columns: minmax(0, 1fr); }
  .q__actions .btn { width: 100%; justify-content: space-between; }
  .page-quote .bar { padding: 6px 6px 6px 16px; }
  html[dir="ltr"] .page-quote .bar { padding: 6px 16px 6px 6px; }
}