/** Shopify CDN: Minification failed

Line 275:19 Unexpected "{"
Line 275:28 Expected ":"
Line 276:19 Unexpected "{"
Line 276:28 Expected ":"
Line 277:19 Unexpected "{"
Line 277:28 Expected ":"
Line 278:19 Unexpected "{"
Line 278:28 Expected ":"
Line 279:19 Unexpected "{"
Line 279:28 Expected ":"
... and 20 more hidden warnings

**/
/* =============================================================
   Bouma · Pivot Pro — Hero Section
   File: assets/pivot-pro-hero.css
   ============================================================= */

/* ----------------------------------------------------------
   Section shell
   ---------------------------------------------------------- */
.pivot-pro-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: var(--hero-height-desktop);
  padding-top: var(--hero-pt);
  padding-bottom: var(--hero-pb);
  padding-left: var(--hero-pl);
  padding-right: var(--hero-pr);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* ----------------------------------------------------------
   Full-bleed background image
   Sits behind everything. Empty / invisible until an image
   is uploaded — no placeholder, no fallback graphic.
   ---------------------------------------------------------- */
.pivot-pro-hero__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.pivot-pro-hero__bg-image picture,
.pivot-pro-hero__bg-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ----------------------------------------------------------
   Content block — sits on top of the background image
   ---------------------------------------------------------- */
.pivot-pro-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--hero-content-max-width);
  display: flex;
  flex-direction: column;
  gap: var(--hero-content-gap);
}

/* ----------------------------------------------------------
   Eyebrow
   ---------------------------------------------------------- */
.pivot-pro-hero__eyebrow {
  margin: 0;
  font-family: var(--hero-eyebrow-font);
  font-size: var(--hero-eyebrow-size-dt);
  font-weight: var(--hero-eyebrow-weight);
  letter-spacing: var(--hero-eyebrow-ls);
  line-height: var(--hero-eyebrow-lh);
  color: var(--hero-eyebrow-color);
}

/* ----------------------------------------------------------
   Heading
   ---------------------------------------------------------- */
.pivot-pro-hero__heading {
  margin: 0;
  font-family: var(--hero-heading-font);
  font-size: var(--hero-heading-size-dt);
  font-weight: var(--hero-heading-weight);
  letter-spacing: var(--hero-heading-ls);
  line-height: var(--hero-heading-lh);
  color: var(--hero-heading-color);
}

.pivot-pro-hero__heading p {
  margin: 0;
}

/* ----------------------------------------------------------
   Description
   ---------------------------------------------------------- */
.pivot-pro-hero__description {
  margin: 0;
  font-family: var(--hero-desc-font);
  font-size: var(--hero-desc-size-dt);
  font-weight: var(--hero-desc-weight);
  letter-spacing: var(--hero-desc-ls);
  line-height: var(--hero-desc-lh);
  color: var(--hero-desc-color);
  max-width: 340px;
}

/* ----------------------------------------------------------
   Buttons row
   ---------------------------------------------------------- */
.pivot-pro-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hero-btn-gap);
}

.pivot-pro-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-width: 1.5px;
  border-style: solid;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

/* Primary */
.pivot-pro-hero__btn--primary {
  background-color: var(--hero-btn-primary-bg);
  color: var(--hero-btn-primary-color);
  border-color: var(--hero-btn-primary-border);
  border-radius: var(--hero-btn-primary-radius);
  padding: var(--hero-btn-primary-pt) var(--hero-btn-primary-pl);
}

.pivot-pro-hero__btn--primary:hover {
  background-color: var(--hero-btn-primary-hover-bg);
  color: var(--hero-btn-primary-hover-color);
}

/* Secondary */
.pivot-pro-hero__btn--secondary {
  background-color: var(--hero-btn-secondary-bg);
  color: var(--hero-btn-secondary-color);
  border-color: var(--hero-btn-secondary-border);
  border-radius: var(--hero-btn-secondary-radius);
  padding: var(--hero-btn-secondary-pt) var(--hero-btn-secondary-pl);
}

.pivot-pro-hero__btn--secondary:hover {
  background-color: var(--hero-btn-secondary-hover-bg);
  color: var(--hero-btn-secondary-hover-color);
}

.pivot-pro-hero__btn-arrow {
  font-style: normal;
}

/* ----------------------------------------------------------
   Right-side supporting text (desktop only)
   ---------------------------------------------------------- */
.pivot-pro-hero__supporting-text {
  position: absolute;
  right: calc(var(--hero-pr) + 2px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: 200px;
  margin: 0;
  font-family: var(--hero-support-font);
  font-size: var(--hero-support-size-dt);
  font-weight: var(--hero-support-weight);
  letter-spacing: var(--hero-support-ls);
  line-height: var(--hero-support-lh);
  color: var(--hero-support-color);
}

/* ----------------------------------------------------------
   Page indicator  "1 —"
   ---------------------------------------------------------- */
.pivot-pro-hero__page-indicator {
  position: absolute;
  right: var(--hero-pr);
  bottom: 40px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.pivot-pro-hero__page-number {
  font-size: 13px;
  font-weight: 400;
  color: #888888;
}

.pivot-pro-hero__page-line {
  display: inline-block;
  width: 40px;
  height: 1px;
  background-color: #cccccc;
}

/* =============================================================
   MOBILE  ( ≤ 749px )
   ============================================================= */
@media screen and (max-width: 749px) {

  .pivot-pro-hero {
    min-height: var(--hero-height-mobile);
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Content */
  .pivot-pro-hero__content {
    max-width: 100%;
  }

  /* Eyebrow */
  .pivot-pro-hero__eyebrow {
    font-size: var(--hero-eyebrow-size-mb);
  }

  /* Heading */
  .pivot-pro-hero__heading {
    font-size: var(--hero-heading-size-mb);
  }

  /* Description */
  .pivot-pro-hero__description {
    font-size: var(--hero-desc-size-mb);
    max-width: 100%;
  }

  /* Supporting text hidden on mobile */
  .pivot-pro-hero__supporting-text {
    display: none;
  }

  /* Page indicator hidden on mobile */
  .pivot-pro-hero__page-indicator {
    display: none;
  }
}

/* =============================================================
   Shopify Theme Editor — no transitions while editing
   ============================================================= */
.shopify-design-mode .pivot-pro-hero__btn {
  transition: none;
}

/* Fade-in animation */
  @keyframes pivot-hero-fadein {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__eyebrow,
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__heading,
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__description,
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__buttons,
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__supporting-text {
    opacity: 0;
    animation: pivot-hero-fadein 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__eyebrow        { animation-delay: 0.05s; }
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__heading         { animation-delay: 0.18s; }
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__description     { animation-delay: 0.30s; }
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__buttons         { animation-delay: 0.42s; }
  #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__supporting-text { animation-delay: 0.52s; }

  .shopify-design-mode #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__eyebrow,
  .shopify-design-mode #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__heading,
  .shopify-design-mode #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__description,
  .shopify-design-mode #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__buttons,
  .shopify-design-mode #pivot-pro-hero-{{ section.id }} .pivot-pro-hero__supporting-text {
    opacity: 1;
    animation: none;
  }