/* ============================================================
   Advertising & Growth Services — standalone landing page (theme v2.4.5)

   Loaded only on is_page_template('template-ad-services.php'), and every
   selector below is scoped to .a16a-svc-page, so this sheet cannot restyle
   another template even if it were loaded by mistake.

   Relationship to the front-page band, deliberately chosen:

     The card component (.service-group / .services-grid / .service-card and
     its children) is NOT re-declared here. That component is owned by
     style.css and this page imports it by using the same class names, so a
     visitor who clicks through from the front page lands on the same surface,
     and a future tweak to the card lands in both places at once. Only the
     page-level sections live in this file.

   Only one new value is introduced beyond the style.css tokens: a near-black
   base (#0b0b0c) that the front-page band's gradient sits on top of. Every
   other colour is either a token or an alpha of #fff, so the page darkens
   consistently if the palette moves.
   ============================================================ */

.a16a-svc-page {
    --a16a-svc-base: #0b0b0c;
    --a16a-svc-panel: #111113;
    --a16a-svc-hairline: rgba(255, 255, 255, .11);
    --a16a-svc-band: linear-gradient(135deg, #0d0d0d 0%, #171717 55%, #26060c 100%);

    background: var(--a16a-svc-base);
    color: rgba(255, 255, 255, .86);
    /*
     * No .container on this template: the page is a full-bleed dark surface and
     * each section supplies its own inner wrapper. See the note in
     * a16a-stone.css about main.a16a-page-container's 3-value padding shorthand
     * zeroing .container's gutter — this template sidesteps that entirely by
     * not using .a16a-page-container at all.
     */
    overflow-x: hidden;
}

/* The page gutter. Every section puts its content through this. */
.a16a-svc-wrap {
    max-width: 1360px;
    margin: 0 auto;
    padding-left: var(--space-xl, 32px);
    padding-right: var(--space-xl, 32px);
}

/*
 * Anchor offset. The in-page links (#services / #process / #faq / #enquire)
 * would otherwise park the section heading underneath the sticky site header —
 * which is sticky at every width, not just on mobile. 96px clears the header
 * with room to spare; the value is generous on purpose because the header
 * grows when a promo strip is showing.
 */
.a16a-svc-list,
.a16a-svc-process,
.a16a-svc-faq,
.a16a-svc-cta {
    scroll-margin-top: 96px;
}

/* Small caps label used beside every English heading. */
.a16a-svc-zh {
    display: inline-block;
    font-size: var(--font-size-sm, 13px);
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .6);
    padding-left: 10px;
    margin-left: 2px;
    border-left: 1px solid rgba(255, 255, 255, .22);
}

/* ---------- HERO ---------- */

.a16a-svc-hero {
    background: var(--a16a-svc-band);
    border-bottom: 1px solid var(--a16a-svc-hairline);
}

.a16a-svc-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    gap: var(--space-2xl, 48px);
    align-items: center;
    padding-top: var(--space-2xl, 48px);
    padding-bottom: var(--space-2xl, 48px);
}

.a16a-svc-eyebrow {
    margin: 0 0 var(--space-sm, 8px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #FF8A9B;
}

.a16a-svc-title {
    margin: 0 0 6px;
    font-size: clamp(32px, 4.8vw, 52px);
    line-height: 1.05;
    letter-spacing: -.015em;
    color: #fff;
}

.a16a-svc-title-zh {
    margin: 0 0 var(--space-md, 16px);
    font-size: var(--font-size-lg, 16px);
    font-weight: 600;
    color: rgba(255, 255, 255, .62);
}

.a16a-svc-standfirst {
    margin: 0 0 var(--space-lg, 24px);
    max-width: 54ch;
    font-size: 17px;
    line-height: 1.62;
    color: rgba(255, 255, 255, .78);
}

.a16a-svc-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg, 24px);
    margin: 0 0 var(--space-lg, 24px);
    padding: var(--space-md, 16px) 0;
    list-style: none;
    border-top: 1px solid var(--a16a-svc-hairline);
    border-bottom: 1px solid var(--a16a-svc-hairline);
}

