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

/* eight services + the cta cell is already nine, so it does not widen here */
.svc-services-grid--4.svc-services-grid--9 .svc-service-card--cta { grid-column: span 1; }

/* 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--explainer { grid-column: 1 / 8;  }
.svc-reel--product   { grid-column: 8 / 13; grid-row: 1 / 3; }
.svc-reel--ad        { grid-column: 1 / 5;  }
.svc-reel--logo      { grid-column: 5 / 8;  }

.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); }
    .svc-reel--explainer { grid-column: 1 / 13; }
    .svc-reel--product   { grid-column: 1 / 7; grid-row: auto; }
    .svc-reel--ad        { grid-column: 7 / 13; }
    .svc-reel--logo      { grid-column: 1 / 13; }
}

@media (max-width: 720px) {
    .svc-services-grid--4 { grid-template-columns: 1fr; }
    .svc-reel--explainer,
    .svc-reel--product,
    .svc-reel--ad,
    .svc-reel--logo { grid-column: 1 / 13; }
    .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); }


/* --------------------------------------------------------------------------
   Image slot

   The hero takes a photograph rather than a drawn figure. While it is empty
   the frame says what belongs there and what size, so a missing asset is
   obvious in review instead of shipping as a grey rectangle.
   -------------------------------------------------------------------------- */

.svc-shot {
    position: relative;
    margin: 0;
    aspect-ratio: var(--shot-ratio, 4 / 3);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--s-line-str);
}

.svc-shot-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.svc-shot-img:not([src]) { display: none; }

.svc-shot-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 1.5rem;
    border-radius: 17px;
    outline: 2px dashed rgba(249, 251, 255, 0.16);
    outline-offset: -14px;
}

.svc-shot-img[src] + .svc-shot-ph { display: none; }
.svc-shot:has(.svc-shot-img[src]) { background: transparent; }

.svc-shot-name { font-size: 0.9rem; font-weight: 700; color: var(--s-ink); }
.svc-shot-spec { font-size: 0.75rem; line-height: 1.5; color: var(--s-dim); }

/* --------------------------------------------------------------------------
   FAQ heading — one word, centred
   -------------------------------------------------------------------------- */

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

/* The graphic design hero is artwork on a near-white ground, where every
   other figure on these pages sits on the dark one. Rather than fight that,
   the frame gives it a light edge and a little inner glow so it reads as a
   deliberate print laid on the page instead of a hole punched through it. */
.svc-shot--light {
    border-color: rgba(249, 251, 255, 0.28);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
}

/* ==========================================================================
   PHOTOGRAPHY PAGE — additions

   Twenty-two frames. The whole page is an argument that images do the work,
   so the frames are quiet: a hairline, a radius, and nothing competing with
   whatever ends up inside them.

   An empty frame states the file it expects. That label is the only text any
   of these carry, and it disappears the moment a picture is set — so a
   missing photograph is obvious in review rather than shipping as a grey
   rectangle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The frame
   -------------------------------------------------------------------------- */

.svc-pic {
    position: relative;
    margin: 0;
    aspect-ratio: var(--ratio, 3 / 2);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--s-line-str);
    background: rgba(0, 0, 0, 0.22);
    transition: border-color 0.35s var(--s-ease), transform 0.35s var(--s-ease);
}

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

/* An <img> with no src collapses, which is what lets the placeholder show
   through; once a src is set the picture fills the frame and the placeholder
   is hidden by the rule below. */
.svc-pic-img:not([src]) { display: none; }

.svc-pic-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.45rem;
    padding: 1rem;
    text-align: center;
    border-radius: 13px;
    outline: 2px dashed rgba(249, 251, 255, 0.13);
    outline-offset: -10px;
}

.svc-pic-img[src] + .svc-pic-ph { display: none; }
.svc-pic:has(.svc-pic-img[src]) { background: transparent; }

.svc-pic-ic { font-size: 1.3rem; color: var(--s-dim); }

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

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

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.svc-pic--hero {
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   The four styles

   The document's point is that the same subject looks completely different
   in each of these. Four tall frames in a row make the comparison possible;
   the label sits under each one because without it the comparison has no
   terms.
   -------------------------------------------------------------------------- */

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

.svc-pic--style { overflow: visible; border: 0; background: none; aspect-ratio: auto; }

.svc-pic--style .svc-pic-img,
.svc-pic--style .svc-pic-ph {
    aspect-ratio: 3 / 4;
    height: auto;
    border-radius: 14px;
}

.svc-pic--style .svc-pic-ph {
    position: relative;
    inset: auto;
    border: 1px solid var(--s-line-str);
    background: rgba(0, 0, 0, 0.22);
}

.svc-pic-cap {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--s-body);
    text-align: center;
}

