/* ==========================================================================
   Service pages — Bisan (Ultra-Luxury Refined Architecture)
   Perfect Visual Balance:
   - Emerald Green (#A6D49E) for Key Growth Metrics, Numbers & ROI Signals
   - Subtle Touches of Signature Orange (#F26430 / #F5825A) for Architectural
     Accent Lines, Badges, Hover Micro-Glows & Primary Conversion Buttons
   - Distinct Horizontal Executive Case Study Decks with Industry Titles
   - Standardized Legible Typography with Unified Dark Canvas (#2F2B29)
   ========================================================================== */

:root {
    /* Exact match to homepage background & tokens */
    --color-dark:        #2F2B29;
    --s-bg:              #2F2B29;
    --s-bg-card:         rgba(42, 38, 36, 0.78);
    --s-bg-elevated:     rgba(255, 255, 255, 0.035);
    --s-hover:           rgba(255, 255, 255, 0.045);
    --s-line:            rgba(249, 251, 255, 0.09);
    --s-line-str:        rgba(249, 251, 255, 0.16);
    --s-line-green:      rgba(166, 212, 158, 0.3);
    --s-line-orange:     rgba(242, 100, 48, 0.3);

    /* Standardized Legible Typography */
    --s-ink:             #F9FBFF;
    --s-body:            #D6D2CE;
    --s-dim:             #A39F9C;

    /* Primary Growth Accent: Soothing Emerald Green */
    --color-green:       #A6D49E;
    --s-green:           #A6D49E;
    --s-green-dim:       rgba(166, 212, 158, 0.12);
    --s-green-border:    rgba(166, 212, 158, 0.35);
    --s-green-glow:      rgba(166, 212, 158, 0.22);

    /* Signature Warm Accent: Refined Orange */
    --color-orange:      #F26430;
    --s-orange:          #F26430;
    --s-orange-text:     #F5825A;
    --s-orange-dim:      rgba(242, 100, 48, 0.1);
    --s-orange-border:   rgba(242, 100, 48, 0.28);
    --s-orange-glow:     rgba(242, 100, 48, 0.25);

    /* Grid Rhythm */
    --s-max: 1240px;
    --s-gut: 2rem;
    --s-pad: 1.75rem;

    --s-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Global Layout & Unified Background Surface
   -------------------------------------------------------------------------- */

html, body {
    background-color: var(--color-dark);
}

body.service-single-page {
    background-color: var(--color-dark);
    background-image: radial-gradient(circle at 50% 35%, rgba(166, 212, 158, 0.03) 0%, rgba(47, 43, 41, 1) 75%);
    color: var(--s-body);
    font-family: var(--font-primary);
    overflow-x: clip !important;
}

html:has(body.service-single-page) {
    overflow-x: clip !important;
}

.svc {
    background-color: transparent;
    color: var(--s-body);
    font-family: var(--font-primary);
    position: relative;
    overflow-x: clip;
}

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

.svc-tab.active {
    color: var(--s-orange-text);
    border-bottom-color: var(--s-orange);
}

/* --------------------------------------------------------------------------
   The 12-Column Grid Framework
   -------------------------------------------------------------------------- */

.svc-wrap {
    max-width: var(--s-max);
    margin: 0 auto;
    padding: 0 var(--s-pad);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-gut);
    align-content: start;
}

.svc-sec {
    padding: 4.5rem 0;
    position: relative;
}

.svc-sec--rule > .svc-wrap::before {
    content: "";
    grid-column: 1 / -1;
    height: 1px;
    background: var(--s-line);
    margin-top: -4.5rem;
    margin-bottom: 4.5rem;
}

/* --------------------------------------------------------------------------
   Standardized Architectural Section Headers (Subtle Orange Accent Line)
   -------------------------------------------------------------------------- */

.svc-centered-header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 3.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.svc-header-headline {
    display: flex;
    flex-direction: column;
    border-left: 3px solid var(--s-orange);
    padding-left: 1.5rem;
}

.svc-h2 {
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.18;
    letter-spacing: 0.035em;
    font-weight: 800;
    color: var(--s-ink);
    text-transform: uppercase;
    margin: 0;
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s ease;
}

.reveal .svc-centered-header .svc-h2 {
    transform: translateY(18px);
    opacity: 0;
}

.reveal .svc-centered-header.is-in .svc-h2 {
    transform: translateY(0);
    opacity: 1;
}

.svc-header-box {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 1.85rem 2.25rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.svc-lead {
    font-size: 1.12rem;
    line-height: 1.65;
    color: var(--s-ink);
    font-weight: 600;
    margin: 0 0 0.85rem;
}

.svc-p {
    font-size: 0.98rem;
    line-height: 1.82;
    color: var(--s-body);
    margin: 0;
}

.svc-blk {
    grid-column: 1 / -1;
    margin-top: 2.75rem;
}

.svc-blk + .svc-blk {
    margin-top: 2.25rem;
}

/* --------------------------------------------------------------------------
   1. HERO SECTION
   -------------------------------------------------------------------------- */

.svc-hero {
    position: relative;
    padding: clamp(8.5rem, 6rem + 5vw, 11rem) 0 4.5rem;
    overflow: hidden;
}

.svc-hero-t {
    grid-column: 1 / 7;
    align-self: center;
}

.svc-hero-f {
    grid-column: 8 / 13;
    align-self: center;
}

.svc-title {
    font-size: clamp(2.8rem, 5.2vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--s-ink);
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}

.svc-title em {
    font-style: normal;
    color: var(--s-orange);
}

.svc-sub {
    font-size: 1.08rem;
    line-height: 1.78;
    color: var(--s-body);
    margin: 0 0 2.25rem;
    max-width: 540px;
}

.svc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.svc-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.94rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 100px;
    padding: 0.9rem 1.85rem;
    white-space: nowrap;
    transition: var(--s-ease) 0.3s;
}

.svc-btn svg {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform 0.25s ease;
}

.svc-btn:hover svg {
    transform: translateX(4px);
}

.svc-btn--primary {
    background: var(--s-orange);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(242, 100, 48, 0.3);
}

.svc-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(242, 100, 48, 0.45);
}

.svc-btn--ghost {
    background: rgba(255, 255, 255, 0.03);
    color: var(--s-ink);
    border: 1px solid var(--s-line-str);
}

.svc-btn--ghost:hover {
    background: var(--s-hover);
    border-color: var(--s-ink);
    transform: translateY(-2px);
}

/* SERP Simulator Box */
.svc-serp {
    border: 1px solid var(--s-line-str);
    border-radius: 20px;
    padding: 1.75rem;
    background: rgba(40, 36, 34, 0.7);
    backdrop-filter: blur(14px);
    box-shadow: 0 25px 50px -10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(166, 212, 158, 0.05);
}

.svc-serp-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--s-line);
    border-radius: 100px;
    padding: 0.75rem 1.15rem;
    margin-bottom: 1.15rem;
}

.svc-serp-bar svg {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--s-green);
}

.svc-serp-q {
    font-size: 0.92rem;
    color: var(--s-ink);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.svc-serp-q::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 3px;
    vertical-align: -0.15em;
    background: var(--s-green);
    animation: svc-blink 1.05s steps(2) infinite;
}

@keyframes svc-blink {
    50% { opacity: 0; }
}

.svc-serp-list {
    display: grid;
    gap: 0.5rem;
}

.svc-serp-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: background 0.45s ease, border-color 0.45s ease;
}

.svc-serp-row.is-you {
    background: rgba(166, 212, 158, 0.12);
    border-color: rgba(166, 212, 158, 0.45);
}

.svc-serp-pos {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--s-dim);
    background: rgba(249, 251, 255, 0.08);
}

.svc-serp-row.is-you .svc-serp-pos {
    background: var(--s-green);
    color: #1A0E08;
    box-shadow: 0 0 14px var(--s-green-glow);
}

.svc-serp-lines {
    flex: 1;
    display: grid;
    gap: 0.4rem;
}

.svc-serp-lines i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: rgba(249, 251, 255, 0.1);
}

.svc-serp-lines i:first-child {
    width: 58%;
    background: rgba(249, 251, 255, 0.24);
}

.svc-serp-lines i:last-child {
    width: 86%;
}

.svc-serp-row.is-you .svc-serp-lines i:first-child {
    background: var(--s-green);
    width: 68%;
}

.svc-serp-note {
    margin: 1.15rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--s-line);
    font-size: 0.82rem;
    color: var(--s-dim);
}

