/* ==========================================================================
   TECHNICON ENTERPRISES — Premium EPC / Construction Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette */
    --te-navy: #0B1D33;
    --te-navy-mid: #132D4A;
    --te-gold: #C8922A;
    --te-gold-light: #E5AD4A;
    --te-slate: #64748B;
    --te-off-white: #F7F9FC;
    --te-white: #FFFFFF;

    /* Semantic aliases */
    --te-navy-light: var(--te-navy-mid);
    --te-light: var(--te-off-white);
    --te-border: rgba(255, 255, 255, 0.08);
    --te-border-dark: rgba(11, 29, 51, 0.1);
    --te-text: #1E293B;
    --te-text-muted: var(--te-slate);
    --te-text-inverse: rgba(255, 255, 255, 0.85);
    --te-text-inverse-muted: rgba(255, 255, 255, 0.65);

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

    /* Spacing scale */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-section: clamp(3.5rem, 6vw, 5rem);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 100px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(11, 29, 51, 0.06);
    --shadow-md: 0 4px 24px rgba(11, 29, 51, 0.08);
    --shadow-lg: 0 12px 40px rgba(11, 29, 51, 0.14);
    --shadow-gold: 0 8px 28px rgba(200, 146, 42, 0.32);
    --shadow-glass: 0 4px 30px rgba(11, 29, 51, 0.12);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 0.2s;
    --duration-base: 0.35s;
    --duration-slow: 0.6s;

    /* Layout */
    --header-height: 72px;
    --content-max: 720px;
    --prose-max: 68ch;
    --container-padding: clamp(1rem, 3vw, 1.5rem);

    /* Glass */
    --glass-bg: rgba(11, 29, 51, 0.72);
    --glass-bg-scrolled: rgba(11, 29, 51, 0.92);
    --glass-blur: 16px;
}

/* --------------------------------------------------------------------------
   2. Base & Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--te-text);
    background-color: var(--te-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    line-height: 1.2;
}

p {
    margin-top: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .logo-marquee__track {
        animation: none !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. Typography Utilities
   -------------------------------------------------------------------------- */
.text-display {
    font-family: var(--font-display);
}

.text-gold {
    color: var(--te-gold);
}

.text-navy {
    color: var(--te-navy);
}

.text-slate {
    color: var(--te-slate);
}

/* --------------------------------------------------------------------------
   4. Premium Sticky Header (Glass)
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--header-height);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--te-border);
    transition: background var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.site-header.is-scrolled {
    background: var(--glass-bg-scrolled);
    box-shadow: var(--shadow-glass);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.site-header .navbar {
    padding: 0;
    height: var(--header-height);
}

.site-header .container {
    height: 100%;
}

.site-header .navbar-collapse {
    align-items: center;
}

/* Below the navbar-expand-xl breakpoint the menu opens as a stacked dropdown
   panel rather than a horizontal bar. It previously had no background of its
   own and relied on the thin header's translucent glass blur, which reads
   fine for an 84px bar but let page content behind it show through once the
   panel grew tall enough to hold nine stacked items - the menu text and the
   hero text behind it visually overlapped. .site-header and .navbar both
   have a fixed height (they're not meant to grow), and the collapse also
   sits inside .container's side padding, so simply giving it a background
   left gaps at the viewport edges. Detaching it as a fixed full-width panel
   anchored just below the header sidesteps all of that in one go and gives
   every collapsed width (iPad, tablet/laptop 992-1199px, phones) a solid,
   readable dropdown. */
@media (max-width: 1199.98px) {
    .navbar-collapse {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--header-height));
        overflow-y: auto;
        background: var(--te-navy);
        box-shadow: var(--shadow-lg);
        padding: 0.5rem 1.25rem 1.25rem;
        margin: 0;
    }

    .site-header.is-scrolled .navbar-collapse {
        top: calc(var(--header-height) - 10px);
    }

    .navbar-collapse .navbar-nav {
        gap: 0.15rem;
    }

    .navbar-collapse .nav-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .navbar-collapse .nav-link {
        padding: 0.75rem 0.25rem !important;
    }
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    max-width: min(100%, 520px);
    text-decoration: none;
    color: var(--te-white) !important;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.navbar-brand:hover {
    opacity: 0.92;
    color: var(--te-white) !important;
}

.brand-logo {
    height: 50px;
    max-width: 180px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-mark {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--te-gold) 0%, var(--te-gold-light) 100%);
    color: var(--te-navy);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    box-shadow: 0 2px 12px rgba(200, 146, 42, 0.25);
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.15;
    min-width: 0;
}

.brand-text .brand-name {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-text .brand-tagline {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--te-text-inverse-muted);
    letter-spacing: 0.05em;
    margin-top: 0.15rem;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .brand-logo {
        height: 40px;
        max-width: 130px;
    }

    .brand-text .brand-name {
        font-size: 0.72rem;
    }

    .brand-text .brand-tagline {
        font-size: 0.58rem;
    }
}

@media (max-width: 575.98px) {
    .brand-logo {
        height: 36px;
        max-width: 110px;
    }

    .brand-text .brand-name {
        font-size: 0.65rem;
        letter-spacing: 0.02em;
    }

    .brand-text .brand-tagline {
        display: none;
    }
}

.site-header .nav-link {
    color: var(--te-text-inverse) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 1rem !important;
    position: relative;
    transition: color var(--duration-fast) var(--ease-out);
}

.site-header .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.25rem;
    height: 2px;
    background: var(--te-gold);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--duration-base) var(--ease-out);
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--te-gold-light) !important;
}

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3);
    padding: 0.4rem 0.6rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(200, 146, 42, 0.25);
}

.navbar-toggler-icon {
    filter: invert(1);
}

/* --------------------------------------------------------------------------
   5. Reveal Animations (Intersection Observer)
   -------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

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

.reveal--left {
    transform: translateX(-28px);
}

.reveal--left.is-visible {
    transform: translateX(0);
}

.reveal--right {
    transform: translateX(28px);
}

.reveal--right.is-visible {
    transform: translateX(0);
}

.reveal--scale {
    transform: scale(0.96);
}

.reveal--scale.is-visible {
    transform: scale(1);
}

.reveal--fade {
    transform: none;
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   6. Premium Hero (Full Viewport)
   -------------------------------------------------------------------------- */
.premium-hero,
.home-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    background: var(--te-navy);
    color: var(--te-white);
    overflow: hidden;
}

.premium-hero__media,
.home-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.premium-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.premium-hero__overlay,
.home-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(11, 29, 51, 0.94) 0%,
        rgba(11, 29, 51, 0.72) 45%,
        rgba(19, 45, 74, 0.55) 100%
    );
    z-index: 1;
}

.premium-hero__mesh {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.4;
    background-image:
        radial-gradient(ellipse 80% 60% at 85% 20%, rgba(200, 146, 42, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 10% 80%, rgba(229, 173, 74, 0.1) 0%, transparent 55%),
        linear-gradient(180deg, transparent 60%, rgba(11, 29, 51, 0.3) 100%);
}

.premium-hero__content,
.home-hero-content {
    position: relative;
    z-index: 3;
    max-width: 780px;
}

.premium-hero__tag,
.home-hero-tag {
    display: inline-block;
    background: rgba(200, 146, 42, 0.12);
    border: 1px solid rgba(200, 146, 42, 0.35);
    color: var(--te-gold-light);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.4rem 1.1rem;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-lg);
}

.premium-hero h1,
.home-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.01em;
}

.premium-hero .lead,
.home-hero .lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--te-text-inverse);
    margin-bottom: var(--space-xl);
    max-width: 600px;
    line-height: 1.7;
}

.premium-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.home-hero-bg {
    opacity: 0.4;
}

