/* ===================================================================
   Sunset Software — modern refresh layer
   Loaded AFTER styles.css so it can override. Delete this file (and
   its <link> in index.html) to revert to the original theme.
   =================================================================== */

:root {
    --sunset-1       : hsl(19 89% 54%);   /* existing brand orange   */
    --sunset-2       : hsl(350 78% 58%);  /* warm magenta            */
    --sunset-grad    : linear-gradient(115deg, hsl(350 78% 58%) 0%, hsl(19 89% 54%) 55%, hsl(38 92% 58%) 115%);
    --sunset-soft    : linear-gradient(115deg, hsla(350, 78%, 58%, 0.14), hsla(19, 89%, 54%, 0.14));
    --sunset-line    : linear-gradient(90deg, hsl(350 78% 58%), hsl(19 89% 54%), hsl(38 92% 58%));
    --radius-md      : 10px;
    --radius-lg      : 16px;
}

/* -------------------------------------------------------------------
 * sticky header — solid, slightly translucent on scroll
 * ------------------------------------------------------------------- */
.s-header.sticky {
    background-color: hsla(220, 15%, 9%, 0.92);
    backdrop-filter : blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow      : 0 1px 0 hsla(0, 0%, 100%, 0.06), 0 12px 40px hsla(0, 0%, 0%, 0.35);
}

/* -------------------------------------------------------------------
 * hero — sunset wash, eyebrow, CTA row
 * ------------------------------------------------------------------- */
.s-intro__bg::after {
    background : linear-gradient(
        20deg,
        hsla(220, 15%, 6%, 0.92) 0%,
        hsla(20, 60%, 18%, 0.35) 45%,
        hsla(350, 60%, 40%, 0.12) 100%
    );
    opacity    : 1;
}

.s-intro__content-title {
    --text-title-size : 8rem;
    letter-spacing    : -0.02em;
}

.s-intro__content-title::before {
    width            : 8.5rem;
    height           : 4px;
    border-radius    : 2px;
    background       : var(--sunset-grad);
}

.s-intro__eyebrow {
    display          : inline-flex;
    align-items      : center;
    gap              : 0.75rem;
    margin           : 0 0 var(--vspace-1);
    padding          : 0.45rem 1.1rem 0.45rem 0.9rem;
    border           : 1px solid hsla(0, 0%, 100%, 0.14);
    border-radius    : 999px;
    background       : hsla(0, 0%, 0%, 0.28);
    backdrop-filter  : blur(6px);
    font-family      : var(--font-2);
    font-size        : calc(var(--text-size) * 0.6667);
    font-weight      : 600;
    letter-spacing   : 0.18em;
    text-transform   : uppercase;
    color            : hsla(0, 0%, 100%, 0.85);
}

.s-intro__eyebrow::before {
    content          : "";
    display          : block;
    width            : 8px;
    height           : 8px;
    border-radius    : 50%;
    background       : var(--sunset-grad);
    box-shadow       : 0 0 12px hsla(19, 89%, 54%, 0.9);
}

.s-intro__ctas {
    z-index     : 2;
    display     : flex;
    flex-wrap   : wrap;
    gap         : 1rem;
    position    : relative;
}

.s-intro__ctas .btn {
    border-radius : 8px;
}

.s-intro__ctas .btn--stroke {
    background-color: transparent;
    border-color    : hsla(0, 0%, 100%, 0.35);
    color           : white;
}

.s-intro__ctas .btn--stroke:hover {
    border-color    : white;
    background-color: hsla(0, 0%, 100%, 0.08);
    color           : white;
}

/* -------------------------------------------------------------------
 * section headers — gradient pretitle rule, softer watermark numbers
 * ------------------------------------------------------------------- */
.section-header {
    padding-top   : calc(var(--vspace-2_5) * 1.4);
    margin-bottom : calc(var(--vspace-1_75) * 1.4);
}

.section-header__pretitle {
    position : relative;
}

.section-header__pretitle::after {
    content        : "";
    display        : block;
    width          : 4.5rem;
    height         : 3px;
    margin-top     : var(--vspace-0_5);
    border-radius  : 2px;
    background     : var(--sunset-grad);
}

.section-header::before {
    opacity : 0.55;
}

.section-header.light-on-dark::before {
    background : var(--sunset-grad);
    -webkit-background-clip: text;
    background-clip        : text;
    color                  : transparent;
    opacity                : 0.22;
}

/* -------------------------------------------------------------------
 * about / services — icon chips with sunset gradient, tighter rhythm
 * ------------------------------------------------------------------- */
.list-block__item {
    margin-bottom : var(--vspace-1);
}

