/* ==========================================================================
   BISAN AGENCY - COMPLETE BRAND STYLESHEET (MINIMALIST VISUAL ROADMAP)
   ========================================================================== */

/* --- Custom Brand Fonts (Adelle Sans EXT) --- */
@font-face {
    font-family: 'Adelle Sans EXT';
    src: url('fonts/font/AdelleSansEXT-Regular.woff2') format('woff2'),
         url('fonts/font/AdelleSansEXT-Regular.woff') format('woff'),
         url('fonts/font/AdelleSansEXT-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adelle Sans EXT';
    src: url('fonts/font/AdelleSansEXT-Semibold.woff2') format('woff2'),
         url('fonts/font/AdelleSansEXT-Semibold.woff') format('woff'),
         url('fonts/font/AdelleSansEXT-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adelle Sans EXT';
    src: url('fonts/font/AdelleSansEXT-Bold.woff2') format('woff2'),
         url('fonts/font/AdelleSansEXT-Bold.woff') format('woff'),
         url('fonts/font/AdelleSansEXT-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adelle Sans EXT';
    src: url('fonts/font/AdelleSansEXT-Extrabold.woff2') format('woff2'),
         url('fonts/font/AdelleSansEXT-Extrabold.woff') format('woff'),
         url('fonts/font/AdelleSansEXT-Extrabold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adelle Sans EXT';
    src: url('fonts/font/AdelleSansEXT-Heavy.woff2') format('woff2'),
         url('fonts/font/AdelleSansEXT-Heavy.woff') format('woff'),
         url('fonts/font/AdelleSansEXT-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* --- Brand Palette & Variables --- */
:root {
    --color-dark: #2F2B29;              /* Base Dark Espresso Background */
    --color-orange: #F26430;            /* Brand Accent Orange */
    --color-green: #A6D49E;             /* Brand Accent Green */
    --color-light: #F9FBFF;             /* Primary Text Light */
    --color-muted: #A39F9C;             /* Soft Muted Text */
    --color-body-text: #D6D2CE;         /* Body Text */
    --color-tag-bg: #524E4B;            /* Tag Chip Background */
    
    --gradient-subtle: radial-gradient(circle at 50% 40%, rgba(242, 100, 48, 0.08) 0%, rgba(47, 43, 41, 1) 75%);
    --gradient-button: linear-gradient(135deg, #F26430 0%, #d45224 100%);

    --font-primary: 'Adelle Sans EXT', system-ui, -apple-system, sans-serif;
    
    --border-light: rgba(249, 251, 255, 0.08);
    --border-orange: #F26430;
    
    --transition-fast: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    background-color: var(--color-dark);
    color: var(--color-light);
    font-family: var(--font-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
}

body {
    min-height: 100vh;
    background-color: var(--color-dark);
    position: relative;
    overflow-x: hidden;
    letter-spacing: 0.015em;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* --- Cursor Glow Spotlight --- */
.cursor-glow {
    position: fixed;
    top: 0;
    right: 0;
    width: 450px;
    height: 450px;
    margin-right: -225px;
    margin-top: -225px;
    background: radial-gradient(circle, rgba(242, 100, 48, 0.08) 0%, rgba(47, 43, 41, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.15s ease-out;
}

/* --- Header Navigation --- */
.site-header {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: background-color 0.3s ease, padding 0.3s ease, border-bottom 0.3s ease;
}

.site-header.scrolled {
    padding: 1rem 0;
    background-color: rgba(47, 43, 41, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
}

.brand-logo-wrap {
    display: flex;
    align-items: center;
}

.brand-logo-img {
    height: 67px;
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-fast);
}

.brand-logo-wrap:hover .brand-logo-img {
    transform: scale(1.06);
}

.desktop-nav {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

.nav-link {
    font-size: 0.98rem;
    font-weight: 600;
    color: rgba(249, 251, 255, 0.75);
    position: relative;
    padding: 0.4rem 0;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0%;
    height: 2px;
    background: var(--color-orange);
    border-radius: 2px;
    transition: width var(--transition-fast);
}

.nav-link:hover, 
.nav-link.active,
.nav-item:hover .nav-link {
    color: var(--color-light);
}

.nav-link:hover::after, 
.nav-link.active::after,
.nav-item:hover .nav-link::after {
    width: 100%;
}

.nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.nav-item.has-dropdown {
    padding: 0.5rem 0;
}

.nav-caret {
    font-size: 0.72rem;
    color: var(--color-muted);
    transition: transform var(--transition-fast), color var(--transition-fast);
    margin-right: 0.15rem;
    cursor: pointer;
}

.nav-item:hover .nav-caret {
    transform: rotate(-180deg);
    color: var(--color-orange);
}

/* Dropdown Menu Container (Clean Luxury Minimalist) */
.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%) translateY(14px);
    width: 255px;
    background: rgba(26, 23, 22, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(249, 251, 255, 0.1);
    border-radius: 16px;
    padding: 0.5rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 100, 48, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s;
    z-index: 1100;
}

.nav-item:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(50%) translateY(2px);
}

.nav-dropdown-inner {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dropdown-link-item {
    display: block;
    padding: 0.65rem 0.95rem;
    border-radius: 10px;
    background: transparent;
    color: rgba(249, 251, 255, 0.8);
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: right;
}

.dropdown-link-item:hover {
    background: rgba(242, 100, 48, 0.12);
    color: var(--color-orange);
    transform: translateX(-4px);
}

.dropdown-link-item.active {
    color: var(--color-orange);
    background: rgba(242, 100, 48, 0.08);
}

/* Mobile Nav Dropdown */
.mobile-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.mobile-sub-menu {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.6rem 0 1rem 0;
}

.mobile-sub-menu.is-open {
    display: flex;
}

.mobile-sub-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(249, 251, 255, 0.7);
    transition: color 0.2s ease;
}

.mobile-sub-link:hover,
.mobile-sub-link.active {
    color: var(--color-orange);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.6rem;
    border-radius: 99px;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    text-decoration: none;
    transition: all var(--transition-smooth);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.btn-primary {
    background: var(--gradient-button);
    color: #ffffff;
    box-shadow: 0 8px 25px rgba(242, 100, 48, 0.25);
    border: 1px solid rgba(242, 100, 48, 0.4);
}

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

.btn-secondary {
    background: rgba(249, 251, 255, 0.05);
    color: rgba(249, 251, 255, 0.85);
    border: 1px solid rgba(249, 251, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: rgba(249, 251, 255, 0.1);
    color: #ffffff;
    border-color: rgba(242, 100, 48, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.btn-secondary:active {
    transform: translateY(0);
}

.btn-large {
    padding: 0.95rem 2.4rem;
    font-size: 1rem;
}

.btn-full {
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(249, 251, 255, 0.05);
    border: 1px solid var(--border-light);
}

.hamburger-bar {
    width: 20px;
    height: 2px;
    background-color: var(--color-light);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Mobile Menu Drawer & Overlay --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(30, 27, 26, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    justify-content: center;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu-inner {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 1.5rem 1.75rem 3rem 1.75rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-sizing: border-box;
    transform: translateY(-12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-overlay.active .mobile-menu-inner {
    transform: translateY(0);
}

.mobile-menu-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(249, 251, 255, 0.1);
}

.mobile-brand-logo {
    height: 46px;
    width: auto;
    max-width: 150px;
    max-height: 50px;
    object-fit: contain;
    display: block;
}

.mobile-menu-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-light);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.mobile-menu-close:hover,
.mobile-menu-close:active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #fff;
    transform: rotate(-90deg);
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.mobile-nav-item-wrap {
    width: 100%;
}

.mobile-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-light);
    text-decoration: none;
    border-radius: 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    transition: all var(--transition-fast);
}

.mobile-nav-item:hover,
.mobile-nav-item.active {
    background: rgba(242, 100, 48, 0.12);
    color: var(--color-orange);
}

.mobile-dropdown-toggle .nav-caret {
    font-size: 1rem;
    transition: transform 0.3s ease;
    color: var(--color-muted);
}

.mobile-sub-menu {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem 1.25rem 0.5rem 0.5rem;
    margin-top: 0.25rem;
    border-right: 2px solid rgba(242, 100, 48, 0.3);
    margin-right: 1rem;
}

.mobile-sub-menu.is-open {
    display: flex;
}

.mobile-sub-link {
    display: block;
    padding: 0.6rem 0.85rem;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    border-radius: 8px;
    transition: all var(--transition-fast);
}

.mobile-sub-link:hover,
.mobile-sub-link.active {
    color: var(--color-orange);
    background: rgba(255, 255, 255, 0.05);
    padding-right: 1.1rem;
}

.mobile-cta-wrap {
    margin-top: auto;
    padding-top: 1.5rem;
    width: 100%;
}

.mobile-cta-wrap .btn {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
}

/* --- Hero Section --- */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: var(--color-dark);
}

#hero-canvas {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-subtle-overlay {
    display: none;
}

.hero-container {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    width: 100%;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pour-headline-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Held transparent so the raw text is never painted before the pour
   animation has positioned its characters. hero.js adds .is-ready, and
   an inline timer in index.html does the same if hero.js never runs. */
.pour-headline {
    opacity: 0;
    transition: opacity .18s ease;
}

.pour-headline.is-ready {
    opacity: 1;
}

.pour-headline {
    font-family: var(--font-primary);
    font-size: clamp(3rem, 7.5vw, 6.8rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.02em;
    color: var(--color-light);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.6rem;
    column-gap: clamp(1.2rem, 3vw, 2.5rem);
    user-select: none;
}

.pour-word {
    display: inline-flex;
    white-space: nowrap;
    gap: 0.02em;
}

.pour-char {
    display: inline-block;
    position: relative;
    transform-origin: center center;
    will-change: transform, opacity;
    padding: 0 0.015em;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.pour-char:hover {
    color: var(--color-light);
    transform: scale(1.15) translateY(-5px) !important;
    text-shadow: 0 0 30px rgba(242, 100, 48, 0.6);
}

/* ==========================================================================
   SERVICES PINNED SECTION
   ========================================================================== */
.services-pinned-section {
    position: relative;
    width: 100%;
    background-color: var(--color-dark);
    z-index: 10;
}

.services-pinned-sticky-wrapper {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.services-pinned-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
}

.services-left-col {
    display: flex;
    flex-direction: column;
}

.pinned-text-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.small-eyebrow-text {
    font-size: clamp(1.1rem, 1.4vw, 1.5rem);
    font-weight: 700;
    color: var(--color-light);
    margin-bottom: 1rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    opacity: 0.85;
}

.big-main-headline {
    font-family: var(--font-primary);
    font-size: clamp(3.8rem, 5.8vw, 6.2rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0.01em;
    color: var(--color-light);
}

.services-right-stage {
    position: relative;
    width: 100%;
    height: 360px;
}

.service-deck-card {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    will-change: transform, opacity;
    background: transparent !important;
    border: none !important;
}

.service-deck-card.active-card {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Card Border Frame - Sleek Compact Proportions */
.card-border-frame {
    background: linear-gradient(-145deg, rgba(47, 43, 41, 0.95) 0%, rgba(36, 32, 30, 0.95) 100%);
    border: 1.5px solid rgba(242, 100, 48, 0.4);
    border-radius: 20px;
    padding: 1.6rem 1.85rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.service-deck-card:hover .card-border-frame {
    border-color: rgba(242, 100, 48, 0.7);
    box-shadow: 0 16px 36px rgba(242, 100, 48, 0.15);
}

.card-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.card-title {
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--color-light);
    line-height: 1.2;
}

.card-svg-wrap {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: transform var(--transition-fast);
}

.service-deck-card:hover .card-svg-wrap {
    transform: scale(1.08) rotate(-4deg);
}

.service-svg-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent !important;
    image-rendering: -webkit-optimize-contrast;
}

.card-desc {
    font-size: 0.88rem;
    color: rgba(249, 251, 255, 0.72);
    line-height: 1.5;
    letter-spacing: 0.015em;
    margin-bottom: 0.6rem;
}

.card-tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.tag-chip {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.26rem 0.75rem;
    border-radius: 99px;
    background: rgba(249, 251, 255, 0.05);
    border: 1px solid rgba(249, 251, 255, 0.08);
    color: rgba(249, 251, 255, 0.85);
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.service-deck-card:hover .tag-chip {
    background: rgba(249, 251, 255, 0.09);
    border-color: rgba(249, 251, 255, 0.15);
    color: #ffffff;
}

.card-cta-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.35rem;
}

.card-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 1.4rem;
    border-radius: 99px;
    background: rgba(242, 100, 48, 0.08);
    border: 1.2px solid rgba(242, 100, 48, 0.5);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: all var(--transition-fast);
}

.card-readmore-btn i {
    font-size: 0.95rem;
    transition: transform var(--transition-fast);
}

.card-readmore-btn:hover {
    background: var(--color-orange);
    color: #ffffff;
    border-color: var(--color-orange);
    box-shadow: 0 6px 20px rgba(242, 100, 48, 0.35);
    transform: translateY(-2px);
}

.card-readmore-btn:hover i {
    transform: translate(-2px, -2px);
}

/* ==========================================================================
   ABOUT SECTION (HORIZONTAL 2-BOX SLIDER)
   ========================================================================== */
.about-horizontal-section {
    position: relative;
    width: 100%;
    background-color: var(--color-dark);
    z-index: 10;
}

.about-horizontal-wrapper {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
}

/* Top Header */
.about-header-top {
    text-align: center;
    margin-bottom: 1.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-main-title {
    font-family: var(--font-primary);
    font-size: clamp(2.8rem, 4.8vw, 5.2rem);
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--color-light);
    margin-bottom: 1rem;
    line-height: 1.15;
}

/* Progress Dots Indicator */
.about-slide-indicator {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.about-dot {
    width: 32px;
    height: 4px;
    border-radius: 4px;
    background: rgba(249, 251, 255, 0.15);
    transition: background 0.3s ease, width 0.3s ease;
    cursor: pointer;
}

.about-dot.active {
    background: var(--color-orange);
    width: 48px;
}

/* Stage & Sliding Track */
.about-slider-stage {
    position: relative;
    width: 100%;
    max-width: 1220px;
    height: 540px;
    padding: 10px 0;
    overflow: hidden;
}

.about-horizontal-track {
    display: flex;
    width: 200%;
    height: 100%;
    will-change: transform;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-slide-box {
    width: 50%;
    height: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
}

/* Box Frame - Transparent Background Matching Site Exactly */
.about-box-frame {
    background: var(--color-dark);
    border: 2px solid var(--border-orange);
    border-radius: 28px;
    padding: 3rem 3.4rem;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 3.2rem;
    align-items: center;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.about-box-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.about-box-img {
    width: 100%;
    max-width: 210px;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    transition: transform var(--transition-smooth);
}

.about-slide-box:hover .about-box-img {
    transform: scale(1.04);
}

.about-box-content {
    display: flex;
    flex-direction: column;
}

.about-box-title {
    font-size: clamp(1.9rem, 2.4vw, 2.3rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--color-light);
}

.about-box-text p {
    font-size: 1.04rem;
    color: var(--color-body-text);
    line-height: 1.78;
    letter-spacing: 0.015em;
    margin-bottom: 0.9rem;
}

.about-box-text p:last-child {
    margin-bottom: 0;
}

.about-sub-block {
    margin-bottom: 1.4rem;
}

.about-sub-block:last-child {
    margin-bottom: 0;
}

.about-sub-desc {
    font-size: 1.04rem;
    color: var(--color-body-text);
    line-height: 1.75;
    letter-spacing: 0.015em;
}

/* ==========================================================================
   PRE-PORTFOLIO KINETIC MAGNETIC PORTAL SECTION
   ========================================================================== */
.kinetic-portal-section {
    position: relative;
    width: 100%;
    padding: 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;
}

.portal-ambient-glow {
    display: none;
}

/* Kinetic Marquee Rows */
.portal-marquee-row {
    position: relative;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding: 1.2rem 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.4rem, 4.5vw, 4.2rem);
    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(--color-light);
}

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

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

.magnetic-orb-btn {
    position: relative;
    width: 210px;
    height: 210px;
    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;
    transition: box-shadow 0.3s ease;
}

.magnetic-orb-btn:hover {
    box-shadow: 0 0 70px rgba(242, 100, 48, 0.8), inset 0 2px 15px rgba(255, 255, 255, 0.6);
}

.orb-rotating-ring {
    position: absolute;
    top: -14px;
    right: -14px;
    left: -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.6rem, 2.2vw, 1.95rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
}

/* ==========================================================================
   SECTION 4: KINETIC LETTER ASSEMBLER PORTFOLIO ("PORTFOLIO")
   ========================================================================== */
.portfolio-kinetic-section {
    position: relative;
    width: 100%;
    padding: 9rem 1.5rem 10rem 1.5rem;
    background-color: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    overflow: clip;
}

.portfolio-kinetic-container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.portfolio-meta-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.portfolio-eyebrow-tag {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.portfolio-success-title {
    font-family: var(--font-primary);
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.01em;
}

/* Giant Kinetic Letters Arena */
.kinetic-portfolio-stage {
    width: 100%;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 2.5rem 0;
    overflow: visible;
    text-decoration: none;
    cursor: pointer;
}

.kinetic-letters-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
    user-select: none;
    width: 100%;
    overflow: visible;
    padding: 0 1rem;
    box-sizing: border-box;
}

.kinetic-letter {
    font-family: var(--font-primary);
    /* Auto-fit: 90vw divided by ~5.55 (total width ratio of 'PORTFOLIO') */
    font-size: clamp(3.2rem, calc((90vw - 2rem) / 5.55), 12.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.04em;
    display: inline-block;
    color: #ffffff;
    padding: 0;
    overflow: visible;
    will-change: transform, opacity;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.25s ease;
    flex-shrink: 1;
    min-width: 0;
}

.kinetic-letter:hover {
    transform: translateY(-15px) scale(1.12);
    color: #ffffff;
    text-shadow: 0 15px 35px rgba(242, 100, 48, 0.65);
}

.portfolio-action-wrap {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* ==========================================================================
   SECTION 5: MINIMALIST VISUAL ROADMAP ("FROM HELLO TO LAUNCH")
   ========================================================================== */
.roadmap-section {
    position: relative;
    width: 100%;
    padding: 6rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.roadmap-container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}

.roadmap-frame {
    background: transparent;
    padding: 2rem 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.roadmap-header {
    text-align: center;
}

.roadmap-title {
    font-family: var(--font-primary);
    font-size: clamp(2.8rem, 4.8vw, 5.2rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--color-light);
    margin-bottom: 0.6rem;
}

.roadmap-sub {
    font-size: 1.15rem;
    color: var(--color-body-text);
    letter-spacing: 0.015em;
}

/* Connected Visual Pathway */
.roadmap-pathway-wrapper {
    position: relative;
    width: 100%;
    padding: 2rem 0;
}

/* Glowing Laser Connection Line */
.roadmap-laser-line {
    position: absolute;
    top: 30px;
    right: 8.33%;
    left: 8.33%;
    height: 3px;
    background: rgba(249, 251, 255, 0.12);
    border-radius: 3px;
    z-index: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.laser-moving-bead {
    position: absolute;
    top: -4.5px;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-orange);
    box-shadow: 0 0 16px var(--color-orange);
    animation: travelRoadmap 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    will-change: transform;
}

@keyframes travelRoadmap {
    0% { transform: translateX(0) scale(1); }
    50% { transform: translateX(min(1100px, 80vw)) scale(1.4); }
    100% { transform: translateX(0) scale(1); }
}

/* 6 Milestone Stations */
.roadmap-stations-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.2rem;
}

/* Hide the connecting laser line on mobile where layout changes */
@media (max-width: 768px) {
    .roadmap-laser-line {
        display: none;
    }
}

.roadmap-station {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.roadmap-station:hover {
    transform: translateY(-6px);
}

/* Circular Node Checkpoint (Solid opaque to hide connecting line behind) */
.station-node {
    position: relative;
    z-index: 5;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #2F2B29;
    border: 2px solid var(--border-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
    transition: all 0.35s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.station-num {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-light);
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

.station-glow-ring {
    position: absolute;
    top: -8px;
    right: -8px;
    left: -8px;
    bottom: -8px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    transition: all 0.35s ease;
}

.station-node.node-green {
    border-color: var(--color-green);
}

.roadmap-station:hover .station-node,
.roadmap-station.active-station .station-node {
    transform: scale(1.15);
    background: var(--color-orange);
    box-shadow: 0 0 25px rgba(242, 100, 48, 0.7);
}

.roadmap-station:hover .station-node.node-green,
.roadmap-station.active-station .station-node.node-green {
    background: var(--color-green);
    box-shadow: 0 0 25px rgba(166, 212, 158, 0.7);
}

.roadmap-station:hover .station-num,
.roadmap-station.active-station .station-num {
    color: #ffffff;
}

.roadmap-station:hover .station-glow-ring,
.roadmap-station.active-station .station-glow-ring {
    border-color: rgba(242, 100, 48, 0.5);
    animation: stationRing 2s infinite ease-out;
}

@keyframes stationRing {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

.station-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.station-phase {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--color-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.roadmap-station:hover .station-phase,
.roadmap-station.active-station .station-phase {
    color: var(--color-orange);
}

.station-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-light);
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   SECTION 6: PERFECT SQUARE EDITORIAL CARDS (1:1 RATIO)
   ========================================================================== */
.blog-section {
    position: relative;
    width: 100%;
    padding: 6rem 2rem 7rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.blog-container {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}

.magazine-header-minimal {
    text-align: center;
    margin-bottom: 3.5rem;
}

.magazine-header-minimal .blog-main-title {
    font-family: var(--font-primary);
    font-size: clamp(2.2rem, 3.4vw, 3.4rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: var(--color-light);
    max-width: 820px;
    margin: 0 auto;
}

.magazine-minimal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
}

/* Entire Box is a Strict Square (1:1 Ratio) */
.magazine-cover-card {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: var(--color-dark);
    border: 2px solid var(--border-orange);
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.4s ease;
}

.magazine-cover-card:hover {
    transform: translateY(-8px);
    border-color: #ffffff;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.45);
}

.magazine-cover-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Image fills top 52% of the square */
.magazine-cover-img-wrap {
    position: relative;
    width: 100%;
    height: 52%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.magazine-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.magazine-cover-card:hover .magazine-cover-img {
    transform: scale(1.08);
}

/* Caption fills remaining 48% of the square */
.magazine-cover-caption {
    width: 100%;
    height: 48%;
    padding: 1.2rem 1.6rem 1.3rem 1.6rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.magazine-meta-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.magazine-cat-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-orange);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.magazine-read-time {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}

.magazine-cover-headline {
    font-family: var(--font-primary);
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--color-light);
    line-height: 1.35;
    letter-spacing: 0.01em;
    margin: 0.2rem 0;
}

/* Bottom Action Bar with Arrow Pill */
.magazine-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(249, 251, 255, 0.08);
}

.magazine-read-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-muted);
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

.magazine-arrow-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(249, 251, 255, 0.05);
    border: 1px solid rgba(249, 251, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: var(--color-light);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.magazine-cover-card:hover .magazine-read-text {
    color: var(--color-light);
}

.magazine-cover-card:hover .magazine-arrow-circle {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #ffffff;
    transform: translate(-2px, -2px) scale(1.08);
}

.blog-top-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.blog-read-time {
    font-size: 0.84rem;
    color: var(--color-muted);
    font-weight: 600;
}

.blog-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--color-light);
    line-height: 1.35;
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
}

.blog-snippet {
    font-size: 0.96rem;
    color: var(--color-body-text);
    line-height: 1.7;
    margin-bottom: 2rem;
}

.blog-footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(249, 251, 255, 0.08);
}

.blog-read-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-light);
    letter-spacing: 0.02em;
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.blog-read-link:hover {
    color: var(--color-orange);
    gap: 0.6rem;
}

/* ==========================================================================
   SECTION 7: MINIMALIST INTERACTIVE MAGNETIC PULSE PORTAL CTA
   ========================================================================== */
.cta-pulse-section {
    position: relative;
    width: 100%;
    padding: 8rem 2rem 9rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta-pulse-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.cta-pulse-portal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 3rem;
    cursor: pointer;
    width: 100%;
}

/* Concentric Breathing Wave Rings */
.pulse-ring {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(242, 100, 48, 0.25);
    pointer-events: none;
    transition: border-color 0.4s ease;
}

.ring-1 {
    width: 250px;
    height: 250px;
    animation: pulseRadarWave 3.6s infinite ease-in-out;
}

.ring-2 {
    width: 370px;
    height: 370px;
    animation: pulseRadarWave 3.6s infinite ease-in-out 0.9s;
    border-color: rgba(242, 100, 48, 0.18);
}

.ring-3 {
    width: 500px;
    height: 500px;
    animation: pulseRadarWave 3.6s infinite ease-in-out 1.8s;
    border-color: rgba(242, 100, 48, 0.1);
}

@keyframes pulseRadarWave {
    0%, 100% {
        transform: translate(50%, -50%) scale(0.92);
        opacity: 0.25;
    }
    50% {
        transform: translate(50%, -50%) scale(1.08);
        opacity: 0.7;
    }
}

.cta-pulse-portal:hover .pulse-ring {
    border-color: rgba(242, 100, 48, 0.5);
}

/* Center Interactive Magnetic Core Orb with LET'S TALK */
.pulse-core-orb {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--gradient-button);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 60px rgba(242, 100, 48, 0.55), inset 0 0 20px rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.4);
    margin: 0;
    z-index: 5;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.cta-pulse-portal:hover .pulse-core-orb {
    box-shadow: 0 0 85px rgba(242, 100, 48, 0.85), inset 0 0 25px rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.pulse-orb-text {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    user-select: none;
    -webkit-user-select: none;
}

/* ==========================================================================
   SITE FOOTER (COMPACT, NEAT & CLEAN 3-COLUMN COMPOSITION)
   ========================================================================== */
.site-footer {
    position: relative;
    width: 100%;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(249, 251, 255, 0.08);
    z-index: 10;
}

.footer-compact-wrap {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    padding: 4.5rem 2rem 2.5rem 2rem;
}

.footer-compact-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.35fr;
    gap: 4.5rem;
    align-items: start;
}

/* Col 1: Brand & Socials */
.footer-compact-col.footer-col-brand {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.footer-logo-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.footer-logo-link:hover {
    transform: translateY(-2px);
}

.footer-compact-logo {
    height: 76px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.footer-follow-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-compact-label {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.footer-social-icons-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.compact-social-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(249, 251, 255, 0.05);
    border: 1px solid rgba(249, 251, 255, 0.1);
    color: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.compact-social-btn:hover {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: #1F1C1B;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(166, 212, 158, 0.4);
}

/* Col 2 & 3: Titles & Links */
.footer-compact-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
    margin-bottom: 1.2rem;
}

.footer-compact-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.footer-compact-links li a {
    font-family: var(--font-primary);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-body-text);
    text-decoration: none;
    transition: color 0.25s ease, transform 0.25s ease;
    display: inline-block;
}

.footer-compact-links li a:hover {
    color: var(--color-orange);
    transform: translateX(-4px);
}

/* Col 3: Contact Items with Icons */
.footer-contact-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.footer-contact-items li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-primary);
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--color-body-text);
}

.footer-contact-items li.contact-item-address {
    align-items: flex-start;
    line-height: 1.5;
}

.footer-contact-items li i {
    color: var(--color-orange);
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.footer-contact-items li a {
    color: var(--color-light);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-contact-items li a:hover {
    color: var(--color-orange);
}

/* Bottom Sub-Bar */
.footer-compact-bottom {
    margin-top: 3.5rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    text-align: center;
}

.footer-compact-bottom p {
    font-family: var(--font-primary);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-muted);
    letter-spacing: 0.02em;
}

/* Responsive Rules */
@media (max-width: 1024px) {
    .header-container {
        justify-content: space-between;
        gap: 1.5rem;
        padding: 0 1.5rem;
    }
    .brand-logo-img {
        height: 48px;
        max-width: 140px;
    }
    .desktop-nav,
    .header-actions .btn {
        display: none;
    }

    /* stack them side by side; the container is display:block by default here,
       which dropped both children at the same x and made them overlap */
    .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Get Quote is the one action worth keeping in the mobile bar.
       It used to live only inside the burger menu, which left ~237px of
       dead space between the logo and the toggle and no CTA at all above
       the fold. Compact pill so it never competes with the toggle. */
    /* وسط‌چین نسبت به کل نوار، نه چسبیده به همبرگر — ترکیب‌بندی متعادل‌تری
       می‌دهد: لوگو چپ، CTA وسط، منو راست. از جریان flex بیرون کشیده می‌شود
       تا واقعا وسط ویوپورت بنشیند و نه وسط فضای باقیمانده. */
    .header-container {
        position: relative;
    }

    .header-actions .get-quote-btn {
        position: absolute;
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        display: inline-flex;
        align-items: center;
        gap: 0;
        padding: 9px 17px;
        font-size: 13px;
        line-height: 1;
        border-radius: 999px;
        white-space: nowrap;
    }

    /* the arrow only adds width at this size */
    .header-actions .get-quote-btn i {
        display: none;
    }
    .mobile-menu-toggle {
        display: flex;
    }
    .services-pinned-sticky-wrapper {
        height: auto;
        padding: 6rem 0;
    }
    .services-pinned-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 0 1.5rem;
    }
    .services-right-stage {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    .service-deck-card {
        position: static;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        height: auto;
    }
    .about-horizontal-wrapper {
        height: auto;
        padding: 6rem 1.5rem;
    }
    .about-slider-stage {
        height: auto;
        overflow: visible;
    }
    .about-horizontal-track {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 2.5rem;
        transform: none !important;
    }
    .about-slide-box {
        width: 100%;
        padding: 0;
    }
    .about-box-frame {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.5rem 1.8rem;
    }
    .kinetic-portal-frame {
        height: 420px;
    }
    .magnetic-orb-btn {
        width: 170px;
        height: 170px;
    }
    .orb-main-text {
        font-size: 1.15rem;
    }
    .roadmap-stations-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1.5rem;
        min-width: unset;
    }
    .roadmap-pathway-wrapper {
        padding: 1rem 0;
    }
    .magazine-minimal-grid {
        grid-template-columns: 1fr;
        gap: 2.2rem;
    }
    .cta-fluid-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem;
    }
    .portfolio-showcase-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .footer-compact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 680px) {
    .footer-compact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    /* Roadmap: 2 columns on small phones */
    .roadmap-stations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem 1.2rem;
    }
    .station-title {
        font-size: 0.92rem;
    }
    .station-phase {
        font-size: 0.68rem;
    }
    /* Portfolio section padding */
    .portfolio-kinetic-section {
        padding: 6rem 1rem 7rem 1rem;
    }
    .roadmap-section {
        padding: 5rem 1.2rem;
    }
    .roadmap-title {
        font-size: clamp(2rem, 7vw, 3rem);
    }
}

/* ==========================================================================
   DEDICATED COMPACT SERVICES PAGE STYLES (3 COLUMNS)
   ========================================================================== */
.services-compact-hero {
    position: relative;
    width: 100%;
    padding: 10.5rem 2rem 3rem 2rem;
    background-color: var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
}

.services-compact-container {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.services-compact-title {
    font-family: var(--font-primary);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.services-compact-sub {
    font-size: 1.08rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.6;
    max-width: 620px;
}

/* 3-Column Services Grid Section */
.services-grid-section {
    position: relative;
    width: 100%;
    padding: 1.5rem 2rem 7.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.services-grid-container.grid-3-cols {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
}

.service-compact-card {
    border-radius: 24px;
    background: rgba(249, 251, 255, 0.025);
    border: 1px solid rgba(249, 251, 255, 0.08);
    padding: 1.6rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.service-compact-card:hover {
    transform: translateY(-8px);
    border-color: rgba(242, 100, 48, 0.45);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Large, Prominent Artwork Frame on Top */
.compact-card-art-hero {
    width: 100%;
    aspect-ratio: 16 / 10.5;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1716;
    border: 1px solid rgba(249, 251, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    box-sizing: border-box;
}

.compact-art-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-compact-card:hover .compact-art-img {
    transform: scale(1.08);
}

.compact-card-body {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    flex-grow: 1;
}

.compact-service-title {
    font-family: var(--font-primary);
    font-size: 1.45rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
}

.compact-subtitles-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subservice-pill {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-body-text);
    background: rgba(249, 251, 255, 0.02);
    border: 1px solid rgba(249, 251, 255, 0.06);
    padding: 0.45rem 0.85rem;
    border-radius: 10px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.service-compact-card:hover .subservice-pill {
    background: rgba(242, 100, 48, 0.07);
    border-color: rgba(242, 100, 48, 0.25);
    color: #ffffff;
}

.subservice-pill i {
    color: var(--color-green);
    font-size: 0.95rem;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.25s ease;
}

.compact-card-cta {
    margin-top: auto;
    padding-top: 0.4rem;
}

.compact-readmore-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-orange);
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}

.compact-readmore-link:hover {
    gap: 0.75rem;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 1100px) {
    .services-grid-container.grid-3-cols {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 720px) {
    .services-grid-container.grid-3-cols {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .services-compact-hero {
        padding: 8.5rem 1.5rem 2rem 1.5rem;
    }
    .service-compact-card {
        padding: 1.4rem;
    }
}

/* FAQ Section */
.services-faq-section {
    position: relative;
    width: 100%;
    padding: 7rem 2rem 8.5rem 2rem;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    z-index: 10;
}

.services-faq-container {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.faq-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.faq-eyebrow {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.faq-title {
    font-family: var(--font-primary);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

.faq-sub {
    font-size: 1.05rem;
    color: var(--color-body-text);
}

.faq-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.faq-accordion-item {
    border-radius: 18px;
    background: rgba(249, 251, 255, 0.02);
    border: 1px solid rgba(249, 251, 255, 0.08);
    overflow: hidden;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.faq-accordion-item.open {
    border-color: rgba(242, 100, 48, 0.35);
    background: rgba(249, 251, 255, 0.035);
}

.faq-accordion-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
    gap: 1.5rem;
}

.faq-accordion-btn i {
    font-size: 1.3rem;
    color: var(--color-orange);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-accordion-item.open .faq-accordion-btn i {
    transform: rotate(-45deg);
}

.faq-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
    padding: 0 2rem;
}

.faq-accordion-item.open .faq-accordion-content {
    max-height: 300px;
    padding: 0 2rem 1.6rem 2rem;
}

.faq-accordion-content p {
    font-size: 0.98rem;
    color: var(--color-body-text);
    line-height: 1.7;
}

/* ==========================================================================
   DEDICATED ABOUT US PAGE STYLES (3-BOX CIRCUIT & TEAM)
   ========================================================================== */
.about-hero-section {
    position: relative;
    width: 100%;
    padding: 10.5rem 2rem 3rem 2rem;
    background-color: var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
}

.about-hero-container {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
}

.about-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* 3-Box Circuit Container */
.about-circuit-section {
    position: relative;
    width: 100%;
    padding: 2rem 2rem 6rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.about-circuit-container {
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
    position: relative;
}

/* Dynamic Circuit SVG Canvas (Physically connected from box edge to box edge) */
.circuit-dynamic-canvas {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}

.circuit-glow-node {
    filter: drop-shadow(0 0 8px rgba(242, 100, 48, 0.95));
}

.circuit-box-wrapper {
    width: 100%;
    display: flex;
    position: relative;
    z-index: 2;
}

.circuit-box-wrapper.wrapper-left {
    justify-content: flex-start;
}

.circuit-box-wrapper.wrapper-right {
    justify-content: flex-end;
}

.circuit-card {
    max-width: 960px;
    width: 100%;
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 26px;
    padding: 3rem;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 3.2rem;
    align-items: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.circuit-card:hover {
    border-color: rgba(242, 100, 48, 0.45);
    box-shadow: 0 25px 65px rgba(242, 100, 48, 0.12);
}

.circuit-card-visual {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circuit-visual-img {
    width: 100%;
    max-height: 330px;
    object-fit: contain;
}

.values-img-contain {
    max-height: 375px;
    object-fit: contain;
}

.circuit-card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.circuit-title-orange {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-orange);
    line-height: 1.15;
}

.circuit-title-brand-green {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--color-green);
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

.circuit-body-text {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.circuit-body-text p,
.circuit-sub-desc {
    font-size: 0.98rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.7;
}

.circuit-sub-block {
    margin-bottom: 1.4rem;
}

.circuit-sub-block:last-child {
    margin-bottom: 0;
}

.circuit-values-list {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin-top: 0.3rem;
}

.value-item-row {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.value-item-brand-green {
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-green);
}

.value-item-text {
    font-size: 0.95rem;
    color: var(--color-body-text);
    line-height: 1.55;
}

/* Our Team Section - Modern High-End Editorial Layout */
.about-team-section {
    position: relative;
    width: 100%;
    padding: 6.5rem 2rem 7.5rem 2rem;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    z-index: 10;
}

.about-team-container {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.about-team-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.team-section-eyebrow {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.about-team-main-title {
    font-family: var(--font-primary);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
}

.about-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.8rem;
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    align-items: stretch;
}

.team-modern-card {
    border-radius: 20px;
    background: rgba(249, 251, 255, 0.02);
    border: 1px solid rgba(249, 251, 255, 0.07);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.team-modern-card:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 100, 48, 0.4);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.team-modern-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: #161413;
}

.team-modern-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 15%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-modern-card:hover .team-modern-photo {
    transform: scale(1.05);
}

.team-modern-meta {
    padding: 1.4rem 1.25rem 1.6rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: #1a1716;
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    flex-grow: 1;
    justify-content: flex-start;
    min-height: 105px;
    text-align: right;
}

.team-modern-name {
    font-family: var(--font-primary);
    font-size: 1.22rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.team-modern-role {
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-green);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 1100px) {
    .circuit-card {
        grid-template-columns: 1fr;
        padding: 2.2rem;
        gap: 2rem;
    }
    .circuit-visual-img,
    .values-img-contain {
        max-height: 220px;
    }
    .about-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 720px) {
    .about-team-grid {
        grid-template-columns: 1fr;
    }
    .circuit-dynamic-canvas {
        display: none;
    }
    .about-circuit-container {
        gap: 2rem;
    }
    .about-hero-section {
        padding: 8.5rem 1.5rem 2rem 1.5rem;
    }
}

/* ==========================================================================
   DEDICATED CONTACT US PAGE STYLES (MINIMALIST & COMPACT)
   ========================================================================== */
.contact-hero-section {
    position: relative;
    width: 100%;
    padding: 10.5rem 2rem 2.5rem 2rem;
    background-color: var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
}

.contact-hero-container {
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Compact Main Section */
.contact-compact-section {
    position: relative;
    width: 100%;
    padding: 1.5rem 2rem 6.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.contact-compact-container {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 2.5rem;
    align-items: stretch;
}

/* Left: Details Card */
.contact-details-box {
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 22px;
    padding: 2.5rem 2.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.details-box-title {
    font-family: var(--font-primary);
    font-size: 1.6rem;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 0.3rem;
}

.details-box-sub {
    font-size: 0.95rem;
    color: var(--color-body-text);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.details-items-list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.details-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.details-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(242, 100, 48, 0.1);
    border: 1px solid rgba(242, 100, 48, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-orange);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.details-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.details-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.details-val,
.details-link {
    font-size: 0.96rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    line-height: 1.5;
    transition: color 0.25s ease;
}

.details-link:hover {
    color: var(--color-orange);
}

/* Right: Simple Contact Form */
.contact-form-box {
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 22px;
    padding: 2.5rem 2.2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}

.simple-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.input-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.field-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ffffff;
}

.field-input,
.field-textarea {
    width: 100%;
    background: #131110;
    border: 1px solid rgba(249, 251, 255, 0.1);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-family: var(--font-primary);
    font-size: 0.94rem;
    color: #ffffff;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field-input:focus,
.field-textarea:focus {
    border-color: var(--color-orange);
    box-shadow: 0 0 10px rgba(242, 100, 48, 0.25);
}

.submit-wrap {
    margin-top: 0.4rem;
}

.btn-send-message {
    width: 100%;
    padding: 0.95rem 1.8rem;
    font-size: 1rem;
    justify-content: center;
    cursor: pointer;
}

/* Success Feedback */
.form-feedback-alert {
    display: none;
    align-items: center;
    gap: 1.2rem;
    background: rgba(166, 212, 158, 0.1);
    border: 1px solid var(--color-green);
    border-radius: 14px;
    padding: 1.8rem;
}

.form-feedback-alert i {
    font-size: 2.2rem;
    color: var(--color-green);
    flex-shrink: 0;
}

.form-feedback-alert h4 {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.form-feedback-alert p {
    font-size: 0.92rem;
    color: var(--color-body-text);
}

/* Contact Responsive */
@media (max-width: 900px) {
    .contact-compact-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
    .contact-details-box,
    .contact-form-box {
        padding: 1.8rem;
    }
    .contact-hero-section {
        padding: 8.5rem 1.5rem 2rem 1.5rem;
    }
}

/* ==========================================================================
   DEDICATED BLOG PAGE STYLES (EDITORIAL MAGAZINE & FILTER)
   ========================================================================== */
.blog-hero-section {
    position: relative;
    width: 100%;
    padding: 10.5rem 2rem 2.5rem 2rem;
    background-color: var(--color-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    text-align: center;
}

.blog-hero-container {
    max-width: 840px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-hero-eyebrow {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.blog-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 4.8vw, 4rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.blog-hero-sub {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.65;
    max-width: 660px;
}

/* Blog Grid Section */
.blog-grid-section {
    position: relative;
    width: 100%;
    padding: 2rem 2rem 6.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.blog-grid-container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.blog-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.filter-chip {
    padding: 0.6rem 1.3rem;
    border-radius: 99px;
    background: rgba(249, 251, 255, 0.035);
    border: 1px solid rgba(249, 251, 255, 0.1);
    font-family: var(--font-primary);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--color-body-text);
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
}

.filter-chip:hover {
    border-color: rgba(242, 100, 48, 0.4);
    color: #ffffff;
}

.filter-chip.active {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(242, 100, 48, 0.35);
}

.blog-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
}

.blog-card {
    border-radius: 22px;
    background: rgba(249, 251, 255, 0.025);
    border: 1px solid rgba(249, 251, 255, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(242, 100, 48, 0.45);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.blog-card-media {
    width: 100%;
    aspect-ratio: 16 / 10.5;
    overflow: hidden;
    position: relative;
    background: #161413;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.blog-card:hover .blog-card-img {
    transform: scale(1.06);
}

.blog-card-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(249, 251, 255, 0.18);
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    backdrop-filter: blur(8px);
    z-index: 2;
}

.blog-card-body {
    padding: 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex-grow: 1;
    justify-content: space-between;
    background: rgba(26, 23, 22, 0.6);
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-muted);
}

.meta-dot {
    color: var(--color-orange);
}

.blog-card-title {
    font-family: var(--font-primary);
    font-size: 1.28rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-card-title {
    color: var(--color-orange);
}

.blog-card-excerpt {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.6;
}

.blog-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    margin-top: 0.5rem;
}

.read-more-text {
    font-size: 0.86rem;
    font-weight: 700;
    color: #ffffff;
    transition: color 0.3s ease;
}

.blog-card:hover .read-more-text {
    color: var(--color-orange);
}

.blog-card-footer i {
    color: var(--color-orange);
    font-size: 1.15rem;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-footer i {
    transform: translate(-3px, -3px);
}

/* Blog Responsive */
@media (max-width: 1080px) {
    .blog-articles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.8rem;
    }
}

@media (max-width: 680px) {
    .blog-articles-grid {
        grid-template-columns: 1fr;
    }
    .blog-hero-section {
        padding: 8.5rem 1.5rem 2rem 1.5rem;
    }
}

/* ==========================================================================
   DEDICATED SINGLE SERVICE PAGES STYLES
   ========================================================================== */
/* All-Services Quick Switcher Tab Bar (Text-Only Clean Tabs) */
.services-top-tab-bar {
    position: relative;
    width: 100%;
    padding: 8.5rem 2rem 0.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.services-top-tab-container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.services-tab-track {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.45rem;
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 99px;
    box-shadow: none;
    overflow-x: auto;
    max-width: 100%;
}

.service-tab-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.3rem;
    border-radius: 99px;
    font-family: var(--font-primary);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-body-text);
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.service-tab-btn:hover {
    color: #ffffff;
    background: rgba(249, 251, 255, 0.08);
}

.service-tab-btn.active {
    background: rgba(242, 100, 48, 0.08);
    color: #ffffff;
    font-weight: 700;
    border: 1px solid var(--color-orange);
    box-shadow: none;
}

/* Service Hero Section */
.service-hero-section {
    position: relative;
    width: 100%;
    padding: 2.2rem 2rem 3rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.service-hero-container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
}

/* Unified Dark Glassmorphic Hero Container Box */
.service-hero-card-box {
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 26px;
    padding: 3.5rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem;
    align-items: center;
    box-shadow: none;
}

.service-hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.service-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.service-hero-tag-neutral {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-body-text);
    background: rgba(249, 251, 255, 0.05);
    border: 1px solid rgba(249, 251, 255, 0.12);
    padding: 0.4rem 0.9rem;
    border-radius: 99px;
}

.service-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.service-hero-description {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.75;
}

.service-hero-actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-top: 0.4rem;
}

.service-hero-visual {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-visual-inner {
    width: 100%;
    max-width: 440px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-visual-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Key Services Breakdown */
.service-breakdown-section {
    position: relative;
    width: 100%;
    padding: 4.5rem 2rem 6.5rem 2rem;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    z-index: 10;
}

.service-breakdown-container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.service-breakdown-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.breakdown-eyebrow {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.breakdown-main-title {
    font-family: var(--font-primary);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 900;
    color: #ffffff;
}

.service-breakdown-grid {
    display: grid;
    gap: 2rem;
}

.service-breakdown-grid.grid-4-items {
    grid-template-columns: repeat(2, 1fr);
}

.service-breakdown-grid.grid-5-items {
    grid-template-columns: repeat(2, 1fr);
}

.service-breakdown-grid.grid-6-items {
    grid-template-columns: repeat(2, 1fr);
}

/* Sub-Service Cards: Icon on Full Left + Text on Right */
.single-service-card {
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 22px;
    padding: 2.4rem 2.2rem;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 85px 1fr;
    gap: 1.8rem;
    align-items: center;
    box-shadow: none;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.single-service-card:hover {
    transform: translateY(-6px);
    border-color: rgba(242, 100, 48, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.service-card-icon-col {
    width: 85px;
    height: 85px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-large-svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.service-card-info-col {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.service-card-heading {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
}

.service-card-description {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.65;
}

/* Dedicated Minimalist Portfolio Banner Section */
.service-portfolio-teaser-section {
    position: relative;
    width: 100%;
    padding: 4.5rem 2rem 5.5rem 2rem;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    z-index: 10;
}

.service-portfolio-teaser-container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
}

.service-portfolio-minimal-card {
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 24px;
    padding: 4.5rem 3rem;
    text-align: center;
    box-shadow: none;
    transition: border-color 0.3s ease;
}

.service-portfolio-minimal-card:hover {
    border-color: rgba(242, 100, 48, 0.3);
}

.portfolio-minimal-content {
    max-width: 920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.portfolio-minimal-heading {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 2.6vw, 2.6rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

.portfolio-minimal-desc {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.7;
    margin-bottom: 0.6rem;
    max-width: 720px;
}

.portfolio-minimal-actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .portfolio-minimal-heading {
        white-space: normal;
        font-size: 1.75rem;
    }
}

@media (max-width: 680px) {
    .service-portfolio-minimal-card {
        padding: 3rem 1.8rem;
    }
}

/* Dedicated FAQ Section (Neutral When Open - No Orange Text) */
.service-faq-section {
    position: relative;
    width: 100%;
    padding: 4.5rem 2rem 6.5rem 2rem;
    background-color: var(--color-dark);
    border-top: 1px solid rgba(249, 251, 255, 0.06);
    z-index: 10;
}

.service-faq-container {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.service-faq-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.service-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.faq-item {
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item.active {
    border-color: rgba(249, 251, 255, 0.18);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.faq-question-btn {
    width: 100%;
    padding: 1.6rem 1.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    text-align: right;
}

.faq-q-text {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    transition: color 0.3s ease;
}

/* FAQ question remains crisp white when open - strictly NOT orange */
.faq-item.active .faq-q-text {
    color: #ffffff;
}

.faq-toggle-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(249, 251, 255, 0.05);
    border: 1px solid rgba(249, 251, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.faq-item.active .faq-toggle-icon {
    background: rgba(249, 251, 255, 0.12);
    border-color: rgba(249, 251, 255, 0.25);
    color: #ffffff;
    transform: rotate(-45deg);
}

.faq-answer-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    padding: 0 1.8rem;
}

.faq-item.active .faq-answer-panel {
    max-height: 300px;
    padding: 0 1.8rem 1.6rem 1.8rem;
}

.faq-a-text {
    font-size: 0.96rem;
    color: var(--color-body-text);
    line-height: 1.7;
}

/* Service Responsive */
@media (max-width: 1024px) {
    .service-hero-card-box {
        grid-template-columns: 1fr;
        padding: 2.5rem;
    }
    .service-breakdown-grid.grid-5-items,
    .service-breakdown-grid.grid-6-items {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-portfolio-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .services-top-tab-bar {
        padding: 7.5rem 1rem 0 1rem;
    }
    .services-tab-track {
        justify-content: flex-start;
        border-radius: 16px;
        padding: 0.4rem;
    }
}

@media (max-width: 680px) {
    .service-hero-card-box {
        padding: 1.8rem;
    }
    .service-hero-section {
        padding: 1.8rem 1.5rem 2rem 1.5rem;
    }
    .single-service-card {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .service-card-icon-col {
        width: 70px;
        height: 70px;
    }
    .service-breakdown-grid.grid-4-items,
    .service-breakdown-grid.grid-5-items,
    .service-breakdown-grid.grid-6-items {
        grid-template-columns: 1fr;
    }
    .faq-question-btn {
        padding: 1.2rem 1.4rem;
    }
    .faq-q-text {
        font-size: 1rem;
    }
}

/* ==========================================================================
   PORTFOLIO HUB (1 CARD PER ROW - ZIG-ZAG - FRAMELESS ARTWORK)
   ========================================================================== */
.portfolio-hero-section {
    position: relative;
    width: 100%;
    padding: 10rem 2rem 4rem 2rem;
    background-color: var(--color-dark);
    text-align: center;
    z-index: 10;
}

.portfolio-hero-container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
}

.portfolio-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.portfolio-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
}

/* Zig-Zag Stack Section */
.portfolio-zigzag-section {
    position: relative;
    width: 100%;
    padding: 0 2rem 8.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.portfolio-zigzag-container {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
}

.portfolio-zigzag-stack {
    display: flex;
    flex-direction: column;
    gap: 3.8rem;
}

.portfolio-row-card {
    background: transparent;
    border: 1px solid rgba(249, 251, 255, 0.12);
    border-radius: 32px;
    padding: 3.5rem 4.2rem;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 4.5rem;
    align-items: center;
    box-sizing: border-box;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-row-card:hover {
    transform: translateY(-7px);
    border-color: rgba(242, 100, 48, 0.55);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Frameless Floating Visual Stage (No box, no border around image) */
.port-row-visual-stage {
    width: 100%;
    height: 310px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
}

.port-row-svg-img {
    width: 100%;
    height: 100%;
    max-height: 300px;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}

.portfolio-row-card:hover .port-row-svg-img {
    transform: scale(1.07);
    filter: drop-shadow(0 20px 45px rgba(242, 100, 48, 0.25));
}

/* Content Block */
.port-row-content-block {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    align-items: flex-start;
}

.port-row-number {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-orange);
    letter-spacing: 0.1em;
}

.port-row-title {
    font-family: var(--font-primary);
    font-size: clamp(2.1rem, 3.2vw, 3rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.port-row-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.portfolio-row-card:hover .port-row-title a {
    color: var(--color-orange);
}

.port-row-action {
    margin-top: 0.8rem;
}

/* Responsive */
@media (max-width: 980px) {
    .portfolio-row-card {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.8rem 2.2rem;
    }
    .port-row-visual-stage {
        height: 250px;
    }
}

@media (max-width: 600px) {
    .portfolio-hero-section {
        padding: 8.5rem 1.5rem 2rem 1.5rem;
    }
    .portfolio-row-card {
        padding: 2rem 1.5rem;
        border-radius: 24px;
        gap: 2rem;
    }
    .port-row-visual-stage {
        height: 200px;
    }
    .port-row-title {
        font-size: 1.85rem;
    }
}

/* Single Portfolio Page Hero */
.single-port-hero-section {
    position: relative;
    width: 100%;
    padding: 11rem 2rem 3.5rem 2rem;
    background-color: var(--color-dark);
    text-align: center;
    z-index: 10;
}

.single-port-hero-container {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

.single-port-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.single-port-hero-title {
    font-family: var(--font-primary);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
}

.single-port-hero-subtitle {
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--color-body-text);
    line-height: 1.75;
    max-width: 720px;
}

.single-port-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.single-port-hero-actions .btn {
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    letter-spacing: 0.015em;
    gap: 0.55rem;
}

.single-port-hero-actions .btn i {
    font-size: 1.05rem;
    transition: transform var(--transition-fast);
}

.single-port-hero-actions .btn:hover .ph-arrow-left {
    transform: translateX(3px);
}

.single-port-hero-actions .btn:hover .ph-arrow-up-right {
    transform: translate(-2px, -2px);
}

.single-port-hero-actions .btn:hover .ph-squares-four {
    transform: rotate(-45deg);
}

/* ==========================================================================
   INTEGRATED BRAND CASE STUDY & INTERACTIVE ALBUM STYLES
   ========================================================================== */
.brand-showcase-unit {
    position: relative;
    width: 100%;
    padding: 0 1.5rem 3.5rem 1.5rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.brand-unit-container {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    background: #181615;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 18px;
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-sizing: border-box;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.brand-unit-container:hover {
    border-color: rgba(242, 100, 48, 0.35);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

/* Brand Meta & Dossier Header (Clean: Name on Left, Compact Specs on Right) */
.brand-unit-dossier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.brand-unit-main-text {
    display: flex;
    align-items: center;
}

.brand-unit-title {
    font-family: var(--font-primary);
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

/* Specs Grid (Compact Micro-Pill) */
.brand-specs-grid {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(249, 251, 255, 0.06);
    border-radius: 100px;
    padding: 0.2rem 0.65rem;
    flex-wrap: wrap;
}

.spec-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.spec-icon-green, .spec-icon-orange {
    color: var(--color-green, #A6D49E);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}

.spec-cell-value {
    font-size: 0.72rem;
    font-weight: 600;
    color: #d6d2ce;
    line-height: 1.2;
}

/* Integrated Album Module */
.brand-album-module {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Featured Stage Display (Click to Zoom) */
.album-stage-display {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: #0f0e0d;
    border: 1px solid rgba(249, 251, 255, 0.08);
    cursor: zoom-in;
}

.album-stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.album-stage-display:hover .album-stage-img {
    transform: scale(1.04);
}

.album-stage-zoom-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(249, 251, 255, 0.2);
    padding: 0.3rem 0.75rem;
    border-radius: 99px;
    backdrop-filter: blur(10px);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.album-stage-display:hover .album-stage-zoom-btn {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #ffffff;
}

/* Lightbox Navigation Arrows */
.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(26, 23, 22, 0.85);
    border: 1px solid rgba(249, 251, 255, 0.2);
    color: #ffffff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(12px);
    transition: all var(--transition-fast);
}

.lightbox-nav-btn:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    transform: translateY(-50%) scale(1.08);
}

.lightbox-nav-btn.lightbox-prev {
    right: 20px;
}

.lightbox-nav-btn.lightbox-next {
    left: 20px;
}

/* Scrollable Thumbnails Strip Track (Handles 2 to 20+ Images Gracefully) */
.album-thumbs-scroll-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.album-nav-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #191716;
    border: 1px solid rgba(249, 251, 255, 0.12);
    color: #ffffff;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.album-nav-arrow:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #ffffff;
    transform: scale(1.08);
}

.album-thumbs-track {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding: 2px 2px 4px 2px;
    flex-grow: 1;
}

.album-thumbs-track::-webkit-scrollbar {
    display: none;
}

.thumb-img-btn {
    width: 72px;
    height: 54px;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(249, 251, 255, 0.12);
    background: #0f0e0d;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    position: relative;
    transition: all 0.25s ease;
    opacity: 0.65;
}

.thumb-img-btn:hover {
    opacity: 0.95;
    border-color: rgba(242, 100, 48, 0.5);
    transform: translateY(-2px);
}

.thumb-img-btn.active {
    opacity: 1;
    border-color: var(--color-orange);
    box-shadow: 0 0 0 2px rgba(242, 100, 48, 0.4);
    transform: translateY(-2px);
}

.thumb-img-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Scrollable Thumbnails Strip Track (Handles 2 to 20+ Images Gracefully) */
.album-thumbs-scroll-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.album-nav-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #191716;
    border: 1px solid rgba(249, 251, 255, 0.12);
    color: #ffffff;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.album-nav-arrow:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #ffffff;
    transform: scale(1.08);
}

.album-thumbs-track {
    display: flex;
    gap: 0.9rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    padding: 4px 2px 8px 2px;
    flex-grow: 1;
}

.album-thumbs-track::-webkit-scrollbar {
    display: none;
}

.thumb-img-btn {
    width: 95px;
    height: 95px;
    min-width: 95px;
    border-radius: 16px;
    background: #141211;
    border: 2px solid rgba(249, 251, 255, 0.08);
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    box-sizing: border-box;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

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

.thumb-img-btn:hover {
    border-color: rgba(242, 100, 48, 0.6);
    transform: translateY(-3px);
}

.thumb-img-btn.active {
    border-color: var(--color-orange);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(242, 100, 48, 0.3);
}

/* ==========================================================================
   FULLSCREEN LIGHTBOX MODAL STYLES
   ========================================================================== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 8, 7, 0.92);
    backdrop-filter: blur(16px);
    cursor: pointer;
}

.lightbox-container {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.lightbox-close-btn {
    position: absolute;
    top: -55px;
    left: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(249, 251, 255, 0.1);
    border: 1px solid rgba(249, 251, 255, 0.2);
    color: #ffffff;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.lightbox-close-btn:hover {
    background: var(--color-orange);
    transform: rotate(-90deg);
}

.lightbox-content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    max-width: 100%;
    max-height: 85vh;
}

.lightbox-img {
    max-width: 88vw;
    max-height: 75vh;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(249, 251, 255, 0.12);
}

.lightbox-caption {
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    padding: 0.6rem 1.4rem;
    border-radius: 99px;
    border: 1px solid rgba(249, 251, 255, 0.1);
}

/* ==========================================================================
   PORTFOLIO PAGINATION STYLES
   ========================================================================== */
.portfolio-pagination-nav {
    position: relative;
    width: 100%;
    padding: 1.5rem 2rem 5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.pagination-container {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
}

.page-numbers-track {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.page-number {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.1);
    color: var(--color-light);
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.page-number:hover {
    border-color: rgba(242, 100, 48, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
}

.page-number.active {
    background: linear-gradient(-135deg, #A6D49E 0%, #76b66d 100%);
    border-color: var(--color-green);
    color: #171514;
    font-weight: 900;
    box-shadow: 0 6px 22px rgba(166, 212, 158, 0.35);
}

.page-btn.page-arrow {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    height: 48px;
    padding: 0 1.25rem;
    border-radius: 14px;
    background: #1c1a19;
    border: 1px solid rgba(249, 251, 255, 0.1);
    color: var(--color-light);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.page-btn.page-arrow:hover:not(.disabled) {
    border-color: var(--color-orange);
    color: #ffffff;
    background: #24201e;
    transform: translateY(-2px);
}

.page-btn.page-arrow.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   SOCIAL MEDIA MARKETING SHOWCASE & INSTAGRAM ANALYTICS STYLES
   ========================================================================== */
.social-showcase-unit {
    position: relative;
    width: 100%;
    padding: 0 2rem 4.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.social-unit-container {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(-135deg, #1c1a19 0%, #131211 100%);
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 28px;
    padding: 2.8rem 3.2rem;
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 3.5rem;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.social-unit-container:hover {
    border-color: rgba(242, 100, 48, 0.35);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Side A: Perfectly Proportioned Vertical Instagram Phone Screen Stage */
.social-unit-visual-side {
    width: 100%;
    max-width: 270px;
    margin: 0 auto;
}

.social-instagram-mockup {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #0d0d0d;
    border: 1px solid rgba(249, 251, 255, 0.12);
    border-radius: 24px;
    overflow: hidden;
    cursor: zoom-in;
    position: relative;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.social-instagram-mockup:hover {
    border-color: rgba(242, 100, 48, 0.65);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75);
}

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

/* Side B: Brand Info & Performance Analytics */
.social-unit-info-side {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.social-info-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.social-brand-title {
    font-family: var(--font-primary);
    font-size: clamp(1.8rem, 2.3vw, 2.3rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
}

.social-specs-bar {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 100px;
    padding: 0.4rem 1.1rem;
    width: fit-content;
    flex-wrap: wrap;
}

.social-specs-bar .spec-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
}

.social-specs-bar .spec-cell-value {
    color: #f9fbff;
    font-weight: 600;
    font-size: 0.84rem;
}

.social-specs-bar .table-tier-target {
    color: #A6D49E;
    font-weight: 600;
    font-size: 0.88rem;
}

/* Interactive Article Funnel & Card Components */
.editorial-funnel-pipeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin: 2.2rem 0;
}

.funnel-stage-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem 1.25rem;
    position: relative;
    transition: all 0.3s ease;
}

.funnel-stage-card:hover {
    border-color: rgba(242, 100, 48, 0.4);
    background: rgba(242, 100, 48, 0.04);
    transform: translateY(-3px);
}

.funnel-stage-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(242, 100, 48, 0.15);
    color: var(--color-orange, #F26430);
    font-weight: 800;
    font-size: 0.8rem;
    margin-bottom: 0.8rem;
}

.funnel-stage-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.4rem;
}

.funnel-stage-metric {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--color-orange, #F26430);
    margin-bottom: 0.5rem;
    font-family: 'Syne', sans-serif;
}

.funnel-stage-metric.metric-green {
    color: #A6D49E;
}

.funnel-stage-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Side-by-Side Form Comparison Grid */
.editorial-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2.2rem 0;
}

.compare-card {
    background: rgba(30, 27, 26, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1.8rem;
    position: relative;
}

.compare-card.bad-practice {
    border-top: 3px solid #EF4444;
}

.compare-card.good-practice {
    border-top: 3px solid #A6D49E;
    background: rgba(166, 212, 158, 0.03);
}

.compare-card-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.compare-card.bad-practice .compare-card-badge {
    background: rgba(239, 68, 68, 0.15);
    color: #F87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.compare-card.good-practice .compare-card-badge {
    background: rgba(166, 212, 158, 0.15);
    color: #A6D49E;
    border: 1px solid rgba(166, 212, 158, 0.3);
}

.compare-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 1rem;
}

.compare-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-card-list li {
    font-size: 0.9rem;
    color: #D2CDC6;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.compare-card-list li:last-child {
    border-bottom: none;
}

/* 4-Stat Performance Grid */
.social-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.social-stat-card {
    background: #181615;
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.social-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(166, 212, 158, 0.4);
}

.stat-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(166, 212, 158, 0.12);
    border: 1px solid rgba(166, 212, 158, 0.28);
    color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.stat-number {
    font-family: var(--font-primary);
    font-size: 1.35rem;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    line-height: 1.3;
}

/* Tags List */
.social-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.social-chip {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-light);
    background: rgba(249, 251, 255, 0.05);
    border: 1px solid rgba(249, 251, 255, 0.09);
    padding: 0.4rem 0.85rem;
    border-radius: 99px;
}

/* Responsive */
@media (max-width: 992px) {
    .social-unit-container {
        grid-template-columns: 1fr;
        padding: 2.2rem;
        gap: 2.5rem;
    }
    .social-unit-visual-side {
        max-width: 250px;
    }
}

@media (max-width: 650px) {
    .social-showcase-unit {
        padding: 0 1.2rem 3.5rem 1.2rem;
    }
    .social-unit-container {
        padding: 1.8rem 1.4rem;
        border-radius: 22px;
        gap: 2rem;
    }
    .social-specs-bar {
        flex-direction: column;
        gap: 0.6rem;
        width: 100%;
        box-sizing: border-box;
        align-items: flex-start;
    }
    .social-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 1080px) {
    .brand-unit-dossier {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    .brand-specs-grid {
        width: 100%;
        box-sizing: border-box;
    }
    .brand-unit-container {
        padding: 2.2rem;
    }
    .album-thumbs-track {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .brand-showcase-unit {
        padding: 0 1.2rem 4rem 1.2rem;
    }
    .brand-unit-container {
        padding: 1.8rem 1.4rem;
        border-radius: 24px;
        gap: 1.8rem;
    }
    .brand-specs-grid {
        flex-direction: column;
        gap: 1rem;
        padding: 1.2rem;
        align-items: flex-start;
    }
    .album-stage-display {
        aspect-ratio: 4 / 3;
    }
    .thumb-img-btn {
        width: 80px;
        height: 60px;
        aspect-ratio: 4 / 3;
    }
    .single-port-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .single-port-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   CONTENT CREATION PORTFOLIO - 5 PILLARS SHOWCASE & FILTER STYLES
   ========================================================================== */
.content-filter-section {
    position: relative;
    width: 100%;
    padding: 0 2rem 3rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.content-filter-container {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.content-filter-track {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background: rgba(28, 26, 25, 0.85);
    border: 1px solid rgba(249, 251, 255, 0.1);
    border-radius: 99px;
    padding: 0.45rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.content-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-radius: 99px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-muted);
    font-family: var(--font-secondary);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.content-filter-btn i {
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

.content-filter-btn .filter-count {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 99px;
    background: rgba(249, 251, 255, 0.08);
    color: var(--color-light);
    transition: all 0.3s ease;
}

.content-filter-btn:hover {
    color: #ffffff;
    background: rgba(166, 212, 158, 0.1);
    border-color: rgba(166, 212, 158, 0.25);
}

.content-filter-btn.active {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #0b140b;
    font-weight: 800;
    box-shadow: 0 4px 20px rgba(166, 212, 158, 0.4);
}

/* ==========================================================================
   CONTENT CREATION PORTFOLIO - PURE VISUAL MASONRY SHOWCASE
   ========================================================================== */
.content-showcase-section {
    position: relative;
    width: 100%;
    padding: 0 2rem 5.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

/* Highly Structured 3-Column Compact Grid (Natural Fitting, 30% Smaller Card Scale) */
.content-masonry-container {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    align-items: start;
    box-sizing: border-box;
}

.masonry-col {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    width: 100%;
}

.content-masonry-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    background: #141211;
    border: 1px solid rgba(249, 251, 255, 0.09);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    box-sizing: border-box;
}

.content-masonry-card:hover {
    transform: translateY(-4px);
    border-color: rgba(166, 212, 158, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.content-card-stage {
    position: relative;
    width: 100%;
    background: #080808;
    overflow: hidden;
    cursor: pointer;
}

/* Aspect Ratio Modifiers (Natural Formats without Letterboxing) */
.content-masonry-card.ratio-16-9 .content-card-stage {
    aspect-ratio: 16 / 9;
}

.content-masonry-card.ratio-9-16 .content-card-stage {
    aspect-ratio: 4 / 5;
}

.content-masonry-card.ratio-1-1 .content-card-stage {
    aspect-ratio: 1 / 1;
}

.content-stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

.content-masonry-card:hover .content-stage-img {
    transform: scale(1.04);
}

/* Category Badges on Card Media (Top-Left Accent Badge) */
.content-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 99px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

.badge-video {
    background: rgba(242, 100, 48, 0.85);
    color: #ffffff;
}

.badge-motion {
    background: rgba(166, 212, 158, 0.85);
    color: #0d1a0d;
}

.badge-ai {
    background: rgba(138, 92, 246, 0.85);
    color: #ffffff;
}

.badge-graphic {
    background: rgba(245, 158, 11, 0.85);
    color: #1a1202;
}

.badge-photo {
    background: rgba(59, 130, 246, 0.85);
    color: #ffffff;
}

/* Action Overlay & Play Icon */
.content-card-action-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.content-masonry-card:hover .content-card-action-overlay {
    opacity: 1;
}

.play-action-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #0d0d0d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    transform: scale(0.85);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.content-masonry-card:hover .play-action-icon {
    transform: scale(1);
}

/* Progressive Load More Bar */
.content-pagination-wrap {
    max-width: 400px;
    margin: 3.5rem auto 0 auto;
    display: flex;
    justify-content: center;
}

.btn-load-more {
    padding: 0.85rem 2.4rem;
    font-size: 0.92rem;
    font-weight: 700;
    border-radius: 99px;
    gap: 0.65rem;
    background: rgba(28, 26, 25, 0.9);
    border: 1px solid rgba(249, 251, 255, 0.2);
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.btn-load-more i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-load-more:hover {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #0b140b;
    font-weight: 800;
    box-shadow: 0 8px 25px rgba(166, 212, 158, 0.45);
    transform: translateY(-2px);
}

.btn-load-more:hover i {
    transform: translateY(2px);
}

/* Pure Visual Lightbox */
.lightbox-content-box {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 88vh;
    background: transparent;
    border: none;
    box-shadow: none;
}

.lightbox-media-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    background: #080808;
    border: 1px solid rgba(249, 251, 255, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9);
}

.lightbox-img {
    max-width: 88vw;
    max-height: 84vh;
    object-fit: contain;
    display: block;
    border-radius: 20px;
}

/* Responsive */
@media (max-width: 992px) {
    .content-masonry-container {
        grid-template-columns: 1fr;
        max-width: 650px;
    }
}

@media (max-width: 650px) {
    .content-filter-section {
        padding: 0 1rem 2.2rem 1rem;
    }
    .content-filter-track {
        border-radius: 18px;
        justify-content: center;
    }
    .content-filter-btn {
        padding: 0.5rem 0.9rem;
        font-size: 0.78rem;
    }
    .content-showcase-section {
        padding: 0 1.2rem 4rem 1.2rem;
    }
    .content-masonry-container {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
}

/* ==========================================================================
   WEB & SEO CATEGORY FILTER BAR
   ========================================================================== */
.web-filter-section {
    position: relative;
    width: 100%;
    padding: 0 2rem 3.2rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
}

.web-filter-container {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.web-filter-track {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    background: rgba(28, 26, 25, 0.85);
    border: 1px solid rgba(249, 251, 255, 0.1);
    border-radius: 99px;
    padding: 0.45rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.web-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 1.4rem;
    border-radius: 99px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-muted);
    font-family: var(--font-secondary);
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}

.web-filter-btn i {
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

.web-filter-btn .filter-count {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 99px;
    background: rgba(249, 251, 255, 0.08);
    color: var(--color-light);
    transition: all 0.3s ease;
}

.web-filter-btn:hover {
    color: #ffffff;
    background: rgba(166, 212, 158, 0.1);
    border-color: rgba(166, 212, 158, 0.25);
}

.web-filter-btn.active {
    background: var(--color-green);
    border-color: var(--color-green);
    color: #0b140b;
    font-weight: 800;
    box-shadow: 0 4px 20px rgba(166, 212, 158, 0.4);
}

.web-filter-btn.active i {
    color: #0b140b;
}

.web-filter-btn.active .filter-count {
    background: rgba(11, 20, 11, 0.25);
    color: #0b140b;
}

/* ==========================================================================
   WEB & SEO SHOWCASE CASE STUDY UNITS
   ========================================================================== */
.web-showcase-unit {
    position: relative;
    width: 100%;
    padding: 0 2rem 5.5rem 2rem;
    background-color: var(--color-dark);
    z-index: 10;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.web-showcase-unit.is-hidden {
    display: none;
    opacity: 0;
    transform: scale(0.96);
}

.web-unit-container {
    max-width: 1240px;
    width: 100%;
    margin: 0 auto;
    background: linear-gradient(-135deg, #1c1a19 0%, #141211 100%);
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 32px;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.web-unit-container:hover {
    border-color: rgba(166, 212, 158, 0.25);
}

.web-unit-dossier {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    border-bottom: 1px solid rgba(249, 251, 255, 0.08);
    padding-bottom: 2rem;
}

.web-unit-main-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.web-unit-dossier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    gap: 0.4rem;
    width: 100%;
}

.web-unit-main-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    gap: 0.4rem;
    width: 100%;
}

.web-unit-badge {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange);
    text-align: right;
    align-self: flex-start;
}

.web-unit-title {
    font-family: var(--font-primary);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
    text-align: right;
}

.web-header-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.2rem;
    text-align: right;
}

.web-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--color-light);
    text-align: right;
}

.web-meta-item i {
    color: var(--color-green);
    font-size: 1.05rem;
    opacity: 0.9;
}

.web-meta-dot {
    color: rgba(249, 251, 255, 0.2);
    font-size: 0.85rem;
}

/* 2-Column Showcase Layout */
.web-unit-layout-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.web-visual-col {
    display: flex;
    flex-direction: column;
}

/* Browser Mockup Frame */
.browser-mockup-frame {
    background: #11100f;
    border: 1px solid rgba(249, 251, 255, 0.12);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
}

.browser-chrome-bar {
    background: #1b1918;
    padding: 0.85rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    border-bottom: 1px solid rgba(249, 251, 255, 0.08);
}

.browser-controls {
    display: flex;
    align-items: center;
    gap: 7px;
}

.control-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

.control-dot.dot-red { background-color: #ff5f56; }
.control-dot.dot-yellow { background-color: #ffbd2e; }
.control-dot.dot-green { background-color: #27c93f; }

.browser-url-pill {
    flex: 1;
    background: rgba(249, 251, 255, 0.05);
    border: 1px solid rgba(249, 251, 255, 0.1);
    border-radius: 8px;
    padding: 0.4rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.78rem;
    color: var(--color-light);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.browser-url-pill:hover {
    background: rgba(249, 251, 255, 0.08);
    border-color: rgba(249, 251, 255, 0.2);
    color: #ffffff;
}

.browser-url-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
}

.browser-url-pill .url-lock-icon {
    color: var(--color-green);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.browser-url-pill .url-external-icon {
    color: var(--color-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.25s ease;
}

.browser-url-pill:hover .url-external-icon {
    color: var(--color-light);
    transform: translate(-2px, -2px);
}

.browser-url-text {
    font-family: var(--font-mono, monospace);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

/* The frame takes the shape of the screenshot inside it.

   A fixed ratio meant every shot that was not that ratio got cropped by
   object-fit: cover: a 2.04 desktop capture lost a fifth of its width, the
   logo off one edge and the cart off the other, and a 1.33 device mockup
   lost the bottom of the device. --shot is set from the image's own natural
   size on load and again on every switch, so one project can mix a wide
   browser capture with a tall device mockup and both are shown whole.

   contain rather than cover is the safety net: before the ratio is applied,
   or if the script never runs, a mismatched shot letterboxes against the
   stage's own black instead of being cut.

   The default is 4/3 because that is the shape the shots are exported at. */
.browser-viewport-stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--shot, 4 / 3);
    overflow: hidden;
    background: #0d0c0b;
    cursor: pointer;
    transition: aspect-ratio 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.browser-viewport-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.browser-viewport-stage:hover .browser-viewport-img {
    transform: scale(1.03);
}

.browser-zoom-tag {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 99px;
    background: rgba(20, 18, 17, 0.88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(249, 251, 255, 0.15);
    color: var(--color-light);
    font-size: 0.75rem;
    font-weight: 700;
    pointer-events: none;
    transition: background 0.25s ease;
}

.browser-viewport-stage:hover .browser-zoom-tag {
    background: var(--color-orange);
    color: #ffffff;
}

/* Photo Album Strip under Main Screen */
.web-album-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    margin-top: 1rem;
}

.web-album-thumb {
    position: relative;
    /* the same shape as the frame above, so a 4:3 shot does not sit in a
       16:9 box with black down both sides */
    aspect-ratio: var(--shot, 4 / 3);
    border-radius: 12px;
    overflow: hidden;
    background: #0d0c0b;
    border: 2px solid rgba(249, 251, 255, 0.1);
    padding: 0;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.web-album-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform 0.4s ease, opacity 0.2s ease;
    opacity: 0.65;
}

.web-album-thumb:hover img {
    transform: scale(1.08);
    opacity: 1;
}

.web-album-thumb:hover {
    border-color: rgba(249, 251, 255, 0.3);
    transform: translateY(-2px);
}

.web-album-thumb.active {
    border-color: var(--color-orange);
    box-shadow: 0 0 15px rgba(242, 100, 48, 0.25);
}

.web-album-thumb.active img {
    opacity: 1;
}

/* Right Dossier Column */
.web-dossier-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.25rem;
}



/* The one sentence on the card.

   The dossier column used to be a title, two meta chips and a grid of
   specifications, which left a reader knowing the stack and nothing about
   what the storefront has to do. It also ran 273px shorter than the browser
   frame beside it once that frame went to 4:3. */
.web-unit-summary {
    margin: 1.15rem 0 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-body-text);
    max-width: 52ch;

    /* Six lines are reserved whether the sentence fills them or not. The
       dossier column has to finish level with the browser frame beside it,
       and tuning each summary's wording to land on the same line count was
       a losing game -- one project came out a line over, the next a line
       under. */
    min-height: 10.2em;
}

@media (max-width: 900px) {
    .web-unit-summary { font-size: 0.9rem; margin-top: 1rem; }
}

/* Metrics 2x2 Grid */
.web-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.web-metric-card {
    background: rgba(249, 251, 255, 0.025);
    border: 1px solid rgba(249, 251, 255, 0.07);
    border-radius: 16px;
    padding: 1.05rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    transition: all 0.25s ease;
}

.web-metric-card:hover {
    background: rgba(249, 251, 255, 0.045);
    border-color: rgba(249, 251, 255, 0.16);
    transform: translateY(-2px);
}

.metric-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(166, 212, 158, 0.08);
    border: 1px solid rgba(166, 212, 158, 0.2);
    color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.web-metric-card:hover .metric-icon-box {
    background: rgba(166, 212, 158, 0.16);
    border-color: rgba(166, 212, 158, 0.4);
    transform: scale(1.04);
}

.metric-data-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.metric-big-num {
    font-family: var(--font-primary);
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
}

.metric-desc-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-muted);
    line-height: 1.2;
}

.metric-card-full {
    grid-column: 1 / -1;
}

/* ==========================================================================
   Campaign Management Executive Bento Presentation (Full Width & Clean Metrics)
   ========================================================================== */
.campaign-bento-unit {
    padding: 1.5rem 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.campaign-bento-unit.is-hidden {
    display: none !important;
}

.campaign-bento-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.campaign-bento-card {
    background: rgba(24, 22, 21, 0.7);
    border: 1px solid rgba(249, 251, 255, 0.09);
    border-radius: 24px;
    padding: 2.2rem 2.4rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    position: relative;
    backdrop-filter: blur(16px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.campaign-bento-card:hover {
    border-color: rgba(166, 212, 158, 0.25);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55);
}

.campaign-bento-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(249, 251, 255, 0.08);
}

.campaign-bento-dossier {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    gap: 0.45rem;
}

.campaign-bento-badge {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.campaign-bento-title {
    font-family: var(--font-primary);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin: 0;
    text-align: right;
}

.campaign-bento-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 0.2rem;
    text-align: right;
}

.campaign-bento-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-light);
    text-align: right;
}

.campaign-bento-meta-item i {
    color: var(--color-green);
    font-size: 1.1rem;
    opacity: 0.9;
}

.campaign-bento-platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 1rem;
    border-radius: 99px;
    background: rgba(249, 251, 255, 0.04);
    border: 1px solid rgba(249, 251, 255, 0.1);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-light);
}

.brand-official-icon,
.brand-official-img {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.web-filter-btn .brand-official-icon,
.web-filter-btn .brand-official-img {
    width: 18px;
    height: 18px;
}

.campaign-bento-platform-pill .brand-official-img {
    width: 20px;
    height: 20px;
}

/* 7-Card Bento Grid Layout (4 top, 3 bottom) */
.campaign-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.campaign-metric-cell {
    background: rgba(249, 251, 255, 0.025);
    border: 1px solid rgba(249, 251, 255, 0.07);
    border-radius: 16px;
    padding: 1.15rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.95rem;
    transition: all 0.25s ease;
}

.campaign-metric-cell:hover {
    background: rgba(249, 251, 255, 0.045);
    border-color: rgba(166, 212, 158, 0.3);
    transform: translateY(-2px);
}

.campaign-metric-cell.cell-span-2 {
    grid-column: span 2;
}

.campaign-metric-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(166, 212, 158, 0.08);
    border: 1px solid rgba(166, 212, 158, 0.2);
    color: var(--color-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.campaign-metric-cell:hover .campaign-metric-icon {
    background: rgba(166, 212, 158, 0.16);
    border-color: rgba(166, 212, 158, 0.4);
    transform: scale(1.04);
}

.campaign-metric-data {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: right;
}

.campaign-metric-value {
    font-family: var(--font-primary);
    font-size: 1.02rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.campaign-metric-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-muted);
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .campaign-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .campaign-metric-cell.cell-span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .campaign-bento-grid {
        grid-template-columns: 1fr;
    }
    .campaign-metric-cell.cell-span-2 {
        grid-column: 1 / -1;
    }
    .campaign-bento-card {
        padding: 1.5rem 1.2rem;
    }
}

/* Responsive */
@media (max-width: 1080px) {
    .web-unit-layout-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .web-unit-dossier {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.4rem;
    }
    .web-specs-grid {
        width: 100%;
        box-sizing: border-box;
    }
    .web-unit-container {
        padding: 2.2rem;
    }
}

@media (max-width: 650px) {
    .web-showcase-unit {
        padding: 0 1.2rem 3.5rem 1.2rem;
    }
    .web-unit-container {
        padding: 1.8rem 1.4rem;
        border-radius: 24px;
        gap: 2rem;
    }
    .web-specs-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
    }
    .web-album-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    .web-metrics-grid {
        grid-template-columns: 1fr;
    }
    .web-specs-matrix {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
}

/* ==========================================================================
   SINGLE ARTICLE / EDITORIAL STYLES
   ========================================================================== */

.article-page {
    background-color: var(--color-bg);
}

.article-header-section {
    padding: 10.5rem 2rem 2.5rem 2rem;
}

.article-header-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.article-back-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.article-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    font-weight: 600;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.article-back-btn:hover {
    color: var(--color-orange);
    transform: translateX(4px);
}

.article-category-pill {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    border-radius: 100px;
    background: rgba(242, 100, 48, 0.12);
    border: 1px solid rgba(242, 100, 48, 0.25);
    color: var(--color-orange);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.article-main-title {
    font-family: var(--font-primary);
    font-size: clamp(2.2rem, 4.2vw, 3.6rem);
    font-weight: 800;
    color: var(--color-light);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.article-meta-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(249, 251, 255, 0.08);
    flex-wrap: wrap;
    gap: 1.2rem;
}

.author-meta-info {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.author-avatar-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(-135deg, var(--color-orange), #d94e1b);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.15rem;
    box-shadow: 0 4px 15px rgba(242, 100, 48, 0.3);
}

.author-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.author-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-light);
}

.author-role {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.article-date-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.article-date-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.meta-separator {
    opacity: 0.4;
}

/* Article Hero Cover Media */
.article-hero-media-section {
    padding: 0 2rem 3rem 2rem;
}

.article-hero-media-container {
    max-width: 1140px;
    margin: 0 auto;
}

.article-cover-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(249, 251, 255, 0.1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    background: var(--color-card-bg);
}

.article-cover-img {
    width: 100%;
    height: clamp(340px, 50vh, 560px);
    object-fit: cover;
    display: block;
}

/* Article Body & Sidebar Grid */
.article-body-section {
    padding: 1rem 2rem 5rem 2rem;
}

.article-body-container {
    max-width: 1420px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    gap: 2.5rem;
    align-items: flex-start;
}

/* Sidebar */
.article-sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-sticky-wrap {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.sidebar-block {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sidebar-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.article-share-links {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(249, 251, 255, 0.04);
    border: 1px solid rgba(249, 251, 255, 0.1);
    color: var(--color-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.share-btn:hover {
    background: var(--color-orange);
    color: #ffffff;
    border-color: var(--color-orange);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(242, 100, 48, 0.35);
}

.article-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.5rem;
    border-right: 2px solid rgba(249, 251, 255, 0.08);
}

.toc-link {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--color-muted);
    line-height: 1.35;
    transition: color var(--transition-fast), transform var(--transition-fast);
    padding: 0.2rem 0;
}

.toc-link:hover, .toc-link.active {
    color: var(--color-orange);
    transform: translateX(-3px);
}

.sidebar-cta-card {
    background: linear-gradient(-135deg, rgba(26, 23, 22, 0.9), rgba(18, 16, 15, 0.95));
    border: 1px solid rgba(242, 100, 48, 0.25);
    border-radius: 20px;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.sidebar-cta-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.sidebar-cta-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-light);
    line-height: 1.25;
}

.sidebar-cta-desc {
    font-size: 0.82rem;
    color: var(--color-muted);
    line-height: 1.45;
}

/* Article Main Content */
.article-content-main {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    color: rgba(249, 251, 255, 0.86);
    font-size: 1.05rem;
    line-height: 1.75;
}

.article-lead-paragraph {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    color: #ffffff;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(249, 251, 255, 0.08);
}

.article-heading {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    font-weight: 800;
    color: var(--color-light);
    line-height: 1.25;
    margin-top: 1.5rem;
    letter-spacing: -0.01em;
}

.article-content-main p {
    margin: 0;
}

.article-content-main em {
    color: var(--color-orange);
    font-style: normal;
    font-weight: 600;
}

/* Takeaway Bento Box */
.article-takeaway-box {
    background: rgba(242, 100, 48, 0.06);
    border: 1px solid rgba(242, 100, 48, 0.25);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.takeaway-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.takeaway-icon {
    font-size: 1.4rem;
    color: var(--color-orange);
}

.takeaway-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-light);
}

.takeaway-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(249, 251, 255, 0.85);
}

.takeaway-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.takeaway-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.92rem;
    line-height: 1.5;
}

.takeaway-list li i {
    color: var(--color-orange);
    font-size: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

/* Pull Quote */
.article-pull-quote {
    position: relative;
    padding: 2.2rem 2.5rem;
    background: rgba(26, 23, 22, 0.65);
    backdrop-filter: blur(16px);
    border-right: 4px solid var(--color-orange);
    border-radius: 20px 0 0 20px;
    margin: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.article-pull-quote p {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 700;
    font-style: italic;
    color: var(--color-light);
    line-height: 1.55;
}

.article-pull-quote cite {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-orange);
    font-style: normal;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Pillars Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0;
}

.pillar-card {
    background: rgba(26, 23, 22, 0.7);
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 18px;
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.pillar-card:hover {
    transform: translateY(-4px);
    border-color: rgba(242, 100, 48, 0.35);
}

.pillar-num {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--color-orange);
    line-height: 1;
}

.pillar-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-light);
}

.pillar-desc {
    font-size: 0.88rem;
    color: var(--color-muted);
    line-height: 1.5;
}

/* Article Author Bio */
.article-author-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.8rem;
    background: rgba(26, 23, 22, 0.85);
    border: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 20px;
    margin-top: 2rem;
}

.author-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(242, 100, 48, 0.1);
    border: 1px solid rgba(242, 100, 48, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.author-logo-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.author-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.author-card-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.author-card-name {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--color-light);
}

.author-card-bio {
    font-size: 0.88rem;
    color: var(--color-muted);
    line-height: 1.45;
}

/* Related Articles Section */
.related-articles-section {
    padding: 4rem 2rem;
    background: rgba(18, 16, 15, 0.6);
    border-top: 1px solid rgba(249, 251, 255, 0.06);
}

.related-articles-container {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}

.related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.related-title {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 800;
    color: var(--color-light);
}

.related-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-orange);
    transition: transform var(--transition-fast);
}

.related-all-link:hover {
    transform: translateX(-4px);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.8rem;
}

.related-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    background: rgba(26, 23, 22, 0.75);
    border: 1px solid rgba(249, 251, 255, 0.08);
    overflow: hidden;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.related-card:hover {
    transform: translateY(-5px);
    border-color: rgba(242, 100, 48, 0.4);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

.related-card-media {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.related-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.related-card:hover .related-card-img {
    transform: scale(1.05);
}

.related-card-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    background: rgba(18, 16, 15, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(249, 251, 255, 0.15);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.related-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.related-card-date {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
}

.related-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-light);
    line-height: 1.3;
}

.related-card-desc {
    font-size: 0.85rem;
    color: var(--color-muted);
    line-height: 1.5;
}

/* Article Responsive */
@media (max-width: 992px) {
    .article-body-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .article-sidebar {
        position: static;
        order: 2;
    }

    .article-content-main {
        order: 1;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .related-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .article-header-section {
        padding: 7.8rem 1.2rem 2rem 1.2rem;
    }

    .article-body-section {
        padding: 0.5rem 1.2rem 3.5rem 1.2rem;
    }

    .article-pull-quote {
        padding: 1.5rem;
    }

    .article-author-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}



/* Visually hidden, still read by search engines and screen readers */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   GOOGLE REVIEWS SECTION - COMPACT & SEAMLESS DESIGN
   ========================================================================== */
.google-reviews-section {
    position: relative;
    padding: 2.5rem 2rem 4rem 2rem;
    background: transparent;
    overflow: hidden;
}

.reviews-container {
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Section Header - Compact */
.reviews-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.reviews-header-left {
    max-width: 580px;
}

.google-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
}

.google-icon-svg {
    width: 15px;
    height: 15px;
    display: inline-block;
    flex-shrink: 0;
}

.google-badge-text {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-light);
}

.reviews-main-title {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-light);
    letter-spacing: -0.015em;
    margin-bottom: 0.35rem;
}

.reviews-sub-desc {
    font-size: 0.92rem;
    color: var(--color-muted);
    line-height: 1.5;
    font-weight: 400;
}

/* Overall Rating Summary & CTA */
.reviews-header-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 0.75rem 1.15rem;
}

.rating-score-block {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.score-stars-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.score-num {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--color-light);
    line-height: 1;
}

.stars-group {
    display: inline-flex;
    gap: 0.1rem;
    color: #fbbc04;
    font-size: 0.9rem;
}

.rating-count-text {
    font-size: 0.74rem;
    color: var(--color-muted);
    font-weight: 500;
}

.btn-write-review {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-orange);
    color: #ffffff;
    padding: 0.55rem 1rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.btn-write-review:hover {
    background: #e05320;
    transform: translateY(-1px);
    color: #ffffff;
}

/* Controls Bar */
.reviews-controls-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.review-nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-nav-btn:hover {
    background: var(--color-orange);
    border-color: var(--color-orange);
    color: #ffffff;
    transform: scale(1.05);
}

/* Reviews Carousel Wrapper & Track */
.reviews-slider-viewport {
    overflow: hidden;
    position: relative;
    padding: 0.25rem 0 1rem 0;
    cursor: grab;
    user-select: none;
}

.reviews-slider-viewport:active {
    cursor: grabbing;
}

.reviews-slider-track {
    display: flex;
    gap: 1.15rem;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Individual Review Card - Compact & Borderless Feel */
.review-luxury-card {
    flex: 0 0 calc(33.333% - 0.8rem);
    min-width: 290px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, background 0.25s ease;
}

.review-luxury-card:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(242, 100, 48, 0.25);
}

.review-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}

.reviewer-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reviewer-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(-135deg, #F26430 0%, #3a3430 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.92rem;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.reviewer-info {
    display: flex;
    flex-direction: column;
}

.reviewer-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-light);
    line-height: 1.2;
}

.reviewer-company {
    font-size: 0.74rem;
    color: var(--color-muted);
    font-weight: 500;
    margin-top: 0.1rem;
}

.google-verified-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.review-card-stars {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    color: #fbbc04;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.review-text-wrap {
    margin-bottom: 1rem;
    flex-grow: 1;
}

.review-body-text {
    font-size: 0.88rem;
    color: var(--color-body-text);
    line-height: 1.55;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 0.75rem;
    font-size: 0.74rem;
    color: var(--color-muted);
}

.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #34a853;
    font-weight: 600;
}

.review-time {
    color: var(--color-muted);
    font-weight: 500;
}

/* ==========================================================================
   BISAN ARTICLE & EDITORIAL SYSTEM (COMPACT LUXURY & REFINED TYPOGRAPHY)
   ========================================================================== */

.article-hero-unified {
    padding: 9.8rem 1.5rem 1.8rem 1.5rem;
    max-width: 1240px;
    margin: 0 auto;
}

.article-hero-unified-container {
    max-width: 1100px;
    margin: 0 auto;
}

.article-top-nav-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.article-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #9C9790;
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-back-btn:hover {
    color: #FFFFFF;
}

.meta-slash {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.82rem;
}

.article-category-pill {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-green, #A6D49E);
    background: rgba(166, 212, 158, 0.1);
    border: 1px solid rgba(166, 212, 158, 0.25);
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
}

.article-main-title {
    font-family: var(--font-heading, 'Adelle Sans EXT', sans-serif);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.22;
    color: #FFFFFF;
    margin-bottom: 0.4rem;
    letter-spacing: -0.015em;
}

.article-meta-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: #9C9790;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.meta-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.meta-strip-item i {
    color: var(--color-green, #A6D49E);
    font-size: 0.92rem;
}

.meta-dot {
    color: rgba(255, 255, 255, 0.25);
}

.article-hero-cover-frame {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4);
    background: #1a1716;
}

.article-cover-img {
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

/* Article Body & 3-Column Editorial Grid */
.article-body-section {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem 1.5rem;
}

.article-body-container {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 280px;
    gap: 2.5rem;
    align-items: start;
}

/* Locked Sticky Sidebars */
.article-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 95px;
    align-self: flex-start;
    height: fit-content;
    max-height: calc(100vh - 115px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 100, 48, 0.3) transparent;
    padding-left: 0.25rem;
}

.article-sidebar-left {
    grid-column: 1;
}

.article-content-main {
    grid-column: 2;
    min-width: 0;
    width: 100%;
}

.article-sidebar-right {
    grid-column: 3;
}

.article-sidebar::-webkit-scrollbar {
    width: 4px;
}

.article-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.article-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.article-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(242, 100, 48, 0.45);
}

.sidebar-sticky-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.sidebar-block {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 1.1rem;
    backdrop-filter: blur(10px);
}

.sidebar-block.toc-block {
    border-color: rgba(166, 212, 158, 0.18);
    background: rgba(166, 212, 158, 0.02);
}

.sidebar-block.services-block {
    border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--color-green, #A6D49E);
    margin-bottom: 0.75rem;
}

.article-share-links {
    display: flex;
    gap: 0.45rem;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #c5c1bb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.share-btn:hover {
    background: var(--color-green, #A6D49E);
    color: #1a1716;
    border-color: var(--color-green, #A6D49E);
    transform: translateY(-2px);
}

.article-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.article-toc-nav .toc-link {
    color: #9C9790;
    font-size: 0.82rem;
    line-height: 1.35;
    text-decoration: none;
    padding: 0.38rem 0.55rem;
    border-radius: 6px;
    border-right: 2px solid transparent;
    transition: all 0.2s ease;
}

.article-toc-nav .toc-link:hover,
.article-toc-nav .toc-link.active {
    color: #FFFFFF;
    background: rgba(166, 212, 158, 0.08);
    border-right-color: var(--color-green, #A6D49E);
    transform: translateX(-3px);
}

/* Sidebar Services List */
.sidebar-services-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-service-link {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #c5c1bb;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.35;
    padding: 0.38rem 0.55rem;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-service-link i {
    color: var(--color-green, #A6D49E);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.sidebar-service-link:hover {
    color: #FFFFFF;
    background: rgba(166, 212, 158, 0.08);
    transform: translateX(-3px);
}

.sidebar-service-link:hover i {
    transform: translateX(-2px);
}

.sidebar-cta-card {
    background: linear-gradient(-145deg, rgba(166, 212, 158, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(166, 212, 158, 0.2);
    border-radius: 14px;
    padding: 1.15rem;
}

.sidebar-cta-tag {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-green, #A6D49E);
    margin-bottom: 0.35rem;
}

.sidebar-cta-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.sidebar-cta-desc {
    font-size: 0.78rem;
    color: #9C9790;
    line-height: 1.45;
    margin-bottom: 0.85rem;
}

/* Article Prose & Headings (Compact, Legible, Zero Excessive Gap) */
.article-content-main {
    max-width: 820px;
}

.article-lead-paragraph {
    font-size: 1.15rem;
    line-height: 1.6;
    font-weight: 500;
    color: #f1ede8;
    margin-bottom: 1rem;
}

.article-heading {
    font-family: var(--font-heading, 'Adelle Sans EXT', sans-serif);
    font-size: 1.38rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-top: 1.8rem;
    margin-bottom: 0.55rem;
    letter-spacing: -0.01em;
    scroll-margin-top: 100px;
}

.article-content-main p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: #D2CDC6;
    margin-bottom: 0;
}

/* Persistent Solid/Blurred Header on All Article Pages */
.article-page .site-header {
    background-color: rgba(47, 43, 41, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
    padding: 1.15rem 0;
}

/* Article Inline Links - Exact Brand Standard */
.article-inline-link {
    color: var(--color-green, #A6D49E);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    padding: 0 4px 1px 4px;
    border-radius: 4px;
    background: rgba(166, 212, 158, 0.08);
    border-bottom: 1.5px solid rgba(166, 212, 158, 0.4);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.article-inline-link:hover {
    color: #FFFFFF;
    background: rgba(166, 212, 158, 0.2);
    border-bottom-color: var(--color-green, #A6D49E);
    transform: translateY(-1px);
}

.article-inline-link i {
    font-size: 0.85em;
}

/* Article In-Body Editorial Visuals (Exact Standard) */
.article-inline-media {
    margin: 2.2rem 0;
    border-radius: 16px;
    overflow: hidden;
    background: #1e1b19;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4);
}

.article-inline-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-caption {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    font-size: 0.82rem;
    color: #A39F9C;
    background: rgba(26, 23, 22, 0.95);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 1.45;
}

.media-caption i {
    color: var(--color-orange, #F26430);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Takeaway & Callout Boxes (Compact Padding & Margin) */
.article-takeaway-box {
    background: rgba(166, 212, 158, 0.04);
    border: 1px solid rgba(166, 212, 158, 0.22);
    border-right: 3.5px solid var(--color-green, #A6D49E);
    border-radius: 12px;
    padding: 1.1rem 1.3rem;
    margin: 1.2rem 0;
}

.takeaway-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.takeaway-icon {
    color: var(--color-green, #A6D49E);
    font-size: 1.15rem;
}

.takeaway-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #FFFFFF;
}

.takeaway-text {
    font-size: 0.94rem;
    color: #D2CDC6;
    margin-bottom: 0.5rem;
    line-height: 1.55;
}

.takeaway-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.takeaway-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.9rem;
    color: #c5c1bb;
    line-height: 1.48;
}

.takeaway-list li i {
    color: var(--color-green, #A6D49E);
    font-size: 1rem;
    margin-top: 0.12rem;
    flex-shrink: 0;
}

/* Pull Quotes (Compact & Elegant) */
.article-pull-quote {
    margin: 1.3rem 0;
    padding: 0.85rem 1.25rem;
    border-right: 3px solid var(--color-green, #A6D49E);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px 0 0 12px;
}

.article-pull-quote p {
    font-family: var(--font-heading, 'Adelle Sans EXT', sans-serif);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.45;
    color: #FFFFFF;
    font-style: italic;
    margin: 0;
}

/* In-Article Media */
.article-inline-media {
    margin: 1.5rem 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.3);
}

.article-inline-media img {
    width: 100%;
    height: auto;
    display: block;
}

.article-inline-media .media-caption {
    display: block;
    padding: 0.65rem 1rem;
    font-size: 0.78rem;
    color: #9C9790;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Pillars Bento Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.pillar-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.pillar-card:hover {
    border-color: rgba(166, 212, 158, 0.3);
    background: rgba(166, 212, 158, 0.03);
}

.pillar-num {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-green, #A6D49E);
    margin-bottom: 0.2rem;
}

.pillar-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.3rem;
}

.pillar-desc {
    font-size: 0.82rem;
    color: #9C9790;
    line-height: 1.42;
    margin: 0 !important;
}

/* ==========================================================================
   ARTICLE COMMENTS SECTION (INTERACTIVE & ADMIN CONNECTED)
   ========================================================================== */

.article-comments-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem 5rem 1.5rem;
}

.comments-wrapper {
    /* Was margin-left: calc(280px + 3.5rem), which pushed the block right
       to sit under the article column. That lines up at exactly one window
       width and reads as knocked off-centre everywhere else. The discussion
       is not part of the article's grid, so it is centred on the page. */
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 3rem;
}

.comments-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.comments-section-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFFFFF;
}

.comments-count-badge {
    background: rgba(166, 212, 158, 0.12);
    color: var(--color-green, #A6D49E);
    padding: 0.3rem 0.8rem;
    border-radius: 100px;
    font-size: 0.82rem;
    font-weight: 700;
}

/* Comment Form */
.comment-submit-form {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.8rem;
    margin-bottom: 3rem;
}

.comment-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-input-field,
.comment-textarea-field {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.comment-input-field:focus,
.comment-textarea-field:focus {
    outline: none;
    border-color: var(--color-green, #A6D49E);
    box-shadow: 0 0 10px rgba(166, 212, 158, 0.2);
}

.comment-textarea-field {
    min-height: 110px;
    resize: vertical;
    margin-bottom: 1rem;
}

.btn-post-comment {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-green, #A6D49E);
    color: #1a1716;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.8rem 1.6rem;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-post-comment:hover {
    background: #bbf0b3;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(166, 212, 158, 0.3);
}

/* Comments List */
.comments-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.comment-item-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 1.4rem;
}

.comment-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.comment-author-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #FFFFFF;
}

.comment-date {
    font-size: 0.78rem;
    color: #9C9790;
}

.comment-text-body {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #D2CDC6;
    margin: 0 !important;
}

/* Admin Reply Card */
.comment-reply-card {
    margin-top: 1.2rem;
    margin-right: 1.5rem;
    background: rgba(166, 212, 158, 0.04);
    border: 1px solid rgba(166, 212, 158, 0.2);
    border-right: 3px solid var(--color-green, #A6D49E);
    border-radius: 12px;
    padding: 1rem 1.2rem;
}

.admin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-green, #A6D49E);
    background: rgba(166, 212, 158, 0.15);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    margin-right: 0.4rem;
}

/* Responsive adjustments for 3-Column Article Layout */
@media (max-width: 1200px) {
    .article-body-container {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 2rem;
    }
    .article-sidebar-right {
        grid-column: 2;
        position: static;
        max-height: none;
        margin-top: 1.5rem;
    }
}

@media (max-width: 900px) {
    .article-body-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .article-sidebar-left {
        grid-column: 1;
        position: static;
        max-height: none;
        order: 1;
    }
    .article-content-main {
        grid-column: 1;
        order: 2;
    }
    .article-sidebar-right {
        grid-column: 1;
        position: static;
        max-height: none;
        order: 3;
    }
    .sidebar-sticky-wrap {
        position: static;
    }
}

@media (max-width: 768px) {
    .article-header-section {
        padding-top: 8.2rem;
    }
    .comment-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   HIGH-END LUXURY EDITORIAL TABLE (DESKTOP & MOBILE)
   ========================================================================== */

.article-table-wrap {
    width: 100%;
    margin: 2.2rem 0;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(242, 100, 48, 0.28);
    background: linear-gradient(-175deg, rgba(35, 31, 29, 0.95) 0%, rgba(20, 18, 17, 0.98) 100%);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.editorial-clean-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    min-width: 650px;
    text-align: right;
}

.editorial-clean-table thead th {
    background: rgba(242, 100, 48, 0.1);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid rgba(242, 100, 48, 0.25);
}

.editorial-clean-table tbody tr {
    transition: background 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.editorial-clean-table tbody tr:last-child {
    border-bottom: none;
}

.editorial-clean-table tbody tr:hover {
    background: rgba(242, 100, 48, 0.05);
}

.editorial-clean-table td {
    padding: 1.25rem 1.4rem;
    color: #D2CDC6;
    vertical-align: middle;
    line-height: 1.55;
}

.table-tier-name {
    font-weight: 800;
    color: #FFFFFF;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    display: block;
}

.table-tier-price {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: 8px;
    background: rgba(242, 100, 48, 0.12);
    border: 1px solid rgba(242, 100, 48, 0.35);
    color: var(--color-orange, #F26430);
    font-weight: 800;
    font-size: 0.88rem;
    white-space: nowrap;
}

.table-tier-desc {
    font-size: 0.86rem;
    color: #D6D2CE;
    line-height: 1.45;
}

.table-tier-target {
    font-size: 0.84rem;
    color: var(--color-green, #A6D49E);
    font-weight: 500;
}

/* Below this the header cannot hold logo + CTA + toggle comfortably,
   so the CTA falls back to the burger menu where it already exists. */
@media (max-width: 359px) {
    .header-actions .get-quote-btn {
        display: none;
    }
}

/* The sidebars are sticky and capped at the viewport height, so on a short
   screen part of the list sits below the fold of its own box. Making them
   non-sticky instead was worse: the column then parks under the 105px fixed
   header at maximum scroll and its top links cannot be reached at all.

   They stay sticky. What was missing was any sign that there is more inside,
   so article.js adds .has-more and this draws a fade at the lower edge. */
/* No position override here: .article-sidebar is already sticky, and
   redeclaring position would cancel that. The ::after below is sticky
   inside the scroll container, which needs nothing from the parent. */

.article-sidebar.has-more::after {
    content: "";
    position: sticky;
    bottom: 0;
    right: 0;
    display: block;
    height: 46px;
    margin-top: -46px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(47, 43, 41, 0) 0%, rgba(47, 43, 41, .92) 78%);
    transition: opacity .2s ease;
}

.article-sidebar.has-more.at-end::after {
    opacity: 0;
}

/* and a scrollbar you can actually see */
.article-sidebar::-webkit-scrollbar {
    width: 7px;
}

.article-sidebar::-webkit-scrollbar-thumb {
    background: rgba(242, 100, 48, .38);
    border-radius: 4px;
}

.article-sidebar:hover::-webkit-scrollbar-thumb {
    background: rgba(242, 100, 48, .62);
}

/* Replies from the Bisan team, shown nested under the comment they answer.
   The markup was already being emitted by the article page but had no rules
   at all, so a reply arrived as unstyled text with no indent and nothing to
   mark it as coming from the team. */
.admin-reply-box {
    margin: 1rem 2.4rem 0 0;
    padding: 0.9rem 1.1rem;
    background: rgba(242, 100, 48, 0.07);
    border-right: 3px solid var(--color-orange);
    border-radius: 10px 0 0 10px;
}

.admin-reply-box + .admin-reply-box {
    margin-top: 0.6rem;
}

.admin-reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.admin-reply-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-orange);
}

.admin-reply-text {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-body-text);
}

@media (max-width: 600px) {
    .admin-reply-box { margin-right: 0; }
}

/* Terms, privacy and refund links in the footer's bottom bar.
   These live here rather than in legal.css because the links appear on
   every page while legal.css is only loaded by the three legal pages —
   which left them completely unstyled everywhere else, running together
   as one unbroken line of text. */
/* Sits beside the copyright line, which is where people look for these and
   where payment processors and ad platforms expect to find them. */
.footer-legal-links {
    display: flex;
    align-items: center;
    /* centred under the copyright line, which is itself centred */
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.6rem;
}

.footer-legal-links a {
    font-size: 0.82rem;
    color: rgba(249, 251, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal-links a:hover { color: var(--color-orange, #F26430); }

/* Spacing alone read as one long phrase rather than three links. A divider
   between them is done in CSS so the markup stays three plain anchors — a
   separator character in the HTML would be read aloud by a screen reader
   and would be copied along with the text. */
.footer-legal-links a + a::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.72em;
    margin-left: 0.75rem;
    vertical-align: -0.02em;
    background: rgba(249, 251, 255, 0.22);
}

/* ==========================================================================
   SERVICES — twelve squares

   Fourth version of this section. What came before, and why each moved on:

     1. A ScrollTrigger pin, one card at a time, costing cards.length * 550
        pixels of motionless scroll -- 6,050px at eleven services.
     2. Eleven tiles in four labelled groups: too many boxes carrying too
        much text.
     3. Four family blocks with the services as linked text: calm, but it
        read as a table of contents rather than something to look at.

   Three rows of four. The twelfth cell would otherwise have been a hole, so
   it is the way through to the full list.

   INSIDE THE SQUARE

   A top rail and a bottom block. The first attempt centred the icon and the
   name as a pair and left the arrow floating in a corner: three elements
   with nothing holding them, and 150px of nothing above and below. Now the
   index and the arrow hold the top edge, the icon, name and tags stack
   against the bottom, and the space between the two is the composition
   rather than a gap.

   The square is set by aspect-ratio rather than a fixed height, so the cells
   stay square at every column count without a media query per width. Twelve
   divides by four, three and two, so no row is ever left short.
   ========================================================================== */

.services-squares-section {
    position: relative;
    width: 100%;
    background-color: var(--color-dark);
    z-index: 10;
    padding: 8rem 0;
}

.services-squares-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
}

.services-squares-head { margin-bottom: 4rem; }

.services-squares-head .big-main-headline { max-width: 18ch; }

.services-squares-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   The card

   No aspect-ratio. Five earlier versions of this tile were square, and a
   311px square left about 95px of nothing in the middle no matter what went
   into it -- the height was decided by the width rather than by the
   content. Here the height is whatever the mark, the name and one row of
   tags need, so there is no void to fill. At four columns that comes out
   near 4:3 on its own.

   Everything is centred. The arrow is taken out of the flow so it holds the
   corner without pulling the stack off centre.
   -------------------------------------------------------------------------- */

.svc-sq {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 2.1rem 1.5rem 1.9rem;
    border: 1px solid rgba(242, 100, 48, 0.24);
    border-radius: 20px;
    background: linear-gradient(-158deg, rgba(52, 47, 45, 0.95) 0%,
                                        rgba(34, 30, 29, 0.96) 100%);
    text-align: center;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;
}

/* a soft wash from the corner the arrow sits in */
.svc-sq::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 100, 48, 0.16), transparent 70%);
    opacity: 0.45;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.svc-sq:hover {
    border-color: rgba(242, 100, 48, 0.7);
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(242, 100, 48, 0.16);
}

.svc-sq:hover::before { opacity: 1; }

.svc-sq-go {
    position: absolute;
    top: 1.15rem;
    left: 1.15rem;
    z-index: 1;
    font-size: 0.95rem;
    color: var(--color-muted);
    opacity: 0.45;
    transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.svc-sq:hover .svc-sq-go {
    opacity: 1;
    color: var(--color-orange);
    transform: translate(-2px, -2px);
}

.svc-sq-ic {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--color-orange);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-sq:hover .svc-sq-ic { transform: translateY(-3px); }

/* Uppercase, and one line. An earlier max-width of 12ch was wrapping four
   of the eleven; only "Social Media Marketing" is genuinely too long at
   this size, and it is labelled "Social Media" here. */
.svc-sq-name {
    position: relative;
    z-index: 1;
    font-family: var(--font-primary);
    font-size: clamp(1rem, 1.28vw, 1.28rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-light);
    white-space: nowrap;
}

/* One row, always. The three tags on each card are short enough to sit on
   a single line inside it -- "Performance Max" and "Landing Pages" were the
   two that pushed a set onto a second row, and both have shorter forms that
   are just as true. */
.svc-sq-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.38rem;
}

.svc-sq-tags em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    padding: 0.24rem 0.6rem;
    border: 1px solid rgba(249, 251, 255, 0.13);
    border-radius: 100px;
    white-space: nowrap;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.svc-sq:hover .svc-sq-tags em {
    border-color: rgba(242, 100, 48, 0.35);
    color: var(--color-body-text);
}

/* ---- the twelfth cell ---- */

.svc-sq--all {
    border-style: dashed;
    border-color: rgba(249, 251, 255, 0.2);
    background: transparent;
}

.svc-sq--all:hover {
    border-color: rgba(242, 100, 48, 0.6);
    box-shadow: none;
}

.svc-sq--all .svc-sq-go { opacity: 1; }

/* --------------------------------------------------------------------------
   Narrow

   The column count drops, the squares stay square. Below 900px the cell is
   about 156px across and the tags stop fitting -- two of them wrap to three
   lines and push the name out of the box -- so they come off and the icon
   and name keep the square on their own.
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .services-squares-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .services-squares-section { padding: 5rem 0; }
    .services-squares-wrap { padding: 0 1.5rem; }
    .services-squares-head { margin-bottom: 2.5rem; }

    .services-squares-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
    }

    .svc-sq {
        gap: 0.7rem;
        padding: 1.6rem 1rem 1.4rem;
        border-radius: 16px;
    }

    /* three tags will not fit across a 156px card at any size worth reading */
    .svc-sq-tags { display: none; }

    .svc-sq-ic { font-size: 2.3rem; }

    /* At this width "VIDEO PRODUCTION" runs past the card on one line, so
       the names wrap and both lines are reserved to keep the marks level. */
    .svc-sq-name {
        font-size: 0.86rem;
        white-space: normal;
        min-height: 2.4em;
    }

    .svc-sq-go { top: 0.9rem; left: 0.9rem; opacity: 0.8; }
}

/* ==========================================================================
   /services/ — the eleven, in four families

   The home page shows the same eleven as bare cards and sends anyone who
   wants more here, so this page is that card plus the two things the home
   page deliberately leaves out: a sentence saying what the service is, and
   the family heading that says how it relates to the others.

   The card is the home page's, turned left-aligned. A paragraph centred
   under a centred name is hard to read at any width, and the eleven names
   are short enough that left-aligning them costs nothing.
   ========================================================================== */

.services-grid-section {
    position: relative;
    width: 100%;
    background-color: var(--color-dark);
    padding: 5rem 0 7rem;
}

.srv-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    display: grid;
    gap: 4.5rem;
}

/* --------------------------------------------------------------------------
   A family

   The heading sits in its own column to the left of its cards rather than
   as a band above them, so the eye reads down four headings on one axis
   and the cards stay one continuous field to their right.
   -------------------------------------------------------------------------- */

.srv-family {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2.5rem;
    align-items: center;
    padding-top: 2.25rem;
    border-top: 1px solid rgba(249, 251, 255, 0.14);
}

.srv-family:first-child { padding-top: 0; border-top: 0; }

.srv-family-title {
    font-family: var(--font-primary);
    font-size: clamp(1.4rem, 1.9vw, 1.85rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-light);
    margin: 0 0 0.55rem;
}

.srv-family-line {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-muted);
    margin: 0;
}

.srv-family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   A card
   -------------------------------------------------------------------------- */

.srv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 2rem 1.5rem 1.75rem;
    border: 1px solid rgba(242, 100, 48, 0.24);
    border-radius: 20px;
    background: linear-gradient(-158deg, rgba(52, 47, 45, 0.95) 0%,
                                        rgba(34, 30, 29, 0.96) 100%);
    text-align: center;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.3s ease;
}

.srv-card::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 100, 48, 0.16), transparent 70%);
    opacity: 0.45;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.srv-card:hover {
    border-color: rgba(242, 100, 48, 0.7);
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(242, 100, 48, 0.16);
}

.srv-card:hover::before { opacity: 1; }

.srv-card-go {
    position: absolute;
    top: 1.35rem;
    left: 1.35rem;
    z-index: 1;
    font-size: 0.95rem;
    color: var(--color-muted);
    opacity: 0.45;
    transition: opacity 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.srv-card:hover .srv-card-go {
    opacity: 1;
    color: var(--color-orange);
    transform: translate(-2px, -2px);
}

.srv-card-ic {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 3rem;
    line-height: 1;
    color: var(--color-orange);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.srv-card:hover .srv-card-ic { transform: translateY(-3px); }

.srv-card-name {
    position: relative;
    z-index: 1;
    font-family: var(--font-primary);
    font-size: clamp(1.05rem, 1.3vw, 1.3rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--color-light);
    margin: 0;

    /* "Social Media Marketing" is the only one of the eleven that wraps in
       a card this wide, and it was making its whole family 24px taller than
       the other three. Both lines are reserved so every card on the page is
       the same height. */
    min-height: 2.4em;
}

.srv-card-p {
    position: relative;
    z-index: 1;
    flex: 1;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-body-text);
    margin: 0;
}

.srv-card-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.38rem;
    margin-top: 0.15rem;
}

.srv-card-tags em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    padding: 0.24rem 0.6rem;
    border: 1px solid rgba(249, 251, 255, 0.13);
    border-radius: 100px;
    white-space: nowrap;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.srv-card:hover .srv-card-tags em {
    border-color: rgba(242, 100, 48, 0.35);
    color: var(--color-body-text);
}

/* the cell the AI family leaves open */
.srv-card--ask {
    border-style: dashed;
    border-color: rgba(249, 251, 255, 0.2);
    background: transparent;
}

.srv-card--ask:hover {
    border-color: rgba(242, 100, 48, 0.6);
    box-shadow: none;
}

.srv-card--ask .srv-card-go { opacity: 1; }

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
    .srv-family {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        align-items: start;
    }
}

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

    /* three services over two columns leave the last one alone in its row */
    .srv-family-grid > *:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 760px) {
    .services-grid-section { padding: 3.5rem 0 5rem; }
    .srv-wrap { padding: 0 1.5rem; gap: 3rem; }

    .srv-family-grid {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }

    .srv-family-grid > *:last-child:nth-child(odd) { grid-column: span 1; }

    .srv-card { padding: 1.5rem 1.35rem 1.4rem; border-radius: 16px; }
    .srv-card-ic { font-size: 2.4rem; }
    .srv-card-go { top: 1.1rem; left: 1.1rem; opacity: 0.8; }
}

/* --------------------------------------------------------------------------
   Portfolio pager

   Six projects to a page. It replaces a "Load More" button that only ever
   went forward, and it hides itself while everything fits on one page.
   -------------------------------------------------------------------------- */

.web-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 3.5rem auto 0;
}

.web-pager[hidden] { display: none; }

.web-pager-nums { display: flex; gap: 0.45rem; }

.web-pager-num,
.web-pager-arrow {
    min-width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0 0.7rem;
    border: 1px solid rgba(249, 251, 255, 0.14);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.web-pager-num:hover,
.web-pager-arrow:not(:disabled):hover {
    border-color: rgba(242, 100, 48, 0.6);
    color: var(--color-light);
}

.web-pager-num.is-current {
    border-color: var(--color-orange);
    background: rgba(242, 100, 48, 0.12);
    color: var(--color-light);
}

.web-pager-arrow:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 600px) {
    .web-pager { gap: 0.4rem; margin-top: 2.5rem; }
    .web-pager-num, .web-pager-arrow { min-width: 38px; height: 38px; font-size: 0.78rem; }
}

/* --------------------------------------------------------------------------
   Cross-reference out of one portfolio into the others
   -------------------------------------------------------------------------- */

.web-crossref-section {
    width: 100%;
    background-color: var(--color-dark);
    padding: 5rem 0 1rem;
}

.web-crossref-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
}

.web-crossref-lead {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-muted);
    margin: 0 0 1.5rem;
}

.web-crossref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.web-crossref-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.6rem;
    padding: 1.6rem 1.6rem 1.7rem;
    border: 1px solid rgba(242, 100, 48, 0.24);
    border-radius: 18px;
    background: linear-gradient(-158deg, rgba(52, 47, 45, 0.95) 0%,
                                        rgba(34, 30, 29, 0.96) 100%);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.web-crossref-card:hover {
    border-color: rgba(242, 100, 48, 0.7);
    transform: translateY(-4px);
}

.web-crossref-card--all {
    border-style: dashed;
    border-color: rgba(249, 251, 255, 0.2);
    background: transparent;
}

.web-crossref-ic {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(249, 251, 255, 0.14);
    color: var(--color-orange);
    font-size: 1.2rem;
}

.web-crossref-name {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-light);
}

.web-crossref-note {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-body-text);
}

.web-crossref-go {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    font-size: 0.95rem;
    color: var(--color-muted);
    opacity: 0.45;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.web-crossref-card:hover .web-crossref-go { opacity: 1; color: var(--color-orange); }

@media (max-width: 900px) {
    .web-crossref-section { padding: 3.5rem 0 0.5rem; }
    .web-crossref-wrap { padding: 0 1.5rem; }
    .web-crossref-grid { grid-template-columns: 1fr; gap: 0.9rem; }
    .web-crossref-go { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Lightbox arrows (web portfolio)

   Minimal on purpose: a caret, no plate, no ring. The branding portfolio's
   .lightbox-nav-btn is a filled circular button; that weight either side of
   a screenshot competes with the thing it exists to reveal, so this one is
   the glyph alone. It sits outside the image on a wide screen and drops to
   the lower corners on a narrow one, where there is no room beside it.
   -------------------------------------------------------------------------- */

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(249, 251, 255, 0.55);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox-nav[hidden] { display: none; }

.lightbox-nav:hover { color: var(--color-light); }

.lightbox-nav--prev { right: -0.5rem; }
.lightbox-nav--next { left: -0.5rem; }

.lightbox-nav--prev:hover { transform: translateY(-50%) translateX(3px); }
.lightbox-nav--next:hover { transform: translateY(-50%) translateX(-3px); }

.lightbox-nav:focus-visible {
    outline: 2px solid var(--color-orange);
    outline-offset: 4px;
    border-radius: 8px;
}

.lightbox-img { transition: opacity 0.2s ease; }

@media (max-width: 900px) {
    .lightbox-nav {
        top: auto;
        bottom: 0.25rem;
        transform: none;
        width: 46px;
        height: 46px;
        font-size: 1.6rem;
        color: rgba(249, 251, 255, 0.75);
    }

    .lightbox-nav--prev { right: 0.5rem; }
    .lightbox-nav--next { left: 0.5rem; }
    .lightbox-nav--prev:hover,
    .lightbox-nav--next:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Branding dossier, restacked

   The dossier was built as one compact row: a title on the left and a pill
   holding two values on the right, inside a 700px card. A paragraph and
   three more specs do not fit that shape -- the title and the summary ran
   into each other and five cells were squeezed onto a single line.

   So the card widens, the dossier becomes a column, and the specs become a
   grid of labelled cells rather than a pill of bare values.
   -------------------------------------------------------------------------- */

.brand-unit-container { max-width: 880px; padding: 1.5rem 1.6rem 1.6rem; }

.brand-unit-dossier {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
}

.brand-unit-main-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.brand-unit-title { font-size: clamp(1.35rem, 1.7vw, 1.6rem); }

.brand-unit-summary {
    margin: 0.7rem 0 0;
    font-size: 0.93rem;
    line-height: 1.7;
    color: var(--color-body-text);
    max-width: 62ch;
}

.brand-specs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(249, 251, 255, 0.06);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}

.spec-cell {
    display: grid;
    grid-template-columns: 1.05rem 1fr;
    align-items: start;
    gap: 0.5rem;
}

.spec-cell i { margin-top: 0.15rem; }

.spec-cell-value {
    font-size: 0.78rem;
    font-weight: 700;
    color: #eae7e4;
    line-height: 1.35;
}

.spec-cell-label {
    grid-column: 2;
    display: block;
    margin-top: 0.15rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-muted);
    opacity: 0.75;
}

@media (max-width: 700px) {
    .brand-unit-container { padding: 1.2rem 1.1rem 1.3rem; }
    .brand-specs-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
    .brand-unit-summary { font-size: 0.88rem; }
}

@media (max-width: 420px) {
    .brand-specs-grid { grid-template-columns: 1fr; }
}





/* ==BLOCK perf== */
/* --------------------------------------------------------------------------
   Google Ads portfolio

   A paid-media result has nothing to photograph, so this page is numbers.
   The summary states what the six add up to, the chart puts their cost per
   conversion on one axis, and each campaign then gets its own row of five
   figures with a paragraph saying what they mean.

   Two colours, two meanings: orange is what was spent, green is what came
   back. Nothing else on the page is tinted.
   -------------------------------------------------------------------------- */

.perf-summary-section { padding: 0 2rem 1rem; }

.perf-summary-wrap {
    max-width: 1080px;
    margin: 0 auto;
}

.perf-summary-lead {
    margin: 0 0 2rem;
    max-width: 74ch;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-muted);
}

.perf-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(249, 251, 255, 0.10);
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 18px;
    overflow: hidden;
}

.perf-summary-cell {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1.4rem 1.4rem 1.5rem;
    background: var(--color-dark, #2F2B29);
}

.perf-summary-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 0.35rem;
    border-radius: 10px;
    background: rgba(249, 251, 255, 0.06);
    color: var(--color-muted);
    font-size: 1.05rem;
}

.perf-summary-val {
    font-family: var(--font-heavy, inherit);
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-light);
}

.perf-summary-lbl {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* what the money produced -- the one cell in the summary that is a return */
.perf-summary-cell--yield .perf-summary-val { color: var(--color-green); }

.perf-summary-cell--yield .perf-summary-ic {
    background: rgba(166, 212, 158, 0.12);
    color: var(--color-green);
}

.perf-summary-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
    font-size: 0.87rem;
    line-height: 1.65;
    color: var(--color-muted);
}

.perf-summary-note i { flex: none; margin-top: 0.15rem; font-size: 1rem; color: var(--color-green); }

/* ---- the chart ---------------------------------------------------------- */

.perf-chart-section { padding: 3.5rem 2rem 1rem; }

.perf-chart-wrap { max-width: 1080px; margin: 0 auto; }

.perf-chart-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-light);
}

.perf-chart-title i { font-size: 1.35rem; color: var(--color-orange); }

.perf-chart-lead {
    margin: 0 0 2rem;
    max-width: 72ch;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-muted);
}

.perf-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    background: rgba(0, 0, 0, 0.22);
}

.perf-bar-row {
    display: grid;
    grid-template-columns: 210px 1fr 92px;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(249, 251, 255, 0.06);
}

.perf-bar-row:last-child { border-bottom: 0; }

.perf-bar-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-light);
}

.perf-bar-name i { flex: none; font-size: 1rem; color: var(--color-muted); }

.perf-bar-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(249, 251, 255, 0.07);
    overflow: hidden;
}

.perf-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(-90deg, rgba(242, 100, 48, 0.55), var(--color-orange));
}

/* A chart of costs is orange, a chart of gains is green -- the same rule the
   rest of the page follows, so the two portfolios read consistently even
   though one is measuring money out and the other growth in. */
.perf-bar-chart--gain .perf-bar-fill {
    background: linear-gradient(-90deg, rgba(166, 212, 158, 0.35), var(--color-green));
}

.perf-chart-title--gain i { color: var(--color-green); }

.perf-bar-val {
    text-align: left;
    font-family: var(--font-heavy, inherit);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-light);
}

.perf-bar-sub {
    grid-column: 2 / -1;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

/* ---- one campaign ------------------------------------------------------- */

.perf-case { padding: 2rem; }

.perf-unit-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 2.1rem 2.2rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.22);
}

.perf-unit-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

/* a label, not a value: neutral, with the industry mark doing the colour */
.perf-unit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.75rem;
    border: 1px solid rgba(249, 251, 255, 0.14);
    border-radius: 999px;
    background: rgba(249, 251, 255, 0.05);
    color: var(--color-light);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.perf-unit-badge i { font-size: 0.95rem; color: var(--color-green); }

.perf-unit-channel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

.perf-unit-channel i { color: var(--color-orange); }

.perf-unit-title {
    margin: 0 0 0.6rem;
    font-size: 1.55rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--color-light);
}

.perf-unit-blurb {
    margin: 0 0 1.6rem;
    max-width: 68ch;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.perf-unit-headline {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 1.5rem;
}

.perf-kpi-block { flex: none; display: flex; flex-direction: column; gap: 0.3rem; }

/* The headline count stays white. Turning six 3rem numbers green only moved
   the problem from one colour to the other; green does its work at accent
   size -- the bar under the number, the marks, the summary cell -- which is
   what "a touch" means. */
.perf-kpi-num {
    font-family: var(--font-heavy, inherit);
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-light);
}

.perf-kpi-sub {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.64rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.perf-kpi-sub i { font-size: 0.95rem; color: var(--color-green); }

.perf-kpi-bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(249, 251, 255, 0.07);
    overflow: hidden;
}

.perf-kpi-progress {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(-90deg, rgba(166, 212, 158, 0.35), var(--color-green));
}

.perf-kpi-progress--plain {
    background: linear-gradient(-90deg, rgba(249, 251, 255, 0.12), rgba(249, 251, 255, 0.34));
}

.perf-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(249, 251, 255, 0.10);
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 14px;
    overflow: hidden;
}

/* space-between, not a fixed label height: a two-line label next to a
   one-line one used to push its value down a row and break the baseline.
   Grid cells already stretch to the tallest in the row, so pinning the value
   to the bottom keeps every figure on one line however the labels wrap. */
/* After the base rule, not before it: same specificity, so the later one
   wins. The ads cards report five figures, the SEO cards four. */
.perf-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }

.perf-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 1rem 1rem 1.05rem;
    background: var(--color-dark, #2F2B29);
}

.perf-stat-lbl {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.62rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.perf-stat-lbl i { flex: none; font-size: 0.95rem; color: rgba(249, 251, 255, 0.4); }

.perf-stat-val {
    font-family: var(--font-heavy, inherit);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-light);
    white-space: nowrap;
}

/* ---- the two panels an SEO case carries -------------------------------- */

.perf-story-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.4rem;
}

.perf-story {
    padding: 1.15rem 1.25rem 1.3rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 14px;
    background: rgba(249, 251, 255, 0.025);
}

/* The panels are the one place on this page where both colours belong at
   size: a problem and the work that answered it, side by side. Kept to a
   tint so they read as a pair rather than as two warnings. */
.perf-story--before {
    border-color: rgba(242, 100, 48, 0.22);
    background: rgba(242, 100, 48, 0.045);
}

.perf-story--after {
    border-color: rgba(166, 212, 158, 0.22);
    background: rgba(166, 212, 158, 0.045);
}

.perf-story-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-light);
}

/* the problem is orange, the work that fixed it is green */
.perf-story--before .perf-story-head i { color: var(--color-orange); font-size: 1rem; }
.perf-story--after .perf-story-head i { color: var(--color-green); font-size: 1rem; }

.perf-story p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.perf-unit-note {
    margin: 1.4rem 0 0;
    max-width: 74ch;
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--color-muted);
}

/* ---- narrower ----------------------------------------------------------- */

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

    /* five cells in three columns leave a two-wide hole; the last one takes it */
    .perf-stat-grid { grid-template-columns: repeat(3, 1fr); }
    .perf-stat:last-child:nth-child(3n + 2) { grid-column: span 2; }

    /* four divides by two exactly, so it never needs the span rule */
    .perf-stat-grid--4 { grid-template-columns: repeat(2, 1fr); }

    .perf-bar-row { grid-template-columns: 170px 1fr 84px; }
}

@media (max-width: 720px) {
    .perf-summary-section,
    .perf-chart-section,
    .perf-case { padding-right: 1.2rem; padding-left: 1.2rem; }

    .perf-summary-grid { grid-template-columns: 1fr; }
    .perf-summary-val { font-size: 1.6rem; }

    .perf-bar-chart { padding: 1rem 1.1rem; }
    .perf-bar-row { grid-template-columns: 1fr 76px; gap: 0.5rem 0.8rem; }
    .perf-bar-name { grid-column: 1 / -1; }
    .perf-bar-sub { grid-column: 1 / -1; }

    .perf-unit-container { padding: 1.5rem 1.3rem 1.6rem; }
    .perf-unit-title { font-size: 1.3rem; }

    .perf-unit-headline { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .perf-kpi-bar { width: 100%; }
    .perf-kpi-num { font-size: 2.5rem; }

    .perf-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .perf-stat:last-child:nth-child(odd) { grid-column: span 2; }

    .perf-story-grid { grid-template-columns: 1fr; gap: 0.8rem; }
}
/* ==END perf== */



/* ==BLOCK aiauto== */
/* --------------------------------------------------------------------------
   AI automation portfolio

   The flows are the content. An automation has nothing to photograph, so each
   case is drawn as the workflow the brief describes and animated at the pace
   it would actually run: one stage every 0.9s, a pulse crossing each link,
   the node at the far end lighting as it lands.
   -------------------------------------------------------------------------- */

.aia-intro-section { padding: 0 2rem 1rem; }
.aia-intro-wrap { max-width: 1080px; margin: 0 auto; }

.aia-intro-lead {
    margin: 0;
    max-width: 74ch;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-muted);
}

.aia-intro-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1.2rem 0 0;
    font-size: 0.87rem;
    line-height: 1.65;
    color: var(--color-muted);
}

.aia-intro-note i { flex: none; margin-top: 0.15rem; font-size: 1rem; color: var(--color-green); }

/* ---- one case ----------------------------------------------------------- */

.aia-case { padding: 2.4rem 2rem 0; }

.aia-case-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 2.1rem 2.2rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.22);
}

.aia-case-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.aia-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.75rem;
    border: 1px solid rgba(249, 251, 255, 0.14);
    border-radius: 999px;
    background: rgba(249, 251, 255, 0.05);
    color: var(--color-light);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.aia-badge i { font-size: 0.95rem; color: var(--color-green); }

.aia-case-num {
    font-family: var(--font-heavy, inherit);
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(249, 251, 255, 0.14);
}

.aia-case-title {
    margin: 0 0 1.6rem;
    font-size: 1.55rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--color-light);
}

.aia-case-text {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.aia-block {
    padding: 1.15rem 1.25rem 1.3rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 14px;
    background: rgba(249, 251, 255, 0.025);
}

/* the problem and the work that answered it, the same pair the SEO cases use */
.aia-block--challenge {
    border-color: rgba(242, 100, 48, 0.22);
    background: rgba(242, 100, 48, 0.045);
}

.aia-block--solution {
    border-color: rgba(166, 212, 158, 0.22);
    background: rgba(166, 212, 158, 0.045);
}

.aia-sub {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.6rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-light);
}

.aia-block--challenge .aia-sub i { color: var(--color-orange); font-size: 1rem; }
.aia-block--solution .aia-sub i { color: var(--color-green); font-size: 1rem; }

.aia-block p {
    margin: 0 0 0.7rem;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-muted);
}

.aia-block p:last-child { margin-bottom: 0; }

/* ---- the flow ----------------------------------------------------------- */

/*  One stage lasts --beat, and the pulse crosses a link in exactly one beat.
    That has to be a literal percentage of the cycle, because a keyframe
    selector cannot hold a calc() -- the browser silently drops the whole stop,
    which it did: the pulse crawled across the full six seconds instead of
    crossing in one. So the cycle is a fixed ten beats for every flow, the
    crossing is a flat 10%, and the longest flow (eight stages) still has two
    beats of rest at the end. Shorter flows simply rest longer, which also
    means all four diagrams share one rhythm and pause together. */
.aia-flow {
    --beat: 0.9s;
    --cycle: calc(10 * var(--beat));

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin: 1.6rem 0 0;
    padding: 1.7rem 1.2rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 18px;
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(242, 100, 48, 0.05), transparent 60%),
        rgba(0, 0, 0, 0.26);
}

.aia-stage { display: flex; flex-direction: column; gap: 0.4rem; }

/* A stage holding several nodes is a fan-in or a fan-out, and a single link
   arriving at the middle of three stacked boxes reads as pointing at the
   middle one. The spine gathers them: drawn on the side a link actually
   arrives from, so the first stage has no spine on its left and the last has
   none on its right. */
.aia-stage--stack { position: relative; }

.aia-stage--stack:not(:first-child)::before,
.aia-stage--stack:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    bottom: 21px;
    width: 1px;
    background: rgba(249, 251, 255, 0.16);
}

.aia-stage--stack:not(:first-child)::before { right: -0.15rem; }
.aia-stage--stack:not(:last-child)::after { left: -0.15rem; }

/* and a stub from the spine to each node in the stack */
.aia-stage--stack .aia-node { position: relative; }

.aia-stage--stack:not(:first-child) .aia-node::before,
.aia-stage--stack:not(:last-child) .aia-node::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0.15rem;
    height: 1px;
    background: rgba(249, 251, 255, 0.16);
}

.aia-stage--stack:not(:first-child) .aia-node::before { right: -0.15rem; }
.aia-stage--stack:not(:last-child) .aia-node::after { left: -0.15rem; }

.aia-node {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    min-height: 42px;
    border: 1px solid rgba(249, 251, 255, 0.12);
    border-radius: 12px;
    background: rgba(12, 11, 10, 0.9);
    transition: border-color 0.3s ease;

    /* every node in a stage wakes together, one beat after the stage before */
    animation: aiaWake var(--cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--beat));
}

.aia-node-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(249, 251, 255, 0.06);
    color: var(--color-muted);
    font-size: 0.95rem;
    transition: color 0.3s ease, background 0.3s ease;
}

.aia-node-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-light);
    white-space: nowrap;
}

/* what arrives, what does the work, what comes back */
.aia-node--engine { border-color: rgba(242, 100, 48, 0.32); }
.aia-node--engine .aia-node-ic { background: rgba(242, 100, 48, 0.14); color: var(--color-orange); }

.aia-node--out { border-color: rgba(166, 212, 158, 0.34); }
.aia-node--out .aia-node-ic { background: rgba(166, 212, 158, 0.14); color: var(--color-green); }

.aia-node--wait .aia-node-ic { color: rgba(249, 251, 255, 0.45); }

/* the link, and the pulse crossing it */
.aia-link {
    position: relative;
    flex: none;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: rgba(249, 251, 255, 0.12);
    overflow: hidden;
}

.aia-link::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(-90deg, transparent, var(--color-orange));
    animation: aiaPulse var(--cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--beat));
}

/* one beat -- 10% of the cycle -- to cross, then out of the way */
@keyframes aiaPulse {
    0%          { transform: translateX(115%); opacity: 0; }
    1%          { opacity: 1; }
    9%          { opacity: 1; }
    10%, 100%   { transform: translateX(-250%); opacity: 0; }
}

/* A node's own delay puts its 0% at the moment the pulse before it lands, so
   the highlight belongs at the very start of its cycle, not a fifth in. */
@keyframes aiaWake {
    0%        { border-color: rgba(249, 251, 255, 0.12); }
    3%        { border-color: rgba(249, 251, 255, 0.45); }
    14%, 100% { border-color: rgba(249, 251, 255, 0.12); }
}

/* ---- the impact --------------------------------------------------------- */

.aia-impact { margin-top: 1.6rem; }

.aia-impact-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(249, 251, 255, 0.10);
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 14px;
    overflow: hidden;
}

.aia-impact-cell {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1rem 1rem 1.1rem;
    background: var(--color-dark, #2F2B29);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-muted);
}

.aia-impact-ic {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: rgba(166, 212, 158, 0.12);
    color: var(--color-green);
    font-size: 0.95rem;
}

/* ---- narrower ----------------------------------------------------------- */

@media (max-width: 1080px) {
    /* five cells in three columns leave a two-wide hole; the last one takes it */
    .aia-impact-grid { grid-template-columns: repeat(3, 1fr); }
    .aia-impact-cell:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

@media (max-width: 720px) {
    .aia-intro-section,
    .aia-case { padding-right: 1.2rem; padding-left: 1.2rem; }

    .aia-case-container { padding: 1.5rem 1.3rem 1.6rem; }
    .aia-case-title { font-size: 1.3rem; }

    .aia-case-text { grid-template-columns: 1fr; }

    .aia-impact-grid { grid-template-columns: repeat(2, 1fr); }
    .aia-impact-cell:last-child:nth-child(odd) { grid-column: span 2; }

    /* the flow turns and runs down the page; the links turn with it */
    .aia-flow { flex-direction: column; align-items: stretch; padding: 1.2rem 0.9rem; }
    .aia-stage { align-items: stretch; }
    .aia-node-label { white-space: normal; }

    .aia-link {
        width: 2px;
        height: 26px;
        margin: 0 auto;
    }

    /* the spine and its stubs are drawn for a flow running across the page;
       stacked vertically the nodes already read as one group */
    .aia-stage--stack::before,
    .aia-stage--stack::after,
    .aia-stage--stack .aia-node::before,
    .aia-stage--stack .aia-node::after { display: none; }

    .aia-link::after {
        inset: 0 0 auto 0;
        width: auto;
        height: 40%;
        background: linear-gradient(-180deg, transparent, var(--color-orange));
        animation-name: aiaPulseDown;
    }
}

@keyframes aiaPulseDown {
    0%          { transform: translateY(-115%); opacity: 0; }
    1%          { opacity: 1; }
    9%          { opacity: 1; }
    10%, 100%   { transform: translateY(250%); opacity: 0; }
}

/* A diagram that holds still is still readable -- the order is left to right
   either way -- so under reduced motion it simply stops. */
@media (prefers-reduced-motion: reduce) {
    .aia-node,
    .aia-link::after { animation: none; }
    .aia-link::after { opacity: 0.55; transform: none; }
}
/* ==END aiauto== */

/* ==BLOCK gfx== */
/* --------------------------------------------------------------------------
   Graphic design portfolio

   Justified rows. flex-basis 0 with flex-grow set to each image's aspect ratio
   gives every item in a row the same height and fills the row exactly -- the
   one arrangement that copes with ratios from 0.56 to 3.56 without cropping
   anything. Below 820px it becomes two masonry columns instead.
   -------------------------------------------------------------------------- */

.gfx-wall-section { padding: 0 2rem 1rem; }

.gfx-wall {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gfx-row {
    display: flex;
    gap: 12px;
}

/*  flex-grow is the image's own ratio and flex-basis is zero, so width is
    (r / sum r) of the free space and height is (free space / sum r) -- the
    same for every item on the row. That identity is the whole layout. */
.gfx-item {
    flex: var(--r) 1 0;
    position: relative;
    display: block;
    padding: 0;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 10px;
    overflow: hidden;
    background: #0d0c0b;
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.gfx-item:hover {
    border-color: rgba(242, 100, 48, 0.5);
    transform: translateY(-2px);
}

.gfx-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gfx-item:hover::after { opacity: 1; }

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

/* the overlay is the one the video walls use; an image sits in it unchanged */
.vid-lb-el { max-width: 100%; max-height: 100%; }

/* ---- load more ---------------------------------------------------------- */

/*  display:none, not visibility or opacity: a row that is not laid out never
    fetches its thumbnails, which is the whole point. The markup stays in the
    page, so a crawler and anyone with JavaScript off see all of it.

    Repeated inside the mobile block below, where .gfx-row is given
    display:contents and would otherwise override this by source order. */
.gfx-row--rest { display: none; }

.gfx-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    margin: 2.4rem auto 0;
}

.gfx-more {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.7rem;
    border: 1px solid rgba(249, 251, 255, 0.16);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--color-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.gfx-more i { font-size: 1rem; color: var(--color-orange); transition: transform 0.25s ease; }

.gfx-more:hover {
    border-color: rgba(242, 100, 48, 0.55);
    background: rgba(242, 100, 48, 0.08);
}

.gfx-more:hover i { transform: translateY(2px); }

.gfx-more-count {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    color: var(--color-muted);
}

/* ---- narrower ----------------------------------------------------------- */

@media (max-width: 820px) {
    .gfx-wall-section { padding-right: 1.2rem; padding-left: 1.2rem; }

    /* Rows stop meaning anything at this width: six across a phone is six
       55px thumbnails. The wrappers step out of the box tree and the wall
       becomes two masonry columns, which varied shapes suit far better. */
    .gfx-wall {
        display: block;
        column-count: 2;
        column-gap: 8px;
    }

    .gfx-row { display: contents; }

    /* ...but not the ones behind Load More. This rule has to be repeated
       here: .gfx-row--rest and .gfx-row have the same specificity, so the
       display:contents above -- being later in the stylesheet -- was winning,
       and every hidden row rendered anyway. On a phone Load More did nothing
       at all and the whole wall was there from the start. */
    .gfx-row--rest { display: none; }

    .gfx-item {
        width: 100%;
        margin: 0 0 8px;
        break-inside: avoid;
        border-radius: 8px;
    }

    .gfx-img { height: auto; }
}

/* One column only on the narrowest phones. At 375 two columns give a 164px
   tile, which is a perfectly readable thumbnail for something you tap to
   enlarge -- and thirty-one images one per screen is a very long scroll. */
@media (max-width: 360px) {
    .gfx-wall { column-count: 1; }
}
/* ==END gfx== */

/* ==BLOCK video== */
/* --------------------------------------------------------------------------
   Video portfolio

   A wall, not a list. Twelve columns: a reel takes three, a landscape film
   takes nine -- the width of three reels plus their gaps, and the same height
   to within half a pixel -- so a film drops into a row of reels and sits
   flush. Pressing a tile opens the film in the overlay below, because a
   255px-wide reel is not something anyone can watch in place.
   -------------------------------------------------------------------------- */

.vid-wall-section { padding: 0 2rem 1rem; }

.vid-wall {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
    max-width: 1080px;
    margin: 0 auto;
    align-items: start;
}

/* Span and start column both come off the tile. The planner decides them,
   because with films and reels sharing rows no CSS class knows enough: a
   short final row is centred by giving its first tile a start column. */
.vid-tile {
    grid-column: var(--start, auto) / span var(--span, 3);
    position: relative;
    margin: 0;
    aspect-ratio: var(--ratio, 16 / 9);
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    transition: border-color 0.3s ease;
}

.vid-tile:hover { border-color: rgba(242, 100, 48, 0.45); }

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

/* A piece whose own ratio does not match the slot it sits in is boxed to the
   slot and contained inside it, so the row stays flush and nothing is cropped.
   The letterbox is a few pixels of the tile's own black. */
.vid-tile--boxed .vid-poster { object-fit: contain; }

.vid-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: linear-gradient(-180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.34));
    cursor: pointer;
    transition: background 0.3s ease;
}

.vid-play:hover { background: linear-gradient(-180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.20)); }

.vid-play-ring {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--color-orange);
    color: #fff;
    font-size: 1.45rem;
    padding-right: 3px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    transition: transform 0.3s ease;
}

.vid-play:hover .vid-play-ring { transform: scale(1.08); }

/* ---- the enlarged player ------------------------------------------------ */

.vid-lb {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
}

.vid-lb[hidden] { display: none; }

body.vid-lb-open { overflow: hidden; }

/* the scrim is a button so a click anywhere off the film closes it, and so
   the keyboard can reach the same action */
.vid-lb-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(8, 7, 6, 0.92);
    backdrop-filter: blur(6px);
    cursor: pointer;
}

/* The width is worked out rather than left to the content. A flex item with
   only a max-width shrinks to the video's intrinsic size, which is how a
   854px-wide master ended up opening at 854px on a 1440 screen -- barely
   larger than the wall tile it came from. Deriving width from the height and
   the ratio makes every film fill the space it is given. */
.vid-lb-stage {
    position: relative;
    aspect-ratio: var(--r, 16 / 9);
    width: min(1100px, 84vw, calc(86vh * var(--rn, 1.778)));
    max-height: 86vh;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.vid-lb-el {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.vid-lb-close,
.vid-lb-nav {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: rgba(249, 251, 255, 0.6);
    cursor: pointer;
    transition: color 0.25s ease, transform 0.25s ease;
}

.vid-lb-nav { width: 52px; height: 52px; font-size: 2rem; }

.vid-lb-nav:hover { color: var(--color-light); transform: scale(1.12); }

.vid-lb-close {
    position: absolute;
    top: 1rem;
    left: 1.2rem;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
}

.vid-lb-close:hover { color: var(--color-light); }

/* ---- narrower ----------------------------------------------------------- */

/* On a phone a film goes full width and reels pair up; the planner widens the
   last tile if that would otherwise leave half a row empty. */
@media (max-width: 720px) {
    .vid-wall-section { padding-right: 1.2rem; padding-left: 1.2rem; }

    .vid-wall { gap: 0.5rem; }

    .vid-tile {
        grid-column: span var(--span-m, 6);
        border-radius: 12px;
    }

    .vid-play-ring { width: 44px; height: 44px; font-size: 1.1rem; }

    .vid-lb { padding: 1rem 0.3rem; }
    .vid-lb-stage {
        width: min(92vw, calc(74vh * var(--rn, 1.778)));
        max-height: 74vh;
    }

    /* the arrows move under the film rather than squeezing it from the sides */
    .vid-lb { flex-wrap: wrap; }
    .vid-lb-stage { order: 1; flex-basis: 100%; margin: 0 auto; }
    .vid-lb-nav { order: 2; width: 64px; height: 48px; }
}
/* ==END video== */

/* ==BLOCK smm== */
/* --------------------------------------------------------------------------
   Social media marketing portfolio

   The figures are the argument, so they are the design: a headline that counts
   up, one reach chart across all eight, and a reach bar inside every card on
   the same scale.
   -------------------------------------------------------------------------- */

.smm-sum-section { padding: 0 2rem 1rem; }
.smm-sum-wrap { max-width: 1080px; margin: 0 auto; }

.smm-sum-lead {
    margin: 0 0 2rem;
    max-width: 74ch;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-muted);
}

.smm-sum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(249, 251, 255, 0.10);
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 20px;
    overflow: hidden;
}

.smm-sum-cell {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.7rem 1.5rem 1.8rem;
    background: var(--color-dark, #2F2B29);
}

.smm-sum-ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 0.3rem;
    border-radius: 11px;
    background: rgba(249, 251, 255, 0.06);
    color: var(--color-muted);
    font-size: 1.1rem;
}

.smm-sum-val {
    font-family: var(--font-heavy, inherit);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--color-light);
    font-variant-numeric: tabular-nums;
}

.smm-sum-lbl {
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--color-muted);
}

/* what came back */
.smm-sum-cell--yield .smm-sum-val { color: var(--color-green); }
.smm-sum-cell--yield .smm-sum-ic {
    background: rgba(166, 212, 158, 0.12);
    color: var(--color-green);
}

.smm-sum-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1.4rem 0 0;
    font-size: 0.87rem;
    line-height: 1.65;
    color: var(--color-muted);
}

.smm-sum-note i { flex: none; margin-top: 0.15rem; font-size: 1rem; color: var(--color-green); }

/* ---- the chart ---------------------------------------------------------- */

.smm-chart-section { padding: 3.5rem 2rem 1rem; }
.smm-chart-wrap { max-width: 1080px; margin: 0 auto; }

.smm-chart-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.8rem;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-light);
}

.smm-chart-title i { font-size: 1.35rem; color: var(--color-green); }

.smm-chart-lead {
    margin: 0 0 2rem;
    max-width: 72ch;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-muted);
}

.smm-bar-chart {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    background: rgba(0, 0, 0, 0.22);
}

.smm-bar-row {
    display: grid;
    grid-template-columns: 210px 1fr 96px;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(249, 251, 255, 0.06);
}

.smm-bar-row:last-child { border-bottom: 0; }

.smm-bar-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-light);
}

.smm-bar-name i { flex: none; font-size: 1rem; color: var(--color-muted); }

.smm-bar-track,
.smm-reach-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: rgba(249, 251, 255, 0.07);
    overflow: hidden;
}

/*  The bar's resting width is --w, so a visitor with no scripting sees a full
    chart rather than an empty one.

    Only when scripting is available does it start at zero and get animated up
    -- the .js class is set in the head, before this stylesheet paints, so the
    bars are never briefly full before collapsing to nothing. Without that
    class the width below already equalled --w and the transition had nothing
    to play: the bars simply appeared, fully drawn. */
.smm-bar-fill,
.smm-reach-fill {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(-90deg, rgba(166, 212, 158, 0.35), var(--color-green));
    transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .smm-bar-fill,
.js .smm-reach-fill { width: 0; }

.smm-bar-val {
    text-align: left;
    font-family: var(--font-heavy, inherit);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-light);
    font-variant-numeric: tabular-nums;
}

/* ---- one case ----------------------------------------------------------- */

.smm-case { padding: 2.4rem 2rem 0; }

.smm-case-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 2rem 2.1rem 2.2rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.22);
    transition: border-color 0.4s ease;
}