.svc-serp-note b {
    color: var(--s-green);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   2. SECTION 01: WHY DOES SEO MATTER?
   -------------------------------------------------------------------------- */

.svc-insight-banner {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    background: linear-gradient(145deg, rgba(242, 100, 48, 0.03) 0%, rgba(47, 43, 41, 0.7) 100%);
    border: 1px solid var(--s-line-str);
    border-radius: 20px;
    padding: 2.25rem 2.75rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.svc-insight-icon {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--s-orange-dim);
    border: 1px solid var(--s-orange-border);
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    color: var(--s-orange-text);
}

.svc-insight-content h3 {
    font-size: 1.25rem;
    line-height: 1.35;
    font-weight: 800;
    color: var(--s-ink);
    margin-bottom: 0.65rem;
}

.svc-insight-content p {
    font-size: 0.98rem;
    line-height: 1.8;
    color: var(--s-body);
    margin: 0;
}

.svc-insight-tag {
    flex: none;
}

.svc-insight-tag span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--s-green);
    background: var(--s-green-dim);
    border: 1px solid var(--s-green-border);
    border-radius: 100px;
    padding: 0.5rem 1rem;
}

/* --------------------------------------------------------------------------
   3. SECTION 02: OUR SEO SERVICES
   -------------------------------------------------------------------------- */

.svc-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.svc-service-card {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 2rem 1.85rem;
    transition: var(--s-ease) 0.35s;
    backdrop-filter: blur(10px);
}

.svc-service-card:hover {
    border-color: var(--s-line-orange);
    background: var(--s-hover);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px var(--s-orange-dim);
}

.svc-service-card--wide {
    grid-column: span 3;
}

.svc-service-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Sophisticated Frosted Glass Icon Box with Subtle Orange Hover Accent */
.svc-service-ic {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--s-line-str);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--s-ink);
    transition: all 0.35s ease;
}

.svc-service-card:hover .svc-service-ic {
    transform: scale(1.08);
    background: var(--s-orange-dim);
    border-color: var(--s-orange-border);
    color: var(--s-orange-text);
}

.svc-service-header h3 {
    font-size: 1.15rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--s-ink);
    margin: 0;
}

.svc-service-card p {
    font-size: 0.95rem;
    line-height: 1.76;
    color: var(--s-body);
    margin: 0;
}

/* Subtly Balanced Fancy CTA Card */
.svc-fancy-cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.75rem;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg, rgba(242, 100, 48, 0.04) 0%, rgba(47, 43, 41, 0.88) 100%);
    border: 1px solid var(--s-line-orange);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.svc-fancy-cta-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, var(--s-orange-glow) 0%, transparent 70%);
    pointer-events: none;
}

.svc-fancy-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-orange-text);
    background: var(--s-orange-dim);
    border: 1px solid var(--s-orange-border);
    border-radius: 100px;
    padding: 0.32rem 0.85rem;
    margin-bottom: 0.85rem;
}

.svc-fancy-cta-left h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--s-ink);
    margin-bottom: 0.5rem;
}

.svc-fancy-cta-left p {
    font-size: 0.98rem;
    line-height: 1.74;
    color: var(--s-body);
    margin: 0;
}

.svc-fancy-cta-right {
    flex: none;
}

.svc-fancy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.85rem;
    background: linear-gradient(135deg, #F26430 0%, #d45224 100%);
    color: #ffffff;
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 0.94rem;
    border-radius: 100px;
    box-shadow: 0 6px 20px rgba(242, 100, 48, 0.35);
    transition: var(--s-ease) 0.3s;
    white-space: nowrap;
    text-decoration: none;
}

.svc-fancy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(242, 100, 48, 0.55);
}

/* --------------------------------------------------------------------------
   4. SECTION 03: PROCESS (Clean Emerald Step Numbers with Subtle Warm Accent)
   -------------------------------------------------------------------------- */

.svc-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.svc-process-card {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 2rem 1.85rem;
    transition: var(--s-ease) 0.35s;
    position: relative;
}

.svc-process-card:hover {
    border-color: var(--s-line-orange);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.svc-process-card.is-on {
    border-color: rgba(242, 100, 48, 0.28);
}

.svc-process-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.svc-clean-step-num {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--s-green);
    background: var(--s-green-dim);
    border: 1px solid var(--s-green-border);
    border-radius: 8px;
    padding: 0.28rem 0.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.svc-process-tag {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-dim);
}

.svc-process-card h3 {
    font-size: 1.18rem;
    font-weight: 700;
    color: var(--s-ink);
    margin-bottom: 0.65rem;
}

.svc-process-card p {
    font-size: 0.94rem;
    line-height: 1.76;
    color: var(--s-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. SECTION 04: SEO & CONTENT STRATEGY
   -------------------------------------------------------------------------- */

.svc-synergy-matched-layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2rem;
    align-items: stretch;
}

.svc-synergy-grid-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.svc-synergy-card-item {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 1.65rem 1.55rem;
    transition: var(--s-ease) 0.3s;
}

.svc-synergy-card-item:hover {
    border-color: var(--s-line-orange);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.svc-synergy-card-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.svc-synergy-badge {
    flex: none;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--s-green);
    background: var(--s-green-dim);
    border: 1px solid var(--s-green-border);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
}

.svc-synergy-card-head h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s-ink);
    margin: 0;
}

.svc-synergy-card-item p {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--s-body);
    margin: 0;
}

.svc-synergy-diagram-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--s-line);
    border-radius: 20px;
    padding: 1.75rem;
}

.svc-cluster {
    display: grid;
    place-items: center;
    flex: 1;
}

.svc-cluster svg {
    width: 100%;
    max-width: 360px;
    height: auto;
}

.svc-cl-line {
    stroke: var(--s-line-str);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
}

.reveal .svc-cl-line {
    animation: svc-draw 1.1s ease forwards;
}

@keyframes svc-draw {
    to { stroke-dashoffset: 0; }
}

.svc-cl-pulse {
    fill: var(--s-orange);
    opacity: 0;
}

.reveal .svc-cl-pulse {
    animation: svc-travel 3.6s ease-in-out infinite;
}

@keyframes svc-travel {
    0%        { opacity: 0; offset-distance: 0%; }
    12%       { opacity: 0.9; }
    62%       { opacity: 0.9; offset-distance: 100%; }
    75%, 100% { opacity: 0; offset-distance: 100%; }
}

.svc-cl-hub {
    fill: var(--s-green);
    filter: drop-shadow(0 0 15px var(--s-green-glow));
}

.svc-cl-node {
    fill: var(--s-bg);
    stroke: var(--s-line-str);
    stroke-width: 1.5;
}

.svc-cl-ring {
    fill: none;
    stroke: rgba(249, 251, 255, 0.18);
    stroke-width: 1;
}

.reveal .svc-cl-ring {
    animation: svc-pulse 3.6s ease-out infinite;
}

@keyframes svc-pulse {
    0%   { r: 30; opacity: 0.7; }
    100% { r: 80; opacity: 0; }
}

.svc-cl-t {
    fill: var(--s-body);
    font-size: 10px;
    font-weight: 600;
    font-family: var(--font-primary);
    text-anchor: middle;
}

.svc-cl-ht {
    fill: #1A0E08;
    font-size: 11px;
    font-weight: 800;
}

.svc-synergy-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--s-green);
    padding: 0.75rem 1rem;
    background: var(--s-green-dim);
    border-radius: 10px;
    border: 1px solid var(--s-green-border);
}

/* --------------------------------------------------------------------------
   6. SECTION 05: LOCAL SEO IN DUBAI
   -------------------------------------------------------------------------- */

.svc-local-grid-clean {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2rem;
    align-items: stretch;
}

.svc-local-pillars-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.svc-local-clean-card {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 1.65rem 1.55rem;
    transition: var(--s-ease) 0.3s;
}

.svc-local-clean-card:hover {
    border-color: var(--s-line-orange);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.svc-local-clean-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.svc-clean-ic {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--s-line-str);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--s-ink);
    transition: all 0.3s ease;
}

.svc-local-clean-card:hover .svc-clean-ic {
    background: var(--s-orange-dim);
    border-color: var(--s-orange-border);
    color: var(--s-orange-text);
}

.svc-local-clean-head h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--s-ink);
    margin: 0;
}

.svc-local-clean-card p {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--s-body);
    margin: 0;
}

.svc-local-radar-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--s-line);
    border-radius: 20px;
    padding: 1.75rem;
}

.svc-radar {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 320px;
    overflow: hidden;
}

.svc-radar-ring {
    position: absolute;
    border: 1px solid var(--s-green-border);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    opacity: 0;
}

.reveal .svc-radar-ring {
    animation: svc-radar 4s ease-out infinite;
}

.reveal .svc-radar-ring:nth-child(2) { animation-delay: 1.33s; }
.reveal .svc-radar-ring:nth-child(3) { animation-delay: 2.66s; }

@keyframes svc-radar {
    0%   { transform: scale(0.4); opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
}

.svc-radar-pin {
    position: relative;
    z-index: 1;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--s-green);
    color: #1A0E08;
    box-shadow: 0 10px 30px var(--s-green-glow);
}

