/* ============================================
   ADZIO — Services Page
   Refined dark-editorial agency layout
   ============================================ */

.services-page-main {
    padding-top: 0;
    overflow-x: clip;
}

.svc-shell {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(22px, 4vw, 72px);
    position: relative;
    z-index: 1;
}

/* Shared accent tokens (overridden per service) */
.svc-detail {
    --svc: #0ea5e9;
    --svc-bright: #38bdf8;
    --svc-rgb: 14, 165, 233;
}
/* Per-service accents match the home-page service-card highlight colors,
   applied top→bottom: Meta blue → Google blue → Adzio cyan → Instagram magenta */
.svc-detail[data-accent="teal"]   { --svc: #0866FF; --svc-bright: #4d8bff; --svc-rgb: 8, 102, 255; }
.svc-detail[data-accent="blue"]   { --svc: #4285F4; --svc-bright: #6ba1f7; --svc-rgb: 66, 133, 244; }
.svc-detail[data-accent="amber"]  { --svc: #00b8d4; --svc-bright: #33d6ee; --svc-rgb: 0, 184, 212; }
.svc-detail[data-accent="purple"] { --svc: #0A2FA0; --svc-bright: #2854CC; --svc-rgb: 10, 47, 160; }

/* The fixed Book a Call button takes on the accent of whichever service section
   is under it. JS only sets data-cta-accent, the colors stay here. Only the
   background changes, the ink stays near-black on every accent. */
.pinned-header-cta[data-cta-accent="teal"]   { --btn-bg: #0866FF; background: transparent; color: #070b10; }
.pinned-header-cta[data-cta-accent="teal"]:hover   { --btn-bg: #06449d; background: transparent; color: #ffffff; box-shadow: none; }
.pinned-header-cta[data-cta-accent="blue"]   { --btn-bg: #4285F4; background: transparent; color: #070b10; }
.pinned-header-cta[data-cta-accent="blue"]:hover   { --btn-bg: #245aa8; background: transparent; color: #ffffff; box-shadow: none; }
.pinned-header-cta[data-cta-accent="amber"]  { --btn-bg: #00b8d4; background: transparent; color: #070b10; }
.pinned-header-cta[data-cta-accent="amber"]:hover  { --btn-bg: #006477; background: transparent; color: #ffffff; box-shadow: none; }
.pinned-header-cta[data-cta-accent="purple"] { --btn-bg: #0A2FA0; background: transparent; color: #070b10; }
.pinned-header-cta[data-cta-accent="purple"]:hover { --btn-bg: #061b5d; background: transparent; color: #ffffff; box-shadow: none; }

/* ============================================
   HERO
   ============================================ */

.svc-hero {
    position: relative;
    min-height: auto;
    padding: clamp(1.4rem, 3.5vh, 3rem) 0 clamp(2.6rem, 5vh, 4.6rem);
    text-align: left;
    overflow: hidden;
    isolation: isolate;
}

.svc-hero::before {
    content: '';
    position: absolute;
    inset: -120px -10% 0;
    background:
        radial-gradient(ellipse 45% 42% at 62% 18%, rgba(0, 184, 212, 0.16), transparent 64%),
        radial-gradient(ellipse 35% 30% at 88% 54%, rgba(244, 199, 107, 0.08), transparent 68%);
    background-size: auto, auto;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.72) 52%, transparent 100%);
    opacity: 0.72;
    pointer-events: none;
    z-index: -2;
}

/* The bottom fade-to-solid that used to live here was painting an opaque
   var(--bg-primary) band over the animated silk canvas (html.silk-active lets
   the canvas show through), which left a hard seam across the section's lower
   edge and made the hero read as a darker panel than everything around it.
   Removed so the background runs continuously through the hero. */

.svc-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(390px, 0.78fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5.5rem);
    min-height: clamp(420px, 52vh, 560px);
}

.svc-hero-inner {
    max-width: 680px;
    margin: 0;
}

.svc-hero .hero-eyebrow {
    top: 0;
    margin-bottom: clamp(1rem, 2.2vh, 1.6rem);
    font-size: clamp(1.45rem, 2.6vw, 2.9rem);
    letter-spacing: 0.28em;
    color: #F8F4EC;
    text-shadow: 0 0 34px rgba(0, 184, 212, 0.14);
}

.svc-hero .hero-eyebrow-dot {
    width: clamp(12px, 1.1vw, 17px);
    height: clamp(12px, 1.1vw, 17px);
}

.svc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px;
    margin-bottom: 1.6rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.svc-kicker-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-secondary);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
    animation: svc-pulse 2.4s ease-in-out infinite;
}

@keyframes svc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.82); }
}

.svc-hero-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 4.8vw, 5.45rem);
    line-height: 0.96;
    letter-spacing: 0;
    margin: 0 0 clamp(1rem, 1.8vh, 1.45rem);
    max-width: 12.5ch;
    color: #F8F4EC;
}

.svc-hero-lead {
    max-width: 560px;
    margin: 0 0 clamp(1.35rem, 2.8vh, 2rem);
    font-size: clamp(1rem, 1.05vw, 1.12rem);
    line-height: 1.68;
    color: rgba(244, 241, 234, 0.76);
    font-weight: 400;
}

.svc-hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.svc-hero-cta .btn {
    min-width: 210px;
    min-height: 54px;
    border-radius: 3px;
}

/* The editorial masthead hero replaced this column layout; its only remaining
   child is the hidden command centre, so drop it (its min-height would
   otherwise leave ~500px of dead space under the hero). */
.svc-hero-layout {
    display: none !important;
}

/* Hide command center graphic and stats */
.svc-command-center {
    display: none !important;
    position: relative;
    min-height: auto;
    padding: clamp(1rem, 1.5vw, 1.25rem);
    border: 1px solid rgba(244, 241, 234, 0.12);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(15, 22, 28, 0.82), rgba(6, 9, 13, 0.88)),
        radial-gradient(circle at 70% 18%, rgba(0, 184, 212, 0.16), transparent 35%);
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.svc-command-center::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 184, 212, 0.08) 0 1px, transparent 1px 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 100%);
    background-size: 44px 44px;
    opacity: 0.24;
    pointer-events: none;
}

.svc-command-center::after {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 184, 212, 0.18), transparent 66%);
    pointer-events: none;
}

.svc-command-head,
.svc-command-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(244, 241, 234, 0.1);
    border-radius: 8px;
    background: rgba(3, 6, 10, 0.52);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.svc-command-head span,
.svc-command-footer span:last-child {
    color: rgba(244, 241, 234, 0.52);
    font-family: 'Archivo', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.svc-command-head strong {
    color: #F8F4EC;
    font-family: 'Archivo', sans-serif;
    font-size: 0.94rem;
}

.svc-command-board {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.34fr);
    gap: 0.9rem;
    margin: 0.9rem 0;
}

.svc-board-main,
.svc-board-side {
    display: grid;
    gap: 0.75rem;
}

.svc-board-row,
.svc-board-side > div {
    position: relative;
    padding: 1rem;
    border: 1px solid rgba(244, 241, 234, 0.11);
    border-radius: 8px;
    background: rgba(5, 8, 12, 0.72);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.svc-board-row::before,
.svc-board-side > div::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 99px;
    background: var(--cyan);
    box-shadow: 0 0 18px rgba(0, 184, 212, 0.34);
}

.svc-board-row span,
.svc-board-side span {
    display: block;
    margin-bottom: 0.46rem;
    color: rgba(244, 241, 234, 0.48);
    font-family: 'Archivo', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.svc-board-row strong,
.svc-board-side strong {
    display: block;
    color: #F8F4EC;
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1rem, 1.15vw, 1.2rem);
    line-height: 1.15;
}

.svc-board-row em {
    position: absolute;
    top: 0.9rem;
    right: 0.95rem;
    color: var(--cyan);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
}

.svc-live-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 7px rgba(0, 184, 212, 0.08), 0 0 20px rgba(0, 184, 212, 0.55);
}