.smm-case-container:hover { border-color: rgba(166, 212, 158, 0.28); }

.smm-case-tags {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.smm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.36rem 0.75rem;
    border: 1px solid rgba(249, 251, 255, 0.14);
    border-radius: 999px;
    background: rgba(249, 251, 255, 0.05);
    color: var(--color-light);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.smm-badge i { font-size: 0.95rem; color: var(--color-green); }

.smm-case-num {
    font-family: var(--font-heavy, inherit);
    font-size: 1.6rem;
    font-weight: 800;
    color: rgba(249, 251, 255, 0.14);
}

.smm-case-title {
    margin: 0 0 0.7rem;
    font-size: 1.55rem;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--color-light);
}

.smm-services {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.smm-services em {
    padding: 0.28rem 0.6rem;
    border-radius: 7px;
    background: rgba(249, 251, 255, 0.05);
    color: var(--color-muted);
    font-size: 0.65rem;
    font-style: normal;
    letter-spacing: 0.06em;
}

.smm-strategy {
    margin: 1.3rem 0 0;
    max-width: 78ch;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--color-muted);
}

/* the card's own reach bar, on the same scale as the chart above */
.smm-reach {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    margin: 1.4rem 0 1.2rem;
}

.smm-reach-lbl {
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.smm-reach-val {
    font-family: var(--font-heavy, inherit);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-green);
    font-variant-numeric: tabular-nums;
}

