/* Only the Request a Quote page loads this stylesheet. */
.quote-page { --quote-panel: #f3f5f9; --quote-line: #767f96; --quote-placeholder: #5f6b85; --quote-error: rgb(180, 22, 50); }
/* Conference room photo banner under the fixed header: a 35% dark overlay everywhere,
   plus a second shade behind the copy so white text stays above 4.5:1 on the
   lighter areas of the photo. */
.quote-banner { --quote-shade: rgb(10 14 22 / .4); padding-top: 5.5rem; background: linear-gradient(var(--quote-shade), var(--quote-shade)), linear-gradient(rgb(10 14 22 / .35), rgb(10 14 22 / .35)), #191a37 url("../images/bg-seating.jpg") center / cover no-repeat; border-bottom: 4px solid var(--accent); color: #fff; }
.quote-banner .container { padding-block: clamp(4rem, 8vw, 7rem); }
.quote-banner h1 { max-width: none; margin: 0 0 .75rem; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1.1; letter-spacing: -.03em; }
.quote-banner p { max-width: 40rem; margin: 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.55; }
@media (min-width: 48rem) {
  .quote-banner { padding-top: 11rem; background-image: linear-gradient(90deg, var(--quote-shade) max(55%, 44rem), rgb(10 14 22 / 0) calc(max(55%, 44rem) + 25%)), linear-gradient(rgb(10 14 22 / .35), rgb(10 14 22 / .35)), url("../images/bg-seating.jpg"); }
}
@media (min-width: 75rem) {
  .quote-banner { padding-top: calc(10.5rem + 3.3vw); }
}

/* Intro column beside a wider, open form. */
.quote-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-top: clamp(2rem, 4vw, 3.5rem); padding-bottom: clamp(3rem, 6vw, 6rem); }
.quote-intro h2 { margin: 0 0 1.25rem; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -.03em; }
.quote-intro p { max-width: 30rem; margin: 0; color: var(--muted); font-size: 1.125rem; line-height: 1.6; }
.quote-intro-media { width: 100%; max-width: 26.5rem; margin-top: 2rem; border-bottom: 4px solid var(--accent); }
.quote-form { min-width: 0; scroll-margin-top: 7rem; }
.quote-note { margin: 0 0 2.5rem; color: var(--muted); font-size: .9375rem; }

/* Floated legends lay out like blocks in Chrome and Safari, so margins apply. */
.quote-section, .quote-category, .quote-timeline { min-width: 0; margin: 0; padding: 0; border: 0; }
.quote-section { margin-bottom: 3.5rem; }
.quote-section > legend { float: left; width: 100%; margin-bottom: 1.75rem; padding: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.quote-section > legend + * { clear: both; }
.quote-required { margin-left: .125rem; color: var(--accent); }
.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }
.quote-field { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.quote-field label, .quote-timeline > legend { font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.quote-field input, .quote-field select, .quote-field textarea { width: 100%; min-height: 48px; margin-top: .25rem; padding: .625rem 0; border: 0; border-bottom: 1px solid var(--quote-line); border-radius: 0; background: transparent; color: var(--ink); line-height: 1.5; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease; }
.quote-field select { overflow: hidden; padding-right: 2rem; white-space: nowrap; text-overflow: ellipsis; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23191a37' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .25rem center / .875rem auto; cursor: pointer; }
.quote-field select:has(option[value=""]:checked) { color: var(--quote-placeholder); }
.quote-field option { color: var(--ink); }
.quote-field textarea { min-height: 7.5rem; margin-top: .75rem; padding: .75rem; border: 1px solid var(--quote-line); resize: vertical; }
.quote-field ::placeholder { color: var(--quote-placeholder); opacity: 1; }
.quote-field input:focus, .quote-field select:focus, .quote-field textarea:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.quote-field textarea:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.quote-field [aria-invalid="true"] { border-color: var(--quote-error); }
.quote-error { display: block; margin-top: .5rem; color: var(--quote-error); font-size: .875rem; font-weight: 700; line-height: 1.4; }

/* Service checkboxes, grouped by Solutions category. */
.quote-hint { margin: 0 0 1.5rem; color: var(--muted); }
/* Answers carried over from the Security Audits self-check. Green, not the
   brand red, so it reads as confirmation rather than a form error. */
.quote-from { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid #2e7d5b; background: rgb(46 125 91 / .08); }
.quote-from p { margin: 0 0 .5rem; font-weight: 700; }
.quote-from ul { margin: 0; padding-left: 1.25rem; }
.quote-from li + li { margin-top: .25rem; }
.quote-services .quote-error { margin: -1rem 0 1.5rem; }
.quote-categories { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 2.5rem; }
.quote-category > legend { float: left; width: 100%; margin-bottom: .5rem; padding: 0 0 .5rem; border-bottom: 1px solid var(--line); font-size: .9375rem; font-weight: 700; line-height: 1.4; }
.quote-checks, .quote-radios { clear: both; margin: 0; padding: 0; list-style: none; }
.quote-choice { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding-block: .375rem; line-height: 1.35; cursor: pointer; }
.quote-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.quote-choice input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* Info toggletips: the summary drops below the row, spanning its column. */
.quote-checks li { position: relative; display: flex; align-items: center; }
.quote-checks .quote-choice { min-width: 0; }
.quote-info { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -.25rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.quote-info span { display: inline-flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; border: 1.5px solid currentColor; border-radius: 50%; font-size: .75rem; font-weight: 700; line-height: 1; }
.quote-info:focus-visible { outline-offset: -6px; }
.quote-info[aria-expanded="true"] span { border-color: var(--ink); background: var(--ink); color: #fff; }
.quote-tip { display: none; position: absolute; top: calc(100% - .25rem); left: 0; z-index: 3; width: min(100%, 20rem); padding: .625rem .75rem; border-radius: .375rem; background: var(--ink); color: #fff; font-size: .875rem; line-height: 1.45; box-shadow: 0 10px 24px rgb(18 22 42 / .18); }
.quote-info[aria-expanded="true"] + .quote-tip { display: block; }
.quote-unsure { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 700; }
.quote-services.is-invalid .quote-category > legend, .quote-services.is-invalid .quote-unsure { border-color: var(--quote-error); }

.quote-timeline { margin-block: 2.5rem; }
.quote-timeline > legend { float: left; width: 100%; margin-bottom: .5rem; padding: 0; }
.quote-radios { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2rem; }
.quote-timeline .quote-error { margin-top: .25rem; }

.quote-consent { max-width: 48rem; margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.quote-status { margin: 1.25rem 0 0; color: var(--quote-error); font-weight: 700; }
.quote-status:empty { margin: 0; }
.quote-submit, .quote-card-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.quote-submit { width: 100%; min-height: 3.5rem; margin-top: 2rem; padding: .875rem 2.5rem; font-size: 1.0625rem; letter-spacing: .02em; }
.quote-submit:active { background: rgb(150, 18, 42); }

/* Other ways to reach the team. */
.quote-options { padding-block: clamp(3rem, 6vw, 5.5rem); border-top: 1px solid var(--line); }
.quote-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.quote-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.5rem, 3vw, 2rem); background: var(--quote-panel); border-radius: .5rem; }
.quote-card-copy { flex: 1; padding-bottom: 2.5rem; }
.quote-card h3 { margin: 0 0 .5rem; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.25; letter-spacing: -.02em; }
.quote-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.quote-card .quote-card-detail { margin-top: .5rem; color: var(--ink); font-size: .9375rem; }
.quote-card-cta { padding: calc(.75rem - 2px) calc(1.75rem - 2px); border: 2px solid #000; background: transparent; color: #000; transition: background-color .15s ease, color .15s ease; }
.quote-card-cta:active { background: #000; color: #fff; }

/* Call-back dialog, opened from the "We'll call you" card. */
:root:has(.callback-dialog[open]) { overflow: hidden; }
.callback-dialog { width: min(100% - 2rem, 30rem); max-width: none; max-height: calc(100% - 2rem); padding: 0; border: 0; border-radius: .5rem; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgb(10 14 22 / .3); overflow: auto; overscroll-behavior: contain; }
.callback-dialog::backdrop { background: rgb(10 14 22 / .55); }
.callback-panel { position: relative; padding: clamp(1.5rem, 5vw, 2.5rem); }
.callback-close { position: absolute; top: .5rem; right: .5rem; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.callback-dialog h2 { margin: 0 2.5rem .5rem 0; font-size: clamp(1.5rem, 4vw, 1.875rem); line-height: 1.2; letter-spacing: -.02em; }
.callback-request > p { margin: 0; color: var(--muted); line-height: 1.6; }
.callback-form { display: grid; gap: 1.5rem; margin-top: 1.75rem; }
.callback-form .quote-submit { width: 100%; margin-top: .5rem; }

@media (hover: hover) and (pointer: fine) {
  .quote-submit:hover { background: rgb(180, 22, 50); }
  .quote-card-cta:hover { background: #000; color: #fff; }
  .callback-close:hover { background: var(--quote-panel); }
  .quote-info:hover { color: var(--ink); }
  .quote-info:not([data-dismissed]):hover + .quote-tip, .quote-info:not([data-dismissed]) + .quote-tip:hover { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .quote-field input, .quote-field select, .quote-field textarea, .quote-submit, .quote-card-cta { transition: none; }
}
@media (min-width: 30rem) {
  .quote-submit { width: auto; min-width: 17rem; }
}
@media (min-width: 40rem) {
  .quote-categories, .quote-radios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 48rem) {
  .quote-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 2rem; }
  .quote-field { grid-column: 1 / -1; }
  .quote-half { grid-column: span 3; }
  .quote-third { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .quote-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); gap: clamp(3rem, 6vw, 6rem); }
  .quote-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}