/* ========================================
   EKSP — Montserrat + Metro + Polished
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html,
body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}

/* Preloader — Removed/Hidden */
.preloader {
    display: none !important;
}

.preloader.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.pl-content {
    text-align: center;
    position: relative;
    z-index: 1
}

.pl-logo {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 12px;
    margin-right: -12px;
    /* Fix for letter-spacing shift */
    display: block;
    margin-bottom: 24px;
    background: linear-gradient(to right, #cfd9df 0%, #e2ebf0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0;
    animation: plFadeIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

.pl-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: plFadeIn 1s 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0
}

.pl-line {
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c3), transparent);
    margin: 30px auto;
    animation: plLine 1.5s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards
}

@keyframes plFadeIn {
    to {
        opacity: 1;
        transform: translateY(0)
    }

    from {
        opacity: 0;
        transform: translateY(20px)
    }
}

@keyframes plLine {
    to {
        width: 140px
    }
}

/* Global Aesthetics — Bold & Justice */
:root {
    /* Premium Agency Palette — Global Integrity */
    --c1: #006064;
    /* Deepest Navy (Backgrounds/Footer) */
    --c2: #1e293b;
    /* Slate Navy (Cards/Sections) */
    --c3: #334155;
    /* Lighter Slate (Borders/Accents) */
    --c4: #92dff4;
    /* Premium Turquoise (Primary Accent) */
    --c5: #e2e8f0;
    /* Soft Silver (Secondary Accent) */
    /* RICH DARK THEME MAPPING */
    --dark: #116981;
    /* Main Dark Background */
    --surface: #1e293b;
    /* Card/Section Background */
    /* NEUTRALS */
    --gray: #94a3b8;
    /* Body Text on Dark */
    --white: #ffffff;
    --off: #f8fafc;
    /* Very Light Gray/White for Light Mode sections */
    /* FONTS */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Playfair Display', serif;
    --font: var(--font-body);

    /* TYPOGRAPHY SCALE (Desktop) — Refined for elegance */
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 21px;
    --fs-h4: 18px;
    --fs-body: 15px;
    --fs-small: 13px;

    /* LINE HEIGHTS */
    --lh-h1: 1.2;
    --lh-h2: 1.25;
    --lh-h3: 1.35;
    --lh-h4: 1.4;
    --lh-body: 1.7;
    --lh-small: 1.55;

    /* LETTER SPACING */
    --ls-h: 0.015em;
    --ls-b: 0.008em;

    /* SECTION SPACING */
    --section-py: 4.5rem;
    --section-py-mobile: 3rem;
    --mb-h: 1.2rem;
    --mb-p: 1rem;

    /* UTILS */
    --curve: cubic-bezier(0.4, 0, 0.2, 1);
    --g100: #e2e8f0;
    --g200: #cbd5e1;
    --g400: #94a3b8;
    --g600: #475569;
    --tr: 0.3s ease;
    --text: #0f172a;
    /* Dark Text for Light Backgrounds */
    --text-light: #f8fafc;
    /* Light Text for Dark Backgrounds */
    --text2: #475569;
    --r: 4px;
    /* Sharper, more corporate radius */
    --r2: 8px;
    --r3: 12px;
    --shd: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shd2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shd-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --T: .4s cubic-bezier(.2, .8, .2, 1);
    --wa: #25d366;
    --accent: var(--c4);
    --grad-bg: linear-gradient(135deg, var(--c1) 0%, #1e293b 100%);
    /* SOCIAL COLORS */
    --social-fb: #1877f2;
    --social-li: #0077b5;
    --social-tw: #1a1a2e;
    --social-wa: #25d366;
    --social-sp: #1ed760;
    --social-ap: #000000;
    --social-ig: #e4405f;
}

/* Global Social Icon Centering FIX */
.blog-share-btn,
.share-btn,
.float-social,
.f-social a,
.podcast-share a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
}

.blog-share-btn svg,
.share-btn svg,
.float-social svg,
.f-social a svg,
.podcast-share a svg {
    width: 18px !important;
    /* Standardized size */
    height: 18px !important;
    display: block;
    margin: auto;
}

html {
    scroll-behavior: smooth
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--white);
    line-height: var(--lh-body);
    font-size: var(--fs-body);
    letter-spacing: var(--ls-b);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4 {
    font-family: var(--font-heading);
    color: var(--c2);
    font-weight: 700;
    line-height: var(--lh-h1);
    margin-bottom: var(--mb-h);
    letter-spacing: var(--ls-h);
}

h1,
.h1 {
    font-size: var(--fs-h1);
}

h2,
.h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: var(--lh-h2);
}

h3,
.h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: var(--lh-h3);
}

h4,
.h4 {
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: var(--lh-h4);
}

p {
    margin-bottom: var(--mb-p);
    /* Improved readability */
}

small,
.small {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

/* Consistent Section Spacing */
section,
.section {
    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
}

/* RESPONSIVE TYPOGRAPHY */
@media (max-width: 1024px) {
    :root {
        --fs-h1: 30px;
        --fs-h2: 24px;
        --fs-h3: 19px;
        --fs-h4: 17px;
        --section-py: 3.5rem;
        --mb-h: 1rem;
    }
}

@media (max-width: 768px) {
    :root {
        --fs-h1: 25px;
        --fs-h2: 21px;
        --fs-h3: 17px;
        --fs-h4: 15px;
        --fs-body: 14px;
        --section-py: var(--section-py-mobile);
        --mb-h: 0.9rem;
        --mb-p: 0.85rem;
    }

    h1,
    h2,
    h3,
    h4 {
        margin-bottom: 1rem;
    }
}

@media (max-width: 480px) {
    :root {
        --fs-h1: 22px;
        --fs-h2: 18px;
        --fs-h3: 15px;
        --fs-h4: 14px;
        --section-py: 2.5rem;
    }
}

#main-content {
    flex: 1 0 auto !important;
}

footer {
    flex-shrink: 0 !important;
}

html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 9000;
    opacity: 0.4
}

a {
    text-decoration: none;
    color: inherit;
    transition: all var(--T)
}

img {
    max-width: 100%;
    display: block
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}

@media (max-width: 1024px) {
    .container {
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
}

/* Refactored Typography System */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--c2);
    line-height: var(--lh-h1);
    margin-bottom: var(--mb-h);
    letter-spacing: var(--ls-h);
    font-weight: 700;
}

h1 {
    font-size: var(--fs-h1);
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: var(--lh-h2);
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: var(--lh-h3);
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 500;
    line-height: var(--lh-h4);
}

h5 {
    font-size: 1.1rem;
}

h6 {
    font-size: 1rem;
}

p {
    line-height: var(--lh-body);
    margin-bottom: var(--mb-p);
    color: var(--text2);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    word-break: break-word;
}

/* Mobile headings use tokens set above — no need for hardcode overrides here */

/* Button Refinements */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    font-size: var(--fs-small);
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0.1em;
    border-radius: var(--r);
    transition: all var(--T);
    box-shadow: var(--shd);
    background: var(--c2);
    color: var(--white);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-accent {
    background: var(--c2);
    color: var(--white)
}

.btn-accent:hover {
    background: var(--c1);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 122, 138, .35)
}

.btn-glass {
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: var(--white);
    backdrop-filter: blur(8px)
}

.btn-glass:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .6)
}

.btn-dark {
    background: var(--dark);
    color: var(--white)
}

.btn-dark:hover {
    background: var(--c2);
    transform: translateY(-2px)
}

.btn-outline {
    border: 1.5px solid var(--c1);
    color: var(--c1);
    background: transparent;
}

.btn-outline:hover {
    background: var(--c1);
    color: var(--white);
    transform: translateY(-3px);
}


.btn-full {
    width: 100%;
    justify-content: center
}

.label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c4);
    margin-bottom: 1rem;
}

.label-light {
    color: rgba(255, 255, 255, .5)
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: transparent;
    transition: all var(--T)
}

.header.solid {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(25px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.header.solid .logo-mark,
.header.solid .nav-item>a,
.header.solid .search-btn {
    color: var(--text)
}



.header .hamburger span {
    background-color: var(--white);
}

.header.solid .logo-mark {
    color: var(--c1) !important;
}

.header.solid .logo-sub {
    color: var(--g400) !important;
}

.header.solid .search-btn svg {
    color: var(--c1) !important;
}

.header.solid .hamburger span {
    background-color: var(--c1) !important;
}

.header.active .hamburger span {
    background-color: var(--white) !important;
}

.header.solid .logo-mark {
    color: var(--c1) !important;
}

.header.solid .logo-sub {
    color: var(--g400)
}

.header.solid .logo-sep {
    background: var(--g200);
}

/* Logo Toggle Logic */
.header .logo-white {
    display: block !important;
}

.header .logo-normal {
    display: none !important;
}

.header.solid .logo-white {
    display: none !important;
}

.header.solid .logo-normal {
    display: block !important;
}

/* lang-dropdown solid styles handled in new .lang-dropdown section */

.header.solid .hamburger span {
    background: var(--c1);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 120px
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 10px 0;
}

.logo img {
    max-height: 95px;
    width: auto;
    object-fit: contain;
    transition: opacity 0.3s var(--T);
}

.logo-mark {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 4px;
    transition: color var(--T)
}

.logo-sep {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, .2);
    transition: background var(--T)
}

.logo-sub {
    font-size: .65rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, .45);
    font-weight: 700;
    text-transform: uppercase;
    transition: color var(--T)
}

/* Mobile-only menu header (logo + close) — hidden on desktop */
.nav-mobile-header {
    display: none;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 2px
}

.nav-item>a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 13px;
    font-size: .94rem;
    font-weight: 600;
    color: var(--white);
    /* Fixed: Was .75 opacity */
    border-radius: var(--r);
    transition: all var(--T)
}

.nav-item>a:hover {
    color: var(--c4);
    /* Explicit hover color */
    background: rgba(255, 255, 255, .08)
}

.header.solid .nav-item>a {
    color: var(--g600);
    /* Dark color for white header */
}

.header.solid .nav-item>a:hover {
    color: var(--c2);
    background: var(--c5)
}

.has-dd {
    position: relative
}

.dd {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 270px;
    background: var(--white);
    border-radius: var(--r);
    box-shadow: var(--shd2);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--T);
    border: 1px solid var(--g100)
}

.has-dd:hover .dd {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.dd a {
    display: block;
    padding: 10px 14px;
    font-size: .82rem;
    color: var(--g600);
    border-radius: 8px;
    font-weight: 500
}

.dd a:hover {
    background: var(--c5);
    color: var(--c1);
    padding-left: 18px
}

/* Mega Menu */
.dd.mega-menu {
    position: fixed;
    top: 78px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 90vw;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-radius: var(--r2);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1)
}

.has-dd:hover .dd.mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0)
}

.mm-col {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.mm-col a {
    padding: 10px 16px;
    font-size: .85rem;
    color: var(--text);
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s
}

.mm-col a:hover {
    padding-left: 20px;
    color: var(--dark);
    background: var(--c5);
    font-weight: 600
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

@media (max-width: 991px) {

    .header-right .search-btn,
    .header-right .lang-links {
        display: none !important;
    }
}

/* Language Links (Inline) */
.lang-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-link {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, .6);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all var(--T);
}

.lang-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, .1);
}

.lang-sep {
    color: rgba(255, 255, 255, .25);
    font-size: .7rem;
    user-select: none;
}

.header.solid .lang-link {
    color: var(--g500);
}

.header.solid .lang-link:hover {
    color: var(--c2);
    background: var(--c5);
}

.header.solid .lang-sep {
    color: var(--g300);
}

/* Legacy Language Dropdown (kept for reference) */
.lang-dropdown {
    position: relative;
    z-index: 1002;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px;
    color: rgba(255, 255, 255, .65);
    transition: all var(--T);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05);
}

.lang-toggle:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--white);
    border-color: rgba(255, 255, 255, .3);
}

.lang-toggle svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.lang-current {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.header.solid .lang-toggle {
    color: var(--g600);
    border-color: var(--g200);
    background: var(--off);
}

.header.solid .lang-toggle:hover {
    color: var(--c2);
    border-color: var(--c2);
    background: var(--c5);
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 160px;
    background: var(--white);
    border-radius: var(--r);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--g100);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-dropdown.open .lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--g600);
    border-radius: 6px;
    transition: all 0.2s;
}

.lang-option:hover {
    background: var(--c5);
    color: var(--c1);
}

.lang-option.active {
    background: rgba(20, 94, 107, 0.08);
    color: var(--c2);
    font-weight: 700;
}

.search-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, .9);
    transition: all var(--T)
}

.header:not(.solid) .search-btn {
    color: var(--white);
}

.header:not(.solid) .search-btn svg {
    stroke: var(--white);
}

.search-btn:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--white)
}

.header.solid .search-btn:hover {
    background: var(--c5);
    color: var(--c2)
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center
}

.hamburger span {
    width: 20px;
    height: 2px;
    background: var(--white);
    transition: all 0.3s ease;
    border-radius: 2px;
    display: block;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px)
}

.hamburger.active span:nth-child(2) {
    opacity: 0
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px)
}

/* Search FS */
.search-fs {
    position: fixed;
    inset: 0;
    z-index: 100000 !important;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .4s
}

.search-fs.open {
    opacity: 1;
    visibility: visible
}

.search-fs-close {
    position: absolute;
    top: 32px;
    right: 40px;
    font-size: 2.4rem;
    color: rgba(255, 255, 255, .4)
}

.search-fs-close:hover {
    color: var(--white)
}

.search-fs-form {
    width: 90%;
    max-width: 580px;
    text-align: center
}

.search-fs-form input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    padding: 16px 0;
    font-family: var(--font)
}

.search-fs-form input::placeholder {
    color: rgba(255, 255, 255, .2)
}

.search-fs-line {
    width: 0;
    height: 2px;
    background: var(--c4);
    margin: 0 auto;
    transition: width .6s ease
}

.search-fs.open .search-fs-line {
    width: 100%
}

/* Hero —  Bold Justice */
.hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    /* For stability */
    overflow: hidden
}

.hero-slides {
    position: absolute;
    inset: 0
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1.5s ease, transform 8s ease
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1)
}

.hero-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 105, 129, 0.62), rgba(17, 105, 129, 0.62));
    background-blend-mode: multiply
}

.hero-content {
    position: relative;
    z-index: 1;
    color: var(--white);
    max-width: 800px;
    padding-left: 50px;
    padding-top: 180px;
}

/* Animated Vertical Bar (Loading Style) */
.hero-content::before {
    content: '';
    position: absolute;
    left: 0;
    top: 180px;
    width: 4px;
    height: calc(100% - 180px);
    background: var(--c4);
    transform: scaleY(0);
    /* Start at 0 */
    transform-origin: top;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-content.active-bar::before {
    transform: scaleY(1);
    /* Grow to 100% height across all slides */
}

@media (max-width: 1024px) {
    .hero-content {
        padding-top: 200px;
        max-width: 700px;
    }

    .hero-content::before {
        top: 200px;
        height: calc(100% - 200px);
    }
}

@media (max-width: 768px) {
    .container.hero-content {
        padding: 40px 24px !important;
        max-width: 100% !important;
        min-height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .hero-content::before {
        display: none;
        /* Hide vertical line on mobile as requested */
    }

    .hero-brand {
        align-items: center;
    }

    .hero-tag {
        padding-left: 0 !important;
        justify-content: center;
    }
}

.hero-brand {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--c4);
    /* Brand Color Blue (Cyan) */
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding-left: 0;
    /* Removing indentation since line is removed as per feedback */
}

.hero-brand::before {
    display: none !important;
    /* Removing brand decorative line as per feedback */
}

.brand-line-1 {
    line-height: 1;
}

.brand-line-2 {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.8;
}

.hero-tag {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-left: 40px;
}

.hero-tag::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    /* Shorter */
    height: 4px;
    /* Thicker */
    background: var(--white)
        /* White */
}

/* .hero-tag::before line moved to .hero-brand */

.hero-title {
    margin-bottom: var(--mb-h);
    color: var(--white);
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.hero-title span {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h);
}

/* hero-title uses CSS token --fs-h1 defined in :root & responsive breakpoints above */
@media (max-width: 480px) {
    .hero-title span {
        font-size: var(--fs-h1);
        /* tokens handle the scaling automatically */
    }
}

.hero-desc {
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.82);
    max-width: 680px;
    margin-bottom: 36px;
    font-weight: 400;
    text-align: justify;
    hyphens: auto;
}

.hero-actions {
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}

.anim-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.active-content .anim-up,
.no-anim .anim-up,
.contact-page-content .anim-up,
.visible.anim-up,
.visible .anim-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Pagination Number Animation */
.hc-cur {
    display: inline-block;
    transition: all 0.5s ease;
}

#heroBar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--white);
    transition: width 0.1s linear;
    /* Smooth micro-increments */
}

/* Pagination Number Animation */
.hc-cur {
    display: inline-block;
    transition: all 0.5s ease;
}

#heroBar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--white);
    transition: width 0.1s linear;
    /* Smooth micro-increments */
}

.d1 {
    transition-delay: .1s;
    animation-delay: .1s
}

.d2 {
    transition-delay: .25s;
    animation-delay: .25s
}

.d3 {
    transition-delay: .4s;
    animation-delay: .4s
}

.d4 {
    transition-delay: .55s;
    animation-delay: .55s
}

.d5 {
    transition-delay: .7s;
    animation-delay: .7s
}

@keyframes fUp {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeInOpacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.hero-bottom {
    position: absolute;
    bottom: 32px;
    left: 28px;
    right: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1
}

.hero-counter {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .35);
    font-size: .8rem;
    font-weight: 600
}

.hc-bar {
    width: 56px;
    height: 2px;
    background: rgba(255, 255, 255, .12);
    border-radius: 2px;
    overflow: hidden;
    position: relative
}

.hc-bar span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--c3);
    width: 0;
    transition: width .3s
}

.hero-scroll-cue {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .3);
    font-size: .68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600
}

.hero-scroll-cue svg {
    animation: bob 2s ease-in-out infinite
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(6px)
    }
}

/* About */
.about {
    padding: 140px 0;
    background: var(--off);
    /* Premium Off-White */
}

@media (max-width: 768px) {
    .about {
        padding: 80px 0;
    }
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

@media (max-width: 991px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.about-grid-full {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.about-no-img .about-text p {
    margin-left: auto;
    margin-right: auto;
}

.about-imgs {
    position: relative
}

.about-img-main {
    border-radius: var(--r2);
    overflow: hidden
}

.about-img-main img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover
}

.about-img-sm {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 44%;
    border-radius: var(--r2);
    overflow: hidden;
    box-shadow: var(--shd2);
    border: 4px solid var(--white)
}

.about-img-sm img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover
}

.about-badge {
    position: absolute;
    top: 20px;
    left: -16px;
    background: var(--c2);
    color: var(--white);
    padding: 18px 24px;
    border-radius: var(--r);
    box-shadow: var(--shd2);
    text-align: center
}

.about-badge strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1
}

.about-badge span {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase
}

.about-text h2 {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 18px;
    line-height: 1.15
}

.about-text p {
    color: var(--text2);
    margin-bottom: 20px;
    max-width: 460px
}

.about-nums {
    display: flex;
    gap: 32px;
    margin: 28px 0;
    padding: 22px 0;
    border-top: 1px solid var(--g100);
    border-bottom: 1px solid var(--g100)
}

.about-num {
    text-align: center
}

.about-num span {
    font-size: 2rem;
    font-weight: 800;
    color: var(--c1)
}

.about-num small {
    display: block;
    font-size: .7rem;
    color: var(--g400);
    margin-top: 2px;
    font-weight: 600
}

/* Awards */
.awards {
    background: linear-gradient(135deg, var(--dark), var(--c3));
    /* Prestige Teal Gradient */
    padding: 18px 0;
    overflow: hidden
}

.awards-track {
    display: flex;
    width: max-content;
    animation: marq 70s linear infinite
}

.awards-track:hover {
    animation-play-state: paused
}

.awards-inner {
    display: flex;
    align-items: center;
    gap: 36px;
    white-space: nowrap;
    padding-right: 36px
}

.aw {
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 1px;
    font-weight: 600;
    font-family: var(--font);
    font-size: .88rem;
    text-transform: uppercase
}

.aw-dot {
    color: #fff;
    opacity: 0.8;
    font-size: .55rem
}

@keyframes marq {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* International Services */
.intl {
    padding: 140px 0;
    background: #e8ecef;
    /* Clean Light Silver */
    position: relative;
    color: var(--text);
}

@media (max-width: 768px) {
    .intl {
        padding: 80px 0;
    }
}

.intl-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

@media (max-width: 991px) {
    .intl-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .intl-img {
        order: -1;
    }
}

.intl-no-img {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.intl-no-img .intl-content p {
    margin-left: auto;
    margin-right: auto;
}

.intl-content .label {
    color: var(--c3);
    /* Turquoise Label */
}

.intl-content h2 {
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--dark);
    /* Dark ID */
    margin-bottom: 20px;
}

.intl-content p {
    color: var(--text2);
    /* Dark Gray Text */
    font-size: 1rem;
    margin-bottom: 32px;
}

.intl-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 32px;
}

.ist-item strong {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--c1);
    /* Deep Teal Numbers */
    line-height: 1;
    margin-bottom: 4px;
}

.ist-item span {
    font-size: 0.75rem;
    color: var(--g600);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.intl-list {
    list-style: none;
    margin-top: 32px;
}

.intl-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--c1);
}

.intl-list li svg {
    color: var(--c3);
}

.intl-map {
    position: relative;
    border-radius: var(--r3);
    overflow: hidden;
    box-shadow: var(--shd2);
}

.dotted-world-map {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.05));
}

.map-path {
    fill: url(#dotPattern);
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 0.3px;
    transition: all 0.5s ease;
}

.intl-map:hover .map-path {
    stroke: rgba(255, 255, 255, 0.2);
}

.map-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(11, 45, 63, 0.2), transparent);
}

/* Pin positions updated for SVG coordinates */
.pin-istanbul {
    top: 40%;
    left: 58%;
}

.pin-london {
    top: 32%;
    left: 47%;
}

.pin-ny {
    top: 38%;
    left: 18%;
}

.pin-dubai {
    top: 50%;
    left: 63%;
}

.pin {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--c3);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(32, 178, 170, 0.3);
    animation: pinPulse 2s infinite;
    cursor: pointer;
    z-index: 5;
}

.pin-label {
    position: absolute;
    bottom: 180%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--c1);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.pin-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--c1);
}

.pin:hover .pin-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.pin:hover {
    animation-play-state: paused;
    box-shadow: 0 0 0 10px rgba(32, 178, 170, 0.5);
}

.pin-istanbul {
    top: 45%;
    left: 55%;
}

.pin-london {
    top: 38%;
    left: 47%;
}

.pin-ny {
    top: 42%;
    left: 28%;
}

.pin-dubai {
    top: 52%;
    left: 62%;
}

@keyframes pinPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(32, 178, 170, 0.4);
    }

    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(32, 178, 170, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(32, 178, 170, 0);
    }
}

/* Brands Carousel */
.brands-section {
    padding: 60px 0;
    background: var(--off);
    border-top: 1px solid var(--g100);
}

.brands-carousel {
    overflow: hidden;
    position: relative;
}

.brands-track-inner {
    display: flex;
    align-items: center;
    gap: 60px;
    width: max-content;
    animation: brandsMarq 60s linear infinite;
}

.brand-item {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.brand-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.6;
    transition: all 0.3s;
}

.brand-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.brand-item-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--g400);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.6;
}

@keyframes brandsMarq {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.brands-carousel:hover .brands-track-inner {
    animation-play-state: paused;
}

/* Metro Tiles —  Decorated */
.areas {
    padding: 60px 0;
    background: var(--off)
}

.sec-head {
    text-align: center;
    margin-bottom: 40px
}

.sec-head h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    color: var(--dark)
}

.sec-desc {
    color: var(--text2);
    font-size: 0.85rem;
    line-height: 1.65;
    margin-top: 10px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sec-head-light h2 {
    color: var(--white)
}

.metro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.metro-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 34px;
    border-radius: var(--r2);
    color: var(--white);
    min-height: 240px;
    overflow: hidden;
    transition: all var(--T);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shd);
}

@media (max-width: 768px) {
    .metro-tile {
        padding: 24px;
        min-height: 200px;
    }
}

.metro-tile:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shd-hover);
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.3);
}

.mt-deco {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    transition: all .6s ease
}

.metro-tile:hover .mt-deco {
    transform: scale(1.6);
    background: rgba(255, 255, 255, .1)
}

.mt-icon {
    margin-bottom: 14px;
    position: relative;
    z-index: 1
}

.mt-icon svg {
    width: 32px;
    height: 32px;
    opacity: .7;
    stroke: currentColor
}