.smm-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: rgba(249, 251, 255, 0.10);
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 14px;
    overflow: hidden;
}

.smm-stat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1rem 1.1rem;
    background: var(--color-dark, #2F2B29);
}

.smm-stat-lbl {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.45;
    color: var(--color-muted);
}

.smm-stat-lbl i { flex: none; font-size: 0.95rem; color: rgba(249, 251, 255, 0.4); }

.smm-stat-val {
    font-family: var(--font-heavy, inherit);
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-light);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* cost is the one orange figure on a page otherwise about what came back */
.smm-stat-lbl i.ph-coins { color: var(--color-orange); }

/* ---- narrower ----------------------------------------------------------- */

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

    /* five cells in three columns leave a two-wide hole; the last one takes it */
    .smm-stat-grid { grid-template-columns: repeat(3, 1fr); }
    .smm-stat:last-child:nth-child(3n + 2) { grid-column: span 2; }

    .smm-bar-row { grid-template-columns: 170px 1fr 84px; }
}

@media (max-width: 720px) {
    .smm-sum-section,
    .smm-chart-section,
    .smm-case { padding-right: 1.2rem; padding-left: 1.2rem; }

    .smm-sum-grid { grid-template-columns: 1fr; }
    .smm-sum-val { font-size: 1.9rem; }

    .smm-bar-chart { padding: 1rem 1.1rem; }
    .smm-bar-row { grid-template-columns: 1fr 78px; gap: 0.5rem 0.8rem; }
    .smm-bar-name { grid-column: 1 / -1; }
    .smm-bar-track { grid-column: 1; }

    .smm-case-container { padding: 1.5rem 1.3rem 1.6rem; }
    .smm-case-title { font-size: 1.3rem; }

    .smm-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .smm-stat:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .smm-bar-fill,
    .smm-reach-fill { transition: none; }
}
/* ==END smm== */