.svc-radar-chip {
    position: absolute;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--s-ink);
    background: rgba(47, 43, 41, 0.94);
    border: 1px solid var(--s-line-str);
    border-radius: 100px;
    padding: 0.45rem 0.95rem;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.svc-radar-chip--1 { top: 8%;     left: 8%;  }
.svc-radar-chip--2 { top: 24%;    right: 8%; }
.svc-radar-chip--3 { bottom: 22%; left: 8%;  }
.svc-radar-chip--4 { bottom: 8%;  right: 8%; }

.reveal .svc-radar-chip {
    animation: svc-float 5.5s ease-in-out infinite;
}

.reveal .svc-radar-chip--2 { animation-delay: 0.9s; }
.reveal .svc-radar-chip--3 { animation-delay: 1.8s; }
.reveal .svc-radar-chip--4 { animation-delay: 2.7s; }

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

.svc-radar-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--s-green);
    padding: 0.75rem 1rem;
    background: var(--s-green-dim);
    border-radius: 10px;
    border: 1px solid var(--s-green-border);
}

/* --------------------------------------------------------------------------
   7. SECTION 06: INDUSTRIES WE WORK WITH
   -------------------------------------------------------------------------- */

.svc-industry-clean-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.35rem;
}

.svc-industry-item {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 1.85rem 1.6rem;
    transition: var(--s-ease) 0.3s;
}

.svc-industry-item:hover {
    border-color: var(--s-line-orange);
    transform: translateY(-3px);
    background: var(--s-hover);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.svc-ind-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.svc-ind-ic-box {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--s-line-str);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--s-ink);
    transition: all 0.3s ease;
}

.svc-industry-item:hover .svc-ind-ic-box {
    background: var(--s-orange-dim);
    border-color: var(--s-orange-border);
    color: var(--s-orange-text);
}

.svc-ind-head h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--s-ink);
    margin: 0;
}

.svc-industry-item p {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--s-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   8. SECTION 07: WHY CHOOSE BISAN FOR SEO? (Green Numbers)
   -------------------------------------------------------------------------- */

.svc-diff-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.svc-clean-diff-card {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 2.1rem 1.85rem;
    transition: var(--s-ease) 0.35s;
}

.svc-clean-diff-card:hover {
    border-color: var(--s-line-orange);
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.svc-clean-diff-card .svc-clean-step-num {
    margin-bottom: 1.15rem;
}

.svc-clean-diff-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--s-ink);
    margin-bottom: 0.65rem;
}

.svc-clean-diff-card p {
    font-size: 0.94rem;
    line-height: 1.76;
    color: var(--s-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   9. SECTION 08: SEO RESULTS & MEASUREMENT
   -------------------------------------------------------------------------- */

.svc-metric-clean-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.svc-metric-clean-card {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 1.85rem 1.65rem;
    transition: var(--s-ease) 0.3s;
}

.svc-metric-clean-card:hover {
    border-color: var(--s-line-orange);
    transform: translateY(-3px);
}

.svc-metric-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.svc-metric-ic-box {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--s-line-str);
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: var(--s-ink);
    transition: all 0.3s ease;
}

.svc-metric-clean-card:hover .svc-metric-ic-box {
    background: var(--s-orange-dim);
    border-color: var(--s-orange-border);
    color: var(--s-orange-text);
}

.svc-metric-head h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--s-ink);
    margin: 0;
}

.svc-metric-clean-card p {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--s-body);
    margin: 0;
}

.svc-stmt {
    grid-column: 1 / -1;
    margin-top: 2rem;
    padding: 1.35rem 1.85rem;
    background: rgba(242, 100, 48, 0.06);
    border-left: 3px solid var(--s-orange);
    border-radius: 0 14px 14px 0;
}

.svc-stmt p {
    font-size: 1.12rem;
    line-height: 1.65;
    font-weight: 600;
    color: var(--s-ink);
    margin: 0;
}

/* --------------------------------------------------------------------------
   10. SECTION 09: DISTINCT EXECUTIVE CASE STUDY DECKS
   Brushed obsidian surface, subtle orange tag + massive green ROI metric
   -------------------------------------------------------------------------- */

.svc-deck-showcase-list {
    display: grid;
    gap: 2rem;
}



.svc-deck-card:hover {
    border-color: var(--s-green-border);
    transform: translateY(-4px);
    box-shadow: 0 30px 70px -10px rgba(0, 0, 0, 0.75), 0 0 30px rgba(166, 212, 158, 0.15);
}

/* Left Hero Section of Case Deck */


.svc-deck-tag-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.15rem;
}

/* Subtle Signature Orange Market Badge */
.svc-deck-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s-orange-text);
    background: var(--s-orange-dim);
    border: 1px solid var(--s-orange-border);
    border-radius: 100px;
    padding: 0.32rem 0.85rem;
}

.svc-deck-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--s-dim);
    font-weight: 600;
}

/* Short Bold Industry Title */
.svc-deck-title {
    font-size: clamp(1.85rem, 2.6vw, 2.35rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--s-ink);
    margin: 0 0 1.65rem;
}

/* Massive Hero KPI Block in Soothing Emerald Green */
.svc-deck-kpi-block {
    margin-bottom: 1.5rem;
}

.svc-deck-kpi-sub {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--s-dim);
    margin-bottom: 0.4rem;
}

.svc-deck-kpi-num {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: clamp(2.8rem, 4.4vw, 3.8rem);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--s-green);
    text-shadow: 0 0 25px var(--s-green-glow);
    margin-bottom: 0.75rem;
}

.svc-deck-kpi-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.svc-deck-kpi-progress {
    height: 100%;
    background: linear-gradient(90deg, #A6D49E 0%, #c4e9be 100%);
    border-radius: 3px;
    box-shadow: 0 0 12px var(--s-green-glow);
}

.svc-deck-verify-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--s-green);
}

/* Right Matrix Section of Case Deck */


.svc-deck-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.15rem;
}

.svc-deck-stat {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
}

.svc-deck-stat.is-green {
    background: var(--s-green-dim);
    border-color: var(--s-green-border);
}

.svc-deck-stat-val {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--s-ink);
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.svc-deck-stat.is-green .svc-deck-stat-val {
    color: var(--s-green);
}

.svc-deck-stat-lbl {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--s-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Dual Story Matrix */
.svc-deck-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.svc-deck-story-item {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--s-line);
    border-radius: 16px;
    padding: 1.35rem 1.6rem;
}

.svc-deck-story-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
}

.story-before .svc-deck-story-head i {
    color: #f87171;
    font-size: 1.15rem;
}

.story-after .svc-deck-story-head i {
    color: var(--s-green);
    font-size: 1.15rem;
}

.svc-deck-story-head h4 {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--s-ink);
    margin: 0;
}

.svc-deck-story-item p {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--s-body);
    margin: 0;
}

/* Portfolio Referral Box */
.svc-portfolio-referral-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.25rem 2.75rem;
    background: linear-gradient(135deg, rgba(242, 100, 48, 0.04) 0%, rgba(47, 43, 41, 0.85) 100%);
    border: 1px solid var(--s-line-orange);
    border-radius: 20px;
    margin-top: 0.5rem;
}

.svc-referral-left {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.svc-referral-icon {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--s-orange-dim);
    border: 1px solid var(--s-orange-border);
    display: grid;
    place-items: center;
    font-size: 1.65rem;
    color: var(--s-orange-text);
}

.svc-referral-left h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--s-ink);
    margin-bottom: 0.35rem;
}

.svc-referral-left p {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--s-body);
    margin: 0;
}

.svc-referral-right {
    flex: none;
}

/* --------------------------------------------------------------------------
   11. SECTION 10: FAQ ACCORDION (Dual Gradient Underline)
   -------------------------------------------------------------------------- */

.svc-faq-centered-head {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 2.5rem;
}

.svc-faq-centered-head .svc-h2 {
    border-left: 0;
    padding-left: 0;
    letter-spacing: 0.05em;
    font-size: clamp(2.1rem, 3.5vw, 2.9rem);
    position: relative;
    display: inline-block;
}

.svc-faq-centered-head .svc-h2::after {
    content: "";
    display: block;
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, #F26430 0%, #A6D49E 100%);
    margin: 0.85rem auto 0;
    border-radius: 2px;
}

.svc-modern-faq-list {
    display: grid;
    gap: 0.9rem;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.svc-faq-modern-card {
    background: var(--s-bg-card);
    border: 1px solid var(--s-line);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--s-ease) 0.3s;
    cursor: pointer;
}

.svc-faq-modern-card:hover {
    border-color: var(--s-line-orange);
    background: var(--s-hover);
}