.a16a-svc-facts li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.a16a-svc-facts b {
    font-size: 21px;
    line-height: 1.1;
    color: #fff;
}

.a16a-svc-facts span {
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}

.a16a-svc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 12px);
}

/*
 * .btn-outline is declared as `background: #fff; color: var(--color-text)`, so
 * overriding only the colour turns it into white text on a white pill —
 * invisible. The background must be cleared explicitly.
 */
.a16a-svc-page .btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
}

.a16a-svc-page .btn-outline:hover,
.a16a-svc-page .btn-outline:focus-visible {
    background: #fff;
    color: var(--color-black, #111111);
    border-color: #fff;
}

.a16a-svc-hero-figure {
    position: relative;
    margin: 0;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: #0a0a0a;
}

/* 16:10 to match the generated tile exactly — no crop, no letterbox. */
.a16a-svc-hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

/* The accent bar ties the figure to the full-channel accent colour, so the
   hero reads as a specific service rather than a decorative photo. */
.a16a-svc-hero-accent {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 1;
    width: 4px;
    background: var(--svc-accent, var(--color-primary, #C8102E));
}

.a16a-svc-hero-figure figcaption {
    padding: 12px var(--space-md, 16px);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .05);
}

.a16a-svc-hero-figure figcaption a {
    color: inherit;
    text-decoration: none;
}

.a16a-svc-hero-figure figcaption a:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---------- POSITIONING ---------- */

.a16a-svc-intro {
    background: var(--a16a-svc-panel);
    border-bottom: 1px solid var(--a16a-svc-hairline);
}

.a16a-svc-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
    gap: var(--space-2xl, 48px);
    padding-top: var(--space-2xl, 48px);
    padding-bottom: var(--space-2xl, 48px);
}

.a16a-svc-intro-title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
}

.a16a-svc-intro-title .a16a-svc-zh,
.a16a-svc-faq-title .a16a-svc-zh {
    display: block;
    margin-top: 8px;
    padding-left: 0;
    border-left: 0;
}

.a16a-svc-intro-body > p {
    margin: 0 0 var(--space-md, 16px);
    font-size: 16.5px;
    line-height: 1.72;
    color: rgba(255, 255, 255, .74);
}

.a16a-svc-intro-body > p:last-child {
    margin-bottom: 0;
}

.a16a-svc-intro-pull {
    margin-top: var(--space-lg, 24px) !important;
    padding-left: var(--space-md, 16px);
    border-left: 3px solid var(--color-primary, #C8102E);
    font-weight: 600;
    color: #fff !important;
}

/* ---------- SERVICE LIST ---------- */

.a16a-svc-list {
    padding-top: var(--space-2xl, 48px);
    padding-bottom: var(--space-2xl, 48px);
}

.a16a-svc-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md, 16px);
    margin-bottom: var(--space-xl, 32px);
}

.a16a-svc-section-head h2 {
    margin: 0;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: #fff;
}

.a16a-svc-section-head p {
    margin: 0;
    max-width: 52ch;
    font-size: var(--font-size-base, 14px);
    color: rgba(255, 255, 255, .64);
}

/* The blurb is page-only (the front-page cards carry bullets + a price only),
   so it is declared here rather than in the shared component. */
.a16a-svc-card-blurb {
    margin: 2px 0 4px;
    font-size: var(--font-size-sm, 13px);
    line-height: 1.6;
    color: rgba(255, 255, 255, .66);
}

/* ---------- PROCESS ---------- */

.a16a-svc-process {
    background: var(--a16a-svc-panel);
    border-top: 1px solid var(--a16a-svc-hairline);
    border-bottom: 1px solid var(--a16a-svc-hairline);
    padding-top: var(--space-2xl, 48px);
    padding-bottom: var(--space-2xl, 48px);
}