.metro-tile h3 {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    z-index: 1;
    color: var(--white)
}

@media (max-width: 480px) {
    .metro-tile h3 {
        font-size: 0.78rem;
    }
}

.mt-desc {
    font-size: 0.7rem;
    opacity: 0.65;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 4px;
    position: relative;
    z-index: 1
}

.mt-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center;
    font-size: 0;
    opacity: 0.6;
    transform: rotate(-45deg);
    transition: all var(--T)
}

.metro-tile:hover .mt-arrow {
    opacity: 1;
    transform: rotate(0) scale(1.2);
    background-color: var(--white);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23006064' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mt-wide {
    grid-column: span 2
}

.mt-tall {
    grid-row: span 2;
    min-height: 352px
}

/* Unified Dark Teal for all Metro Tiles */
.mt-c1,
.mt-c2,
.mt-c3,
.mt-c4,
.mt-c5,
.mt-c6 {
    background: var(--dark);
    /* #00252a */
    border-color: rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
}

/* Hover: Bring back the Turquoise */
.mt-c1:hover,
.mt-c2:hover,
.mt-c3:hover,
.mt-c4:hover,
.mt-c5:hover,
.mt-c6:hover {
    background: linear-gradient(135deg, #26c6da, #00acc1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-8px) scale(1.02);
}

/* Team —  Photo Cards */
.team {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: var(--dark);
}

.team.team-page {
    background: #ffffff;
    padding: 80px 0;
}


.team-bg-img {
    position: absolute;
    inset: 0
}

.team-bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.15)
}

.team-bg-ov {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 29, 44, .6), rgba(11, 29, 44, .85))
}

.team-inner {
    position: relative;
    z-index: 1
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-content: start;
    justify-items: start;
    width: 100%;
}

.t-card {
    position: relative;
    border-radius: var(--r2);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: var(--shd);
    transition: all var(--T);
}

.t-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shd-hover);
    border-color: rgba(255, 255, 255, 0.2);
}


.t-photo {
    aspect-ratio: 3/4;
    overflow: hidden
}

.t-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease, filter .5s
}

.t-card:hover .t-photo img {
    transform: scale(1.06);
    filter: brightness(.55)
}

.t-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(11, 29, 44, .9) 0%, transparent 100%);
    color: var(--white)
}

.t-info h4 {
    font-size: .95rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: var(--white)
}

.t-info span {
    font-size: .72rem;
    color: rgba(255, 255, 255, .5);
    font-weight: 500
}

.t-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    opacity: 0;
    transition: all var(--T);
    z-index: 10;
}

.t-card:hover .t-overlay {
    opacity: 1
}

.t-overlay h4,
.t-overlay span {
    display: none;
}

.t-btns {
    display: flex;
    gap: 8px
}

.t-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 50px;
    font-size: .72rem;
    font-weight: 700;
    transition: all var(--T);
    border: 1.5px solid;
}

.t-call {
    border-color: rgba(255, 255, 255, .4);
    color: var(--white)
}

.t-call:hover {
    background: var(--white);
    color: var(--c1);
    border-color: var(--white)
}

.t-wa {
    border-color: var(--wa);
    color: var(--wa)
}

.t-wa:hover {
    background: var(--wa);
    color: var(--white)
}

.t-wa svg,
.t-call svg {
    width: 14px;
    height: 14px
}

.team-more {
    text-align: center;
    margin-top: 44px
}

/* News —  Mosaic Grid (Ultra Premium) */
.news {
    padding: 60px 0;
    background: var(--off);
    position: relative;
    overflow: hidden;
    perspective: 1200px;
}

.news .container {
    max-width: 1250px !important;
    /* Expanded for breathing room */
}

@media (max-width: 768px) {
    .news {
        padding: 40px 20px;
        /* Safe padding for mobile news cards */
    }
}

.news::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(32, 178, 170, 0.05) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0
}

.news-mosaic {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 28px;
    align-items: stretch
}

.nm-col {
    display: flex;
    flex-direction: column;
    gap: 28px
}

/* Center Featured Card */
.nm-featured-center {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 580px;
    color: var(--white);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
    z-index: 2
}

.nm-featured-center:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 40px 80px -20px rgba(11, 79, 108, 0.4)
}

.nm-featured-img {
    position: absolute;
    inset: 0;
    z-index: 0
}

.nm-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    filter: brightness(0.85)
}

.nm-featured-center:hover .nm-featured-img img {
    transform: scale(1.1);
    filter: brightness(0.75)
}

.nm-featured-content {
    position: relative;
    z-index: 2;
    padding: 48px;
    width: 100%;
    background: linear-gradient(to top, rgba(11, 29, 44, 0.95), rgba(11, 29, 44, 0.6) 50%, transparent);
    transform: translateZ(20px)
}

.nm-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: var(--c2);
    color: var(--white);
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 30px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(32, 178, 170, 0.4)
}

.nm-featured-center h3 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    color: var(--white)
}

.nm-featured-center p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 28px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.nm-featured-foot {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: .85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 24px
}

.nm-read {
    color: var(--c3)
}

/* Side Photo Cards */
.nm-card-photo {
    position: relative;
    flex: 1;
    border-radius: var(--r3);
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    color: var(--white);
    box-shadow: var(--shd);
    transition: all var(--T);
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1)
}

.nm-card-photo:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shd-hover);
    z-index: 2;
    border-color: rgba(255, 255, 255, 0.3);
}

.nm-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
    filter: brightness(0.75)
}

.nm-card-photo:hover .nm-bg {
    transform: scale(1.1);
    filter: brightness(0.65)
}

.nm-overlay {
    position: relative;
    z-index: 1;
    padding: 24px;
    width: 100%;
    background: linear-gradient(to top, rgba(11, 29, 44, 0.9), transparent);
    transform: translateY(10px);
    transition: transform 0.4s ease
}

.nm-card-photo:hover .nm-overlay {
    transform: translateY(0)
}

.nm-badge-sm {
    display: inline-block;
    font-size: .55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px
}

.nm-hukuki {
    color: var(--c3)
}

.nm-card-photo h4 {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    color: var(--white)
}

.nm-card-photo time {
    font-size: .7rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    display: block
}

.news-more {
    text-align: center;
    margin-top: 60px
}

/* Responsive Mosaic */
@media (max-width: 1024px) {
    .news-mosaic {
        grid-template-columns: 1fr 1fr;
        gap: 20px
    }

    .nm-featured-center {
        grid-column: span 2;
        min-height: 450px
    }

    .nm-featured-center {
        min-height: 400px;
        order: -1;
    }

    .nm-col {
        gap: 20px;
    }

    .nm-card-photo {
        min-height: 220px;
    }
}

.contact-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--dark) 0%, var(--c1) 100%);
    overflow: hidden
}

.contact-deco-1 {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(32, 178, 170, .08);
    pointer-events: none
}

.contact-deco-2 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(32, 178, 170, .06);
    pointer-events: none
}

.cf-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
    position: relative;
    z-index: 1
}

.cf-left {
    color: var(--white)
}

.cf-left h2 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--white)
}

.cf-left>p {
    color: rgba(255, 255, 255, .55);
    margin-bottom: 32px;
    font-size: .92rem
}

.cf-items {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.cf-item {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.cf-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r);
    background: rgba(255, 255, 255, .08);
    color: var(--off);
    flex-shrink: 0
}

.cf-item strong {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 2px
}

.cf-item p {
    font-size: .88rem;
    color: rgba(255, 255, 255, .75);
    margin: 0
}

.cf-form {
    background: var(--white);
    border-radius: var(--r3);
    padding: 36px;
    box-shadow: var(--shd2);
    display: flex;
    flex-direction: column;
    gap: 14px
}

.cf-row {
    display: flex;
    gap: 14px
}

.cf-form input,
.cf-form textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1.5px solid var(--g100);
    border-radius: var(--r);
    font-size: .85rem;
    font-family: var(--font);
    outline: none;
    transition: all var(--T);
    color: var(--text);
    background: var(--off)
}

.cf-form input:focus,
.cf-form textarea:focus {
    border-color: var(--c2);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(26, 122, 138, .06)
}

.cf-form textarea {
    resize: vertical
}

.cf-form .btn {
    margin-top: 4px
}

/* Footer */
.footer {
    background: var(--dark);
    color: rgba(255, 255, 255, .5);
    padding: 40px 0 0
}

.footer.footer-no-brand {
    padding-top: 0px;
}

.footer.footer-no-brand .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 30px 0;
}

.footer-main {
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.footer-brand {
    max-width: 600px
}

.footer-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px
}

.footer-logo-img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

.footer-logo .logo-mark {
    color: var(--c3);
    font-size: 1.5rem;
    font-family: var(--font-heading);
}

.footer-logo .logo-sep {
    background: rgba(255, 255, 255, .12)
}

.footer-logo .logo-sub {
    color: rgba(255, 255, 255, .35)
}

.footer-brand p {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    margin-bottom: 24px
}

.f-social {
    display: flex;
    gap: 10px
}

.f-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    color: rgba(255, 255, 255, .35);
    transition: all var(--T)
}

.f-social a:hover {
    background: var(--c2);
    border-color: var(--c2);
    color: var(--white)
}

.footer-cols {
    display: flex;
    gap: 44px
}

.footer-col h4 {
    color: var(--white);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px
}

.footer-col a {
    display: block;
    padding: 4px 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, .5);
    font-weight: 500;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
    transition: all 0.25s ease;
}

.footer-col a:hover {
    color: var(--c3);
    opacity: 1;
    transform: translateX(4px);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* Footer Responsive */
@media (max-width: 900px) {
    .footer-main {
        flex-direction: column;
        gap: 40px;
    }

    .footer-cols {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-brand {
        max-width: 100%;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .f-social {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .footer-cols {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-col a:hover {
        transform: translateX(0);
        /* Disable shift on mobile */
    }
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-size: .74rem;
    color: rgba(255, 255, 255, .4)
}

.footer-legal {
    display: flex;
    gap: 16px
}

.footer-legal a {
    color: rgba(255, 255, 255, .4)
}

.footer-legal a:hover {
    color: var(--c4)
}

@media (max-width: 768px) {
    .footer-bottom {
        flex-direction: column !important;
        gap: 24px !important;
        text-align: center !important;
        padding: 40px 15px !important;
    }

    .footer-legal {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
    }
}

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s ease
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0)
}

/* Justice Decoration */
body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(11, 45, 63, 0.03) 0%, transparent 70%);
    border: 1px solid rgba(11, 45, 63, 0.02);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1
}

body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 60vw;
    height: 60vw;
    max-width: 600px;
    max-height: 600px;
    border: 1px solid rgba(11, 45, 63, 0.03);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1
}

/* Responsive Updates */
@media (max-width: 1024px) {
    .hero-title span {
        font-size: 2.8rem
    }

    .metro-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .about {
        padding: 100px 0;
    }

    .about-grid {
        gap: 50px;
    }

    .about-text h2 {
        font-size: 2.1rem;
    }

    .footer-main {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .header-inner {
        height: 70px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px !important;
        /* Unified padding */
    }

    .logo {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        display: flex !important;
        margin-bottom: 0;
    }

    .logo-mark {
        font-size: 1.3rem !important;
        letter-spacing: 3px !important;
    }

    .logo-sep {
        display: block !important;
        width: 1px;
        height: 18px;
        background: rgba(255, 255, 255, 0.2);
    }

    .logo-sub {
        display: block !important;
        font-size: 0.45rem !important;
        letter-spacing: 1px !important;
        opacity: 0.8;
    }

    .header-right {
        width: auto;
        display: flex;
        gap: 12px !important;
        /* Increased for finger accessibility */
        align-items: center;
    }

    .header .logo-mark,
    .header .search-btn svg {
        color: var(--white);
        background-color: transparent !important;
    }

    .header .hamburger span {
        background-color: var(--white);
    }

    .header.solid .logo-mark,
    .header.solid .search-btn svg {
        color: var(--dark) !important;
    }

    .header.solid .logo-sep {
        background: var(--g200) !important;
    }

    .header.solid .hamburger span {
        background-color: var(--dark) !important;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--dark);
        padding: 105px 24px 40px;
        overflow-y: auto;
        display: block;
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 11000;
        /* Raised to overlay everything */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.3);
    }

    /* Hide floating stuff when menu is active */
    body.menu-open .scroll-top,
    body.menu-open .blog-share-menu-mobile {
        display: none !important;
    }

    .nav-mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        padding: 0 20px;
        z-index: 10;
        background: var(--dark);
    }

    .nav-mobile-header .lang-link,
    .nav-mobile-header .lang-sep {
        color: #fff !important;
        opacity: 0.9;
    }

    .nav-mobile-header .search-btn svg,
    .nav-mobile-header .nav-close {
        color: #fff !important;
    }

    /* Force visibility in solid header state */
    .header.solid .nav-mobile-header .search-btn svg {
        color: #fff !important;
    }

    .nav-mobile-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-shrink: 0;
    }

    .nav-mobile-actions .search-btn {
        background: none;
        border: none;
        color: rgba(255, 255, 255, 0.9);
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-close {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--white);
        font-size: 1.5rem;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        padding: 0;
        flex-shrink: 0;
        transition: all 0.3s ease;
        margin-left: 12px;
    }

    .nav-close:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.4);
    }

    .mobile-logo {
        display: flex;
        align-items: center;
        height: 50px;
        /* Larger logo */
        flex-grow: 1;
        /* Take available space */
    }

    .mobile-logo img {
        max-height: 56px;
        width: auto;
        object-fit: contain;
    }

    .main-nav.active {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .nav-item {
        width: 100%;
        border-bottom: 1px solid var(--c4);
    }

    .nav-item>a {
        font-size: 1.1rem;
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        color: var(--white) !important;
    }

    .has-dd>a::after {
        content: '';
        width: 0.55rem;
        height: 0.55rem;
        border-right: 1.7px solid currentColor;
        border-bottom: 1.7px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.3s;
        opacity: 0.6;
    }

    .nav-item.open>a::after {
        transform: rotate(-135deg);
    }

    .dd,
    .dd.mega-menu {
        display: none !important;
        padding-left: 20px;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        position: static !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        padding-top: 5px !important;
        padding-bottom: 15px !important;
    }

    .nav-item.open>.dd,
    .nav-item.open>.dd.mega-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .mm-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .dd a,
    .mm-col a {
        color: var(--white) !important;
        font-size: 0.95rem !important;
        padding: 12px 0 !important;
        opacity: 1 !important;
    }

    .nav-item.open>a,
    .nav-item>a:hover,
    .dd a:hover,
    .mm-col a:hover {
        color: var(--white) !important;
        opacity: 1 !important;
        background: transparent !important;
    }

    /* Language dropdown mobile */
    .lang-toggle {
        padding: 5px 10px;
        gap: 4px;
    }

    .lang-toggle svg {
        width: 14px;
        height: 14px;
    }

    .lang-current {
        font-size: .6rem;
    }

    .lang-menu {
        right: 0;
        min-width: 140px;
    }

    .search-btn {
        width: 36px;
        height: 36px;
        color: var(--white);
    }

    .header.active .search-btn:not(.mobile-only-search) {
        opacity: 0;
        pointer-events: none;
    }

    .hamburger {
        display: flex;
        z-index: 1000;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
    }

    .hamburger span {
        width: 24px;
        height: 1.5px;
    }

    .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(6px, -6px);
    }

    .hero-brand {
        text-align: center;
        align-items: center;
        padding-left: 0;
        margin-bottom: 12px;
    }

    .hero-brand::before {
        display: none !important;
    }

    /* Hero */
    .hero {
        height: auto;
        min-height: 100vh;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .hero-content {
        padding: 160px 20px 40px;
        /* More top padding for logo clearance */
        text-align: center;
        border-left: none;
        /* Removed vertical bar as requested */
        width: 100%;
        max-width: 100%;
    }

    .hero-content::before {
        display: none !important;
    }

    .hero-title span {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero-tag {
        display: inline-flex;
        padding-left: 0;
        justify-content: center;
    }

    .hero-tag {
        display: inline-flex;
        padding-left: 0;
        justify-content: center;
        font-size: .75rem;
        margin-bottom: 16px;
    }

    .hero-tag::before {
        display: none !important;
        /* Hide horizontal bar too if requested */
    }

    .hero-desc {
        font-size: 1rem;
        margin-bottom: 32px;
    }

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .hero-actions .btn {
        width: 100%;
        justify-content: center;
        padding-right: 36px;
    }

    /* About — Mobile Fix */
    .about {
        padding: 80px 0;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .about-imgs {
        max-width: 100%;
    }

    .about-img-main img {
        aspect-ratio: 16/10;
    }

    .about-img-sm {
        bottom: -16px;
        right: -10px;
        width: 40%;
        border-width: 3px;
    }

    .about-badge {
        top: 14px;
        left: 10px;
        padding: 14px 18px;
    }

    .about-badge strong {
        font-size: 1.5rem;
    }

    .about-badge span {
        font-size: .55rem;
    }

    .about-text h2 {
        font-size: 1.8rem;
    }

    .about-text p {
        max-width: 100%;
        font-size: .88rem;
    }

    .about-nums {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .about-num span {
        font-size: 1.6rem;
    }

    .about-num small {
        font-size: .65rem;
    }

    /* International */
    .intl {
        padding: 80px 0;
    }

    .intl-content h2 {
        font-size: 1.8rem;
    }

    .intl-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .intl-content {
        padding-right: 0 !important;
    }

    /* Services */
    .areas {
        padding: 80px 0;
    }

    .metro-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .metro-tile {
        min-height: 140px !important;
        padding: 24px !important;
    }

    .mt-wide {
        grid-column: span 1;
    }

    .mt-tall {
        grid-row: span 1;
        min-height: 170px;
    }

    /* Team */
    .team {
        padding: 80px 0;
    }

    .t-grid,
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .t-card {
        max-width: 100%;
        margin: 0;
    }

    .t-info h4 {
        font-size: .8rem;
    }

    .t-info span {
        font-size: .65rem;
    }

    /* News */
    .news {
        padding: 80px 0;
    }

    .news-mosaic {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .nm-featured-center {
        min-height: 320px !important;
        order: -1;
    }

    .nm-featured-center h3 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
        margin-bottom: 12px !important;
    }

    .nm-featured-content {
        padding: 24px !important;
    }

    .nm-featured-center p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 16px !important;
    }

    .nm-featured-center h3 {
        font-size: 1.4rem;
    }

    .nm-featured-content {
        padding: 28px;
    }

    .nm-col {
        gap: 16px;
    }

    .nm-card-photo {
        min-height: 200px;
    }

    .nm-card-photo h4 {
        font-size: .92rem;
    }

    /* Contact */
    .contact-section {
        padding: 60px 0;
    }

    .cf-wrap {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .cf-left h2 {
        font-size: 1.8rem;
    }

    .cf-row {
        flex-direction: column;
        gap: 12px;
    }

    .cf-form {
        padding: 28px;
        border-radius: var(--r2);
    }

    .turkey-map {
        max-height: 320px;
    }

    /* Footer */
    .footer {
        padding: 40px 0 0;
    }

    .footer-cols {
        flex-wrap: wrap;
        gap: 30px;
    }

    .footer-col {
        min-width: calc(50% - 15px);
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px !important;
    }

    .hero-title span {
        font-size: 1.5rem !important;
    }

    .sec-head h2 {
        font-size: 1.5rem !important;
    }

    .pl-logo {
        font-size: 2.2rem;
        letter-spacing: 4px;
    }

    /* About extra small */
    .about {
        padding: 60px 0;
    }

    .about-grid {
        gap: 30px !important;
    }

    .about-text h2 {
        font-size: var(--fs-h2);
    }

    .about-num span {
        font-size: 1.4rem;
    }

    .about-badge {
        padding: 10px 14px;
    }

    .about-badge strong {
        font-size: 1.2rem;
    }

    /* Team 1 column on very small */
    .t-grid,
    .team-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .t-card {
        max-width: 320px;
        margin: 0 auto;
    }

    /* News extra small */
    .nm-featured-center {
        min-height: 250px;
    }

    .nm-featured-center h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .nm-featured-desc {
        display: none !important;
    }

    .nm-featured-content {
        padding: 15px;
    }

    .nm-card-photo {
        min-height: 160px;
    }

    /* Contact extra small */
    .cf-left h2 {
        font-size: 1.5rem;
    }

    .cf-form {
        padding: 20px;
    }

    /* International */
    .intl {
        padding: 60px 0;
    }

    .intl-content h2 {
        font-size: 1.5rem;
    }

    /* Footer extra small */
    .footer-col {
        min-width: 100%;
    }

    /* Footer extra small cleanup */
    .footer-legal {
        gap: 14px;
    }
}

/* Dotted World Map */
.dotted-world-wrap {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, var(--dark) 0%, var(--c1) 100%);
    border-radius: var(--r3);
    padding: 40px;
    overflow: hidden;
    box-shadow: var(--shd2);
}

.dotted-world-map {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 20px rgba(32, 178, 170, 0.1));
}

.map-pin {
    position: absolute;
    cursor: pointer;
    z-index: 10;
}

.pin-dot {
    display: block;
    width: 10px;
    height: 10px;
    background: var(--c3);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(32, 178, 170, 0.5);
    animation: pinPulse 2.5s ease-in-out infinite;
    transition: all 0.3s;
}

.map-pin:hover .pin-dot {
    transform: scale(1.4);
    box-shadow: 0 0 0 10px rgba(32, 178, 170, 0.2);
    animation-play-state: paused;
}

.pin-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: var(--c1);
    color: var(--white);
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.5px;
    pointer-events: none;
}

.pin-label::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--c1);
}

.map-pin:hover .pin-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@keyframes pinPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(32, 178, 170, 0.5);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(32, 178, 170, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(32, 178, 170, 0);
    }
}

/* Footer Newsletter */
.footer-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 36px 0;
    /* Removed border-top to fix double border issue */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 10px;
}

.fn-left h4 {
    color: var(--white);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.fn-left p {
    font-size: .82rem;
    color: rgba(255, 255, 255, .4);
    max-width: 400px;
}

.fn-form {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.fn-form input {
    padding: 12px 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--white);
    font-size: .82rem;
    font-family: var(--font);
    outline: none;
    width: 260px;
    transition: all var(--T);
}

.fn-form input::placeholder {
    color: rgba(255, 255, 255, .25);
}

.fn-form input:focus {
    border-color: var(--c3);
    background: rgba(255, 255, 255, 0.08);
}

.fn-btn {
    padding: 12px 28px;
    background: var(--c2);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--T);
    white-space: nowrap;
    font-family: var(--font);
}

.fn-btn:hover {
    background: var(--c3);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(32, 178, 170, 0.3);
}

/* Cookie Consent Bar — Glassmorphism Centered Card */
.cookie-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    width: 90%;
    max-width: 650px;
    z-index: 8000;
    background: var(--c2);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-radius: 24px;
    padding: 24px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    opacity: 0;
}

.cookie-bar.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.cookie-bar.hidden {
    transform: translateX(-50%) translateY(120%);
    opacity: 0;
    pointer-events: none;
}

.cookie-inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cookie-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 1;
    text-align: center;
}

.cookie-text svg {
    color: var(--white);
    flex-shrink: 0;
}

.cookie-text p {
    font-size: .82rem;
    color: rgba(255, 255, 255, .6);
    line-height: 1.6;
    margin: 0;
}

.cookie-text a {
    color: var(--c3);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    margin-top: 5px;
}

.cookie-accept {
    padding: 10px 28px;
    background: var(--dark);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--T);
    font-family: var(--font);
    letter-spacing: 0.5px;
}

.cookie-accept:hover {
    background: var(--c3);
    transform: translateY(-2px);
}

.cookie-reject {
    padding: 10px 22px;
    background: transparent;
    color: var(--white);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--T);
    font-family: var(--font);
}

.cookie-reject:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--white);
}

.cookie-settings {
    padding: 10px 22px;
    background: transparent;
    color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 50px;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--T);
    font-family: var(--font);
}

.cookie-settings:hover {
    color: var(--white);
    border-color: rgba(255, 255, 255, .4);
}

/* Cookie Modal */
.cookie-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #091a27;
    border: 1px solid rgba(32, 178, 170, 0.3);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 9000;
    width: 90%;
    max-width: 500px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}

.cookie-modal.active {
    opacity: 1;
    pointer-events: auto;
}

.cookie-modal h4 {
    margin-bottom: 20px;
    color: var(--white);
}

.cm-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.cm-save {
    margin-top: 20px;
    width: 100%;
}