/* --------------------------------------------------------------------------
   The angles

   "Multiple angles and consistent compositions" — so, five squares in a row,
   consistent by construction.
   -------------------------------------------------------------------------- */

.svc-pic-angles {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.9rem;
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   The gallery

   Twelve cells across eight frames, at the ratios each subject is actually
   shot in. Equal thumbnails would have flattened the difference between a
   wide property shot and a tall portrait, which is the difference the page
   spends a section explaining.
   -------------------------------------------------------------------------- */

.svc-gallery {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.1rem;
}

/* Seven frames, three rows. Each row is sized by one anchor keeping its own
   ratio; every other frame in that row is stretched to meet it and crops
   through object-fit. Letting all seven keep their ratios left roughly a
   quarter of the wall as holes -- no two of these subjects are shot at the
   same shape.

   The anchor of each row is the frame that is naturally tallest there, so
   the anchors give up nothing and the stretch only ever grows a frame:
   product is 27px taller than brand beside it, lifestyle 29px taller than
   food, hospitality 62px taller than event. Anchoring on a shorter frame
   left the row sized by whichever neighbour overflowed it, which is what
   pulled row one apart.

   Scoped to .svc-gallery to match the reset above, so the cascade is not
   left to choose. */
.svc-gallery > .svc-pic { aspect-ratio: auto; height: 100%; }

.svc-gallery > .svc-pic--product     { aspect-ratio: 1 / 1;   height: auto; }
.svc-gallery > .svc-pic--lifestyle   { aspect-ratio: 1 / 1;   height: auto; }
.svc-gallery > .svc-pic--hospitality { aspect-ratio: 16 / 9;  height: auto; }

.svc-pic--brand       { grid-area: 1 / 1 / 2 / 8;  }
.svc-pic--product     { grid-area: 1 / 8 / 2 / 13; }
.svc-pic--beauty      { grid-area: 2 / 1 / 3 / 6;  }
.svc-pic--food        { grid-area: 2 / 6 / 3 / 9;  }
.svc-pic--lifestyle   { grid-area: 2 / 9 / 3 / 13; }
.svc-pic--hospitality { grid-area: 3 / 1 / 4 / 8;  }
.svc-pic--event       { grid-area: 3 / 8 / 4 / 13; }

/* --------------------------------------------------------------------------
   Ten services fill four rows of three once the call to action takes two
   -------------------------------------------------------------------------- */

.svc-services-grid--12 { grid-template-columns: repeat(3, 1fr); }
.svc-services-grid--12 .svc-service-card--cta { grid-column: span 2; }

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

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

    /* Six columns rather than twelve, and the three narrow frames take the
       middle row together at 9:10 -- a tenth off each, which is the least
       any pairing of a square and a 4:5 can cost. The four wide frames get
       a row each. */
    .svc-gallery { grid-template-columns: repeat(6, 1fr); }

    .svc-gallery > .svc-pic { aspect-ratio: var(--ratio); height: auto; }

    .svc-pic--brand       { grid-area: 1 / 1 / 2 / 7; }
    .svc-pic--product     { grid-area: 2 / 1 / 3 / 3; }
    .svc-pic--food        { grid-area: 2 / 3 / 3 / 5; }
    .svc-pic--lifestyle   { grid-area: 2 / 5 / 3 / 7; }
    .svc-pic--beauty      { grid-area: 3 / 1 / 4 / 7; }
    .svc-pic--hospitality { grid-area: 4 / 1 / 5 / 7; }
    .svc-pic--event       { grid-area: 5 / 1 / 6 / 7; }

    .svc-gallery > .svc-pic--product,
    .svc-gallery > .svc-pic--food,
    .svc-gallery > .svc-pic--lifestyle { aspect-ratio: 9 / 10; }
}

@media (max-width: 720px) {
    .svc-services-grid--12 { grid-template-columns: 1fr; }
    .svc-services-grid--12 .svc-service-card--cta { grid-column: span 1; }
    .svc-pic-strip  { grid-template-columns: repeat(2, 1fr); }
    .svc-pic-angles { grid-template-columns: repeat(2, 1fr); }
    .svc-gallery { grid-template-columns: 1fr; }
    .svc-gallery > .svc-pic {
        grid-area: auto;
        aspect-ratio: var(--ratio);
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-pic { transition: none; }
}

/* --------------------------------------------------------------------------
   A short last row of reason cards

   The final card widens by exactly the number of cells the row is missing:
   five items in three columns leave two, so the fifth spans two. Without
   these two rules the component still emits the class and the row simply
   ends short -- which is what it was doing here.
   -------------------------------------------------------------------------- */

.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: 720px) {
    .svc-clean-diff-card--w3,
    .svc-clean-diff-card--w2 { grid-column: span 1; }
}

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