/* Trust strip */
.svc-trust {
    margin-top: clamp(1.6rem, 3.5vh, 2.8rem);
    padding: clamp(1.1rem, 2.2vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.svc-trust-label {
    display: block;
    margin-bottom: 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

.svc-trust-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.6rem, 4vw, 3.4rem);
    flex-wrap: wrap;
}

.svc-trust-logos img {
    height: clamp(20px, 2vw, 28px);
    width: auto;
    object-fit: contain;
    opacity: 0.82;
    filter: saturate(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.svc-trust-logos img:hover {
    opacity: 1;
    transform: scale(1.12);
}

/* Stat band */
.svc-stats {
    display: none !important;
}

.svc-hero-layout {
    grid-template-columns: 1fr !important;
    justify-items: center;
}

.svc-hero-inner {
    text-align: center;
    max-width: 900px !important;
}

.svc-hero-title {
    max-width: none;
}

.svc-hero-title-line {
    display: block;
}

.svc-title-booked,
.svc-title-revenue {
    display: block;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.svc-title-booked {
    background-image: linear-gradient(120deg, #57c7d4, #8fe3d9);
}

.svc-title-revenue {
    background-image: linear-gradient(120deg, #00b8d4, #57c7d4);
}

@media (min-width: 1001px) {
    .svc-hero-title-line {
        white-space: nowrap;
    }
}

.svc-hero-lead {
    margin-left: auto;
    margin-right: auto;
}

.svc-hero-cta {
    justify-content: center;
}

.logo-slider {
    margin-top: 1.5rem !important;
}

.svc-platform-heading {
    gap: 0.35em;
    font-size: clamp(0.85rem, 1.15vw, 1.05rem);
    letter-spacing: 0.16em;
}

.svc-platform-heading::before,
.svc-platform-heading::after {
    display: none;
}

.svc-platform-heading > span {
    color: var(--cyan);
}

/* Hidden stats backup */
.svc-stats-hidden {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: clamp(1rem, 2.6vh, 1.8rem);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.svc-stat-item {
    padding: clamp(1.35rem, 2.1vw, 2rem);
    text-align: left;
    background:
        linear-gradient(180deg, rgba(13, 22, 28, 0.9), rgba(8, 13, 18, 0.94)),
        radial-gradient(circle at 12% 0%, rgba(0, 184, 212, 0.07), transparent 40%);
}

.svc-stat-item strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 2.6vw, 2.5rem);
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0.7rem;
    background: linear-gradient(135deg, #ffffff, #9ca3af);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.svc-stat-item span {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ============================================
   SERVICE DETAIL BLOCKS
   ============================================ */

.svc-detail {
    position: relative;
    padding: 4.2rem 0;
    scroll-margin-top: 120px;
}

/* Detail sections break out of the centered shell and push to the screen
   edges, alternating sides; full-bleed gutters kept tight to kill dead space */
.svc-detail .svc-shell {
    max-width: 1820px;
    padding: 0 clamp(28px, 4vw, 80px);
}

/* The docked side nav is position:fixed over the left gutter (its right edge
   lands at ~106-117px once the 1.12 scale is applied on wide screens). Below
   ~1700px the default 4vw gutter is narrower than that, so detail content ran
   underneath it. Reserve a floor that always clears the pill. */
@media (min-width: 769px) {
    .svc-detail .svc-shell {
        padding-left: max(clamp(24px, 3.5vw, 70px), 110px);
    }

    /* Social proof cards section shifted 40px to the right as a group */
    #social-media-management .svc-shell {
        padding-left: max(clamp(24px, 3.5vw, 70px), 150px);
    }
}

/* The proof cards carry a 3-column stat header, so their min-content width
   stops the visual column shrinking. Below ~1200px that starves the copy and
   the heading over-wraps, so this section stacks earlier than the others. */
@media (min-width: 769px) and (max-width: 1200px) {
    #social-media-management .svc-detail-grid {
        grid-template-columns: 1fr;
        row-gap: 2.6rem;
    }

    #social-media-management .svc-copy,
    #social-media-management .svc-visual {
        order: initial;
        left: 0;
    }

    #social-media-management .svc-proof-stack {
        max-width: min(100%, 760px);
    }
}

.svc-detail-grid {
    display: grid;
    /* Copy column now leads; the visual hugs the smaller artwork instead of
       reserving the old width and leaving a dead gap mid-row. */
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: center;
}

.svc-detail--reverse .svc-detail-grid {
    grid-template-columns: 1fr 1.3fr;
}

#ad-management .svc-detail-grid,
#lead-generation .svc-detail-grid,
#landing-pages .svc-detail-grid {
    transform: translateX(25px);
}

.svc-detail--reverse .svc-copy { order: 2; }
.svc-detail--reverse .svc-visual { order: 1; }

/* Copy renders at its true size — the old scale:1.08 pushed the text 8% past
   its own grid box, which is what made this section read "zoomed in". */
.svc-copy.animate-on-scroll {
    transform-origin: left top;
}

.svc-detail--reverse .svc-copy.animate-on-scroll {
    transform-origin: right top;
}

/* Bigger type / breathing room now that the columns are wider */
.svc-index {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1.2rem;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    color: var(--svc-bright);
    font-family: 'Archivo', sans-serif;
    font-size: 1.07rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.svc-detail-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(2.43rem, 4.08vw, 4.08rem);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin-bottom: 1.2rem;
    max-width: 18ch;
}

.svc-detail-lead {
    color: rgba(248, 244, 236, 0.82);
    font-size: 0.97rem;
    font-style: italic;
    line-height: 1.65;
    max-width: 54ch;
    margin-bottom: 2rem;
}

.svc-list {
    list-style: none;
    margin: 0 0 2.4rem;
    display: grid;
    gap: 1rem;
    counter-reset: svc-feature;
}

.svc-list li {
    position: relative;
    padding-left: 3.05rem;
    color: var(--dust-grey);
    font-size: 1.13rem;
    line-height: 1.55;
    counter-increment: svc-feature;
}

.svc-list li::before {
    content: counter(svc-feature, decimal-leading-zero) '.';
    position: absolute;
    left: 0;
    top: 0.02em;
    min-width: 2.25rem;
    color: var(--svc-bright);
    font-family: var(--font-heading);
    font-size: 1.02em;
    font-weight: 900;
    line-height: inherit;
    letter-spacing: 0.08em;
    text-shadow: 0 0 14px rgba(var(--svc-rgb), 0.22);
}

/* Themed CTA per service — single flat color, no gradient, no glow */
.svc-cta.btn-primary {
    --btn-bg: var(--svc);
    background: transparent;
    color: #051014;
    box-shadow: none;
    font-size: 0.855rem;
}

/* The global button shape now lives on ::before. Keep that layer visible here;
   the flat --svc fill supplies the service-specific color without a sheen. */
.svc-cta.btn-primary::before {
    display: block;
}

/* Hover is the arrow reveal only: the fill stays put and the button opens up to
   the right to make room for the arrow sliding into place. */
.svc-cta.btn-primary:hover {
    --btn-bg: var(--svc);
    --btn-ring: none;
    background: transparent;
    color: #051014;
    box-shadow: none;
    transform: translate(3px, -3px);
}

.svc-cta.btn-primary svg {
    width: 18px;
    height: 18px;
    max-width: 0;
    opacity: 0;
    /* Cancels the .btn flex gap while the arrow is closed, so the rest state
       sits tight to the label. */
    margin-left: -0.6rem;
    transform: translateX(-8px);
    transition: max-width 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        margin-left 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.22s ease;
}

.svc-cta.btn-primary:hover svg {
    max-width: 20px;
    margin-left: 0;
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   SERVICE VISUAL CARDS
   ============================================ */

.svc-visual {
    position: relative;
    padding: 1.5rem 0;
}

/* No rightward nudge: it pushed the headline into (and past) the right gutter.
   The column sits in its own grid cell now. */
#social-media-management .svc-copy {
    transform: none;
    max-width: 660px;
}

#social-media-management .svc-visual {
    margin-top: 1.2rem;
    transform: translateY(16px);
}

@media (min-width: 1201px) {
    /* minmax(0, …) rather than fixed 640/560 minimums: those plus the gap came
       to 1282px, more than the shell's content box below ~1450px, so the grid
       overflowed the page instead of shrinking. */
    #social-media-management .svc-detail-grid {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr);
        gap: clamp(4.75rem, 6.2vw, 7rem);
    }

    #social-media-management .svc-detail-title {
        font-size: clamp(3.05rem, 4.35vw, 4.55rem);
        max-width: 17ch;
    }

    #social-media-management .svc-detail-lead {
        max-width: 58ch;
        font-size: clamp(1rem, 1.02vw, 1.12rem);
    }

    #social-media-management .svc-list {
        gap: 1.08rem;
    }

    #social-media-management .svc-list li {
        font-size: clamp(1.08rem, 1.03vw, 1.22rem);
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    #social-media-management .svc-copy {
        transform: none;
        max-width: 760px;
    }
}

.svc-proof-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: clamp(30px, 2.4vw, 40px);
    margin-right: 0;
    margin-bottom: 0.35rem;
    transform: translateY(-8px);
    width: min(100%, clamp(600px, 47vw, 920px));
}

