/* ============================================
   DEMO REQUEST — Papyrus Software
   Scope: .dr-*  |  Tokens: --dr-*
   ============================================ */

:root {
  --dr-primary: #6bb8be;
  --dr-primary-dk: #5aa8ae;
  --dr-primary-deep: #3d8f96;
  --dr-primary-soft: #eaf5f6;
  --dr-navy: #1e293b;
  --dr-navy-900: #0f172a;
  --dr-text: #2c3e50;
  --dr-text-2: #475569;
  --dr-text-3: #94a3b8;
  --dr-bg: #f8f9fa;
  --dr-white: #ffffff;
  --dr-border: #e2e8f0;
  --dr-border-soft: #eef2f6;
  --dr-danger: #c2410c;
  --dr-danger-soft: #fff4ed;
  --dr-success: #157f6b;
  --dr-sticky-top: 96px;
  --dr-r: 14px;
  --dr-r-sm: 10px;
  --dr-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dr-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --dr-shadow: 0 10px 30px rgba(15, 23, 42, 0.09);
  --dr-shadow-lg: 0 28px 60px rgba(15, 23, 42, 0.16);
}

.contactus, .oh24btn, #go_up, .icon-chevron-up { display: none !important; }

/* Self-contained box model: do not rely on Bootstrap's global reset being
   present or loading first. */
.dr-page, .dr-page *, .dr-page *::before, .dr-page *::after { box-sizing: border-box; }

.dr-page {
  background: var(--dr-white);
  color: var(--dr-text-2);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

.dr-page h1, .dr-page h2, .dr-page h3, .dr-page h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: var(--dr-navy-900);
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 0.5em;
}

.dr-page p { line-height: 1.7; margin: 0 0 1.1em; }
.dr-page p:last-child { margin-bottom: 0; }
.dr-page ul, .dr-page ol { margin: 0; padding: 0; list-style: none; }
.dr-page *:focus-visible { outline: 3px solid var(--dr-primary); outline-offset: 3px; border-radius: 4px; }
.dr-page [hidden] { display: none !important; }

.dr-skip {
  position: absolute; top: -60px; left: 16px; z-index: 9999;
  padding: 12px 20px; background: var(--dr-navy-900); color: #fff;
  font-weight: 700; border-radius: 0 0 var(--dr-r-sm) var(--dr-r-sm);
  transition: top 0.2s var(--dr-ease);
}
.dr-skip:focus { top: 0; color: #fff; text-decoration: none; }

/* AOS safety net — keep content visible if aos.js fails to load */
.dr-page [data-aos]:not(.aos-init) { opacity: 1; transform: none; }


/* ============================================
   HERO
   ============================================ */
/* The photograph sits at the bottom of the stack, with a navy-to-teal wash
   over it so the headline keeps its contrast whichever image is in place.
   If the file is ever missing the wash alone still reads as the house hero,
   so the page never breaks. */
.dr-hero {
  position: relative;
  isolation: isolate;
  padding: 92px 0 96px;
  background-color: var(--dr-navy-900);
  background-image: url("/e15/images/demo-request-hero.jpg");
  background-size: cover;
  background-position: 72% 30%;
  background-repeat: no-repeat;
  color: #e6eef2;
}
.dr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(15, 23, 42, 0.94) 0%, rgba(22, 34, 52, 0.8) 46%,
                    rgba(30, 41, 59, 0.42) 72%, rgba(61, 143, 150, 0.5) 100%),
    radial-gradient(760px 420px at 86% 8%, rgba(107, 184, 190, 0.3), transparent 62%);
}

/* No cap here: the headline and the lede each set their own measure
   (14em and 29em), and a wrapper width would quietly override them. */
.dr-hero__copy { min-width: 0; }

