/*
Theme Name:  Tadhafur Law
Theme URI:   https://tadhafur.com
Author:      Tadhafur Team
Author URI:  https://tadhafur.com
Description: A clean, RTL-ready custom WordPress theme for Tadhafur Law business.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tadhafur
Tags:        law, rtl-language, custom-logo, custom-menu, featured-images, threaded-comments
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */
:root {
    /* Brand Colors */
    --color-primary:      #b49058;
    --color-primary-dark: #9a7a47;
    --color-secondary:    #0c393f;
    --color-secondary-dark: #082a2e;
    --color-white:        #ffffff;
    --color-black:        #111111;
    --color-text:         #1a1a1a;
    --color-text-muted:   #666666;
    --color-border:       #e5e5e5;
    --color-bg:           #f8f7f5;
    --color-bg-alt:       #f0ede8;

    /* Spacing Scale */
    --space-xs:   0.25rem;   /*  4px */
    --space-sm:   0.5rem;    /*  8px */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2rem;      /* 32px */
    --space-2xl:  3rem;      /* 48px */
    --space-3xl:  4rem;      /* 64px */
    --space-4xl:  6rem;      /* 96px */

    /* Typography */
    --font-base:   'IBM Plex Sans Arabic', sans-serif;
    --font-size-sm:   0.875rem;  /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md:   1.125rem;  /* 18px */
    --font-size-lg:   1.25rem;   /* 20px */
    --font-size-xl:   1.5rem;    /* 24px */
    --font-size-2xl:  2rem;      /* 32px */
    --font-size-3xl:  2.5rem;    /* 40px */
    --font-size-4xl:  3rem;      /* 48px */
    --line-height-tight:  1.25;
    --line-height-base:   1.6;
    --line-height-loose:  1.8;

    /* Border Radius */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Layout */
    --container-max: 1200px;
    --container-pad: 1.5rem;

    /* Header */
    --header-height: 80px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + var(--space-md));
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

ul,
ol {
    list-style: none;
}

/* ==========================================================================
   Layout
   ========================================================================== */
.container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1;
    padding-block: var(--space-3xl);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-secondary);
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
h6 { font-size: var(--font-size-base); }

p {
    margin-block-end: var(--space-md);
}

p:last-child {
    margin-block-end: 0;
}

/* ==========================================================================
   Site Header
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 100;
    height: var(--header-height);
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* Offset the page content so it doesn't slide under the fixed header
   (hero is exempt — it intentionally starts at the top) */
.site-wrapper > #main,
.site-wrapper > .site-main {
    padding-block-start: var(--header-height);
}

/* On the front page the hero itself provides the correct top padding,
   so we cancel the wrapper offset to avoid double spacing. */
.home .site-wrapper > #main,
.home .site-wrapper > .site-main,
.front-page .site-wrapper > #main,
.front-page .site-wrapper > .site-main {
    padding-block-start: 0;
}

/* Pages with a page-hero also cancel the wrapper offset
   because the hero sits behind the transparent header. */
.page .site-wrapper > #main,
.page .site-wrapper > .site-main {
    padding-block-start: 0;
}

/* ── Transparent header (front page, above fold) ──
   !important needed to beat the transition that would flash white on load. */
.site-header.is-transparent {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    /* Disable transition on initial load so it renders transparent instantly */
    transition: none;
}

/* Nav links + social icons need to be white while header is transparent */
.site-header.is-transparent .primary-navigation a,
.site-header.is-transparent .header-social__link,
.site-header.is-transparent .lang-switcher {
    color: var(--color-white);
}

.site-header.is-transparent .primary-navigation a:hover,
.site-header.is-transparent .primary-navigation a:focus,
.site-header.is-transparent .primary-navigation .current-menu-item > a,
.site-header.is-transparent .primary-navigation .current_page_item > a {
    color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.08);
}

.site-header.is-transparent .header-social__link:hover,
.site-header.is-transparent .header-social__link:focus {
    color: var(--color-primary);
}

.site-header.is-transparent .menu-toggle__bar {
    background-color: var(--color-white);
}

/* 3-zone grid: logo | nav (centered) | actions */
.site-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 100%;
    gap: var(--space-md);
}

/* Site Logo */
.site-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-logo a {
    display: inline-flex;
    align-items: center;
}

.site-logo img {
    height: 48px;
    width: auto;
}

.custom-logo {
    height: 48px;
    width: auto;
}

/* ── Dual-logo switching: default vs transparent header ── */
/* Always hide the transparent logo by default */
.site-logo__img--transparent {
    display: none !important;
}
/* Always show the default logo by default */
.site-logo__img--default {
    display: block !important;
}

/* When header is transparent: swap — hide default, show transparent */
.site-header.is-transparent .site-logo__img--default {
    display: none !important;
}
.site-header.is-transparent .site-logo__img--transparent {
    display: block !important;
}

/* Primary Navigation – centered in the grid's middle column */
.primary-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
}

.primary-navigation ul {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.primary-navigation a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-secondary);
    font-weight: 500;
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.primary-navigation a:hover,
.primary-navigation a:focus,
.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a {
    color: var(--color-primary);
    background-color: var(--color-bg);
    text-decoration: none;
}

/* Mobile Nav Grid – hidden on desktop */
.mobile-nav-grid {
    display: none;
}

/* ── Header Actions (Zone 3: social icons + lang switcher + hamburger) ── */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Social icons row */
.header-social {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.header-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    color: var(--color-secondary);
    background-color: transparent;
    transition: color var(--transition-fast), background-color var(--transition-fast);
    text-decoration: none;
}

.header-social__link:hover,
.header-social__link:focus {
    color: var(--color-primary);
    background-color: var(--color-bg);
    text-decoration: none;
}

.header-social__link--whatsapp:hover,
.header-social__link--whatsapp:focus {
    color: #25d366;
    background-color: rgba(37, 211, 102, 0.08);
}

/* Vertical divider between social and lang switcher */
.header-actions__divider {
    display: block;
    width: 1px;
    height: 22px;
    background-color: var(--color-border);
    margin-inline: var(--space-xs);
}

/* Language Switcher button */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px var(--space-sm);
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    transition: border-color var(--transition-fast), color var(--transition-fast),
                background-color var(--transition-fast);
    white-space: nowrap;
}

.lang-switcher:hover,
.lang-switcher:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: rgba(180, 144, 88, 0.06);
    outline: none;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: var(--space-sm);
    transition: border-color var(--transition-fast);
}

.menu-toggle:hover {
    border-color: var(--color-primary);
}

.menu-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-secondary);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Site Footer — Full Rebuild
   ========================================================================== */
.site-footer {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding-block-start: var(--space-3xl);
    padding-block-end: 0;
}

/* ── Footer 4-column grid ───────────────────────────────────────────── */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1fr 1fr;
    gap: var(--space-2xl);
    padding-block-end: var(--space-3xl);
}

.footer-col {}

/* Column title */
.footer-col__title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-white);
    margin-block-end: var(--space-lg);
    padding-block-end: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
}

/* ── About column ────────────────────────────────────────────────────── */
.footer-col__logo {
    margin-block-end: var(--space-md);
}

.footer-col__logo img,
.footer-col__logo .custom-logo {
    height: 42px;
    width: auto;
}

.footer-col__about-text {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--line-height-loose);
    margin: 0;
}

/* ── Contact column ──────────────────────────────────────────────────── */
.footer-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: 0;
    padding: 0;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.75);
    line-height: var(--line-height-base);
}

.footer-contact-item__icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    margin-block-start: 2px;
}

.footer-contact-item__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-contact-item__link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ── Quick Links column ─────────────────────────────────────────────── */
.footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-links-list li a,
.footer-links-list a {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color var(--transition-fast), padding-inline-start var(--transition-fast);
}

.footer-links-list li a::before,
.footer-links-list a::before {
    content: '›';
    color: var(--color-primary);
    font-size: 1.1em;
    line-height: 1;
}

.footer-links-list li a:hover,
.footer-links-list a:hover {
    color: var(--color-primary);
    padding-inline-start: 4px;
    text-decoration: none;
}

/* ── Social column ───────────────────────────────────────────────────── */
.footer-col__social-intro {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    margin-block-end: var(--space-md);
}

.footer-social-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), transform var(--transition-fast);
    text-decoration: none;
}

.footer-social__link:hover,
.footer-social__link:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    text-decoration: none;
}

.footer-social__link--whatsapp:hover,
.footer-social__link--whatsapp:focus {
    background-color: #25d366;
    border-color: #25d366;
}

/* ── Footer Bottom Bar ───────────────────────────────────────────────── */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom__copy {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-bottom__credit {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

.footer-bottom__credit-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.footer-bottom__credit-link:hover {
    color: var(--color-white);
    text-decoration: none;
}

/* ==========================================================================
   Page Header (Inner Pages)
   ========================================================================== */
.page-header-section {
    background-color: var(--color-secondary);
    padding-block: var(--space-2xl);
}

.page-header-section .page-title {
    color: var(--color-white);
    font-size: var(--font-size-2xl);
    margin: 0;
}

/* ==========================================================================
   Page Hero – Inner Pages (sits behind transparent header)
   ========================================================================== */
.page-hero {
    position: relative;
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        135deg,
        #0a3439 0%,
        #0c393f 30%,
        #10474f 60%,
        #0c393f 100%
    );
    color: var(--color-white);
    overflow: hidden;
    text-align: center;
}

/* Rich multi-stop gradient overlay */
.page-hero__gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(180, 144, 88, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, rgba(180, 144, 88, 0.08) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(8, 42, 46, 0.2) 0%, transparent 40%, rgba(8, 42, 46, 0.5) 100%);
    z-index: 0;
}