/* --------------------------------------------------------------------------
   7. Inner Page Hero
   -------------------------------------------------------------------------- */
.page-hero {
    position: relative;
    background: var(--te-navy);
    color: var(--te-white);
    padding: clamp(3.5rem, 8vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
    overflow: hidden;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 100% 0%, rgba(200, 146, 42, 0.12) 0%, transparent 55%),
        linear-gradient(180deg, var(--te-navy-mid) 0%, var(--te-navy) 100%);
    pointer-events: none;
}

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

.page-hero-eyebrow {
    color: var(--te-gold-light);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.page-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.25rem);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    line-height: 1.15;
}

.page-hero-subtitle {
    color: var(--te-text-inverse-muted);
    font-size: clamp(1rem, 2vw, 1.15rem);
    margin: 0;
    max-width: 560px;
}

/* --------------------------------------------------------------------------
   8. Section System
   -------------------------------------------------------------------------- */
.section-block {
    padding: var(--space-section) 0;
}

.section-block--dark {
    background: var(--te-navy);
    color: var(--te-white);
}

.section-block--dark .section-title {
    color: var(--te-white);
}

.section-block--dark .section-subtitle {
    color: var(--te-text-inverse-muted);
}

.section-block--muted,
.section-block.alt-bg {
    background: var(--te-off-white);
}

.section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-2xl);
}

.section-header--left {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

.section-header--right {
    text-align: right;
    margin-left: auto;
    margin-right: 0;
}

.section-eyebrow {
    color: var(--te-gold);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--te-navy);
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.section-subtitle {
    color: var(--te-slate);
    font-size: clamp(1rem, 2vw, 1.1rem);
    margin: 0;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   9. Premium Stats Bar
   -------------------------------------------------------------------------- */
.stats-bar {
    position: relative;
    background: var(--te-navy-mid);
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--te-border);
    border-bottom: 1px solid var(--te-border);
}

.stats-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--te-gold), transparent);
    opacity: 0.6;
}

.stat-card,
.stat-item {
    text-align: center;
    color: var(--te-white);
    padding: var(--space-md);
}

.stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--te-border);
    border-radius: var(--radius-md);
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 146, 42, 0.3);
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--te-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-value[data-count] {
    display: inline-block;
    min-width: 2ch;
}

.stat-value[data-count]::after {
    content: attr(data-suffix);
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--te-text-inverse-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--space-sm);
}

/* --------------------------------------------------------------------------
   10. Service Cards — .premium-card
   -------------------------------------------------------------------------- */
.premium-card,
.content-card {
    position: relative;
    background: var(--te-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.premium-card::after,
.content-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--te-gold), var(--te-gold-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
}

.premium-card:hover,
.content-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

.premium-card:hover::after,
.content-card:hover::after {
    transform: scaleX(1);
}

.premium-card__media,
.content-card-img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    transition: transform var(--duration-slow) var(--ease-out);
}

.premium-card__media-wrap {
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.premium-card:hover .premium-card__media,
.content-card:hover .content-card-img {
    transform: scale(1.06);
}

.content-card-img-placeholder,
.premium-card__placeholder {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--te-navy-mid), var(--te-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 2.5rem;
}

.premium-card__body,
.content-card-body {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.premium-card__body h3,
.content-card-body h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--te-navy);
    margin-bottom: var(--space-xs);
    transition: color var(--duration-fast) var(--ease-out);
}

.premium-card:hover .premium-card__body h3,
.content-card:hover .content-card-body h3 {
    color: var(--te-gold);
}

.premium-card__body p,
.content-card-body p {
    color: var(--te-slate);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

.premium-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(200, 146, 42, 0.1);
    color: var(--te-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--space-md);
}

.card-badge {
    display: inline-block;
    background: rgba(200, 146, 42, 0.1);
    color: var(--te-gold);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}

/* --------------------------------------------------------------------------
   11. Project Cards
   -------------------------------------------------------------------------- */
.project-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: block;
    text-decoration: none;
    color: var(--te-white);
    box-shadow: var(--shadow-md);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: var(--te-white);
}

.project-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.project-card:hover .project-card__image {
    transform: scale(1.05);
}

.project-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 30%,
        rgba(11, 29, 51, 0.55) 70%,
        rgba(11, 29, 51, 0.92) 100%
    );
    transition: background var(--duration-base) var(--ease-out);
}

.project-card:hover .project-card__overlay {
    background: linear-gradient(
        180deg,
        rgba(11, 29, 51, 0.15) 0%,
        rgba(11, 29, 51, 0.65) 50%,
        rgba(11, 29, 51, 0.95) 100%
    );
}

.project-card__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-lg);
    z-index: 1;
    transform: translateY(4px);
    transition: transform var(--duration-base) var(--ease-out);
}

.project-card:hover .project-card__content {
    transform: translateY(0);
}

.project-card__category {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--te-gold-light);
    margin-bottom: var(--space-xs);
}

.project-card__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    line-height: 1.25;
}

.project-card__meta {
    font-size: 0.85rem;
    color: var(--te-text-inverse-muted);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
}

/* --------------------------------------------------------------------------
   12. Why Choose Us — Feature Grid
   -------------------------------------------------------------------------- */
.feature-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

.feature-grid .feature-item {
    flex: 1 1 260px;
    max-width: 300px;
}

.feature-item {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    background: var(--te-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--te-border-dark);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200, 146, 42, 0.25);
}

.section-block--dark .feature-item {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--te-border);
}

.feature-item__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(200, 146, 42, 0.15), rgba(229, 173, 74, 0.08));
    border: 2px solid rgba(200, 146, 42, 0.25);
    color: var(--te-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: transform var(--duration-base) var(--ease-spring),
                background var(--duration-base) var(--ease-out);
}

.feature-item:hover .feature-item__icon {
    transform: scale(1.08);
    background: linear-gradient(135deg, var(--te-gold), var(--te-gold-light));
    color: var(--te-navy);
}

.feature-item__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--te-navy);
    margin-bottom: var(--space-sm);
}

.section-block--dark .feature-item__title {
    color: var(--te-white);
}

.feature-item__text {
    font-size: 0.9rem;
    color: var(--te-slate);
    margin: 0;
    line-height: 1.65;
}

.section-block--dark .feature-item__text {
    color: var(--te-text-inverse-muted);
}

/* --------------------------------------------------------------------------
   13. Client Logo Marquee
   -------------------------------------------------------------------------- */
.logo-marquee {
    position: relative;
    overflow: hidden;
    padding: var(--space-xl) 0;
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.logo-marquee__track {
    display: flex;
    align-items: center;
    gap: var(--space-3xl);
    width: max-content;
    animation: logo-marquee-scroll 40s linear infinite;
}

.logo-marquee__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.55;
    filter: grayscale(100%);
    transition: opacity var(--duration-base) var(--ease-out),
                filter var(--duration-base) var(--ease-out);
}

.logo-marquee__item:hover {
    opacity: 1;
    filter: grayscale(0%);
}

.logo-marquee__item img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
}

@keyframes logo-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* --------------------------------------------------------------------------
   14. Timeline — .timeline-premium
   -------------------------------------------------------------------------- */
.timeline-premium {
    position: relative;
    display: flex;
    gap: 0;
    padding: var(--space-xl) 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--te-gold) var(--te-off-white);
}

.timeline-premium::before {
    content: '';
    position: absolute;
    top: calc(var(--space-xl) + 20px);
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--te-gold), rgba(200, 146, 42, 0.2));
}

.timeline-premium__item,
.timeline-premium-item {
    position: relative;
    flex: 1 0 220px;
    min-width: 200px;
    padding: 3rem var(--space-md) 0;
    scroll-snap-align: start;
    text-align: center;
}

.timeline-premium-item::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--te-gold);
    border: 3px solid var(--te-white);
    box-shadow: 0 0 0 2px var(--te-gold);
    z-index: 1;
}