.svc-faq-modern-card.active {
    border-color: var(--s-line-orange);
    background: rgba(45, 40, 38, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.svc-faq-modern-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.35rem 1.75rem;
    gap: 1.35rem;
}

.svc-faq-q-left {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.svc-clean-faq-idx {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--s-green);
    background: var(--s-green-dim);
    border: 1px solid var(--s-green-border);
    border-radius: 6px;
    padding: 0.22rem 0.55rem;
    line-height: 1;
    flex: none;
    transition: all 0.3s ease;
}

.svc-faq-modern-card.active .svc-clean-faq-idx {
    color: var(--s-orange-text);
    background: var(--s-orange-dim);
    border-color: var(--s-orange-border);
}

.svc-faq-question-text {
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--s-ink);
    line-height: 1.45;
}

.svc-faq-toggle-icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--s-line);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: var(--s-dim);
    transition: transform 0.35s ease, color 0.35s ease, background 0.35s ease;
}

.svc-faq-modern-card.active .svc-faq-toggle-icon {
    transform: rotate(45deg);
    color: var(--s-orange-text);
    background: var(--s-orange-dim);
    border-color: var(--s-orange-border);
}

.svc-faq-modern-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 1.75rem 0 3.8rem;
}

.svc-faq-modern-card.active .svc-faq-modern-drawer {
    max-height: 320px;
    padding: 0 1.75rem 1.45rem 3.8rem;
}

.svc-faq-modern-drawer p {
    font-size: 0.96rem;
    line-height: 1.8;
    color: var(--s-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   12. EXACT HOMEPAGE KINETIC MARQUEE PORTAL CTA
   -------------------------------------------------------------------------- */

.kinetic-portal-section {
    position: relative;
    width: 100%;
    padding: 4.5rem 0;
    background-color: var(--color-dark);
    z-index: 10;
    overflow: hidden;
}

.kinetic-portal-frame {
    position: relative;
    width: 100%;
    height: 480px;
    margin: 0 auto;
    background-color: var(--color-dark);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* Kinetic Marquee Rows */
.portal-marquee-row {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 1rem 0;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 2.5rem;
    will-change: transform;
}

.track-left {
    animation: marqueeScrollLeft 38s linear infinite;
}

.track-right {
    animation: marqueeScrollRight 38s linear infinite;
}

@keyframes marqueeScrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes marqueeScrollRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

.marquee-item {
    font-family: var(--font-primary);
    font-size: clamp(2.2rem, 4vw, 3.8rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
}

.stroke-text {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(249, 251, 255, 0.35);
}

.fill-text {
    color: var(--s-ink);
}

.bullet-glow {
    color: var(--s-orange);
    font-size: 1.2rem;
    filter: drop-shadow(0 0 8px var(--s-orange));
}

/* Central Floating Magnetic Orb Action */
.portal-center-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.magnetic-orb-btn {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, #F26430 0%, #d45224 85%);
    box-shadow: 0 0 50px rgba(242, 100, 48, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    will-change: transform;
    text-decoration: none;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.magnetic-orb-btn:hover {
    box-shadow: 0 0 75px rgba(242, 100, 48, 0.85), inset 0 2px 15px rgba(255, 255, 255, 0.6);
    transform: scale(1.08);
}

.orb-rotating-ring {
    position: absolute;
    top: -14px;
    left: -14px;
    right: -14px;
    bottom: -14px;
    border: 2px dashed rgba(249, 251, 255, 0.35);
    border-radius: 50%;
    animation: rotateRing 20s linear infinite;
    pointer-events: none;
}

@keyframes rotateRing {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.orb-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    pointer-events: none;
}

.orb-main-text {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Motion Hooks
   -------------------------------------------------------------------------- */

.svc-up {
    opacity: 1;
    transform: none;
}

.reveal .svc-up {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal .svc-up.is-hidden {
    opacity: 0;
    transform: translateY(22px);
}

.reveal .svc-stagger > * {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal .svc-stagger.is-hidden > * {
    opacity: 0;
    transform: translateY(18px);
}

/* --------------------------------------------------------------------------
   Responsive Layout Breakpoints
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .svc-services-grid,
    .svc-process-grid,
    .svc-diff-grid-clean,
    .svc-metric-clean-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-service-card--wide {
        grid-column: span 2;
    }
    .svc-industry-clean-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    
}

@media (max-width: 900px) {
    .svc-sec {
        padding: 3.5rem 0;
    }
    .svc-sec--rule > .svc-wrap::before {
        margin-top: -3.5rem;
        margin-bottom: 3.5rem;
    }
    .svc-centered-header,
    .svc-hero-t,
    .svc-hero-f,
    .svc-synergy-matched-layout,
    .svc-local-grid-clean {
        grid-template-columns: 1fr;
        grid-column: 1 / -1;
    }
    .svc-hero-f,
    .svc-synergy-diagram-panel,
    .svc-local-radar-panel {
        margin-top: 2rem;
    }
    .svc-fancy-cta-card,
    .svc-portfolio-referral-card,
    .svc-insight-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.35rem;
        padding: 2rem;
    }
    .svc-deck-matrix {
        grid-template-columns: 1fr;
    }
    .svc-deck-story-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .svc-services-grid,
    .svc-process-grid,
    .svc-synergy-grid-cards,
    .svc-local-pillars-wrapper,
    .svc-industry-clean-grid,
    .svc-diff-grid-clean,
    .svc-metric-clean-grid {
        grid-template-columns: 1fr;
    }
    .svc-service-card--wide {
        grid-column: span 1;
    }
    .svc-faq-modern-drawer {
        padding-left: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Related pages

   The page converts through WhatsApp, which is the right call for this
   market — but it left the page with two internal links, and a service page
   that links nowhere reads to a crawler as a dead end. This block is the
   internal linking, kept deliberately quiet so it never competes with the
   conversion buttons above it.

   Every destination survives the services rebuild. Linking content-creation
   or web-seo would have looked richer today and 404'd the moment those pages
   are retired.
   -------------------------------------------------------------------------- */

.svc-related-lead {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--s-dim);
    margin: 0 0 1.6rem;
}

.svc-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.15rem;
}

.svc-related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.6rem 1.5rem 1.7rem;
    border: 1px solid var(--s-line);
    border-radius: 18px;
    background: var(--s-bg-card);
    text-decoration: none;
    transition: var(--s-ease) 0.35s;
}

.svc-related-card:hover {
    border-color: var(--s-green-border);
    background: var(--s-hover);
    transform: translateY(-3px);
}

.svc-related-kicker {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--s-dim);
}

.svc-related-title {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--s-ink);
}

.svc-related-note {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--s-body);
    /* the same measure the body copy uses, so the three cards read as one
       paragraph split three ways rather than three different typographies */
    max-width: 34ch;
}

.svc-related-card i {
    position: absolute;
    top: 1.6rem;
    right: 1.5rem;
    font-size: 1.05rem;
    color: var(--s-dim);
    transition: var(--s-ease) 0.35s;
}

.svc-related-card:hover i { color: var(--s-green); transform: translateX(4px); }

.svc-related-foot {
    margin: 1.6rem 0 0;
    font-size: 0.93rem;
    color: var(--s-dim);
}

.svc-related-foot a {
    color: var(--s-green);
    text-decoration: none;
    border-bottom: 1px solid var(--s-green-border);
}

.svc-related-foot a:hover { border-bottom-color: var(--s-green); }

@media (max-width: 900px) {
    .svc-related-grid { grid-template-columns: 1fr; }
    .svc-related-note { max-width: none; }
}

/* ==========================================================================
   WEB DESIGN PAGE — additions

   Everything above is shared with the SEO page and is not touched. This block
   adds only what this page's content needs that that one did not: two figures
   of its own, a specification deck in place of the KPI deck, and span rules
   for the grids whose item counts do not divide evenly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Odd-count spans

   Nine services fill three columns exactly. Seven and five do not, and the
   established fix on the SEO page is to let the last card take the rest of
   the row rather than leave a hole beside it.
   -------------------------------------------------------------------------- */

/* A short last row is filled by widening its final card by exactly the
   number of cells missing: seven items in three columns leave one gap, so
   the seventh spans three; five leave two, so the fifth spans two. */
.svc-metric-clean-card--w3 { grid-column: span 3; }
.svc-metric-clean-card--w2 { grid-column: span 2; }
.svc-clean-diff-card--wide    { grid-column: span 3; }
.svc-synergy-card-item--wide  { grid-column: span 2; }
.svc-local-clean-card--wide   { grid-column: span 2; }

/* nine industries, so three columns — four would strand one on its own */
.svc-industry-clean-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   The four questions a first-time visitor is asking
   -------------------------------------------------------------------------- */

.svc-q-block {
    border: 1px solid var(--s-line);
    border-radius: 20px;
    padding: 2.2rem 2.1rem;
    background: var(--s-bg-card);
}

.svc-q-lead {
    margin: 0 0 1.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--s-dim);
}

.svc-q-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 2.2rem;
}

.svc-q-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--s-ink);
    font-weight: 500;
}

