/* ==========================================================================
   bespoke.css — per-page design system for capability/industry sub-pages.

   Loaded after style.css + sections.css on the 17 redesigned pages (EN+AR).
   Two layers:
     1. PRIMITIVES — reveal effects, carousel, tabs, accordion, compare
        slider, timeline/stepper/zigzag/bento structures, media frames.
     2. PAGE SKINS — body.page--{slug} scopes that give every page its own
        hero geometry, décor placement, palette accents and section dressing.

   Direction-sensitive rules use logical properties so the Arabic mirror
   works without per-rule RTL overrides (see rtl.css for the exceptions).
   ========================================================================== */

/* ==========================================================================
   1. PRIMITIVES
   ========================================================================== */

/* ── Reveal effects ──────────────────────────────────────────────────────
   data-bsk-reveal + one .bsk-fx-* class. JS adds .is-in on intersection. */
[data-bsk-reveal] {
    opacity: 0;
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.8s ease;
    transition-delay: var(--bsk-delay, 0s);
}
[data-bsk-reveal].is-in { opacity: 1; transform: none; filter: none; }

.bsk-fx-up     { transform: translateY(36px); }
.bsk-fx-down   { transform: translateY(-36px); }
.bsk-fx-start  { transform: translateX(-44px); }
.bsk-fx-end    { transform: translateX(44px); }
[dir="rtl"] .bsk-fx-start { transform: translateX(44px); }
[dir="rtl"] .bsk-fx-end   { transform: translateX(-44px); }
.bsk-fx-scale  { transform: scale(0.92); }
.bsk-fx-blur   { filter: blur(8px); transform: translateY(16px); }
.bsk-fx-tip    { transform: rotate(-2deg) translateY(26px); }
.bsk-fx-clip   { clip-path: inset(0 0 100% 0); transform: translateY(10px); }
.bsk-fx-clip.is-in { clip-path: inset(0 0 0 0); }
.bsk-fx-wipe   { clip-path: inset(0 100% 0 0); }
[dir="rtl"] .bsk-fx-wipe { clip-path: inset(0 0 0 100%); }
.bsk-fx-wipe.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
    [data-bsk-reveal] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* ── Theme-aware image pair (frame-independent) ─────────────────────────── */
.bsk-img-light { display: none; }
[data-theme="light"] .bsk-img-dark { display: none; }
[data-theme="light"] .bsk-img-light { display: block; }

/* ── Carousel ────────────────────────────────────────────────────────────
   <div class="bsk-carousel" data-bsk-carousel>
     <div class="bsk-track"> <div class="bsk-slide">…</div>… </div>
   </div>                       (controls injected by bespoke.js)          */
.bsk-carousel { position: relative; }

.bsk-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0.25rem 1rem;
}
.bsk-track::-webkit-scrollbar { display: none; }

.bsk-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    min-width: 0;
}

.bsk-carousel--deck .bsk-slide { flex-basis: min(72%, 560px); }
.bsk-carousel--peek .bsk-slide { flex-basis: 86%; }

.bsk-car-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.bsk-car-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}
.bsk-car-btn:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    transform: translateY(-2px);
}
[data-theme="light"] .bsk-car-btn {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    color: var(--text-dark);
}

.bsk-car-dots { display: flex; gap: 0.5rem; }
.bsk-car-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--text-muted);
    opacity: 0.4;
    cursor: pointer;
    transition: var(--transition);
}
.bsk-car-dot.is-active {
    opacity: 1;
    background: var(--secondary);
    transform: scale(1.25);
}

/* Image slide helper — fills the slide with a theme-aware photo. */
.bsk-slide-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}
[data-theme="light"] .bsk-slide-media { border-color: var(--border-light); }
.bsk-slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Tabs ────────────────────────────────────────────────────────────────
   <div class="bsk-tabs" data-bsk-tabs>
     <div class="bsk-tablist" role="tablist"><button class="bsk-tab">…</button>…</div>
     <div class="bsk-panels"><div class="bsk-panel">…</div>…</div>
   </div>                                                                  */
.bsk-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bsk-tab {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 1.4rem;
    cursor: pointer;
    transition: var(--transition);
    text-align: start;
}
[data-theme="light"] .bsk-tab { border-color: var(--border-light); }
.bsk-tab:hover { color: var(--text-main); border-color: var(--secondary); }
[data-theme="light"] .bsk-tab:hover { color: var(--text-dark); }
.bsk-tab.is-active {
    color: #fff;
    background: var(--gradient-accent);
    border-color: transparent;
}

.bsk-panel { display: none; }
.bsk-panel.is-active {
    display: block;
    animation: bsk-panel-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bsk-panel-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Code-editor flavored tabs (web-development) */
.bsk-tabs--editor {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
}
[data-theme="light"] .bsk-tabs--editor {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
}
.bsk-tabs--editor .bsk-tablist {
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.25);
    padding-inline-start: 56px;
    position: relative;
}
[data-theme="light"] .bsk-tabs--editor .bsk-tablist {
    background: rgba(26, 54, 93, 0.05);
    border-color: var(--border-light);
}
/* macOS-style window dots */
.bsk-tabs--editor .bsk-tablist::before {
    content: '';
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
[dir="rtl"] .bsk-tabs--editor .bsk-tablist::before {
    box-shadow: -16px 0 0 #febc2e, -32px 0 0 #28c840;
}
.bsk-tabs--editor .bsk-tab {
    border: 0;
    border-radius: 0;
    border-inline-end: 1px solid var(--border-color);
    padding: 0.9rem 1.5rem;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.85rem;
}
.bsk-tabs--editor .bsk-tab.is-active {
    background: var(--bg-card-hover);
    color: var(--secondary);
    box-shadow: inset 0 -2px 0 var(--secondary);
}
[data-theme="light"] .bsk-tabs--editor .bsk-tab.is-active { background: #fff; }
.bsk-tabs--editor .bsk-panels { padding: 2rem; }

/* Vertical chapter tabs (education) */
@media (min-width: 901px) {
    .bsk-tabs--chapters {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 2.5rem;
        align-items: start;
    }
    .bsk-tabs--chapters .bsk-tablist {
        flex-direction: column;
        position: sticky;
        top: 110px;
    }
    .bsk-tabs--chapters .bsk-tab {
        border: 0;
        border-inline-start: 3px solid var(--border-color);
        border-radius: 0;
        padding: 1rem 1.25rem;
    }
    .bsk-tabs--chapters .bsk-tab.is-active {
        background: transparent;
        color: var(--secondary);
        border-inline-start-color: var(--secondary);
    }
}

/* ── Accordion ───────────────────────────────────────────────────────────
   <div class="bsk-accordion" data-bsk-accordion [data-bsk-single]>
     <div class="bsk-acc-item">
       <button class="bsk-acc-head" type="button">…</button>
       <div class="bsk-acc-body"><div class="bsk-acc-inner">…</div></div>
     </div>…
   </div>                                                                  */
.bsk-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bsk-acc-item {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card);
    overflow: hidden;
    transition: var(--transition);
}
[data-theme="light"] .bsk-acc-item {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.bsk-acc-item.is-open { border-color: rgba(242, 110, 34, 0.45); }

.bsk-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.3rem 1.5rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: start;
    color: var(--text-main);
}
[data-theme="light"] .bsk-acc-head { color: var(--text-dark); }

.bsk-acc-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--secondary);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.bsk-acc-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.bsk-acc-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.bsk-acc-item.is-open .bsk-acc-icon {
    transform: rotate(45deg);
    color: var(--secondary);
}