.timeline-premium__marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--te-gold);
    border: 3px solid var(--te-white);
    box-shadow: 0 0 0 2px var(--te-gold);
    margin: 14px auto var(--space-lg);
    position: relative;
    z-index: 1;
}

.timeline-premium__year,
.timeline-premium-year {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--te-gold);
    margin-bottom: var(--space-xs);
}

.timeline-premium__title,
.timeline-premium-title {
    font-weight: 700;
    color: var(--te-navy);
    font-family: var(--font-display);
    font-size: 1.02rem;
    margin-bottom: var(--space-xs);
    line-height: 1.3;
}

.timeline-premium__text,
.timeline-premium-desc {
    font-size: 0.85rem;
    color: var(--te-slate);
    margin: 0;
    line-height: 1.6;
}

/* Legacy vertical timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid rgba(11, 29, 51, 0.1);
}

.timeline-item {
    position: relative;
    margin-bottom: var(--space-xl);
    padding-left: var(--space-lg);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -2.45rem;
    top: 0.35rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--te-gold);
    border: 2px solid var(--te-white);
    box-shadow: 0 0 0 2px var(--te-gold);
}

.timeline-year {
    font-weight: 700;
    color: var(--te-gold);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
}

.timeline-title {
    font-weight: 700;
    color: var(--te-navy);
}

/* --------------------------------------------------------------------------
   15. Gallery Mosaic
   -------------------------------------------------------------------------- */
.gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: var(--space-md);
}

.gallery-mosaic__item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
}

.gallery-mosaic__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-mosaic__item:hover img {
    transform: scale(1.06);
}

.gallery-mosaic__item--wide {
    grid-column: span 2;
}

.gallery-mosaic__item--tall {
    grid-row: span 2;
}

.gallery-mosaic__item--hero {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-mosaic__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-xl) var(--space-md) var(--space-md);
    background: linear-gradient(transparent, rgba(11, 29, 51, 0.85));
    color: var(--te-white);
    font-size: 0.85rem;
    font-weight: 500;
    transform: translateY(100%);
    transition: transform var(--duration-base) var(--ease-out);
}

.gallery-mosaic__item:hover .gallery-mosaic__caption {
    transform: translateY(0);
}

/* Legacy gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-md);
}

.gallery-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(11, 29, 51, 0.8));
    color: var(--te-white);
    padding: var(--space-xl) var(--space-md) var(--space-sm);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   16. Certificate Strip
   -------------------------------------------------------------------------- */
.cert-strip {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    padding: var(--space-md) 0 var(--space-lg);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.cert-strip__card,
.cert-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    background: var(--te-white);
    border: 1px solid var(--te-border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    text-align: center;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.cert-strip__card:hover,
.cert-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200, 146, 42, 0.3);
}

.cert-strip__card img,
.cert-card img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.cert-strip__body {
    padding: var(--space-md);
}

.cert-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
}

.cert-grid .cert-card {
    flex: 0 1 260px;
    max-width: 280px;
}

/* --------------------------------------------------------------------------
   17. Testimonials
   -------------------------------------------------------------------------- */
.testimonial-premium,
.testimonial-card {
    position: relative;
    background: var(--te-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    height: 100%;
    border: 1px solid var(--te-border-dark);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}

.testimonial-premium:hover,
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.testimonial-premium__quote,
.testimonial-premium::before {
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 1;
    color: var(--te-gold);
    opacity: 0.25;
    position: absolute;
    top: var(--space-md);
    left: var(--space-lg);
    pointer-events: none;
}

.testimonial-premium blockquote,
.testimonial-card blockquote {
    font-style: italic;
    color: var(--te-slate);
    margin: var(--space-lg) 0 var(--space-md);
    border: none;
    padding: 0;
    font-size: 1rem;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.testimonial-premium__author,
.testimonial-author {
    font-weight: 700;
    color: var(--te-navy);
    font-size: 0.9rem;
}

.testimonial-premium__role,
.testimonial-role {
    font-size: 0.8rem;
    color: var(--te-slate);
    margin-top: 0.15rem;
}

/* --------------------------------------------------------------------------
   18. CTA Bands
   -------------------------------------------------------------------------- */
.cta-premium,
.cta-block {
    position: relative;
    background: linear-gradient(135deg, var(--te-navy) 0%, var(--te-navy-mid) 60%, #1a3d5c 100%);
    color: var(--te-white);
    padding: var(--space-section) 0;
    text-align: center;
    overflow: hidden;
}

.cta-premium::before,
.cta-block::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 80% at 0% 50%, rgba(200, 146, 42, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 100% 50%, rgba(229, 173, 74, 0.08) 0%, transparent 55%);
    pointer-events: none;
}

.cta-premium .container,
.cta-block .container {
    position: relative;
    z-index: 1;
}

.cta-premium h2,
.cta-block h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.cta-premium p,
.cta-block p,
.cta-premium .cms-html,
.cta-block .cms-html {
    color: var(--te-text-inverse-muted);
    max-width: 560px;
    margin: 0 auto var(--space-xl);
    font-size: 1.05rem;
    line-height: 1.65;
}

.cta-premium--inline {
    padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-xl);
    text-align: left;
}

.cta-premium--inline .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: 100%;
    padding: 0;
}

.cta-premium--inline h2 {
    margin-bottom: var(--space-xs);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.cta-premium--inline p {
    margin: 0;
    max-width: none;
}

.cta-premium__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

.cta-premium--inline .cta-premium__actions {
    justify-content: flex-end;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   19. Premium Footer
   -------------------------------------------------------------------------- */
.site-footer-premium,
.site-footer {
    background: var(--te-navy);
    color: var(--te-text-inverse-muted);
}

.site-footer-premium {
    border-top: 3px solid var(--te-gold);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
    max-width: min(100%, 520px);
    color: var(--te-white);
}

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    max-width: 360px;
    margin-top: var(--space-md);
}

.footer-heading {
    color: var(--te-white);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-md);
}

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

.footer-links li {
    margin-bottom: var(--space-xs);
}

.footer-links a {
    color: var(--te-text-inverse-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--duration-fast) var(--ease-out),
                padding-left var(--duration-fast) var(--ease-out);
}

.footer-links a:hover {
    color: var(--te-gold-light);
    padding-left: 4px;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
    max-width: min(100%, 520px);
    margin-top: var(--space-lg);
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--te-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--te-text-inverse-muted);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.footer-social a:hover {
    background: var(--te-gold);
    border-color: var(--te-gold);
    color: var(--te-navy);
    transform: translateY(-2px);
}

.footer-cta {
    color: var(--te-gold);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--duration-fast) var(--ease-out);
}

.footer-cta:hover {
    color: var(--te-gold-light);
}

.footer-bottom {
    border-top: 1px solid var(--te-border);
    padding: var(--space-lg) 0;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
}

.site-footer-premium .footer-columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--space-2xl);
    padding: var(--space-3xl) 0;
}

/* --------------------------------------------------------------------------
   20. Page Content (Prose)
   -------------------------------------------------------------------------- */
.page-content {
    padding: var(--space-3xl) 0;
}

.page-content > .container {
    max-width: 1140px;
}

.page-content .cms-html {
    max-width: var(--prose-max);
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--te-text);
}