.svc-proof-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}

.svc-ig-gradient-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.svc-proof-tag span {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.88rem, 1.05vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-primary);
}

/* Real founder social case studies, stacked in the visual column */
.svc-proof-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(0.9rem, 1.05vw, 1.25rem);
    /* Expanded width so all 3 stat columns sit comfortably without right
       clipping, and so the cards close the gap toward the nav. */
    width: min(100%, clamp(600px, 47vw, 920px));
    max-width: none;
}

.svc-proof-stack .abt-proof-card {
    aspect-ratio: auto;
    width: 100%;
    justify-self: auto;
    padding: clamp(14px, 1.25vw, 20px) clamp(24px, 2vw, 34px) clamp(14px, 1.3vw, 20px);
    border-radius: 10px;
}

.svc-proof-stack .abt-proof-card::before {
    inset: 0 10px;
    border-radius: 8px;
}

.svc-proof-stack .abt-feed-item,
.svc-proof-stack .abt-feed-skeleton {
    border-radius: 3px;
}

.svc-proof-stack .abt-proof-head {
    margin-bottom: clamp(0.55rem, 0.75vw, 0.85rem);
}

.svc-proof-stack .abt-proof-card--cyan {
    top: 0;
}

/* The second card ships purple from the about page. On services it sits inside
   the social section, so it takes that section's blue instead. */
.svc-proof-stack .abt-proof-card--purple {
    --proof: #2854CC;
}

.svc-proof-stack .abt-proof-feed {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 0.8vw, 12px);
    margin: clamp(0.55rem, 0.7vw, 0.8rem) 0 clamp(0.5rem, 0.65vw, 0.7rem);
    transform: translateX(-5px);
    width: calc(100% - 5px);
}

.svc-proof-stack .abt-proof-cta {
    transform: translateX(-6px);
}

.svc-proof-stack .abt-feed-item {
    aspect-ratio: 16 / 8.5;
}

/* Compact social proof metrics in the unused profile-header space. */
.svc-proof-stack .svc-proof-stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: clamp(9px, 1vw, 16px);
    margin-left: auto;
    text-align: center;
}

.svc-proof-stack .svc-proof-stat {
    min-width: clamp(64px, 4.4vw, 82px);
}

.svc-proof-stack .svc-proof-stat + .svc-proof-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: clamp(9px, 1vw, 16px);
}

.svc-proof-stack .svc-proof-stat strong {
    display: block;
    color: var(--text-primary);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.svc-proof-stack .svc-proof-stat span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-family: 'Archivo', sans-serif;
    font-size: clamp(0.52rem, 0.52vw, 0.62rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

@media (max-width: 540px) {
    .svc-proof-stack .abt-proof-head {
        flex-wrap: wrap;
    }

    .svc-proof-stack .svc-proof-stats {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        margin-left: 0;
        margin-top: 4px;
    }

    .svc-proof-stack .svc-proof-stat {
        min-width: 0;
    }
}

.svc-card {
    position: relative;
    border-radius: 26px;
    padding: 26px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 28px 70px rgba(0, 0, 0, 0.45);
    z-index: 2;
}

.svc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: none;
    pointer-events: none;
}

.svc-card > * { position: relative; z-index: 1; }

.svc-float-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    z-index: 3;
}

.svc-float-chip img { width: 33px; height: 33px; object-fit: contain; }

.svc-float-chip span {
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dust-grey);
    white-space: nowrap;
}

/* Float above the card so it never overlaps the card's content */
.svc-float-chip--a { top: -36px; right: 0; bottom: auto; left: auto; }
.svc-detail--reverse .svc-float-chip--a { left: 0; right: auto; top: -36px; bottom: auto; }

/* Meta section: the ad grid is narrower than .svc-visual and centred, so the
   chip borrows the grid's own width and left-aligns inside it. That lands it on
   the tiles' left edge instead of the column edge. */
.svc-visual:has(.svc-ad-grid) .svc-float-chip--a {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, clamp(410px, 31.5vw, 645px));
    justify-content: flex-start;
}

@keyframes svc-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.svc-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
}

.svc-card-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.svc-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(var(--svc-rgb), 0.14);
    color: var(--svc-bright);
}

.svc-pill--live::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--svc-bright);
    box-shadow: 0 0 8px var(--svc-bright);
    animation: svc-pulse 1.8s ease-in-out infinite;
}

/* Meta — bar chart */
.svc-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 200px;
    margin-bottom: 1.5rem;
}

.svc-bars span {
    flex: 1;
    height: var(--h);
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, var(--svc-bright), rgba(var(--svc-rgb), 0.25));
    box-shadow: 0 0 18px rgba(var(--svc-rgb), 0.28);
    transform-origin: bottom;
    animation: svc-bar-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--d);
}

@keyframes svc-bar-rise {
    from { transform: scaleY(0); opacity: 0; }
    to { transform: scaleY(1); opacity: 1; }
}

.svc-card-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.svc-mini-stat {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.svc-mini-stat strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
    color: var(--svc-bright);
    margin-bottom: 2px;
}

.svc-mini-stat span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Google — search mock */
.svc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.svc-search svg { width: 16px; height: 16px; color: var(--svc-bright); flex-shrink: 0; }

.svc-search-location {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Local Service Ad block */
.svc-lsa-block {
    margin-bottom: 1rem;
}

.svc-lsa-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    padding: 0 4px;
}

.svc-lsa-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.svc-lsa-card--winner {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: none;
}

.svc-lsa-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--svc-bright), var(--svc));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 0.8rem;
    color: #051014;
    flex-shrink: 0;
}

.svc-lsa-body { flex: 1; min-width: 0; }

.svc-lsa-name {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--svc-bright);
    margin-bottom: 3px;
}

.svc-lsa-verified {
    font-size: 0.65rem;
    font-weight: 700;
    color: #00e58b;
    background: rgba(0, 229, 139, 0.12);
    padding: 2px 7px;
    border-radius: 999px;
    margin-left: 6px;
}

.svc-lsa-stars {
    font-size: 0.78rem;
    color: #d9a441;
    margin-bottom: 8px;
}

.svc-lsa-stars span {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin-left: 4px;
}

.svc-lsa-actions {
    display: flex;
    gap: 6px;
}

.svc-lsa-btn {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    white-space: nowrap;
}

.svc-lsa-btn--book {
    background: var(--svc);
    color: #051014;
    border-color: transparent;
}

.svc-lsa-rank {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--svc-bright);
    opacity: 0.3;
    flex-shrink: 0;
}

