/* Tritek Services Quote page — hero "coupon ticket" + quote form card.
   Loaded on the WordPress /services-quote/ page (page 2201) via the Raw HTML
   block in wordpress/quote-page.html, with quote-form.js injecting the <link>
   as a fallback if the block's own <link> is stripped.

   Every rule is scoped under .tq-page so Salient's global form/heading styles
   can't leak in (and ours can't leak out). */

.tq-page {
  --tq-blue: #0693e3;
  --tq-blue-deep: #0574b8;
  --tq-cyan: #5fe0ff;
  --tq-night: #04101f;
  --tq-ink: #0f1a2b;
  --tq-muted: #5b6b7f;
  --tq-line: #d9e2ec;
  --tq-glass: rgba(255, 255, 255, 0.07);
  --tq-glass-edge: rgba(255, 255, 255, 0.16);
  font-family: inherit;
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.tq-page *, .tq-page *::before, .tq-page *::after { box-sizing: border-box; }

/* ---------- Hero: full-bleed photo with a night-blue wash ---------- */
/* Salient pads the page wrapper 40px under the header; the hero should sit flush. */
.container-wrap { overflow-x: clip; padding-top: 0 !important; }
.container-wrap .main-content > .row { padding-top: 0 !important; }
.tq-hero {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 96px);
  background: var(--tq-night) url("https://tritektinting.com/wp-content/uploads/2024/06/Mclaren_720s_PPF_XPEL_Window_Tint_7-scaled.jpg") center 35% / cover no-repeat;
}
.tq-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 22% 18%, rgba(6, 147, 227, 0.32), transparent 70%),
    linear-gradient(100deg, rgba(4, 16, 31, 0.95) 0%, rgba(4, 16, 31, 0.86) 45%, rgba(4, 16, 31, 0.62) 100%);
}
.tq-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 920px) {
  .tq-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The coupon ticket ---------- */
.tq-ticket { max-width: 560px; }
.tq-stub, .tq-perf, .tq-body {
  background: var(--tq-glass);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--tq-glass-edge);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tq-stub, .tq-perf, .tq-body { background: rgba(6, 20, 40, 0.86); }
}
.tq-stub {
  border-radius: 22px 22px 0 0;
  border-bottom: 0;
  padding: 30px 34px 26px;
}
.tq-body {
  border-radius: 0 0 22px 22px;
  border-top: 0;
  padding: 24px 34px 30px;
}
/* Perforation row: notches punched out of both sides, dashed tear line, "-OR-" in the middle */
.tq-perf {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  height: 28px;
  border-top: 0; border-bottom: 0;
  padding: 0 30px;
  -webkit-mask-image:
    radial-gradient(circle 14px at 0 50%, transparent 13.5px, #000 14.5px),
    radial-gradient(circle 14px at 100% 50%, transparent 13.5px, #000 14.5px);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle 14px at 0 50%, transparent 13.5px, #000 14.5px),
    radial-gradient(circle 14px at 100% 50%, transparent 13.5px, #000 14.5px);
  mask-composite: intersect;
}
.tq-perf::before, .tq-perf::after {
  content: ""; flex: 1; height: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.32);
}
.tq-perf span {
  font-family: "Barlow Condensed", "Montserrat", inherit;
  font-weight: 700; font-size: 15px; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}

.tq-page .tq-lead {
  margin: 0 0 2px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}
.tq-big {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 22px;
}
.tq-num {
  font-family: "Barlow Condensed", "Montserrat", Impact, sans-serif;
  font-weight: 800;
  font-size: clamp(64px, 18vw, 116px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #eefbff;
  text-shadow:
    0 0 6px rgba(95, 224, 255, 0.55),
    0 0 22px rgba(95, 224, 255, 0.45),
    0 0 60px rgba(6, 147, 227, 0.55);
}
.tq-num sup {
  font-size: 0.32em; font-weight: 700;
  vertical-align: top; position: relative; top: 0.12em;
  color: var(--tq-cyan); text-shadow: none;
}
.tq-coupon {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.01em;
  color: #fff;
}

.tq-offer { display: flex; gap: 14px; align-items: flex-start; }
.tq-offer .tq-ico {
  flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(95, 224, 255, 0.12);
  border: 1px solid rgba(95, 224, 255, 0.35);
  color: var(--tq-cyan);
}
.tq-offer .tq-ico svg { width: 22px; height: 22px; }
.tq-page .tq-offer strong {
  display: block;
  font-size: 20px; font-weight: 800; line-height: 1.2;
  color: #fff; margin: 4px 0 3px;
}
.tq-page .tq-offer span.tq-sub {
  display: block;
  font-size: 14px; color: rgba(255, 255, 255, 0.72);
}
.tq-stamp {
  display: inline-block;
  margin: 22px 0 0 58px;
  padding: 7px 14px;
  border: 2px solid var(--tq-cyan);
  border-radius: 8px;
  color: var(--tq-cyan);
  font-family: "Barlow Condensed", "Montserrat", inherit;
  font-weight: 700; font-size: 19px; letter-spacing: 0.04em; line-height: 1;
  white-space: nowrap;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 3px rgba(95, 224, 255, 0.08), 0 0 24px rgba(95, 224, 255, 0.25);
}

.tq-page .tq-copy {
  max-width: 560px;
  margin: 30px 0 0;
  font-size: 16px; line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}
.tq-page .tq-note {
  max-width: 560px;
  margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.6; font-style: italic;
  color: rgba(255, 255, 255, 0.62);
}
.tq-page .tq-note + .tq-note { margin-top: 6px; }
.tq-badges {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  max-width: 560px;
}
/* !important: Salient applies its own img height/max-width rules inside .wpb_wrapper */
.tq-page .tq-badges img { display: block; height: 52px !important; width: auto !important; max-width: none; opacity: 0.95; }
.tq-page .tq-badges img.tq-bbb { height: 46px !important; border-radius: 6px; }

/* ---------- The form card ---------- */
.tq-card {
  position: relative;
  background: #fff;
  color: var(--tq-ink);
  border-radius: 22px;
  padding: 30px 32px 32px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.tq-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--tq-blue), var(--tq-cyan));
}
.tq-page .tq-card h2 {
  margin: 0 0 6px;
  font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--tq-ink);
  text-transform: none; /* Salient capitalizes h2 by default */
}
.tq-page .tq-card .tq-card-sub {
  margin: 0 0 24px;
  font-size: 14.5px; line-height: 1.5;
  color: var(--tq-muted);
}