.a16a-svc-process-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl, 48px);
}

.a16a-svc-proc-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 var(--space-lg, 24px);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--a16a-svc-hairline);
    font-size: var(--font-size-xl, 18px);
    font-weight: 700;
    color: #fff;
}

.a16a-svc-proc-title .a16a-svc-zh {
    padding-left: 0;
    border-left: 0;
    font-weight: 600;
}

.a16a-svc-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg, 24px);
}

.a16a-svc-step {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: var(--space-md, 16px);
}

.a16a-svc-step-num {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .06em;
    color: var(--color-primary-light, #E8384F);
}

/* Ladder rail: the connector runs between steps, so the column reads as one
   sequence rather than five unrelated blocks. */
.a16a-svc-step + .a16a-svc-step {
    position: relative;
}

.a16a-svc-step + .a16a-svc-step::before {
    content: '';
    position: absolute;
    left: 18px;
    top: calc(-1 * var(--space-lg, 24px));
    height: var(--space-lg, 24px);
    width: 1px;
    background: var(--a16a-svc-hairline);
}

.a16a-svc-step-body {
    min-width: 0;
}

.a16a-svc-step-en {
    margin: 0 0 2px;
    font-size: var(--font-size-lg, 16px);
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}

.a16a-svc-step-zh {
    margin: 0 0 6px;
    font-size: var(--font-size-sm, 13px);
    color: rgba(255, 255, 255, .56);
}

.a16a-svc-step-d {
    margin: 0 0 4px;
    font-size: var(--font-size-base, 14px);
    line-height: 1.65;
    color: rgba(255, 255, 255, .74);
}

.a16a-svc-step-d-zh {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .5);
}

/* ---------- FAQ ---------- */

.a16a-svc-faq {
    padding-top: var(--space-2xl, 48px);
    padding-bottom: var(--space-2xl, 48px);
}

.a16a-svc-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr);
    gap: var(--space-2xl, 48px);
}

.a16a-svc-faq-title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
}

.a16a-svc-faq-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.a16a-svc-faq-item {
    border-bottom: 1px solid var(--a16a-svc-hairline);
}

.a16a-svc-faq-item > summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: var(--space-md, 16px) 34px var(--space-md, 16px) 0;
    cursor: pointer;
    position: relative;
    list-style: none;
}

/* Suppress the platform marker and draw a +/− that flips on open. */
.a16a-svc-faq-item > summary::-webkit-details-marker {
    display: none;
}

.a16a-svc-faq-item > summary::after {
    content: '+';
    position: absolute;
    top: 14px;
    right: 6px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: var(--color-primary-light, #E8384F);
}

.a16a-svc-faq-item[open] > summary::after {
    content: '\2212'; /* minus sign */
}

.a16a-svc-faq-q {
    font-size: var(--font-size-lg, 16px);
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.a16a-svc-faq-item > summary .a16a-svc-zh {
    padding-left: 0;
    border-left: 0;
    font-size: 12.5px;
}

.a16a-svc-faq-a {
    padding: 0 34px var(--space-md, 16px) 0;
}

.a16a-svc-faq-a p {
    margin: 0 0 10px;
    font-size: var(--font-size-base, 14px);
    line-height: 1.72;
    color: rgba(255, 255, 255, .74);
}

.a16a-svc-faq-a p:last-child {
    margin-bottom: 0;
    font-size: 12.5px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .52);
}

/* ---------- STANDING NOTES ---------- */

.a16a-svc-notes {
    background: var(--a16a-svc-panel);
    border-top: 1px solid var(--a16a-svc-hairline);
    border-bottom: 1px solid var(--a16a-svc-hairline);
    padding-top: var(--space-xl, 32px);
    padding-bottom: var(--space-xl, 32px);
}

.a16a-svc-notes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl, 32px);
}

.a16a-svc-note h3 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 var(--space-sm, 8px);
    font-size: var(--font-size-lg, 16px);
    font-weight: 700;
    color: #fff;
}