/* Maps pack */
.svc-maps-pack {
    margin-bottom: 1rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.svc-maps-label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.svc-maps-label svg { color: #ea4335; }

.svc-maps-result {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.svc-maps-result:last-child { border-bottom: none; }

.svc-maps-result strong {
    font-family: 'Archivo', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.svc-maps-result em {
    font-style: normal;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.svc-maps-result--you {
    background: linear-gradient(90deg, rgba(var(--svc-rgb), 0.1), transparent);
}

.svc-maps-result--you strong { color: var(--svc-bright); }
.svc-maps-result--you em { color: rgba(var(--svc-rgb), 0.8); }

.svc-maps-result--dim { opacity: 0.5; }

/* Google stat strip */
.svc-google-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.svc-google-stat {
    text-align: center;
    padding: 12px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.svc-google-stat strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -0.03em;
    color: var(--svc-bright);
    margin-bottom: 2px;
}

.svc-google-stat span {
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ─────────────────────────────────────────────
   OLD RESULT / AD-TAG (kept for safety)
───────────────────────────────────────────── */

.svc-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-radius: 16px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.svc-result:last-child { margin-bottom: 0; }

.svc-result strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
}

.svc-result em {
    display: block;
    font-style: normal;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.svc-result--ad {
    background: linear-gradient(135deg, rgba(var(--svc-rgb), 0.16), rgba(var(--svc-rgb), 0.04));
    border-color: rgba(var(--svc-rgb), 0.4);
    box-shadow: 0 0 26px rgba(var(--svc-rgb), 0.14);
}

.svc-result--ad strong { color: var(--svc-bright); }
.svc-result--ad em { color: rgba(var(--svc-rgb), 0.9); }

.svc-ad-tag {
    flex-shrink: 0;
    padding: 4px 9px;
    border-radius: 7px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--svc);
    color: #051014;
}

/* Website — browser redesign */
.svc-card--web {
    padding: 0;
    min-height: 0;
    position: relative;
    max-width: clamp(500px, 41vw, 840px);
    margin: 0 0 0 auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

/* The ambient halo lives on .svc-browser-col (see below) so it tracks the
   browser mock's own bottom-left corner instead of a fixed offset from the
   card, which drifted as the phone column resized. */

.svc-card--google {
    max-width: clamp(400px, 31vw, 630px);
    margin: 0 auto 0 0;
}

/* This section carries two devices instead of one, so its visual column is
   sized explicitly rather than by fr. An fr ratio wide enough for the devices
   squeezed the copy column past the manual line breaks in the headline. */
@media (min-width: 1001px) {
    #landing-pages .svc-detail-grid {
        /* Capped at 1080px: past that the shell stops growing, so the copy
           column is what gives, and the headline needs ~477px to hold its
           manual line breaks. */
        grid-template-columns: 1fr clamp(560px, 50vw, 1080px);
        gap: clamp(2rem, 3.4vw, 4rem);
    }

    /* Column governs the width here, not the single-mockup cap. */
    #landing-pages .svc-card--web {
        max-width: 100%;
    }

    /* Cap holds the phone taller than the browser at the widest viewports,
       where the browser stops gaining width and starts gaining height. */
    #landing-pages .svc-iphone {
        width: clamp(158px, 14vw, 242px);
    }
}

/* Phone + desktop shown side by side: the mobile build sits left and runs
   taller, so the browser gives up width rather than the card growing. */
.svc-web-stage {
    display: flex;
    /* Both devices sit on the same baseline */
    align-items: flex-end;
    gap: clamp(10px, 1.1vw, 18px);
    width: 100%;
}

/* Desktop only: close the gap so the browser mock's edge touches the phone. */
@media (min-width: 541px) {
    .svc-web-stage {
        gap: 0;
    }
}

.svc-web-stage .svc-browser {
    flex: 1 1 auto;
    min-width: 0;
}

/* The Stripe chip rides directly above the browser mock's top-left corner, so
   it shares the browser's column instead of being positioned off the card. */
.svc-browser-col {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

/* Soft ambient light halo straddling the bottom-left corner of the browser
   mock. The browser itself is z-index 1, so this sits behind it. */
.svc-browser-col::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: clamp(190px, 19vw, 320px);
    height: clamp(190px, 19vw, 320px);
    transform: translate(-38%, 38%);
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.07) 42%, transparent 70%);
    filter: blur(22px);
    pointer-events: none;
    z-index: 0;
}

/* Directional edge light along that same corner */
.svc-browser-col::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42%;
    height: 42%;
    border-bottom-left-radius: 14px;
    box-shadow:
        -12px 12px 30px rgba(255, 255, 255, 0.16),
        -4px 4px 12px rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to top right, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top right, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
}

.svc-float-chip--stacked {
    position: static;
    align-self: flex-start;
}

.svc-browser {
    border-radius: 14px;
    overflow: hidden;
    border: none;
    background: linear-gradient(180deg, rgba(12, 18, 24, 0.96), rgba(8, 12, 16, 0.96));
    width: 100%;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 1;
}

/* ---- iPhone mockup ---- */
.svc-iphone {
    container-type: inline-size;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: clamp(146px, 15.2vw, 212px);
    aspect-ratio: 9 / 19.5;
    padding: 4.5px;
    border-radius: 30px;
    /* Brushed titanium rim, lit from the top-left like the browser chrome */
    background: linear-gradient(158deg, #454d55 0%, #171c21 26%, #0b0e12 62%, #333a42 100%);
    box-shadow:
        0 34px 70px rgba(0, 0, 0, 0.62),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.svc-iphone-screen {
    position: relative;
    height: 100%;
    border-radius: 26px;
    overflow: hidden;
    background: #05080b;
}

/* Dynamic Island */
.svc-iphone-screen::before {
    content: '';
    position: absolute;
    z-index: 4;
    top: 2.6cqw;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
    height: 4.2cqw;
    border-radius: 999px;
    background: #04070a;
}

/* Legibility scrim: dark at the ends, clear across the middle of the photo */
.svc-iphone-screen::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(4, 7, 10, 0.78) 0%,
        rgba(4, 7, 10, 0.14) 30%,
        rgba(4, 7, 10, 0.58) 58%,
        rgba(4, 7, 10, 0.94) 100%);
}

/* Crop to the right of the source art, clear of its baked-in desktop copy.
   The frame is tall and narrow, so cover scales by height and object-position
   Y does nothing - the zoom + lift is what pushes the source's desktop nav
   bar up out of shot. */
.svc-iphone-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 74% 50%;
    transform: scale(1.2) translateY(-5.5%);
}

.svc-iphone-ui {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 9.5cqw 6cqw 6cqw;
    font-family: 'Outfit', sans-serif;
}

.svc-iphone-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateY(8px);
}