/* Responsive — new components and fixes */
@media (max-width: 768px) {

    /* Mobile Menu Premium Polish */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--dark);
        backdrop-filter: blur(20px);
        padding: 120px 30px 40px;
        overflow-y: auto;
        display: block;
        transition: right 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 999;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    }

    .nav-item {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .main-nav.active .nav-item {
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav.active .nav-item:nth-child(1) {
        transition-delay: 0.1s;
    }

    .main-nav.active .nav-item:nth-child(2) {
        transition-delay: 0.15s;
    }

    .main-nav.active .nav-item:nth-child(3) {
        transition-delay: 0.2s;
    }

    .main-nav.active .nav-item:nth-child(4) {
        transition-delay: 0.25s;
    }

    .main-nav.active .nav-item:nth-child(5) {
        transition-delay: 0.3s;
    }

    .main-nav.active .nav-item:nth-child(6) {
        transition-delay: 0.35s;
    }

    .nav-close:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: rotate(90deg);
    }

    .main-nav.active {
        z-index: 9999 !important;
        right: 0;
    }

    /* Hamburger Close Button Visibility */
    .hamburger.active span {
        background-color: var(--white) !important;
    }

    /* Hero Mobile Fix - Premium Polish */
    .hero-actions {
        flex-direction: row !important;
        width: 100%;
        gap: 12px !important;
    }

    .hero-actions .btn {
        width: auto !important;
        flex: 1;
        justify-content: center;
        padding: 0 12px !important;
        font-size: 0.8rem !important;
        height: 44px !important;
        line-height: 44px !important;
        border-radius: 50px !important;
        letter-spacing: 0.5px !important;
        font-weight: 600 !important;
        box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.15);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    }

    .hero-actions .btn:active {
        transform: scale(0.96);
    }

    .hero-content {
        padding-left: 0 !important;
        border-left: none !important;
        text-align: center;
    }

    .hero-tag,
    .hero-desc {
        text-align: center;
    }

    /* About Button Center */
    .about-text {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .about-text .btn {
        margin: 0 auto;
    }

    .dotted-world-wrap {
        padding: 24px;
    }

    .pin-dot {
        width: 7px;
        height: 7px;
    }

    .pin-label {
        font-size: .6rem;
        padding: 4px 10px;
    }

    .footer-newsletter {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .fn-left p {
        max-width: 100%;
    }

    .fn-form {
        width: 100%;
        flex-direction: column;
    }

    .fn-form input {
        width: 100%;
    }

    .cookie-inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 0 20px;
    }

    .cookie-text {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cookie-text p {
        text-align: center;
        margin-bottom: 5px;
        font-size: 0.85rem;
        line-height: 1.4;
        padding: 0 15px;
    }

    .cookie-actions {
        width: 100%;
        justify-content: center;
    }

    .float-wa {
        bottom: 25px;
        left: 20px;
        width: 50px;
        height: 50px;
    }

    .scroll-top {
        bottom: 25px;
        right: 20px;
        width: 50px;
        height: 50px;
    }
}

/* Nav Close Button (Mobile actions version uses static) */
.nav-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.4s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 1.5rem;
    line-height: 1;
    z-index: 10;
}

.nav-close:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.9);
}

/* Cookie View Switching */
.cookie-view {
    width: 100%;
    transition: opacity 0.3s ease;
}

.cookie-simple {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.cookie-advanced {
    display: none;
    animation: fadeIn 0.4s ease;
}

.cm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.cm-header h4 {
    margin: 0;
    font-size: .95rem;
    color: var(--white);
    letter-spacing: 0.5px;
}

.cm-opts {
    display: grid;
    gap: 12px;
}

.cm-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 8px;
}

.cm-opt input {
    width: 18px;
    height: 18px;
    accent-color: var(--c2);
    cursor: pointer;
}

.cm-opt label {
    font-size: .85rem;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    user-select: none;
}

.cm-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.cm-actions button {
    flex: 1;
}

.cm-btn-reject {
    background: transparent;
    border: 1px solid rgba(255, 90, 90, 0.3);
    color: rgba(255, 120, 120, 0.9);
}

.cm-btn-reject:hover {
    border-color: #ff4d4d;
    color: #ff4d4d;
    background: rgba(255, 77, 77, 0.05);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .cookie-simple {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding: 0;
    }

    .cookie-actions {
        width: 100%;
        display: flex;
        gap: 10px;
    }

    .cookie-actions button {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .nav-close {
        display: flex;
    }

    /* Gentler Floating Buttons */
    .float-wa,
    .scroll-top {
        width: 44px !important;
        height: 44px !important;
        bottom: 20px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .float-wa svg,
    .scroll-top svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .pin-dot {
        width: 6px;
        height: 6px;
    }

    .pin-label {
        font-size: .55rem;
        padding: 3px 8px;
    }

    .dotted-world-wrap {
        padding: 16px;
    }
}

/* =========================================
   PHASE 5: BLOG & NEWS PAGES
   ========================================= */

/* Header Solid Variant (for subpages) */
.header.solid {
    background: var(--white);
    box-shadow: var(--shd);
}

/* Page Hero */
.page-hero {
    position: relative;
    height: 40vh;
    min-height: 300px;
    background: var(--c1);
    background-image: var(--grad-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    padding-top: 80px;
    /* Header offset */
    overflow: hidden;
}

.page-hero .container {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.ph-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.1;
}

.ph-tag {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--c3);
    margin-bottom: 10px;
}

.page-hero h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 15px;
}

.page-hero p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

/* Blog List — Homepage Style (Modern Grid) */
.blog-list {
    padding: 80px 0;
    min-height: 60vh;
}

.blog-grid-modern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Pagination - Minimal */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    gap: 8px;
}

.page-link {
    width: 36px;
    height: 36px;
    border: 1px solid var(--g200);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 500;
}

.page-link.active,
.page-link:hover {
    background: var(--dark);
    color: var(--white);
    border-color: var(--dark);
}

/* Page Header (Breadcrumbs) */
.page-header {
    padding-top: 130px;
    padding-bottom: 10px;
    background: var(--dark);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.ph-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--dark) 0%, var(--c1) 100%);
    opacity: 1;
    z-index: 0;
}

.page-header .container {
    position: relative;
    z-index: 2;
}

.breadcrumbs {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
    margin-bottom: 18px;
    padding: 0;
}

.breadcrumbs a {
    color: inherit;
    opacity: 1;
    text-decoration: none;
    transition: var(--tr);
}

.breadcrumbs span {
    color: var(--c4);
    opacity: 1;
}

.breadcrumbs li {
    display: flex;
    align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 10px;
    opacity: 0.5;
}

.breadcrumbs a:hover {
    color: var(--c4);
}

.page-header h1 {
    font-size: 2.2rem;
    color: var(--white);
    margin-top: 16px;
    opacity: 0;
    animation: fadeInOpacity 1.2s ease forwards;
    font-weight: 300;
}

/* Article Detail (Standard) */
.article-head {
    margin-bottom: 30px;
}

.article-head h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    line-height: 1.2;
    color: var(--dark);
}

.article-featured-img {
    margin-bottom: 40px;
    border-radius: var(--r2);
    overflow: hidden;
    height: 400px;
}

.article-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-body {
    padding: 40px 0 100px;
}

.article-container {
    max-width: 800px;
    margin: 0 auto;
}

.ah-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: var(--text2);
}

.ah-meta span::before {
    content: "•";
    margin-right: 8px;
    color: var(--c2);
}

.ah-meta span:first-child::before {
    content: none;
}

.article-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 50px;
    text-align: justify;
}

.article-content p {
    margin-bottom: 1.5em;
}

.article-content .lead {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 2em;
    line-height: 1.6;
}

.article-content h2 {
    font-size: 2rem;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: var(--dark);
}

.article-content h3 {
    font-size: 1.5rem;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    color: var(--dark);
}

/* Article Layout - 2 Columns */
.article-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
}

@media (max-width: 991px) {
    .article-layout {
        grid-template-columns: 1fr;
    }

    .article-sidebar {
        order: -1;
        /* Sidebar on top on mobile/tablet? Or bottom? User didn't specify, but usually bottom or top for authors. Let's keep it bottom for now or standard flow. Actually, author on top is good but sidebar has categories too. Let's keep standard order (bottom on mobile). */
        order: 1;
    }
}

/* Sidebar Widgets */
.sidebar-widget {
    background: var(--white);
    border: 1px solid var(--c5);
    padding: 30px;
    border-radius: var(--r2);
    margin-bottom: 30px;
}

.sidebar-widget h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--c5);
    color: var(--dark);
}

/* Author Widget */
.author-widget {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.aw-profile img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 15px auto;
    border: 3px solid var(--c5);
    display: block;
    /* Ensure it respects margin auto if not flex item, but parent is flex column so margin auto works for flex items too */
}

.aw-profile h4 {
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 5px;
}

.aw-profile span {
    font-size: 0.85rem;
    color: var(--c2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.aw-bio {
    font-size: 0.9rem;
    color: var(--text2);
    margin: 15px 0 20px;
    line-height: 1.6;
}

/* Related Articles */
.related-articles-wrap {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid var(--c5);
}

.related-articles-wrap h3 {
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: var(--dark);
}

.related-articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.ra-card {
    display: block;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.ra-card:hover {
    transform: translateY(-5px);
}

.ra-img {
    height: 160px;
    overflow: hidden;
}

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

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

.ra-info {
    padding: 15px;
}

.ra-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.4;
}

.ra-info span {
    font-size: 0.8rem;
    color: var(--g400);
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

.article-content li {
    margin-bottom: 0.5em;
}

.article-content blockquote {
    border-left: 4px solid var(--c2);
    padding: 20px 30px;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--dark2);
    margin: 2em 0;
    background: var(--off);
}

.article-share-wrap {
    margin: 40px 0;
    padding-top: 30px;
    border-top: 1px solid var(--g100);
}

.article-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.article-share span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--g600);
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--off);
    color: var(--text2);
    transition: all var(--T);
    border: 1px solid var(--g100);
}

.share-btn.linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.25);
}

.share-btn.twitter:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.share-btn.whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}

.share-btn.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.25);
}

.share-btn.instagram:hover {
    background: #e4405f;
    border-color: #e4405f;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(228, 64, 95, 0.25);
}

.share-btn.email:hover {
    background: #ea4335;
    border-color: #ea4335;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(234, 67, 53, 0.25);
}


@media (max-width: 992px) {
    .blog-grid-modern {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-grid-modern {
        grid-template-columns: 1fr;
    }

    .article-featured-img {
        height: 250px;
    }

    .page-header,
    .breadcrumb-nav {
        padding-top: 120px;
        padding-bottom: 40px;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .article-head h1 {
        font-size: 1.8rem;
    }
}

/* Informative Article Structure (Main + Sidebar) */
.informative-body {
    padding: clamp(60px, 8vw, 100px) 0;
    background: var(--white);
}

.informative-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: clamp(40px, 6vw, 80px);
    align-items: flex-start;
}

.informative-sidebar {
    position: sticky;
    top: 120px;
}

.sidebar-widget {
    background: #f8fbfd;
    padding: 35px;
    border-radius: var(--r2);
    margin-bottom: 30px;
    border: 1px solid rgba(20, 94, 107, 0.05);
    box-shadow: 0 4px 20px rgba(11, 45, 63, 0.05);
    transition: all var(--T);
}

.sidebar-widget:hover {
    box-shadow: 0 8px 30px rgba(11, 45, 63, 0.08);
}

.sidebar-widget h3 {
    font-size: 1.3rem;
    margin-bottom: 25px;
    color: var(--dark);
    font-family: 'Playfair Display', serif;
    position: relative;
    padding-bottom: 15px;
}

.sidebar-widget h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--accent);
}

.sw-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sw-links li {
    margin-bottom: 8px;
}

.sw-links a {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    background: var(--white);
    border-radius: 10px;
    color: var(--text2);
    font-weight: 600;
    font-size: 0.92rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--g100);
    position: relative;
    overflow: hidden;
}

.sw-links a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 100%;
    background: var(--accent);
    transition: all 0.3s ease;
}

.sw-links li a:hover,
.sw-links li a.active {
    background: var(--white);
    color: var(--c1);
    border-color: var(--accent);
    padding-left: 24px;
    box-shadow: 0 4px 15px rgba(20, 94, 107, 0.08);
}

.sw-links li a:hover::before,
.sw-links li a.active::before {
    width: 4px;
}

.sw-contact {
    background: var(--dark) !important;
    color: var(--white);
    text-align: center;
}

.sw-contact h3 {
    color: var(--white);
}

.sw-contact p {
    font-size: 0.95rem;
    opacity: 0.8;
    margin-bottom: 25px;
    line-height: 1.6;
}

@media (max-width: 992px) {
    .informative-grid {
        grid-template-columns: 1fr;
    }

    .informative-sidebar {
        position: static;
        margin-top: 60px;
    }

    .informative-main {
        max-width: 800px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .sidebar-widget {
        padding: 30px 20px;
    }
}


/* Obsolete Presentation Styles Removed */

/* Floating UI Elements */
.float-wa,
.scroll-top {
    position: fixed;
    z-index: 90;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.1s ease-out;
    /* Smooth rising and general transitions */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.float-wa {
    left: 30px;
    bottom: 30px;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top {
    right: 30px;
    bottom: 30px;
    background: var(--dark);
    color: var(--white);
}

@media (max-width: 768px) {
    .scroll-top {
        right: 15px !important;
        bottom: 25px !important;
        width: 46px !important;
        height: 46px !important;
        z-index: 10000;
        transition: bottom 0.1s ease-out;
    }
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.float-wa:hover,
.scroll-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {

    .float-wa,
    .scroll-top {
        width: 46px !important;
        height: 46px !important;
        bottom: 25px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    }

    .float-wa {
        left: 20px !important;
        right: auto !important;
    }

    .scroll-top {
        right: 15px !important;
        /* Fixed synchronization with share fab */
        left: auto !important;
    }

    .float-wa svg,
    .scroll-top svg {
        width: 20px;
        height: 20px;
    }
}

.contact-page-content {
    padding: 60px 0;
    background: #fff;
}

/* ==========================================
   Standardized Justified Typography
   ========================================== */
.article-content p,
.blog-content p,
.content-body p,
.standard-page-section p,
.member-bio p {
    text-align: justify;
    text-justify: inter-word;
    margin-bottom: 1.5rem;
    hyphens: auto;
}

/* Specific Content Width & Readability */
.article-content,
.blog-content,
.about-text,
.content-body {
    margin-left: 0;
}

/* Ensure headings/lists aren't justified */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4 {
    text-align: left;
}

.article-content ul,
.article-content ol,
.blog-content ul,
.blog-content ol,
.content-body ul,
.content-body ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.article-content li,
.blog-content li,
.content-body li {
    margin-bottom: 0.5rem;
}

@media (max-width: 600px) {

    .article-content p,
    .blog-content p,
    .about-text p,
    .content-body p {
        text-align: left;
        /* Better readability on very narrow screens */
    }
}

/* Responsive Mega Menu Refinements */
@media (max-width: 1024px) {
    .dd.mega-menu {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .dd.mega-menu {
        position: static;
        width: 100%;
        max-width: none;
        grid-template-columns: 1fr;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 10px 0;
        display: none;
        backdrop-filter: none;
        border: none;
    }

    .has-dd.open .dd.mega-menu {
        display: grid;
    }

    .mm-col {
        gap: 5px;
    }

    .mm-col a {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* Blockquote Style */
blockquote {
    margin: 2.5rem 0;
    padding: 2rem 2.5rem;
    border-left: 5px solid var(--c4);
    background: #f8fafc;
    position: relative;
    border-radius: 0 12px 12px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

blockquote::before {
    content: "“";
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 5rem;
    color: var(--c4);
    opacity: 0.2;
    font-family: serif;
    line-height: 1;
}

blockquote p {
    font-style: italic;
    font-size: 1.25rem;
    color: var(--c1);
    line-height: 1.7;
    margin-bottom: 0;
    font-weight: 500;
}

/* KVKK Box Style - STATIC & Boxed */
.kvkk-box {
    background-color: #fdfdfd;
    border: 1px solid #eee;
    padding: 30px;
    border-radius: 12px;
    margin-top: 50px;
    margin-bottom: 120px !important;
    /* Safe zone for floating UI buttons */
}


/* Helper Classes */
.p-0 {
    padding: 0 !important;
}

.m-0 {
    margin: 0 !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: flex-start;
}

.cp-info-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.cp-info-item {
    display: flex;
    gap: 20px;
}

.cp-icon {
    width: 60px;
    height: 60px;
    background: var(--c1);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--tr);
}

.cp-info-item:hover .cp-icon {
    background: var(--c2);
    transform: translateY(-5px);
}

.cp-text h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: var(--c1);
}

.cp-text p {
    color: #666;
    margin-bottom: 5px;
}

.cp-text a {
    color: inherit;
    transition: var(--tr);
}

.cp-text a:hover {
    color: var(--c2);
}

.cp-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c2) !important;
    position: relative;
}

.cp-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: var(--tr);
}

.cp-link:hover::after {
    width: 100%;
}

.cp-form-wrap {
    background: #fdfdfd;
    padding: 50px;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
}

.cp-form .form-group {
    position: relative;
    margin-bottom: 30px;
}

.cp-form input,
.cp-form textarea {
    width: 100%;
    padding: 15px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid #ddd;
    font-family: inherit;
    font-size: 1rem;
    color: var(--c1);
    transition: var(--tr);
}

.cp-form textarea {
    resize: none;
}

.cp-form label {
    position: absolute;
    left: 0;
    top: 15px;
    color: #999;
    pointer-events: none;
    transition: var(--tr);
}

.cp-form input:focus~label,
.cp-form input:not(:placeholder-shown)~label,
.cp-form textarea:focus~label,
.cp-form textarea:not(:placeholder-shown)~label {
    top: -10px;
    font-size: 0.8rem;
    color: var(--c2);
}

.cp-form input:focus,
.cp-form textarea:focus {
    outline: none;
    border-color: var(--c2);
}

.map-section {
    padding-bottom: 0;
}

.map-container {
    height: 450px;
    overflow: hidden;
    filter: grayscale(1);
    transition: var(--tr);
}

.map-container:hover {
    filter: grayscale(0);
}

@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .cp-form-wrap {
        padding: 30px;
    }
}

/* --- NEW FEATURES CSS --- */

/* 1. Team Search */
.team-search-wrap {
    margin: 30px auto;
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.team-search-input {
    width: 100%;
    padding: 15px 25px;
    border-radius: 30px;
    border: 1px solid var(--g200);
    background: #ffffff;
    color: var(--text);
    font-size: 1rem;
    box-shadow: var(--shd);
    transition: all 0.3s ease;
}

.team-search-input::placeholder {
    color: var(--g400);
}


.team-search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: var(--c2);
    box-shadow: var(--shd2);
}

/* 2. Podcast Section */
.podcast-section {
    padding: 40px 0;
    background: #f9f9f9;
}

.podcast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.podcast-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.podcast-card:hover {
    transform: translateY(-5px);
}

.pc-cover {
    position: relative;
    height: 200px;
}

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

.pc-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c2);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.podcast-card:hover .pc-play-icon {
    transform: translate(-50%, -50%) scale(1.1);
}

.pc-info {
    padding: 25px;
}

.pc-date {
    display: block;
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 10px;
}

.pc-info h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: var(--c1);
}

.pc-info p {
    font-size: 0.9rem;
    margin-bottom: 20px;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Homepage Popup */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    backdrop-filter: blur(5px);
}

.popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    background: #fff;
    width: 90%;
    max-width: 500px;
    padding: 40px;
    border-radius: 16px;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.popup-overlay.show .popup-content {
    transform: translateY(0);
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    transition: color 0.3s ease;
}

.popup-close:hover {
    color: var(--c1);
}

.popup-body h3 {
    color: var(--c1);
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.popup-body p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.popup-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.popup-form input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.95rem;
}

.popup-footer {
    text-align: center;
    font-size: 0.85rem;
    color: #999;
}

/* 4. Author Profile */
.author-profile {
    margin: 60px 0;
    padding: 40px;
    background: #f8fcfd;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 30px;
    border: 1px solid #eef6f8;
}

.ap-photo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ap-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-info h4 {
    margin: 0 0 5px;
    color: var(--c1);
    font-size: 1.2rem;
}

.ap-title {
    display: block;
    font-size: 0.9rem;
    color: var(--c2);
    margin-bottom: 12px;
    font-weight: 500;
}

.ap-info p {
    font-size: 0.95rem;
    margin-bottom: 15px;
    color: #555;
}

.ap-link {
    font-size: 0.9rem;
    color: var(--c1);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.ap-link:hover {
    border-color: var(--c2);
    color: var(--c2);
}

@media (max-width: 768px) {
    .author-profile {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
}

/* 5. Floating Socials override - LEFT SIDE */
/* 5. Floating Socials override - HORIZONTAL BOTTOM LEFT */
.float-socials {
    position: fixed;
    left: 40px;
    bottom: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    z-index: 999;
    transition: bottom 0.1s ease-out;
    /* Smooth rising logic */
}

@media (max-width: 768px) {
    .float-socials {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .float-socials {
        left: 15px;
        bottom: 25px;
        flex-direction: row;
        /* Back to horizontal */
        gap: 10px;
        z-index: 10000;
        transition: bottom 0.1s ease-out;
        /* Sharper response for scroll logic */
    }

    .float-social {
        width: 40px;
        height: 40px;
    }
}

.fs-label {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.8;
    margin-right: 5px;
    font-family: var(--font);
}

.float-social {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8e8e8eab;
    background: #8e8e8e3d;
    border: 2px solid #8e8e8e30;
    box-shadow: none;
    transition: all 0.3s ease;
    text-decoration: none;
}

.float-social svg {
    width: 18px;
    height: 18px;
}

.float-social:hover {
    transform: translateY(-3px);
    background: #8e8e8e63;
    border-color: #8e8e8eb0;
    color: var(--white);
}

.fl-li,
.fl-mq,
.fl-wa {
    background: #8e8e8e1a;
}

.mq-txt {
    font-weight: 700;
    font-size: 1.2rem;
    font-family: serif;
}

.mq-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

.float-social .tooltip {
    position: absolute;
    bottom: 55px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
    white-space: nowrap;
    pointer-events: none;
}

.float-social:hover .tooltip {
    opacity: 1;
    visibility: visible;
    bottom: 60px;
}

/* Podcast Player UI */
.pc-player-ui {
    padding: 20px;
}

.pc-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.pc-play-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--c2);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 172, 193, 0.4);
    transition: all 0.3s ease;
}

.pc-play-btn:hover {
    transform: scale(1.1);
    background: var(--c1);
}

.pc-track-info {
    flex: 1;
    overflow: hidden;
}