.page-content .cms-html h2,
.page-content .cms-html h3,
.page-content .cms-html h4 {
    font-family: var(--font-display);
    color: var(--te-navy);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.page-content .cms-html h2 {
    font-size: 1.75rem;
}

.page-content .cms-html h3 {
    font-size: 1.35rem;
}

.page-content .cms-html p {
    margin-bottom: var(--space-md);
}

.page-content .cms-html a {
    color: var(--te-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--duration-fast) var(--ease-out);
}

.page-content .cms-html a:hover {
    color: var(--te-gold-light);
}

.page-content .cms-html ul,
.page-content .cms-html ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.page-content .cms-html li {
    margin-bottom: var(--space-xs);
}

.page-content .cms-html blockquote {
    border-left: 4px solid var(--te-gold);
    padding-left: var(--space-lg);
    margin: var(--space-xl) 0;
    font-style: italic;
    color: var(--te-slate);
}

/* Detail pages */
.detail-hero-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.detail-meta {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    padding: var(--space-lg) 0;
    border-top: 1px solid rgba(11, 29, 51, 0.1);
    border-bottom: 1px solid rgba(11, 29, 51, 0.1);
    margin-bottom: var(--space-xl);
    color: var(--te-slate);
    font-size: 0.9rem;
}

.detail-meta strong {
    color: var(--te-navy);
}

.about-block {
    margin-bottom: var(--space-2xl);
}

.about-block h2 {
    font-family: var(--font-display);
    color: var(--te-navy);
    margin-bottom: var(--space-md);
}

.ceo-card {
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
    background: var(--te-off-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--te-border-dark);
}

.ceo-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 4px solid var(--te-gold);
    box-shadow: var(--shadow-sm);
}

/* --------------------------------------------------------------------------
   21. Buttons
   -------------------------------------------------------------------------- */
.btn-gold,
.btn-te-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: linear-gradient(135deg, var(--te-gold) 0%, var(--te-gold-light) 100%);
    color: var(--te-navy);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn-gold:hover,
.btn-te-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    color: var(--te-navy);
}

.btn-gold:active,
.btn-te-primary:active {
    transform: translateY(0);
}

.btn-gold-outline,
.btn-te-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--te-white);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    padding: calc(0.8rem - 2px) calc(2rem - 2px);
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color var(--duration-fast) var(--ease-out),
                background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn-gold-outline:hover,
.btn-te-outline:hover {
    border-color: var(--te-gold);
    background: rgba(200, 146, 42, 0.12);
    color: var(--te-white);
}

.btn-gold-outline--dark {
    border-color: rgba(11, 29, 51, 0.25);
    color: var(--te-navy);
}

.btn-gold-outline--dark:hover {
    border-color: var(--te-gold);
    background: rgba(200, 146, 42, 0.08);
    color: var(--te-navy);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: transparent;
    border: none;
    color: var(--te-gold);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn-ghost:hover {
    color: var(--te-gold-light);
    transform: translateX(3px);
}

.btn-ghost--light {
    color: var(--te-white);
}

.btn-ghost--light:hover {
    color: var(--te-gold-light);
}

/* --------------------------------------------------------------------------
   22. Forms — .form-premium
   -------------------------------------------------------------------------- */
.form-premium .form-label,
.contact-form-panel .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--te-navy);
    margin-bottom: var(--space-xs);
}

.form-premium .form-control,
.form-premium .form-select,
.contact-form-panel .form-control,
.contact-form-panel .form-select {
    border-radius: var(--radius-sm);
    border: 1px solid #CBD5E1;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: var(--te-text);
    background: var(--te-white);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.form-premium .form-control:focus,
.form-premium .form-select:focus,
.contact-form-panel .form-control:focus,
.contact-form-panel .form-select:focus {
    border-color: var(--te-gold);
    box-shadow: 0 0 0 3px rgba(200, 146, 42, 0.15);
    outline: none;
}

.form-premium .form-control::placeholder {
    color: #94A3B8;
}

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

.contact-form-panel {
    background: var(--te-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
    border: 1px solid var(--te-border-dark);
}

/* --------------------------------------------------------------------------
   23. Equipment Table (Premium)
   -------------------------------------------------------------------------- */
.equipment-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--te-border-dark);
}

.equipment-table thead {
    background: var(--te-navy);
}

.equipment-table th {
    color: var(--te-white);
    padding: 1rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: left;
    border-bottom: 2px solid var(--te-gold);
}

.equipment-table td {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid rgba(11, 29, 51, 0.06);
    vertical-align: middle;
    font-size: 0.92rem;
    color: var(--te-text);
    background: var(--te-white);
    transition: background var(--duration-fast) var(--ease-out);
}

.equipment-table tbody tr:last-child td {
    border-bottom: none;
}

.equipment-table tbody tr:hover td {
    background: var(--te-off-white);
}

.equipment-table td:first-child {
    font-weight: 600;
    color: var(--te-navy);
}

/* --------------------------------------------------------------------------
   24. Job Cards
   -------------------------------------------------------------------------- */
.job-card {
    background: var(--te-white);
    border: 1px solid var(--te-border-dark);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.job-card:hover {
    border-color: rgba(200, 146, 42, 0.4);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.job-card h3 {
    color: var(--te-navy);
}

.job-meta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    color: var(--te-slate);
    font-size: 0.875rem;
    margin-top: var(--space-xs);
}

.job-meta span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.job-meta i {
    color: var(--te-gold);
}

/* --------------------------------------------------------------------------
   25. Contact Cards
   -------------------------------------------------------------------------- */
.contact-card,
.contact-office-card {
    background: var(--te-off-white);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: 2.75rem !important;
    border: 1px solid var(--te-border-dark);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.contact-office-card:last-child {
    margin-bottom: 0 !important;
}

.contact-card:hover,
.contact-office-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.contact-office-card.primary,
.contact-card--primary {
    border-left: 4px solid var(--te-gold);
    background: var(--te-white);
    box-shadow: var(--shadow-sm);
}

.contact-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(200, 146, 42, 0.1);
    color: var(--te-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: var(--space-md);
}

.contact-card h3,
.contact-office-card h3 {
    color: var(--te-navy);
    margin-bottom: var(--space-sm);
}

.contact-card a,
.contact-office-card a {
    color: var(--te-navy);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.contact-card a:hover,
.contact-office-card a:hover {
    color: var(--te-gold);
}

.contact-office-card i,
.contact-card i {
    color: var(--te-gold);
}

/* --------------------------------------------------------------------------
   26. Empty States
   -------------------------------------------------------------------------- */
.empty-state-premium,
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--te-slate);
}

.empty-state-premium {
    border: 1px dashed rgba(11, 29, 51, 0.12);
    border-radius: var(--radius-lg);
    background: var(--te-off-white);
}

.empty-state-premium i,
.empty-state i {
    font-size: 2.5rem;
    color: var(--te-slate);
    opacity: 0.35;
    margin-bottom: var(--space-md);
}

.empty-state-premium__title {
    font-weight: 600;
    color: var(--te-navy);
    margin-bottom: var(--space-xs);
}

.empty-state-premium__text {
    font-size: 0.9rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   27. Responsive Breakpoints
   -------------------------------------------------------------------------- */

/* Large tablets / small desktops — 992px */
@media (max-width: 992px) {
    .site-footer-premium .footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }

    .gallery-mosaic {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 180px;
    }

    .gallery-mosaic__item--hero {
        grid-column: span 2;
        grid-row: span 1;
    }

    .cta-premium--inline .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-premium--inline .cta-premium__actions {
        justify-content: flex-start;
        width: 100%;
    }

    .timeline-premium {
        flex-direction: column;
        overflow-x: visible;
        padding-left: var(--space-lg);
    }

    .timeline-premium::before {
        top: 0;
        bottom: 0;
        left: calc(var(--space-lg) + 6px);
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--te-gold), rgba(200, 146, 42, 0.2));
    }

    .timeline-premium__item {
        flex: none;
        min-width: auto;
        text-align: left;
        padding: 0 0 var(--space-xl) var(--space-xl);
    }

    .timeline-premium__marker {
        position: absolute;
        left: calc(-1 * var(--space-lg) - 1px);
        margin: 0;
    }
}