/* Floating geometric shapes */
.page-hero__shapes {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.page-hero__shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: heroShapeFloat 8s ease-in-out infinite;
}

.page-hero__shape--1 {
    width: 300px;
    height: 300px;
    top: -80px;
    inset-inline-end: -60px;
    border: 2px solid rgba(180, 144, 88, 0.15);
    animation-delay: 0s;
}

.page-hero__shape--2 {
    width: 180px;
    height: 180px;
    bottom: -40px;
    inset-inline-start: 5%;
    background: radial-gradient(circle, rgba(180, 144, 88, 0.08) 0%, transparent 70%);
    animation-delay: 2s;
}

.page-hero__shape--3 {
    width: 80px;
    height: 80px;
    top: 30%;
    inset-inline-start: 15%;
    border: 1.5px solid rgba(180, 144, 88, 0.12);
    animation-delay: 4s;
}

.page-hero__shape--4 {
    width: 120px;
    height: 120px;
    top: 20%;
    inset-inline-end: 15%;
    background: radial-gradient(circle, rgba(180, 144, 88, 0.06) 0%, transparent 70%);
    animation-delay: 6s;
}

@keyframes heroShapeFloat {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-15px) scale(1.05);
    }
}

/* Diagonal gold accent stripe */
.page-hero__stripe {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-primary) 20%,
        var(--color-primary) 80%,
        transparent 100%
    );
    z-index: 2;
}

/* Content wrapper above overlays */
.page-hero__inner {
    position: relative;
    z-index: 1;
    padding-block: calc(var(--header-height) + var(--space-3xl)) var(--space-3xl);
}

/* Title */
.page-hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin: 0;
    color: var(--color-white);
    letter-spacing: -0.01em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gold underline accent below title */
.page-hero__title-accent {
    display: block;
    width: 60px;
    height: 3px;
    margin-block-start: var(--space-md);
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 2px;
}

/* Breadcrumb pill */
.page-hero__breadcrumb {
    margin-block-start: var(--space-xl);
}

.page-hero__breadcrumb-list {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    list-style: none;
    padding: var(--space-xs) var(--space-lg);
    margin: 0;
    font-size: var(--font-size-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.page-hero__breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.page-hero__breadcrumb-item a i {
    font-size: 0.85em;
}

.page-hero__breadcrumb-item a:hover,
.page-hero__breadcrumb-item a:focus {
    color: var(--color-white);
}

/* Separator between breadcrumb items */
.page-hero__breadcrumb-item + .page-hero__breadcrumb-item::before {
    content: '/';
    margin-inline-end: var(--space-sm);
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
}

.page-hero__breadcrumb-item--current {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

/* ── Page Hero Responsive ── */
@media (max-width: 768px) {
    .page-hero {
        min-height: 320px;
    }

    .page-hero__title {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
    }

    .page-hero__inner {
        padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-2xl);
    }

    .page-hero__shape--1 {
        width: 180px;
        height: 180px;
    }

    .page-hero__shape--4 {
        display: none;
    }
}

/* ==========================================================================
   Hero Section – Full Viewport
   ========================================================================== */

/* The hero stretches to 100dvh (dynamic viewport height – handles mobile
   browser chrome correctly). It starts behind the fixed transparent header. */
.hero {
    position: relative;
    width: 100%;
    height: 100dvh;              /* lock to exact viewport height */
    min-height: 600px;           /* floor so tiny screens don't collapse it */
    background-color: var(--color-secondary-dark); /* fallback if image fails */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--color-white);
}

/* Dark gradient overlay so text is always readable */
.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(8, 42, 46, 0.72) 0%,
        rgba(8, 42, 46, 0.58) 50%,
        rgba(8, 42, 46, 0.80) 100%
    );
    z-index: 0;
}

/* Content wrapper sits above overlay */
.hero__inner {
    position: relative;
    z-index: 1;
    padding-block: calc(var(--header-height) + var(--space-4xl)) var(--space-4xl);
    max-width: 760px;        /* keeps text comfortably readable */
}

/* Eyebrow – small all-caps label above the headline */
.hero__eyebrow {
    display: inline-block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    background-color: rgba(180, 144, 88, 0.12);
    border: 1px solid rgba(180, 144, 88, 0.35);
    border-radius: var(--radius-lg);
    padding: 0.3em 0.9em;
    margin-block-end: var(--space-lg);
}

/* Main headline */
.hero__title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-white);
    margin-block-end: var(--space-lg);
    white-space: nowrap;
}

/* ── Letter-by-letter animation ── */
.hero__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    animation: hero-letter-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.hero__letter--space {
    display: inline-block;
    width: 0.28em;   /* consistent space width */
}

@keyframes hero-letter-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Word-by-word animation (Arabic) */
.hero__word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    animation: hero-letter-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Subtitle – one-line punchy description */
.hero__lead {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: var(--line-height-base);
    margin-block-end: var(--space-md);
    max-width: 680px;
}

/* Body paragraph */
.hero__body {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.72);
    line-height: var(--line-height-loose);
    max-width: 620px;
    margin-block-end: var(--space-2xl);
}

/* CTA button row */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-block-end: var(--space-xl);
}

/* ── Shared button base ── */
.hero__btn-primary,
.hero__btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.9em 2.2em;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        background-color 220ms ease,
        border-color     220ms ease,
        color            220ms ease,
        box-shadow       220ms ease,
        transform        200ms ease;
}

/* Subtle shimmer sweep on hover */
.hero__btn-primary::after,
.hero__btn-secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 480ms ease;
    pointer-events: none;
}

.hero__btn-primary:hover::after,
.hero__btn-primary:focus::after,
.hero__btn-secondary:hover::after,
.hero__btn-secondary:focus::after {
    transform: translateX(100%);
}

/* ── Primary – gold filled ── */
.hero__btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow:
        0 4px 14px rgba(180, 144, 88, 0.40),
        0 1px 3px  rgba(0, 0, 0, 0.15);
}

.hero__btn-primary:hover,
.hero__btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow:
        0 6px 20px rgba(180, 144, 88, 0.55),
        0 2px 6px  rgba(0, 0, 0, 0.20);
    transform: translateY(-2px);
    text-decoration: none;
}

.hero__btn-primary:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(180, 144, 88, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Arrow icon on primary button */
.hero__btn-primary .btn-arrow {
    display: inline-block;
    transition: transform 200ms ease;
    font-style: normal;
    line-height: 1;
}

.hero__btn-primary:hover .btn-arrow,
.hero__btn-primary:focus .btn-arrow {
    transform: translateX(4px);
}

/* ── Secondary – glass/outline ── */
.hero__btn-secondary {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--color-white);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero__btn-secondary:hover,
.hero__btn-secondary:focus {
    background-color: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.90);
    color: var(--color-white);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    text-decoration: none;
}

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

/* Trust highlights row */
.hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 0.6em;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
}

.hero__trust span {
    white-space: nowrap;
}

.hero__trust-dot {
    color: var(--color-primary);
    opacity: 0.7;
}

/* Animated scroll-cue chevron at the bottom */
.hero__scroll-cue {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    animation: hero-bounce 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

/* ==========================================================================
   Content Sections
   ========================================================================== */
.section-placeholder {
    padding-block: var(--space-3xl);
}

.section-placeholder + .section-placeholder {
    padding-block-start: 0;
}

.section-title {
    font-size: var(--font-size-2xl);
    color: var(--color-secondary);
    margin-block-end: var(--space-md);
}

/* ==========================================================================
   Teams Grid
   ========================================================================== */
.teams-section {
    padding-block: var(--space-3xl);
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-xl);
    margin-block-start: var(--space-xl);
}

.team-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.team-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.team-card__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-alt);
}

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

.team-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-bg-alt);
    color: var(--color-text-muted);
    font-size: var(--font-size-3xl);
}

.team-card__body {
    padding: var(--space-lg);
}

.team-card__name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-xs);
}

.team-card__position {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-md);
}

.team-card__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    margin-block-end: var(--space-md);
}

.team-card__linkedin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.team-card__linkedin:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
}

.teams-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-3xl);
    color: var(--color-text-muted);
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-border);
}

/* ==========================================================================
   Blog / Posts — Grid layout (no sidebar)
   ========================================================================== */

/* ── Shared blog-layout (archive/index with sidebar) ── */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--space-2xl);
    align-items: start;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* ── Featured post (first card, full-width) ──────────── */
.post-featured {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: var(--shadow-md);
    margin-block-end: var(--space-2xl);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.post-featured:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.post-featured__image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-bg-alt);
}

.post-featured__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.post-featured:hover .post-featured__image img {
    transform: scale(1.04);
}

.post-featured__body {
    padding: var(--space-2xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-md);
}

.post-featured__title {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-tight);
    margin: 0;
}

.post-featured__title a {
    color: var(--color-secondary);
    transition: color var(--transition-fast);
}

.post-featured__title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.post-featured__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.post-featured__excerpt {
    color: var(--color-text-muted);
    line-height: var(--line-height-loose);
    margin: 0;
}

/* ── Post Cards Grid ─────────────────────────────────── */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-block-end: var(--space-2xl);
}

/* ── Individual Card ─────────────────────────────────── */
.post-card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.post-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.post-card__thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-bg-alt);
    flex-shrink: 0;
}

.post-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

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

.post-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-sm);
}