.bsk-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.bsk-acc-item.is-open .bsk-acc-body { grid-template-rows: 1fr; }
.bsk-acc-inner {
    overflow: hidden;
    padding: 0 1.5rem;
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.98rem;
}
[data-theme="light"] .bsk-acc-inner { color: var(--text-dark-muted); }
.bsk-acc-item.is-open .bsk-acc-inner { padding-bottom: 1.5rem; }

/* ── Compare slider ──────────────────────────────────────────────────────
   <div class="bsk-compare" data-bsk-compare>
     <div class="bsk-compare-bottom">imgs</div>
     <div class="bsk-compare-top">imgs</div>
     <div class="bsk-compare-handle"><i …></i></div>
   </div>                                                                  */
.bsk-compare {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    cursor: ew-resize;
    touch-action: none;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    user-select: none;
    -webkit-user-select: none;
}
[data-theme="light"] .bsk-compare { border-color: var(--border-light); }

.bsk-compare-bottom,
.bsk-compare-top {
    position: absolute;
    inset: 0;
}
.bsk-compare-top { clip-path: inset(0 50% 0 0); }
[dir="rtl"] .bsk-compare-top { clip-path: inset(0 0 0 50%); }

.bsk-compare img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.bsk-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--secondary);
    pointer-events: none;
}
.bsk-compare-handle i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--secondary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.bsk-compare-tags {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    pointer-events: none;
    z-index: 2;
}

/* ── Timeline with progress spine ────────────────────────────────────────
   <div class="bsk-timeline" data-bsk-spine>
     <article class="bsk-tl-item">
       <div class="bsk-tl-marker">01</div>
       <div class="bsk-tl-card">…</div>
     </article>…
   </div>                                                                  */
.bsk-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-inline-start: 4.25rem;
}
.bsk-timeline::before,
.bsk-timeline::after {
    content: '';
    position: absolute;
    inset-inline-start: 24px;
    top: 0;
    bottom: 0;
    width: 2px;
}
.bsk-timeline::before { background: var(--border-color); }
.bsk-timeline::after {
    background: var(--gradient-accent);
    height: var(--bsk-spine-fill, 0%);
    bottom: auto;
    transition: height 0.15s linear;
}

.bsk-tl-item { position: relative; }

.bsk-tl-marker {
    position: absolute;
    inset-inline-start: -4.25rem;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 2px solid var(--secondary);
    color: var(--secondary);
    font-family: var(--font-heading);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
[data-theme="light"] .bsk-tl-marker { background: var(--bg-light); }

.bsk-tl-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.8rem 2rem;
    transition: var(--transition);
}
[data-theme="light"] .bsk-tl-card {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.bsk-tl-card:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 110, 34, 0.4);
}
.bsk-tl-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
    color: var(--text-main);
}
[data-theme="light"] .bsk-tl-card h3 { color: var(--text-dark); }
.bsk-tl-card p, .bsk-tl-body {
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.98rem;
}
[data-theme="light"] .bsk-tl-card p, [data-theme="light"] .bsk-tl-body {
    color: var(--text-dark-muted);
}

/* ── Roadmap (serpentine, alternating sides) ─────────────────────────── */
.bsk-roadmap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.bsk-roadmap::before,
.bsk-roadmap::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
}
.bsk-roadmap::before { background: var(--border-color); }
.bsk-roadmap::after {
    background: var(--gradient-accent);
    height: var(--bsk-spine-fill, 0%);
    bottom: auto;
    transition: height 0.15s linear;
}

.bsk-rm-item {
    position: relative;
    width: calc(50% - 3rem);
}
.bsk-rm-item:nth-child(even) { margin-inline-start: auto; }
.bsk-rm-item::before {
    content: '';
    position: absolute;
    top: 1.6rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--secondary);
    box-shadow: 0 0 0 5px rgba(242, 110, 34, 0.18);
    z-index: 1;
}
.bsk-rm-item:nth-child(odd)::before  { inset-inline-end: -3rem; transform: translateX(50%); }
.bsk-rm-item:nth-child(even)::before { inset-inline-start: -3rem; transform: translateX(-50%); }
[dir="rtl"] .bsk-rm-item:nth-child(odd)::before  { transform: translateX(-50%); }
[dir="rtl"] .bsk-rm-item:nth-child(even)::before { transform: translateX(50%); }

@media (max-width: 900px) {
    .bsk-roadmap::before, .bsk-roadmap::after {
        left: auto;
        inset-inline-start: 7px;
        transform: none;
    }
    .bsk-rm-item,
    .bsk-rm-item:nth-child(even) {
        width: auto;
        margin-inline-start: 2.25rem;
    }
    .bsk-rm-item:nth-child(odd)::before,
    .bsk-rm-item:nth-child(even)::before {
        inset-inline-start: -2.25rem;
        inset-inline-end: auto;
        transform: translateX(-25%);
    }
    [dir="rtl"] .bsk-rm-item:nth-child(odd)::before,
    [dir="rtl"] .bsk-rm-item:nth-child(even)::before {
        transform: translateX(25%);
    }
}