.dr-hero h1 {
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  margin: 0 0 20px;
  max-width: 14em;
  text-shadow: 0 2px 18px rgba(15, 23, 42, 0.45);
}
.dr-hero__lede {
  font-size: 2rem; line-height: 1.38;
  font-weight: 400;
  color: rgba(234, 243, 246, 0.95);
  max-width: 29em; margin: 0;
  text-shadow: 0 2px 16px rgba(15, 23, 42, 0.4);
}


/* ============================================
   MAIN — form + aside
   ============================================ */
.dr-main { background: var(--dr-bg); padding: 56px 0 64px; }

.dr-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* ---- Form card ---- */
.dr-card {
  position: relative;
  background: var(--dr-white);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-r);
  box-shadow: var(--dr-shadow-sm);
  overflow: hidden;
}
.dr-card__head { padding: 30px 32px 0; }
.dr-card__head h2 { font-size: 2rem; margin-bottom: 10px; }
.dr-card__head p { color: var(--dr-text-2); margin: 0; }

/* Sits with the intro it belongs to, as a quiet chip rather than a stray
   line floating above the first field. */
.dr-required-note {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 0 !important;
  padding: 5px 13px 5px 11px;
  border-radius: 999px;
  background: var(--dr-primary-soft);
  border: 1px solid rgba(107, 184, 190, 0.35);
  color: var(--dr-text-2);
  font-size: 0.9rem; line-height: 1.4;
}
.dr-req { color: var(--dr-danger); font-weight: 700; }

.dr-form { padding: 24px 32px 32px; }

.dr-fieldset { border: 0; padding: 0; margin: 0 0 30px; }
.dr-fieldset:last-of-type { margin-bottom: 0; }
.dr-legend {
  display: block; width: 100%; padding: 0 0 12px; margin: 0 0 20px;
  border-bottom: 1px solid var(--dr-border-soft);
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--dr-navy-900);
}

.dr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.dr-field { display: flex; flex-direction: column; min-width: 0; }
.dr-field--wide { grid-column: 1 / -1; }

/* At 1rem, all-caps with letter-spacing shouts across fourteen fields, so
   the label is set in sentence case instead. */
.dr-field label {
  font-family: "Montserrat", sans-serif;
  font-weight: 700; font-size: 1rem; line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--dr-navy); margin-bottom: 8px;
}

.dr-field input[type="text"],
.dr-field input[type="email"],
.dr-field input[type="tel"],
.dr-field select,
.dr-field textarea {
  width: 100%;
  padding: 0 15px;
  height: 50px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--dr-text);
  background: var(--dr-white);
  border: 1.5px solid var(--dr-border);
  border-radius: var(--dr-r-sm);
  box-shadow: none;
  transition: border-color 0.22s var(--dr-ease), box-shadow 0.22s var(--dr-ease), background-color 0.22s var(--dr-ease);
  -webkit-appearance: none;
  appearance: none;
}
.dr-field textarea {
  height: auto; min-height: 130px;
  padding: 13px 15px; line-height: 1.6; resize: vertical;
}
.dr-field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%2364748b' d='M1.2 1.3 7 7l5.8-5.7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}
/* The country list itself: some browsers draw the open dropdown in their own
   smaller font unless the options are told to match the field. */
.dr-field select option { font-size: 1rem; }
.dr-field input::placeholder, .dr-field textarea::placeholder { color: #a4b0bf; }
.dr-field input:hover, .dr-field select:hover, .dr-field textarea:hover { border-color: #cbd5e1; }
.dr-field input:focus, .dr-field select:focus, .dr-field textarea:focus {
  outline: none;
  border-color: var(--dr-primary);
  box-shadow: 0 0 0 4px rgba(107, 184, 190, 0.2);
}

.dr-field.is-invalid input,
.dr-field.is-invalid select,
.dr-field.is-invalid textarea {
  border-color: var(--dr-danger);
  background: var(--dr-danger-soft);
}
.dr-field.is-invalid input:focus,
.dr-field.is-invalid select:focus,
.dr-field.is-invalid textarea:focus {
  box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.16);
}

.dr-error {
  display: none;
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--dr-danger);
}
.dr-field.is-invalid .dr-error { display: block; }

