.quote-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 8%, rgba(37,99,255,.10), transparent 28%),
    #f5f8fc;
}

.quote-back {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
}

.quote-main {
  width: min(1000px, calc(100% - 34px));
  margin: auto;
  padding: 85px 0 110px;
}

.quote-intro {
  max-width: 790px;
  margin-bottom: 50px;
}

.quote-intro h1 {
  color: var(--navy);
  font-size: clamp(50px, 8vw, 82px);
}

.quote-intro h1 span {
  color: var(--blue);
}

.quote-intro > p:not(.eyebrow) {
  max-width: 720px;
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
}

.quote-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

.quote-trust span {
  padding: 9px 13px;
  border: 1px solid rgba(37,99,255,.15);
  background: #fff;
  border-radius: 999px;
  color: var(--navy-2);
  font-size: 13px;
  font-weight: 700;
}

.quote-card {
  padding: 46px;
  background: #fff;
  border-radius: 30px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 75px rgba(7,26,56,.11);
}

.quote-card-heading {
  margin-bottom: 35px;
}

.quote-card-heading h2 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1;
  letter-spacing: -.045em;
  margin-bottom: 12px;
}

.quote-card-heading p:last-child {
  color: var(--muted);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.form-grid label > span {
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

.form-wide {
  grid-column: 1 / -1;
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(7,26,56,.14);
  border-radius: 14px;
  padding: 15px 16px;
  color: var(--ink);
  background: #fbfdff;
  font: inherit;
  outline: none;
  transition: .2s ease;
}

textarea {
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,255,.08);
}

.form-notice {
  min-height: 24px;
  margin-top: 20px;
  color: #c33838;
  font-size: 14px;
  font-weight: 700;
}

.quote-send {
  display: flex;
  gap: 12px;
  margin-top: 7px;
}

.quote-send button {
  border: 0;
  cursor: pointer;
  font-size: 15px;
}

.quote-whatsapp {
  min-width: 205px;
}

.quote-email {
  min-width: 180px;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(7,26,56,.17) !important;
  box-shadow: none;
}

.send-note {
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.quote-speed {
  margin-top: 28px;
  padding: 28px 31px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 25%, rgba(0,180,255,.28), transparent 30%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
}

.quote-speed span,
.quote-speed strong {
  display: block;
}

.quote-speed span {
  margin-bottom: 9px;
  color: #7fc8ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.quote-speed strong {
  max-width: 760px;
  font-size: 24px;
  line-height: 1.25;
}

.quote-speed p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.66);
}

.quote-footer {
  position: relative;
  overflow: hidden;
}

@media (max-width: 680px) {
  .quote-main {
    padding-top: 55px;
  }

  .quote-card {
    padding: 30px 20px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-wide {
    grid-column: auto;
  }

  .quote-send {
    flex-direction: column;
  }

  .quote-send button {
    width: 100%;
  }
}


/* =========================================================
   WEB BY DON — SHARED CTA SHAPE
   ========================================================= */

:root {
  --wbd-button-radius: 8px;
}


button,
input[type="submit"],
a.button,
.button,
[class*="button"] {
  border-radius:
    var(--wbd-button-radius) !important;
}


/* =========================================================
   WEB BY DON — QUOTE PAGE BRAND HEADER
   ========================================================= */

.quote-header {
  width:
    min(1120px, calc(100% - 48px));

  margin:
    0 auto;

  padding:
    26px 0 10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;
}


.quote-brand {
  display:
    inline-flex;

  align-items:
    center;

  flex-shrink:
    0;
}


.quote-brand-logo {
  display:
    block;

  width:
    150px;

  max-width:
    100%;

  height:
    auto;
}


.quote-back {
  display:
    inline-flex;

  align-items:
    center;

  min-height:
    40px;

  color:
    #0a1d3c;

  font-size:
    13px;

  font-weight:
    750;

  text-decoration:
    none;

  transition:
    color .2s ease,
    transform .2s ease;
}


.quote-back:hover {
  color:
    #246dff;

  transform:
    translateX(-2px);
}


@media (max-width: 620px) {

  .quote-header {
    width:
      calc(100% - 34px);

    padding:
      18px 0 6px;

    gap:
      14px;
  }


  .quote-brand-logo {
    width:
      118px;
  }


  .quote-back {
    min-height:
      36px;

    font-size:
      11px;
  }

}


/* =========================================================
   WEB BY DON — QUOTE HEADER LANGUAGE CONTROL
   ========================================================= */

.quote-header-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    18px;
}


.quote-page .language-trigger {
  color:
    #0a1d3c;

  border-color:
    rgba(20,60,120,.14);

  background:
    rgba(255,255,255,.62);
}


.quote-page .language-trigger:hover {
  background:
    #fff;

  border-color:
    rgba(36,109,255,.28);
}


.quote-page .language-chevron {
  color:
    rgba(10,29,60,.45);
}


@media (max-width: 620px) {

  .quote-header-actions {
    gap:
      10px;
  }


  .quote-page .language-trigger {
    height:
      36px;

    min-width:
      68px;
  }


  .quote-back {
    white-space:
      nowrap;
  }

}


/* =========================================================
   WEB BY DON — RTL FORM DETAIL
   URLs remain LTR in every language.
   ========================================================= */

html[dir="rtl"] .quote-page input[type="url"] {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}