.svc-iphone-brand {
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 5.2cqw;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.svc-iphone-burger {
    display: flex;
    flex-direction: column;
    gap: 1.1cqw;
    width: 5cqw;
}

.svc-iphone-burger i {
    height: 0.85cqw;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
}

.svc-iphone-burger i:first-child {
    width: 62%;
    align-self: flex-end;
}

.svc-iphone-hero {
    margin-top: auto;
    transform: translateY(-15px);
}

.svc-iphone-title {
    margin: 0 0 2.4cqw;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 10.4cqw;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

/* Luxury brown accent for the mock client site. Scoped to the mockup only so
   the section's own branding (index label, list ticks, "Build My Website")
   keeps the Adzio cyan. */
.svc-web-stage {
    --mock-accent: #B08D57;
    --mock-accent-soft: #E3C7A0;
    --mock-ink: #1F1305;
}

.svc-iphone-title em {
    font-style: normal;
    color: var(--mock-accent-soft, var(--svc-bright));
}

.svc-iphone-sub {
    margin: 0 0 4.4cqw;
    color: rgba(255, 255, 255, 0.72);
    font-size: 4.1cqw;
    line-height: 1.45;
}

.svc-iphone-cta {
    display: block;
    padding: 3.9cqw 0;
    border-radius: 1.8cqw;
    background: var(--mock-accent, var(--svc));
    color: var(--mock-ink, #04141a);
    font-size: 4.1cqw;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.svc-iphone-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.2cqw;
    margin-top: 4.2cqw;
    color: rgba(255, 255, 255, 0.66);
    font-size: 3.5cqw;
    font-weight: 500;
}

.svc-iphone-stars {
    color: #f5b544;
    font-size: 3.4cqw;
    letter-spacing: 0.06em;
}

.svc-iphone-trust i {
    width: 1px;
    height: 3cqw;
    background: rgba(255, 255, 255, 0.24);
}

.svc-iphone-safari {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(18, 22, 28, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2.2cqw 0 2.2cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4cqw;
    z-index: 10;
    border-bottom-left-radius: 9cqw;
    border-bottom-right-radius: 9cqw;
}

.svc-iphone-url {
    color: rgba(255, 255, 255, 0.72);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 3.2cqw;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1;
    text-align: center;
}

.svc-iphone-home-bar {
    width: 32%;
    height: 1.1cqw;
    min-height: 2.5px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
}

/* Side by side stops being legible once the browser drops under ~280px. Rather
   than stacking them as two separate floating images, the browser takes the
   full column and the phone sits in front of its lower-left corner: the same
   depth relationship the desktop composition has, so the pair still reads as
   one product shot instead of a list of two. */
@media (max-width: 540px) {
    .svc-web-stage {
        display: flex;
        /* Both devices finish on the same bottom edge */
        align-items: flex-end;
        gap: 0;
    }

    .svc-browser-col {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The negative margin equals the phone's own width, so it takes no layout
       space: the browser still spans the full column and the phone sits in
       front of its left side. */
    .svc-iphone {
        position: relative;
        flex: 0 0 auto;
        width: min(34%, 138px);
        margin-right: calc(-1 * min(34%, 138px));
        left: 4px;
        z-index: 2;
    }

    /* The phone covers the left end of the chrome bar, so its contents start
       clear of it and the domain reads in full. Same width basis as the phone,
       so the two stay in step. Scoped through .svc-browser because the base
       rules for these live further down the file and would otherwise win. */
    .svc-browser .svc-browser-bar {
        padding-left: calc(min(34%, 138px) + 6px);
        padding-right: 10px;
        gap: 4px;
    }

    .svc-browser .svc-url {
        margin-left: 3px;
        padding: 3px 8px;
        font-size: 0.47rem;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
    }

    .svc-browser .svc-browser-secure svg {
        width: 13px;
        height: 13px;
    }
}

.svc-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.svc-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.svc-dot--accent { background: var(--svc-bright); box-shadow: 0 0 8px var(--svc-bright); }

.svc-url {
    margin-left: 8px;
    flex: 1;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.72rem;
    color: var(--text-muted);
}

.svc-browser-secure {
    opacity: 0.5;
    margin-left: 4px;
}

.svc-browser-secure svg {
    display: block;
    width: 13px;
    height: 13px;
}

.svc-browser-body {
    padding: 0;
    line-height: 0;
    overflow: hidden;
    /* cqw units below scale the whole mock site with the frame */
    container-type: inline-size;
    position: relative;
    aspect-ratio: 2 / 1;
}

.svc-browser-body > img {
    width: 100% !important;
    margin: 0 !important;
}

/* ---- Mock desktop site: photo plate + HTML UI ----
   Source art is 1672x941 with the old cyan UI painted in, so the plate samples
   only the clean house band (x 850-1672, y 350-761) and the interface is real
   markup on top. That is what lets the accent below be themed. */
.svc-site-shot {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url('../assets/premium-contractor-hero.png');
    background-repeat: no-repeat;
    background-size: 203.4% auto;
    background-position: 100% 66%;
}

/* Legibility scrim, darkest at the left where the headline sits */
.svc-site-shot::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 7, 10, 0.94) 0%, rgba(4, 7, 10, 0.78) 34%, rgba(4, 7, 10, 0.28) 62%, rgba(4, 7, 10, 0.12) 100%),
        linear-gradient(180deg, rgba(4, 7, 10, 0.82) 0%, rgba(4, 7, 10, 0.1) 22%, rgba(4, 7, 10, 0.1) 70%, rgba(4, 7, 10, 0.55) 100%);
}

.svc-site-ui {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    line-height: 1.4;
    font-family: 'Outfit', sans-serif;
}

.svc-site-nav {
    display: flex;
    align-items: center;
    gap: 2.6cqw;
    padding: 2.5cqw 3.4cqw;
}

.svc-site-brand {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2cqw;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.05;
    white-space: nowrap;
}

.svc-site-brand em {
    font-style: normal;
    font-size: 0.42em;
    letter-spacing: 0.34em;
    color: var(--mock-accent-soft, rgba(255, 255, 255, 0.7));
}

.svc-site-links {
    display: flex;
    align-items: center;
    gap: 2.1cqw;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02cqw;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.svc-site-links b {
    position: relative;
    font-weight: 600;
    color: var(--mock-accent-soft, #fff);
}

.svc-site-links b::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.7cqw;
    height: 0.16cqw;
    background: var(--mock-accent, currentColor);
}

.svc-site-quote {
    flex-shrink: 0;
    padding: 0.95cqw 1.7cqw;
    border: 0.09cqw solid var(--mock-accent, rgba(255, 255, 255, 0.5));
    border-radius: 0.4cqw;
    color: var(--mock-accent-soft, #fff);
    font-size: 0.98cqw;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.svc-site-hero {
    margin-top: auto;
    padding: 0 3.4cqw 3.6cqw;
    max-width: 62%;
}

.svc-site-title {
    margin: 0 0 1.5cqw;
    color: #fff;
    font-family: 'Cormorant Garamond', serif;
    font-size: 4.3cqw;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.svc-site-title em {
    font-style: normal;
    color: var(--mock-accent-soft, var(--svc-bright));
}

.svc-site-sub {
    margin: 0 0 2.2cqw;
    max-width: 34cqw;
    color: rgba(255, 255, 255, 0.74);
    font-size: 1.42cqw;
    line-height: 1.5;
}

.svc-site-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.8cqw;
    padding: 1.35cqw 2.3cqw;
    border-radius: 0.45cqw;
    background: var(--mock-accent, var(--svc));
    color: var(--mock-ink, #04141a);
    font-size: 1.24cqw;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.svc-site-cta::after {
    content: '\2192';
    font-size: 1.1em;
    line-height: 1;
}

.svc-site-trust {
    display: flex;
    align-items: center;
    gap: 1.2cqw;
    margin-top: 2.4cqw;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.14cqw;
    font-weight: 500;
}

.svc-site-stars {
    color: #f5b544;
    font-size: 1.1cqw;
    letter-spacing: 0.08em;
}

.svc-site-trust i {
    width: 1px;
    height: 1.6cqw;
    background: rgba(255, 255, 255, 0.26);
}

.svc-web-hero {
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(var(--svc-rgb), 0.22), rgba(var(--svc-rgb), 0.04));
    border: 1px solid rgba(var(--svc-rgb), 0.2);
}

.svc-web-hero-eyebrow {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--svc-bright);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    background: rgba(var(--svc-rgb), 0.12);
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
}

.svc-web-hero strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 1.35rem;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin-bottom: 6px;
}

.svc-web-hero-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin: 0 0 12px;
    line-height: 1.4;
}

.svc-web-btn {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--svc);
    color: #051014;
    font-size: 0.72rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.svc-web-trust {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.svc-web-trust span {
    font-size: 0.62rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 3px 8px;
    border-radius: 6px;
}

.svc-web-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.svc-web-cards span {
    padding: 10px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.svc-web-cards span em {
    font-style: normal;
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.2;
}

.svc-web-cards span b {
    font-family: 'Archivo', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--svc-bright);
}

/* Floating metric chip */
.svc-web-metric-chip {
    position: absolute;
    bottom: 28px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(10, 16, 22, 0.95);
    border: 1px solid rgba(var(--svc-rgb), 0.3);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--svc-rgb), 0.12);
    backdrop-filter: blur(10px);
    z-index: 4;
    animation: svc-float 5.5s ease-in-out infinite;
}

.svc-web-metric-icon {
    font-size: 1.2rem;
    line-height: 1;
}

.svc-web-metric-chip strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: -0.03em;
    color: var(--svc-bright);
    line-height: 1;
}

.svc-web-metric-chip span {
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Mobile-first pill */
.svc-web-mobile-pill {
    position: absolute;
    top: 32px;
    right: 18px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(10, 16, 22, 0.92);
    border: 1px solid rgba(var(--svc-rgb), 0.25);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    backdrop-filter: blur(8px);
    z-index: 4;
    animation: svc-float 7s ease-in-out infinite reverse;
}

.svc-web-mobile-pill svg { color: var(--svc-bright); flex-shrink: 0; }

.svc-web-speed {
    margin-left: 4px;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 0.78rem;
    color: #00e58b;
}

.svc-phone {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 132px;
    padding: 12px;
    border-radius: 24px;
    border: 1px solid rgba(var(--svc-rgb), 0.34);
    background: linear-gradient(180deg, rgba(10, 15, 20, 0.98), rgba(16, 22, 28, 0.96));
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
    z-index: 2;
    animation: svc-float 6.5s ease-in-out infinite reverse;
}

.svc-phone-notch {
    width: 34%;
    height: 5px;
    margin: 2px auto 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.svc-phone-screen {
    border-radius: 16px;
    padding: 14px;
    min-height: 150px;
    background: linear-gradient(180deg, rgba(var(--svc-rgb), 0.16), rgba(255, 255, 255, 0.02));
}

.svc-phone-screen strong {
    display: block;
    font-size: 0.92rem;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.svc-phone-screen span {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 9px;
}

.svc-phone-screen span:last-child { width: 60%; }

/* Social — reel + grid */
.svc-card--social {
    display: block;
    padding: 0;
    overflow: hidden;
    max-width: 620px;
    margin: 0 auto 0 0;
}

.svc-social-reel {
    position: relative;
    border-radius: 22px;
    padding: 18px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(160deg, rgba(var(--svc-rgb), 0.28), rgba(var(--svc-rgb), 0.05));
    border: 1px solid rgba(var(--svc-rgb), 0.24);
}

.svc-social-reel strong {
    font-family: 'Archivo', sans-serif;
    font-size: 1.5rem;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.svc-reel-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 11px;
    border-radius: 8px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.4);
    color: var(--svc-bright);
}

.svc-social-reel .svc-phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

.svc-social-side { display: flex; flex-direction: column; gap: 16px; }

.svc-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.svc-social-grid span {
    aspect-ratio: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.svc-social-grid span:nth-child(1) { background: linear-gradient(135deg, rgba(var(--svc-rgb), 0.3), transparent); }
.svc-social-grid span:nth-child(4) { background: linear-gradient(135deg, rgba(var(--svc-rgb), 0.18), transparent); }

.svc-social-metric {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(var(--svc-rgb), 0.2);
}

.svc-social-metric em {
    display: block;
    font-style: normal;
    font-family: 'Archivo', sans-serif;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--svc-bright);
    margin-bottom: 6px;
}

.svc-social-metric span { font-size: 0.82rem; color: var(--text-secondary); }

/* ============================================
   SECTION HEADERS (Process / Why)
   ============================================ */

.svc-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem;
}

.svc-eyebrow {
    display: inline-block;
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.svc-eyebrow--center { display: inline-block; }

.svc-section-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.04;
    letter-spacing: -0.045em;
}

.svc-section-title--blue {
    color: var(--accent-primary);
}

/* Why Adzio heading — a touch bigger */
.svc-why .svc-section-title {
    font-size: clamp(2.8rem, 5vw, 4.8rem);
}

.svc-section-sub {
    margin-top: 0.9rem;
    color: var(--text-secondary);
    font-size: 1.02rem;
}

/* ============================================
   PROCESS
   ============================================ */

.svc-process { padding: 4.5rem 0; }

.svc-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    counter-reset: step;
}

.svc-step {
    position: relative;
    padding: 28px 24px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.svc-step:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.4);
}