/* ── Zigzag rows (alternating text/visual) ──────────────────────────── */
.bsk-zigzag {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}
.bsk-zz-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.bsk-zz-row:nth-child(even) .bsk-zz-copy { order: 2; }
.bsk-zz-row:nth-child(even) .bsk-zz-visual { order: 1; }
@media (max-width: 900px) {
    .bsk-zz-row { grid-template-columns: 1fr; gap: 1.5rem; }
    .bsk-zz-row:nth-child(even) .bsk-zz-copy { order: 1; }
    .bsk-zz-row:nth-child(even) .bsk-zz-visual { order: 2; }
}

/* Watermark numeral behind zigzag/other blocks */
.bsk-watermark {
    position: relative;
}
.bsk-watermark::before {
    content: attr(data-num);
    position: absolute;
    inset-inline-start: -0.5rem;
    top: -3.5rem;
    font-family: var(--font-heading);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(242, 110, 34, 0.25);
    pointer-events: none;
    z-index: 0;
}

/* ── Bento grid ──────────────────────────────────────────────────────── */
.bsk-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.bsk-bento > * {
    border-radius: 18px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 1.8rem;
    transition: var(--transition);
}
[data-theme="light"] .bsk-bento > * {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.bsk-bento > *:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 110, 34, 0.4);
}
.bsk-bento-wide { grid-column: span 2; }
.bsk-bento-tall { grid-row: span 2; }
@media (max-width: 900px) {
    .bsk-bento { grid-template-columns: 1fr; }
    .bsk-bento-wide, .bsk-bento-tall { grid-column: auto; grid-row: auto; }
}

/* ── Ledger rows (numbered ruled rows) ──────────────────────────────── */
.bsk-ledger { display: flex; flex-direction: column; }
.bsk-ledger-row {
    display: grid;
    grid-template-columns: 90px 1fr 2fr;
    gap: 2rem;
    padding: 2.2rem 0.5rem;
    border-top: 1px solid var(--border-color);
    transition: var(--transition);
}
[data-theme="light"] .bsk-ledger-row { border-color: var(--border-light); }
.bsk-ledger-row:last-child { border-bottom: 1px solid var(--border-color); }
[data-theme="light"] .bsk-ledger-row:last-child { border-color: var(--border-light); }
.bsk-ledger-row:hover { background: var(--bg-card); }
[data-theme="light"] .bsk-ledger-row:hover { background: rgba(26, 54, 93, 0.04); }

.bsk-ledger-num {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--secondary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.bsk-ledger-row h3 {
    font-size: 1.2rem;
    color: var(--text-main);
    margin: 0;
}
[data-theme="light"] .bsk-ledger-row h3 { color: var(--text-dark); }
.bsk-ledger-row .bsk-ledger-body {
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.97rem;
}
[data-theme="light"] .bsk-ledger-row .bsk-ledger-body { color: var(--text-dark-muted); }
@media (max-width: 900px) {
    .bsk-ledger-row { grid-template-columns: 56px 1fr; }
    .bsk-ledger-row .bsk-ledger-body { grid-column: 2; }
}

/* ── Pathway (horizontal connected steps) ───────────────────────────── */
.bsk-pathway {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    position: relative;
}
.bsk-pathway::before {
    content: '';
    position: absolute;
    top: 26px;
    inset-inline: 8%;
    height: 2px;
    background: repeating-linear-gradient(
        to right,
        var(--secondary) 0 8px,
        transparent 8px 16px
    );
    opacity: 0.5;
}
.bsk-path-step { position: relative; padding-top: 4.5rem; }
.bsk-path-dot {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    color: #fff;
    background: var(--gradient-accent);
    box-shadow: 0 8px 24px rgba(242, 110, 34, 0.35);
    z-index: 1;
}
.bsk-path-step h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}
[data-theme="light"] .bsk-path-step h3 { color: var(--text-dark); }
.bsk-path-step .bsk-path-body {
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.96rem;
}
[data-theme="light"] .bsk-path-step .bsk-path-body { color: var(--text-dark-muted); }
@media (max-width: 900px) {
    .bsk-pathway { grid-template-columns: 1fr; gap: 2rem; }
    .bsk-pathway::before {
        inset-inline: auto;
        inset-inline-start: 25px;
        top: 8%;
        bottom: 8%;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(
            to bottom,
            var(--secondary) 0 8px,
            transparent 8px 16px
        );
    }
    .bsk-path-step { padding-top: 0; padding-inline-start: 4.5rem; }
}

/* ── Checklist rows (animated check draw) ───────────────────────────── */
.bsk-checklist { display: flex; flex-direction: column; gap: 1rem; }
.bsk-check-row {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    transition: var(--transition);
}
[data-theme="light"] .bsk-check-row {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.bsk-check-row:hover { border-color: rgba(242, 110, 34, 0.4); transform: translateX(4px); }
[dir="rtl"] .bsk-check-row:hover { transform: translateX(-4px); }
.bsk-check-row i {
    font-size: 1.5rem;
    color: var(--secondary);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.bsk-check-row p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
}
[data-theme="light"] .bsk-check-row p { color: var(--text-dark-muted); }
.bsk-check-row p strong { color: var(--text-main); font-weight: 600; }
[data-theme="light"] .bsk-check-row p strong { color: var(--text-dark); }

/* ── Stat / monitor tiles ───────────────────────────────────────────── */
.bsk-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}
.bsk-tile {
    position: relative;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 1.7rem;
    overflow: hidden;
    transition: var(--transition);
}
[data-theme="light"] .bsk-tile {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.bsk-tile:hover { transform: translateY(-4px); border-color: rgba(242, 110, 34, 0.4); }
.bsk-tile i {
    font-size: 1.6rem;
    color: var(--secondary);
    display: block;
    margin-bottom: 0.9rem;
}
.bsk-tile p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.95rem;
}
[data-theme="light"] .bsk-tile p { color: var(--text-dark-muted); }
.bsk-tile p strong { color: var(--text-main); font-weight: 600; }
[data-theme="light"] .bsk-tile p strong { color: var(--text-dark); }

/* Status dot for monitor-style tiles */
.bsk-tile--monitor::after {
    content: '';
    position: absolute;
    top: 1.4rem;
    inset-inline-end: 1.4rem;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5);
    animation: bsk-pulse-dot 2.4s infinite;
}
@keyframes bsk-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.45); }
    70%  { box-shadow: 0 0 0 9px rgba(40, 200, 64, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); }
}