/* Category badge */
.post-card__category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background-color: rgba(180, 144, 88, 0.1);
    padding: 2px var(--space-sm);
    border-radius: var(--radius-sm);
    align-self: flex-start;
    transition: background-color var(--transition-fast);
    text-decoration: none;
}

.post-card__category:hover {
    background-color: rgba(180, 144, 88, 0.2);
    text-decoration: none;
    color: var(--color-primary-dark);
}

.post-card__title {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-tight);
    margin: 0;
}

.post-card__title a {
    color: var(--color-secondary);
    transition: color var(--transition-fast);
}

.post-card__title a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.post-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.post-card__excerpt {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
    flex: 1;
    margin: 0;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-block-start: auto;
    padding-block-start: var(--space-sm);
    transition: color var(--transition-fast), gap var(--transition-fast);
}

.read-more:hover,
.read-more:focus {
    color: var(--color-primary-dark);
    gap: var(--space-sm);
    text-decoration: none;
}

/* ── Blog Sidebar (archive/index only) ──────────────── */
.blog-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
}

.widget {
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-block-end: var(--space-lg);
}

.widget-title {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-md);
    padding-block-end: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
}

/* ==========================================================================
   Single Post — Full-width hero + narrow reading column
   ========================================================================== */

/* Hero wrapper */
.single-hero {
    position: relative;
    background-color: var(--color-secondary);
}

.single-hero__image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.single-hero__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

.single-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(12, 57, 63, 0.55) 0%,
        rgba(12, 57, 63, 0.88) 100%
    );
}

/* Hero content block */
.single-hero__content {
    position: relative;
    z-index: 1;
    padding-block: var(--space-3xl);
}

.single-hero__content.no-image {
    padding-block: var(--space-2xl);
}

.single-hero__content.has-image {
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.single-hero__content .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 860px;
}

.single-hero__title {
    font-size: clamp(var(--font-size-2xl), 4vw, var(--font-size-4xl));
    font-weight: 700;
    color: var(--color-white);
    line-height: var(--line-height-tight);
    margin: 0;
}

/* Author / meta row inside hero */
.single-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block-start: var(--space-sm);
}

.single-hero__avatar {
    flex-shrink: 0;
}

.single-hero__avatar-img {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.single-hero__meta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.single-hero__author {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-white);
    transition: color var(--transition-fast);
}

.single-hero__author:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.single-hero__meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.75);
}

/* Reading column */
.single-post-wrap {
    max-width: 780px;
    margin-inline: auto;
    padding-inline: var(--container-pad);
    padding-block: var(--space-3xl);
}

.entry-content {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    color: var(--color-text);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-block-start: var(--space-xl);
    margin-block-end: var(--space-sm);
    color: var(--color-secondary);
}

.entry-content p {
    margin-block-end: var(--space-lg);
}

.entry-content ul,
.entry-content ol {
    list-style: disc;
    padding-inline-start: var(--space-xl);
    margin-block-end: var(--space-lg);
}

.entry-content ol {
    list-style: decimal;
}

.entry-content li {
    margin-block-end: var(--space-xs);
}

.entry-content blockquote {
    border-inline-start: 4px solid var(--color-primary);
    padding-inline-start: var(--space-lg);
    padding-block: var(--space-sm);
    margin-block: var(--space-xl);
    background-color: var(--color-bg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--font-size-md);
}

.entry-content img {
    border-radius: var(--radius-md);
    margin-block: var(--space-lg);
}

.entry-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.entry-content a:hover {
    color: var(--color-primary-dark);
}

.entry-content code {
    background-color: var(--color-bg-alt);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

.entry-content pre {
    background-color: var(--color-secondary-dark);
    color: #e2e8f0;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-lg);
}

.entry-content pre code {
    background: none;
    padding: 0;
    font-size: var(--font-size-sm);
}

/* ==========================================================================
   Legal Page Layout (Privacy Policy / Terms & Conditions)
   ========================================================================== */
.legal-page {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-3xl);
    padding-block: var(--space-3xl);
    align-items: start;
}

/* ── Table of Contents (Sticky Sidebar) ── */
.legal-page__toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.legal-page__toc-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-secondary);
    margin-block-end: var(--space-md);
    padding-block-end: var(--space-sm);
    border-bottom: 2px solid var(--color-primary);
}

.legal-page__toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-page__toc-list li {
    margin-block-end: var(--space-xs);
}

.legal-page__toc-list a {
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.legal-page__toc-list a:hover,
.legal-page__toc-list a:focus {
    color: var(--color-secondary);
    background-color: var(--color-bg-alt);
}

/* ── Content Area ── */
.legal-page__content {
    max-width: 800px;
}

.legal-page__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    border-inline-start: 4px solid var(--color-primary);
    margin-block-end: var(--space-2xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.legal-page__meta i {
    color: var(--color-primary);
}

/* ── Legal Page Responsive ── */
@media (max-width: 960px) {
    .legal-page {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .legal-page__toc {
        position: static;
    }
}

/* Author box */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background-color: var(--color-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    margin-block-start: var(--space-2xl);
}

.author-box__img {
    border-radius: 50%;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.author-box__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-block-end: var(--space-xs);
}

.author-box__name {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-sm);
    text-decoration: none;
}

.author-box__name:hover {
    color: var(--color-primary);
}

.author-box__bio {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    margin: 0;
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-xl);
    border-top: 1px solid var(--color-border);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    max-width: 45%;
}

.post-navigation .nav-next {
    text-align: end;
    margin-inline-start: auto;
}

.post-navigation a {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    color: var(--color-secondary);
    font-weight: 600;
    transition: color var(--transition-fast);
}

.post-navigation a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.post-navigation__direction {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    font-weight: 500;
}

.post-navigation__title {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    line-height: var(--line-height-tight);
}

/* Single post – author link in meta */
.single-post__author {
    color: var(--color-secondary);
    font-weight: 600;
}

.single-post__author:hover {
    color: var(--color-primary);
}

/* Single post – title override (larger than default page-title) */
.single-post__title {
    font-size: var(--font-size-3xl);
    margin-block-start: var(--space-sm);
}

/* Post breadcrumb */
.post-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.7);
    margin-block-end: var(--space-sm);
}

.post-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    transition: color var(--transition-fast);
}

.post-breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.post-breadcrumb span[aria-current="page"] {
    color: var(--color-white);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 30ch;
}

/* Sidebar placeholder (no widgets assigned) */
.sidebar-placeholder {
    border: 2px dashed var(--color-border);
    background-color: var(--color-bg);
}

.sidebar-placeholder p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* No Results */
.no-results {
    text-align: center;
    padding: var(--space-3xl) var(--space-md);
}

.no-results__title {
    color: var(--color-secondary);
    margin-block-end: var(--space-md);
}

.no-results__text {
    color: var(--color-text-muted);
    margin-block-end: var(--space-xl);
}

.no-results__search {
    max-width: 480px;
    margin-inline: auto;
}

/* Search page */
.search-refine {
    max-width: 600px;
    margin-block-end: var(--space-xl);
}

.search-result-count {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-block-end: var(--space-xl);
}

/* ==========================================================================
   404 Page
   ========================================================================== */
.error-404 {
    text-align: center;
    padding-block: var(--space-4xl);
}

.error-404__code {
    font-size: 8rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-block-end: var(--space-md);
}

.error-404__title {
    font-size: var(--font-size-2xl);
    color: var(--color-secondary);
    margin-block-end: var(--space-md);
}

.error-404__text {
    color: var(--color-text-muted);
    margin-block-end: var(--space-xl);
}

/* ==========================================================================
   Search Results
   ========================================================================== */
.search-header {
    margin-block-end: var(--space-2xl);
}

.search-header h1 {
    font-size: var(--font-size-2xl);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
    border: 2px solid transparent;
    text-decoration: none;
}

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

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    text-decoration: none;
}

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

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
    text-decoration: none;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-2xl);
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-fast);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

/* ==========================================================================
   Shared Section Utilities
   ========================================================================== */

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-block-end: var(--space-md);
}

.section-eyebrow i {
    font-size: 1.2em;
}

.section-heading {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-secondary);
    margin-block-end: var(--space-lg);
}

.section-heading--center {
    text-align: center;
}

.section-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    max-width: 680px;
}

.section-subtitle--center {
    margin-inline: auto;
    text-align: center;
}

/* ==========================================================================
   SECTION 2: Positioning Strip
   ========================================================================== */

.positioning-strip {
    background: var(--color-white);
    padding-block: var(--space-4xl);
    position: relative;
    overflow: hidden;
}

.positioning-strip__content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

.positioning-strip__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-block-end: var(--space-lg);
}

.positioning-strip__headline {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-secondary);
    margin: 0;
}

/* ==========================================================================
   SECTION 3: About Snapshot
   ========================================================================== */

.about-snapshot {
    padding-block: var(--space-4xl);
    background-color: var(--color-white);
}

.about-snapshot__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

/* Image Column */
.about-snapshot__image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.about-snapshot__image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 600ms ease;
}

.about-snapshot__image:hover img {
    transform: scale(1.05);
}

.about-snapshot__image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(12, 57, 63, 0.40) 0%,
        transparent 50%
    );
    pointer-events: none;
}

/* Content Column */
.about-snapshot__content {
    padding-inline-start: var(--space-lg);
}

.about-snapshot__text {
    font-size: var(--font-size-md);
    color: var(--color-text);
    line-height: var(--line-height-loose);
    margin-block-end: var(--space-lg);
}