/* Tablets — 768px */
@media (max-width: 768px) {
    :root {
        --header-height: 64px;
    }

    .site-header .nav-link::after {
        display: none;
    }

    .premium-hero,
    .home-hero {
        min-height: 85vh;
        min-height: 85dvh;
    }

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

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

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

    .gallery-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 160px;
    }

    .gallery-mosaic__item--wide,
    .gallery-mosaic__item--hero {
        grid-column: span 2;
        grid-row: span 1;
    }

    .gallery-mosaic__item--tall {
        grid-row: span 1;
    }

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

    .job-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .equipment-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

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

/* Mobile — 576px */
@media (max-width: 576px) {
    .premium-hero h1,
    .home-hero h1 {
        font-size: 2rem;
    }

    .premium-hero__actions,
    .home-hero .d-flex {
        flex-direction: column;
        width: 100%;
    }

    .btn-gold,
    .btn-te-primary,
    .btn-gold-outline,
    .btn-te-outline {
        width: 100%;
        justify-content: center;
    }

    .stat-card,
    .stat-item {
        padding: var(--space-sm);
    }

    .stat-value {
        font-size: 1.75rem;
    }

    .gallery-mosaic {
        grid-template-columns: 1fr;
        grid-auto-rows: 200px;
    }

    .gallery-mosaic__item--wide,
    .gallery-mosaic__item--tall,
    .gallery-mosaic__item--hero {
        grid-column: span 1;
        grid-row: span 1;
    }

    .cert-strip__card,
    .cert-card {
        flex: 0 0 180px;
    }

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

    .page-content {
        padding: var(--space-2xl) 0;
    }

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

    .cta-premium,
    .cta-block {
        padding: var(--space-2xl) 0;
    }
}

/* ==========================================================================
   29. Corporate Simplification Override
   Restores a compact, traditional EPC/corporate look: white/light section
   backgrounds, smaller headers, tighter spacing, plain cards, no full-bleed
   SaaS-style hero. Appended (rather than edited in place) so it can be
   removed cleanly to restore the premium look if ever needed.
   ========================================================================== */

:root {
    --space-section: clamp(2.5rem, 4.5vw, 3.5rem);
    --banner-padding: clamp(2.5rem, 5vw, 3.5rem);
}

/* ---- Home hero: medium height (~50-60vh), deep navy, engineering-photo banner ---- */
.premium-hero {
    min-height: clamp(420px, 56vh, 640px);
    display: flex;
    align-items: center;
    background: var(--te-navy);
    color: var(--te-white);
    padding: var(--banner-padding) 0;
}

.premium-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.32;
    z-index: 0;
}

.premium-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        115deg,
        rgba(11, 29, 51, 0.96) 0%,
        rgba(11, 29, 51, 0.86) 45%,
        rgba(19, 45, 74, 0.75) 100%
    );
}

.premium-hero-mesh {
    display: none;
}

.premium-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.premium-hero-content {
    position: relative;
    z-index: 3;
    max-width: 660px;
}

.premium-hero-eyebrow {
    display: inline-block;
    color: var(--te-gold-light);
    background: rgba(200, 146, 42, 0.12);
    border: 1px solid rgba(200, 146, 42, 0.35);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.35rem 0.95rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
}

.premium-hero-title,
.premium-hero h1 {
    color: var(--te-white);
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    margin-bottom: 0.85rem;
    line-height: 1.18;
}

.premium-hero-lead {
    color: var(--te-text-inverse);
    font-size: 1.02rem;
    max-width: 600px;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.premium-hero-actions {
    gap: 0.85rem;
}

/* ---- Inner-page headers: medium, deep navy, consistent with hero banner ---- */
.page-hero {
    background: var(--te-navy);
    color: var(--te-white);
    padding: var(--banner-padding) 0 clamp(1.75rem, 3.5vw, 2.25rem);
}

.page-hero-eyebrow {
    color: var(--te-gold-light);
}

.page-hero-title {
    color: var(--te-white);
    font-size: clamp(1.65rem, 3.2vw, 2.35rem);
}

.page-hero-subtitle {
    color: var(--te-text-inverse);
}

/* ---- Dark alternating sections -> light, corporate ---- */
.section-block--dark {
    background: var(--te-off-white);
    color: var(--te-text);
}

.section-block--dark .section-title {
    color: var(--te-navy);
}

.section-block--dark .section-subtitle,
.section-block--dark .section-eyebrow {
    color: var(--te-slate);
}

.section-block--dark .feature-item {
    background: var(--te-white);
    border-color: var(--te-border-dark);
}

.section-block--dark .feature-item__title,
.section-block--dark .feature-title {
    color: var(--te-navy);
}

.section-block--dark .feature-item__text,
.section-block--dark .feature-desc {
    color: var(--te-slate);
}

/* ---- Stats: compact trust bar, not a giant statistics section ---- */
.stats-section {
    padding: clamp(1.5rem, 3vw, 2rem) 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.stat-card {
    background: var(--te-white);
    border: 1px solid var(--te-border-dark);
    padding: 0.85rem 0.5rem;
}

.stat-card:hover {
    transform: none;
}

.stat-value {
    font-size: clamp(1.3rem, 2vw, 1.65rem);
    color: var(--te-navy);
}

.stat-label {
    color: var(--te-slate);
    font-size: 0.7rem;
}

/* ---- Service / generic cards: flat, bordered, corporate ---- */
.premium-card {
    box-shadow: none;
    border: 1px solid var(--te-border-dark);
}

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

.premium-card::after {
    height: 2px;
}

.premium-card-media {
    aspect-ratio: 16 / 10;
    width: 100%;
    display: block;
    object-fit: cover;
}

.premium-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.premium-card-media--icon {
    aspect-ratio: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(11, 29, 51, 0.06);
    color: var(--te-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin: 1.15rem 1.15rem 0;
}

.premium-card-body {
    padding: 1rem 1.15rem;
}

.premium-card-body h3 {
    font-size: 1.02rem;
    color: var(--te-navy);
}

.premium-card:hover .premium-card-body h3 {
    color: var(--te-gold);
}

/* ---- Project cards: plain image-on-top card, caption below (not overlaid) ---- */
.project-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    background: var(--te-white);
    border: 1px solid var(--te-border-dark);
    box-shadow: none;
    color: inherit;
}

.project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200, 146, 42, 0.35);
    color: inherit;
}

.project-card-media {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.project-card-media,
.premium-card-media,
.cert-card-media {
    position: relative;
}

.project-card-media picture,
.premium-card-media picture,
.cert-card-media picture {
    display: block;
    width: 100%;
    height: 100%;
}

.project-card-media img,
.project-card-media .responsive-image,
.project-card-media picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-card-media img {
    transition: transform var(--duration-slow) var(--ease-out);
}

.project-card:hover .project-card-media img {
    transform: scale(1.04);
}

.project-card-overlay {
    position: static;
    background: none;
    padding: 0.9rem 1rem 1.1rem;
    flex: 1;
}

.project-card-overlay h3 {
    font-family: var(--font-display);
    color: var(--te-navy);
    font-size: 0.98rem;
    font-weight: 700;
    margin: 0.35rem 0 0.4rem;
    line-height: 1.3;
}

.project-card-overlay p,
.project-card-meta {
    color: var(--te-slate);
    font-size: 0.82rem;
    margin: 0;
}

.project-card-excerpt {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--te-slate);
}

/* ---- CTA banners: light bordered banner, not full-bleed dark image ---- */
.cta-premium,
.cta-block {
    background: var(--te-off-white);
    color: var(--te-text);
    padding: clamp(1.75rem, 4vw, 2.5rem) 0;
}

.cta-premium::before,
.cta-block::before {
    display: none;
}