.pc-track-info h4 {
    font-size: 1rem;
    margin: 0 0 5px;
    color: var(--c1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-track-info span {
    font-size: 0.8rem;
    color: #999;
    display: block;
}

.pc-progress-bar {
    width: 100%;
    height: 4px;
    background: #eee;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.pc-progress-fill {
    height: 100%;
    background: var(--c2);
    width: 35%;
    border-radius: 2px;
}

.pc-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #bbb;
    margin-top: 5px;
}

/* Cleanup old floating WA */
.float-wa {
    display: none !important;
}

/* Page Header — Narrow */
.ph-narrow {
    height: 300px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: var(--dark);
    margin-top: 0;
}

.ph-narrow .ph-bg {
    position: absolute;
    inset: 0;
    background: url('/assets/images/cover.jpg') center/cover;
    opacity: 0.2;
}

.ph-narrow .container {
    position: relative;
    z-index: 2;
    padding-top: 60px;
}

.ph-narrow h1 {
    font-size: 2.5rem;
    color: var(--white);
    margin-top: 24px;
    opacity: 0;
    animation: fadeInOpacity 1.2s ease forwards;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumbs a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s;
}

.breadcrumbs a:hover {
    color: var(--white);
}


.container-wide {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
}

@media (max-width: 1200px) {
    .container-wide {
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .container-wide {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {

    .container,
    .container-wide {
        padding: 0 15px !important;
    }
}

/* Publications Layout — Advanced Filter */
html {
    overflow-y: scroll;
    /* Prevent horizontal shift when scrollbar appears/disappears */
}

.pub-layout-left-sidebar {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 30px;
    padding: 80px 0 60px;
}

/* If sidebar is not rendered, let content span full grid width. */
.pub-layout-left-sidebar>.pub-main:first-child {
    grid-column: 1 / -1;
}

.pub-main {
    min-height: 400px;
    /* Enhanced stability */
}

@media (max-width: 1200px) {
    .pub-layout-left-sidebar {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.pub-sidebar {
    position: relative;
    border-right: 1px solid var(--g100, #eee);
    padding-right: 15px;
}

@media (max-width: 1200px) {
    .pub-sidebar {
        border-right: none;
        padding-right: 0;
        order: -1;
    }
}

.ps-sticky {
    position: sticky;
    top: 80px;
}

.ps-title {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: var(--c1);
}

.pub-sidebar-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pub-sidebar-filters .pfr-pill {
    width: 100%;
    text-align: left;
    padding: 8px 15px;
    font-size: 0.95rem;
}

.pub-grid.dense-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

@media (max-width: 1400px) {
    .pub-grid.dense-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pub-grid.dense-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Extreme Density Card Styling */
.pub-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.pub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
    border-color: var(--c4);
}

.pub-card-img {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}

.pub-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pub-card-body {
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.pub-card-title {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: #1e293b;
    overflow-wrap: break-word;
}

.pub-card-author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 0.7rem;
    opacity: 0.8;
}

.pub-card-author img {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50%;
}


/* Main styles moved below */

/* Publication Cards */
.pub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.related-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 1100px) {
    .pub-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pub-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.pub-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Ensure cards in carousel have equal height */
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shd);
    transition: all var(--T);
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.pub-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shd-hover);
    border-color: #00897b;
}

.pub-card-img {
    position: relative;
    height: 200px;
    overflow: hidden;
}

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

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

.pub-card-badge {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    min-width: 90px !important;
    padding: 7px 16px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    /* Unified 4px radius */
    z-index: 2 !important;
    color: #fff !important;
    background: rgba(11, 45, 63, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s ease !important;
}

.pub-card:hover .pub-card-badge {
    background: rgba(11, 45, 63, 0.3) !important;
}

.pub-card-date {
    position: absolute !important;
    bottom: 20px !important;
    right: 20px !important;
    min-width: 90px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: rgba(11, 45, 63, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
    /* Unified 4px radius */
    z-index: 2 !important;
    transition: all 0.4s ease !important;
}

.pub-card:hover .pub-card-date {
    background: rgba(11, 45, 63, 0.25) !important;
}

/* Unified glass style for all badges */
.pub-badge-news,
.pub-badge-podcast,
.pub-badge-article {
    background: rgba(255, 255, 255, 0.15) !important;
}

.pub-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.pub-card:hover .pub-card-play {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--c4);
    color: var(--c1);
    border-color: var(--c4);
}

/* pub-card-body is defined above at line 6150 — do not duplicate */

.pub-card-body h4 {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text);
    margin-top: 6px;
    margin-bottom: 8px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
    overflow-wrap: break-word;
    hyphens: auto;
}

.pub-card:hover .pub-card-body h4 {
    color: var(--dark);
}

.pub-card-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--g100, #eee);
}

.pub-card-author img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    aspect-ratio: 1 / 1;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--g100, #eee);
    flex-shrink: 0;
    display: block;
}

.pub-card-author span {
    font-size: 0.75rem;
    color: var(--text2, #666);
    font-weight: 500;
}

.pub-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--g500, #888);
}

.pub-card-cat {
    color: #334155;
    /* Dark slate for the meta label */
}

/* Title and hover transition are handled by the primary .pub-card selectors above */

/* Removed specialized variant overlays */

/* Magazine Layout for Homepage News */
.magazine-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.magazine-col {
    display: contents;
}

.mag-small-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Featured Card Design — Normalized for Grid Balance */
.featured-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--r2);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shd);
    transition: all var(--T);
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    border-color: var(--c4);
}

.featured-card-bg {
    position: relative;
    height: 150px;
    /* More compact */
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
}

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

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

.featured-card-ov {
    display: none;
    /* Removing gradient overlay to match standard cards */
}

.featured-card-content {
    padding: 12px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;
}

.featured-card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 14px;
    font-size: 0.6rem;
    font-weight: 400;
    /* Subtle tag */
    text-transform: uppercase;
    border-radius: 30px;
    z-index: 2;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin: 0;
}

.featured-card-title {
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--c2);
    margin-top: 25px;
    margin-bottom: 12px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
}

.featured-card:hover .featured-card-title {
    color: var(--c2);
}

.featured-card-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    opacity: 0.7;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text2);
    font-weight: 400;
    /* Non-bulky desc */
}

.featured-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--g100, #eee);
    font-size: 0.75rem;
    color: var(--text2, #666);
    font-weight: 500;
}

.featured-meta .read-more {
    display: none;
}

.owl-carousel .owl-stage-outer {
    padding: 40px 0px !important;
}

@media (max-width: 1200px) {
    .featured-card-title {
        font-size: 1.6rem;
    }

    /* Podcast Slider Styles — 9 column container */
    .podcast-slider-container {
        max-width: 900px;
        /* Approximate 9/12 of 1200px container */
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        padding: 20px 0;
    }

    .podcast-owl {
        margin-top: 40px;
        padding: 30px 0 60px;
        /* Increased bottom padding for better shadow visibility */
    }

    .owl-carousel .owl-stage-outer {
        padding: 40px 0 !important;
        margin: -40px 0 !important;
        overflow: hidden !important;
    }

    .podcast-owl .item {
        padding-bottom: 20px;
        /* Extra bottom space for each card's shadow */
    }

    .podcast-section {
        padding: 40px 0;
        background: #fdfdfd;
    }

    .podcast-owl .owl-nav {
        display: flex;
        justify-content: center;
        gap: 15px;
        margin-top: 30px;
    }

    .podcast-owl .owl-nav button {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #fff !important;
        color: var(--c1) !important;
        border: 1px solid var(--g200) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }

    .podcast-owl .owl-nav button:hover {
        background: var(--c1) !important;
        color: #fff !important;
        border-color: var(--c1) !important;
    }

    .podcast-owl .owl-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .podcast-owl .owl-dot span {
        width: 8px;
        height: 8px;
        background: var(--g200) !important;
        border-radius: 50%;
        display: block;
        transition: all 0.3s;
    }

    .podcast-owl .owl-dot.active span {
        width: 24px;
        border-radius: 4px;
        background: var(--c1) !important;
    }

    /* Featured Card Podcast Background Pattern */
    .featured-card-podcast::before {
        content: "EK\nSP";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15vw;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.05);
        white-space: pre;
        line-height: 0.8;
        text-align: center;
        pointer-events: none;
        z-index: 1;
    }

    .featured-card-podcast .featured-card-tag {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }



    /* Removed specialized card styles */

    .pub-card-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background: rgba(0, 137, 123, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        opacity: 0;
        transition: all 0.3s;
    }

    .pub-card:hover .pub-card-play {
        opacity: 1;
    }

    /* Removed purple override */
}

@media (max-width: 900px) {
    .magazine-layout {
        grid-template-columns: 1fr;
    }


}

/* FadeInUp animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Podcast Detail Page */
.podcast-hero {
    position: relative;
    height: 420px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.podcast-hero-bg {
    position: absolute;
    inset: 0;
}

.podcast-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(11, 45, 63, 0.95) 0%, rgba(11, 45, 63, 0.4) 50%, transparent 100%);
}

.podcast-hero-content {
    position: relative;
    z-index: 2;
    padding: 60px 0 40px;
    width: 100%;
}

.podcast-hero-content .container {
    display: flex;
    align-items: flex-end;
    gap: 40px;
}

.podcast-cover {
    width: 180px;
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

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

.podcast-hero-info {
    flex: 1;
}

.podcast-hero-info .podcast-badge {
    display: inline-block;
    padding: 5px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: #8e44ad;
    color: #fff;
    border-radius: 20px;
    margin-bottom: 12px;
}

.podcast-hero-info h1 {
    color: #fff;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.podcast-hero-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.podcast-hero-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Podcast Player */
.podcast-player-section {
    padding: 60px 0;
}

.podcast-player-wrap {
    max-width: 800px;
    margin: 0 auto;
}

/* Podcast Card (Homepage) */
.podcast-card {
    background: var(--white);
    border-radius: var(--r2);
    overflow: hidden;
    box-shadow: var(--shd);
    transition: all var(--T);
    border: 1px solid rgba(0, 0, 0, 0.04);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.podcast-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shd-hover);
    border-color: rgba(142, 68, 173, 0.2);
}

.pc-cover {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.pc-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.podcast-card:hover .pc-cover img {
    transform: scale(1.06);
}

/* Podcast Player Detail */
.podcast-player {
    background: var(--off, #f9f9f9);
    border-radius: 16px;
    padding: 30px;
    border: 1px solid var(--g100, #eee);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
}

.pd-player-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.pd-play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(142, 68, 173, 0.4);
    transition: all 0.3s;
    flex-shrink: 0;
}

.pd-play-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(142, 68, 173, 0.5);
}

.pd-track-info {
    flex: 1;
}

.pd-track-info h3 {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--c1);
}

.pd-track-info span {
    font-size: 0.85rem;
    color: var(--g400, #999);
}

.pd-progress {
    margin-bottom: 8px;
}

.pd-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--g200, #e0e0e0);
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.pd-progress-fill {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #8e44ad, #9b59b6);
    border-radius: 3px;
    transition: width 0.3s;
}

.pd-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--g400, #bbb);
    margin-top: 6px;
}

/* Podcast Description */
.podcast-content {
    margin-bottom: 40px;
}

.podcast-content h2 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    color: var(--c1);
}

.podcast-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text2, #555);
    margin-bottom: 16px;
}

/* Podcast Host */
.podcast-host {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--off, #f9f9f9);
    border-radius: 12px;
    border: 1px solid var(--g100, #eee);
    margin-bottom: 40px;
}

.podcast-host-img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3px solid var(--c2);
}

.podcast-host-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podcast-host-info h4 {
    font-size: 1.1rem;
    margin-bottom: 2px;
    color: var(--c1);
}

.podcast-host-info span {
    font-size: 0.85rem;
    color: var(--c2);
    font-weight: 500;
}

.podcast-host-info p {
    font-size: 0.9rem;
    color: var(--text2, #666);
    margin-top: 6px;
}

/* Episode Notes */
.podcast-notes {
    margin-bottom: 40px;
}

.podcast-notes h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--c1);
}

.podcast-notes ul {
    list-style: none;
    padding: 0;
}

.podcast-notes li {
    padding: 10px 0;
    border-bottom: 1px solid var(--g100, #eee);
    font-size: 0.95rem;
    color: var(--text2, #555);
    display: flex;
    align-items: center;
    gap: 10px;
}

.podcast-notes li::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8e44ad;
    flex-shrink: 0;
}

/* Other Episodes */
.podcast-other {
    margin-bottom: 40px;
}

.podcast-other h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--c1);
}

.pe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.pe-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--white);
    border-radius: var(--r2);
    text-decoration: none;
    color: inherit;
    border: 1px solid transparent;
    box-shadow: var(--shd);
    transition: all var(--T);
}

.pe-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shd-hover);
    border-color: rgba(142, 68, 173, 0.3);
}

.pe-card-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

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

.pe-card-info h4 {
    font-size: 0.92rem;
    margin-bottom: 4px;
    color: var(--c1);
    line-height: 1.3;
}

.pe-card-info span {
    font-size: 0.78rem;
    color: var(--g400, #999);
}

/* Podcast Share */
.podcast-share-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.podcast-share {
    display: flex;
    gap: 12px;
}

.podcast-share a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    text-decoration: none;
}

.podcast-share .share-spotify {
    background: #1DB954;
    color: #fff;
}

.podcast-share .share-apple {
    background: #FC3C44;
    color: #fff;
}

.podcast-share .share-linkedin {
    background: #0077b5;
    color: #fff;
}

.podcast-share .share-twitter {
    background: #1DA1F2;
    color: #fff;
}

.podcast-share .share-whatsapp {
    background: #25d366;
    color: #fff;
}

.podcast-share a:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Responsive Podcast Detail */
@media (max-width: 768px) {
    .podcast-hero {
        height: auto;
        min-height: 300px;
    }

    .podcast-hero-content .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .podcast-cover {
        width: 140px;
        height: 140px;
    }

    .podcast-hero-info h1 {
        font-size: 1.6rem;
    }

    .podcast-hero-meta {
        justify-content: center;
        flex-wrap: wrap;
    }

    .podcast-host {
        flex-direction: column;
        text-align: center;
    }

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

/* Author Photo in Card — Kept for backward compat */
.nm-auth-photo {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--white);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.nm-auth-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pods badge color */
.nm-pod {
    background: #8e44ad !important;
}

.podcast-card-sm {
    position: relative;
    border-radius: var(--r2);
    overflow: hidden;
    height: 300px;
}

.podcast-card-sm .nm-overlay::before {
    background: linear-gradient(0deg, rgba(80, 20, 100, 0.9), transparent);
}

/* Update Float Socials — Smaller */
.float-social {
    width: 40px !important;
    height: 40px !important;
}

.float-social svg {
    width: 20px;
    height: 20px;
}

/* Metro Grid Large (Compact Tiles) */
.metro-grid-lg {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.metro-grid-lg .metro-tile {
    min-height: 180px;
    padding: 24px;
}

.metro-grid-lg .metro-tile h3 {
    font-size: 1rem;
}

/* Career Page */
.career-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    padding: 80px 0;
}

@media (max-width: 900px) {
    .career-layout {
        grid-template-columns: 1fr;
    }
}

.career-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.career-content p {
    margin-bottom: 20px;
    line-height: 1.6;
    color: var(--text2);
    text-align: justify;
}

.career-form-box {
    background: var(--off);
    padding: 40px;
    border-radius: var(--r2);
    border: 1px solid var(--g200);
}

.career-form-box h3 {
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.c-form .form-group {
    margin-bottom: 20px;
}

.c-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.9rem;
}

.c-form input,
.c-form textarea,
.c-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--g200);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 0.95rem;
    transition: all 0.3s;
}

.c-form input:focus,
.c-form textarea:focus {
    border-color: var(--c2);
    outline: none;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.c-form textarea {
    height: 120px;
    resize: vertical;
}

.c-form .btn {
    width: 100%;
    margin-top: 10px;
}

.kvkk-box {
    margin-top: 60px;
    padding: 30px;
    background: #f9f9f9;
    border-top: 1px solid var(--g200);
    font-size: 0.85rem;
    color: var(--g400);
    line-height: 1.6;
}

.kvkk-box h4 {
    margin-bottom: 10px;
    color: var(--dark);
}

/* Article Author Box */
.author-box {
    margin-top: 40px;
    padding: 30px;
    background: var(--off);
    border-left: 4px solid var(--c2);
    display: flex;
    gap: 20px;
    align-items: center;
}

.ab-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.ab-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-info h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.ab-title {
    display: block;
    font-size: 0.85rem;
    color: var(--g400);
    margin-bottom: 10px;
}

.ab-socials {
    display: flex;
    gap: 10px;
}

.ab-soc {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s;
}

.ab-li {
    background: #0077b5;
    color: white;
}

.ab-mq {
    background: #d32f2f;
    color: white;
}

.ab-soc:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* ==========================================
   BLOG / ARTICLE DETAIL PAGE — Modern Design
   ========================================== */

/* ---------- Blog Hero ---------- */
.blog-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Force content to bottom */
    align-items: flex-start;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
}

.blog-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.65);
}

.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(11, 45, 63, 0.95) 0%, rgba(11, 45, 63, 0.55) 45%, rgba(11, 45, 63, 0.2) 100%);
    z-index: 1;
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 100px 0 40px;
    /* Increased top padding, minimal bottom padding */
    margin-top: auto;
    /* Push to bottom */
}

.blog-hero .breadcrumbs {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
    font-size: 0.82rem;
}

.blog-hero .breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
}

.blog-hero .breadcrumbs li::after {
    content: '/';
    color: rgba(255, 255, 255, 0.3);
}

.blog-hero .breadcrumbs li:last-child::after {
    display: none;
}

.blog-hero .breadcrumbs a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s;
}

.blog-hero .breadcrumbs a:hover {
    color: var(--c2);
}

.blog-hero .breadcrumbs span {
    color: var(--c2);
}

.blog-hero-badge {
    display: inline-block;
    padding: 5px 16px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: var(--c2);
    color: #fff;
    border-radius: 20px;
    margin-bottom: 16px;
}

.blog-hero h1 {
    color: #fff;
    font-size: 1.65rem;
    /* More boutique scale */
    line-height: 1.35;
    margin-top: 16px;
    margin-bottom: 20px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .blog-hero {
        min-height: 380px;
    }

    .blog-hero h1 {
        font-size: 1.25rem !important;
        /* Elegant mobile scale */
        line-height: 1.4 !important;
        margin-top: 10px !important;
        margin-bottom: 12px !important;
    }

    .blog-hero-top-meta {
        font-size: 0.75rem !important;
    }
}

/* Hero Meta row with authors and sharing */
.blog-hero-auth-share-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Vertically centered */
    width: 100%;
}

.blog-hero-authors-flat {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.blog-hero-share {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* HERO SHARE BUTTONS (Desktop Only) */
.blog-hero-share {
    display: none !important;
    /* Default hidden on mobile */
    gap: 12px;
    align-items: center;
}

@media (min-width: 992px) {
    .blog-hero-share {
        display: flex !important;
    }
}

.hero-share-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    /* Synchronized with author capsules */
    min-width: 40px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.95rem;
}

.hero-share-item:hover {
    background: var(--c2);
    border-color: var(--c2);
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.hero-share-item.lnk:hover {
    background: #0077b5;
    border-color: #0077b5;
}

.hero-share-item.twt:hover {
    background: #000;
    border-color: #333;
}

.hero-share-item.fbk:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.hero-share-item.eml:hover {
    background: #ea4335;
    border-color: #ea4335;
}

.blog-hero-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.blog-hero-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.blog-hero-author strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    line-height: 0.95rem;
}

.blog-hero-author span {
    color: var(--off);
    font-size: 0.82rem;
    font-weight: 500;
}

.blog-hero-details {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.blog-hero-details span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* ---------- Blog Detail Layout ---------- */
.blog-detail-section {
    padding: 28px 0 34px;
    margin-top: 0 !important;
    /* Ensure no gap with hero */
    background: #fff;
    /* Solid background to prevent bleed-through */
    position: relative;
}

.blog-detail-layout {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-detail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 30px;
    align-items: start;
}

.blog-detail-sidebar {
    min-width: 0;
    position: sticky;
    top: 110px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.blog-detail-sidebar>* {
    width: 100%;
}

.blog-detail-shell>.blog-authors-section {
    grid-column: 1;
    margin-top: 24px;
}

.blog-detail-sidebar .article-newsletter-box {
    align-items: flex-start;
    gap: 14px;
    padding: 20px 18px;
    margin-bottom: 0;
}

.blog-detail-sidebar .article-newsletter-box .nl-icon {
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
}

.blog-detail-sidebar .article-newsletter-box .nl-form {
    flex-direction: column;
}

.blog-detail-sidebar .article-newsletter-box p {
    text-align: left !important;
    text-justify: auto !important;
    hyphens: none;
    word-break: normal;
}

.blog-detail-sidebar .article-newsletter-box button {
    width: 100%;
}

.blog-detail-sidebar .mondaq-card-body {
    gap: 12px;
    align-items: flex-start;
}

.blog-detail-sidebar .mondaq-icon-wrap {
    width: 36px;
    height: 36px;
    margin-top: 2px;
}

.blog-detail-sidebar .mondaq-title {
    font-size: 1.02rem;
    line-height: 1.3;
}

.blog-detail-sidebar .mondaq-desc {
    text-align: left !important;
    text-justify: auto !important;
    hyphens: none;
    word-break: normal;
    line-height: 1.55;
}

.blog-detail-sidebar .blog-related-section {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.blog-detail-sidebar .blog-related-section .blog-sidebar-section-title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--c1);
    font-family: var(--font-head);
}

.blog-detail-sidebar .blog-related-section .magazine-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.blog-detail-sidebar .blog-related-section .pub-card {
    width: 100%;
}

@media (max-width: 1199px) {
    .blog-detail-shell {
        display: block;
    }

    .blog-detail-sidebar {
        position: static;
        margin-top: 1rem;
        gap: 14px;
    }

    .blog-detail-shell>.blog-authors-section {
        margin-top: 1.25rem;
    }

    .blog-detail-sidebar .blog-related-section {
        margin-top: 1rem !important;
    }

    .blog-detail-sidebar .blog-related-section .blog-sidebar-section-title {
        margin-bottom: 8px;
    }
}

/* ---------- Reading Progress ---------- */
.blog-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 10000;
}

.blog-reading-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--c2), var(--c1));
    transition: width 0.15s ease-out;
}

/* ---------- Blog Content ---------- */
.blog-content {
    min-width: 0;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text2, #444);
}

.blog-lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--c1);
    font-weight: 500;
    border-left: 4px solid var(--c2);
    padding-left: 24px;
    margin-bottom: 36px;
}

.blog-content h2 {
    font-size: 1.6rem;
    color: var(--c1);
    margin-top: 44px;
    margin-bottom: 16px;
    font-family: var(--font-head);
    position: relative;
}

.blog-content h3 {
    font-size: 1.25rem;
    color: var(--c1);
    margin-bottom: 12px;
    font-family: var(--font-head);
}

.blog-content> :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.blog-content> :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.blog-content p {
    margin-bottom: 20px;
}

.blog-content ul,
.blog-content ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.blog-content li {
    margin-bottom: 10px;
}

.blog-content blockquote {
    margin: 36px 0;
    padding: 24px 30px;
    background: linear-gradient(135deg, rgba(0, 172, 193, 0.06), rgba(11, 45, 63, 0.04));
    border-left: 4px solid var(--c2);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--c1);
    line-height: 1.6;
    position: relative;
}

.blog-content blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 16px;
    font-size: 4rem;
    color: var(--c2);
    opacity: 0.25;
    font-family: var(--font-head);
    line-height: 1;
}

/* ---------- Tags ---------- */
.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--g100, #eee);
}

.blog-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--g50, #f5f5f5);
    color: var(--c1);
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid var(--g100, #eee);
}

.blog-tag:hover {
    background: var(--c2);
    color: #fff;
    border-color: var(--c2);
}

/* ---------- Resources & References (SEO/AI) ---------- */
.content-resources {
    margin: 48px 0;
    padding: 32px;
    background: var(--g50, #f8fafc);
    border-left: 4px solid var(--c4);
    border-radius: var(--r2, 8px);
    position: relative;
}

.content-resources h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.25rem;
    color: var(--c1);
    display: flex;
    align-items: center;
    gap: 12px;
}

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

.resource-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--g100, #e2e8f0);
    transition: var(--T);
}

.resource-item:last-child {
    border-bottom: none;
}

.resource-item::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c4);
    flex-shrink: 0;
}

.resource-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
}

.resource-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--c1);
    text-decoration: none;
    transition: var(--T);
}

.resource-title:hover {
    color: var(--c4);
    transform: translateX(5px);
}

.resource-desc {
    font-size: 0.85rem;
    color: var(--g400, #64748b);
    font-style: italic;
}

/* Dark Mode Overrides for Resources */
[data-theme="dark"] .content-resources {
    background: rgba(30, 41, 59, 0.4);
}

[data-theme="dark"] .resource-item {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ---------- Tags ---------- */
.blog-share {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 48px;
}

.blog-share-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--g400, #999);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blog-share-btns {
    display: flex;
    gap: 10px;
}

.blog-share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
}

.blog-share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.bsb-li {
    background: var(--social-li);
    color: #fff;
}

.bsb-tw {
    background: var(--social-tw);
    color: #fff;
}

.bsb-fb {
    background: var(--social-fb);
    color: #fff;
}

.bsb-wa {
    background: var(--social-wa);
    color: #fff;
}

/* ---------- Premium Author Card ---------- */
.blog-author-card {
    display: flex;
    gap: 32px;
    padding: 32px;
    background: #fff;
    border-radius: var(--r2);
    box-shadow: var(--shd);
    border: 1px solid var(--g100);
    margin: 48px 0;
    transition: var(--T);
    position: relative;
    overflow: hidden;
}

.blog-author-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: var(--c4);
}

.blog-author-card:hover {
    box-shadow: var(--shd-hover);
    transform: translateY(-4px);
    border-color: var(--c4);
}

.bac-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 4px solid var(--g50);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bac-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bac-right {
    flex: 1;
}

.bac-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c4);
    margin-bottom: 8px;
}

.bac-right h3 {
    font-size: 1.5rem;
    color: var(--c1);
    margin-bottom: 4px;
    font-family: var(--font-head);
}

.bac-title {
    display: block;
    font-size: 0.95rem;
    color: var(--g400);
    font-weight: 600;
    margin-bottom: 8px;
}

.bac-bio {
    font-size: 0.95rem;
    color: var(--g500, #475569);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 600px;
}

.bac-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.bac-socials {
    display: flex;
    gap: 12px;
}

.bac-soc {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g50);
    color: var(--c1);
    transition: var(--T);
    text-decoration: none;
}

.bac-soc:hover {
    background: var(--c4);
    color: #fff;
    transform: translateY(-2px);
}

.bac-action {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c1);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: var(--T);
}

.bac-action:hover {
    color: var(--c4);
    gap: 12px;
}

