/* ------------------------- Components ® Code by Demos -------------------------------------------------- */

/* ------------------------- Span Lines H4 -------------------------------------------------- */
.span-lines.animate .span-line { position: relative; display: inline-flex; overflow: hidden; }
.span-lines.animate .span-line .span-line-inner { position: relative; display: block; }

/* ------------------------- Arrow -------------------------------------------------- */
.arrow { position: relative; width: clamp(.9em, 1.1vw, 1.1em); }
.arrow.big { position: relative; width: clamp(1.1em, 1.3vw, 1.25em); }
.arrow svg { display: block; width: 100%; }

/* ------------------------- Profile Picture -------------------------------------------------- */
.profile-picture {
    position: relative;
    display: inline-flex;
    border-radius: 50%;
    background: url("") center center no-repeat;
    background-size: cover;
    width: clamp(4.5em, 6.5vw, 8em);
    height: clamp(4.5em, 6.5vw, 8em);
}

/* ------------------------- Pattern Dots -------------------------------------------------- */
.dots {
    top: 0; right: 0; height: 100%; width: 100%;
    pointer-events: none;
    background: url("") bottom right;
    background-size: 1.25em 1.25em;
    position: absolute;
}

/* ------------------------- Rounded Div -------------------------------------------------- */
.curved-edge-wrap { width: 100%; top: 0; position: relative; height: 10vh; overflow: hidden; }
.curved-edge { width: 150%; content: ""; display: block; position: absolute; background: var(--color-white); height: 750%; left: 50%; border-radius: 50%; transform: translate(-50%, -86.666%); z-index: 1; }

/* ------------------------- Default Header -------------------------------------------------- */
.default-header { padding-top: calc(var(--section-padding) * 1.33); padding-bottom: calc(var(--section-padding) * .66); }
.default-header.theme-dark { background: var(--color-dark); }
.default-header h1 span { display: block; }
@media screen and (max-width: 720px){
    .default-header { padding-top: calc(var(--section-padding) * 1.95); padding-bottom: calc(var(--section-padding) * .75); }
    .default-header h1 span { display: unset; }
}
@media screen and (max-width: 460px){
    .default-header h1 { font-size: calc(clamp(3.25em, 7vw, 8em) * .875); }
}


/* ── Trademark headline ───────────────────────────────────────── */
.demos-trademark {
    margin-bottom: 2rem;
  }
  
  .trademark-eyebrow {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.45;
    margin-bottom: 0.5rem;
  }
  
  .trademark-headline {
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    margin: 0 0 0.4rem;
  }
  
  .trademark-headline em {
    font-style: normal;
    /* pull your brand gold/accent color here */
    color: var(--color-accent, #C9A84C);
  }
  
  .trademark-sub {
    font-size: 1rem;
    opacity: 0.5;
    letter-spacing: 0.05em;
    margin: 0;
  }
  
  /* ── Stamp ────────────────────────────────────────────────────── */
  .trademark-stamp {
    display: inline-flex;
    margin-top: 2.5rem;
  }
  
  .stamp-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2.5px solid var(--color-accent, #C9A84C);
    opacity: 0.75;
    padding: 1rem;
    text-align: center;
    transform: rotate(-12deg);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .stamp-inner:hover {
    opacity: 1;
    transform: rotate(-6deg) scale(1.05);
  }
  
  .stamp-top {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  
  .stamp-mark {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-accent, #C9A84C);
    line-height: 1.2;
    margin: 0.25rem 0;
  }
  
  .stamp-bottom {
    font-size: 0.5rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.5;
  }