/* ==========================================================================
   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 {
    position: relative;
    background: linear-gradient(135deg, rgba(38, 34, 32, 0.92) 0%, rgba(26, 23, 22, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 2.75rem 3rem;
    display: grid;
    grid-template-columns: 0.95fr 1.35fr;
    gap: 3rem;
    align-items: stretch;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: var(--s-ease) 0.35s;
}

.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-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 2rem;
    border-right: 1px solid rgba(249, 251, 255, 0.08);
}

.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-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.75rem;
}

.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);
    }
    .svc-deck-card {
        grid-template-columns: 1fr;
        padding: 2.5rem 2.25rem;
        gap: 2.25rem;
    }
    .svc-deck-left {
        border-right: 0;
        border-bottom: 1px solid rgba(249, 251, 255, 0.08);
        padding-right: 0;
        padding-bottom: 2rem;
    }
}

@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; }
}

/* 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;
    }
}

/* --------------------------------------------------------------------------
   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 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== */