.dr-hint { margin-top: 7px; line-height: 1.55; color: var(--dr-text-3); }

/* Phone row — 4 server-side fields, one visual group */
.dr-phone { grid-column: 1 / -1; }
.dr-phone__row {
  display: grid;
  grid-template-columns: 0.8fr 0.8fr 2fr 0.7fr;
  gap: 12px;
}
.dr-phone__row .dr-field label {
  font-weight: 600;
  color: var(--dr-text-2);
}

/* Captcha slot — china-form-check.js swaps this when Google is blocked */
.dr-captcha { grid-column: 1 / -1; }
.dr-captcha-box { min-height: 78px; }
.dr-captcha-box .g-recaptcha { transform-origin: 0 0; }

.dr-actions {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 4px;
}
.dr-privacy {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 1rem; line-height: 1.65;
  color: var(--dr-text-2);
}
.dr-privacy a { color: var(--dr-primary-deep); font-weight: 600; }

/* Honeypot */
.dr-hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---- Buttons ---- */
.dr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Montserrat", sans-serif;
  /* <button> does not inherit font-size on its own; without this it drops to
     the browser's 13px default, which is smaller than the form it submits. */
  font-size: inherit;
  font-weight: 800; line-height: 1.2;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform 0.25s var(--dr-ease), box-shadow 0.25s var(--dr-ease),
              background-color 0.25s var(--dr-ease), color 0.25s var(--dr-ease),
              border-color 0.25s var(--dr-ease);
}
.dr-btn:hover, .dr-btn:focus { transform: translateY(-2px); }

.dr-btn--primary {
  background: var(--dr-primary-deep);
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(61, 143, 150, 0.32);
}
.dr-btn--primary:hover, .dr-btn--primary:focus {
  background: #47a1a8; color: #fff !important;
  box-shadow: 0 16px 32px rgba(61, 143, 150, 0.42);
}
.dr-btn--outline {
  background: var(--dr-white);
  border-color: var(--dr-border);
  color: var(--dr-navy) !important;
}
.dr-btn--outline:hover, .dr-btn--outline:focus {
  border-color: var(--dr-primary);
  background: var(--dr-primary-soft);
  color: var(--dr-navy-900) !important;
}
.dr-btn[disabled], .dr-btn.is-busy {
  opacity: 0.62; cursor: not-allowed; transform: none; box-shadow: none;
}
.dr-btn .dr-spinner {
  display: none;
  width: 17px; height: 17px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dr-spin 0.7s linear infinite;
}
.dr-btn.is-busy .dr-spinner { display: inline-block; }
.dr-btn.is-busy .dr-btn__icon { display: none; }
@keyframes dr-spin { to { transform: rotate(360deg); } }

/* ---- Form-level alert ---- */
.dr-alert {
  display: none;
  gap: 11px; align-items: flex-start;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: var(--dr-r-sm);
  background: var(--dr-danger-soft);
  border: 1px solid rgba(194, 65, 12, 0.28);
  color: #8a3208;
  font-size: 0.95rem; line-height: 1.55;
}
.dr-alert.is-visible { display: flex; }
.dr-alert i { margin-top: 3px; }

/* ---- Success state ---- */
.dr-done { display: none; padding: 54px 36px 48px; text-align: center; }
.dr-done.is-visible { display: block; animation: dr-rise 0.5s var(--dr-ease) both; }
@keyframes dr-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.dr-done__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; margin-bottom: 22px;
  border-radius: 50%;
  background: var(--dr-primary-soft);
  color: var(--dr-success);
  font-size: 1.9rem;
}
.dr-done h2 { font-size: 1.5rem; margin-bottom: 12px; }
.dr-done p { max-width: 34em; margin: 0 auto 26px; color: var(--dr-text-2); }


/* ============================================
   ASIDE
   ============================================ */
