/* ============================================================
   QPhoto overrides
   ------------------------------------------------------------
   Loaded AFTER main.css. Everything that makes this site look
   like QPhoto rather than Studio Charkona lives here, so the
   shared theme stays untouched and the differences stay
   auditable in one file.

   main.css is the core — layout, grid, motion, components.
   This file only changes surface: type, logo size, shape and
   the gold accent's supporting treatments.
   ============================================================ */

:root {
    /* Headings are a sturdy editorial grotesque. It leaves the serif wordmark
       in the logo as the only serif on the page, and it is wider and heavier
       than DM Sans so display type still separates from body copy. */
    --qp-ff-display: "Archivo", "DM Sans", sans-serif;

    --qp-gold: #c89828;
    --qp-gold-bright: #e9c63f;
    --qp-gold-rgb: 200, 152, 40;
}

/* ---------------------------------------------------------- */
/* 1. Header logo — Charkona's 56px block was too heavy for a  */
/*    wide lockup.                                             */
/* ---------------------------------------------------------- */

.at-header-logo img,
.at-offcanvas-logo img {
    height: 40px;
}

@media (max-width: 575.98px) {
    .at-header-logo img,
    .at-offcanvas-logo img {
        height: 34px;
    }
}

/* ---------------------------------------------------------- */
/* 2. Display type                                             */
/*    The single biggest departure from Charkona. Headings go  */
/*    serif; body copy, labels and buttons stay DM Sans.       */
/* ---------------------------------------------------------- */

.sec-1-home-11__title,
.at-section-title,
.alt-section-title,
.at-about-title,
.at-service-item .title,
.at-service-item h1.title,
.mg-portfolio-title-wrap .alt-section-title,
.at-page-title,
.at-breadcrumb-title,
.sec-1-services-details .section-title {
    font-family: var(--qp-ff-display);
    font-weight: 600;
    letter-spacing: -0.025em;
}

/* The hero was uppercase ultra-bold sans. A Didone at that size carries the
   logo's voice, so it loses the shout and keeps the scale. */
.sec-1-home-11__title {
    text-transform: none;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 0.92;
}

/* Section titles read better a touch tighter once they are serif. */
.at-section-title,
.alt-section-title {
    line-height: 1.04;
}

/* Service rows: the big list is the page's spine — give it the serif too,
   and a hairline that warms up on hover. */
.at-service-item .title {
    letter-spacing: -0.025em;
}

/* Service detail hero. `.section-title` has no rule in main.css and the
   heading carries `d-flex`, so RevealText's per-word spans become flex items
   that never wrap — long service names ran straight off the column. */
.sec-1-services-details .section-title {
    display: block !important;
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.04;
}

/* ---------------------------------------------------------- */
/* 3. Shape language                                           */
/*    Charkona is very round (rounded-5 everywhere). QPhoto     */
/*    sits a little sharper and more editorial.                 */
/* ---------------------------------------------------------- */

.rounded-5 {
    border-radius: 18px !important;
}

.rounded-4 {
    border-radius: 14px !important;
}

/* ---------------------------------------------------------- */
/* 4. Accent treatments                                        */
/*    The gold is already swapped in main.css. These are the    */
/*    places that needed a QPhoto-specific touch rather than a  */
/*    straight colour substitution.                             */
/* ---------------------------------------------------------- */

/* Eyebrow labels ("OUR SOLUTIONS", "ABOUT US") pick up the gold and a wider
   track, which reads as a caption rather than a small heading. */
.at-btn.common-black.bg-transparent .text-1,
.at-btn.common-black.bg-transparent .text-2 {
    letter-spacing: 0.14em;
}

/* Service row numbers — [01], [02] — in gold, so the list scans by number. */
.at-service-item .count .number {
    color: var(--qp-gold);
}

/* The primary pill gets a gold edge on hover instead of staying flat black. */
.at-btn:not(.bg-transparent):hover {
    box-shadow: inset 0 0 0 1px var(--qp-gold-bright);
}

/* Circle buttons flanking the portfolio CTA. */
.at-btn-circle:hover {
    color: var(--qp-gold);
    border-color: var(--qp-gold);
}

/* ---------------------------------------------------------- */
/* 5. Dark theme                                               */
/*    The brand is gold on black, so the dark theme is the one  */
/*    that should look most like the logo.                      */
/* ---------------------------------------------------------- */

[data-bs-theme="dark"] {
    --qp-gold: #e9c63f;
    --qp-gold-rgb: 233, 198, 63;
}

[data-bs-theme="dark"] .at-service-item .count .number {
    color: var(--qp-gold);
}

/* ---------------------------------------------------------- */
/* 6. Partner marquee spacing                                  */
/*    Charkona spaced the logos with 48px of li margin plus a   */
/*    32px list gap and a fixed 170px tile. On a phone that is  */
/*    most of the viewport per logo, so the strip read as a     */
/*    few marks adrift in white space. Scales down now.         */
/* ---------------------------------------------------------- */

.at-brand-area .carouselTicker__list {
    gap: 0 2rem;
}

.at-brand-area .carouselTicker__item {
    margin: 0 1.5rem;
}

@media (max-width: 991.98px) {
    .at-brand-area .carouselTicker__list {
        gap: 0 1rem;
    }

    .at-brand-area .carouselTicker__item {
        margin: 0 0.75rem;
    }

    .at-brand-area .brand-item {
        width: 132px;
        height: 46px;
    }
}

@media (max-width: 575.98px) {
    .at-brand-area .carouselTicker__list {
        gap: 0 0.5rem;
    }

    .at-brand-area .carouselTicker__item {
        margin: 0 0.5rem;
    }

    .at-brand-area .brand-item {
        width: 104px;
        height: 38px;
        padding: 4px 8px;
    }
}