/* ── Terminal / console panel ───────────────────────────────────────── */
.bsk-terminal {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: #0a0f18;
    overflow: hidden;
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
[data-theme="light"] .bsk-terminal {
    background: #101827;
    box-shadow: var(--shadow-md);
}
.bsk-terminal-bar {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.bsk-terminal-bar::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
}
[dir="rtl"] .bsk-terminal-bar::before {
    box-shadow: -16px 0 0 #febc2e, -32px 0 0 #28c840;
}
.bsk-terminal-body { padding: 1.6rem 1.8rem; }
.bsk-terminal-body p,
.bsk-terminal-body div {
    color: #c6d4e8;
    font-size: 0.92rem;
    line-height: 1.85;
}
.bsk-terminal-body strong { color: #ffb86b; font-weight: 600; }
.bsk-terminal-line {
    position: relative;
    padding-inline-start: 1.5rem;
    margin-bottom: 1rem;
}
.bsk-terminal-line:last-child { margin-bottom: 0; }
.bsk-terminal-line::before {
    content: '>';
    position: absolute;
    inset-inline-start: 0;
    color: var(--secondary);
    font-weight: 700;
}

/* ── Chips (adjacent links) ─────────────────────────────────────────── */
.bsk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.bsk-chips a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.3rem;
    border-radius: 50px;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: var(--transition);
    background: var(--bg-card);
}
[data-theme="light"] .bsk-chips a {
    color: var(--text-dark);
    border-color: var(--border-light);
    background: var(--bg-card-light);
}
.bsk-chips a:hover {
    border-color: var(--secondary);
    color: var(--secondary);
    transform: translateY(-2px);
}

/* ── Pull quote / drop cap (editorial) ──────────────────────────────── */
.bsk-pullquote {
    position: relative;
    padding: 2.5rem 3rem;
    font-family: var(--font-heading);
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    font-weight: 600;
    line-height: 1.5;
    color: var(--text-main);
}
[data-theme="light"] .bsk-pullquote { color: var(--text-dark); }
.bsk-pullquote::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 4px;
    border-radius: 4px;
    background: var(--gradient-accent);
}

.bsk-dropcap > p:first-of-type::first-letter {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 3.6em;
    float: inline-start;
    line-height: 0.85;
    padding-inline-end: 0.12em;
    color: var(--secondary);
}
/* First-letter float behaves unpredictably with some Arabic shapers — the
   AR pages simply don't get .bsk-dropcap. */

.bsk-columns-2 { columns: 2; column-gap: 3rem; }
@media (max-width: 900px) { .bsk-columns-2 { columns: 1; } }

/* ── Media frames ───────────────────────────────────────────────────── */
.bsk-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}
[data-theme="light"] .bsk-frame { border-color: var(--border-light); }
.bsk-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Browser chrome */
.bsk-frame--browser { padding-top: 44px; border-radius: 14px; }
.bsk-frame--browser::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--border-color);
}
[data-theme="light"] .bsk-frame--browser::before {
    background: rgba(26, 54, 93, 0.06);
    border-color: var(--border-light);
}
.bsk-frame--browser::after {
    content: '';
    position: absolute;
    top: 17px;
    inset-inline-start: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff5f57;
    box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
    z-index: 1;
}
[dir="rtl"] .bsk-frame--browser::after {
    box-shadow: -16px 0 0 #febc2e, -32px 0 0 #28c840;
}

/* Phone shell */
.bsk-frame--phone {
    border-radius: 38px;
    border: 10px solid #1c2536;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.06);
    aspect-ratio: 9 / 18;
    max-width: 320px;
    margin-inline: auto;
}
.bsk-frame--phone::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 36%;
    height: 22px;
    border-radius: 12px;
    background: #1c2536;
    z-index: 1;
}

/* Tablet shell */
.bsk-frame--tablet {
    border-radius: 24px;
    border: 12px solid #1c2536;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}

/* Vault — heavy plate with corner bolts */
.bsk-frame--vault {
    border-radius: 10px;
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow-lg), inset 0 0 0 8px rgba(255, 255, 255, 0.03);
}
.bsk-frame--vault::before,
.bsk-frame--vault::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary);
    opacity: 0.7;
    z-index: 1;
}
.bsk-frame--vault::before { top: 12px; inset-inline-start: 12px; }
.bsk-frame--vault::after  { bottom: 12px; inset-inline-end: 12px; }

/* Engraved — double rule inset */
.bsk-frame--engraved {
    border-radius: 6px;
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border-color), inset 0 0 0 10px var(--bg-dark), inset 0 0 0 11px var(--border-color);
}
[data-theme="light"] .bsk-frame--engraved {
    box-shadow: var(--shadow-md), inset 0 0 0 1px var(--border-light), inset 0 0 0 10px var(--bg-light), inset 0 0 0 11px var(--border-light);
}

/* Console — dark bezel with LED strip */
.bsk-frame--console {
    border-radius: 12px;
    border: 14px solid #131a28;
    border-bottom-width: 34px;
}
.bsk-frame--console::after {
    content: '';
    position: absolute;
    bottom: -24px;
    inset-inline-start: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #28c840;
    box-shadow: 14px 0 0 #febc2e, 28px 0 0 rgba(255, 255, 255, 0.25);
    animation: bsk-led 2.8s infinite;
}
[dir="rtl"] .bsk-frame--console::after {
    box-shadow: -14px 0 0 #febc2e, -28px 0 0 rgba(255, 255, 255, 0.25);
}
@keyframes bsk-led { 50% { opacity: 0.45; } }

/* Scanner — sweeping line overlay */
.bsk-frame--scanner::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(to right, transparent, var(--secondary), transparent);
    box-shadow: 0 0 24px 4px rgba(242, 110, 34, 0.45);
    animation: bsk-scan 4.5s ease-in-out infinite;
    z-index: 1;
}
@keyframes bsk-scan {
    0%, 100% { top: 4%; }
    50%      { top: 94%; }
}

