/* =========================================================
   RotoEdge — inner pages: page-hero title + section headings
   All headings use the hero title face (Audiowide). It is much wider than the
   theme's Marcellus, so sizes are scaled down to keep similar line lengths.
========================================================= */

/* ---------- page hero band (first section, holds the page title) ---------- */

.re-page-hero,
.re-work--page {
    position: relative;
    isolation: isolate;
    --padding-top: clamp(28px, 4vw, 64px);
    --padding-bottom: clamp(28px, 4vw, 56px);
}

.re-page-hero::before,
.re-work--page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 55% 80% at 12% 0%, rgba(255, 31, 31, .18), rgba(255, 31, 31, 0) 70%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 48px 48px;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.re-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.re-crumbs a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease;
}

.re-crumbs a:hover,
.re-crumbs a:focus-visible { color: #fff; }

.re-crumbs span[aria-hidden] { color: #ff1f1f; }

.re-crumbs span[aria-current] { color: #fff; }

.re-page-title {
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    font-family: "Audiowide", sans-serif;
    font-weight: 400;
    font-size: clamp(40px, 6vw, 96px);
    line-height: 1.02;
    letter-spacing: .01em;
    color: #ff0000;
    overflow-wrap: anywhere;
}

/* the original big heading becomes the hero's tagline: smaller, white, hero-title face.
   Written with #smooth-content so it outranks css/re-site.css, which sets all inner-page
   section titles to 58px Marcellus. */
body:not(.home) #smooth-content .re-page-hero .tp-section-title-90 {
    margin: 0;
    font-family: "Audiowide", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(18px, 1.9vw, 30px) !important;
    line-height: 1.3 !important;
    letter-spacing: .01em !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

@media (max-width: 767px) {
    body:not(.home) #smooth-content .re-page-hero .tp-section-title-90 {
        font-size: clamp(16px, 4.8vw, 22px) !important;
    }
}

.re-page-hero .tp-section-title-90 {
    margin-top: 0;
    font-size: clamp(20px, 2.2vw, 34px) !important;
    line-height: 1.3 !important;
    color: #fff !important;
}

/* ---------- bracket-free eyebrow labels for the other sections ---------- */

.re-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #ff1f1f;
}

.re-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
}

/* ---------- section headings in the hero face ---------- */

.tp-section-title-90 {
    font-family: "Audiowide", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.2vw, 50px) !important;
    line-height: 1.15 !important;
    letter-spacing: .01em;
}

/* Our Work page: its section heading */
.re-work--page .re-work__title {
    font-family: "Audiowide", sans-serif;
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 50px);
    line-height: 1.15;
    letter-spacing: .01em;
}

/* Our Work: project titles */
.tp-project-3-title-sm,
.tp-project-3-title-sm a {
    font-family: "Audiowide", sans-serif !important;
    font-weight: 400 !important;
}

.tp-project-3-title-sm { font-size: clamp(34px, 5vw, 72px) !important; line-height: 1.05 !important; }

/* About / Commercial: card and list headings */
.sv-service-title,
.tp-service-4-title-sm {
    font-family: "Audiowide", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .01em;
}

.sv-service-title { font-size: clamp(22px, 2.3vw, 34px) !important; line-height: 1.2 !important; }
.tp-service-4-title-sm { font-size: clamp(19px, 1.6vw, 24px) !important; line-height: 1.25 !important; }

/* Services: panel titles + "Have More Questions?" */
.elementor-element-841e189 .elementor-heading-title,
.elementor-element-c187dc8 .elementor-heading-title,
.elementor-element-e8e0ffa .elementor-heading-title,
.elementor-element-10333d6 .elementor-heading-title,
.elementor-element-95eab06 .elementor-heading-title,
h4.tp-el-animation-heading {
    font-family: "Audiowide", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: .01em !important;
}

.elementor-element-841e189 .elementor-heading-title,
.elementor-element-c187dc8 .elementor-heading-title,
.elementor-element-e8e0ffa .elementor-heading-title,
.elementor-element-10333d6 .elementor-heading-title,
.elementor-element-95eab06 .elementor-heading-title {
    font-size: clamp(24px, 2.4vw, 34px) !important;
    line-height: 1.2 !important;
}

h4.tp-el-animation-heading { font-size: clamp(30px, 3.4vw, 50px) !important; line-height: 1.15 !important; }

/* Contact: the intro heading */
.elementor-element-5694646 .elementor-heading-title {
    font-family: "Audiowide", sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(22px, 2.4vw, 36px) !important;
    line-height: 1.3 !important;
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
    .re-page-title { font-size: clamp(34px, 10vw, 48px); }
    .re-crumbs { font-size: 11px; letter-spacing: .18em; margin-bottom: 12px; }
    .tp-section-title-90 { font-size: clamp(24px, 7vw, 32px) !important; }
    .re-page-hero .tp-section-title-90 { font-size: clamp(18px, 5.2vw, 24px) !important; }
    .tp-project-3-title-sm { font-size: clamp(28px, 9vw, 40px) !important; }
}