.svc-q-item i { color: var(--s-green); font-size: 1.15rem; flex: none; line-height: 1.3; }

.svc-q-foot {
    margin: 1.6rem 0 0;
    padding-top: 1.4rem;
    border-top: 1px solid var(--s-line);
    font-size: 0.98rem;
    color: var(--s-body);
}

/* --------------------------------------------------------------------------
   Hero figure — a page assembling itself

   The SEO page's hero showed a result climbing the rankings, because that is
   what SEO sells. This one shows a layout being built in order: navigation,
   headline, supporting copy, cards, call to action. That sequence is the
   argument the copy makes two sections later — structure before surface.
   -------------------------------------------------------------------------- */

.svc-build-fig {
    border: 1px solid var(--s-line-str);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.svc-build-chrome {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--s-line);
    background: rgba(0, 0, 0, 0.24);
}

.svc-build-chrome > span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--s-line-str);
    flex: none;
}

.svc-build-chrome > span:first-child { background: rgba(242, 100, 48, 0.6); }

.svc-build-url {
    flex: 1;
    margin-left: 0.6rem;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    border-radius: 100px;
    background: rgba(249, 251, 255, 0.05);
    font-size: 0.72rem;
    color: var(--s-dim);
    overflow: hidden;
    white-space: nowrap;
}

.svc-build-url-text::after {
    content: "";
    display: inline-block;
    width: 1.5px;
    height: 0.9em;
    margin-left: 2px;
    vertical-align: -0.12em;
    background: var(--s-green);
    animation: svc-blink 1.05s steps(2) infinite;
}

.svc-build-canvas { padding: 1.3rem; display: grid; gap: 0.75rem; }

.svc-build-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }

/* Each element starts collapsed and is grown by the script one at a time.
   Scale rather than opacity, so the layout visibly assembles instead of
   fading in as an already-finished picture. */
.svc-build-el {
    border-radius: 8px;
    background: rgba(249, 251, 255, 0.07);
    transform-origin: left center;
    opacity: 0;
    transform: scaleX(0.25);
    transition: opacity 0.35s var(--s-ease), transform 0.55s var(--s-ease);
}

.svc-build-el.is-placed { opacity: 1; transform: none; }

.svc-build-el[data-el="nav"]  { height: 12px; }
.svc-build-el[data-el="hero"] { height: 34px; background: rgba(242, 100, 48, 0.30); }
.svc-build-el[data-el="sub"]  { height: 12px; width: 78%; }
.svc-build-el[data-el="card"] { height: 62px; }
.svc-build-el[data-el="cta"]  { height: 26px; width: 44%; background: rgba(166, 212, 158, 0.34); }

.svc-build-note {
    margin: 0;
    padding: 0.95rem 1.3rem 1.15rem;
    border-top: 1px solid var(--s-line);
    font-size: 0.77rem;
    color: var(--s-dim);
}

.svc-build-note b { color: var(--s-green); font-weight: 700; }

/* --------------------------------------------------------------------------
   Viewport figure — one layout at three widths

   It sits beside "Mobile-First Experience", so it has to actually reflow
   rather than just shrink: at the narrow step the three columns become one
   stack and the nav collapses to a single bar, which is the point the copy
   is making.
   -------------------------------------------------------------------------- */

.svc-figure-col { display: grid; place-items: center; }

.svc-viewport-fig { width: 100%; display: grid; place-items: center; gap: 1.4rem; }

.svc-vp-frame {
    width: 100%;
    max-width: 340px;
    border: 1px solid var(--s-line-str);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.16);
    transition: max-width 0.9s var(--s-ease);
}

.svc-vp-frame[data-w="tablet"] { max-width: 250px; }
.svc-vp-frame[data-w="mobile"] { max-width: 150px; }

.svc-vp-chrome {
    display: flex;
    gap: 0.35rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--s-line);
    background: rgba(0, 0, 0, 0.22);
}

.svc-vp-chrome span { width: 7px; height: 7px; border-radius: 50%; background: var(--s-line-str); }

.svc-vp-body { padding: 0.9rem; display: grid; gap: 0.55rem; }

.svc-vp-nav { display: flex; gap: 0.35rem; justify-content: flex-end; }
.svc-vp-nav i { width: 22px; height: 6px; border-radius: 3px; background: rgba(249, 251, 255, 0.14); }

/* on the narrow step the links collapse to a single burger bar */
.svc-vp-frame[data-w="mobile"] .svc-vp-nav i:nth-child(-n+2) { display: none; }
.svc-vp-frame[data-w="mobile"] .svc-vp-nav i { width: 14px; }

.svc-vp-hero { height: 30px; border-radius: 6px; background: rgba(242, 100, 48, 0.28); }

.svc-vp-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
    transition: grid-template-columns 0.7s var(--s-ease);
}

.svc-vp-frame[data-w="tablet"] .svc-vp-cols { grid-template-columns: repeat(2, 1fr); }
.svc-vp-frame[data-w="mobile"] .svc-vp-cols { grid-template-columns: 1fr; }

.svc-vp-col { height: 40px; border-radius: 6px; background: rgba(249, 251, 255, 0.08); }

.svc-vp-cta { height: 18px; width: 52%; border-radius: 5px; background: rgba(166, 212, 158, 0.32); }
.svc-vp-frame[data-w="mobile"] .svc-vp-cta { width: 100%; }

.svc-vp-labels { display: flex; gap: 0.4rem; }

.svc-vp-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s-dim);
    border: 1px solid var(--s-line);
    border-radius: 100px;
    padding: 0.32rem 0.75rem;
    transition: all 0.4s var(--s-ease);
}

.svc-vp-label.is-live {
    color: var(--s-green);
    border-color: var(--s-green-border);
    background: var(--s-green-dim);
}

/* --------------------------------------------------------------------------
   Stack figure — interface, logic, data, systems

   Four layers with a signal running down through them, because the copy's
   claim is that these are one project rather than four separate ones.
   -------------------------------------------------------------------------- */

.svc-stack-fig { position: relative; width: 100%; display: grid; gap: 0.7rem; padding: 0.5rem 0; }

.svc-stack-layer {
    position: relative;
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--s-line);
    border-radius: 12px;
    background: var(--s-bg-card);
    transition: border-color 0.45s var(--s-ease), background 0.45s var(--s-ease);
}

.svc-stack-layer.is-lit { border-color: var(--s-green-border); background: var(--s-hover); }

.svc-stack-ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border: 1px solid var(--s-line-str);
    color: var(--s-dim);
    font-size: 1.05rem;
    transition: color 0.45s var(--s-ease);
}

.svc-stack-layer.is-lit .svc-stack-ic { color: var(--s-green); }

.svc-stack-name { font-size: 1rem; font-weight: 700; color: var(--s-ink); }

.svc-stack-sub {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--s-dim);
}

/* the travelling signal is decorative; it stops when motion is reduced */
.svc-stack-signal {
    position: absolute;
    left: 17px;
    top: 0;
    width: 2px;
    height: 26px;
    border-radius: 2px;
    background: linear-gradient(180deg, transparent, var(--s-green), transparent);
    opacity: 0;
}

.reveal .svc-stack-signal { animation: svc-stack-run 4.2s ease-in-out infinite; }

@keyframes svc-stack-run {
    0%        { top: 0;    opacity: 0;   }
    8%        {            opacity: 0.9; }
    78%       { top: 100%; opacity: 0.9; }
    88%, 100% { top: 100%; opacity: 0;   }
}

/* --------------------------------------------------------------------------
   Specification deck

   The SEO page's deck leads on a percentage. This document gives no
   percentages for these projects — it gives a specification — so the deck
   leads on the one figure it does supply, the page count, and the rest is a
   spec table. Nothing is invented to fill the KPI shape.
   -------------------------------------------------------------------------- */

.svc-deck-blurb {
    margin: 1rem 0 1.4rem;
    font-size: 0.95rem;
    line-height: 1.68;
    color: var(--s-body);
}

.svc-spec-sheet { display: grid; }

.svc-spec-row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--s-line);
    align-items: baseline;
}

.svc-spec-row:last-child { border-bottom: 0; }

.svc-spec-key {
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--s-dim);
}

.svc-spec-val { font-size: 0.93rem; line-height: 1.5; font-weight: 600; color: var(--s-ink); }

/* the page count is the deck's headline figure, so it takes the accent */
.svc-spec-row:nth-child(3) .svc-spec-val { color: var(--s-green); }