/* Corner brackets (circuit) */
.bsk-frame--circuit { border-radius: 4px; overflow: visible; }
.bsk-frame--circuit img { border-radius: 4px; }
.bsk-frame--circuit::before,
.bsk-frame--circuit::after {
    content: '';
    position: absolute;
    width: 42px;
    height: 42px;
    border: 3px solid var(--secondary);
    z-index: 1;
}
.bsk-frame--circuit::before {
    top: -10px;
    inset-inline-start: -10px;
    border-bottom: 0;
    border-inline-end: 0;
}
.bsk-frame--circuit::after {
    bottom: -10px;
    inset-inline-end: -10px;
    border-top: 0;
    border-inline-start: 0;
}

/* Polaroid tilt cards */
.bsk-polaroid {
    background: var(--bg-card-light);
    padding: 12px 12px 40px;
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    transform: rotate(var(--bsk-tilt, -2.5deg));
    transition: var(--transition);
}
.bsk-polaroid:hover { transform: rotate(0deg) scale(1.02); }
.bsk-polaroid img { border-radius: 3px; }
/* Polaroid stock is always light — pin text to the dark palette */
.bsk-polaroid p { color: var(--text-dark-muted); margin: 0; line-height: 1.65; font-size: 0.95rem; padding: 0.9rem 0.4rem 0; }
.bsk-polaroid p strong { color: var(--text-dark); }

/* Collage — two overlapping frames */
.bsk-collage {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.bsk-collage .bsk-frame:first-child {
    grid-column: 1 / 9;
    grid-row: 1;
    z-index: 1;
}
.bsk-collage .bsk-frame:last-child {
    grid-column: 6 / 13;
    grid-row: 1;
    margin-top: 22%;
    transform: rotate(2deg);
}
@media (max-width: 700px) {
    .bsk-collage .bsk-frame:first-child { grid-column: 1 / 11; }
    .bsk-collage .bsk-frame:last-child { grid-column: 3 / 13; }
}

/* Shine sweep on hover (chip-card) */
.bsk-shine { position: relative; overflow: hidden; }
.bsk-shine::before {
    content: '';
    position: absolute;
    inset: -150% auto auto -60%;
    width: 50%;
    height: 400%;
    transform: rotate(25deg);
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.14), transparent);
    transition: inset-inline-start 0.9s ease;
    z-index: 1;
    pointer-events: none;
}
.bsk-shine:hover::before { inset-inline-start: 130%; }