.about-snapshot__tagline {
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-style: italic;
    color: var(--color-secondary);
    line-height: var(--line-height-base);
    padding-inline-start: var(--space-lg);
    border-inline-start: 4px solid var(--color-primary);
    margin: 0;
}

/* ==========================================================================
   SECTION 4: Mission / Purpose / Vision (MPV) Tabs
   ========================================================================== */

.mpv-section {
    padding-block: var(--space-4xl);
    background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-white) 100%);
}

.mpv-section__intro {
    margin-block-end: var(--space-3xl);
}

/* Tab Navigation */
.mpv-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-block-end: var(--space-3xl);
    flex-wrap: wrap;
}

.mpv-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85em 1.8em;
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-secondary);
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        background-color 250ms ease,
        border-color     250ms ease,
        color            250ms ease,
        transform        200ms ease,
        box-shadow       250ms ease;
}

.mpv-tabs__btn i {
    font-size: 1.3em;
    transition: transform 250ms ease;
}

.mpv-tabs__btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
}

.mpv-tabs__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.mpv-tabs__btn:hover i {
    transform: scale(1.1);
}

.mpv-tabs__btn.active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.mpv-tabs__btn.active::before {
    transform: scaleX(1);
}

.mpv-tabs__btn.active i {
    color: var(--color-primary);
}

/* Tab Panels Container */
.mpv-panels {
    position: relative;
    min-height: 320px;
}

.mpv-panel {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 400ms ease,
        transform 400ms ease;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mpv-panel.active {
    opacity: 1;
    transform: translateY(0);
    position: relative;
    pointer-events: all;
}

.mpv-panel__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3xl);
    align-items: start;
    background-color: var(--color-white);
    padding: var(--space-3xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
}

/* Large Icon */
.mpv-panel__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 3rem;
    box-shadow:
        0 8px 24px rgba(180, 144, 88, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.10);
    position: relative;
    animation: mpv-icon-pulse 2.5s ease-in-out infinite;
}

@keyframes mpv-icon-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 8px 24px rgba(180, 144, 88, 0.35),
            0 2px 6px rgba(0, 0, 0, 0.10);
    }
    50% {
        transform: scale(1.05);
        box-shadow:
            0 12px 32px rgba(180, 144, 88, 0.45),
            0 4px 10px rgba(0, 0, 0, 0.15);
    }
}

.mpv-panel__content {
    flex: 1;
}

.mpv-panel__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-lg);
}

.mpv-panel__text {
    font-size: var(--font-size-md);
    color: var(--color-text);
    line-height: var(--line-height-loose);
    margin: 0;
}

.mpv-panel__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mpv-panel__list li {
    display: flex;
    align-items: start;
    gap: var(--space-md);
    font-size: var(--font-size-md);
    color: var(--color-text);
    line-height: var(--line-height-base);
}

.mpv-panel__list i {
    color: var(--color-primary);
    font-size: 1.4em;
    flex-shrink: 0;
    margin-block-start: 0.1em;
}

/* ==========================================================================
   SECTION 5: Our Clients – Infinite Logo Carousel
   ========================================================================== */
.clients-section {
    padding-block: var(--space-4xl);
    background: var(--color-white);
    overflow: hidden;
}

.clients-section__intro {
    margin-block-end: var(--space-3xl);
}

/* Carousel container – full width, masks edges */
.clients-carousel {
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

/* Scrolling track – holds 2x logos for seamless loop */
.clients-carousel__track {
    display: flex;
    align-items: center;
    gap: var(--space-3xl);
    width: max-content;
    animation: clientsScroll 36s linear infinite;
}

.clients-carousel:hover .clients-carousel__track {
    animation-play-state: paused;
}

/* Individual logo card */
.clients-carousel__item {
    flex-shrink: 0;
    width: 140px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    padding: var(--space-sm);
    transition: all 0.3s ease;
}

.clients-carousel__item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(180, 144, 88, 0.15);
    transform: scale(1.08);
}

.clients-carousel__item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.clients-carousel__item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Infinite scroll keyframe */
@keyframes clientsScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .clients-section {
        padding-block: var(--space-3xl);
    }

    .clients-carousel__item {
        width: 110px;
        height: 80px;
    }

    .clients-carousel__track {
        gap: var(--space-xl);
        animation-duration: 20s;
    }
}

/* ==========================================================================
   SECTION 6: CTA (Ready to Get Started)
   ========================================================================== */

.cta-section {
    padding-block: var(--space-3xl);
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(180, 144, 88, 0.12) 0%, transparent 70%);
    pointer-events: none;
}

.cta-section__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
}

.cta-section__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--color-white);
    margin-block-end: var(--space-lg);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.cta-section__text {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.9);
    line-height: var(--line-height-base);
    margin-block-end: var(--space-2xl);
    max-width: 600px;
    margin-inline: auto;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-3xl);
    font-family: var(--font-base);
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-secondary);
    background: linear-gradient(135deg, var(--color-white) 0%, #f5f5f5 100%);
    border: none;
    border-radius: 50rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-cta:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, #d4a253 100%);
    color: var(--color-white);
    box-shadow: 0 15px 40px rgba(180, 144, 88, 0.5);
    transform: translateY(-3px);
    text-decoration: none;
}

.btn-cta i {
    font-size: 1.25rem;
    transition: transform 300ms ease;
}

.btn-cta:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   SECTION 6: Why TLF (3 Pillars)
   ========================================================================== */

.why-tlf-section {
    padding-block: var(--space-4xl);
    background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-bg) 100%);
    position: relative;
    overflow: hidden;
}

.why-tlf-section__intro {
    margin-block-end: var(--space-4xl);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

/* Pillar Card */
.pillar-card {
    position: relative;
    background: var(--color-white);
    padding: var(--space-3xl) var(--space-2xl) var(--space-4xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    text-align: center;
    transition:
        transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 400ms ease;
    overflow: hidden;
}

.pillar-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(12, 57, 63, 0.15),
        0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Icon Wrapper with Glow Effect */
.pillar-card__icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin-inline: auto;
    margin-block-end: var(--space-xl);
}

.pillar-card__icon {
    position: relative;
    z-index: 2;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 3.5rem;
    box-shadow:
        0 10px 30px rgba(12, 57, 63, 0.30),
        0 4px 8px rgba(0, 0, 0, 0.12);
    animation: pillar-icon-float 3s ease-in-out infinite;
}

@keyframes pillar-icon-float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-8px) rotate(5deg);
    }
}

.pillar-card__icon--clarity {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    animation-delay: 0.3s;
}

.pillar-card__icon--continuity {
    background: linear-gradient(135deg, #0c393f 0%, var(--color-primary) 100%);
    color: var(--color-white);
    animation-delay: 0.6s;
}

/* Animated Glow Behind Icon */
.pillar-card__glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(180, 144, 88, 0.25) 0%, transparent 70%);
    z-index: 1;
    animation: pillar-glow-pulse 2s ease-in-out infinite;
}

@keyframes pillar-glow-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.pillar-card__title {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-md);
}

.pillar-card__text {
    position: relative;
    z-index: 1;
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-loose);
    margin: 0;
}

/* Large Background Number */
.pillar-card__number {
    position: absolute;
    bottom: -1rem;
    inset-inline-end: var(--space-lg);
    font-size: 8rem;
    font-weight: 900;
    color: rgba(242, 242, 242, 0.5);
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

/* ==========================================================================
   SECTION 7: Who We Serve (Scope of Work)
   ========================================================================== */

.scope-section {
    padding-block: var(--space-4xl);
    background-color: var(--color-bg);
    position: relative;
}

.scope-section__intro {
    margin-block-end: var(--space-4xl);
    text-align: center;
}

.scope-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
}

/* Scope Card */
.scope-card {
    position: relative;
    background: var(--color-white);
    padding: var(--space-3xl);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transition:
        transform 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 450ms ease,
        border-color 450ms ease;
    overflow: hidden;
}

.scope-card:hover {
    transform: translateY(-8px) rotateY(2deg);
    box-shadow:
        0 24px 48px rgba(12, 57, 63, 0.18),
        0 8px 16px rgba(0, 0, 0, 0.10);
    border-color: var(--color-primary);
}

/* Featured Card (Middle) */
.scope-card--featured {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.scope-card--featured .scope-card__title,
.scope-card--featured .scope-card__text {
    color: var(--color-white);
}

.scope-card--featured .scope-card__features li {
    color: rgba(255, 255, 255, 0.9);
}

.scope-card--featured .scope-card__features i {
    color: var(--color-primary);
}

.scope-card--featured:hover {
    transform: scale(1.08) translateY(-8px);
}

/* Featured Badge (Star) */
.scope-card__featured-badge {
    position: absolute;
    top: var(--space-md);
    inset-inline-end: var(--space-md);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(180, 144, 88, 0.40);
    animation: featured-badge-spin 4s linear infinite;
}

@keyframes featured-badge-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Card Header (Icon + Badge) */
.scope-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-lg);
}

.scope-card__icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: 2.5rem;
    box-shadow: 0 6px 18px rgba(12, 57, 63, 0.25);
    transition: transform 350ms ease;
}

.scope-card:hover .scope-card__icon {
    transform: rotateY(180deg);
}

.scope-card__icon--entrepreneurs {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.scope-card__icon--strategic {
    background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
}

.scope-card__badge {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    background-color: var(--color-bg);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
}

.scope-card--featured .scope-card__badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--color-white);
    border-color: var(--color-white);
}

.scope-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-md);
}