/* --------------------------------------------------------------------------
   Closing block
   -------------------------------------------------------------------------- */

.svc-closing {
    position: relative;
    border: 1px solid var(--s-line-str);
    border-radius: 24px;
    padding: 4rem 2.5rem;
    overflow: hidden;
    text-align: center;
}

.svc-closing::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 620px;
    height: 320px;
    transform: translate(-50%, -48%);
    pointer-events: none;
    background: radial-gradient(circle, rgba(242, 100, 48, 0.18) 0%, transparent 62%);
}

.svc-closing-inner { position: relative; max-width: 620px; margin: 0 auto; }

.svc-closing h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--s-ink);
    margin: 0 0 1.1rem;
}

.svc-closing p { font-size: 1rem; line-height: 1.7; color: var(--s-body); margin: 0 0 0.85rem; }
.svc-closing p:last-of-type { margin-bottom: 2rem; }

.svc-closing-btn { display: inline-flex; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .svc-industry-clean-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .svc-metric-clean-card--w3,
    .svc-metric-clean-card--w2,
    .svc-clean-diff-card--wide { grid-column: span 2; }
}

@media (max-width: 900px) {
    .svc-q-list { grid-template-columns: 1fr; }
    .svc-spec-row { grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (max-width: 600px) {
    .svc-industry-clean-grid--3 { grid-template-columns: 1fr; }
    .svc-metric-clean-card--w3,
    .svc-metric-clean-card--w2,
    .svc-clean-diff-card--wide,
    .svc-synergy-card-item--wide,
    .svc-local-clean-card--wide { grid-column: span 1; }
    .svc-q-block { padding: 1.6rem 1.35rem; }
    .svc-closing { padding: 2.75rem 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-build-el { opacity: 1; transform: none; }
    .svc-build-url-text::after,
    .reveal .svc-stack-signal { animation: none; }
    .svc-vp-frame { transition: none; }
}

/* ==========================================================================
   BRANDING PAGE — additions

   Everything above is shared with the SEO and Web Design pages. This block
   adds only what this document needs: a hero brand-kit, an identity system
   that cycles through three personalities, a tone-of-voice spectrum, and the
   two-card refresh-or-rebuild pair.
   ========================================================================== */

/* Foundation cards carry no icon — the metric card's icon box is hidden
   rather than filled with something arbitrary. A decorative glyph beside
   "Brand Promise" would be worse than no glyph at all. */
.svc-metric-clean-card .svc-metric-ic-box:empty { display: none; }

/* one question per line here: they are sentences, not labels */
.svc-q-list--1 { grid-template-columns: 1fr; }

/* --------------------------------------------------------------------------
   Voice figure — four axes, not one adjective

   The copy says a voice can be "somewhere in between", which a list of words
   cannot show and a slider can.
   -------------------------------------------------------------------------- */

.svc-voice-fig {
    width: 100%;
    border: 1px solid var(--s-line);
    border-radius: 16px;
    background: var(--s-bg-card);
    padding: 1.7rem 1.6rem 1.4rem;
    display: grid;
    gap: 1.15rem;
}

.svc-voice-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
}

.svc-voice-pole {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-dim);
    white-space: nowrap;
}

.svc-voice-track {
    position: relative;
    height: 3px;
    border-radius: 3px;
    background: rgba(249, 251, 255, 0.12);
}

.svc-voice-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--s-green);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 4px rgba(166, 212, 158, 0.16);
    transition: left 1.1s var(--s-ease);
}

.svc-voice-note {
    margin: 0.35rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--s-line);
    font-size: 0.79rem;
    color: var(--s-dim);
}

.svc-voice-note b { color: var(--s-green); font-weight: 700; }

/* --------------------------------------------------------------------------
   Refresh or rebuild — two cards, deliberately equal weight

   The document presents these as a choice rather than a ladder, so neither
   card is styled as the better one.
   -------------------------------------------------------------------------- */

.svc-pair-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.svc-pair-card {
    border: 1px solid var(--s-line);
    border-radius: 18px;
    padding: 2rem 1.85rem;
    background: var(--s-bg-card);
    transition: border-color 0.35s var(--s-ease), background 0.35s var(--s-ease);
}

.svc-pair-card:hover { border-color: var(--s-green-border); background: var(--s-hover); }

.svc-pair-ic {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid var(--s-line-str);
    color: var(--s-green);
    font-size: 1.25rem;
    margin-bottom: 1.2rem;
}

.svc-pair-card h3 {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--s-ink);
    margin: 0 0 0.6rem;
}

.svc-pair-card p { font-size: 0.96rem; line-height: 1.7; color: var(--s-body); margin: 0; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .svc-pair-grid { grid-template-columns: 1fr; }
    .svc-bk-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .svc-voice-row { grid-template-columns: 1fr; gap: 0.4rem; }
    .svc-voice-pole:last-child { text-align: right; }
    .svc-voice-track { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-bk-cell { opacity: 1; transform: none; }
    .svc-bk-ring, .svc-bk-stroke { animation: none; stroke-dashoffset: 0; }
    .svc-voice-dot, .svc-id-mark, .svc-id-sw, .svc-id-specimen { transition: none; }
}

/* ==========================================================================
   GOOGLE ADS PAGE — additions

   Everything above is shared with the other three service pages. This block
   adds what this document needs and they did not: the auction figure, the
   conversion funnel, a paid search result in the hero, a chip row for the
   tracked events, and the span rules for grids this document's counts do not
   divide into.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Odd-count spans
   -------------------------------------------------------------------------- */

.svc-process-card--w2 { grid-column: span 2; }
.svc-process-card--w3 { grid-column: span 3; }

/* the ninth service cell is the call to action */
.svc-service-card--cta {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.4rem;
    border-color: var(--s-orange-border);
    background: rgba(242, 100, 48, 0.05);
}

.svc-service-card--cta h3 { font-size: 1.12rem; line-height: 1.35; margin: 0; }
.svc-service-card--cta .svc-fancy-btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   Tracked events

   The document lists eight of these. Eight short labels do not want eight
   cards; they want to sit on one line and be read at a glance.
   -------------------------------------------------------------------------- */

.svc-chips { margin-top: 1.5rem; }

.svc-chips-lead {
    margin: 0 0 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--s-dim);
}

.svc-chips-row { display: flex; flex-wrap: wrap; gap: 0.55rem; }

.svc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--s-body);
    border: 1px solid var(--s-line-str);
    border-radius: 100px;
    padding: 0.5rem 1rem;
    transition: border-color 0.3s var(--s-ease), color 0.3s var(--s-ease);
}

.svc-chip i { color: var(--s-green); font-size: 0.95rem; }
.svc-chip:hover { border-color: var(--s-green-border); color: var(--s-ink); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .svc-process-card--w2,
    .svc-process-card--w3 { grid-column: span 2; }
}

@media (max-width: 900px) {
    .svc-auction-row { grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; }
    .svc-auction-who { grid-column: 1 / -1; }
    .svc-auction-pos { justify-self: end; }
}

@media (max-width: 600px) {
    .svc-process-card--w2,
    .svc-process-card--w3 { grid-column: span 1; }
    .svc-auction-row { grid-template-columns: 1fr; }
    .svc-auction-pos { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-auction-row,
    .svc-auction-bid i,
    .svc-auction-q i,
    .svc-auction-pos,
    .svc-funnel-bar { transition: none; }
}

/* --------------------------------------------------------------------------
   Case deck, rebuilt

   The two-column version put the copy on the left and five figures on the
   right, and the two columns never matched: 342px of copy beside 496px of
   figures left 154px of nothing under the text. Nothing could be done about
   that from inside a two-column layout — the two sides hold different
   amounts of content and always will.

   So the deck is three full-width bands instead: what the campaign was, the
   number it was run for, and the numbers behind it. No column can be shorter
   than its neighbour when there are no neighbours.
   -------------------------------------------------------------------------- */

.svc-deck-card {
    display: block;
    border: 1px solid var(--s-line);
    border-radius: 20px;
    background: var(--s-bg-card);
    overflow: hidden;
    transition: border-color 0.4s var(--s-ease);
}

.svc-deck-card:hover { border-color: var(--s-orange-border); }

/* --- band 1: what it was ------------------------------------------------ */

.svc-deck-head { padding: 1.9rem 2rem 1.6rem; }

.svc-deck-tag-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.svc-deck-badge {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1A0E08;
    background: var(--s-orange);
    border-radius: 100px;
    padding: 0.32rem 0.8rem;
}

.svc-deck-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-dim);
    border: 1px solid var(--s-line-str);
    border-radius: 100px;
    padding: 0.3rem 0.75rem;
}

.svc-deck-duration i { color: var(--s-green); }

.svc-deck-title {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--s-ink);
    margin: 0 0 0.7rem;
}