/* Dark Mode Author Card */
[data-theme="dark"] .blog-author-card {
    background: rgba(30, 41, 59, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bac-avatar {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .bac-soc {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

@media (max-width: 600px) {
    .blog-author-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 24px;
    }

    .bac-bio {
        margin-left: auto;
        margin-right: auto;
    }

    .bac-footer {
        justify-content: center;
    }
}

/* ---------- Related Content ---------- */
.blog-related {
    margin-top: 12px;
}

/* ==========================================
   TEAM MEMBER DETAIL PAGE — Premium Overhaul
   ========================================== */

.member-hero {
    padding: 120px 0 0;
    background: var(--c1);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.member-hero::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 60%;
    height: 120%;
    background: radial-gradient(circle at 60% 40%, rgba(0, 172, 193, 0.15), transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.member-hero-inner {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 80px;
    align-items: end;
    position: relative;
    z-index: 2;
}

.member-photo-wrap {
    position: relative;
    z-index: 3;
}

.member-photo {
    width: 100%;
    height: 560px;
    border-radius: var(--r2) var(--r2) 0 0;
    overflow: hidden;
    box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--g800);
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.05);
}

.member-info {
    padding-bottom: 80px;
}

/* Standardized Breadcrumb Bar (Decoupled from Hero) */
.breadcrumb-nav {
    background: var(--dark);
    padding: 110px 0 20px;
    /* Space for fixed header + internal padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 991px) {
    .breadcrumb-nav {
        padding: 85px 0 15px;
    }
}

.breadcrumb-nav .breadcrumbs {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.breadcrumb-nav .breadcrumbs a {
    color: inherit;
    text-decoration: none;
    transition: var(--T);
}

.breadcrumb-nav .breadcrumbs a:hover {
    color: var(--c4);
}

.breadcrumb-nav .breadcrumbs span {
    color: var(--c4);
}

/* Adjusting Heroes since breadcrumbs moved out */
.member-hero,
.blog-hero,
.podcast-hero {
    padding-top: 60px !important;
}

.member-info .member-title {
    font-size: 1.1rem;
    color: var(--c4);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 12px;
}

.member-info h1 {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 24px;
    font-family: var(--font-head);
    letter-spacing: -1px;
}

.member-contact-strip {
    display: flex;
    gap: 32px;
    margin-top: 40px;
}

.mc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: var(--T);
    padding: 10px 0;
}

.mc-item:hover {
    color: var(--c4);
    transform: translateX(5px);
}

.mc-item svg {
    color: var(--c4);
}

/* Content Layout */
.member-main-content {
    background: #fff;
    padding: 100px 0;
}

.member-detail-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 100px;
}

.member-summary {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--c1);
    font-weight: 500;
    margin-bottom: 48px;
    font-family: var(--font-body);
}

.member-sec {
    margin-bottom: 64px;
}

.member-sec h2 {
    font-size: 2rem;
    font-family: var(--font-head);
    color: var(--c1);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.member-sec h2::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--g100);
}

.bio-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text2);
}

.bio-text p {
    margin-bottom: 24px;
}

/* Education & Experience Lists */
.edu-list {
    list-style: none;
    padding: 0;
}

.edu-item {
    margin-bottom: 24px;
}

.edu-item strong {
    display: block;
    font-size: 1.1rem;
    color: var(--c1);
    margin-bottom: 4px;
}

.edu-item span {
    color: var(--g500);
    font-size: 0.95rem;
}

/* Practice Grid */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.expertise-card {
    padding: 20px;
    background: var(--g50);
    border: 1px solid var(--g100);
    border-radius: var(--r2);
    font-weight: 700;
    color: var(--c1);
    text-align: center;
    transition: var(--T);
    display: flex;
    align-items: center;
    justify-content: center;
}

.expertise-card:hover {
    background: #fff;
    border-color: var(--c4);
    box-shadow: var(--shd);
    color: var(--c4);
    transform: translateY(-5px);
}

/* Sidebar Styling */
.member-sidebar {
    position: sticky;
    top: 120px;
    height: fit-content;
}

.sidebar-widget {
    background: var(--g50);
    padding: 40px;
    border-radius: var(--r2);
    border: 1px solid var(--g100);
    margin-bottom: 32px;
}

.sidebar-widget h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--c5);
    color: var(--white)
}

.lang-list {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.lang-badge {
    padding: 6px 16px;
    background: #fff;
    border: 1px solid var(--g200);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c1);
}

/* Dark Mode Overrides */
[data-theme="dark"] .member-main-content {
    background: var(--dark);
}

[data-theme="dark"] .expertise-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

[data-theme="dark"] .sidebar-widget {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .edu-item strong {
    color: #fff;
}

[data-theme="dark"] .member-sec h2 {
    color: #fff;
}

[data-theme="dark"] .member-summary {
    color: var(--c4);
}

/* Responsive Overrides */
@media (max-width: 1200px) {
    .member-hero-inner {
        grid-template-columns: 350px 1fr;
        gap: 40px;
    }

    .member-info h1 {
        font-size: 3.5rem;
    }

    .member-detail-grid {
        gap: 60px;
    }
}

@media (max-width: 991px) {
    .member-profile-hero {
        padding: 120px 0 40px;
        /* Space for logo */
    }

    .member-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 30px !important;
    }

    .member-frame {
        margin: 0 auto 10px !important;
        /* Centered photo frame */
    }

    .member-image img {
        max-width: 180px !important;
        height: 240px !important;
    }

    .member-hero-meta {
        justify-content: center !important;
    }

    .member-hero-right h1 {
        font-size: 2.2rem !important;
    }

    .member-hero-tagline {
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 1.1rem !important;
    }

    .member-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
}

.blog-related h3 {
    font-size: 1.3rem;
    color: var(--c1);
    margin-bottom: 24px;
    font-family: var(--font-head);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--c2);
}

/* Related Content — Full Width Section */
.blog-related-section {
    padding: 64px 0 86px !important;
    background: #f9fafb !important;
    display: block !important;
    position: relative;
    margin-top: 48px !important;
}

.blog-related-section .pub-grid,
.blog-related-section .magazine-layout {
    margin-top: 0;
}

/* ---------- Blog Detail Responsive ---------- */
@media (max-width: 900px) {
    .blog-hero {
        min-height: 400px;
    }

    .blog-hero h1 {
        font-size: 1.8rem;
    }

    .blog-hero-meta {
        flex-direction: column;
        align-items: flex-start;
    }

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

    .blog-author-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .bac-socials {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .blog-hero {
        min-height: 350px;
    }

    .blog-hero h1 {
        font-size: 1.5rem;
    }

    .blog-hero-content {
        padding: 40px 0 30px;
    }

    .blog-detail-layout {
        padding: 0 8px;
    }
}



/* Career Page Improvements */
.career-section {
    position: relative;
    padding-bottom: 0px !important;
}

.career-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: start;
    /* Box will fit its content tightly */
}

@media (max-width: 900px) {
    .career-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.career-content h2 {
    font-size: 2.2rem;
    margin-bottom: 24px;
    color: var(--c1);
}

.career-content p {
    margin-bottom: 20px;
    color: var(--g600);
    line-height: 1.8;
}

/* Unified KVKK Box Style - STATIC & Boxed (Line 7901) */
.kvkk-box {
    background-color: #fdfdfd !important;
    border: 1px solid #eee !important;
    padding: 30px !important;
    border-radius: 12px;
    margin-top: 60px;
    margin-bottom: 120px !important;
    /* Safe zone for floating UI buttons */
    text-align: justify;
    line-height: 1.85;
}

.kvkk-box p,
.kvkk-box div {
    text-align: justify !important;
}

.kvkk-box a {
    color: var(--c1);
    text-decoration: underline;
    transition: all 0.3s;
}

.kvkk-box a:hover {
    color: var(--c4);
}

.kvkk-box h4 {
    font-size: 1rem;
    margin-bottom: 12px;
    color: var(--dark);
}

.kvkk-box p,
.kvkk-box div {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: var(--g600);
}

.cr-form-box {
    background: #fff;
    padding: 25px;
    /* Compacter padding */
    border-radius: 20px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.cr-form-box h3 {
    margin-bottom: 16px;
    font-size: 1.3rem;
    color: var(--dark);
    text-align: center;
}

.cr-form .form-group {
    margin-bottom: 12px;
    /* Smoother gap */
}

.cr-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c1);
}

.cr-form input,
.cr-form textarea {
    width: 100%;
    padding: 10px 14px;
    /* Slightly smaller inputs */
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.9rem;
    transition: all 0.3s;
    background: #f8fafc;
}

.c-form input:focus,
.c-form textarea:focus {
    outline: none;
    border-color: var(--c2);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 131, 143, 0.1);
}

.c-form textarea {
    min-height: 120px;
    resize: vertical;
}

.c-form button[type="submit"] {
    width: 100%;
    margin-top: 10px;
}

/* CV Special Upload Design */
.cv-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    background: #f8fafc;
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.cv-upload-area:hover,
.cv-upload-area.dragover {
    background: #f1f5f9;
    border-color: var(--c4);
}

.cv-upload-area.is-invalid {
  border: 1px solid #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220,53,69,.15);
}

.cv-upload-content i {
    font-size: 2.5rem;
    color: var(--c4);
    margin-bottom: 15px;
    display: block;
}

.cv-upload-text strong {
    display: block;
    font-size: 1rem;
    color: var(--c1);
    margin-bottom: 5px;
}

.cv-upload-text span {
    font-size: 0.85rem;
    color: var(--g400);
}

.cv-upload-file-info {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cv-upload-file-info i {
    font-size: 1.2rem;
    color: #10b981;
    margin-bottom: 0;
}

.cv-upload-file-info .file-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--c1);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   MOBILE RESPONSIVE POLISH (General Fixes)
   ========================================== */
@media (max-width: 900px) {

    .about-grid,
    .intl-grid,
    .cf-wrap {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-mosaic {
        display: flex;
        flex-direction: column;
    }

    .nm-featured-center {
        min-height: 400px;
    }
}

@media (max-width: 600px) {
    .team-grid {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .container {
        padding: 0 20px;
    }

    .about-img-sm {
        width: 120px;
        bottom: -15px;
        right: -15px;
    }

    .about-badge {
        padding: 12px 18px;
    }

    .about-badge strong {
        font-size: 1.6rem;
    }
}

/* ==========================================
   Team Member Detail — Premium Redesign
   ========================================== */

.member-profile-hero {
    padding: 130px 0 25px;
    /* Increased top to clear header/logo */
    background: var(--dark);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.member-profile-hero::before {
    display: none;
}

.member-hero-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.member-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    max-width: fit-content;
}

.member-image img {
    display: block;
    max-width: 200px;
    /* Reduced further for minimalist look */
    height: 280px;
    /* Strict height to keep hero around 400px */
    border-radius: 18px;
    object-fit: contain;
    /* Full photo fits perfectly */
}

.member-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.member-hero-label {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(146, 223, 244, 0.15);
    color: var(--c4);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 6px;
    /* Naive box shape as requested */
    margin-bottom: 0;
}

.meta-btns {
    display: flex;
    gap: 8px;
    align-items: center;
    /* Ensure alignment with the label */
}

.member-hero-meta .t-btn-box {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(146, 223, 244, 0.15);
    /* Exact match to label */
    border-radius: 6px;
    color: var(--c4);
    transition: all 0.3s;
    text-decoration: none !important;
}

.member-hero-meta .t-btn-box svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.member-hero-meta .t-btn-box:hover {
    background: var(--c4);
    color: var(--c1);
    transform: translateY(-2px);
}

.member-hero-right h1 {
    font-size: 3rem;
    /* Further reduced for naive minimalist look */
    color: var(--white);
    font-family: var(--font-head);
    margin-bottom: 8px;
    line-height: 1.1;
    font-weight: 500;
}

.member-hero-tagline {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: 600px;
    margin-bottom: 25px;
    font-weight: 400;
}

/* Align detail buttons with list hover style */
.member-hero-right .t-btn {
    width: 50px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

.member-hero-right .t-btn svg {
    width: 28px !important;
    height: 28px !important;
}

.member-hero-right .t-btn:hover {
    background: #fff !important;
    color: var(--primary) !important;
    transform: translateY(-5px) scale(1.1) !important;
}

.member-hero-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.m-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 0.95rem;
    transition: all 0.3s;
    opacity: 0.8;
}

.m-contact-link:hover {
    opacity: 1;
    color: var(--c4);
    transform: translateY(-2px);
}

.m-contact-link svg {
    color: var(--c4);
}

/* Member Content */
.member-details {
    padding: 80px 0;
    background: #fff;
}

.member-layout-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 80px;
}

.member-layout-grid.no-sidebar {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.member-section {
    margin-bottom: 60px;
}

.section-title {
    font-size: 1.5rem;
    color: var(--c1);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
    position: relative;
    font-family: var(--font-head);
}

.section-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 1px;
    background: var(--c4);
}

.member-text p {
    margin-bottom: 20px;
    color: var(--g600);
    font-size: 1.05rem;
    line-height: 1.8;
}

.member-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.expertise-tag {
    padding: 10px 20px;
    background: #f1f5f9;
    color: var(--c1);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid transparent;
    transition: all 0.3s;
}

.expertise-tag:hover {
    background: var(--white);
    border-color: var(--c4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Education List */
.member-edu-list {
    list-style: none;
}

.edu-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
}

.edu-marker {
    width: 12px;
    height: 12px;
    background: var(--c4);
    border-radius: 50%;
    margin-top: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(206, 162, 101, 0.1);
}

.edu-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--c1);
    margin-bottom: 4px;
}

.edu-content span {
    font-size: 0.95rem;
    color: var(--g400);
}

/* Sidebar */
.sidebar-block {
    margin-bottom: 50px;
}

.sidebar-title {
    font-size: 1.2rem;
    color: var(--c1);
    margin-bottom: 20px;
    font-family: var(--font-head);
}

.member-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lang-pill {
    padding: 6px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    font-size: 0.85rem;
    color: var(--c1);
    font-weight: 500;
}

.member-insights {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.insight-card {
    display: block;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all 0.35s;
}

.insight-card:hover {
    background: var(--white);
    border-color: var(--c4);
    box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.1);
    transform: translateX(5px);
}

.insight-date {
    display: block;
    font-size: 0.75rem;
    color: var(--g400);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.insight-card h4 {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--c1);
    font-weight: 600;
    margin-bottom: 0px;
}

.all-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c4);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
}

.all-link:hover {
    letter-spacing: 1.5px;
    color: var(--c1);
}

/* Member Detail Responsive */
@media (max-width: 1024px) {
    .member-hero-grid {
        grid-template-columns: 300px 1fr;
        gap: 40px;
    }

    .member-hero-right h1 {
        font-size: 2.8rem;
    }

    .member-layout-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 768px) {
    .member-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .member-frame {
        max-width: 320px;
        margin: 0 auto;
    }

    .member-hero-right h1 {
        font-size: 2.2rem;
    }

    .member-hero-contact {
        justify-content: center;
    }

    .member-hero-tagline {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {
    .member-profile-hero {
        padding-top: 80px;
    }

    .member-hero-contact {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}

/* ==========================================
   Contact Page Redesign
   ========================================== */
.contact-hero {
    height: 450px;
    background: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.65)), url('/assets/images/TEKFEN-cover.webp') center/cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    margin-bottom: 0;
    position: relative;
}

.contact-hero h1 {
    font-size: 3.5rem;
    color: var(--white);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.contact-hero .container {
    z-index: 2;
}

.contact-info-section {
    padding: 100px 0;
    background: var(--white);
}

.contact-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: stretch;
}

.contact-details-box {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-details-box h2 {
    font-size: 2.2rem;
    color: var(--c1);
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 15px;
}

.contact-details-box h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--c4);
}

.c-info-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.c-info-icon {
    width: 54px;
    height: 54px;
    background: var(--off);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c4);
    flex-shrink: 0;
    transition: all 0.3s;
    border: 1px solid var(--g100);
}

.c-info-item:hover .c-info-icon {
    background: var(--c4);
    color: var(--white);
    transform: translateY(-5px);
}

.c-info-text h4 {
    font-size: 1.1rem;
    margin-bottom: 4px;
    color: var(--c1);
}

.c-info-text p {
    color: var(--g600);
    font-size: 1rem;
    line-height: 1.6;
}

.contact-map-container {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--g100);
    height: 520px;
}

.contact-map-container iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(0.1);
}

.contact-form-section {
    padding: 120px 0;
    background: var(--dark);
    color: var(--white);
}

.contact-form-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-form-header h3 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 15px;
}

.contact-form-header p {
    color: var(--gray);
    font-size: 1.1rem;
}

.contact-form-box {
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02);
    padding: 60px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

/* CP Form Dark Overrides */
.contact-form-box label {
    color: rgba(255, 255, 255, 0.9) !important;
}

.contact-form-box input,
.contact-form-box textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--white) !important;
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
    border-color: var(--c4) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 1024px) {
    .contact-info-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .contact-hero h1 {
        font-size: 2.8rem;
    }

    .contact-map-container {
        height: 400px;
    }
}

/* ==========================================
   Contact Page Side-by-Side Layout
   ========================================== */
.cp-side-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 40px;
    max-width: none;
    width: 100%;
    margin: 0;
}

.career-grid {
    grid-template-columns: 1fr 500px;
    max-width: none !important;
    width: 100%;
}

.cp-map-sec {
    height: auto;
    width: 100%;
    background: #fff;
    margin-bottom: 80px !important;
    padding-top: 2rem;
}

.cp-map-sec iframe {
    width: 100%;
    height: 500px;
    display: block;
    filter: grayscale(1) contrast(1.1) opacity(0.8);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.cp-map-sec:hover iframe {
    filter: grayscale(0) contrast(1) opacity(1);
}

.cp-info-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-side-box {
    background: var(--white);
    padding: 25px;
    border-radius: 15px;
    border: 1px solid var(--g100);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s;
}

.cp-side-box:hover {
    transform: translateX(-10px);
    border-color: var(--c4);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.cp-side-box .cp-top-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.cp-side-box .cp-top-text {
    text-align: left;
}

.cp-side-box .cp-top-text h4 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.cp-side-box .cp-top-text p {
    font-size: 0.85rem;
    margin-bottom: 0;
}

@media (max-width: 1024px) {

    .cp-side-grid,
    .career-grid {
        grid-template-columns: 1fr !important;
        max-width: 800px;
    }

    .cp-info-stack {
        order: -1;
        /* Move info above form on mobile */
        flex-direction: row;
        flex-wrap: wrap;
    }

    .cp-side-box:not(.p-0) {
        flex: 1;
        min-width: 250px;
        transform: none !important;
        padding: 12px 16px !important;
        gap: 12px !important;
    }

    .cp-side-box .cp-top-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .cp-side-box .cp-top-text h4 {
        font-size: 0.9rem !important;
    }

    .career-section {
        padding-top: 110px !important;
    }

    .career-content {
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    .career-grid {
        gap: 30px;
    }

    /* Compact contact cards */
    .cp-info-card {
        padding: 24px !important;
        gap: 20px !important;
    }

    .cp-info-card svg {
        width: 24px !important;
        height: 24px !important;
    }

    .cp-info-card h3 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 600px) {
    .cp-info-stack {
        flex-direction: column;
    }
}

/* ==========================================
   Contact Page Breadcrumb Background
   ========================================== */
.contact-breadcrumb {
    position: relative;
    background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), url('/assets/images/TEKFEN-cover.webp') center/cover no-repeat;
    padding: 110px 0 20px;
}

.contact-breadcrumb .breadcrumbs a,
.contact-breadcrumb .breadcrumbs span,
.contact-breadcrumb .breadcrumbs li::after {
    color: var(--white);
    opacity: 0.9;
}

.contact-breadcrumb .breadcrumbs a:hover {
    color: var(--c4);
    opacity: 1;
}

@media (max-width: 600px) {
    .contact-form-box {
        padding: 40px 20px;
    }

    .contact-hero {
        height: 300px;
    }

    .contact-hero h1 {
        font-size: 2.2rem;
    }
}

/* Map Section Cleanup done */

/* ==========================================================================
   STRICTLY SCOPED HOMEPAGE NEWS GRID FIX - MAGAZINE STYLE
   ========================================== */
.news,
.news * {
    box-sizing: border-box !important;
}

/* Moved width overrides to mobile-only media queries below */


@media (max-width: 768px) {
    .news .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .news .magazine-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

@media (max-width: 1100px) {
    .news .magazine-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 32px !important;
        overflow: hidden;
    }

    .news .magazine-col:nth-child(2) {
        order: -1 !important;
        /* Move featured card to top on tablet */
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .news .magazine-layout {
        gap: 24px !important;
    }

    .news .featured-card {
        padding: 32px 20px !important;
    }

    .news .featured-card-title {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 768px) {
    .news .magazine-layout {
        grid-template-columns: 1fr !important;
    }
}

.news .magazine-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Base card styling for the section */
.news .pub-card,
.news .featured-card {
    transition: all var(--T) !important;
    text-decoration: none !important;
    color: inherit !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
}

.news .pub-card:hover,
.news .featured-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: var(--shd-hover) !important;
}

/* ----------------------------------
   SMALL CARDS (LEFT & RIGHT)
   ---------------------------------- */
.news .pub-card {
    flex-direction: column !important;
    background: var(--white) !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: var(--shd) !important;
    border-radius: var(--r2) !important;
    overflow: hidden !important;
    flex: 1 !important;
    /* Standard side cards flex equally */
    padding: 0 !important;
}

.news .pub-card-img {
    position: relative !important;
    height: 160px !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

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

.news .pub-card:hover .pub-card-img img {
    transform: scale(1.06) !important;
}

.news .pub-card-body {
    padding: 16px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.news .pub-card-title,
.news .pub-card-body h4 {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--dark);
    margin-top: 8px !important;
    margin-bottom: 6px !important;
    font-weight: 500 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: color 0.3s !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

.news .pub-card:hover .pub-card-title,
.news .pub-card:hover .pub-card-body h4 {
    color: var(--c4) !important;
}

.news .pub-card-desc {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    opacity: 0.8 !important;
    margin-bottom: 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: var(--text2) !important;
}

.news .pub-card-author {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--g100, #eee) !important;
    font-size: 0.70rem !important;
    color: var(--text2, #666) !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

/* ----------------------------------
   FEATURED CARD (CENTER) - PILL STYLE
   ---------------------------------- */
/* ----------------------------------
   UNIVERSAL OVERLAY CARDS (MAGAZINE)
   ---------------------------------- */
.magazine-layout .pub-card,
.magazine-layout .featured-card {
    position: relative !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    /* Content at bottom */
    align-items: stretch !important;
    text-align: left !important;
    border-radius: var(--r2) !important;
    overflow: hidden !important;
    background: #000 !important;
    color: var(--white) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: none !important;
    /* Removed border */
}

.magazine-layout .pub-card {
    height: 240px !important;
    /* Increased height */
}

.magazine-layout .featured-card {
    height: 480px !important;
    /* Increased height */
}

.magazine-layout .pub-card:hover,
.magazine-layout .featured-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25) !important;
}

/* Background Image Handling */
.magazine-layout .pub-card-img,
.magazine-layout .featured-card-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.magazine-layout .pub-card-img img,
.magazine-layout .featured-card-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.magazine-layout .pub-card:hover .pub-card-img img,
.magazine-layout .featured-card:hover .featured-card-bg img {
    transform: scale(1.1) !important;
}

/* Dark Overlay Gradient */
.magazine-layout .pub-card::after,
.magazine-layout .featured-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(0, 15, 30, 0.1) 0%, rgba(0, 15, 30, 0.4) 40%, rgba(0, 15, 30, 0.95) 100%) !important;
    z-index: 2 !important;
    transition: opacity 0.5s !important;
}

.magazine-layout .pub-card:hover::after,
.magazine-layout .featured-card:hover::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 40%, #000000 100%) !important;
    opacity: 1 !important;
}

/* Content Area Fix */
.magazine-layout .pub-card:hover,
.magazine-layout .featured-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12) !important;
    /* Soft, delicate shadow */
}

/* Background Image Handling */
.magazine-layout .pub-card-img,
.magazine-layout .featured-card-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.magazine-layout .pub-card-img img,
.magazine-layout .featured-card-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.magazine-layout .pub-card:hover .pub-card-img img,
.magazine-layout .featured-card:hover .featured-card-bg img {
    transform: scale(1.1) !important;
}

/* Dark Overlay Gradient */
.magazine-layout .pub-card::after,
.magazine-layout .featured-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(0, 15, 30, 0.1) 0%, rgba(0, 15, 30, 0.4) 40%, rgba(0, 15, 30, 0.95) 100%) !important;
    z-index: 2 !important;
    transition: all 0.5s ease !important;
}

.magazine-layout .pub-card:hover::after,
.magazine-layout .featured-card:hover::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 40%, #000000 100%) !important;
}