/* ==BLOCK pf== */
/* --------------------------------------------------------------------------
   Portfolio listing

   Eleven disciplines in the four families the services page uses, in the same
   order, so moving between the two pages finds the same shape twice.
   -------------------------------------------------------------------------- */

.pf-intro-section { padding: 0 2rem 0.5rem; }
.pf-grid-section { padding: 1rem 2rem 2rem; }

.pf-wrap { max-width: 1180px; margin: 0 auto; }

.pf-intro-lead {
    margin: 0;
    max-width: 72ch;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-muted);
}

.pf-family { margin-top: 3.2rem; }
.pf-family:first-child { margin-top: 1.5rem; }

.pf-family-head { margin-bottom: 1.3rem; }

.pf-family-title {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-light);
}

.pf-family-line {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-muted);
}

.pf-family-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* the AI family has two, so the second one takes the empty third */
.pf-family-grid > .pf-card:last-child:nth-child(2) { grid-column: span 2; }

.pf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.6rem 1.5rem 1.5rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.22);
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

.pf-card:hover {
    border-color: rgba(242, 100, 48, 0.45);
    background: rgba(242, 100, 48, 0.05);
    transform: translateY(-3px);
}

.pf-card-go {
    position: absolute;
    top: 1.2rem;
    left: 1.2rem;
    color: rgba(249, 251, 255, 0.28);
    font-size: 1rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.pf-card:hover .pf-card-go {
    color: var(--color-orange);
    transform: translate(-2px, -2px);
}

.pf-card-ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.35rem;
    border-radius: 13px;
    background: rgba(166, 212, 158, 0.12);
    color: var(--color-green);
    font-size: 1.25rem;
}