.scope-card__text {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-loose);
    margin-block-end: var(--space-lg);
}

/* Features List */
.scope-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.scope-card__features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.scope-card__features i {
    color: var(--color-primary);
    font-size: 1.2em;
    flex-shrink: 0;
}

/* Animated Accent Line */
.scope-card__accent {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 450ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.scope-card:hover .scope-card__accent {
    transform: scaleX(1);
}

.scope-card--featured .scope-card__accent {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-white) 100%);
}

/* ==========================================================================
   SECTION 8: Specialized Services (Premium Grid)
   ========================================================================== */

.services-section {
    padding-block: var(--space-4xl);
    background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-white) 100%);
    position: relative;
}

.services-section__intro {
    text-align: center;
    margin-block-end: var(--space-4xl);
}

.section-tagline {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-block-start: var(--space-md);
    font-weight: 500;
}

/* Carousel Container */
.services-carousel {
    margin-block-end: var(--space-3xl);
    padding-block-end: var(--space-2xl); /* Space for progress bar */
    position: relative;
}

/* Swiper Slides */
.services-carousel .swiper-slide {
    height: auto; /* Match card heights */
    display: flex;
}

/* Ensure cards fill slide height */
.services-carousel .service-card {
    width: 100%;
    height: 100%;
}

/* Progress Bar Styling */
.services-pagination {
    position: relative !important;
    bottom: 0 !important;
    margin-block-start: var(--space-xl);
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    overflow: hidden;
}

.services-pagination .swiper-pagination-progressbar-fill {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(180, 144, 88, 0.5);
    transition: transform 300ms ease;
}

/* Service Card */
.service-card {
    position: relative;
    background: var(--color-white);
    padding: var(--space-2xl);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition:
        transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 350ms ease,
        border-color 350ms ease;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 16px 32px rgba(12, 57, 63, 0.12),
        0 4px 8px rgba(0, 0, 0, 0.06);
    border-color: var(--color-primary);
}

.service-card__icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 2rem;
    margin-block-end: var(--space-lg);
    box-shadow: 0 8px 20px rgba(180, 144, 88, 0.25);
    transition: transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .service-card__icon {
    transform: scale(1.1) rotate(5deg);
}

.service-card__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-sm);
    line-height: var(--line-height-tight);
}

.service-card__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    margin: 0;
}

/* Shine Effect */
.service-card__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.3) 50%, transparent 60%);
    transform: translateX(-100%) translateY(-100%);
    transition: transform 600ms ease;
}

.service-card:hover .service-card__shine {
    transform: translateX(100%) translateY(100%);
}

/* View All Services Button */
.services-section__cta {
    text-align: center;
}

.btn-services-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-2xl);
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: 50rem;
    box-shadow: 0 8px 20px rgba(12, 57, 63, 0.25);
    transition:
        transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 300ms ease;
}

.btn-services-all:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(12, 57, 63, 0.35);
}

.btn-services-all i {
    font-size: 1.25rem;
    transition: transform 300ms ease;
}

.btn-services-all:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   SECTION 9: Work Methodology (3 Principles)
   ========================================================================== */

.methodology-section {
    padding-block: var(--space-4xl);
    background-color: var(--color-white);
    position: relative;
}

.methodology-section__intro {
    text-align: center;
    margin-block-end: var(--space-4xl);
}

.methodology-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2xl);
    max-width: 1200px;
    margin-inline: auto;
}

/* Methodology Card */
.methodology-card {
    position: relative;
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    padding: var(--space-3xl);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    box-shadow:
        0 10px 30px rgba(12, 57, 63, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.1);
    transition:
        transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 400ms ease;
    overflow: hidden;
}

.methodology-card:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow:
        0 20px 50px rgba(12, 57, 63, 0.35),
        0 8px 16px rgba(0, 0, 0, 0.15);
}

.methodology-card__number {
    position: absolute;
    top: var(--space-lg);
    inset-inline-end: var(--space-lg);
    font-size: 4rem;
    font-weight: 900;
    color: rgba(180, 144, 88, 0.2);
    line-height: 1;
    pointer-events: none;
    transition: transform 400ms ease;
}

.methodology-card:hover .methodology-card__number {
    transform: scale(1.2) rotate(5deg);
}

.methodology-card__content {
    position: relative;
    z-index: 1;
}

.methodology-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-block-end: var(--space-md);
    line-height: var(--line-height-tight);
}

.methodology-card__text {
    font-size: var(--font-size-base);
    color: rgba(255, 255, 255, 0.95);
    line-height: var(--line-height-loose);
    margin: 0;
}

/* Animated Border */
.methodology-card__border {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    border: 3px solid var(--color-primary);
    opacity: 0;
    transform: scale(1.05);
    transition:
        opacity 400ms ease,
        transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.methodology-card:hover .methodology-card__border {
    opacity: 1;
    transform: scale(1);
}

/* ==========================================================================
   SECTION 10: National Commitment
   ========================================================================== */

.national-commitment {
    padding-block: var(--space-3xl);
    background: linear-gradient(135deg, #0a2940 0%, var(--color-secondary-dark) 50%, #0a2940 100%);
    position: relative;
    overflow: hidden;
}

/* Animated Background Pattern */
.national-commitment::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(180, 144, 88, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(180, 144, 88, 0.06) 0%, transparent 50%);
    animation: backgroundPulse 15s ease-in-out infinite;
}

@keyframes backgroundPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Vision 2030 Badge */
.national-commitment__badge-wrapper {
    position: relative;
    text-align: center;
    margin-block-end: var(--space-xl);
}

.national-commitment__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, #d4a253 100%);
    border-radius: 50rem;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 30px rgba(180, 144, 88, 0.4);
}

.national-commitment__badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(180, 144, 88, 0.5);
}

.badge-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 1rem;
    color: var(--color-white);
}

.badge-text {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.badge-glow {
    display: none;
}

/* Main Title */
.national-commitment__title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--color-primary);
    text-align: center;
    margin-block-end: var(--space-4xl);
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-shadow: 0 2px 15px rgba(180, 144, 88, 0.3);
    position: relative;
    z-index: 2;
}

/* Commitment Cards Container */
.commitment-cards {
    display: grid;
    grid-template-columns: minmax(300px, 480px) auto minmax(300px, 480px);
    gap: var(--space-xl);
    align-items: center;
    justify-content: center;
    max-width: 1100px;
    margin-inline: auto;
    margin-block-end: var(--space-3xl);
    position: relative;
    z-index: 2;
}

/* Individual Commitment Card */
.commitment-card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(180, 144, 88, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl) var(--space-2xl) var(--space-4xl);
    transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 320px;
}

.commitment-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(180, 144, 88, 0.35);
}

/* Decorative Animated Line */
.commitment-card__decorative-line {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-primary) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 300ms ease;
}

.commitment-card:hover .commitment-card__decorative-line {
    opacity: 1;
}

/* Icon Box with Gradient */
.commitment-card__icon-box {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #d4a253 100%);
    border-radius: var(--radius-md);
    color: var(--color-white);
    font-size: 2rem;
    margin-block-end: var(--space-lg);
    box-shadow: 0 8px 25px rgba(180, 144, 88, 0.4);
    transition: all 300ms ease;
}

.commitment-card:hover .commitment-card__icon-box {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(180, 144, 88, 0.6);
}

/* Content */
.commitment-card__content {
    position: relative;
    z-index: 2;
}

.commitment-card__label {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
    margin-block-end: var(--space-sm);
    letter-spacing: -0.01em;
}

.commitment-card__text {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
}

/* Large Background Number */
.commitment-card__number {
    position: absolute;
    bottom: var(--space-md);
    inset-inline-end: var(--space-xl);
    font-size: 6rem;
    font-weight: 900;
    color: rgba(180, 144, 88, 0.12);
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    transition: all 300ms ease;
}

.commitment-card:hover .commitment-card__number {
    color: rgba(180, 144, 88, 0.18);
}

/* Connecting Element Between Cards */
.commitment-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-xs);
    padding-inline: var(--space-md);
}

.connector-line {
    display: none;
}

.connector-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #d4a253 100%);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(180, 144, 88, 0.5);
    border: 3px solid rgba(255, 255, 255, 0.1);
}

/* Bottom Seal */
.national-commitment__seal {
    text-align: center;
}

.seal-content {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-2xl);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(180, 144, 88, 0.3);
    border-radius: 50rem;
    backdrop-filter: blur(10px);
    transition: all 300ms ease;
}

.seal-content:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary);
}

.seal-content i {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.seal-content span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.02em;
}

/* ==========================================================================
   SECTION 10.5: Final CTA (Strong Close)
   ========================================================================== */

/* Section Container - Light background */
.final-cta-section {
    padding-block: var(--space-4xl); /* 96px top/bottom */
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
    position: relative;
    overflow: hidden;
}

/* Subtle pattern background */
.final-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 20%, var(--color-primary) 1px, transparent 1px),
        radial-gradient(circle at 80% 80%, var(--color-primary) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.03;
    pointer-events: none;
}

/* Trust Badge */
.final-cta__badge {
    text-align: center;
    margin-block-end: var(--space-xl); /* 32px */
}

.final-cta__badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 2.5rem;
    box-shadow:
        0 10px 30px rgba(180, 144, 88, 0.25),
        0 0 0 8px rgba(180, 144, 88, 0.08);
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.final-cta__badge-icon:hover {
    transform: scale(1.1) rotate(10deg);
}

/* Content Container */
.final-cta__content {
    text-align: center;
    max-width: 820px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
}