/* connector line */
.svc-step::after {
    content: '';
    position: absolute;
    top: 48px;
    right: -18px;
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent);
}

.svc-step:last-child::after { display: none; }

.svc-step-num {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.svc-step h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.55rem;
}

.svc-step p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* ============================================
   WHY ADZIO
   ============================================ */

.svc-why { padding: 7rem 0 8rem; }

/* Stretch the shell wider for this section */
.svc-why .svc-shell {
    max-width: 1560px;
    padding: 0 clamp(28px, 4vw, 72px);
}

.svc-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

.svc-why-card {
    --why: #e5e7eb;
    position: relative;
    padding: 64px 64px 64px 72px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Distinct accent per card, consistent with the site palette */
.svc-why-card:nth-child(1) { --why: #ffffff; }
.svc-why-card:nth-child(2) { --why: #e5e7eb; }
.svc-why-card:nth-child(3) { --why: #d1d5db; }
.svc-why-card:nth-child(4) { --why: #9ca3af; }

.svc-why-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--why), transparent);
}

/* Re-arm transition after the scroll reveal nulls it inline */
.svc-why-card.visible {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.45s ease,
        background 0.45s ease !important;
}

.svc-why-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
}

.svc-why-card h3 {
    transition: color 0.3s ease;
}

.svc-why-card:hover h3 {
    color: #ffffff;
}

.svc-why-card h3 {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.035em;
    margin-bottom: 1rem;
}

.svc-why-card p {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* ============================================
   FINAL CTA PANEL (wraps existing quiz)
   ============================================ */

.services-cta-panel {
    padding: 1.25rem 0 4rem;
}

.services-cta-shell {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    text-align: center;
}

.services-cta-shell h2 {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 3.4vw, 2.9rem);
    line-height: 1.04;
    letter-spacing: -0.05em;
    margin: 0 auto 1rem;
    max-width: 20ch;
}

.svc-cta-intro {
    max-width: 54ch;
    margin: 0 auto 1.9rem;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.65;
}

/* The panel ran nearly the full viewport height on a laptop. Trimmed here
   only - .quiz-inline-card and its form styles are shared with the home page
   quiz, so these stay scoped to this panel. */
.services-cta-panel .quiz-inline-card {
    max-width: 920px;
    min-height: min(280px, 34vh);
    padding: clamp(1rem, 2.6vh, 1.9rem) clamp(1.5rem, 2.5vw, 2.6rem) clamp(1rem, 2.4vh, 1.75rem);
}

.services-cta-panel .quiz-progress-wrapper {
    margin-bottom: clamp(0.9rem, 3vh, 1.7rem);
}

.services-cta-panel .quiz-step-title {
    font-size: 1.72rem;
}

.services-cta-panel .quiz-step-subtitle {
    font-size: 1rem;
    margin-bottom: 1.7rem;
}

.services-cta-panel .form-group label {
    margin-bottom: 0.3rem;
}

/* Kept at a comfortable tap target - the rest of the trim comes from spacing */
.services-cta-panel .form-group input,
.services-cta-panel .form-group select,
.services-cta-panel .form-group textarea {
    padding: 0.85rem 0.9rem;
}

@media (min-width: 769px) {
    .services-cta-shell h2 {
        max-width: none;
        white-space: nowrap;
    }

    .services-cta-shell .quiz-step-title {
        white-space: nowrap;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1000px) {
    .svc-hero {
        padding-top: 1.5rem;
    }

    /* Desktop-only optical nudges. Once the grid stacks they shove the copy
       column past the right edge of the screen. */
    #ad-management .svc-detail-grid,
    #lead-generation .svc-detail-grid,
    #landing-pages .svc-detail-grid,
    #social-media-management .svc-copy {
        transform: none;
    }

    .svc-hero-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .svc-hero-inner {
        max-width: 820px;
    }

    .svc-hero-title {
        max-width: 13ch;
        font-size: clamp(3rem, 8vw, 4.8rem);
    }

    .svc-command-center {
        max-width: 760px;
    }

    .svc-detail-grid,
    /* The unscoped .svc-detail--reverse rule is more specific than a bare
       .svc-detail-grid here, so it has to be restated or those two sections
       stay in two squeezed columns on phones. */
    .svc-detail--reverse .svc-detail-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .svc-detail--reverse .svc-copy,
    .svc-detail--reverse .svc-visual {
        order: initial;
    }

    /* Centre the artwork once stacked so it doesn't hug one edge */
    .svc-ad-grid,
    .svc-card--google,
    .svc-card--web {
        max-width: min(100%, 560px);
        margin-inline: auto;
    }

    .svc-detail--reverse .svc-float-chip--a { right: 0; left: auto; top: -36px; bottom: auto; }

    .svc-detail-lead, .svc-detail-title { max-width: none; }

    .svc-steps { grid-template-columns: repeat(2, 1fr); }
    .svc-step::after { display: none; }

    .svc-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
    .svc-shell { padding: 0 20px; }

    body.services-page .m-nav {
        background-color: rgba(9, 13, 17, 0.42);
        border-bottom-color: transparent;
    }

    .services-page-main { padding-top: 60px; }

    .svc-hero {
        padding-top: clamp(22px, 6vw, 34px);
        text-align: left;
    }

    .svc-hero::before {
        background-size: auto, auto, 56px 56px, 56px 56px;
    }

    .svc-hero-layout {
        gap: 1.4rem;
    }

    .svc-hero .hero-eyebrow {
        font-size: clamp(1.5rem, 8vw, 2.2rem);
        letter-spacing: 0.2em;
        margin-bottom: 1rem;
    }

    .svc-hero-title {
        max-width: 100%;
        font-size: clamp(2.55rem, 11vw, 3.55rem);
        line-height: 1;
    }

    .svc-hero-lead {
        font-size: 1rem;
        line-height: 1.7;
    }

    .svc-hero-cta { flex-direction: column; align-items: stretch; }
    .svc-hero-cta .btn { width: 100%; }

    .svc-command-center {
        min-height: 0;
        padding: 0.9rem;
    }

    .svc-command-center::before,
    .svc-command-center::after {
        display: none;
    }

    .svc-command-head,
    .svc-command-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.45rem;
    }

    .svc-command-board {
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.72rem;
        margin: 0.9rem 0;
    }

    .svc-board-row em {
        position: static;
        display: inline-block;
        margin-top: 0.6rem;
    }

    .svc-trust {
        margin-top: 1rem;
    }

    .svc-stats { grid-template-columns: 1fr; }
    .svc-why-grid { grid-template-columns: 1fr; }
    .svc-steps { grid-template-columns: 1fr; }

    .svc-visual { padding: 0.5rem; }
    .svc-card--social { grid-template-columns: 1fr; }
    .svc-phone { width: 112px; }
    .svc-float-chip { display: none; }
}

/* Meta Ad Portfolio Grid Styling (V3) */
.svc-ad-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    width: 100%;
    max-width: clamp(410px, 31.5vw, 645px);
    margin: 0 auto;
}

.svc-ad-tile {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    cursor: pointer;
}

.svc-ad-tile .ad-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.88;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
}

/* Hover State */
.svc-ad-tile:hover,
.svc-ad-tile.hovered {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.18);
}

.svc-ad-tile:hover .ad-tile-img,
.svc-ad-tile.hovered .ad-tile-img {
    transform: scale(1.06);
    opacity: 0.95;
}