.cta-premium h2,
.cta-block h2 {
    color: var(--te-navy);
}

.cta-premium p,
.cta-block p,
.cta-premium .cms-html,
.cta-block .cms-html {
    color: var(--te-slate);
}

.cta-premium--inline {
    background: var(--te-white);
    border: 1px solid var(--te-border-dark);
}

/* ---- Certificate strip items (was unstyled — matches .cert-card treatment) ---- */
.cert-strip-item {
    flex: 0 0 180px;
    scroll-snap-align: start;
    text-align: center;
}

.cert-strip-item__media {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--te-border-dark);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--te-white);
    padding: 0;
    margin: 0 0 0.6rem;
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.cert-strip-item__media--clickable {
    cursor: pointer;
}

.cert-strip-item__media--clickable:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200, 146, 42, 0.35);
}

.cert-strip-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cert-strip-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--te-navy);
    line-height: 1.4;
}

/* ---- Gallery: uniform grid of plain thumbnails (was unstyled/broken) ---- */
.gallery-uniform-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

.gallery-uniform-grid .gallery-uniform-card {
    flex: 1 1 180px;
    max-width: 230px;
}

.gallery-uniform-card {
    display: block;
    padding: 0;
    margin: 0;
    border: 1px solid var(--te-border-dark);
    border-radius: var(--radius-sm);
    background: var(--te-white);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.gallery-uniform-card:hover {
    border-color: var(--te-gold);
    box-shadow: var(--shadow-sm);
}

.gallery-uniform-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   30. Final Premium Polish Phase
   Typography scale-up, alternating section backgrounds, navbar prominence,
   stat/feature/service/project card elevation, alternating timeline,
   4-column footer. CSS + minor icon/markup additions only — no structural,
   backend, CMS, or data changes.
   ========================================================================== */

/* ---- Typography: stronger hierarchy, better readability ---- */
body {
    font-size: 1.05rem;
    line-height: 1.7;
}

.section-title {
    font-size: clamp(1.9rem, 3.8vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.section-subtitle {
    font-size: 1.05rem;
    line-height: 1.65;
}

.page-hero-title {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.premium-hero-title,
.premium-hero h1 {
    font-weight: 800;
    letter-spacing: -0.01em;
}

.cms-html p,
.page-intro,
.footer-desc {
    line-height: 1.75;
}

.premium-card-body h3,
.project-card-overlay h3,
.feature-title,
.feature-item__title {
    font-weight: 700;
}

/* ---- Alternating section backgrounds for rhythm ---- */
.section-block:nth-of-type(even):not(.section-block--dark):not(.client-logos-section) {
    background: var(--te-off-white);
}

.section-block.section-block--muted {
    background: var(--te-off-white);
}

/* ---- Navbar: more prominent, premium feel ---- */
:root {
    --header-height: 84px;
}

.brand-logo {
    max-height: 46px;
}

.navbar-brand strong,
.brand-name {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.site-header .nav-link {
    font-size: 0.92rem;
    padding: 0.6rem 1.1rem !important;
}

.site-header.is-scrolled {
    height: calc(var(--header-height) - 10px);
}

/* ---- Navbar: compact band just above the collapse breakpoint (navbar-expand-xl
   in _Layout.cshtml collapses below 1200px). Nine nav items plus the full
   company name/tagline don't comfortably fit in the 992-1199px range, so that
   range now gets the hamburger menu automatically - no custom width math
   needed there. This band only tightens spacing for 1200-1366px, the zone
   where the horizontal nav has just re-appeared and benefits from a bit more
   breathing room before it reaches the full desktop treatment at 1367px+,
   which is left completely unchanged. ---- */
@media (min-width: 1200px) and (max-width: 1366.98px) {
    :root {
        --header-height: 72px;
    }

    .navbar-brand {
        gap: 0.55rem;
    }

    .brand-logo {
        max-height: 38px;
    }

    .navbar-brand strong,
    .brand-name {
        font-size: 0.88rem;
    }

    .brand-text .brand-tagline {
        font-size: 0.58rem;
    }

    .site-header .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem 0.6rem !important;
    }
}

/* ---- Hero: subtle extra polish on button spacing ---- */
.premium-hero-actions {
    margin-top: 0.25rem;
    gap: 1rem;
}

.btn-gold,
.btn-gold-outline,
.btn-te-primary,
.btn-te-outline {
    padding: 0.85rem 1.75rem;
    border-radius: var(--radius-md);
    font-weight: 600;
}

/* ---- At a Glance: premium stat cards with icons ---- */
.stats-grid {
    gap: 1.25rem;
}

.stat-card {
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200, 146, 42, 0.35);
}

.stat-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    background: rgba(200, 146, 42, 0.1);
    color: var(--te-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.stat-value {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ---- Why Choose Us: equal-height premium feature cards ---- */
.feature-grid {
    align-items: stretch;
}

.feature-item {
    height: 100%;
    box-shadow: var(--shadow-sm);
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(200, 146, 42, 0.3);
}

/* ---- Core Services / generic premium cards: elevation + equal height ---- */
.card-grid {
    align-items: stretch;
}

.premium-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.premium-card:hover {
    border-color: rgba(200, 146, 42, 0.35);
}

.premium-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.premium-card-body h3,
.premium-card-body p,
.project-card-overlay h3,
.project-card-overlay p {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ---- Featured Projects: larger, equal-height, stronger presentation ---- */
.project-card {
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.project-card-media {
    aspect-ratio: 5 / 4;
}

.project-card-media--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--te-navy) 0%, var(--te-navy-mid) 100%);
    color: rgba(200, 146, 42, 0.55);
    font-size: 2.75rem;
}

/* ---- Certificates: hover zoom ---- */
.cert-strip-item__media img,
.cert-card img {
    transition: transform var(--duration-slow) var(--ease-out);
}

.cert-strip-item__media--clickable:hover img,
.cert-card:hover img {
    transform: scale(1.06);
}

/* ---- Timeline: larger markers + alternating vertical layout on desktop ---- */
.timeline-premium-item {
    padding: 3rem var(--space-md) 0;
}

.timeline-premium-item::before {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 4px rgba(200, 146, 42, 0.15);
}

.timeline-premium-year {
    font-size: 0.85rem;
}

.timeline-premium-title {
    font-size: 1.1rem;
}

@media (min-width: 992px) {
    .timeline-premium {
        flex-direction: column;
        overflow-x: visible;
        padding: var(--space-lg) 0;
        gap: 3rem;
    }

    .timeline-premium::before {
        top: 0;
        bottom: 0;
        left: 50%;
        right: auto;
        width: 3px;
        height: auto;
        background: linear-gradient(180deg, var(--te-gold), rgba(200, 146, 42, 0.15));
    }

    .timeline-premium-item {
        width: 50%;
        min-width: 0;
        flex: none;
        padding: 0 3.5rem 0 0;
        background: var(--te-white);
        border: 1px solid var(--te-border-dark);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: 1.75rem;
        transition: box-shadow var(--duration-base) var(--ease-out),
                    transform var(--duration-base) var(--ease-out);
    }

    .timeline-premium-item:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
    }

    .timeline-premium-item::before {
        top: 50%;
        left: auto;
        right: -11px;
        transform: translateY(-50%);
    }

    .timeline-premium-item:nth-child(odd) {
        align-self: flex-start;
        text-align: right;
        padding-right: 1.75rem;
        padding-left: 3.5rem;
    }

    .timeline-premium-item:nth-child(even) {
        align-self: flex-end;
        margin-left: auto;
    }

    .timeline-premium-item:nth-child(even)::before {
        right: auto;
        left: -11px;
    }

    .timeline-premium-item:nth-child(odd) {
        margin-right: auto;
    }
}

/* ---- Footer: 4-column premium redesign ---- */
.site-footer-premium {
    background: linear-gradient(160deg, var(--te-navy) 0%, var(--te-navy-mid) 100%);
}

.footer-logo {
    max-height: 40px;
    width: auto;
}

.footer-heading {
    margin-bottom: 1rem;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
    color: var(--te-text-inverse-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.footer-contact-list li i {
    color: var(--te-gold);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.footer-contact-list a {
    color: var(--te-text-inverse-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}

.footer-contact-list a:hover {
    color: var(--te-gold-light);
}

@media (max-width: 991.98px) {
    .timeline-premium-item {
        padding-left: calc(var(--space-lg) + 1.5rem);
    }
}

/* ==========================================================================
   30. Icon Fallbacks
   Some CMS-configured icon classes do not exist in Bootstrap Icons 1.11.3
   and render as a blank glyph. Map them to the closest equivalent icon.
   ========================================================================== */
.bi-factory::before {
    content: "\f87d"; /* falls back to bi-buildings */
}

/* ---- "View Full Gallery" / "View All Certificates" links: these sit on
   light section backgrounds, so the default white-on-transparent outline
   button text was invisible. Use the navy-on-light treatment instead. ---- */
.section-action .btn-gold-outline {
    border-color: rgba(11, 29, 51, 0.25);
    color: var(--te-navy);
}

.section-action .btn-gold-outline:hover {
    border-color: var(--te-gold);
    background: rgba(200, 146, 42, 0.08);
    color: var(--te-navy);
}

/* ==========================================================================
   31. World-Class Premium Elevation
   Dials the "Corporate Simplification Override" (section 29) back up toward
   a cinematic, prestige EPC-contractor feel (Bechtel / Fluor / L&T tier) —
   without returning to the earlier full-bleed SaaS-style hero. Restrained,
   navy + charcoal + metallic gold + warm white, subtle motion only.
   Appended (not edited in place) so it can be removed cleanly if ever needed,
   matching the convention already established by sections 29-30.
   CSS only — no HTML structure, routes, or data changes required by this
   layer; a small number of pages add one optional modifier class (see
   the "Optional modifier hooks" subsection) but render identically without it.
   ========================================================================== */

:root {
    /* New palette members: Charcoal + a deeper antique-gold + a warmer white */
    --te-charcoal: #1C1F26;
    --te-charcoal-light: #2A2F3A;
    --te-gold-deep: #9C6E1F;

    /* Warm the "off-white" toward parchment/ivory rather than cool blue-grey */
    --te-off-white: #F7F4EE;

    /* Richer section rhythm + slightly more generous breathing room */
    --space-section: clamp(3.25rem, 5.5vw, 4.75rem);

    /* Deeper shadow for hero-scale elevation */
    --shadow-xl: 0 24px 64px rgba(11, 29, 51, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .hero-kenburns,
    .premium-hero-bg {
        animation: none !important;
    }
}

/* ---- Hero: cinematic scale, restrained vignette (no mesh/gradient overload) ---- */
.premium-hero,
.home-hero {
    min-height: clamp(600px, 82vh, 860px);
    padding: clamp(3rem, 7vw, 4.5rem) 0;
}

.premium-hero-bg {
    opacity: 0.46;
    animation: hero-kenburns 26s ease-in-out infinite alternate;
}

@keyframes hero-kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.06); }
}

.premium-hero-overlay {
    background: radial-gradient(ellipse 90% 70% at 30% 20%, rgba(11, 29, 51, 0.55) 0%, rgba(11, 29, 51, 0.88) 55%, rgba(6, 16, 28, 0.97) 100%);
}

.premium-hero-content {
    max-width: 720px;
}

.premium-hero-title,
.premium-hero h1 {
    font-size: clamp(2.35rem, 4.6vw, 3.6rem);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}

.premium-hero-lead {
    font-size: 1.1rem;
    max-width: 640px;
}

/* Thin gold hairline grounding the hero to the page below it — evokes a
   drafting/blueprint edge rather than a decorative gradient */
.premium-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--te-gold), transparent);
    opacity: 0.55;
    z-index: 3;
}

/* ---- Inner-page hero: taller, subtle engineering-grid texture ---- */
.page-hero {
    padding: clamp(3.25rem, 7vw, 4.5rem) 0 clamp(2.25rem, 4.5vw, 3rem);
}

.page-hero-bg {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 48px 48px,
        radial-gradient(ellipse 70% 90% at 100% 0%, rgba(200, 146, 42, 0.14) 0%, transparent 55%),
        linear-gradient(180deg, var(--te-navy-mid) 0%, var(--te-navy) 100%);
}

.page-hero-title {
    font-size: clamp(1.85rem, 3.6vw, 2.65rem);
}

/* ---- Section rhythm: reintroduce a confident dark band for trust signals ---- */
.stats-section {
    padding: clamp(3rem, 6vw, 4.25rem) 0;
    background: linear-gradient(160deg, var(--te-navy) 0%, var(--te-charcoal) 100%);
    position: relative;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--te-gold), transparent);
    opacity: 0.7;
}