/* Title */
.final-cta__title {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--color-secondary);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    margin-block-end: var(--space-lg);
    white-space: nowrap;
}

/* Description Text */
.final-cta__text {
    font-size: var(--font-size-lg); /* 20px */
    color: var(--color-text); /* Dark gray #1a1a1a */
    line-height: var(--line-height-base); /* 1.6 */
    margin-block-end: var(--space-2xl); /* 48px */
    max-width: 700px;
    margin-inline: auto;
}

/* Button Container */
.final-cta__buttons {
    display: flex;
    gap: var(--space-md); /* 16px */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Primary Button (Gold Solid) */
.btn-final-primary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm); /* 8px */
    padding: var(--space-lg) var(--space-2xl); /* 24px 48px */
    font-family: var(--font-base);
    font-size: var(--font-size-lg); /* 20px */
    font-weight: 700;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: 2px solid var(--color-primary);
    border-radius: 50rem; /* Fully rounded */
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 8px 20px rgba(180, 144, 88, 0.30),
        0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-final-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    border-color: var(--color-primary-dark);
    color: var(--color-white);
    box-shadow:
        0 12px 30px rgba(180, 144, 88, 0.45),
        0 4px 10px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
    text-decoration: none;
}

.btn-final-primary i {
    font-size: 1.25rem;
    transition: transform 300ms ease;
}

.btn-final-primary:hover i {
    transform: scale(1.15);
}

/* Secondary Button (Teal Solid) */
.btn-final-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm); /* 8px */
    padding: var(--space-lg) var(--space-2xl); /* 24px 48px */
    font-family: var(--font-base);
    font-size: var(--font-size-lg); /* 20px */
    font-weight: 600;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    border: 2px solid var(--color-secondary);
    border-radius: 50rem;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 8px 20px rgba(12, 57, 63, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-final-secondary:hover {
    background: linear-gradient(135deg, var(--color-secondary-dark) 0%, var(--color-secondary) 100%);
    border-color: var(--color-secondary-dark);
    color: var(--color-white);
    box-shadow:
        0 12px 30px rgba(12, 57, 63, 0.35),
        0 4px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
    text-decoration: none;
}

.btn-final-secondary i {
    font-size: 1.25rem;
    transition: transform 300ms ease;
}

.btn-final-secondary:hover i {
    transform: translateX(4px); /* Arrow slides right */
}

/* ==========================================================================
   SECTION 11: Contact Pre-Footer (Map + Contact Info)
   ========================================================================== */

.contact-prefooter {
    padding-block: var(--space-3xl);
    background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg) 100%);
    position: relative;
}

.contact-prefooter__intro {
    text-align: center;
    margin-block-end: var(--space-4xl);
}

.contact-prefooter__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: stretch;
    overflow: hidden;
}

/* Contact Info Side */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.contact-info-item {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition:
        transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 300ms ease,
        border-color 300ms ease;
}

.contact-info-item:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 30px rgba(12, 57, 63, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.05);
    border-color: var(--color-primary);
}

.contact-info-item__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.75rem;
    box-shadow: 0 6px 20px rgba(180, 144, 88, 0.3);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-info-item:hover .contact-info-item__icon {
    transform: scale(1.1) rotate(-5deg);
}

.contact-info-item__content {
    flex: 1;
}

.contact-info-item__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-xs);
}

.contact-info-item__value {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--color-text);
    line-height: var(--line-height-normal);
    margin: 0;
}

.contact-info-item__value--link {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 300ms ease;
    display: inline-block;
}

.contact-info-item__value--link:hover {
    color: var(--color-primary);
}

/* Front-page map (inside prefooter grid) */
.contact-prefooter__grid .contact-map {
    min-width: 0;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.contact-map__frame {
    width: 100%;
    height: 100%;
}

.contact-map__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.contact-map__overlay {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--color-primary) 0%, transparent 100%);
    opacity: 0.15;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.contact-map:hover .contact-map__overlay {
    opacity: 0.25;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
    :root {
        --container-pad: 1rem;
    }

    h1 { font-size: var(--font-size-2xl); }
    h2 { font-size: var(--font-size-xl); }

    /* Hero – mobile adjustments */
    .hero__inner {
        padding-block: calc(var(--header-height) + var(--space-2xl)) var(--space-3xl);
    }

    /* Keep hero title on one line – scale down to fit */
    .hero__title {
        white-space: nowrap;
        font-size: clamp(1.75rem, 7.5vw, 2.5rem);
    }

    .hero__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .hero__btn-primary,
    .hero__btn-secondary {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    /* Mobile Navigation */
    .menu-toggle {
        display: flex;
    }

    .primary-navigation {
        position: absolute;
        top: var(--header-height);
        inset-inline: 0;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        padding: 0 var(--space-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-base), padding var(--transition-base);
    }

    .primary-navigation.is-open {
        max-height: 600px;
        padding: var(--space-lg);
    }

    /* Hide default WP menu list on mobile */
    .primary-navigation ul {
        display: none;
    }

    /* Mobile Nav Grid – 2-column icon cards */
    .mobile-nav-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
        padding: var(--space-lg) var(--space-sm);
        background-color: var(--color-bg);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
        text-decoration: none;
        color: var(--color-secondary);
        transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus {
        background-color: var(--color-white);
        border-color: var(--color-primary);
        color: var(--color-primary);
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .mobile-nav-item i {
        font-size: 1.5rem;
        color: var(--color-primary);
        transition: transform var(--transition-fast);
    }

    .mobile-nav-item:hover i {
        transform: scale(1.1);
    }

    .mobile-nav-item span {
        font-size: var(--font-size-sm);
        font-weight: 600;
        text-align: center;
        line-height: 1.3;
    }

    /* Header – collapse to 2-zone on mobile (logo | actions) */
    .site-header__inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    /* Hide social icons row in header on mobile – shown in menu drawer */
    .header-social {
        display: none;
    }

    .header-actions__divider {
        display: none;
    }

    /* Blog layout */
    .blog-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
    }

    /* Teams */
    .teams-grid {
        grid-template-columns: 1fr;
    }

    /* Footer grid – mobile layout */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .footer-col--about {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-col--about .footer-col__logo {
        display: flex;
        justify-content: center;
    }

    .footer-col--social {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-col--social .footer-social-icons {
        justify-content: center;
    }

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

    /* 404 */
    .error-404__code {
        font-size: 5rem;
    }

    /* Post navigation stacks on mobile */
    .post-navigation {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        max-width: 100%;
    }

    .post-navigation .nav-next {
        text-align: start;
        margin-inline-start: 0;
    }

    /* Single post title smaller on mobile */
    .single-post__title {
        font-size: var(--font-size-2xl);
    }

    /* Breadcrumb truncation relaxed */
    .post-breadcrumb span[aria-current="page"] {
        max-width: 20ch;
    }

    /* New sections – mobile layout */
    .about-snapshot__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .about-snapshot__content {
        padding-inline-start: 0;
    }

    .mpv-panel__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        padding: var(--space-lg);
    }

    .mpv-panel__icon {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
        margin-inline: auto;
    }

    .mpv-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        justify-items: center;
    }

    .mpv-tabs__btn {
        width: 100%;
    }

    .mpv-tabs__btn:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
    }

    /* CTA Section – mobile adjustments */
    .cta-section {
        padding-block: var(--space-4xl);
    }

    .cta-section__content {
        padding-inline: var(--space-md);
    }

    .cta-section__title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        margin-block-end: var(--space-md);
    }

    .cta-section__text {
        font-size: var(--font-size-base);
        margin-block-end: var(--space-xl);
    }

    .btn-cta {
        width: 100%;
        justify-content: center;
        padding: var(--space-md) var(--space-2xl);
        font-size: var(--font-size-base);
    }

    /* Why TLF Pillars – stack to single column */
    .pillars-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .pillar-card__icon-wrapper {
        width: 100px;
        height: 100px;
    }

    .pillar-card__icon {
        width: 100px;
        height: 100px;
        font-size: 3rem;
    }

    .pillar-card__number {
        font-size: 6rem;
        inset-inline-end: var(--space-md);
        bottom: -0.5rem;
    }

    .pillar-card__title {
        font-size: var(--font-size-xl);
    }

    /* Who We Serve Scope Cards – stack to single column */
    .scope-cards {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .scope-card--featured {
        transform: scale(1);
    }

    .scope-card--featured:hover {
        transform: translateY(-8px);
    }

    .scope-card__icon {
        width: 80px;
        height: 80px;
        font-size: 2.25rem;
    }

    .scope-card__featured-badge {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }

    /* Specialized Services – mobile layout */
    .services-carousel .swiper-slide {
        width: 100%; /* Full width on mobile */
    }

    .services-pagination {
        margin-block-start: var(--space-lg);
        height: 3px;
    }

    .service-card__icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    /* Work Methodology – stack cards */
    .methodology-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .methodology-card {
        padding: var(--space-2xl);
    }

    .methodology-card__number {
        font-size: 3rem;
        top: var(--space-md);
        inset-inline-end: var(--space-md);
    }

    .methodology-card__title {
        font-size: var(--font-size-lg);
    }

    /* National Commitment – mobile adjustments */
    .national-commitment {
        padding-block: var(--space-4xl);
    }

    .national-commitment__badge-wrapper {
        margin-block-end: var(--space-lg);
    }

    .national-commitment__title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-block-end: var(--space-3xl);
    }

    .commitment-cards {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        margin-block-end: var(--space-2xl);
    }

    .commitment-connector {
        display: none;
    }

    .commitment-card {
        padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
        min-height: 280px;
    }

    .commitment-card__icon-box {
        width: 55px;
        height: 55px;
        font-size: 1.75rem;
    }

    .commitment-card__label {
        font-size: var(--font-size-base);
    }

    .commitment-card__text {
        font-size: var(--font-size-sm);
        line-height: 1.6;
    }

    .commitment-card__number {
        font-size: 4.5rem;
        bottom: var(--space-sm);
        inset-inline-end: var(--space-lg);
    }

    .seal-content {
        padding: var(--space-sm) var(--space-lg);
        gap: var(--space-xs);
    }

    .seal-content i {
        font-size: 1.25rem;
    }

    .seal-content span {
        font-size: var(--font-size-xs);
    }

    /* Final CTA – mobile adjustments */
    .final-cta-section {
        padding-block: var(--space-3xl); /* 64px on mobile */
    }

    .final-cta__badge-icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }

    .final-cta__title {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        margin-block-end: var(--space-md);
        white-space: normal;
        max-width: 280px;
        margin-inline: auto;
    }

    .final-cta__text {
        font-size: var(--font-size-base);
        margin-block-end: var(--space-xl);
    }

    .final-cta__buttons {
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }

    .btn-final-primary,
    .btn-final-secondary {
        width: 100%;
        justify-content: center;
        padding: var(--space-md) var(--space-xl);
        font-size: var(--font-size-base);
    }

    /* Contact Pre-Footer – mobile layout */
    .contact-prefooter__grid {
        grid-template-columns: 1fr;
        gap: var(--space-3xl);
    }

    .contact-info {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-md);
    }

    .contact-info-item {
        flex-direction: column;
        text-align: center;
        padding: var(--space-lg);
        gap: var(--space-sm);
    }

    .contact-info-item__icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .contact-info-item__label {
        font-size: var(--font-size-xs);
    }

    .contact-info-item__value {
        font-size: var(--font-size-base);
    }

    .contact-map {
        min-height: 350px;
    }
}

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