.a16a-svc-note h3 .a16a-svc-zh {
    padding-left: 0;
    border-left: 0;
    font-size: 12.5px;
    font-weight: 600;
}

.a16a-svc-note p {
    margin: 0 0 8px;
    font-size: var(--font-size-base, 14px);
    line-height: 1.68;
    color: rgba(255, 255, 255, .72);
}

.a16a-svc-note-zh {
    margin: 0;
    font-size: 12.5px !important;
    line-height: 1.72 !important;
    color: rgba(255, 255, 255, .5) !important;
}

/* ---------- CTA ---------- */

.a16a-svc-cta {
    background: var(--a16a-svc-band);
    text-align: center;
}

.a16a-svc-cta .a16a-svc-wrap {
    padding-top: var(--space-2xl, 48px);
    padding-bottom: var(--space-2xl, 48px);
}

.a16a-svc-cta h2 {
    margin: 0 0 var(--space-sm, 8px);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.15;
    color: #fff;
}

.a16a-svc-cta > .a16a-svc-wrap > p {
    max-width: 62ch;
    margin: 0 auto var(--space-lg, 24px);
    font-size: 15.5px;
    line-height: 1.68;
    color: rgba(255, 255, 255, .76);
}

.a16a-svc-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 12px);
    justify-content: center;
    margin-bottom: var(--space-xl, 32px);
}

/* Brand-coloured companions to the enquiry button. White on WhatsApp's own
   teal #128C7E is 4.14:1, just under the 4.5:1 that 14px bold text needs, so
   this sheet uses the same #0F7E70 (4.95:1) as a16a-chat.css and
   a16a-stone.css. Messenger's #006AFF passes at 4.66:1. */
.a16a-svc-cta .btn-wa { background: #0F7E70; color: #fff; }
.a16a-svc-cta .btn-ms { background: #006AFF; color: #fff; }

.a16a-svc-cta .btn-wa:hover,
.a16a-svc-cta .btn-wa:focus-visible,
.a16a-svc-cta .btn-ms:hover,
.a16a-svc-cta .btn-ms:focus-visible {
    color: #fff;
    filter: brightness(1.08);
}

.a16a-svc-cta .a16a-chat-glyph {
    display: block;
    flex: 0 0 auto;
}

/* .services-note is the shared component, but it is left-aligned for the
   front-page band; inside a centred CTA it has to centre with it. */
.a16a-svc-cta .services-note {
    margin-top: 0;
    text-align: left;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 1024px) {
    .a16a-svc-intro-grid,
    .a16a-svc-faq-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl, 32px);
    }

    .a16a-svc-process-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2xl, 48px);
    }

    .a16a-svc-notes-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg, 24px);
    }
}

@media (max-width: 900px) {
    .a16a-svc-wrap {
        padding-left: var(--space-lg, 24px);
        padding-right: var(--space-lg, 24px);
    }

    .a16a-svc-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg, 24px);
        padding-top: var(--space-xl, 32px);
        padding-bottom: var(--space-xl, 32px);
    }

    .a16a-svc-title-zh {
        font-size: var(--font-size-base, 14px);
    }

    .a16a-svc-hero-figure {
        /* Below the copy the hero figure is already the second thing seen; a
           16:10 tile here is a reasonable height and needs no ratio change. */
        order: 2;
    }
}

@media (max-width: 640px) {
    .a16a-svc-wrap {
        padding-left: var(--space-md, 16px);
        padding-right: var(--space-md, 16px);
    }

    .a16a-svc-facts {
        gap: var(--space-md, 16px);
    }

    .a16a-svc-actions .btn,
    .a16a-svc-cta-actions .btn {
        width: 100%;
    }

    .a16a-svc-step {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
    }

    .a16a-svc-step + .a16a-svc-step::before {
        left: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a16a-svc-page,
    .a16a-svc-page * {
        transition: none !important;
        animation: none !important;
    }
}