/* The form is long; the aside is short. Sticky keeps "What happens next"
   beside whichever part of the form the visitor is on, instead of leaving a
   tall empty column. --dr-sticky-top clears the site header - raise it if the
   menu ever gets taller. */
.dr-aside { display: flex; flex-direction: column; gap: 20px; }

/* Only stick when the window is tall enough to show both panels whole.
   Capping the height instead would give the column its own scrollbar, and a
   panel you have to scroll inside a page you are already scrolling is worse
   than one that simply moves with the page. If the panels ever grow, raise
   the min-height here to match. */
@media (min-width: 1101px) and (min-height: 820px) {
  .dr-aside {
    position: -webkit-sticky;
    position: sticky;
    top: var(--dr-sticky-top);
  }
}

.dr-panel {
  background: var(--dr-white);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-r);
  padding: 28px 30px;
  box-shadow: var(--dr-shadow-sm);
}
.dr-panel--accent {
  background: linear-gradient(160deg, var(--dr-primary-soft), var(--dr-white) 62%);
  border-color: rgba(107, 184, 190, 0.4);
}
.dr-panel h3 {
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

/* ---- Progress ----
   Appears once the visitor starts filling in, and reports how much of the
   required form is done. It is informative, not decorative: it answers
   "how much is left" without them having to scroll back up. */
.dr-progress { margin: 0 0 22px; }
.dr-progress[hidden] { display: none; }
.dr-progress__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.1);
  overflow: hidden;
}
.dr-progress__bar {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dr-primary), var(--dr-primary-deep));
  transition: width 0.45s var(--dr-ease);
}
.dr-progress__label {
  margin: 9px 0 0 !important;
  font-size: 0.92rem; line-height: 1.4;
  color: var(--dr-text-2);
}

/* ---- Steps ---- */
.dr-steps { counter-reset: dr-step; }
.dr-steps li {
  position: relative;
  counter-increment: dr-step;
  padding: 2px 0 22px 38px;
}
.dr-steps li:last-child { padding-bottom: 2px; }

.dr-steps li::before {
  content: counter(dr-step);
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--dr-primary-deep);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 0.82rem;
  box-shadow: 0 0 0 0 rgba(107, 184, 190, 0.55);
  transition: background-color 0.35s var(--dr-ease), box-shadow 0.35s var(--dr-ease);
}

/* connector line between steps */
.dr-steps li:not(:last-child)::after {
  content: "";
  position: absolute; left: 14px; top: 34px; bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, var(--dr-primary), rgba(107, 184, 190, 0.15));
}

/* Step 1 is live while the form is being filled in, and ticked once it has
   been sent — so the panel tracks what the visitor has actually done. */
.dr-steps li.is-active::before {
  background: var(--dr-primary);
  box-shadow: 0 0 0 6px rgba(107, 184, 190, 0.22);
}
.dr-steps li.is-done::before {
  content: "\2713";
  background: var(--dr-success);
  box-shadow: 0 0 0 6px rgba(21, 127, 107, 0.16);
  font-size: 0.95rem;
}
.dr-steps li.is-done strong { color: var(--dr-success); }

.dr-steps strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: var(--dr-navy-900);
  margin-bottom: 4px;
  transition: color 0.3s var(--dr-ease);
}
.dr-steps span { display: block; line-height: 1.6; color: var(--dr-text-2); }

/* ---- What to expect ---- */
.dr-assurances { display: flex; flex-direction: column; gap: 2px; }
.dr-assurances li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 11px 0;
}
.dr-assurances li + li { border-top: 1px solid var(--dr-border-soft); }

.dr-assurances__icon {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--dr-primary-soft);
  border: 1px solid rgba(107, 184, 190, 0.45);
  color: var(--dr-primary-deep);
}

.dr-assurances__text { display: block; min-width: 0; }
.dr-assurances__text strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 700; line-height: 1.35;
  color: var(--dr-navy-900);
  margin-bottom: 3px;
}
.dr-assurances__text span {
  display: block;
  line-height: 1.55;
  color: var(--dr-text-2);
}