@media (min-width: 769px) and (max-width: 1024px) {
    .teams-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer – 2-column on tablet */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================================================
   Skip Link (Accessibility)
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -100%;
    inset-inline-start: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-weight: 600;
    font-size: var(--font-size-sm);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: 9999;
    text-decoration: none;
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: 0;
    color: var(--color-white);
    text-decoration: none;
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Fixed Header – Scrolled State (overrides transparent when user scrolls)
   ========================================================================== */
.site-header.is-scrolled {
    background-color: var(--color-white);
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-md);
    /* Re-enable smooth transition when going solid */
    transition: background-color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

/* Restore dark text/icon colours once the header goes solid */
.site-header.is-scrolled .primary-navigation a {
    color: var(--color-secondary);
}

.site-header.is-scrolled .header-social__link,
.site-header.is-scrolled .lang-switcher {
    color: var(--color-secondary);
}

.site-header.is-scrolled .menu-toggle__bar {
    background-color: var(--color-secondary);
}

/* ==========================================================================
   Archive Page Header Description
   ========================================================================== */
.archive-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-md);
    margin-block-start: var(--space-sm);
    margin-block-end: 0;
}

/* ==========================================================================
   Contact Page Grid
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.contact-info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-info-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.contact-info-list__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    margin-block-start: 2px;
}

.contact-form-box {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

/* ==========================================================================
   Footer Widget Area
   ========================================================================== */
.footer-widgets {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-block-end: var(--space-xl);
    margin-block-end: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-xl);
}

.footer-widgets .widget {
    background-color: transparent;
    padding: 0;
    margin-block-end: 0;
}

.footer-widgets .widget-title {
    color: var(--color-white);
    border-bottom-color: var(--color-primary);
    font-size: var(--font-size-base);
}

.footer-widgets .widget,
.footer-widgets .widget a {
    color: rgba(255, 255, 255, 0.75);
}

.footer-widgets .widget a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

/* ==========================================================================
   Post Tags (single.php)
   ========================================================================== */
.entry-tags {
    margin-block-start: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.entry-tags__label {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
}

.entry-tag {
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    border: 1px solid var(--color-border);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.entry-tag:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
    border-color: var(--color-secondary);
}

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-area {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-xl);
    border-top: 1px solid var(--color-border);
    max-width: 800px;
}

.comments-title,
.comment-reply-title {
    font-size: var(--font-size-xl);
    color: var(--color-secondary);
    margin-block-end: var(--space-xl);
}

.comment-navigation {
    display: flex;
    justify-content: space-between;
    margin-block-end: var(--space-xl);
    font-size: var(--font-size-sm);
}

/* Comment List */
.comment-list {
    list-style: none;
    margin-block-end: var(--space-2xl);
}

.comment-list .children {
    list-style: none;
    padding-inline-start: var(--space-2xl);
    border-inline-start: 2px solid var(--color-border);
    margin-block-start: var(--space-lg);
}

.comment-body {
    padding-block: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.comment-meta {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-block-end: var(--space-md);
}

.comment-avatar {
    border-radius: 50%;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.comment-author-info .fn {
    font-weight: 700;
    color: var(--color-secondary);
    font-size: var(--font-size-sm);
    font-style: normal;
}

.comment-metadata {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-block-start: 2px;
}

.comment-metadata a {
    color: var(--color-text-muted);
}

.comment-metadata a:hover {
    color: var(--color-primary);
}

.comment-awaiting-moderation {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    margin-block-start: var(--space-xs);
}

.comment-content {
    font-size: var(--font-size-base);
    color: var(--color-text);
}

.comment-content p:last-child {
    margin-block-end: 0;
}

.reply {
    margin-block-start: var(--space-md);
}

.comment-reply-link {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-secondary);
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.comment-reply-link:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
}

.edit-link a {
    margin-inline-start: var(--space-sm);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
}

/* Comment Form */
.comment-respond {
    margin-block-start: var(--space-2xl);
}

.comment-form .comment-notes,
.comment-form-email-notice {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-block-end: var(--space-md);
}

.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-comment {
    margin-block-end: var(--space-md);
}

.comment-form label {
    display: block;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    margin-block-end: var(--space-xs);
}

.comment-form .required {
    color: var(--color-primary);
    margin-inline-start: 2px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-white);
    color: var(--color-text);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(180, 144, 88, 0.15);
    outline: none;
}

.comment-form textarea {
    resize: vertical;
    min-height: 150px;
}

.form-submit {
    margin-block-start: var(--space-lg);
}

.no-comments {
    color: var(--color-text-muted);
    font-style: italic;
    padding: var(--space-lg);
    background-color: var(--color-bg);
    border-radius: var(--radius-md);
}

/* Responsive – contact grid stacks on mobile */
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-widgets {
        grid-template-columns: 1fr;
    }

    .comment-list .children {
        padding-inline-start: var(--space-lg);
    }
}

/* ==========================================================================
   Floating Action Buttons (WhatsApp + Language Switcher)
   ========================================================================== */
.float-actions {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* Shared base for all floating buttons */
.float-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.float-btn:hover,
.float-btn:focus {
    transform: translateY(-3px) scale(1.07);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    outline: none;
    text-decoration: none;
}

/* WhatsApp floating button */
.float-btn--whatsapp {
    background-color: #25d366;
    color: var(--color-white);
}

.float-btn--whatsapp:hover,
.float-btn--whatsapp:focus {
    background-color: #1ebe5d;
    color: var(--color-white);
}

/* Language switcher floating button */
.float-btn--lang {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
}

.float-btn--lang:hover,
.float-btn--lang:focus {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.float-btn--lang__text {
    pointer-events: none;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE: PHILOSOPHY SECTION
   ══════════════════════════════════════════════════════════════════ */

/* Philosophy Section - Based on about-snapshot pattern */
.philosophy-section {
    padding-block: var(--space-4xl);
    background-color: var(--color-bg);
}

.philosophy-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

/* Left Visual */
.philosophy-section__visual {
    text-align: center;
    padding: var(--space-3xl);
}

.philosophy-section__icon-wrapper {
    width: 180px;
    height: 180px;
    margin-inline: auto;
    margin-block-end: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    box-shadow: 0 10px 40px rgba(180, 144, 88, 0.3);
}

.philosophy-section__icon-wrapper i {
    font-size: 5rem;
    color: var(--color-white);
}

.philosophy-section__quote {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--color-secondary);
}

/* Right Content */
.philosophy-section__content {
    padding: var(--space-2xl);
}

.philosophy-section__list {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-xl);
}

.philosophy-section__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-block-end: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border-inline-start: 3px solid var(--color-primary);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.philosophy-section__list li:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.philosophy-section__list i {
    font-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .philosophy-section {
        padding-block: var(--space-2xl);
    }
    
    .philosophy-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
    
    .philosophy-section__icon-wrapper {
        width: 120px;
        height: 120px;
    }
    
    .philosophy-section__icon-wrapper i {
        font-size: 3rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE: TRANSFORMATION SECTION
   ══════════════════════════════════════════════════════════════════ */

/* Transformation Section - Based on scope-cards pattern */
.transformation-section {
    padding-block: var(--space-4xl);
    background-color: var(--color-white);
}

.transformation-section__intro {
    text-align: center;
    margin-block-end: var(--space-3xl);
    max-width: 900px;
    margin-inline: auto;
}

.transformation-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-xl);
    max-width: 1100px;
    margin-inline: auto;
}

.transformation-grid .transformation-card {
    grid-column: span 2;
}

/* Center last 2 cards in second row */
.transformation-grid .transformation-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.transformation-card {
    position: relative;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.transformation-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(12, 57, 63, 0.15);
}

.transformation-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block-end: var(--space-lg);
}