/* Glassmorphic Performance Badges */
.svc-ad-tile .ad-tile-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(10, 20, 28, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.svc-ad-tile .ad-tile-badge.badge--roas { border-left: 3px solid #e5e7eb; }
.svc-ad-tile .ad-tile-badge.badge--roi { border-left: 3px solid #d1d5db; }
.svc-ad-tile .ad-tile-badge.badge--cpl { border-left: 3px solid #ffffff; }
.svc-ad-tile .ad-tile-badge.badge--bookings { border-left: 3px solid #9ca3af; }

.svc-ad-tile .badge-lbl {
    font-size: 0.52rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
    line-height: 1;
}

.svc-ad-tile .badge-num {
    font-family: 'Archivo', sans-serif;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
}

.svc-ad-tile .badge--roas .badge-num { color: #e5e7eb; }
.svc-ad-tile .badge--roi .badge-num { color: #d1d5db; }
.svc-ad-tile .badge--cpl .badge-num { color: #ffffff; }
.svc-ad-tile .badge--bookings .badge-num { color: #9ca3af; }

/* Ad Details Overlay */
.svc-ad-tile .ad-tile-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(5, 11, 17, 0.98) 0%, rgba(5, 11, 17, 0.7) 65%, rgba(5, 11, 17, 0) 100%);
    padding: 16px 14px 14px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.svc-ad-tile .ad-tile-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.58rem;
    font-weight: 800;
    color: #00e58b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.svc-ad-tile:hover .ad-tile-tag,
.svc-ad-tile.hovered .ad-tile-tag {
    opacity: 1;
    transform: translateY(0);
}

.svc-ad-tile .tag-pulse {
    width: 5px;
    height: 5px;
    background: #00e58b;
    border-radius: 50%;
    box-shadow: 0 0 6px #00e58b;
    display: inline-block;
    animation: tagPulseGlow 1.5s infinite alternate;
}

@keyframes tagPulseGlow {
    from {
        transform: scale(0.9);
        opacity: 0.6;
        box-shadow: 0 0 4px rgba(0, 229, 139, 0.4);
    }
    to {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 10px rgba(0, 229, 139, 0.8);
    }
}

.svc-ad-tile .ad-tile-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.svc-ad-tile .ad-tile-offer {
    font-size: 0.62rem;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Scaling responsive behavior for smaller viewports. The 2x2 layout holds on
   phones, the tiles just get smaller: stacking them made the section four
   screens tall. */
@media (max-width: 576px) {
    .svc-ad-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: 100%;
        margin: 0 auto;
    }

    /* Badges and captions are sized for a ~300px tile, so they scale down with
       it rather than crowding the artwork. */
    .svc-ad-tile .ad-tile-title {
        font-size: 0.72rem;
    }

    .svc-ad-tile .ad-tile-offer {
        font-size: 0.56rem;
    }

    .svc-ad-tile .ad-tile-badge {
        padding: 5px 8px;
        transform: none;
    }

    .svc-ad-tile .badge-lbl {
        font-size: 0.44rem;
    }

    .svc-ad-tile .badge-num {
        font-size: 0.78rem;
    }
}

/* ============================================
   SOCIAL MEDIA — Instagram Profile Grid (V2)
   ============================================ */

.svc-card--social {
    display: block;
    padding: 0;
    overflow: hidden;
    max-width: 620px;
    margin: 0 auto 0 0;
}

/* LEFT COLUMN: image grid + engage chip */
.svc-ig-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

/* RIGHT COLUMN: profile + stats + metric */
.svc-ig-right {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Profile header */
.svc-ig-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.svc-ig-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--svc-bright), var(--svc));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 0.78rem;
    color: #051014;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(var(--svc-rgb), 0.4), 0 0 14px rgba(var(--svc-rgb), 0.28);
}

.svc-ig-profile {
    flex: 1;
    min-width: 0;
}

.svc-ig-profile strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 0.84rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-ig-profile span {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.svc-ig-follow {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--svc-bright);
    background: rgba(var(--svc-rgb), 0.12);
    border: 1px solid rgba(var(--svc-rgb), 0.3);
    padding: 4px 9px;
    border-radius: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Stats strip */
.svc-ig-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.svc-ig-stat {
    text-align: center;
    padding: 9px 6px;
    background: rgba(10, 16, 22, 0.7);
}

.svc-ig-stat strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.svc-ig-stat span {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Posting cadence metric (right column) */
.svc-ig-metric {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--svc-rgb), 0.14), rgba(var(--svc-rgb), 0.03));
    border: 1px solid rgba(var(--svc-rgb), 0.22);
}

.svc-ig-metric em {
    display: block;
    font-style: normal;
    font-family: 'Archivo', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--svc-bright);
    line-height: 1;
    margin-bottom: 5px;
}

.svc-ig-metric span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Avg likes metric */
.svc-ig-avg {
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.svc-ig-avg strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 2px;
}

.svc-ig-avg span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Image grid — 3 cols × 2 rows, fixed height so it doesn't overflow */
.svc-ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
    height: 220px;
}

.svc-ig-post {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    height: 100%;
}

.svc-ig-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    opacity: 0.88;
}

.svc-ig-post:hover img {
    transform: scale(1.08);
    opacity: 1;
}

.svc-ig-reel-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.svc-ig-likes {
    position: absolute;
    bottom: 5px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* Profile header */
.svc-ig-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.svc-ig-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--svc-bright), var(--svc));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 0.78rem;
    color: #051014;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(var(--svc-rgb), 0.4), 0 0 14px rgba(var(--svc-rgb), 0.28);
}

.svc-ig-profile {
    flex: 1;
    min-width: 0;
}

.svc-ig-profile strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 0.84rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-ig-profile span {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.svc-ig-follow {
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--svc-bright);
    background: rgba(var(--svc-rgb), 0.12);
    border: 1px solid rgba(var(--svc-rgb), 0.3);
    padding: 4px 9px;
    border-radius: 7px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Stats strip */
.svc-ig-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
}

.svc-ig-stat {
    text-align: center;
    padding: 9px 6px;
    background: rgba(10, 16, 22, 0.7);
}

.svc-ig-stat strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.svc-ig-stat span {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Posting cadence metric (right column) */
.svc-ig-metric {
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--svc-rgb), 0.14), rgba(var(--svc-rgb), 0.03));
    border: 1px solid rgba(var(--svc-rgb), 0.22);
}

.svc-ig-metric em {
    display: block;
    font-style: normal;
    font-family: 'Archivo', sans-serif;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--svc-bright);
    line-height: 1;
    margin-bottom: 5px;
}

.svc-ig-metric span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Avg likes metric */
.svc-ig-avg {
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.svc-ig-avg strong {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 2px;
}

.svc-ig-avg span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* Image grid — 3 cols × 2 rows, fixed height so it doesn't overflow */
.svc-ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4px;
    border-radius: 10px;
    overflow: hidden;
    height: 220px;
}

.svc-ig-post {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    height: 100%;
}

.svc-ig-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    opacity: 0.88;
}

.svc-ig-post:hover img {
    transform: scale(1.08);
    opacity: 1;
}

.svc-ig-reel-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

.svc-ig-likes {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 0.52rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    opacity: 0;
    transform: translateY(3px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 2;
}

.svc-ig-post:hover .svc-ig-likes {
    opacity: 1;
    transform: translateY(0);
}

/* Engagement chip — under the image grid */
.svc-ig-engage {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 99px;
    background: rgba(var(--svc-rgb), 0.07);
    border: 1px solid rgba(var(--svc-rgb), 0.18);
    font-size: 0.65rem;
    color: var(--text-secondary);
}

.svc-ig-engage-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--svc-bright);
    box-shadow: 0 0 7px var(--svc-bright);
    animation: svc-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}


/* ============================================
   MOBILE PASS 2 - typography
   Scoped to (max-width: 768px). Desktop base rules untouched.
   ============================================ */