.svc-deck-blurb {
    margin: 0;
    font-size: 0.97rem;
    line-height: 1.7;
    color: var(--s-body);
    max-width: 68ch;
}

/* --- band 2: the number it was run for ---------------------------------- */

.svc-deck-headline {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--s-line);
    background: rgba(0, 0, 0, 0.16);
}

.svc-deck-kpi-block { display: grid; gap: 0.25rem; }

.svc-deck-kpi-num {
    font-size: clamp(2.2rem, 4.5vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--s-orange);
    font-variant-numeric: tabular-nums;
}

.svc-deck-kpi-sub {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--s-dim);
}

.svc-deck-kpi-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(249, 251, 255, 0.08);
    overflow: hidden;
}

.svc-deck-kpi-progress {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--s-orange), rgba(166, 212, 158, 0.9));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.1s var(--s-ease);
}

.svc-deck-card.is-in .svc-deck-kpi-progress { transform: scaleX(1); }

/* --- band 3: the numbers behind it -------------------------------------- */

.svc-deck-matrix {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--s-line);
}

.svc-deck-stat {
    display: grid;
    gap: 0.3rem;
    align-content: center;
    padding: 1.3rem 1.2rem;
    border-left: 1px solid var(--s-line);
    transition: background 0.35s var(--s-ease);
}

.svc-deck-stat:first-child { border-left: 0; }
.svc-deck-stat:hover { background: var(--s-hover); }

.svc-deck-stat-val {
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--s-ink);
    font-variant-numeric: tabular-nums;
}

.svc-deck-stat-lbl {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s-dim);
    line-height: 1.35;
}

@media (max-width: 1080px) {
    .svc-deck-matrix { grid-template-columns: repeat(3, 1fr); }
    /* a five-item strip over three columns leaves two on the last row; they
       widen rather than sit beside a gap */
    .svc-deck-stat:nth-child(4) { grid-column: span 2; }
    .svc-deck-stat:nth-child(5) { grid-column: span 1; }
    .svc-deck-stat:nth-child(4),
    .svc-deck-stat:nth-child(5) { border-top: 1px solid var(--s-line); }
}

@media (max-width: 720px) {
    .svc-deck-head { padding: 1.5rem 1.35rem 1.3rem; }
    .svc-deck-headline { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.3rem 1.35rem; }
    .svc-deck-matrix { grid-template-columns: repeat(2, 1fr); }
    .svc-deck-stat { padding: 1.1rem 1.2rem; border-top: 1px solid var(--s-line); }
    .svc-deck-stat:nth-child(odd) { border-left: 0; }
    .svc-deck-stat:nth-child(5) { grid-column: 1 / -1; }
    .svc-deck-stat:nth-child(-n+2) { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-deck-kpi-progress { transition: none; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Photographs between sections

   These rules went out with the 401 lines of branding-only CSS stripped from
   this page — but this treatment is shared, not branding's, so the two
   images here were rendering unstyled. Restored verbatim from the branding
   page so a reader moving between them sees the same object.
   -------------------------------------------------------------------------- */

.svc-system-shot { margin: 2rem 0 0; }

.svc-system-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid var(--s-line);
}

.svc-system-shot figcaption {
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: var(--s-dim);
    text-align: center;
}

/* --------------------------------------------------------------------------
   The headline figure is green

   Orange is the page's call-to-action colour — the button, the badge, the
   Sponsored tag. The number a campaign was actually run for is a result, and
   results are green across all four service pages. The bar keeps the
   orange-to-green gradient so the two still read as one object.
   -------------------------------------------------------------------------- */

.svc-deck-kpi-num { color: var(--s-green); }

.svc-deck-kpi-progress {
    background: linear-gradient(90deg, rgba(166, 212, 158, 0.55), var(--s-green));
}

/* ==========================================================================
   ANIMATION PAGE — additions

   Everything above is shared with the other four service pages. This block
   adds the two things only this document needs: a timeline for the hero, and
   the wall of reels.
   ========================================================================== */

/* Seven services plus a call-to-action cell.

   Four columns gave 210px cards, and inside one the heading was squeezed to
   90px beside its icon — every title wrapped, "2D Animation" included. Three
   columns give the heading room to sit on one line; the call-to-action cell
   widens to two so the last row still fills. */
.svc-services-grid--4 { grid-template-columns: repeat(3, 1fr); }

.svc-services-grid--4 .svc-service-card--cta { grid-column: span 2; }

/* The icon moves above the heading rather than beside it. Sitting in the
   row it left the heading 132px of a 251px card, and no amount of flex
   growing changes that — the icon and the gap are simply taking the width.
   Stacked, the heading gets the whole card and every title fits on one
   line. */
.svc-services-grid--4 .svc-service-header {
    display: block;
}

.svc-services-grid--4 .svc-service-ic { margin-bottom: 0.9rem; }

.svc-services-grid--4 .svc-service-header h3 {
    font-size: 1.04rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* if a future service name is longer than the card, it shrinks rather than
   overflowing — nowrap alone would push it out of the box */
@supports (font-size: clamp(1rem, 2cqw, 1.04rem)) {
    .svc-services-grid--4 .svc-service-card { container-type: inline-size; }
    .svc-services-grid--4 .svc-service-header h3 {
        font-size: clamp(0.86rem, 8.4cqw, 1.04rem);
    }
}

/* --------------------------------------------------------------------------
   The wall of work

   Four pieces at the aspect ratios they were actually made for — a wide
   explainer, a vertical product piece, a square ad, a short logo sting —
   woven into one mosaic. Four equal cards would have said the opposite of
   what the section is about: these formats are not interchangeable.
   -------------------------------------------------------------------------- */

.svc-reel-wall {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    align-items: start;
}

/* the wide explainer and the vertical product piece share the top band; the
   vertical one runs down past the two smaller tiles beside it */
.svc-reel { margin: 0; display: grid; gap: 0.9rem; align-content: start; }

.svc-reel-frame {
    position: relative;
    aspect-ratio: var(--ratio, 16 / 9);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--s-line-str);
    background: rgba(0, 0, 0, 0.24);
}

.svc-reel-vid {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A <video> with no source collapses, which is what lets the placeholder
   below show through. Once a src is set the video fills the frame and the
   placeholder is hidden by the rule after it. */
.svc-reel-vid:not([src]) { display: none; }

.svc-reel-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.5rem;
    padding: 1.2rem;
    text-align: center;
    border-radius: 15px;
    outline: 2px dashed rgba(249, 251, 255, 0.14);
    outline-offset: -12px;
}

.svc-reel-vid[src] ~ .svc-reel-ph { display: none; }

.svc-reel-ph-icon { font-size: 1.5rem; color: var(--s-dim); }

.svc-reel-ph-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--s-ink);
}

.svc-reel-ph-file {
    font-size: 0.7rem;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: var(--s-dim);
    word-break: break-all;
}

.svc-reel-dur {
    position: absolute;
    left: 0.85rem;
    bottom: 0.85rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--s-ink);
    background: rgba(0, 0, 0, 0.62);
    border-radius: 100px;
    padding: 0.24rem 0.6rem;
    font-variant-numeric: tabular-nums;
}

.svc-reel-play {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--s-orange);
    color: #1A0E08;
    font-size: 1rem;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s var(--s-ease), transform 0.3s var(--s-ease);
}

.svc-reel:hover .svc-reel-play { opacity: 1; transform: none; }
.svc-reel:hover .svc-reel-frame { border-color: var(--s-orange-border); }

/* --- the details underneath -------------------------------------------- */

.svc-reel-meta h3 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--s-ink);
    margin: 0 0 0.7rem;
}

.svc-reel-specs { display: grid; gap: 0.4rem; }

.svc-reel-spec {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 0.8rem;
    align-items: baseline;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--s-line);
}

.svc-reel-spec:last-child { border-bottom: 0; }

.svc-reel-k {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s-dim);
}

.svc-reel-v { font-size: 0.88rem; font-weight: 600; color: var(--s-body); }

/* the duration is the one figure the document gives, so it takes the accent */
.svc-reel-spec:nth-child(2) .svc-reel-v { color: var(--s-green); }

/* --------------------------------------------------------------------------
   Chips — the eight places animation is used
   -------------------------------------------------------------------------- */