/* ── Décor host (canvas injected by bespoke.js) ─────────────────────── */
.bsk-decor {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.bsk-decor-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ── Ring meter (decorative circular gauge) ─────────────────────────── */
.bsk-ring {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background:
        conic-gradient(var(--secondary) calc(var(--bsk-ring, 75) * 1%), var(--border-color) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bsk-ring::before {
    content: '';
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: var(--bg-dark);
}
[data-theme="light"] .bsk-ring::before { background: var(--bg-card-light); }
.bsk-ring i {
    position: relative;
    color: var(--secondary);
    font-size: 1.3rem;
}

/* ==========================================================================
   2. HERO VARIANTS  (rendered by capability-page.php / industry-page.php)
   ========================================================================== */

/* Shared décor host inside the hero */
.bsk-hero-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

/* — split: copy + framed media side by side */
.bsk-hero--split .bsk-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 3.5rem;
    align-items: center;
}
.bsk-hero--split .page-hero-title { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.bsk-hero--split .bsk-hero-media { position: relative; }
@media (max-width: 960px) {
    .bsk-hero--split .bsk-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* — panorama: media is a full-bleed dimmed backdrop */
.bsk-hero--panorama { min-height: 86vh; }
.bsk-hero-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.bsk-hero-backdrop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bsk-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(to top, var(--bg-dark) 4%, transparent 60%),
        radial-gradient(ellipse at 50% 40%, rgba(5, 10, 18, 0.42) 0%, rgba(5, 10, 18, 0.82) 100%);
}
[data-theme="light"] .bsk-hero-scrim {
    background:
        linear-gradient(to top, var(--bg-light) 4%, transparent 60%),
        radial-gradient(ellipse at 50% 40%, rgba(248, 250, 252, 0.5) 0%, rgba(248, 250, 252, 0.88) 100%);
}
.bsk-hero--panorama .container { text-align: center; }
.bsk-hero--panorama .page-hero-title,
.bsk-hero--panorama .page-hero-sub { margin-inline: auto; }

/* — frame: classic copy, framed media overlapping the next section */
.bsk-hero--frame { padding-bottom: 0; min-height: 0; }
.bsk-hero-framed {
    position: relative;
    z-index: 1;
    margin-top: 3.5rem;
    margin-bottom: -5.5rem;
}
.bsk-hero--frame + * { padding-top: 9rem !important; }
@media (max-width: 768px) {
    .bsk-hero-framed { margin-bottom: -3rem; }
    .bsk-hero--frame + * { padding-top: 6rem !important; }
}

/* — minimal: editorial start-aligned, no bg shapes */
.bsk-hero--minimal { min-height: 56vh; }
.bsk-hero--minimal .page-hero-title {
    max-width: 920px;
    font-size: clamp(2.6rem, 6.4vw, 5.4rem);
    letter-spacing: -2px;
}
body.bsk-no-shapes .page-hero-bg-shapes { display: none; }
body.bsk-no-particles #page-particles { display: none; }

/* ==========================================================================
   3. PAGE SKINS
   ========================================================================== */

/* ── cybersecurity — "security operations" ──────────────────────────── */
.page--cybersecurity .bsk-hero-decor {
    inset: auto;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: min(46vw, 620px);
    height: min(46vw, 620px);
    opacity: 0.5;
}
.page--cybersecurity .synk-section--problem .synk-section-label::before { background: #ff5f57; }
.page--cybersecurity .bsk-terminal strong { color: #ffb86b; }
.page--cybersecurity .synk-cta-panel {
    border-inline-start: 4px solid var(--secondary);
    border-radius: 8px;
}

/* ── data-ai — "pipeline" ───────────────────────────────────────────── */
.page--data-ai .bsk-hero-decor {
    inset: auto 0 0 0;
    height: 46%;
    opacity: 0.65;
}
.page--data-ai .bsk-bento > *:first-child {
    background: linear-gradient(140deg, rgba(242, 110, 34, 0.12), var(--bg-card) 55%);
}
[data-theme="light"] .page--data-ai .bsk-bento > *:first-child {
    background: linear-gradient(140deg, rgba(242, 110, 34, 0.1), #fff 55%);
}

/* ── web-development — "studio" ─────────────────────────────────────── */
.page--web-development .page-eyebrow {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    border-radius: 6px;
}
.page--web-development .page-eyebrow::after {
    content: '_';
    animation: bsk-caret 1.1s steps(1) infinite;
}
@keyframes bsk-caret { 50% { opacity: 0; } }
.page--web-development .bsk-commit-row {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.3rem 1.5rem;
    border-inline-start: 2px solid var(--border-color);
    position: relative;
    transition: var(--transition);
}
.page--web-development .bsk-commit-row::before {
    content: '';
    position: absolute;
    inset-inline-start: -6px;
    top: 1.7rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--secondary);
}
.page--web-development .bsk-commit-row:hover { border-inline-start-color: var(--secondary); }
.page--web-development .bsk-commit-row p { margin: 0; color: var(--text-muted); line-height: 1.7; }
[data-theme="light"] .page--web-development .bsk-commit-row p { color: var(--text-dark-muted); }
.page--web-development .bsk-commit-row p strong { color: var(--text-main); }
[data-theme="light"] .page--web-development .bsk-commit-row p strong { color: var(--text-dark); }

/* ── mobile-web-dev — "device lab" ──────────────────────────────────── */
.page--mobile-web-dev .bsk-hero-media .bsk-frame--phone {
    transform: rotate(3deg);
    transition: var(--transition);
}
.page--mobile-web-dev .bsk-hero-media .bsk-frame--phone:hover { transform: rotate(0); }
.page--mobile-web-dev .bsk-slide .synk-process-step { height: 100%; }
.page--mobile-web-dev .bsk-notify {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    border-radius: 18px;
    padding: 1.4rem 1.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg);
}
[data-theme="light"] .page--mobile-web-dev .bsk-notify {
    background: rgba(255, 255, 255, 0.85);
    border-color: var(--border-light);
}
.page--mobile-web-dev .bsk-notify > i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gradient-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ── data-analysis — "insight dashboard" ────────────────────────────── */
.page--data-analysis .bsk-hero-decor {
    inset: auto;
    inset-block-end: 0;
    inset-inline-end: 0;
    width: min(52vw, 700px);
    height: 58%;
    opacity: 0.5;
}
.page--data-analysis .bsk-tile { border-top: 3px solid var(--secondary); }
.page--data-analysis .bsk-zz-visual .bsk-watermark::before { position: static; display: block; }

/* ── digital-marketing — "editorial" ────────────────────────────────── */
.page--digital-marketing .page-hero-title {
    text-transform: none;
}
.page--digital-marketing .page-eyebrow {
    border-radius: 0;
    border-width: 0 0 2px 0;
    background: transparent;
    padding-inline: 0;
}
.page--digital-marketing .bsk-ab {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    overflow: hidden;
}
[data-theme="light"] .page--digital-marketing .bsk-ab { border-color: var(--border-light); }
.page--digital-marketing .bsk-ab > article {
    padding: 2.4rem 2rem;
    border-inline-end: 1px solid var(--border-color);
    position: relative;
    transition: var(--transition);
}
[data-theme="light"] .page--digital-marketing .bsk-ab > article { border-color: var(--border-light); }
.page--digital-marketing .bsk-ab > article:last-child { border-inline-end: 0; }
.page--digital-marketing .bsk-ab > article:hover { background: var(--bg-card); }
[data-theme="light"] .page--digital-marketing .bsk-ab > article:hover { background: rgba(26, 54, 93, 0.04); }
.page--digital-marketing .bsk-ab .synk-step-number {
    font-size: 4rem;
    -webkit-text-stroke: 1.5px var(--secondary);
    color: transparent;
}
@media (max-width: 900px) {
    .page--digital-marketing .bsk-ab { grid-template-columns: 1fr; }
    .page--digital-marketing .bsk-ab > article {
        border-inline-end: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .page--digital-marketing .bsk-ab > article:last-child { border-bottom: 0; }
}

/* ── digital-transformation — "roadmap" ─────────────────────────────── */
.page--digital-transformation .bsk-flags {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}
.page--digital-transformation .bsk-flag {
    position: relative;
    padding: 1.6rem 1.6rem 1.6rem;
    border-radius: 0 16px 16px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
[dir="rtl"] .page--digital-transformation .bsk-flag { border-radius: 16px 0 16px 16px; }
[data-theme="light"] .page--digital-transformation .bsk-flag {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.page--digital-transformation .bsk-flag::before {
    content: '';
    position: absolute;
    top: -1px;
    inset-inline-start: -1px;
    width: 38px;
    height: 12px;
    background: var(--gradient-accent);
    border-radius: 0 0 10px 0;
}
[dir="rtl"] .page--digital-transformation .bsk-flag::before { border-radius: 0 0 0 10px; }
.page--digital-transformation .bsk-flag:hover { transform: translateY(-4px); }

/* ── managed-services — "operations desk" ───────────────────────────── */
.page--managed-services .bsk-hero-decor {
    inset: 0;
    opacity: 0.4;
}
.page--managed-services .bsk-uptime {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
}
.page--managed-services .bsk-uptime::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #28c840;
    animation: bsk-pulse-dot 2.4s infinite;
}
.page--managed-services .bsk-wall {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.page--managed-services .bsk-wall > :last-child { margin-top: 3.5rem; }
@media (max-width: 900px) {
    .page--managed-services .bsk-wall { grid-template-columns: 1fr; }
    .page--managed-services .bsk-wall > :last-child { margin-top: 0; }
}

/* ── system-integration — "mesh" ────────────────────────────────────── */
.page--system-integration .bsk-hero-decor {
    inset: 0;
    opacity: 0.5;
}
.page--system-integration .bsk-ports { display: flex; flex-direction: column; gap: 1rem; }
.page--system-integration .bsk-port {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem 1.75rem;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--secondary);
    background: var(--bg-card);
    transition: var(--transition);
}
[data-theme="light"] .page--system-integration .bsk-port {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    border-inline-start-color: var(--secondary);
    box-shadow: var(--shadow-sm);
}
.page--system-integration .bsk-port:hover { transform: translateX(6px); }
[dir="rtl"] .page--system-integration .bsk-port:hover { transform: translateX(-6px); }
.page--system-integration .bsk-port i {
    color: var(--secondary);
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
.page--system-integration .bsk-port p { margin: 0; color: var(--text-muted); line-height: 1.7; }
[data-theme="light"] .page--system-integration .bsk-port p { color: var(--text-dark-muted); }
.page--system-integration .bsk-port p strong { color: var(--text-main); }
[data-theme="light"] .page--system-integration .bsk-port p strong { color: var(--text-dark); }
/* connector blocks: cards joined by dashes */
.page--system-integration .bsk-connect {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    position: relative;
}
.page--system-integration .bsk-connect::before {
    content: '';
    position: absolute;
    top: 50%;
    inset-inline: 4%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--secondary) 0 10px, transparent 10px 20px);
    opacity: 0.45;
    animation: bsk-dash-flow 1.2s linear infinite;
}
@keyframes bsk-dash-flow {
    to { background-position: 20px 0; }
}
.page--system-integration .bsk-connect .synk-process-step { position: relative; z-index: 1; }
@media (max-width: 900px) {
    .page--system-integration .bsk-connect { grid-template-columns: 1fr; }
    .page--system-integration .bsk-connect::before {
        inset-inline: auto;
        inset-inline-start: 50%;
        top: 4%;
        bottom: 4%;
        width: 2px;
        height: auto;
        background: repeating-linear-gradient(to bottom, var(--secondary) 0 10px, transparent 10px 20px);
    }
}

/* ── business-continuity — "drill" ──────────────────────────────────── */
.page--business-continuity .bsk-hero-decor {
    inset: auto;
    inset-block-start: 4%;
    inset-inline-end: 2%;
    width: min(30vw, 380px);
    height: min(30vw, 380px);
    opacity: 0.3;
}
.page--business-continuity .bsk-stamp {
    position: relative;
    overflow: hidden;
}
.page--business-continuity .bsk-stamp::after {
    content: '';
    position: absolute;
    top: 1.2rem;
    inset-inline-end: 1.2rem;
    width: 84px;
    height: 84px;
    border: 3px solid rgba(242, 110, 34, 0.4);
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 56%, rgba(242, 110, 34, 0.12) 57%);
    transform: rotate(12deg);
    pointer-events: none;
}

/* ── financial-services — "ledger" ──────────────────────────────────── */
.page--financial-services .bsk-hero-decor {
    inset: auto 0 0 0;
    height: 55%;
    opacity: 0.5;
}
.page--financial-services .page-hero-title { font-variant-numeric: tabular-nums; }
.page--financial-services .synk-outcome-card {
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--border-color), inset 0 0 0 6px transparent;
}
.page--financial-services .synk-cta-panel { border-radius: 8px; }

/* ── government — "civic" ───────────────────────────────────────────── */
.page--government .page-hero .container { text-align: center; }
.page--government .page-hero-title { margin-inline: auto; }
.page--government .page-hero-sub { margin-inline: auto; }
.page--government .bsk-rules {
    position: relative;
}
.page--government .bsk-rules::before,
.page--government .bsk-rules::after {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--border-color) 20% 80%, transparent);
}
.page--government .bsk-rules::before { inset-inline-start: max(1rem, 6vw); }
.page--government .bsk-rules::after { inset-inline-end: max(1rem, 6vw); }
.page--government .synk-section-title { letter-spacing: 0.5px; }
.page--government .bsk-charter {
    border-top: 3px double var(--border-color);
    padding-top: 1.5rem;
}
.page--government .bsk-notice {
    border: 1px solid var(--border-color);
    outline: 1px solid var(--border-color);
    outline-offset: 6px;
    border-radius: 2px;
}
@media (max-width: 900px) {
    .page--government .bsk-rules::before,
    .page--government .bsk-rules::after { display: none; }
}

/* ── healthcare — "vitals" ──────────────────────────────────────────── */
.page--healthcare .bsk-hero-decor {
    inset: auto 0 6% 0;
    height: 120px;
    opacity: 0.75;
}
.page--healthcare .bsk-tile--monitor { border-radius: 20px; }
.page--healthcare .synk-cta-panel .btn-primary {
    box-shadow: 0 0 0 0 rgba(242, 110, 34, 0.45);
    animation: bsk-cta-pulse 2.6s infinite;
}
@keyframes bsk-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(242, 110, 34, 0.4); }
    70%  { box-shadow: 0 0 0 16px rgba(242, 110, 34, 0); }
    100% { box-shadow: 0 0 0 0 rgba(242, 110, 34, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .page--healthcare .synk-cta-panel .btn-primary { animation: none; }
}

/* ── education — "chapters" ─────────────────────────────────────────── */
.page--education .bsk-grade {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.6rem 1.75rem;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
[data-theme="light"] .page--education .bsk-grade {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.page--education .bsk-grade:hover { transform: translateY(-4px); border-color: rgba(242, 110, 34, 0.4); }
.page--education .bsk-grade > i {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(242, 110, 34, 0.12);
    color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.page--education .bsk-grade p { margin: 0; color: var(--text-muted); line-height: 1.7; }
[data-theme="light"] .page--education .bsk-grade p { color: var(--text-dark-muted); }
.page--education .bsk-grade p strong { color: var(--text-main); }
[data-theme="light"] .page--education .bsk-grade p strong { color: var(--text-dark); }
.page--education .bsk-certificate {
    position: relative;
}
.page--education .bsk-certificate::after {
    content: '';
    position: absolute;
    top: -8px;
    inset-inline-end: 2.4rem;
    width: 34px;
    height: 64px;
    background: var(--gradient-accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* ── telecommunications — "signal" ──────────────────────────────────── */
.page--telecommunications .bsk-hero-decor {
    inset: auto 0 0 0;
    height: 70%;
    opacity: 0.5;
}
.page--telecommunications .bsk-bands { display: flex; flex-direction: column; }
.page--telecommunications .bsk-band {
    display: grid;
    grid-template-columns: 110px 1fr 2fr;
    gap: 2rem;
    align-items: start;
    padding: 2.2rem 1.25rem;
    border-top: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .page--telecommunications .bsk-band { border-color: var(--border-light); }
.page--telecommunications .bsk-band:last-child { border-bottom: 1px solid var(--border-color); }
.page--telecommunications .bsk-band::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(to right, rgba(242, 110, 34, 0.1), transparent);
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .page--telecommunications .bsk-band::before {
    background: linear-gradient(to left, rgba(242, 110, 34, 0.1), transparent);
}
.page--telecommunications .bsk-band:hover::before { width: 100%; }
.page--telecommunications .bsk-band-num {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 2px;
    color: var(--secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.page--telecommunications .bsk-band-num i { font-size: 1.3rem; }
.page--telecommunications .bsk-band h3 { font-size: 1.2rem; margin: 0; color: var(--text-main); }
[data-theme="light"] .page--telecommunications .bsk-band h3 { color: var(--text-dark); }
.page--telecommunications .bsk-band > div:last-child {
    color: var(--text-muted);
    line-height: 1.75;
    font-size: 0.97rem;
}
[data-theme="light"] .page--telecommunications .bsk-band > div:last-child { color: var(--text-dark-muted); }
@media (max-width: 900px) {
    .page--telecommunications .bsk-band { grid-template-columns: 1fr; gap: 0.8rem; }
}
/* sweeping highlight on the CTA */
.page--telecommunications .synk-cta-panel { overflow: hidden; }
.page--telecommunications .synk-cta-panel::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    inset-inline-start: -40%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
    animation: bsk-sweep 4.5s ease-in-out infinite;
}
@keyframes bsk-sweep {
    to { inset-inline-start: 140%; }
}

/* ── utilities — "grid" ─────────────────────────────────────────────── */
.page--utilities .bsk-hero-decor {
    inset: 0;
    opacity: 0.5;
}
.page--utilities .bsk-meter {
    display: flex;
    gap: 1.4rem;
    align-items: center;
    padding: 1.6rem 1.75rem;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
[data-theme="light"] .page--utilities .bsk-meter {
    background: var(--bg-card-light);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}
.page--utilities .bsk-meter:hover { transform: translateY(-4px); border-color: rgba(242, 110, 34, 0.4); }
.page--utilities .bsk-meter p { margin: 0; color: var(--text-muted); line-height: 1.7; font-size: 0.95rem; }
[data-theme="light"] .page--utilities .bsk-meter p { color: var(--text-dark-muted); }
.page--utilities .bsk-meter p strong { color: var(--text-main); }
[data-theme="light"] .page--utilities .bsk-meter p strong { color: var(--text-dark); }
/* vertical current flow between steps */
.page--utilities .bsk-flowline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}
.page--utilities .bsk-flowline::before {
    content: '';
    position: absolute;
    inset-inline-start: 25px;
    top: 2%;
    bottom: 2%;
    width: 3px;
    background:
        repeating-linear-gradient(to bottom, var(--secondary) 0 14px, rgba(242, 110, 34, 0.15) 14px 28px);
    background-size: 100% 28px;
    animation: bsk-current 1.1s linear infinite;
    border-radius: 3px;
}
@keyframes bsk-current {
    to { background-position: 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .page--utilities .bsk-flowline::before { animation: none; }
}
.page--utilities .bsk-flow-step {
    position: relative;
    padding: 1.6rem 0 1.6rem 4.5rem;
    padding-inline-start: 4.5rem;
    padding-inline-end: 0;
}
.page--utilities .bsk-flow-step::before {
    content: '';
    position: absolute;
    inset-inline-start: 16px;
    top: 1.9rem;
    width: 21px;
    height: 21px;
    border-radius: 4px;
    transform: rotate(45deg);
    background: var(--bg-dark);
    border: 2px solid var(--secondary);
}
[data-theme="light"] .page--utilities .bsk-flow-step::before { background: var(--bg-light); }

/* ── non-profit — "story" ───────────────────────────────────────────── */
.page--non-profit .page-hero-sub { font-size: clamp(1.15rem, 2.2vw, 1.45rem); }
.page--non-profit .bsk-story-block {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 2rem;
}
.page--non-profit .bsk-story-block + .bsk-story-block { margin-top: 3.5rem; }
.page--non-profit .bsk-story-num {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--secondary);
    border-top: 3px solid var(--secondary);
    padding-top: 0.8rem;
}
.page--non-profit .bsk-story-block h3 {
    font-size: 1.4rem;
    margin-bottom: 0.9rem;
    color: var(--text-main);
}
[data-theme="light"] .page--non-profit .bsk-story-block h3 { color: var(--text-dark); }
.page--non-profit .bsk-story-block .bsk-story-body {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 1.02rem;
}
[data-theme="light"] .page--non-profit .bsk-story-block .bsk-story-body { color: var(--text-dark-muted); }
@media (max-width: 700px) {
    .page--non-profit .bsk-story-block { grid-template-columns: 1fr; gap: 0.8rem; }
}
.page--non-profit .bsk-impact-bar {
    height: 6px;
    border-radius: 6px;
    background: var(--border-color);
    overflow: hidden;
    margin-top: 1.1rem;
}
.page--non-profit .bsk-impact-bar > span {
    display: block;
    height: 100%;
    width: var(--bsk-bar, 80%);
    border-radius: inherit;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
[dir="rtl"] .page--non-profit .bsk-impact-bar > span { transform-origin: 100% 50%; }
.page--non-profit [data-bsk-reveal].is-in .bsk-impact-bar > span,
.page--non-profit .bsk-impact-bar.is-in > span { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
    .page--non-profit .bsk-impact-bar > span { transform: none; transition: none; }
}

/* ==========================================================================
   4. SHARED RESPONSIVE / A11Y GUARDS
   ========================================================================== */

@media (max-width: 768px) {
    .bsk-timeline { padding-inline-start: 3.4rem; gap: 2.25rem; }
    .bsk-timeline::before, .bsk-timeline::after { inset-inline-start: 18px; }
    .bsk-tl-marker { inset-inline-start: -3.4rem; width: 38px; height: 38px; font-size: 0.85rem; }
    .bsk-tl-card { padding: 1.4rem 1.5rem; }
    .bsk-pullquote { padding: 1.6rem 1.8rem; }
    .bsk-tabs--editor .bsk-tablist { padding-inline-start: 12px; }
    .bsk-tabs--editor .bsk-tablist::before { display: none; }
    .bsk-tabs--editor .bsk-panels { padding: 1.4rem; }
    .bsk-ledger-row, .page--telecommunications .bsk-band { padding-block: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bsk-frame--scanner::after,
    .page--telecommunications .synk-cta-panel::before,
    .page--system-integration .bsk-connect::before,
    .page--web-development .page-eyebrow::after,
    .bsk-tile--monitor::after,
    .page--managed-services .bsk-uptime::before,
    .bsk-frame--console::after {
        animation: none;
    }
}