/* ============================================
   OFFICES
   ============================================ */
.dr-offices { padding: 64px 0 72px; background: var(--dr-white); }
.dr-offices__head { max-width: 640px; margin: 0 0 36px; }
.dr-offices__head h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; }
.dr-offices__head p { color: var(--dr-text-2); margin: 0; }

.dr-office-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.dr-office {
  background: var(--dr-white);
  border: 1px solid var(--dr-border);
  border-radius: var(--dr-r);
  padding: 28px 26px;
  box-shadow: var(--dr-shadow-sm);
  transition: transform 0.3s var(--dr-ease), box-shadow 0.3s var(--dr-ease), border-color 0.3s var(--dr-ease);
}
.dr-office:hover {
  transform: translateY(-4px);
  box-shadow: var(--dr-shadow);
  border-color: rgba(107, 184, 190, 0.55);
}
.dr-office__region {
  display: inline-block;
  margin-bottom: 12px;
  font-family: "Montserrat", sans-serif;
  font-weight: 800; font-size: 1rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dr-primary-deep);
}
.dr-office h3 { font-size: 1.5rem; margin-bottom: 14px; }
.dr-office address {
  font-style: normal;
  line-height: 1.7;
  color: var(--dr-text-2);
  margin: 0 0 16px;
}
.dr-office__contacts { display: flex; flex-direction: column; gap: 7px; }
.dr-office__row { display: flex; align-items: center; gap: 10px; }
.dr-office__row i { color: var(--dr-primary-deep); width: 16px; text-align: center; }
.dr-office__row a { color: var(--dr-text-2); }
.dr-office__row a:hover, .dr-office__row a:focus { color: var(--dr-primary-deep); }


/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .dr-layout { grid-template-columns: minmax(0, 1fr); }
  .dr-aside { flex-direction: row; flex-wrap: wrap; }
  .dr-aside > * { flex: 1 1 320px; }
}

@media (max-width: 991px) {
  .dr-hero { padding: 64px 0 68px; }
  .dr-hero__lede { font-size: 1.6rem; }
  .dr-office-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .dr-hero {
    padding: 46px 0 50px;
    background-position: 62% 30%;
  }
  .dr-hero__lede { font-size: 1.28rem; line-height: 1.5; }

  .dr-main { padding: 40px 0 48px; }
  .dr-card__head { padding: 24px 20px 0; }
  .dr-form { padding: 20px 20px 24px; }
  .dr-legend { font-size: 1.1rem; }
  .dr-field label { font-size: 0.95rem; }
  .dr-grid { grid-template-columns: minmax(0, 1fr); }
  .dr-phone__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr-privacy { font-size: 0.95rem; }

  .dr-panel { padding: 22px 20px; }
  .dr-panel h3 { font-size: 1.3rem; }
  .dr-assurances__icon { width: 34px; height: 34px; font-size: 0.88rem; }

  .dr-offices { padding: 44px 0 52px; }
  .dr-office-grid { grid-template-columns: minmax(0, 1fr); }
  .dr-office h3 { font-size: 1.3rem; }
  .dr-aside { flex-direction: column; }
  .dr-btn { width: 100%; }
  .dr-done { padding: 40px 20px 36px; }
}

@media (max-width: 430px) {
  .dr-captcha-box { min-height: 0; height: 62px; }
  .dr-captcha-box .g-recaptcha { transform: scale(0.79); }
  .dr-captcha-box.pshc-swapped { height: auto; }
}


/* ============================================
   ACCESSIBILITY / PRINT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .dr-page *, .dr-page *::before, .dr-page *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .dr-hero { background: #fff !important; background-image: none !important;
            color: #000 !important; padding: 16px 0 !important; }
  .dr-hero h1, .dr-hero__lede { color: #000 !important; text-shadow: none !important; }
  .dr-hero::before, .dr-aside, .dr-actions { display: none !important; }
  .dr-card { box-shadow: none; border: 1px solid #ccc; }
}