/* Generated by scripts/build-site-theme.cjs. */
/* Soft festive page background, with lightweight decorative edge artwork. */
html body {
  background-color: #fffcf7;
  background-image: url('../img/decor/festive-edge-left.svg?v=2'),
    url('../img/decor/festive-edge-right.svg?v=2'),
    linear-gradient(90deg, #fff2df 0%, #fffaf3 15%, #fffdf9 32%, #fffdf9 68%, #fffaf3 85%, #fff2df 100%);
  background-position: left top, right 320px, center;
  background-size: 210px 950px, 210px 950px, 100% 100%;
  background-repeat: repeat-y, repeat-y, no-repeat;
}

/* Let the decorative page background show through the large content sections. */
html body .vs_better_bg,
html body .skyline-reviews {
  background-color: transparent;
}

html body .vs_pro_single {
  background-color: rgb(255 252 247 / 85%);
  border: 1px solid #efdfc8;
}

html body .customer-note {
  background-color: #fffaf2;
  border-color: #eadcc7;
}

@media (max-width: 767px) {
  html body {
    background-size: 125px 700px, 125px 700px, 100% 100%;
    background-position: left top, right 230px, center;
  }
}

.vs_payment_box_section.skyline-quick-actions {
  position: relative;
  padding: clamp(64px, 6vw, 110px) clamp(16px, 4vw, 70px);
  background-color: #fffaf3;
  background-image: url('../img/decor/hanging-diya.svg'),
    url('../img/decor/quick-actions-corner.svg'),
    radial-gradient(ellipse at center, #fffdf9, #faf5ed);
  background-position: 16px top, right -100px bottom -100px, center;
  background-repeat: no-repeat;
  background-size: 100px 190px, 330px 330px, cover;
}

.skyline-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
  width: 100%;
  max-width: 1550px;
  margin-inline: auto;
  position: relative;
}

.skyline-quick-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  min-height: 170px;
  padding: clamp(24px, 3vw, 46px);
  border: 1px solid #dcb77b;
  border-radius: 18px;
  background: rgb(255 255 255 / 68%);
  color: #26282a;
  box-shadow: 0 12px 28px rgb(140 96 32 / 8%);
  text-decoration: none;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}

.skyline-quick-action-icon {
  width: clamp(58px, 5vw, 94px);
  height: clamp(58px, 5vw, 94px);
  fill: none;
  stroke: #b60917;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skyline-quick-action-label {
  font-family: 'Rubik', Arial, sans-serif;
  font-size: clamp(20px, 1.8vw, 32px);
  font-weight: 400;
  line-height: 1.35;
}

.skyline-quick-action-arrow {
  display: grid;
  place-items: center;
  align-self: stretch;
  padding-left: clamp(16px, 2vw, 32px);
  border-left: 1px solid #ecd9bd;
  color: #b60917;
}

.skyline-quick-action-arrow svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skyline-quick-action:hover {
  background: #fff6e7;
  border-color: #b58a45;
  color: #26282a;
  box-shadow: 0 14px 30px rgb(140 96 32 / 14%);
}

.skyline-quick-action:focus-visible { outline: 3px solid #b60917; outline-offset: 5px; }

@media (min-width: 768px) and (max-width: 1100px) {
  .skyline-quick-action { gap: 16px; padding: 24px; min-height: 145px; }
  .skyline-quick-action-icon { width: 54px; height: 54px; }
  .skyline-quick-action-label { font-size: 22px; }
  .skyline-quick-action-arrow { padding-left: 12px; }
}

@media (max-width: 767px) {
  .vs_payment_box_section.skyline-quick-actions {
    padding: 64px 16px 48px;
    background-size: 60px 114px, 200px 200px, cover;
    background-position: 8px top, right -70px bottom -70px, center;
  }
  .skyline-quick-actions-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .skyline-quick-action { min-height: 118px; padding: 20px; gap: 16px; border-radius: 14px; }
  .skyline-quick-action-icon { width: 52px; height: 52px; }
  .skyline-quick-action-label { font-size: clamp(18px, 4.5vw, 24px); }
  .skyline-quick-action-arrow { padding-left: 12px; }
  .skyline-quick-action-arrow svg { width: 24px; height: 24px; }
}

/* Optional gold styling trial. Remove its single import to restore the prior appearance. */
html body {
  --skyline-trial-gold: #c8a15b;
  --skyline-trial-gold-line: rgb(190 145 65 / 30%);
  --skyline-trial-gold-glow: rgb(184 130 39 / 9%);
}

html body :is(.vs_pro_box, .vs_pro_box1, .skyline-review-card, .skyline-about-highlights) {
  outline: 1px solid var(--skyline-trial-gold-line);
  outline-offset: -1px;
  box-shadow: 0 5px 20px var(--skyline-trial-gold-glow),
    inset 0 1px 0 rgb(255 236 192 / 45%);
}

html body .vs_pro_box { background-color: #fffaf1; }

html body :is(.skyline-review-card, .customer-note, .vs_pro_single) {
  border-color: var(--skyline-trial-gold-line);
}

html body :is(.skyline-about, .skyline-reviews) {
  background-image: radial-gradient(ellipse at 50% 15%, rgb(231 190 108 / 9%), transparent 72%);
}

html body .skyline-header-main {
  box-shadow: inset 0 -1px 0 var(--skyline-trial-gold-line), 0 3px 14px rgb(157 104 23 / 5%);
}

html body .skyline-header-action:not(.skyline-header-action-store) {
  box-shadow: inset 0 1px 0 rgb(248 216 149 / 35%);
}

html body .skyline-quick-action {
  border-color: #cfaa65;
  box-shadow: 0 10px 28px rgb(164 109 19 / 11%), inset 0 1px 0 #fff2d6;
}

html body footer {
  border-top-color: #d1af6b;
  box-shadow: 0 -4px 20px rgb(164 109 19 / 8%);
}

html body :is(.vs_pro_box, .vs_pro_box1):hover {
  outline-color: rgb(190 145 65 / 60%);
  box-shadow: 0 7px 24px rgb(164 109 19 / 15%);
}


@font-face {
  font-family: 'Skyline Serif';
  src: url('../font/cormorant-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Only marked main page and section headings use the reference-inspired serif style. */
html body .skyline-brand-heading {
  color: #292929;
  font-family: 'Skyline Serif', 'Times New Roman', serif;
  font-size: clamp(28px, 3.2vw, 48px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none !important;
  text-shadow: none;
  overflow-wrap: break-word;
}

html body h1.skyline-brand-heading { font-size: clamp(32px, 3.8vw, 56px); }
html body .skyline-brand-heading span {
  color: #df001b;
  font-weight: inherit;
  text-shadow: none;
}
html body .skyline-brand-heading :is(b, strong) { font-weight: inherit; }
html body h3.skyline-brand-heading { font-size: clamp(24px, 2.5vw, 36px); }

/* Page-banner titles use the same black/red lettering on a white label. */
html body .vs_all_banner figcaption {
  background-color: #fff;
  color: #292929;
  box-shadow: 0 3px 16px rgb(0 0 0 / 8%);
}

html body .vs_all_banner figcaption h2.skyline-brand-heading {
  font-size: clamp(26px, 3vw, 44px);
}

/* Preserve contrast in the existing dark testimonial panel. */
html body .vs_better_right .skyline-brand-heading,
html body .text-white .skyline-brand-heading { color: #fff; }

@media (max-width: 575px) {
  html body .skyline-brand-heading { font-size: clamp(27px, 7.5vw, 36px); }
  html body h1.skyline-brand-heading { font-size: clamp(30px, 8.5vw, 40px); }
}