.pf-card-name {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--color-light);
}

.pf-card-p {
    margin: 0;
    /* reserved so the count sits on one line across a row whatever the
       sentence length -- the same trick the service cards use for their tags */
    min-height: 3.4em;
    font-size: 0.87rem;
    line-height: 1.7;
    color: var(--color-muted);
}

/* ---- the services marquee ----------------------------------------------- */

.pf-slider-section {
    padding: 3.5rem 0 1rem;
    border-top: 1px solid rgba(249, 251, 255, 0.08);
    margin-top: 3.5rem;
}

/*  Faded at both ends so the links appear and leave rather than being cut
    off at a hard edge. */
.pf-slider {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/*  Two identical runs, and the track has no gap of its own -- each run carries
    a trailing one instead. That makes a run exactly half the track, so
    travelling -50% puts the second run where the first began, and the spacing
    across the join is the same as the spacing everywhere else.

    Spacing the runs with the track's own gap got the position right and the
    rhythm wrong: the join came out at double width and that wide gap travelled
    past once every cycle. */
.pf-slider-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: pfSlide 42s linear infinite;
}

.pf-slider-run {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-left: 0.7rem;
}

@keyframes pfSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

.pf-slider:hover .pf-slider-track,
.pf-slider-track:focus-within { animation-play-state: paused; }