.svc-chips-foot {
    margin: 1.2rem 0 0;
    font-size: 0.93rem;
    color: var(--s-body);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .svc-services-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
    .svc-services-grid--4 { grid-template-columns: 1fr; }
    .svc-tl-stage { height: 120px; }
    .svc-reel-spec { grid-template-columns: 80px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-tl-shape, .svc-tl-playhead, .svc-tl-key, .svc-reel-play { transition: none; }
}


/* --------------------------------------------------------------------------
   Hero — the showreel

   The same frame as the wall below, at 16:9. Three CSS-drawn figures were
   tried here first; none of them belonged on a page selling motion design,
   because the visitor compares them to real work instantly. A reel does not
   have that problem.
   -------------------------------------------------------------------------- */

.svc-reel--hero .svc-reel-frame { border-radius: 18px; }
.svc-reel--hero .svc-reel-play { opacity: 1; transform: none; }
.svc-reel--hero:hover .svc-reel-frame { border-color: var(--s-orange-border); }

/* A short last row is filled by widening its final card by exactly the
   number of cells missing: seven items in three columns leave one gap, so
   the seventh spans three; five leave two, so the fifth spans two. */
.svc-clean-diff-card--w3 { grid-column: span 3; }
.svc-clean-diff-card--w2 { grid-column: span 2; }

@media (max-width: 1080px) {
    .svc-clean-diff-card--w3,
    .svc-clean-diff-card--w2 { grid-column: span 2; }
}

@media (max-width: 600px) {
    .svc-clean-diff-card--w3,
    .svc-clean-diff-card--w2 { grid-column: span 1; }
}

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

   One word, centred, and nothing else. The section had a full two-column
   header — service name, a lead line and a paragraph — which is a lot of
   apparatus to introduce ten questions that introduce themselves.
   -------------------------------------------------------------------------- */

.svc-faq-title {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 2.75rem;
}

.svc-faq-title .svc-h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.06em;
}

@media (max-width: 780px) {
    .svc-faq-title { margin-bottom: 2rem; }
}

/* --------------------------------------------------------------------------
   A short last row of service cards at two columns

   Every one of these pages has an odd number of service cards, and the
   tablet breakpoint puts them in two columns, so the last card sat alone
   with a full cell of nothing beside it. :last-child:nth-child(odd) is
   exactly the case "the last card starts a row of its own at two columns",
   and it is scoped to that breakpoint because at three columns an odd total
   says nothing about the last row.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .svc-services-grid > .svc-service-card:last-child:nth-child(odd) {
        grid-column: span 2;
    }
}

@media (max-width: 720px) {
    .svc-services-grid > .svc-service-card:last-child:nth-child(odd) {
        grid-column: span 1;
    }
}

/* ==========================================================================
   The wall of work — re-tiled

   The four clips were laid out as a wide piece beside a vertical one running
   down two rows. That cannot tile: at equal height a 16:9 needs three times
   the width of a 9:16, so the rows never met. Measured, the wall had a 35px
   band of dead space under the first clip and its four bottom edges landed
   at four different heights, the shortest 206px above the tallest.

   Two rows of two instead. Each row is anchored by the clip that is
   naturally tallest in it -- the wide one on top, the vertical one below --
   and its neighbour stretches to meet it, giving up thirteen per cent
   through object-fit. Nothing is left short and nothing is cropped enough
   to notice.
   ========================================================================== */

.svc-reel-wall { align-items: stretch; }

.svc-reel-wall > .svc-reel { height: 100%; align-content: stretch; }

.svc-reel-wall > .svc-reel .svc-reel-frame { height: 100%; aspect-ratio: auto; }

/* the two anchors keep their own shape; the other two stretch to them */
.svc-reel-wall > .svc-reel--explainer .svc-reel-frame,
.svc-reel-wall > .svc-reel--product .svc-reel-frame {
    aspect-ratio: var(--ratio);
    height: auto;
}

@media (max-width: 720px) {
    .svc-reel-wall { grid-template-columns: 1fr; }

    .svc-reel-wall > .svc-reel {
        grid-area: auto;
        grid-column: 1 / -1;
        height: auto;
    }

    .svc-reel-wall > .svc-reel .svc-reel-frame {
        aspect-ratio: var(--ratio);
        height: auto;
    }
}

/* --------------------------------------------------------------------------
   Short last rows at the tablet breakpoint

   Every one of these grids drops to two columns at 1080px, and the span
   classes the components emit are calculated for three, so they close a
   three-column row and leave a two-column one open. :last-child:nth-child
   (odd) is exactly "the last card starts a row of its own at two columns".

   The angle row is the one exception: it is three columns at this width, so
   a last child third-from-a-multiple needs two cells rather than the whole
   row.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .svc-metric-clean-grid   > *:last-child:nth-child(odd),
    .svc-industry-clean-grid > *:last-child:nth-child(odd),
    .svc-diff-grid-clean     > *:last-child:nth-child(odd) {
        grid-column: span 2;
    }

    .svc-pic-angles > *:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* The mirror case: a last card that is even-numbered already ends a full
   row at two columns, so any span it carries -- and several carry one meant
   for a three-column row -- pushes the card before it into a row of its own.
   The animation page's eighth service card and fourth reason card were both
   doing exactly that. */

@media (max-width: 1080px) {
    .svc-services-grid       > *:last-child:nth-child(even),
    .svc-metric-clean-grid   > *:last-child:nth-child(even),
    .svc-industry-clean-grid > *:last-child:nth-child(even),
    .svc-diff-grid-clean     > *:last-child:nth-child(even) {
        grid-column: span 1;
    }
}

@media (max-width: 720px) {
    /* The decks drop to two stats a row. The three-column rule above still
       matches at this width and widens the fourth stat, which stranded the
       third on a row of its own; it is reset here before the last stat is
       widened to close the final row. */
    .svc-deck-stat:nth-child(4) { grid-column: span 1; }
    .svc-deck-matrix > *:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 720px) {
    .svc-metric-clean-grid   > *:last-child:nth-child(odd),
    .svc-industry-clean-grid > *:last-child:nth-child(odd),
    .svc-diff-grid-clean     > *:last-child:nth-child(odd) {
        grid-column: span 1;
    }
}

/* ==BLOCK reelwall== */
/* --------------------------------------------------------------------------
   Work wall

   Twelve columns; every tile states its own span. A 16:9 film across nine
   and a 9:16 reel across three come out 452.81 and 453.33 tall, so the two
   sit flush and the row closes.
   -------------------------------------------------------------------------- */

/*  The wall declared align-items: start and then overrode itself with
    stretch further down, which was right for the old layout: one tile there
    spanned two grid rows and had to fill them. Nothing spans two rows now,
    and under stretch a tile takes the row's height instead of its own aspect
    ratio -- which is why one row measured 509px against another's 498 for
    the same 16:9 film. Back to start, so each tile is the height its ratio
    says it is. */
.svc-reel-wall { align-items: start; }

.svc-reel-wall > .svc-reel { grid-column: span var(--span, 12); }

/*  The wall set height:100% and aspect-ratio:auto on every frame inside it,
    then handed the ratio back to two named tiles only -- again a leftover of
    the two-row layout. With the names gone that left every tile sized by its
    poster rather than by its slot. Each frame is its ratio again. */
.svc-reel-wall > .svc-reel { height: auto; align-content: start; }

.svc-reel-wall > .svc-reel .svc-reel-frame {
    height: auto;
    aspect-ratio: var(--ratio, 16 / 9);
}

/*  One file is 528x960 rather than 9:16. It is boxed at the slot and shown
    whole -- roughly five pixels of letterbox top and bottom, and nothing
    cropped out of the frame. */
.svc-reel--contain .svc-reel-vid {
    object-fit: contain;
    background: #000;
}

/*  The old sheet collapsed the wall to one column here and gave every tile
    grid-area: auto, which was the only way to fold a layout placed by name.
    Left standing it turned "span 6" into six implicit columns: the tiles
    measured 100px and 232px on a 375px screen instead of half the row each.
    The twelve columns stay, and only the spans change. */
@media (max-width: 720px) {
    .svc-reel-wall {
        grid-template-columns: repeat(12, 1fr);
        gap: 0.75rem;
    }

    .svc-reel-wall > .svc-reel {
        grid-area: auto;
        grid-column: span var(--span-m, 12);
    }

    /*  The film takes a full row and the reels pair off behind it, so with
        an odd number of reels the last one is left alone beside a hole. It
        widens instead -- the same rule the portfolio walls close their last
        row with. */
    .svc-reel-wall > .svc-reel:last-child:nth-child(even) {
        grid-column: span 12;
    }
}
/* ==END reelwall== */

/* ==BLOCK wrapgutter== */
/* --------------------------------------------------------------------------
   Narrow screens: the twelve-column gutter

   Eleven 32px gutters are 352px. Below 408px that is wider than the content
   box, so the columns collapse to zero and a 1 / -1 child takes the width of
   the gutters rather than the width of the box -- 352 inside 319 on a 375px
   screen, clipped at the right edge.

   Every child here spans the full grid, so the gutter is not separating
   anything; at zero the columns are real again and a full-span child is
   exactly the content width. Nothing moves.
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {
    .svc-wrap { column-gap: 0; }
}
/* ==END wrapgutter== */