/* Content Area Fix */
.magazine-layout .pub-card-body {
    position: relative !important;
    z-index: 3 !important;
    padding: 14px !important;
    /* Increased padding */
    width: 100% !important;
    background: transparent !important;
    /* Now overlay */
    flex: 0 1 auto !important;
}

.magazine-layout .pub-card-title,
.magazine-layout .featured-card-title {
    color: var(--white) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    display: block !important;
    transition: all 0.4s ease !important;
    line-height: 1.4 !important;
    font-size: 1.05rem !important;
    /* Strictly equalized to original small card size */
    text-transform: none !important;
}

.magazine-layout .pub-card:hover .pub-card-title,
.magazine-layout .featured-card:hover .featured-card-title {
    color: var(--c4) !important;
    /* Brand glow on hover */
}

/* Arrows Removed */
.pub-card-arrow,
.featured-card-arrow {
    display: none !important;
}

.magazine-layout .pub-card-badge {
    top: 14px !important;
    left: 14px !important;
}

.magazine-layout .pub-card-date {
    bottom: auto !important;
    top: 14px !important;
    right: 14px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    /* Removed border */
}

/* Remove old featured card styles and Author footers */
.featured-card-ov,
.pub-card-footer {
    display: none !important;
}

/* ----------------------------------
   RESPONSIVE OVERRIDES (MAGAZINE)
   ---------------------------------- */

@media (max-width: 1024px) {
    .magazine-layout {
        gap: 32px !important;
    }

    .magazine-layout .pub-card {
        height: 230px !important;
    }
}

@media (max-width: 991px) {
    .magazine-layout {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .magazine-col:nth-child(2) {
        grid-column: span 2 !important;
        order: -1 !important;
        /* Move featured card to top */
    }

    .magazine-layout .featured-card {
        height: 440px !important;
    }
}

@media (max-width: 768px) {
    .magazine-layout {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .magazine-col:nth-child(2) {
        grid-column: span 1 !important;
    }

    .magazine-layout .pub-card,
    .magazine-layout .featured-card {
        height: auto !important;
        /* Dynamic height for mobile */
        min-height: 240px !important;
    }

    .magazine-layout .pub-card-body {
        padding: 24px !important;
    }

    .magazine-layout .pub-card-title {
        font-size: 0.95rem !important;
    }

    .magazine-layout .featured-card-title {
        font-size: 1.2rem !important;
    }

    .magazine-layout .pub-card-badge,
    .magazine-layout .pub-card-date {
        min-width: 80px !important;
        font-size: 0.6rem !important;
        padding: 6px 12px !important;
        top: 16px !important;
    }

    .magazine-layout .pub-card-badge {
        left: 16px !important;
    }

    .magazine-layout .pub-card-date {
        right: 16px !important;
    }
}

@media (max-width: 480px) {

    .magazine-layout .pub-card,
    .magazine-layout .featured-card {
        min-height: 220px !important;
    }

    .magazine-layout .pub-card-body {
        padding: 20px !important;
    }
}

/* Author Profile Photos - Universal Face Alignment (Top) */
.t-photo img,
.member-image img,
.blog-hero-author img,
.bac-avatar img,
.pub-card-author img,
.author-widget img,
.ab-photo img,
.podcast-host-img img {
    object-position: top !important;
}

/* Scoped Typography Improvements for Content Areas */
.blog-content,
.article-content,
.about-text,
.intl-content,
.member-text,
.publication-detail,
.service-content {
    text-align: justify;
    line-height: 1.85;
    hyphens: auto;
    word-break: normal;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6,
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6,
.about-text h1,
.about-text h2,
.about-text h3,
.about-text h4,
.about-text h5,
.about-text h6,
.intl-content h1,
.intl-content h2,
.intl-content h3,
.intl-content h4,
.intl-content h5,
.intl-content h6,
.member-text h1,
.member-text h2,
.member-text h3,
.member-text h4,
.member-text h5,
.member-text h6,
.publication-detail h1,
.publication-detail h2,
.publication-detail h3,
.publication-detail h4,
.publication-detail h5,
.publication-detail h6,
.service-content h1,
.service-content h2,
.service-content h3,
.service-content h4,
.service-content h5,
.service-content h6 {
    text-align: left;
}

.blog-content p,
.blog-content div,
.article-content p,
.article-content div,
.about-text p,
.about-text div,
.intl-content p,
.intl-content div,
.member-text p,
.member-text div,
.publication-detail p,
.publication-detail div,
.service-content p,
.service-content div {
    margin-bottom: 1.2rem;
}

/* Responsive Fallback for Justified Text */
@media (max-width: 768px) {

    .blog-content,
    .article-content,
    .about-text,
    .intl-content,
    .member-text,
    .publication-detail,
    .service-content {
        text-align: left;
    }
}

/* Hero Author Flat List */
.blog-hero-authors-flat,
.podcast-hero-authors-flat {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 1.2rem 0 0;
}

.hero-author-item {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 14px 4px 4px;
    border-radius: 30px;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-author-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

.hero-author-item img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.hero-author-item span {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Modern Author Card (Static) */
.author-modern-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid #eef2f6;
    border-left: 4px solid var(--c1);
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.author-modern-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
    border-color: #dce3ea;
    border-left-color: var(--dark);
    background: linear-gradient(135deg, #fff 60%, #f8fafb 100%);
}

.amc-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    margin-bottom: 0 !important;
}

.author-modern-card a.amc-left,
.author-modern-card .amc-left-link {
    color: inherit;
    text-decoration: none;
}

.author-modern-card a.amc-left:focus-visible {
    outline: 2px solid rgba(0, 128, 145, 0.55);
    outline-offset: 3px;
    border-radius: 14px;
}

.amc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef2f7;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    align-self: center;
    margin-bottom: 0 !important;
}

.amc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.amc-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0, #f1f5f9);
    color: #94a3b8;
}

.amc-placeholder svg {
    width: 26px;
    height: 26px;
}

.amc-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    margin-bottom: 0 !important;
}

.amc-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.amc-title {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
    line-height: 1.2;
}

.amc-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    /* Ensure vertical centering in parent */
    gap: 8px;
    flex-shrink: 0;
}

.amc-socials {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center;
}

.amc-icon-btn,
.amc-profile-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none !important;
    flex-shrink: 0;
    line-height: 1;
}

.amc-icon-btn svg,
.amc-profile-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.amc-icon-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.amc-icon-btn:hover {
    background: var(--c1);
    color: #fff;
    border-color: var(--c1);
    box-shadow: 0 3px 8px rgba(0, 96, 100, 0.2);
}

.amc-profile-btn {
    background: var(--dark);
    color: #fff !important;
    border: none;
}

.amc-profile-btn:hover {
    background: var(--c1);
    box-shadow: 0 3px 8px rgba(0, 96, 100, 0.2);
}

@media (max-width: 768px) {
    .author-modern-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .amc-right {
        width: 100%;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
    }
}

/* Sidebar Tab Redesign */
.ps-title {
    font-weight: 800 !important;
    color: var(--dark) !important;
    border-bottom: 2px solid var(--off);
    padding-bottom: 12px;
    display: inline-block;
    margin-bottom: 24px !important;
}

.pub-sidebar-filters {
    gap: 12px !important;
}

.pub-sidebar-filters .pfr-pill {
    padding: 12px 18px !important;
    font-family: var(--font-head);
    font-weight: 500 !important;
    color: var(--text2) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--r2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.pub-sidebar-filters .pfr-pill:hover {
    background: var(--off) !important;
    color: var(--dark) !important;
    transform: translateX(4px);
}

.pub-sidebar-filters .pfr-pill.active {
    background: var(--dark) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(0, 96, 100, 0.2) !important;
    transform: translateX(0);
}

@media (max-width: 1200px) {
    .pub-sidebar-filters {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 8px !important;
        margin-bottom: 20px;
    }

    .pub-sidebar-filters .pfr-pill {
        width: auto !important;
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }

    .pub-sidebar-filters .pfr-pill:hover {
        transform: none !important;
    }
}

/* Share Center Layout Mod */
.article-share-wrap.border-top {
    border-top: 1px solid var(--g100) !important;
}

.article-share-wrap .share-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1px solid var(--g100) !important;
    background: #fff !important;
    color: var(--text2) !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.article-share-wrap .share-btn:hover {
    background: var(--off) !important;
    color: var(--dark) !important;
    border-color: var(--g200) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* Newsletter Subscription Box inline */
.article-newsletter-box {
    display: flex;
    align-items: center;
    gap: 30px;
    background: #fff;
    border: 1px solid var(--g100);
    border-radius: var(--r2);
    padding: 30px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
    margin-bottom: 2rem;
}

.article-newsletter-box .nl-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f0fbfa;
    color: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.article-newsletter-box .nl-content {
    flex: 1;
}

.article-newsletter-box h4 {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--c2);
    /* Darker blue/black */
    font-family: var(--font-head);
}

.article-newsletter-box p {
    margin: 0 0 16px 0;
    font-size: 0.9rem;
    color: var(--text2);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    word-break: break-word;
}

.article-newsletter-box .nl-form {
    display: flex;
    gap: 12px;
}

.article-newsletter-box input[type="email"] {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid var(--g100);
    border-radius: 8px;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s ease;
    background: #fafafa;
}

.article-newsletter-box input[type="email"]:focus {
    border-color: var(--c1);
    box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.1);
    background: #fff;
}

.article-newsletter-box button {
    padding: 12px 28px;
    background: var(--dark);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-newsletter-box button:hover {
    background: var(--dark);
    color: var(--c4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.article-newsletter-box button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 375px) {
    .news .featured-card-title {
        font-size: 1.1rem !important;
        margin-top: 50px !important;
    }

    .news .featured-card {
        padding: 24px 15px !important;
    }

    .logo img,
    .header .logo img {
        max-width: 130px !important;
        height: auto !important;
    }

    .header .container {
        padding: 0 15px !important;
    }
}

@media (max-width: 768px) {
    .article-newsletter-box {
        flex-direction: column;
        text-align: center;
        padding: 24px;
        gap: 20px;
    }

    .article-newsletter-box .nl-form {
        flex-direction: column;
        width: 100%;
    }

    .article-newsletter-box button {
        width: 100%;
    }
}

/* ═══════════════════════════════════
   RESPONSIVE STABILIZATION PASS
   Grid · Media · Spacing · Typography
   ═══════════════════════════════════ */

/* ── GLOBAL IMAGE STABILIZATION ── */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Card images — prevent layout shift */
.pub-card img,
.blog-card img,
.podcast-card img,
.practice-card img,
.team-card img,
.card-img-top,
.pub-card-img img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: var(--off);
}

/* ── SECTION PADDING SCALING ── */
@media (max-width: 991px) {

    .about,
    .intl,
    .practices-section,
    .pubs-section,
    .team-section {
        padding: 80px 0;
    }

    .about-grid,
    .intl-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-text h2 {
        font-size: 2rem;
    }

    .hero-title span {
        font-size: 2.6rem;
    }

    .hero-content {
        padding-left: 24px;
        max-width: 100%;
        padding-top: 120px;
    }

    .hero-desc {
        max-width: 100%;
        font-size: 1rem;
    }
}

@media (max-width: 991px) {
    .main-nav {
        height: 100vh !important;
        height: 100dvh !important;
        padding-bottom: 0 !important;
    }
}

@media (max-width: 768px) {

    .about,
    .intl,
    .practices-section,
    .pubs-section,
    .team-section {
        padding: 60px 0;
    }

    .hero {
        height: 85vh;
        min-height: 500px;
    }

    .hero-title span {
        font-size: 2rem;
    }

    .hero-content {
        padding-left: 16px;
        border-left-width: 3px;
    }

    .hero-desc {
        font-size: 0.9rem;
        margin-bottom: 24px;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-actions .btn {
        padding: 12px 24px;
        font-size: 0.75rem;
    }

    .hero-bottom {
        bottom: 16px;
        left: 16px;
        right: 16px;
    }

    .about-badge {
        position: relative;
        top: auto;
        left: auto;
        display: inline-block;
        margin-bottom: 16px;
    }

    .about-imgs {
        margin-bottom: 20px;
    }

    .about-img-sm {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        margin-top: 12px;
    }

    .about-text h2 {
        font-size: 1.75rem;
    }

    .about-nums {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 575px) {
    .container {
        padding: 0 16px;
    }

    h1 {
        font-size: 1.8rem;
    }

    /* Mobile typography handled by global variables */
}

/* ── PUBLICATION / BLOG GRID CONSISTENCY ── */
.pub-row,
.blog-row,
.pubs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.pub-row>[class*="col-"],
.blog-row>[class*="col-"],
.pubs-grid>[class*="col-"] {
    display: flex;
}

.pub-row>[class*="col-"]>*,
.blog-row>[class*="col-"]>*,
.pubs-grid>[class*="col-"]>* {
    width: 100%;
}

/* ── CARD EQUAL HEIGHT ── */
.pub-card,
.blog-card,
.podcast-card,
.practice-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pub-card .pub-card-body,
.blog-card .blog-card-body,
.podcast-card .podcast-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── MOBILE TABLE OVERFLOW ── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    table:not(.table-responsive table) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── FOOTER MOBILE ── */
@media (max-width: 768px) {
    .f-grid {
        gap: 32px;
    }

    .f-col {
        min-width: 100%;
    }
}

/* ── CONTACT FORM MOBILE ── */
@media (max-width: 575px) {
    .contact-form .row>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── MOBILE NAV IMPROVEMENTS ── */
@media (max-width: 991px) {
    .hamburger {
        display: flex;
    }

    .header-inner {
        height: 80px;
    }

    .logo img {
        max-height: 64px;
    }
}

/* ── PRINT STYLES ── */
@media print {

    .header,
    .footer,
    .float-social,
    .wa-float,
    .cookie-banner {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
}

/* ── PAGINATION STABILIZATION ── */
.pagination {
    list-style: none !important;
    padding-left: 0 !important;
    display: flex !important;
    gap: 8px;
    margin: 40px 0 0 0 !important;
    /* Added 40px top margin */
}

.pagination li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.pagination li:before {
    content: none !important;
}

/* Custom Cursor Logic Removed to restore default browser behavior */


/* TEAM MEMBER ICONS & BUTTONS (TOP RIGHT CORNER) */
.t-photo img {
    filter: none !important;
    -webkit-filter: none !important;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.t-card:hover .t-photo img {
    filter: none !important;
    transform: scale(1.05);
    /* Subtle scale, NO blur */
}

.t-overlay {
    opacity: 1 !important;
    /* Make icons visible or keep them for hover? User said "ikonları sağ üste koy", usually implies always visible or on hover. Looking at the request, I'll keep them on hover for a cleaner look unless they look better always visible. Actually, typically these are hover. But the user's image shows them visible. I'll make them always visible but subtle. */
    opacity: 1 !important;
    pointer-events: none;
    /* Let clicks pass to the card-link-block unless on a button */
}

.t-overlay .t-grid-btns {
    pointer-events: auto;
    display: flex !important;
    flex-direction: row !important;
    /* Horizontal layout for top right */
    gap: 8px !important;
}

.t-card .t-btn-box {
    width: 36px !important;
    height: 36px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    color: #fff !important;
}

.t-card .t-btn-box svg {
    width: 18px !important;
    height: 18px !important;
    fill: currentColor !important;
}

.t-card .t-btn-box:hover {
    background: var(--c1) !important;
    color: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
}

.t-card .t-li:hover {
    background: #0077b5 !important;
    color: #fff !important;
    border-color: #0077b5 !important;
}

.t-card .t-mail:hover {
    background: #ea4335 !important;
    color: #fff !important;
    border-color: #ea4335 !important;
}

.t-card-link-block {
    position: absolute;
    inset: 0;
    z-index: 5;
    cursor: pointer;
}

.t-info {
    z-index: 6;
    /* Visible above the link block, but clicks still go through if we don't block them. Actually better to keep link block at 7 and info at 6. */
    pointer-events: none;
    /* Make name/role pass clicks to the link-block */
}

.t-card-link-block {
    z-index: 8;
}


/* ==========================================
   Mondaq Presentation Card
   ========================================== */
.mondaq-presentation-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    /* Compact padding */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Tighter gap */
}

.mondaq-presentation-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

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

.mondaq-logo-box {
    display: inline-flex;
    align-items: center;
}

.mondaq-logo-img {
    height: 34px;
    width: auto;
    object-fit: contain;
    display: block;
}

.mondaq-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #0f172a;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
}

.mondaq-card-body {
    display: flex;
    gap: 20px;
}

.mondaq-icon-wrap {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-top: 6px;
}

.mondaq-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1e293b;
}

.mondaq-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

.mondaq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #0f172a;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.mondaq-btn:hover {
    background: #1e293b;
    color: #fff;
    transform: translateY(-2px);
}

/* ==========================================
   Sticky Sharing (Desktop)
   ========================================== */
.blog-share-sticky {
    position: absolute;
    left: -80px;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 10;
}

@media (max-width: 1280px) {
    .blog-share-sticky {
        position: static;
        flex-direction: row;
        margin-bottom: 30px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }
}

.blog-share-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #94a3b8;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

@media (max-width: 1280px) {
    .blog-share-label {
        writing-mode: horizontal-tb;
        transform: none;
    }
}

.blog-share-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 1280px) {
    .blog-share-links {
        flex-direction: row;
    }
}

.share-link-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 1rem;
}

.share-link-item:hover {
    transform: scale(1.1);
    color: #fff;
}

.share-link-item.lnk:hover {
    background: #0077b5;
    border-color: #0077b5;
}

.share-link-item.twt:hover {
    background: #000;
    border-color: #000;
}

.share-link-item.fbk:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.share-link-item.eml:hover {
    background: #64748b;
    border-color: #64748b;
}

/* ==========================================
   Mobile Share FAB
   ========================================== */
.blog-share-fab {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    /* Matched to scroll-top */
    height: 50px;
    /* Matched to scroll-top */
    border-radius: 50%;
    background: var(--dark);
    /* Teal color from scroll-top */
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 90;
    /* Above content, below header/menu */
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media (max-width: 991px) {

    /* Synced with desktop share hide breakpoint */
    .blog-share-fab {
        display: flex;
        right: 15px !important;
        bottom: 85px !important;
        width: 46px !important;
        height: 46px !important;
        background: var(--dark) !important;
        z-index: 90;
    }
}

.blog-share-fab:active {
    transform: scale(0.9);
}

.blog-share-menu-mobile {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 100001 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transform: scale(0.8) translateY(40px);
}

.blog-share-menu-mobile.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

.blog-share-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 100000 !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}

.blog-share-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.share-menu-header {
    margin-bottom: 40px;
    text-align: center;
}

.share-menu-header h6 {
    font-size: 1.5rem;
    font-family: var(--font-head);
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.btn-close-share {
    position: fixed;
    top: 40px;
    right: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 110;
}

.btn-close-share:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg) scale(1.1);
}

.share-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 400px;
    width: 90%;
    justify-items: center;
    /* Center icons in grid cells */
    margin: 0 auto;
}

@media (max-width: 400px) {
    .share-menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

.share-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}

.share-menu-item:hover {
    transform: translateY(-5px);
}

.share-menu-item i {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.3s;
}

.share-menu-item span {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.8;
}

.share-menu-item.wa i {
    color: #25D366;
    background: rgba(37, 211, 102, 0.15);
}

.share-menu-item.lnk i {
    color: #0077b5;
    background: rgba(0, 119, 181, 0.15);
}

.share-menu-item.twt i {
    color: #000;
    background: rgba(0, 0, 0, 0.1);
}

.share-menu-item.eml i {
    color: #64748b;
    background: rgba(100, 116, 139, 0.1);
}

/* Premium Form Styles (Career & Contact) */
.premium-form .form-group-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 25px;
}

.floating-group {
    position: relative;
    margin-bottom: 0 !important;
}

.floating-group .form-control {
    width: 100%;
    padding: 24px 16px 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    height: auto !important;
    box-shadow: none !important;
}

.floating-group textarea.form-control {
    min-height: 120px !important;
}

.floating-group label {
    position: absolute;
    top: 16px;
    left: 16px;
    color: #94a3b8;
    pointer-events: none;
    transition: all 0.2s ease;
    font-size: 1rem;
    margin-bottom: 0;
}

.floating-group .form-control:focus,
.floating-group .form-control:not(:placeholder-shown) {
    background: #fff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1) !important;
}

.floating-group .form-control:focus~label,
.floating-group .form-control:not(:placeholder-shown)~label {
    top: 6px;
    left: 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent);
}

.cv-upload-area {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.cv-upload-area:hover,
.cv-upload-area.dragover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
}

.cv-upload-content i {
    font-size: 2.5rem;
    color: #94a3b8;
    margin-bottom: 10px;
    display: block;
}

.cv-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cv-upload-text strong {
    display: block;
    font-size: 1.1rem;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 0;
}

.cv-upload-text span {
    font-size: 0.85rem;
    color: #64748b;
    display: block;
    line-height: 1.35;
}

/* ==========================================================================
   GLOBAL UX/UI MOBILE SPACING FIX
   ========================================== */
@media (max-width: 768px) {

    /* Make standard containers breathe more on mobile */
    .container,
    .container-wide {
        padding: 0 24px !important;
    }

    /* Fix text blocks: Improve spacing but honor justification for article/blog content if user prefers */
    .informative-body,
    p,
    li {
        text-align: left;
        /* Default for most pages */
        hyphens: auto;
    }

    /* Keep article content status-quo if it was justified, but ensure it doesn't burst */
    .article-content,
    .blog-content {
        /* User requested to keep justified places intact */
        word-break: break-word;
    }
}

@media (max-width: 480px) {

    .container,
    .container-wide {
        padding: 0 20px !important;
    }

    .article-content,
    .blog-content,
    .informative-body {
        font-size: 1.05rem !important;
        /* Slightly scale down huge fonts if any */
        line-height: 1.7 !important;
    }
}


/* Frontend View Cleanup */
.about-page-section,
.standard-page-section {
    padding: 30px 0;
}

.areas-index-page {
    padding: 80px 0;
    background-color: #fcfcfc;
    min-height: 500px;
}

.home-header-fallback {
    height: 100px;
    background: linear-gradient(90deg, #112d4e 0%, #1a3c63 100%);
    width: 100%;
}

.home-rich-text-spacer {
    margin-bottom: 2rem;
}

.intl-image-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.mobile-logo-inline {
    display: flex;
    align-items: center;
    padding-left: 8px;
}

.mobile-logo-image {
    height: 48px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.nav-link-pointer {
    cursor: pointer;
}

.header-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: rgba(255, 255, 255, 0.95);
}

.footer-col h4 a {
    color: var(--white) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    display: inline-block !important;
    transform: none !important;
}

.footer-col h4 a:hover {
    color: var(--white) !important;
    transform: none !important;
}

.footer-col a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.footer-copy-link {
    color: inherit;
    text-decoration: none;
}

.cookie-inline-link {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

.team-page-head {
    text-align: center;
}

.team-page-desc {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 40px;
    color: var(--text);
}

.team-grid-initial {
    margin-top: 40px;
}

.team-no-results-inline {
    color: var(--text2);
    text-align: center;
    margin-top: 30px;
}

.career-popup-content {
    text-align: center;
}

.career-popup-title {
    margin-top: 10px;
}

.career-popup-text {
    font-size: 1.1rem;
    color: var(--c2);
    margin-bottom: 30px;
}

.cv-upload-file-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cv-upload-file-info[hidden] {
    display: none !important;
}

.cv-upload-area.has-file {
    border-color: #10b981;
    background: #f0fdf4;
}

.cv-upload-area.has-file .cv-upload-text {
    opacity: 0.3;
}

.contact-photo-card {
    display: block;
    height: 320px;
    border: 1px solid var(--g100);
    border-radius: 15px;
    background: none;
}

.contact-photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 14px;
}

.contact-link-reset {
    color: inherit;
    text-decoration: none;
}

.contact-page-map-section {
    background: #fff;
}

.contact-page-map-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.contact-page-map-frame {
    width: 100%;
    height: 500px;
    border: 0;
    border-radius: 15px;
    background: #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: block;
}

.contact-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: #28c76f;
    color: #fff;
    padding: 15px 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-weight: 600;
    z-index: 9999;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
}

.contact-toast.is-error {
    background: #e74c3c;
}

.contact-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.practice-services-block-spacing {
    margin: 3rem 0;
}

.ps-menu-wrap {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.ps-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.ps-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    font-size: 0.84rem;
    font-weight: 450;
    color: #374151;
    line-height: 1.4;
    border-bottom: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
    cursor: default;
    transition: all 0.2s ease;
}

.ps-menu-item:hover {
    background: #f8fafb;
    color: var(--c1);
}

.ps-menu-item:hover .ps-menu-dot {
    background: var(--c1);
    transform: scale(1.3);
}

.ps-menu-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.breadcrumb-section {
    padding: 60px 0 40px !important;
}

.publications-section {
    padding: 60px 0 !important;
}