.pf-slide {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
    padding: 0.7rem 1.1rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.pf-slide i { font-size: 1rem; color: var(--color-green); }

.pf-slide:hover,
.pf-slide:focus-visible {
    color: var(--color-light);
    border-color: rgba(242, 100, 48, 0.5);
    background: rgba(242, 100, 48, 0.07);
}

/* ---- narrower ----------------------------------------------------------- */

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

    /* three cards in two columns leave one on its own; it takes the row */
    .pf-family-grid > .pf-card:last-child:nth-child(odd) { grid-column: span 2; }

    /* ...but the AI pair fills a two-column row on its own, so the rule that
       widens its second card for the three-column layout has to be undone
       here. Left standing it pushed the first card onto a row by itself and
       stretched the second across the next one. */
    .pf-family-grid > .pf-card:last-child:nth-child(2) { grid-column: span 1; }

    .pf-card-p { min-height: 0; }
}

/*  Standing still it is just a row of links, so it stays usable: the track
    scrolls by hand instead of by itself. */
@media (prefers-reduced-motion: reduce) {
    .pf-slider { overflow-x: auto; }
    .pf-slider-track { animation: none; }
}

@media (max-width: 720px) {
    .pf-intro-section,
    .pf-grid-section { padding-right: 1.2rem; padding-left: 1.2rem; }

    .pf-slider-section { padding-top: 2.6rem; margin-top: 2.6rem; }
    .pf-slide { font-size: 0.66rem; padding: 0.6rem 0.9rem; }

    .pf-family-grid { grid-template-columns: 1fr; }
    .pf-family-grid > .pf-card:last-child:nth-child(odd),
    .pf-family-grid > .pf-card:last-child:nth-child(2) { grid-column: span 1; }

    .pf-family { margin-top: 2.4rem; }
    .pf-family-title { font-size: 1.15rem; }
}
/* ==END pf== */