@media (max-width: 768px) {

    /* On phones, place each service visual directly after its index and title.
       `display: contents` promotes the copy children into the stacked layout,
       allowing the visual to sit between the heading and supporting details. */
    .svc-detail-grid,
    .svc-detail--reverse .svc-detail-grid {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        text-align: left;
    }

    .svc-copy {
        display: contents;
    }

    /* A display-contents wrapper has no box for the scroll observer to measure. */
    .svc-copy.animate-on-scroll {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    .svc-index,
    .svc-detail-title,
    .svc-detail-lead,
    .svc-list,
    .svc-cta {
        align-self: flex-start;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }

    .svc-index { order: 1; }
    .svc-detail-title { order: 2; }
    .svc-visual,
    .svc-detail--reverse .svc-visual {
        align-self: flex-start;
        order: 3;
        width: 100%;
        margin: 0 0 2rem;
        padding: 0;
        transform: none !important;
    }
    .svc-detail-lead { order: 4; }
    .svc-list { order: 5; }
    .svc-cta { order: 6; align-self: flex-start; }

    .svc-ad-grid,
    .svc-card--google,
    .svc-card--web {
        margin-left: 0;
        margin-right: auto;
    }

    /* Founders Instagram Cards on mobile */
    .svc-proof-header {
        justify-content: flex-start;
        margin-left: 14px;
        margin-right: 0;
        margin-bottom: 0.75rem;
        transform: translateY(-4px);
        width: 100%;
    }

    .svc-proof-stack .abt-proof-card--cyan {
        top: 0;
    }

    .svc-proof-stack .abt-proof-feed {
        transform: translate(-5px, -8px);
        margin-bottom: 10px;
    }

    .svc-detail-lead {
        font-size: 16px;
    }

    .svc-copy {
        min-width: 0;
    }

    .svc-list {
        min-width: 0;
    }

    .svc-list li {
        font-size: clamp(0.78rem, 2.9vw, 0.92rem);
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        padding-left: 2.65rem;
        min-width: 0;
    }

    .svc-list li::before {
        top: 0;
        min-width: 2rem;
    }
}

@media (min-width: 769px) {
    .svc-hero .ed-hero-cta .btn {
        position: relative;
        white-space: nowrap;
        transition-property: padding-right, transform, color, box-shadow;
    }

    .svc-hero .ed-hero-cta .btn:hover,
    .svc-hero .ed-hero-cta .btn:focus-visible {
        padding-right: calc(clamp(20px, 1.9vw, 32px) + 34px);
        transform: none;
    }

    .svc-hero .ed-hero-cta .btn:hover > span,
    .svc-hero .ed-hero-cta .btn:focus-visible > span {
        transform: translateX(-17px);
    }

    .svc-hero .ed-hero-cta .btn svg {
        position: absolute;
        right: clamp(20px, 1.9vw, 32px);
    }

    .svc-hero .ed-hero-cta .btn-primary:hover,
    .svc-hero .ed-hero-cta .btn-primary:focus-visible {
        --btn-bg: var(--accent-gradient);
        --btn-ring: none;
        color: var(--bg-primary);
    }

    .svc-hero .ed-hero-cta .btn-ghost:hover,
    .svc-hero .ed-hero-cta .btn-ghost:focus-visible {
        --btn-bg: transparent;
        --btn-ring: inset 0 0 0 1px rgba(244, 241, 234, 0.22);
        color: var(--text-primary);
    }
}
   this type meaningfully larger was to give the hero more canvas. The shell is
   widened for THIS SECTION ONLY, so every .svc-detail below keeps the 1440px
   measure. Vertical paddings are trimmed by roughly what the taller headline
   adds, so the section's height stays put and nothing below it moves.
   ============================================ */
/* Extra canvas only where 1440px was actually the binding constraint. Below
   ~1600 the shell is already narrower than 1440, so widening there would have
   made the hero SMALLER, not bigger. */
@media (min-width: 1600px) {
    .svc-hero .svc-shell {
        max-width: min(1680px, 94vw);
    }
}

/* The headline is white-space: nowrap above 1400px, so its size is bounded by
   the title column. 5.1vw is the largest coefficient that still clears the
   aside at every width in this band (1526 is the tightest, where the aside and
   gap clamps peak before the shell widens). Below 1400px the existing laptop
   rule keeps its tuned size and is allowed to wrap, so it is left alone. */
@media (min-width: 1400px) {
    .svc-hero .ed-hero-title {
        font-size: clamp(3.6rem, 5.35vw, 6.95rem);
    }
}

@media (max-width: 768px) {
    .svc-hero .ed-hero-cta {
        --svc-hero-cta-reveal: 34px;
        width: min(100%, 350px);
        margin-left: auto;
        align-items: flex-start;
    }

    .svc-hero .ed-hero-cta .btn {
        inline-size: calc(100% - var(--svc-hero-cta-reveal));
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        position: relative;
        transition-property: inline-size, transform, color, box-shadow;
    }

    .svc-hero .ed-hero-cta .btn:hover,
    .svc-hero .ed-hero-cta .btn:focus-visible {
        inline-size: 100%;
        transform: none;
    }

    .svc-hero .ed-hero-cta .btn:hover > span,
    .svc-hero .ed-hero-cta .btn:focus-visible > span {
        transform: translateX(-17px);
    }

    .svc-hero .ed-hero-cta .btn svg {
        position: absolute;
        right: clamp(18px, 5vw, 24px);
    }

    .svc-hero .ed-hero-cta .btn-primary:hover,
    .svc-hero .ed-hero-cta .btn-primary:focus-visible {
        --btn-bg: var(--accent-gradient);
        --btn-ring: none;
        color: var(--bg-primary);
    }

    .svc-hero .ed-hero-cta .btn-ghost:hover,
    .svc-hero .ed-hero-cta .btn-ghost:focus-visible {
        --btn-bg: transparent;
        --btn-ring: inset 0 0 0 1px rgba(244, 241, 234, 0.22);
        color: var(--text-primary);
    }
}

@media (min-width: 1001px) {

    /* Reclaim the vertical space the larger headline consumes. The taller type
       adds ~60px; these trims give back about the same, so the section lands on
       its original height and nothing below it shifts. */
    .svc-hero .ed-hero {
        padding-top: clamp(48px, 7.5vh, 96px);
        padding-bottom: clamp(36px, 5vh, 64px);
    }

    .svc-hero .ed-hero-body {
        grid-template-columns: minmax(0, 1fr);
        padding: clamp(28px, 4vh, 48px) 0 clamp(20px, 3vh, 36px);
    }

    .svc-hero .ed-hero-copy {
        max-width: min(1120px, calc(100% - clamp(300px, 25vw, 430px)));
    }

    .svc-hero .ed-masthead {
        padding-bottom: clamp(16px, 2vh, 28px);
    }

    .svc-hero .ed-masthead-brand {
        position: relative;
        display: inline-block;
        font-family: 'Cormorant Garamond', 'Bodoni Moda', serif;
        font-size: clamp(3.1rem, 4.2vw, 5.35rem);
        font-weight: 700;
        line-height: 0.92;
        letter-spacing: -0.03em;
        color: #F8F4EC;
        text-shadow: 0 10px 30px rgba(0, 184, 212, 0.12);
    }

    .svc-hero .ed-masthead-brand::after {
        content: '';
        position: absolute;
        left: 0.08em;
        right: -0.12em;
        bottom: -0.16em;
        height: clamp(9px, 0.75vw, 14px);
        background:
            radial-gradient(ellipse at 15% 50%, rgba(248, 244, 236, 0.85) 0 2px, transparent 3px),
            linear-gradient(90deg, rgba(0, 184, 212, 0), rgba(0, 184, 212, 0.95) 18%, rgba(248, 244, 236, 0.72) 48%, rgba(0, 184, 212, 0.8) 78%, rgba(0, 184, 212, 0));
        background-size: 100% 100%, 220% 100%;
        clip-path: polygon(0 58%, 12% 34%, 28% 48%, 45% 28%, 63% 46%, 81% 32%, 100% 55%, 100% 74%, 80% 50%, 63% 64%, 45% 44%, 28% 66%, 12% 50%, 0 76%);
        opacity: 0.9;
        filter: drop-shadow(0 8px 14px rgba(0, 184, 212, 0.2));
        animation: adzioUnderlineWave 3.2s ease-in-out infinite;
        pointer-events: none;
    }

    .svc-hero .ed-hero-lead {
        font-size: clamp(1.05rem, 1.25vw, 1.35rem);
    }

    .svc-hero .ed-hero-aside {
        position: absolute;
        right: clamp(72px, 7vw, 132px);
        bottom: clamp(42px, 6.5vh, 82px);
        width: clamp(280px, 18vw, 340px);
        padding-left: clamp(20px, 2vw, 34px);
        margin-bottom: 0;
        z-index: 2;
    }

    .svc-hero .ed-hero-aside::before {
        top: -18px;
        bottom: -18px;
    }

    .svc-hero .ed-hero-cta {
        width: 100%;
        margin-left: 0;
        transform: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px !important;
    }

    /* The aside is centre-aligned against the headline row, so growing these
       does not add to the section's height. */
    .svc-hero .ed-hero-cta .btn {
        min-width: clamp(260px, 17vw, 320px);
        min-height: clamp(52px, 6.6vh, 62px);
        font-size: clamp(0.82rem, 0.95vw, 0.95rem);
        padding-inline: clamp(20px, 1.9vw, 32px);
        white-space: nowrap;
    }
}