.page-title {
    margin-bottom: 60px !important;
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

.pub-card {
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0, 0.2, 1);
    opacity: 1;
}

.pub-card.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.pagination .page-item.active .page-link,
.page-item.active .page-link {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 15px rgba(17, 105, 129, 0.25);
}

.pagination .page-link {
    color: var(--c2, #1e293b);
    border: 1px solid #eee;
    padding: 0.75rem 1.25rem;
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 3px;
}

.pagination .page-link:hover {
    background-color: #f8f9fa;
    color: var(--c1, #006064);
    transform: translateY(-2px);
}

.blog-filter-summary {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: #f8f7ff;
    border-left: 4px solid var(--accent, #7367f0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-filter-summary-badge {
    font-size: 0.8rem;
}

.blog-filter-summary-link {
    font-size: 0.85rem;
    color: var(--accent, #7367f0);
    text-decoration: none;
    font-weight: 600;
}

.blog-empty-state {
    margin: 40px 0;
    padding: 60px 40px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.03);
    text-align: center;
    border-bottom: 5px solid var(--accent, #7367f0);
}

.blog-empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.blog-empty-state-text {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--c2);
    max-width: 600px;
    margin: 0 auto;
    font-family: inherit;
}

.blog-pagination-nav {
    display: flex;
    justify-content: center;
    width: 100%;
}

.blog-hero-badge-clean {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
}

.blog-hero-meta-muted {
    color: rgba(255, 255, 255, 0.4);
}

.blog-hero-meta-copy {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.spotify-embed-frame {
    border-radius: 12px;
}

.article-attachments-title {
    font-size: 1.1rem;
    color: #1e293b;
}

.article-attachment-box-clean {
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    border-radius: 12px !important;
    transition: all 0.2s ease;
}

.attachment-icon-box {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #f1f5f9 !important;
}

.attachment-icon-glyph {
    font-size: 1.25rem;
}

.attachment-file-title {
    font-size: 0.9rem;
    color: #334155;
}

.attachment-file-note {
    font-size: 0.7rem;
}

.attachment-download-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50% !important;
}

.attachment-download-icon {
    font-size: 0.8rem;
}

.inline-newsletter-message {
    font-size: 0.85rem;
    font-weight: 600;
}

.inline-newsletter-message[hidden] {
    display: none !important;
}

@media (max-width: 768px) {
    .ps-menu-grid {
        grid-template-columns: 1fr;
    }

    .popup-form {
        flex-direction: column;
    }

    .popup-form input,
    .popup-form button,
    .popup-form .btn {
        width: 100%;
    }

    .blog-filter-summary {
        align-items: flex-start;
    }

    .blog-empty-state {
        padding: 40px 24px;
    }

    .contact-photo-card {
        height: 260px;
    }

    .contact-page-map-frame {
        height: 380px;
    }
}

/* Homepage Hero Slider Typography Tuning (size + smooth responsive) */
#hero {
    align-items: center;
}

#hero .hero-content {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: clamp(52px, 5.5vh, 96px);
}

#hero .hero-content::before {
    top: 0;
    height: 100%;
    min-height: clamp(260px, 34vh, 430px);
}

#hero .hero-brand {
    font-size: clamp(1.02rem, 0.24vw + 0.94rem, 1.26rem);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 5px 14px rgba(0, 0, 0, 0.34);
}

#hero .hero-brand.anim-up,
#hero .hero-brand.anim-up .brand-line-1,
#hero .hero-brand.anim-up .brand-line-2 {
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2), 0 6px 18px rgba(0, 0, 0, 0.35);
}

#hero .hero-brand .brand-line-1 {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.28), 0 5px 14px rgba(0, 0, 0, 0.32);
}

#hero .brand-line-2 {
    font-size: clamp(0.86rem, 0.16vw + 0.82rem, 1.02rem);
}

#hero .hero-tag {
    font-size: clamp(0.8rem, 0.12vw + 0.76rem, 0.92rem);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.32);
}

#hero .hero-title span {
    font-size: clamp(2.02rem, 1.02rem + 1.88vw, 3.05rem) !important;
    line-height: 1.16;
    letter-spacing: 0.012em;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 26px rgba(0, 0, 0, 0.42);
}

#hero .hero-desc {
    font-size: clamp(0.96rem, 0.88rem + 0.28vw, 1.08rem);
    line-height: 1.72;
    font-weight: 500;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.4);
}

#hero .hero-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
}

#hero .hero-nav-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: rgba(10, 35, 50, 0.22);
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

#hero .hero-nav-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.72);
    transform: translateY(-1px);
}

#hero .hero-nav-btn:active {
    transform: translateY(0);
}

@media (max-width: 1024px) {
    #hero {
        align-items: center !important;
        min-height: 100svh;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #hero .container.hero-content {
        width: 100%;
        max-width: 760px !important;
        min-height: 100svh;
        padding: clamp(84px, 10vh, 118px) clamp(22px, 4vw, 32px) clamp(96px, 14vh, 130px) !important;
        margin-top: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #hero .hero-content::before {
        display: none !important;
    }

    #hero .hero-brand,
    #hero .hero-tag,
    #hero .hero-desc {
        text-align: center;
    }

    #hero .hero-tag {
        padding-left: 0 !important;
        justify-content: center;
    }

    #hero .hero-tag::before {
        display: none !important;
    }

    #hero .hero-title {
        max-width: min(92vw, 700px);
    }

    #hero .hero-title span {
        font-size: clamp(1.88rem, 5vw, 2.72rem) !important;
        line-height: 1.15;
    }

    #hero .hero-desc {
        max-width: min(92vw, 700px);
        font-size: clamp(0.98rem, 1.95vw, 1.12rem);
        line-height: 1.6;
    }

    #hero .hero-bottom {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

    #hero .hero-nav {
        gap: 8px;
        margin-left: 10px;
    }

    #hero .hero-nav-btn {
        width: 34px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.55);
        background: rgba(8, 32, 48, 0.42);
        color: rgba(255, 255, 255, 0.97);
        font-size: 1.15rem;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
    }
}

@media (max-width: 600px) {
    #hero .container.hero-content {
        max-width: 100% !important;
        padding: clamp(78px, 9.5vh, 104px) 20px clamp(92px, 13vh, 124px) !important;
    }

    #hero .hero-title span {
        font-size: clamp(1.64rem, 7vw, 2.12rem) !important;
    }

    #hero .hero-desc {
        font-size: clamp(0.92rem, 3.55vw, 1rem);
    }

    #hero .hero-nav {
        gap: 6px;
        margin-left: 8px;
    }

    #hero .hero-nav-btn {
        width: 32px;
        height: 32px;
        font-size: 1.05rem;
    }
}

@media (min-width: 1920px) {
    #hero .hero-content {
        max-width: min(52vw, 980px);
        margin-top: clamp(72px, 6.5vh, 124px);
    }

    #hero .hero-brand {
        font-size: clamp(1.14rem, 0.18vw + 1.06rem, 1.44rem);
    }

    #hero .brand-line-2 {
        font-size: clamp(0.94rem, 0.14vw + 0.88rem, 1.16rem);
    }

    #hero .hero-tag {
        font-size: clamp(0.92rem, 0.14vw + 0.86rem, 1.1rem);
    }

    #hero .hero-title span {
        font-size: clamp(2.68rem, 1.75rem + 1.08vw, 3.9rem) !important;
        line-height: 1.13;
    }

    #hero .hero-desc {
        font-size: clamp(1.1rem, 0.86rem + 0.38vw, 1.34rem);
        max-width: 860px;
    }

    #hero .hero-nav-btn {
        width: 38px;
        height: 38px;
        font-size: 1.24rem;
    }
}

@media (min-width: 2560px) {
    #hero .hero-content {
        max-width: min(50vw, 1180px);
    }

    #hero .hero-title span {
        font-size: clamp(3.14rem, 2.34rem + 0.9vw, 4.36rem) !important;
    }

    #hero .hero-desc {
        font-size: clamp(1.24rem, 0.98rem + 0.34vw, 1.52rem);
        max-width: 980px;
    }
}

/* Large Display Design System (2K / 4K / Ultra-wide) */
@media (min-width: 1536px) {
    html {
        font-size: 16.5px;
    }

    :root {
        --fs-h1: 39px;
        --fs-h2: 30px;
        --fs-h3: 23px;
        --fs-h4: 19px;
        --fs-body: 16px;
        --fs-small: 14px;
        --section-py: 4.9rem;
        --mb-h: 1.24rem;
        --mb-p: 1.05rem;
    }

    .container {
        max-width: min(86vw, 1360px);
        padding-left: 30px;
        padding-right: 30px;
    }

    .container-wide {
        max-width: min(88vw, 1500px);
    }

    .contact-page-map-container {
        max-width: min(86vw, 1360px);
    }

    .header-inner {
        height: 104px;
    }

    .logo img {
        max-height: 100px;
    }

    .nav-list {
        gap: 8px;
    }

    .nav-item>a {
        font-size: clamp(0.98rem, 0.12vw + 0.94rem, 1.08rem);
        padding: 10px 16px;
    }

    .search-btn {
        width: 42px;
        height: 42px;
    }

    .label {
        font-size: 0.74rem;
        letter-spacing: 3.2px;
    }

    .btn {
        padding: 17px 40px;
        font-size: clamp(0.86rem, 0.12vw + 0.82rem, 0.96rem);
    }

    .sec-head {
        margin-bottom: 52px;
    }

    .sec-desc {
        max-width: 720px;
        font-size: clamp(0.96rem, 0.2vw + 0.9rem, 1.08rem);
    }

    .areas,
    .news {
        padding: 68px 0;
    }

    .team {
        padding: 122px 0;
    }

    .footer {
        padding-top: 56px;
    }

    .metro-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }

    .metro-grid-lg {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }

    .metro-tile {
        min-height: 260px;
        padding: 34px;
    }

    .metro-grid-lg .metro-tile {
        min-height: 200px;
        padding: 26px;
    }

    .metro-tile h3,
    .metro-grid-lg .metro-tile h3 {
        font-size: 1.02rem;
    }

    .team-grid {
        gap: 24px;
    }

    .t-info {
        padding: 24px;
    }

    .t-info h4 {
        font-size: 1.02rem;
    }

    .t-info span {
        font-size: 0.8rem;
    }

    .t-btn {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .news .container {
        max-width: min(87vw, 1440px) !important;
    }

    .news-mosaic,
    .magazine-layout {
        gap: 30px;
    }

    .nm-col {
        gap: 30px;
    }

    .nm-featured-center {
        min-height: 620px;
    }

    .nm-featured-content {
        padding: 46px;
    }

    .nm-featured-center h3 {
        font-size: clamp(2.15rem, 0.56vw + 1.92rem, 2.75rem);
    }

    .nm-featured-center p {
        font-size: 1.08rem;
    }

    .nm-card-photo {
        min-height: 280px;
    }

    .nm-overlay {
        padding: 26px;
    }

    .nm-card-photo h4 {
        font-size: 1.2rem;
    }

    .featured-card-bg {
        height: 180px;
    }

    .featured-card-content {
        padding: 15px 19px;
    }

    .featured-card-title {
        font-size: 1.22rem;
    }

    .featured-card-desc {
        font-size: 0.9rem;
    }

    .pub-grid {
        gap: 32px;
    }

    .pub-card-img {
        height: 220px;
    }

    .pub-card-body {
        padding: 19px 22px;
    }

    .pub-card-title,
    .pub-card-body h4 {
        font-size: 0.94rem;
        line-height: 1.45;
    }

    .pub-card-author span {
        font-size: 0.8rem;
    }

    .pub-card-meta {
        font-size: 0.68rem;
    }

    .pub-card-badge,
    .pub-card-date {
        min-width: 100px !important;
        padding: 8px 16px !important;
        font-size: 0.7rem !important;
    }

    .footer-main {
        gap: 42px;
        padding-bottom: 36px;
    }

    .footer-cols {
        gap: 54px;
    }

    .footer-col h4 {
        font-size: 0.82rem;
    }

    .footer-col a {
        font-size: 0.95rem;
        max-width: 340px;
    }

    .footer-bottom {
        font-size: 0.86rem;
        padding: 30px 0;
    }

    .f-social a {
        width: 42px;
        height: 42px;
    }

    .popup-content {
        max-width: 600px;
        padding: 44px;
    }

    .popup-body h3 {
        font-size: 1.9rem;
    }

    .popup-body p {
        font-size: 1.08rem;
    }

    .popup-form input {
        font-size: 1rem;
        padding: 14px 18px;
    }

    .career-layout {
        gap: 64px;
        padding: 88px 0;
    }

    .career-form-box {
        padding: 44px;
    }

    .career-content h2 {
        font-size: 2.2rem;
    }

    .career-content p,
    .c-form label,
    .c-form input,
    .c-form textarea,
    .c-form select {
        font-size: 1rem;
    }

    .contact-photo-card {
        height: 360px;
    }

    .contact-page-map-frame {
        height: 600px;
    }
}

@media (min-width: 1920px) {
    html {
        font-size: 17.25px;
    }

    :root {
        --fs-h1: 44px;
        --fs-h2: 34px;
        --fs-h3: 27px;
        --fs-h4: 22px;
        --fs-body: 17px;
        --fs-small: 15px;
        --section-py: 5.6rem;
    }

    .container {
        max-width: min(84vw, 1480px);
        padding-left: 36px;
        padding-right: 36px;
    }

    .container-wide {
        max-width: min(86vw, 1640px);
    }

    .header-inner {
        height: 110px;
    }

    .logo img {
        max-height: 104px;
    }

    .nav-item>a {
        font-size: clamp(1.04rem, 0.16vw + 0.98rem, 1.16rem);
        padding: 11px 18px;
    }

    .btn {
        padding: 19px 44px;
    }

    .metro-grid {
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        gap: 28px;
    }

    .metro-tile {
        min-height: 286px;
        padding: 40px;
    }

    .team-grid {
        gap: 28px;
    }

    .news .container {
        max-width: min(85vw, 1560px) !important;
    }

    .news-mosaic,
    .magazine-layout {
        gap: 34px;
    }

    .nm-featured-center {
        min-height: 670px;
    }

    .nm-featured-content {
        padding: 52px;
    }

    .nm-featured-center h3 {
        font-size: clamp(2.45rem, 0.66vw + 2.1rem, 3rem);
    }

    .nm-card-photo {
        min-height: 320px;
    }

    .featured-card-bg {
        height: 210px;
    }

    .featured-card-title {
        font-size: 1.34rem;
    }

    .pub-grid {
        gap: 36px;
    }

    .pub-card-img {
        height: 240px;
    }

    .pub-card-body {
        padding: 21px 25px;
    }

    .pub-card-title,
    .pub-card-body h4 {
        font-size: 1rem;
    }

    .pub-card-author span {
        font-size: 0.86rem;
    }

    .footer-col a {
        font-size: 0.98rem;
    }

    .contact-page-map-frame {
        height: 660px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 18.25px;
    }

    :root {
        --fs-h1: 52px;
        --fs-h2: 40px;
        --fs-h3: 31px;
        --fs-h4: 26px;
        --fs-body: 18px;
        --fs-small: 15px;
        --section-py: 6.2rem;
        --mb-h: 1.45rem;
        --mb-p: 1.18rem;
    }

    .container {
        max-width: min(80vw, 1620px);
        padding-left: 44px;
        padding-right: 44px;
    }

    .container-wide {
        max-width: min(82vw, 1780px);
    }

    .header-inner {
        height: 118px;
    }

    .logo img {
        max-height: 114px;
    }

    .nav-item>a {
        font-size: clamp(1.08rem, 0.16vw + 1.02rem, 1.22rem);
        padding: 12px 18px;
    }

    .btn {
        padding: 20px 46px;
        font-size: 1rem;
    }

    .metro-grid {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 30px;
    }

    .metro-tile {
        min-height: 308px;
        padding: 44px;
    }

    .news .container {
        max-width: min(81vw, 1680px) !important;
    }

    .news-mosaic,
    .magazine-layout {
        gap: 38px;
    }

    .nm-featured-center {
        min-height: 720px;
    }

    .nm-featured-content {
        padding: 56px;
    }

    .nm-featured-center h3 {
        font-size: clamp(2.75rem, 0.74vw + 2.4rem, 3.45rem);
    }

    .nm-card-photo {
        min-height: 350px;
    }

    .pub-card-img {
        height: 262px;
    }

    .pub-card-body {
        padding: 23px 28px;
    }

    .pub-card-title,
    .pub-card-body h4 {
        font-size: 1.08rem;
        line-height: 1.48;
    }

    .pub-card-author span {
        font-size: 0.92rem;
    }

    .pub-card-badge,
    .pub-card-date {
        min-width: 112px !important;
        padding: 9px 16px !important;
        font-size: 0.76rem !important;
    }

    .footer-col h4 {
        font-size: 0.88rem;
    }

    .footer-col a {
        font-size: 1.02rem;
    }

    .popup-content {
        max-width: 680px;
        padding: 54px;
    }

    .contact-page-map-frame {
        height: 740px;
    }

    #hero .hero-title span {
        font-size: clamp(3.3rem, 2.46rem + 0.9vw, 4.4rem) !important;
    }

    #hero .hero-desc {
        font-size: clamp(1.24rem, 1.02rem + 0.3vw, 1.52rem);
        max-width: 940px;
    }
}

/* Header Logo Top Breathing Space (Desktop+) */
@media (min-width: 1025px) {
    .header .logo {
        padding-top: clamp(12px, 1.1vh, 22px);
        padding-bottom: 0;
    }
}

/* Header Logo Containment Fix (Desktop / Sticky) */
@media (min-width: 1025px) {
    :root {
        --header-desktop-height: 120px;
        --header-desktop-logo-max-width: 158px;
        --header-desktop-logo-max-height: 86px;
        --header-sticky-logo-max-height: 78px;
    }

    .header {
        overflow: clip;
    }

    .header-inner {
        height: var(--header-desktop-height);
        min-height: var(--header-desktop-height);
        overflow: hidden;
    }

    .header .logo {
        height: 100%;
        max-width: var(--header-desktop-logo-max-width);
        flex: 0 0 auto;
        align-self: stretch;
        display: flex;
        align-items: center;
        padding: 8px 0 !important;
        overflow: hidden;
    }

    .header .logo img {
        width: auto;
        max-width: 100%;
        max-height: var(--header-desktop-logo-max-height);
        object-fit: contain;
        object-position: left center;
    }

    .header.solid .logo img {
        max-height: var(--header-sticky-logo-max-height);
    }
}

@media (min-width: 1536px) {
    :root {
        --header-desktop-height: 104px;
        --header-desktop-logo-max-width: 150px;
        --header-desktop-logo-max-height: 76px;
        --header-sticky-logo-max-height: 70px;
    }
}

@media (min-width: 1920px) {
    :root {
        --header-desktop-height: 110px;
        --header-desktop-logo-max-width: 156px;
        --header-desktop-logo-max-height: 82px;
        --header-sticky-logo-max-height: 74px;
    }
}

@media (min-width: 2560px) {
    :root {
        --header-desktop-height: 118px;
        --header-desktop-logo-max-width: 164px;
        --header-desktop-logo-max-height: 88px;
        --header-sticky-logo-max-height: 80px;
    }
}

/* Publications Photo Box Cards
   Reuses the homepage visual language without changing the list/detail layout. */
.pub-grid-photo-box .pub-card {
    position: relative;
    display: block;
    min-height: clamp(210px, 16vw, 270px);
    height: auto;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background: #06131a;
    color: var(--white);
    box-shadow: 0 16px 36px rgba(7, 27, 45, 0.12);
}

.pub-grid-photo-box .pub-card:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: 0 22px 46px rgba(7, 27, 45, 0.18);
}

.pub-grid-photo-box .pub-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at top right,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.03) 24%,
            rgba(255, 255, 255, 0) 52%),
        linear-gradient(135deg,
            rgba(6, 29, 18, 0.2) 0%,
            rgba(6, 29, 18, 0.06) 38%,
            rgba(5, 18, 28, 0.18) 100%);
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.pub-grid-photo-box .pub-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(5, 16, 22, 0.7) 0%,
            rgba(5, 16, 22, 0.42) 30%,
            rgba(5, 16, 22, 0.46) 62%,
            rgba(5, 16, 22, 0.7) 100%);
    transition: opacity 0.35s ease, background 0.35s ease;
}

.pub-grid-photo-box .pub-card:hover::after {
    background:
        linear-gradient(180deg,
            rgba(5, 16, 22, 0.64) 0%,
            rgba(5, 16, 22, 0.38) 28%,
            rgba(5, 16, 22, 0.42) 62%,
            rgba(5, 16, 22, 0.66) 100%);
}

.pub-grid-photo-box .pub-card:hover::before {
    opacity: 0.88;
}

.pub-grid-photo-box .pub-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.pub-grid-photo-box .pub-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.pub-grid-photo-box .pub-card:hover .pub-card-img img {
    transform: scale(1.05);
}

.pub-grid-photo-box .pub-card-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: clamp(58px, 3.8vw, 72px) clamp(18px, 1.25vw, 24px) clamp(18px, 1.2vw, 24px);
    background: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.pub-grid-photo-box .pub-card-title,
.pub-grid-photo-box .pub-card-body h4 {
    margin: 0;
    color: var(--white);
    font-family: var(--font-head);
    font-size: clamp(1.05rem, 0.92rem + 0.38vw, 1.28rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0;
    max-width: 100%;
    text-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.pub-grid-photo-box .pub-card:hover .pub-card-title,
.pub-grid-photo-box .pub-card:hover .pub-card-body h4 {
    color: var(--white) !important;
}

.pub-grid-photo-box .pub-card-badge,
.pub-grid-photo-box .pub-card-date {
    z-index: 2;
    top: clamp(18px, 1.25vw, 24px) !important;
    min-width: 118px !important;
    padding: 9px 16px !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pub-grid-photo-box .pub-card-badge {
    top: clamp(18px, 1.25vw, 24px) !important;
    left: clamp(18px, 1.25vw, 24px) !important;
    justify-content: flex-start !important;
    background: rgba(49, 84, 47, 0.84) !important;
    color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(117, 150, 108, 0.28) !important;
    box-shadow: none !important;
}

.pub-grid-photo-box .pub-card-date {
    top: clamp(18px, 1.25vw, 24px) !important;
    right: clamp(18px, 1.25vw, 24px) !important;
    bottom: auto !important;
    left: auto !important;
    min-width: 132px !important;
    background: rgba(121, 128, 126, 0.38) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.96) !important;
    box-shadow: none !important;
}

.pub-grid-photo-box .pub-card-badge.pub-badge-article {
    background: rgba(49, 84, 47, 0.84) !important;
    border-color: rgba(117, 150, 108, 0.28) !important;
}

.pub-grid-photo-box .pub-card-badge.pub-badge-news,
.pub-grid-photo-box .pub-card-badge.pub-badge-podcast {
    background: rgba(49, 84, 47, 0.84) !important;
    border-color: rgba(117, 150, 108, 0.28) !important;
    box-shadow: none !important;
}

.pub-grid-photo-box .pub-card-author,
.pub-grid-photo-box .pub-card-meta,
.pub-grid-photo-box .pub-card-cat,
.pub-grid-photo-box .pub-card-arrow {
    display: none !important;
}

@media (max-width: 1199px) {
    .pub-grid-photo-box .pub-card {
        min-height: 220px;
        aspect-ratio: 16 / 9.3;
    }
}

@media (max-width: 991px) {
    .pub-grid-photo-box .pub-card {
        min-height: 210px;
        aspect-ratio: 16 / 9.6;
    }

    .pub-grid-photo-box .pub-card-body {
        padding: 54px 16px 16px;
    }

    .pub-grid-photo-box .pub-card-title,
    .pub-grid-photo-box .pub-card-body h4 {
        font-size: 1rem;
    }
}

@media (max-width: 767px) {
    .pub-grid-photo-box .pub-card {
        min-height: 190px;
        aspect-ratio: 16 / 10.2;
    }

    .pub-grid-photo-box .pub-card-body {
        padding: 50px 14px 14px;
    }

    .pub-grid-photo-box .pub-card-title,
    .pub-grid-photo-box .pub-card-body h4 {
        font-size: 0.92rem;
        line-height: 1.22;
    }

    .pub-grid-photo-box .pub-card-badge,
    .pub-grid-photo-box .pub-card-date {
        top: 16px !important;
        min-width: 100px !important;
        padding: 7px 12px !important;
        font-size: 0.68rem !important;
    }

    .pub-grid-photo-box .pub-card-badge {
        left: 16px !important;
    }

    .pub-grid-photo-box .pub-card-date {
        right: 16px !important;
        min-width: 118px !important;
    }
}

@media (max-width: 480px) {
    .pub-grid-photo-box .pub-card {
        min-height: 176px;
        aspect-ratio: 16 / 10.8;
    }

    .pub-grid-photo-box .pub-card-title,
    .pub-grid-photo-box .pub-card-body h4 {
        font-size: 0.86rem;
    }
}

/* Publications page: tighten card paddings */
.publications-section #pubGrid.magazine-layout>.pub-card .pub-card-body {
    padding: 14px !important;
}

.publications-section #pubGrid.magazine-layout>.pub-card .pub-card-badge,
.publications-section #pubGrid.magazine-layout>.pub-card .pub-card-date {
    padding: 6px 12px !important;
    top: 16px !important;
}