.stats-section .section-title {
    color: var(--te-white);
}

.stats-section .section-subtitle {
    color: var(--te-text-inverse-muted);
}

.stats-grid {
    gap: 1.5rem;
}

.stats-section .stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    padding: 2rem 1.25rem;
    box-shadow: none;
}

.stats-section .stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(200, 146, 42, 0.4);
    box-shadow: var(--shadow-lg);
}

.stats-section .stat-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    background: radial-gradient(circle, rgba(200, 146, 42, 0.22) 0%, rgba(200, 146, 42, 0.06) 70%);
    border: 1px solid rgba(200, 146, 42, 0.3);
}

.stats-section .stat-value {
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    color: var(--te-gold-light);
}

.stats-section .stat-label {
    color: var(--te-text-inverse-muted);
    font-size: 0.82rem;
}

/* ---- Cards: deeper elevation, more confident hover lift ---- */
.premium-card,
.content-card {
    box-shadow: var(--shadow-md);
    border-color: rgba(11, 29, 51, 0.07);
}

.premium-card:hover,
.content-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-8px);
}

.project-card {
    box-shadow: var(--shadow-md);
}

.project-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-6px);
}

.project-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(11, 29, 51, 0.14) 100%);
    pointer-events: none;
}

.card-badge {
    background: linear-gradient(135deg, var(--te-gold) 0%, var(--te-gold-deep) 100%);
    color: var(--te-navy);
    font-weight: 700;
    box-shadow: 0 2px 10px rgba(200, 146, 42, 0.35);
}

/* Optional modifier hooks: a page may opt a project card into the
   image-overlay "showcase" treatment (used on the homepage's curated
   Featured Projects) by adding this class alongside .project-card.
   Pages that don't add it keep the current caption-below layout. */
.project-card--overlay {
    aspect-ratio: 4 / 3;
    display: block;
}

.project-card--overlay .project-card-media {
    position: absolute;
    inset: 0;
    height: 100%;
}

.project-card--overlay .project-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-lg);
    background: linear-gradient(180deg, transparent 35%, rgba(11, 29, 51, 0.62) 70%, rgba(6, 16, 28, 0.94) 100%);
    color: var(--te-white);
}

.project-card--overlay .project-card-overlay h3 {
    color: var(--te-white);
    font-size: 1.15rem;
}

.project-card--overlay .project-card-overlay p,
.project-card--overlay .project-card-meta {
    color: var(--te-text-inverse-muted);
}

/* ---- Certificates: plaque-style presentation ---- */
.cert-strip-item__media {
    border: 1px solid rgba(200, 146, 42, 0.25);
    box-shadow: var(--shadow-sm);
    position: relative;
}

.cert-strip-item__media::before {
    content: '\f52c';
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(200, 146, 42, 0.92);
    color: var(--te-navy);
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.cert-strip-item__media--clickable:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--te-gold);
}