.list-block__icon {
    background     : var(--sunset-soft);
    border         : 1px solid hsla(19, 89%, 54%, 0.25);
    box-shadow     : inset 0 0 24px hsla(19, 89%, 54%, 0.06);
}

.list-block__icon svg,
.list-block__icon i {
    color : var(--sunset-1);
}

.list-block__icon i {
    display  : flex;
    font-size: var(--vspace-0_875);
}

/* -------------------------------------------------------------------
 * folio — rounded cards, gradient hover veil, refined overlay info
 * ------------------------------------------------------------------- */
.bricks-wrapper .entry__link img {
    border-radius  : var(--radius-lg);
    box-shadow     : 0 2px 14px hsla(0, 0%, 0%, 0.35);
}

.bricks-wrapper .entry__link::before {
    z-index    : 1;
    background : linear-gradient(180deg, hsla(220, 15%, 6%, 0.25) 0%, hsla(220, 15%, 6%, 0.82) 100%);
    border-radius : var(--radius-lg);
}

.bricks-wrapper .entry__link::after {
    z-index        : 2;
    font-family    : var(--font-2);
    font-size      : 1.2rem;
    letter-spacing : 0;
    height         : 64px;
    width          : 64px;
    line-height    : 64px;
    margin-left    : -32px;
    margin-top     : -32px;
    border-radius  : 50%;
    background     : var(--sunset-grad);
    color          : white;
    content        : "\2192";  /* right arrow */
}

.bricks-wrapper .entry:hover .entry__link::after {
    content   : "\2192";
    transform : scale(1) translateX(2px);
}

.bricks-wrapper .entry__info {
    z-index : 2;
}

.bricks-wrapper .entry__cat {
    letter-spacing   : 0.14em;
    text-transform   : uppercase;
    color            : hsla(0, 0%, 100%, 0.65);
    background       : var(--sunset-grad);
    -webkit-background-clip: text;
    background-clip        : text;
    color                  : transparent;
    filter                 : drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.6));
}

.bricks-wrapper .entry__title {
    letter-spacing : -0.01em;
    text-shadow    : 0 1px 8px hsla(0, 0%, 0%, 0.5);
}

/* -------------------------------------------------------------------
 * modal — rounded corners, pill tags
 * ------------------------------------------------------------------- */
.modal-popup {
    border-radius : var(--radius-lg);
}

.modal-popup img {
    border-radius : var(--radius-md);
    box-shadow    : 0 2px 16px hsla(0, 0%, 0%, 0.12);
}

.modal-popup__cat {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 0.5rem;
    padding-left   : 0;
}

.modal-popup__cat::before {
    display : none;
}

.modal-popup__cat li {
    display      : inline-block;
    padding      : 0.3rem 0.85rem;
    border       : 1px solid hsla(0, 0%, 0%, 0.12);
    border-radius : 999px;
    background   : hsla(19, 89%, 54%, 0.06);
    font-weight  : 500;
    color        : hsla(0, 0%, 0%, 0.65);
}

.modal-popup__cat li::after {
    display : none;
}

/* -------------------------------------------------------------------
 * testimonials — bigger, calmer quotes
 * ------------------------------------------------------------------- */
.s-testimonials__slide {
    padding-bottom : var(--vspace-0_5);
}

.s-testimonials__slide p {
    font-size : calc(var(--text-size) * 1.0556);
    line-height : 1.85;
}

.s-testimonials__cite strong {
    font-family : var(--font-2);
}

/* -------------------------------------------------------------------
 * buttons — a touch more presence
 * ------------------------------------------------------------------- */
.btn {
    border-radius : 8px;
    font-family   : var(--font-2);
    letter-spacing : 0.01em;
}

.btn.btn--primary,
button.btn--primary {
    background     : var(--sunset-grad);
    border-color   : transparent;
}

.btn.btn--primary:hover,
button.btn--primary:hover {
    background : var(--sunset-grad);
    filter     : brightness(1.08);
}

/* -------------------------------------------------------------------
 * footer contact link
 * ------------------------------------------------------------------- */
.s-footer .section-header a {
    background       : var(--sunset-grad);
    -webkit-background-clip: text;
    background-clip        : text;
    color                  : transparent;
}

/* -------------------------------------------------------------------
 * scroll-reveal (driven by js/modern.js)
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html.js .reveal {
        opacity        : 0;
        transform      : translateY(24px);
        transition     : opacity 0.7s ease, transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-delay: var(--reveal-delay, 0ms);
        will-change    : opacity, transform;
    }

    html.js .reveal.is-revealed {
        opacity   : 1;
        transform : none;
    }
}

@media (max-width: 700px) {
    .s-intro__ctas .btn {
        width : 100%;
    }
}