/* ==BLOCK footer== */
/* --------------------------------------------------------------------------
   Site footer

   Four columns of equal standing: the company links and the social accounts,
   the eleven services in two groups, and how to reach the office. Every
   heading starts on the same line. A centred closing bar under them.
   -------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    width: 100%;
    border-top: 1px solid rgba(249, 251, 255, 0.09);
    /*  Layered over the page colour rather than replacing it: the footer is
        the same room a shade darker, and it stays correct if --color-dark
        ever moves. */
    background-color: var(--color-dark);
    background-image:
        radial-gradient(100% 70% at 50% 0%, rgba(242, 100, 48, 0.05), transparent 65%),
        linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.26));
    z-index: 10;
}

.ft-wrap {
    max-width: 1260px;
    width: 100%;
    margin: 0 auto;
    padding: 4.8rem 2.2rem 2.5rem;
}

.ft-grid {
    display: grid;
    grid-template-columns: 1.35fr 1.05fr 1.05fr 1.35fr;
    gap: 3.5rem;
    align-items: start;
}

.ft-col {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    min-width: 0;
}

/* ---- headings ----------------------------------------------------------- */

.ft-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 1.4rem;
    padding: 0;
    font-family: var(--font-primary);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-light);
}

.ft-kicker::before {
    content: "";
    flex: none;
    width: 2px;
    height: 12px;
    border-radius: 2px;
    background: var(--color-orange);
}