.transformation-card__icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--color-white);
    box-shadow: 0 6px 20px rgba(180, 144, 88, 0.3);
}

.transformation-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(180, 144, 88, 0.1);
    border-radius: 50%;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.transformation-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-sm);
    line-height: 1.3;
}

.transformation-card__text {
    color: var(--color-text-muted);
    line-height: 1.7;
    font-size: var(--font-size-base);
}

.transformation-card__accent {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.transformation-card:hover .transformation-card__accent {
    transform: scaleX(1);
}

@media (max-width: 968px) {
    .transformation-section {
        padding-block: var(--space-3xl);
    }

    .transformation-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* Reset centering for tablet — all cards span 2 of 4 columns */
    .transformation-grid .transformation-card:nth-child(4) {
        grid-column: span 2;
    }

    /* Center the 5th card */
    .transformation-grid .transformation-card:nth-child(5) {
        grid-column: 2 / span 2;
    }
}

@media (max-width: 640px) {
    .transformation-section {
        padding-block: var(--space-2xl);
    }

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

    .transformation-grid .transformation-card {
        grid-column: span 1;
    }

    .transformation-grid .transformation-card:nth-child(4),
    .transformation-grid .transformation-card:nth-child(5) {
        grid-column: span 1;
    }

    .transformation-card {
        padding: var(--space-xl);
    }

    .transformation-card__icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE: MISSION SECTION
   ══════════════════════════════════════════════════════════════════ */

/* Mission Section - Based on mpv-panel pattern */
.mission-section {
    padding-block: var(--space-4xl);
    background: linear-gradient(135deg, #0c393f 0%, #082a2e 100%);
}

.mission-panel {
    max-width: 1000px;
    margin-inline: auto;
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
}

.mission-panel__grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.mission-panel__icon {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 50%;
    font-size: 3.5rem;
    color: var(--color-white);
    box-shadow: 0 8px 30px rgba(180, 144, 88, 0.4);
}

.mission-panel__content {
    /* Content styles handled by reused classes */
}

.mission-panel__list {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-xl);
}

.mission-panel__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    font-size: 1.1rem;
    color: var(--color-text);
}

.mission-panel__list i {
    font-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-block-start: 2px;
}

@media (max-width: 768px) {
    .mission-section {
        padding-block: var(--space-2xl);
    }
    
    .mission-panel {
        padding: var(--space-xl);
    }
    
    .mission-panel__grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-xl);
    }
    
    .mission-panel__icon {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
        margin-inline: auto;
    }
    
    .mission-panel__list li {
        font-size: var(--font-size-base);
    }
}


/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE: VISION STAGES SECTION
   ══════════════════════════════════════════════════════════════════ */

/* Vision Stages Section - Based on methodology-card pattern */
.vision-stages-section {
    padding-block: var(--space-4xl);
    background-color: var(--color-bg);
}

.vision-stages-section__intro {
    text-align: center;
    margin-block-end: var(--space-3xl);
    max-width: 900px;
    margin-inline: auto;
}

.vision-stages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.vision-stage-card {
    position: relative;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.vision-stage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(12, 57, 63, 0.15);
}

.vision-stage-card__number {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(180, 144, 88, 0.15);
    line-height: 1;
    margin-block-end: var(--space-md);
    transition: color 0.3s ease;
}

.vision-stage-card:hover .vision-stage-card__number {
    color: var(--color-primary);
}

.vision-stage-card__content {
    position: relative;
    z-index: 1;
}

.vision-stage-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-sm);
}

.vision-stage-card__text {
    color: var(--color-text-muted);
    line-height: 1.7;
}

.vision-stage-card__border {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.vision-stage-card:hover .vision-stage-card__border {
    transform: scaleX(1);
}

@media (max-width: 968px) {
    .vision-stages-section {
        padding-block: var(--space-3xl);
    }
    
    .vision-stages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .vision-stages-section {
        padding-block: var(--space-2xl);
    }
    
    .vision-stages-grid {
        grid-template-columns: 1fr;
    }
    
    .vision-stage-card {
        padding: var(--space-xl);
    }
    
    .vision-stage-card__number {
        font-size: 2.5rem;
    }
}


/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE: TLF DIFFERENCE SECTION
   ══════════════════════════════════════════════════════════════════ */

/* TLF Difference Section - Container only, reuses pillar-card */
.tlf-difference-section {
    padding-block: var(--space-4xl);
    background-color: var(--color-white);
}

.tlf-difference-section__intro {
    text-align: center;
    margin-block-end: var(--space-3xl);
}

@media (max-width: 768px) {
    .tlf-difference-section {
        padding-block: var(--space-2xl);
    }
}


/* ══════════════════════════════════════════════════════════════════
   ABOUT PAGE: CLOSING STATEMENT SECTION
   ══════════════════════════════════════════════════════════════════ */

/* Closing Statement Section - Based on cta-section pattern */
.closing-statement-section {
    padding-block: var(--space-4xl);
    position: relative;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    overflow: hidden;
}

.closing-statement-section::before {
    content: '';
    position: absolute;
    top: -50%;
    inset-inline-end: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.closing-statement__content {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.closing-statement__icon {
    width: 80px;
    height: 80px;
    margin-inline: auto;
    margin-block-end: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    font-size: 2.5rem;
    color: var(--color-white);
}

.closing-statement__quote {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.6;
    color: var(--color-white);
    margin: 0;
    padding: var(--space-xl);
    font-style: italic;
}

@media (max-width: 768px) {
    .closing-statement-section {
        padding-block: var(--space-2xl);
    }
    
    .closing-statement__icon {
        width: 64px;
        height: 64px;
        font-size: 2rem;
        margin-block-end: var(--space-lg);
    }
    
    .closing-statement__quote {
        padding: var(--space-md);
    }
}


/* ══════════════════════════════════════════════════════════════════
   CONTACT PAGE: INTRO SECTION
   ══════════════════════════════════════════════════════════════════ */

.contact-intro-section {
    padding-block: var(--space-3xl);
    background-color: var(--color-white);
}

.contact-intro__content {
    text-align: center;
    max-width: 900px;
    margin-inline: auto;
}

/* ══════════════════════════════════════════════════════════════════
   CONTACT PAGE: MAIN SECTION (FORM + SIDEBAR)
   ══════════════════════════════════════════════════════════════════ */

.contact-main-section {
    padding-block: var(--space-4xl);
    background-color: var(--color-bg);
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

/* ══════════════════════════════════════════════════════════════════
   CONTACT FORM CONTAINER
   ══════════════════════════════════════════════════════════════════ */

.contact-form-wrapper {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-3xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.contact-form__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-sm);
}

.contact-form__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-block-end: var(--space-2xl);
}

.form-group {
    margin-block-end: var(--space-lg);
}

.form-label {
    display: block;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text);
    margin-block-end: var(--space-sm);
}

.form-label .required {
    color: #e74c3c;
    margin-inline-start: 2px;
}

.form-control {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-base);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(180, 144, 88, 0.1);
}

.form-control::placeholder {
    color: #999999;
}

textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

select.form-control {
    cursor: pointer;
    padding-inline-end: var(--space-2xl);
}

.btn-contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-lg) var(--space-2xl);
    font-family: var(--font-base);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(180, 144, 88, 0.3);
}

.btn-contact-submit:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(180, 144, 88, 0.4);
}

.btn-contact-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-contact-submit i {
    font-size: 1.25rem;
}

.form-response {
    margin-block-start: var(--space-lg);
}

.alert {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.alert i {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-block-start: 2px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ══════════════════════════════════════════════════════════════════
   CONTACT SIDEBAR (MAP + INFO)
   ══════════════════════════════════════════════════════════════════ */

.contact-sidebar {
    position: sticky;
    top: 100px;
}

.contact-sidebar__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-lg);
}

.contact-map-section {
    margin-block-start: var(--space-3xl);
    max-width: 800px;
}

.contact-map-section__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-lg);
}

.contact-map {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    aspect-ratio: 16 / 9;
}

.contact-map iframe {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-block-end: var(--space-2xl);
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border-inline-start: 3px solid var(--color-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.contact-info-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.contact-info-card__icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.5rem;
}

.contact-info-card__content {
    flex: 1;
}

.contact-info-card__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-xs);
}

.contact-info-card__value {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a.contact-info-card__value:hover {
    color: var(--color-primary);
}

.contact-social {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.contact-social__title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-secondary);
    margin-block-end: var(--space-lg);
    text-align: center;
}

.contact-social__links {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
}

.contact-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.contact-social__link:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.contact-social__link--whatsapp {
    background: #25d366;
}

.contact-social__link--twitter {
    background: #000000;
}

.contact-social__link--linkedin {
    background: #0077b5;
}

.contact-social__link--instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

@media (max-width: 968px) {
    .contact-main-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .contact-sidebar {
        position: static;
    }

    .contact-form-wrapper {
        padding: var(--space-xl);
    }
}

@media (max-width: 640px) {
    .contact-intro-section {
        padding-block: var(--space-xl);
    }

    .contact-main-section {
        padding-block: var(--space-2xl);
    }

    .contact-form-wrapper {
        padding: var(--space-lg);
    }

    .contact-info-card {
        flex-direction: column;
        text-align: center;
    }

    .contact-social__links {
        flex-wrap: wrap;
    }
}