.tritek-form { max-width: none; margin: 0; font-family: inherit; }
.tritek-form .field-group { margin-bottom: 16px; }
.tritek-form .field-row { display: flex; gap: 14px; }
.tritek-form .field-row > .field-group { flex: 1; min-width: 0; }
.tritek-form label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
  color: var(--tq-ink);
}
.tritek-form input,
.tritek-form select,
.tritek-form textarea {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--tq-line);
  border-radius: 11px;
  font-family: inherit; font-size: 15px; line-height: 1.4;
  background: #fff; color: var(--tq-ink);
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.tritek-form input::placeholder,
.tritek-form textarea::placeholder { color: #9aa7b6; }
.tritek-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.tritek-form textarea { resize: vertical; min-height: 88px; }
.tritek-form input:focus,
.tritek-form select:focus,
.tritek-form textarea:focus {
  outline: none;
  border-color: var(--tq-blue);
  box-shadow: 0 0 0 4px rgba(6, 147, 227, 0.16);
}
.tritek-form .field-error {
  color: #dc2626; font-size: 13px; margin-top: 5px; display: none !important;
}
.tritek-form .field-error.visible { display: block !important; }

/* Category-specific fields sit in a tinted panel so they read as "part of your choice" */
.tritek-form .conditional-section { display: none !important; }
.tritek-form .conditional-section.active { display: block !important; }
.tritek-form .tq-panel {
  background: #f1f7fd;
  border: 1px solid #d5e7f7;
  border-radius: 14px;
  padding: 16px 16px 2px;
  margin-bottom: 16px;
}

.tritek-form .tq-captcha { display: flex; justify-content: center; margin-bottom: 18px; }

.tritek-form button[type="submit"] {
  display: block; width: 100%;
  margin: 0;
  padding: 16px 20px;
  border: 0; border-radius: 13px;
  font-family: inherit; font-size: 17px; font-weight: 800; letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(180deg, #1aa3ee 0%, var(--tq-blue) 60%, var(--tq-blue-deep) 100%);
  box-shadow: 0 12px 28px -10px rgba(6, 147, 227, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}
.tritek-form button[type="submit"]:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 32px -10px rgba(6, 147, 227, 0.8); }
.tritek-form button[type="submit"]:active { transform: translateY(0); }
.tritek-form button[type="submit"]:focus-visible { outline: 3px solid var(--tq-cyan); outline-offset: 3px; }
.tritek-form button[type="submit"]:disabled {
  background: #a5b1c0; box-shadow: none; transform: none; filter: none; cursor: not-allowed;
}

/* Success state (form.innerHTML is replaced by quote-form.js) */
.tritek-form .success-msg { text-align: center; padding: 36px 16px; }
.tritek-form .success-msg svg { width: 64px; height: 64px; margin: 0 auto 16px; color: #16a34a; display: block; }
.tritek-form .success-msg h3 { font-size: 24px; font-weight: 800; margin: 0 0 8px; color: var(--tq-ink); }
.tritek-form .success-msg p { color: var(--tq-muted); font-size: 15px; margin: 0; }
.tritek-form .success-msg a { color: var(--tq-blue); font-weight: 700; text-decoration: none; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .tq-wrap { padding: 0 16px; }
  .tq-stub { padding: 24px 22px 20px; }
  .tq-body { padding: 20px 22px 24px; }
  .tq-perf { padding: 0 24px; }
  .tq-big { gap: 12px; margin-bottom: 18px; }
  .tq-page .tq-offer strong { font-size: 18px; }
  .tq-stamp { margin-left: 0; font-size: 16px; padding: 6px 11px; }
  .tq-card { padding: 24px 18px 24px; border-radius: 18px; }
  .tritek-form .field-row { flex-direction: column; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tritek-form button[type="submit"] { transition: none; }
  .tritek-form button[type="submit"]:hover { transform: none; }
}