/* ---- link lists --------------------------------------------------------- */

/*  Indented past the heading tick (2px) and its gap (8px) so the links start
    on the same vertical as the heading first letter. */
.ft-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0 10px 0 0;
    list-style: none;
}

.ft-links a {
    display: inline-block;
    font-family: var(--font-primary);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.ft-links a:hover,
.ft-links a:focus-visible { color: var(--color-light); transform: translateX(-4px); }

/* ---- socials ------------------------------------------------------------ */

.ft-socials {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
}

.ft-social {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(249, 251, 255, 0.12);
    border-radius: 50%;
    background-color: rgba(249, 251, 255, 0.04);
    color: var(--color-light);
    font-size: 1.15rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.ft-social:hover,
.ft-social:focus-visible {
    background-color: var(--color-green);
    border-color: var(--color-green);
    color: var(--color-dark);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 6px 20px rgba(166, 212, 158, 0.45);
}

/* ---- contact ------------------------------------------------------------ */

.ft-contact {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    margin: 0;
    padding: 0 10px 0 0;
    list-style: none;
}

.ft-line {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
}

.ft-line--address { align-items: flex-start; }

.ft-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(166, 212, 158, 0.22);
    border-radius: 50%;
    background: rgba(166, 212, 158, 0.06);
    color: var(--color-green);
    font-size: 1.18rem;
    transition: all var(--transition-fast);
}

a.ft-line:hover .ft-badge,
a.ft-line:focus-visible .ft-badge {
    background: rgba(166, 212, 158, 0.14);
    border-color: var(--color-green);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 0 16px rgba(166, 212, 158, 0.4), inset 0 0 5px rgba(166, 212, 158, 0.22);
}

.ft-val {
    font-family: var(--font-primary);
    font-size: 0.93rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-light);
    transition: color 0.2s ease;
}

/* ---- the closing bar ---------------------------------------------------- */

.ft-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 3.8rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(249, 251, 255, 0.07);
    text-align: center;
}

.ft-bottom p {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 0.86rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-muted);
}

.ft-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 1.6rem;
}

.ft-legal a {
    font-family: var(--font-primary);
    font-size: 0.82rem;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ft-legal a:hover,
.ft-legal a:focus-visible { color: var(--color-orange); }

/* ---- narrower ----------------------------------------------------------- */

@media (max-width: 1160px) {
    .ft-grid { grid-template-columns: 1.25fr 1fr 1fr 1.25fr; gap: 2.2rem; }
}

@media (max-width: 900px) {
    .ft-grid { grid-template-columns: 1fr 1fr; gap: 2.6rem; }
}

@media (max-width: 680px) {
    .ft-wrap { padding: 3rem 1.2rem 2rem; }
    .ft-grid { grid-template-columns: 1fr; gap: 2.5rem; }

    /*  Six 38px circles and their gaps come to 272px, which no longer fits
        once the column is the width of the screen less its padding. */
    .ft-socials { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .ft-social:hover,
    a.ft-line:hover .ft-badge,
    .ft-links a:hover { transform: none; }
}
/* ==END footer== */

/* ==BLOCK navmega== */
/* --------------------------------------------------------------------------
   Header dropdown, two columns

   The Services and Portfolio menus carry eleven items each in the same two
   groups the footer uses. Everything not listed here comes from
   .nav-dropdown-menu above.
   -------------------------------------------------------------------------- */

.nav-dropdown-menu--mega {
    width: 520px;
    padding: 1.1rem 1rem 0.75rem;
}

.nav-mega {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem 1.1rem;
}

.nav-mega-col {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.nav-mega-kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 0.6rem;
    padding: 0 0.2rem;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(249, 251, 255, 0.42);
}

.nav-mega-kicker::before {
    content: "";
    flex: none;
    width: 2px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-orange);
}

/*  The second column is one item shorter, so the panel would end on an
    uneven edge; the row below closes it off. */
.nav-mega-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.7rem 0.95rem;
    border-top: 1px solid rgba(249, 251, 255, 0.08);
    border-radius: 0 0 10px 10px;
    color: rgba(249, 251, 255, 0.66);
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-mega-all i {
    font-size: 0.95rem;
    transition: transform var(--transition-fast);
}

.nav-mega-all:hover,
.nav-mega-all:focus-visible {
    background: rgba(242, 100, 48, 0.1);
    color: var(--color-orange);
}

.nav-mega-all:hover i,
.nav-mega-all:focus-visible i { transform: translateX(-3px); }

.nav-mega-all.active { color: var(--color-orange); }

/*  A wide panel centred under a menu item near the right-hand end would run
    off the page, so the Portfolio one hangs from its right edge instead. */
@media (max-width: 1320px) {
    .nav-item:nth-last-child(3) .nav-dropdown-menu--mega {
        right: auto;
        left: 0;
        transform: translateX(0) translateY(14px);
    }

    .nav-item:nth-last-child(3):hover .nav-dropdown-menu--mega {
        transform: translateX(0) translateY(2px);
    }
}

/* ---- the same two groups in the mobile drawer --------------------------- */

.mobile-sub-kicker {
    margin: 0.9rem 0 0.1rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(249, 251, 255, 0.4);
}

.mobile-sub-kicker:first-of-type { margin-top: 0.4rem; }

.mobile-sub-all {
    align-self: flex-start;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(242, 100, 48, 0.35);
    border-radius: 999px;
    font-size: 0.9rem !important;
    color: var(--color-orange) !important;
}

/*  Eleven items plus two headings is taller than the drawer on a short
    screen, so the list scrolls rather than being cut off. */
.mobile-menu-inner { overflow-y: auto; }

/* ---- everything in the header set in capitals --------------------------- */

/*  Done in CSS, not typed into the markup, so a screen reader still reads
    "About Us" rather than spelling it out letter by letter -- and so the
    page titles the menu links to keep their own capitalisation.

    Capitals need a little more room between letters than lowercase does;
    without it the words close up and read as one block. */
.site-header .nav-link,
.site-header .dropdown-link-item,
.site-header .mobile-nav-item,
.site-header .mobile-sub-link,
.site-header .get-quote-btn {
    text-transform: uppercase;
}

.site-header .nav-link { letter-spacing: 0.06em; }
.site-header .dropdown-link-item { letter-spacing: 0.05em; }
.site-header .mobile-nav-item,
.site-header .mobile-sub-link { letter-spacing: 0.05em; }
.site-header .get-quote-btn { letter-spacing: 0.08em; }
/* ==END navmega== */

/* ==BLOCK extras== */
/* --------------------------------------------------------------------------
   Side products on the home page

   Between the blog and the closing CTA. Lighter than the service cards by
   design -- these are not the eleven and should not read as though they are.
   -------------------------------------------------------------------------- */

.extras-section { padding: 1rem 2rem 3.5rem; }

.extras-wrap { max-width: 1180px; margin: 0 auto; }

.extras-head { margin-bottom: 1.4rem; }

.extras-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(249, 251, 255, 0.5);
}

.extras-title::before {
    content: "";
    flex: none;
    width: 2px;
    height: 13px;
    border-radius: 2px;
    background: var(--color-green);
}

.extras-lead {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-muted);
}

.extras-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.extra-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    border: 1px solid rgba(249, 251, 255, 0.10);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
    text-decoration: none;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.extra-card:hover,
.extra-card:focus-visible {
    border-color: rgba(166, 212, 158, 0.4);
    background: rgba(166, 212, 158, 0.05);
}

.extra-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(166, 212, 158, 0.12);
    color: var(--color-green);
    font-size: 1.3rem;
}

.extra-body { flex: 1 1 auto; min-width: 0; }

.extra-name {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--color-light);
}

.extra-line {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--color-muted);
}

/*  The price is the reason this is a product and not a service, so it gets
    to be the one thing that is not grey. */
.extra-price {
    flex: none;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(242, 100, 48, 0.35);
    border-radius: 999px;
    background: rgba(242, 100, 48, 0.08);
    color: var(--color-orange);
    font-family: var(--font-heavy, inherit);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .extras-section { padding: 0.5rem 1.2rem 2.6rem; }
    .extras-grid { grid-template-columns: 1fr; }
    .extra-card { gap: 0.85rem; padding: 1rem 1.1rem; }
    .extra-line { display: none; }
}
/* ==END extras== */

/* ==BLOCK reellightbox== */
/* ---- reel lightbox ----------------------------------------------------

   The reels on the service pages loop silently with no controls. This is
   what opens one of them properly: full width, native controls, sound.
   ---------------------------------------------------------------------- */

.reel-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(12, 10, 9, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.reel-lb[hidden] { display: none; }

.reel-lb-stage {
    position: relative;
    width: min(100%, 1200px);
    max-height: 88vh;
    display: flex;
}

.reel-lb-vid {
    width: 100%;
    max-height: 88vh;
    border-radius: 12px;
    background: #000;
    outline: none;
}

.reel-lb-close {
    position: absolute;
    top: clamp(0.8rem, 2vw, 1.6rem);
    left: clamp(0.8rem, 2vw, 1.6rem);
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(249, 251, 255, 0.22);
    border-radius: 50%;
    background: rgba(20, 18, 17, 0.75);
    color: #F9FBFF;
    font-size: 1.35rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.reel-lb-close:hover,
.reel-lb-close:focus-visible {
    background: var(--color-orange, #F26430);
    transform: scale(1.06);
}

/*  the reel itself now says it can be opened */
.svc-reel-frame--playable { cursor: pointer; }

.svc-reel-frame--playable .svc-reel-zoom {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0 0.9rem;
    border: 1px solid rgba(249, 251, 255, 0.25);
    border-radius: 999px;
    background: rgba(20, 18, 17, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #F9FBFF;
    font-size: 1.15rem;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.svc-reel-frame--playable:hover .svc-reel-zoom,
.svc-reel-zoom:focus-visible {
    opacity: 1;
    background: var(--color-orange, #F26430);
    border-color: var(--color-orange, #F26430);
    transform: scale(1.08);
}

.svc-reel-frame--playable .svc-reel-zoom span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.svc-reel-frame--playable .svc-reel-zoom--icon {
    width: 42px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
}

/*  On a touch screen there is no hover, so it must not depend on one. */
@media (hover: none) {
    .svc-reel-frame--playable .svc-reel-zoom { opacity: 1; }
}

@media (max-width: 600px) {
    .svc-reel-frame--playable .svc-reel-zoom {
        min-height: 36px;
        font-size: 1rem;
        left: 0.5rem;
        bottom: 0.5rem;
    }
    .svc-reel-frame--playable .svc-reel-zoom--icon { width: 36px; }
}
/* ==END reellightbox== */

/* ---- language switch (English <-> Arabic) ------------------------------- */

.lang-switch {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 0.95rem;
    margin-inline-end: 0.6rem;
    border: 1px solid rgba(249, 251, 255, 0.18);
    border-radius: 999px;
    color: var(--color-light);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.lang-switch:hover,
.lang-switch:focus-visible {
    border-color: var(--color-orange);
    color: var(--color-orange);
}

/* the English label sits in Adelle; the Arabic one in the system's Arabic face */
.lang-switch[lang="ar"] { font-family: system-ui, "Segoe UI", Tahoma, sans-serif; font-size: 0.95rem; }

/* with the burger menu the header has room for one button; the language
   switch lives inside the menu instead */
@media (max-width: 1024px) {
    .lang-switch { display: none; }
}

.lang-switch-m[lang="ar"] { font-family: system-ui, "Segoe UI", Tahoma, sans-serif; }