.publications-section #pubGrid.magazine-layout>.pub-card .pub-card-badge {
    left: 16px !important;
}

.publications-section #pubGrid.magazine-layout>.pub-card .pub-card-date {
    right: 16px !important;
}

@media (max-width: 768px) {
    .publications-section #pubGrid.magazine-layout>.pub-card .pub-card-body {
        padding: 16px !important;
    }

    .publications-section #pubGrid.magazine-layout>.pub-card .pub-card-badge,
    .publications-section #pubGrid.magazine-layout>.pub-card .pub-card-date {
        padding: 5px 10px !important;
        top: 12px !important;
    }

    .publications-section #pubGrid.magazine-layout>.pub-card .pub-card-badge {
        left: 12px !important;
    }

    .publications-section #pubGrid.magazine-layout>.pub-card .pub-card-date {
        right: 12px !important;
    }
}

/* Publication Cards: stacked author avatars with tooltip */
.pub-card .pub-card-authors-stack,
.featured-card .pub-card-authors-stack {
    display: flex;
    align-items: center;
    margin-top: 0;
    width: fit-content;
    padding-top: 9px;
    min-height: 30px;
    opacity: 0.92;
}

.pub-card .pub-card-author-avatar,
.featured-card .pub-card-author-avatar {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-left: -8px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: none;
    transition: margin-left 0.2s ease, transform 0.18s ease, border-color 0.18s ease;
}

.pub-card .pub-card-author-avatar:first-child,
.featured-card .pub-card-author-avatar:first-child {
    margin-left: 0;
}

.pub-card .pub-card-author-avatar img,
.featured-card .pub-card-author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    filter: saturate(0.88);
}

.pub-card .pub-card-authors-stack:hover .pub-card-author-avatar,
.featured-card .pub-card-authors-stack:hover .pub-card-author-avatar {
    margin-left: -2px;
}

.pub-card .pub-card-authors-stack:hover .pub-card-author-avatar:first-child,
.featured-card .pub-card-authors-stack:hover .pub-card-author-avatar:first-child {
    margin-left: 0;
}

.pub-card .pub-card-author-avatar:hover,
.featured-card .pub-card-author-avatar:hover {
    transform: translateY(-1px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
    z-index: 220 !important;
}

.pub-card .pub-card-author-tooltip,
.featured-card .pub-card-author-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translate(-50%, 4px);
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 5px 8px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(2, 6, 23, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.pub-card .pub-card-author-tooltip::after,
.featured-card .pub-card-author-tooltip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: rgba(15, 23, 42, 0.9) transparent transparent transparent;
}

.pub-card .pub-card-author-avatar:hover .pub-card-author-tooltip,
.featured-card .pub-card-author-avatar:hover .pub-card-author-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.pub-card .pub-card-body .pub-card-authors-stack,
.featured-card .pub-card-body .pub-card-authors-stack {
    order: 1;
    margin-bottom: 8px;
    padding-top: 0;
}

.pub-card .pub-card-body .pub-card-title {
    order: 2;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.featured-card .pub-card-body .featured-card-title {
    order: 2;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Keep home, publications and detail card title size identical */
.news .magazine-layout .pub-card .pub-card-title,
.publications-section #pubGrid.magazine-layout>.pub-card .pub-card-title,
.blog-related-section .magazine-layout>.pub-card .pub-card-title {
    font-size: 17px !important;
    line-height: 1.38 !important;
}

@media (max-width: 768px) {

    .pub-card .pub-card-authors-stack,
    .featured-card .pub-card-authors-stack {
        padding-top: 8px;
        min-height: 27px;
    }

    .pub-card .pub-card-author-avatar,
    .featured-card .pub-card-author-avatar {
        width: 22px;
        height: 22px;
        margin-left: -7px;
    }

    .pub-card .pub-card-author-tooltip,
    .featured-card .pub-card-author-tooltip {
        font-size: 0.6rem;
        padding: 4px 7px;
    }

    .news .magazine-layout .pub-card .pub-card-title,
    .publications-section #pubGrid.magazine-layout>.pub-card .pub-card-title,
    .blog-related-section .magazine-layout>.pub-card .pub-card-title {
        font-size: 15px !important;
        line-height: 1.34 !important;
    }
}

/* ==========================================
   Blog Detail Mobile Polish
   Mondaq • Newsletter • Authors • Spacing
   ========================================== */
.blog-authors-section {
    margin-bottom: 12px;
}

@media (max-width: 768px) {
    .blog-detail-sidebar .mondaq-presentation-card {
        padding: 13px 14px;
        gap: 10px;
        border-radius: 12px;
        margin-top: 1.2rem !important;
        margin-bottom: 0 !important;
    }

    .blog-detail-sidebar .mondaq-card-header {
        gap: 10px;
    }

    .blog-detail-sidebar .mondaq-logo-img {
        height: 28px;
    }

    .blog-detail-sidebar .mondaq-badge {
        font-size: 0.56rem;
        letter-spacing: 0.7px;
        padding: 3px 8px;
        border-radius: 6px;
    }

    .blog-detail-sidebar .mondaq-card-body {
        gap: 12px;
        align-items: flex-start;
    }

    .blog-detail-sidebar .mondaq-icon-wrap {
        width: 34px;
        height: 34px;
        margin-top: 2px;
        border-radius: 7px;
    }

    .blog-detail-sidebar .mondaq-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .blog-detail-sidebar .mondaq-desc {
        font-size: 0.86rem;
        line-height: 1.5;
    }

    .blog-detail-sidebar .mondaq-btn {
        width: 100%;
        min-height: 42px;
        padding: 10px 14px;
        font-size: 0.88rem;
        border-radius: 8px;
    }

    .blog-detail-sidebar .article-newsletter-box {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        padding: 16px 14px;
        gap: 12px;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .blog-detail-sidebar .article-newsletter-box .nl-icon {
        position: absolute;
        top: 16px;
        left: 14px;
        width: 34px;
        height: 34px;
        font-size: 1rem;
        margin-top: 0;
    }

    .blog-detail-sidebar .article-newsletter-box .nl-icon svg {
        width: 17px;
        height: 17px;
    }

    .blog-detail-sidebar .article-newsletter-box .nl-content {
        width: 100%;
        min-width: 0;
    }

    .blog-detail-sidebar .article-newsletter-box h4 {
        font-size: 1.08rem;
        margin-bottom: 8px;
        min-height: 34px;
        display: flex;
        align-items: center;
        padding-left: 44px;
    }

    .blog-detail-sidebar .article-newsletter-box p {
        margin-bottom: 12px;
        font-size: 0.9rem;
        line-height: 1.55;
        text-align: left;
        hyphens: none;
    }

    .blog-detail-sidebar .article-newsletter-box .nl-form {
        gap: 9px;
    }

    .blog-detail-sidebar .article-newsletter-box input[type="email"] {
        padding: 11px 14px;
        font-size: 0.9rem;
        border-radius: 8px;
    }

    .blog-detail-sidebar .article-newsletter-box button {
        min-height: 42px;
        padding: 11px 14px;
        border-radius: 8px;
        font-size: 0.92rem;
    }

    .blog-authors-section.mt-5 {
        margin-top: 1.25rem !important;
        margin-bottom: 0 !important;
    }

    .author-modern-card {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        gap: 10px;
        padding: 12px;
        margin-bottom: 10px;
        border-left-width: 3px;
        border-radius: 12px;
    }

    .amc-left {
        flex: 1;
        min-width: 0;
        gap: 10px;
    }

    .amc-avatar {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .amc-name {
        font-size: 1rem;
        line-height: 1.24;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .amc-title {
        font-size: 0.74rem;
    }

    .amc-right {
        width: auto !important;
        padding-top: 0 !important;
        border-top: none !important;
        gap: 6px;
    }

    .amc-socials {
        gap: 5px;
    }

    .amc-icon-btn,
    .amc-profile-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .amc-icon-btn svg,
    .amc-profile-btn svg {
        width: 14px;
        height: 14px;
    }

    .blog-detail-sidebar .blog-related-section {
        margin-top: 0.85rem !important;
        padding: 0 !important;
    }
}

@media (max-width: 420px) {
    .mondaq-card-header {
        flex-wrap: wrap;
    }

    .mondaq-badge {
        margin-left: auto;
    }

    .amc-name {
        font-size: 0.95rem;
    }
}

/* ==========================================
   Blog Detail Sidebar Card System (Final)
   ========================================== */
.blog-detail-sidebar {
    --sidebar-card-radius: 14px;
    --sidebar-card-pad-x: 16px;
    --sidebar-card-pad-y: 16px;
    gap: 12px;
}

.blog-detail-sidebar .mondaq-presentation-card {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: var(--sidebar-card-radius);
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.blog-detail-sidebar .mondaq-presentation-card {
    padding: var(--sidebar-card-pad-y) var(--sidebar-card-pad-x);
    gap: 12px;
}

.blog-detail-sidebar .mondaq-card-header {
    gap: 10px;
    align-items: center;
}

.blog-detail-sidebar .mondaq-logo-img {
    height: 30px;
}

.blog-detail-sidebar .mondaq-badge {
    font-size: 0.58rem;
    letter-spacing: 0.72px;
    padding: 4px 8px;
}

.blog-detail-sidebar .mondaq-card-body {
    display: block;
    gap: 0;
}

.blog-detail-sidebar .mondaq-title {
    font-size: 1.02rem;
    line-height: 1.3;
    margin-bottom: 4px;
}

.blog-detail-sidebar .mondaq-desc,
.blog-detail-sidebar p {
    text-align: left !important;
    text-justify: auto !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    hyphens: none !important;
    word-break: normal !important;
}

.blog-detail-sidebar .mondaq-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.blog-detail-sidebar .mondaq-btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
}

.blog-detail-sidebar .blog-sidebar-authors {
    margin: 0 !important;
    padding: 2px 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-detail-sidebar section {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.blog-detail-sidebar .blog-sidebar-heading {
    margin: 2px 2px 2px;
    font-size: 1.02rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--c1);
    font-family: var(--font-head);
}

.blog-detail-sidebar .blog-related-heading {
    margin-bottom: 12px;
}

.blog-detail-sidebar .blog-sidebar-authors .author-modern-card {
    position: relative;
    cursor: pointer;
    margin: 0 !important;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #dbe3ee;
    border-left: 0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    background: #fff;
}

.blog-detail-sidebar .blog-sidebar-authors .author-modern-card .amc-card-link {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    z-index: 1;
}

.blog-detail-sidebar .blog-sidebar-authors .author-modern-card .amc-card-link:focus-visible {
    outline: 2px solid rgba(0, 128, 145, 0.55);
    outline-offset: 2px;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-left {
    position: relative;
    z-index: 2;
    gap: 10px;
    pointer-events: none;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-name {
    font-size: 0.95rem;
    line-height: 1.24;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-title {
    font-size: 0.72rem;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-socials {
    display: flex;
    gap: 4px;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-right {
    position: relative;
    z-index: 3;
    gap: 6px;
    align-items: center;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-profile-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-icon-btn,
.blog-detail-sidebar .blog-sidebar-authors .amc-profile-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
}

.blog-detail-sidebar .blog-sidebar-authors .amc-icon-btn svg,
.blog-detail-sidebar .blog-sidebar-authors .amc-profile-btn svg {
    width: 13px;
    height: 13px;
}

.blog-detail-sidebar .blog-related-section {
    margin: 0 !important;
    padding: 2px 0 !important;
}

.blog-detail-sidebar .blog-related-section .magazine-layout {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 12px;
}

.blog-detail-sidebar .blog-related-section .pub-card {
    min-height: 210px;
    display: flex !important;
    flex-direction: column;
    border-radius: 12px !important;
    border: 1px solid #dbe3ee;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.blog-detail-sidebar .blog-related-section .pub-card:hover {
    transform: translateY(-2px);
}

.blog-detail-sidebar .blog-related-section .pub-card .pub-card-img {
    height: 148px;
    min-height: 148px;
    border-radius: 0;
}

.blog-detail-sidebar .blog-related-section .pub-card .pub-card-body {
    padding: 14px !important;
}

.blog-detail-sidebar .blog-related-section .pub-card .pub-card-title {
    margin: 0 !important;
    font-size: 0.96rem !important;
    line-height: 1.36 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

.blog-detail-newsletter-end {
    grid-column: 1;
    margin-top: 10px;
    min-width: 0;
}

.blog-detail-newsletter-end .article-newsletter-box {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    border: 1px solid #dbe3ee;
}

.blog-detail-newsletter-end .article-newsletter-box .nl-content {
    width: 100%;
    min-width: 0;
}

.blog-detail-newsletter-end .article-newsletter-box p {
    margin-bottom: 12px;
    text-align: left !important;
    text-justify: auto !important;
    hyphens: none !important;
    word-break: normal !important;
}

.blog-detail-newsletter-end .article-newsletter-box .nl-form {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
}

.blog-detail-newsletter-end .article-newsletter-box input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
}

.blog-detail-newsletter-end .article-newsletter-box button {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    box-sizing: border-box;
}

@media (max-width: 1399px) {
    .blog-detail-shell {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
        gap: 24px;
    }
}

@media (max-width: 1199px) {
    .blog-detail-shell {
        display: block;
    }

    .blog-detail-sidebar {
        position: static;
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .blog-detail-sidebar .blog-related-section .magazine-layout {
        gap: 12px;
    }

    .blog-detail-newsletter-end {
        margin-top: 1rem;
    }
}

@media (max-width: 991px) {
    .blog-detail-layout {
        padding-left: 2px;
        padding-right: 2px;
    }

    .blog-detail-shell {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .blog-detail-sidebar {
        margin-top: 0;
    }

    .blog-detail-newsletter-end {
        margin-top: 0;
    }

    .blog-detail-sidebar>.blog-detail-newsletter-end {
        margin-top: 0 !important;
    }

    .blog-detail-newsletter-end .article-newsletter-box .nl-form {
        flex-direction: column;
    }

    .blog-detail-newsletter-end .article-newsletter-box button {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .blog-detail-sidebar {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 0.85rem;
    }

    .blog-detail-sidebar .blog-related-section .magazine-layout {
        grid-template-columns: 1fr;
    }

    .blog-detail-newsletter-end .article-newsletter-box {
        position: relative;
        padding: 15px 14px;
    }

    .blog-detail-newsletter-end .article-newsletter-box .nl-icon {
        position: absolute;
        top: 14px;
        left: 14px;
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }

    .blog-detail-newsletter-end .article-newsletter-box h4 {
        padding-left: 42px;
        min-height: 32px;
        font-size: 1.02rem;
    }

    .blog-detail-newsletter-end .article-newsletter-box p {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .blog-detail-sidebar .blog-sidebar-authors .author-modern-card {
        padding: 9px 10px;
    }

    .blog-detail-sidebar .blog-sidebar-authors .amc-name {
        font-size: 0.9rem;
    }

    .blog-detail-sidebar .blog-related-section .pub-card {
        min-height: 192px;
    }

    .blog-detail-sidebar .blog-related-section .pub-card .pub-card-img {
        height: 130px;
        min-height: 130px;
    }
}

/* ==========================================
   Home Hero CTA Buttons (Refined)
   ========================================== */
#hero .hero-actions {
    gap: 14px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#hero .hero-actions .btn {
    min-width: 0;
    width: fit-content;
    inline-size: max-content;
    max-width: 100%;
    flex: 0 0 auto;
    height: 50px;
    padding: 0 20px;
    border-radius: 14px;
    border: 1.5px solid rgba(226, 244, 255, 0.66);
    font-size: clamp(0.82rem, 0.2vw + 0.78rem, 0.94rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    box-shadow: 0 8px 22px rgba(2, 12, 28, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, border-color 0.22s ease;
    background: transparent !important;
    color: #f6fcff;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

#hero .hero-actions .btn::before {
    display: none;
}

#hero .hero-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(3, 14, 34, 0.3);
    border-color: rgba(244, 252, 255, 0.9);
    background: rgba(255, 255, 255, 0.06) !important;
}

#hero .hero-actions .btn:hover::after {
    transform: translateX(2px);
}

#hero .hero-actions .btn:active {
    transform: translateY(0);
}

#hero .hero-actions .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(146, 223, 244, 0.3), 0 8px 20px rgba(2, 12, 28, 0.26);
}

#hero .hero-actions .btn-accent {
    background: transparent !important;
    border-color: rgba(226, 244, 255, 0.66);
    color: #f6fcff;
}

#hero .hero-actions .btn-accent:hover {
    border-color: rgba(244, 252, 255, 0.9);
}

#hero .hero-actions .btn-glass {
    background: transparent !important;
    border-color: rgba(226, 244, 255, 0.5);
    color: #f6fcff;
}

#hero .hero-actions .btn-glass:hover {
    border-color: rgba(243, 251, 255, 0.75);
}

@media (max-width: 991px) {
    #hero .hero-actions .btn {
        min-width: 0 !important;
        width: fit-content !important;
        inline-size: max-content !important;
        flex: 0 0 auto !important;
        height: 44px;
        border-radius: 12px;
        font-size: 0.78rem;
        letter-spacing: 0.03em;
        padding: 0 16px !important;
    }

    #hero .hero-actions .btn::after {
        margin-left: 6px;
        font-size: 0.76em;
    }
}

/* ==========================================
   Cookie Consent System
   ========================================== */
html.cookie-preferences-open,
body.cookie-preferences-open {
    overflow: hidden !important;
}

.footer-legal-action {
    padding: 0;
    color: rgba(255, 255, 255, .4);
    font: inherit;
    line-height: inherit;
    transition: color var(--T);
}

.footer-legal-action:hover,
.footer-legal-action:focus-visible {
    color: var(--c4);
}

.cookie-consent {
    position: relative;
    z-index: 10020;
}

.cookie-consent__banner {
    position: fixed;
    left: 50%;
    bottom: 24px;
    width: min(1080px, calc(100% - 32px));
    display: block;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    padding: 28px 30px;
    border: 1px solid rgba(146, 223, 244, 0.22);
    border-radius: 22px;
    background: rgba(8, 24, 36, 0.94);
    box-shadow: 0 24px 60px rgba(2, 12, 28, 0.28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translate(-50%, 20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.cookie-consent__banner.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

.cookie-consent__content,
.cookie-consent__description,
.cookie-preference-card__content {
    min-width: 0;
}

.cookie-consent__eyebrow,
.cookie-preferences__eyebrow {
    margin: 0 0 8px;
    color: rgba(226, 244, 255, 0.7);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cookie-consent__title,
.cookie-preferences__heading h2 {
    margin: 0 0 8px;
    color: var(--white);
    font-size: clamp(1.3rem, 1.2rem + 0.4vw, 1.65rem);
    line-height: 1.25;
}

.cookie-consent__description {
    display: grid;
    gap: 10px;
}

.cookie-consent__description p,
.cookie-preferences__intro,
.cookie-preference-card__content p {
    margin: 0;
    color: rgba(248, 250, 252, 0.84);
    text-align: left;
    text-justify: auto;
    word-break: normal;
    hyphens: none;
}

.cookie-consent__link,
.cookie-preferences__policy-link {
    color: var(--c4);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 14px;
}

.cookie-consent__button,
.cookie-preferences__save {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cookie-consent__button:hover,
.cookie-preferences__save:hover {
    transform: translateY(-1px);
}

.cookie-consent__button:focus-visible,
.cookie-preferences__save:focus-visible,
.cookie-preferences__close:focus-visible,
.cookie-switch__input:focus-visible+.cookie-switch__track,
.footer-legal-action:focus-visible,
.cookie-preferences__policy-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(146, 223, 244, 0.26);
}

.cookie-consent__button--primary {
    background: var(--white);
    color: var(--c2);
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.12);
}

.cookie-consent__button--primary:hover {
    background: #f5fbff;
}

.cookie-consent__button--secondary,
.cookie-consent__button--ghost {
    border: 1px solid rgba(226, 244, 255, 0.3);
    color: var(--white);
    background: transparent;
}

.cookie-consent__button--secondary:hover,
.cookie-consent__button--ghost:hover {
    border-color: rgba(226, 244, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
}

.cookie-consent__overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 12, 28, 0.48);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    z-index: 10030;
}

.cookie-consent__overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.cookie-preferences {
    width: min(880px, 100%);
    max-height: min(88vh, 760px);
    overflow: auto;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 28px 70px rgba(2, 12, 28, 0.24);
    transform: translateY(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.cookie-preferences.is-visible {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cookie-preferences__header,
.cookie-preference-card__header,
.cookie-preference-card__body,
.cookie-preferences__actions,
.cookie-switch {
    display: flex;
}

.cookie-preferences__header,
.cookie-preferences__actions {
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.cookie-preferences__header {
    margin-bottom: 14px;
}

.cookie-preferences__heading h2 {
    color: var(--c2);
}

.cookie-preferences__eyebrow {
    color: var(--c1);
    margin-bottom: 8px;
}

.cookie-preferences__close {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--c2);
  background: rgba(15, 23, 42, 0.05);
  font-size: 1.65rem;
  line-height: 1;
  position: absolute;
  top: 25px;
  right: 25px;
}

.cookie-preferences__intro {
    color: var(--text2);
    margin-bottom: 22px;
}

.cookie-preferences__list {
    display: grid;
    gap: 14px;
}

.cookie-preference-card {
    padding: 18px 20px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, #ffffff 100%);
}

.cookie-preference-card--required {
    border-color: rgba(0, 96, 100, 0.18);
    background: linear-gradient(180deg, rgba(146, 223, 244, 0.12) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.cookie-preference-card__body {
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.cookie-preference-card__header {
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.cookie-preference-card__header h3 {
    margin: 0;
    color: var(--c2);
    font-size: 1.04rem;
    line-height: 1.3;
}

.cookie-preference-card__badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(0, 96, 100, 0.1);
    color: var(--c1);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cookie-preference-card__content p {
    color: var(--text2);
    line-height: 1.72;
}

.cookie-switch {
    flex-shrink: 0;
    align-items: center;
    gap: 14px;
    min-width: 230px;
    justify-content: flex-end;
}

.cookie-switch__label {
    color: var(--c2);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
}

.cookie-switch__control {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.cookie-switch__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cookie-switch__track {
    position: relative;
    width: 58px;
    height: 34px;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.cookie-switch__track::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
    transition: transform 0.2s ease;
}

.cookie-switch__input:checked+.cookie-switch__track {
    background: linear-gradient(135deg, var(--c1) 0%, var(--c3) 100%);
}

.cookie-switch__input:checked+.cookie-switch__track::after {
    transform: translateX(24px);
}

.cookie-switch--disabled {
    opacity: 1;
}

.cookie-switch--disabled .cookie-switch__track {
    background: linear-gradient(135deg, var(--c1) 0%, var(--c3) 100%);
}

.cookie-switch--disabled .cookie-switch__track::after {
    transform: translateX(24px);
}

.cookie-preferences__actions {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.cookie-preferences__policy-link {
    color: var(--c1);
    font-weight: 600;
}

.cookie-preferences__save {
    min-width: 220px;
}

@media (max-width: 991px) {
    .cookie-consent__banner {
        grid-template-columns: 1fr;
        padding: 24px;
    }

    .cookie-consent__actions {
        justify-content: flex-start;
    }

    .cookie-preference-card__body {
        flex-direction: column;
    }

    .cookie-switch {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .cookie-consent__banner {
        width: calc(100% - 24px);
        bottom: 12px;
        padding: 20px 18px;
        gap: 20px;
        border-radius: 18px;
    }

    .cookie-consent__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent__button,
    .cookie-preferences__save {
        width: 100%;
    }

    .cookie-preferences {
        padding: 20px 18px;
        border-radius: 18px;
        max-height: calc(100vh - 32px);
    }

    .cookie-preferences__header,
    .cookie-preferences__actions {
      flex-direction: column;
      align-items: stretch;
      text-align: center;
    }

    .cookie-preferences__close {
        align-self: flex-end;
    }

    .cookie-preference-card {
        padding: 16px;
    }

    .cookie-switch {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .cookie-consent__title,
    .cookie-preferences__heading h2 {
        font-size: 1.18rem;
    }

    .cookie-consent__description p,
    .cookie-preferences__intro,
    .cookie-preference-card__content p,
    .cookie-switch__label {
        font-size: 0.88rem;
    }
}