/* ---- Buttons: subtle metallic sheen sweep on hover (restrained, not gimmicky) ---- */
.btn-gold,
.btn-te-primary {
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(200, 146, 42, 0.22);
}

.btn-gold::before,
.btn-te-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s var(--ease-out);
}

.btn-gold:hover::before,
.btn-te-primary:hover::before {
    left: 130%;
}

/* ---- Final CTA band (not the inline mid-page variant): restore dark
   confident close, bookending the page against the dark hero + stats ---- */
.cta-premium:not(.cta-premium--inline) {
    background: linear-gradient(150deg, var(--te-navy) 0%, var(--te-charcoal) 100%);
    color: var(--te-white);
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.cta-premium:not(.cta-premium--inline)::before {
    display: block;
    background:
        radial-gradient(ellipse 50% 80% at 0% 50%, rgba(200, 146, 42, 0.14) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 100% 50%, rgba(229, 173, 74, 0.09) 0%, transparent 55%);
}

.cta-premium:not(.cta-premium--inline) h2 {
    color: var(--te-white);
}

.cta-premium:not(.cta-premium--inline) p,
.cta-premium:not(.cta-premium--inline) .cms-html {
    color: var(--te-text-inverse-muted);
}

/* ---- Footer: anchor in near-black charcoal-navy for a heavier, premium base ---- */
.site-footer-premium {
    background: linear-gradient(165deg, var(--te-navy) 0%, var(--te-charcoal) 100%);
}

/* ---- Section title flourish: small gold rule under eyebrow for extra polish ---- */
.section-header .section-eyebrow::after {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var(--te-gold);
    margin: 0.5rem auto 0;
    opacity: 0.7;
}

.section-header--left .section-eyebrow::after {
    margin-left: 0;
}

/* ---- Responsive: keep the cinematic hero from overwhelming small screens ---- */
@media (max-width: 768px) {
    .premium-hero,
    .home-hero {
        min-height: clamp(480px, 76vh, 640px);
    }

    .stats-section .stat-card {
        padding: 1.25rem 0.75rem;
    }

    .cert-strip-item__media::before {
        width: 22px;
        height: 22px;
        font-size: 0.62rem;
    }
}

@media (max-width: 576px) {
    .premium-hero,
    .home-hero {
        min-height: clamp(440px, 72vh, 560px);
    }

    .project-card--overlay {
        aspect-ratio: 4 / 3.4;
    }
}

/* ==========================================================================
   32. Gallery — Editorial Mosaic
   Upgrades the uniform photo grid (.gallery-uniform-grid) to a varied,
   editorial mosaic purely through CSS Grid + nth-child sizing — no markup,
   model, or data changes. Falls back gracefully to a plain grid on narrow
   screens. Same click/lightbox behavior as before (unchanged JS/markup).
   ========================================================================== */
.gallery-uniform-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 130px;
    gap: 0.85rem;
    justify-content: initial;
}

.gallery-uniform-grid .gallery-uniform-card {
    flex: none;
    max-width: none;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: var(--radius-md);
    position: relative;
    border-color: transparent;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}

.gallery-uniform-grid .gallery-uniform-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--te-gold);
    z-index: 1;
}

.gallery-uniform-grid .gallery-uniform-card::after {
    content: '\f52d';
    font-family: 'bootstrap-icons';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--te-white);
    font-size: 1.4rem;
    background: rgba(11, 29, 51, 0.38);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    pointer-events: none;
}

.gallery-uniform-grid .gallery-uniform-card:hover::after {
    opacity: 1;
}

.gallery-uniform-grid .gallery-uniform-card:nth-child(9n+1) {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-uniform-grid .gallery-uniform-card:nth-child(9n+5) {
    grid-column: span 2;
}

@media (max-width: 992px) {
    .gallery-uniform-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 120px;
    }
}

@media (max-width: 576px) {
    .gallery-uniform-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
        gap: 0.6rem;
    }

    .gallery-uniform-grid .gallery-uniform-card:nth-child(9n+1),
    .gallery-uniform-grid .gallery-uniform-card:nth-child(9n+5) {
        grid-column: span 2;
        grid-row: span 1;
    }
}

/* ==========================================================================
   33. Gallery — Revert to Uniform Grid (feedback: mosaic read as "messy")
   Cancels the varied nth-child sizing from section 32 while keeping the
   hover/zoom-icon polish. Every tile is now the same size, same aspect
   ratio, same spacing. Click-to-open-original behavior is unchanged
   (same markup, same data-full-src attribute, same JS lightbox).
   ========================================================================== */
.gallery-uniform-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    grid-auto-rows: 190px;
}

.gallery-uniform-grid .gallery-uniform-card:nth-child(9n+1),
.gallery-uniform-grid .gallery-uniform-card:nth-child(9n+5) {
    grid-column: span 1;
    grid-row: span 1;
}

@media (max-width: 992px) {
    .gallery-uniform-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        grid-auto-rows: 150px;
    }
}

@media (max-width: 576px) {
    .gallery-uniform-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 110px;
        gap: 0.5rem;
    }
}

/* ==========================================================================
   34. Project Cards — Restore Image-Overlay as the Default (feedback: the
   plain caption-below layout from the "Corporate Simplification Override"
   read as worse than the original overlay treatment). Title, category
   badge, and location now sit inside the image with a dark cinematic
   scrim, on every project card everywhere (listing, featured, homepage) —
   not just the .project-card--overlay opt-in from section 31.
   ========================================================================== */
.project-card {
    aspect-ratio: 4 / 3;
    display: block;
    position: relative;
}

.project-card .project-card-media {
    position: absolute;
    inset: 0;
    height: 100%;
}

.project-card .project-card-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-lg);
    background: linear-gradient(180deg, transparent 32%, rgba(11, 29, 51, 0.64) 68%, rgba(6, 16, 28, 0.95) 100%);
    color: var(--te-white);
}

.project-card .project-card-overlay h3 {
    font-family: var(--font-display);
    color: var(--te-white);
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0.35rem 0 0.4rem;
    line-height: 1.3;
}

.project-card .project-card-overlay p,
.project-card .project-card-meta {
    color: var(--te-text-inverse-muted);
    font-size: 0.85rem;
    margin: 0;
}

.project-card .project-card-excerpt {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--te-text-inverse-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card .card-badge {
    margin-bottom: 0.35rem;
}

/* The homepage's explicit .project-card--overlay modifier is now visually
   identical to the (now-overlay-by-default) base .project-card — kept as a
   harmless no-op alias so no markup needs to change. */
.project-card.project-card--overlay {
    aspect-ratio: 4 / 3;
}

@media (max-width: 576px) {
    .project-card {
        aspect-ratio: 4 / 3.3;
    }
}

/* ==========================================================================
   35. Mid-Page Inline CTA — Balanced 3-Column Composition (feedback: title
   pushed left, button pushed right, disconnected). Replaces the
   unconstrained space-between flex row with a centered, max-width grid:
   title | description | button, each its own column, vertically centered,
   equal gaps. Stacks to a single centered column on mobile. Same 3 DOM
   elements as before (h2, .cms-html, the CTA link) — no markup change.
   ========================================================================== */
.cta-premium--inline .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
}

.cta-premium--inline .cta-premium-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    text-align: left;
}

.cta-premium--inline .cta-premium-inner h2 {
    margin: 0;
}

.cta-premium--inline .cta-premium-inner .cms-html {
    margin: 0;
    max-width: none;
}

.cta-premium--inline .cta-premium-inner > a {
    justify-self: end;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .cta-premium--inline .cta-premium-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.25rem;
    }

    .cta-premium--inline .cta-premium-inner > a {
        justify-self: center;
    }
}