/*
Theme Name: Demeyere Grondwerken
Theme URI: https://nvdemeyer.be
Author: Hummingbirds
Author URI: https://hummingbirds.be
Description: Modern single-page WordPress theme for Demeyere Grondwerken - precision groundworks and excavation services
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: demeyere-grondwerken
*/

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */

   :root {
    /* Colors - Text */
    --text-white: #ffffff;
    --text-heading: #1d1d1b;
    --text-body: #595959;
    --text-invert: #e7e7e7;
    
    /* Colors - Backgrounds */
    --bg-white: #ffffff;
    --bg-secondary: #121212;
    --bg-dark: #181818;
    --bg-darker: #272727;
    --bg-crimson: #b91818;
    
    /* Colors - Neutral */
    --neutral-darker: #222222;
    --neutral-dark: #444444;
    
    /* Colors - Borders */
    --border-inactive: #b8b8b8;
    --border-light-10: rgba(255, 255, 255, 0.1);
    --border-light-20: rgba(255, 255, 255, 0.2);
    
    /* Typography - Sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 22px;
    --text-xl: 25px;
    --text-2xl: 32px;
    --text-3xl: 50px;
    --text-4xl: 60px;
    --text-5xl: 110px;
    
    /* Typography - Line Heights */
    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.4;
    --leading-relaxed: 1.5;
    
    /* Typography - Letter Spacing */
    --tracking-tighter: -1.1px;
    --tracking-tight: -1px;
    --tracking-sm: -0.64px;
    --tracking-base: -0.36px;
    --tracking-wide: 0.84px;
    --tracking-wider: 1.08px;
    
    /* Spacing */
    --spacing-xxxs: 8px;
    --spacing-xxs: 16px;
    --spacing-xs: 24px;
    --spacing-sm: 32px;
    --spacing-md: 40px;
    --spacing-lg: 64px;
    --spacing-xl: 80px;
    --spacing-2xl: 100px;
    --spacing-3xl: 112px;
    --spacing-4xl: 120px;
    --spacing-5xl: 140px;
    --spacing-6xl: 150px;
    
    /* Container */
    --container-max: 1280px;
    --container-full: 1440px;
    
    /* Transitions */
    --transition-base: all 0.3s ease;
    --transition-fast: all 0.15s ease;
  }
  
  /* ============================================
     RESET & BASE STYLES
     ============================================ */
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
  }
  
  body {
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    background: var(--bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-base);
  }
  
  button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
  }
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Ethnocentric - Display Font */
  .font-display {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    line-height: var(--leading-none);
  }
  
  /* Orbitron - Headings & Labels */
  .font-heading {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }
  
  .font-heading-semi {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }
  
  /* Geist - Body Text */
  .font-body {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
  }
  
  .font-body-regular {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
  }
  
  /* ============================================
     LAYOUT UTILITIES
     ============================================ */
  
  .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
  }
  
  .container-full {
    max-width: var(--container-full);
    margin: 0 auto;
  }
  
  .section {
    padding: var(--spacing-3xl) var(--spacing-lg);
  }
  
  .section-lg {
    padding: var(--spacing-5xl) var(--spacing-lg);
  }
  
  /* ============================================
     BUTTONS
     ============================================ */
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xxs);
    padding: 5px 20px; 
    height: 57px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-relaxed);
    transition: var(--transition-base);
    cursor: pointer;
  }
  
  .btn-primary {
    background: var(--bg-white);
    color: var(--text-heading);
    padding-right: 5px;
  }
  
  .btn-primary .btn-arrow img {
    transition: var(--transition-base);
  }
  
  .btn-primary:hover {
    background: var(--neutral-darker);
    color: var(--text-white);
  }
  .btn-primary:hover .btn-arrow img {
    transform: rotate(45deg);
  }
  
  .btn-secondary {
    background: transparent;
    color: var(--text-white);
    border: 2px solid var(--text-white);
  }
  
  .btn-secondary:hover {
    background: var(--text-white);
    color: var(--text-heading);
  }
  
  .btn-dark {
    background: var(--neutral-darker);
    color: var(--text-white);
    border: 2px solid var(--neutral-darker);
  }
  
  .btn-arrow {
    background: #363636;
    width: 48px;
    height: 49px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
  }
  
  .btn-arrow svg,
  .btn-arrow img {
    width: 12px;
    height: 12px;
  }
  
  /* ============================================
     NAVBAR
     ============================================ */
  
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px var(--spacing-lg);
  }
  
  .navbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-full);
    margin: 0 auto;
  }
  
  .navbar-logo {
    width: 215px;
    height: 60px;
    opacity: 0; /* Hidden initially, will be animated by JS */
  }
  
  .navbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .navbar-nav {
    display: flex;
    align-items: center;
    gap: 29px;
    list-style: none;
  }
  
  .navbar-nav a {
    opacity: 0; /* Hidden initially, will be animated by JS */
  }
  
  .navbar-link {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-white);
    white-space: nowrap;
    transition: opacity var(--transition-base);
  }
  
  .navbar-nav:hover .navbar-link {
    opacity: 0.5;
  }
  
  .navbar-nav:hover .navbar-link:hover {
    opacity: 1;
  }
  
  .navbar-nav a {
    position: relative;
    display: inline-block;
  }
  
  .navbar-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--text-white);
    animation: slideInFromLeft 0.3s ease-out;
  }
  
  @keyframes slideInFromLeft {
    from {
      width: 0;
      opacity: 0;
    }
    to {
      width: 100%;
      opacity: 1;
    }
  }
  
  .navbar.sticky {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  /* ============================================
     HERO SECTION
     ============================================ */
  
  .hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: var(--spacing-6xl) var(--spacing-lg) 60px;
    overflow: hidden;
  }
  
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  
  .hero-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  
  .hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
  }
  
  .hero-slide.active {
    opacity: 1;
    z-index: 1;
  }
  
  .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(238.735deg, rgba(0, 0, 0, 0) 31.417%, rgba(0, 0, 0, 0.9) 66.673%), 
                linear-gradient(-0.330121deg, rgba(0, 0, 0, 0) 71.445%, rgba(0, 0, 0, 0.6) 93.983%);
    z-index: -1;
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 46px;
    max-width: 827px;
    margin-top: auto;
  }
  
  .hero-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-white);
    line-height: var(--leading-relaxed);
    margin-bottom: 15px;
    opacity: 0; /* Hidden initially, will be animated by JS */
  }
  
  .hero-title {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-4xl);
    line-height: var(--leading-none);
    letter-spacing: -0.6px;
    color: var(--text-white);
    opacity: 0; /* Hidden initially, will be animated by JS */
  }
  
  .hero-description {
    max-width: 535px;
    color: var(--text-white);
    line-height: var(--leading-relaxed);
    opacity: 0; /* Hidden initially, will be animated by JS */
  }
  
  .hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    opacity: 0; /* Hidden initially, will be animated by JS */
  }
  
  /* ============================================
     SINGLE POST TEMPLATE
     ============================================ */
  
  .single-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--spacing-6xl) + 80px) var(--spacing-lg) var(--spacing-3xl);
    overflow: hidden;
  }
  
  .single-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  
  .single-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .single-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(238.735deg, rgba(0, 0, 0, 0) 31.417%, rgba(0, 0, 0, 0.9) 66.673%), 
                linear-gradient(-0.330121deg, rgba(0, 0, 0, 0) 71.445%, rgba(0, 0, 0, 0.6) 93.983%);
    z-index: -1;
  }
  
  .single-hero-content {
    max-width: var(--container-max);
    margin: 0 auto;
    width: 100%;
  }
  
  .single-hero-title {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-white);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
  }
  
  .single-hero-date {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-white);
    opacity: 0.8;
  }
  
  /* Breadcrumbs */
  .breadcrumbs {
    margin-bottom: var(--spacing-md);
  }
  
  .breadcrumbs-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-xxxs);
    list-style: none;
    flex-wrap: wrap;
  }
  
  .breadcrumb-item {
    display: flex;
    align-items: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
  }
  
  .breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin-left: var(--spacing-xxxs);
    color: var(--text-white);
    opacity: 0.6;
  }
  
  .breadcrumb-item a {
    color: var(--text-white);
    opacity: 0.8;
    transition: var(--transition-base);
  }
  
  .breadcrumb-item a:hover {
    opacity: 1;
  }
  
  .breadcrumb-current {
    color: var(--text-white);
  }
  
  .breadcrumb-current span {
    opacity: 1;
  }
  
  /* Single Content Section */
  .single-content-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
  }
  
  .single-post-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-base);
    color: var(--text-body);
  }
  
  .single-post-content p {
    margin-bottom: 1.5em;
  }
  
  .single-post-content p:last-child {
    margin-bottom: 0;
  }
  
  .single-post-content h2 {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
  }
  
  .single-post-content h3 {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-xs);
  }
  
  .single-post-content h4 {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-heading);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-xxs);
  }
  
  .single-post-content ul,
  .single-post-content ol {
    margin-bottom: 1.5em;
    padding-left: var(--spacing-md);
  }
  
  .single-post-content li {
    margin-bottom: 0.5em;
  }
  
  .single-post-content a {
    color: var(--neutral-darker);
    text-decoration: underline;
    transition: var(--transition-base);
  }
  
  .single-post-content a:hover {
    color: var(--neutral-dark);
  }
  
  .single-post-content img {
    width: 100%;
    height: auto;
    margin: var(--spacing-md) 0;
  }
  
  .single-post-content blockquote {
    border-left: 4px solid var(--neutral-darker);
    padding-left: var(--spacing-md);
    margin: var(--spacing-md) 0;
    font-style: italic;
    color: var(--neutral-dark);
  }
  
  /* Back to Home Button */
  .single-back-home {
    max-width: 800px;
    margin: var(--spacing-3xl) auto 0;
    text-align: center;
  }
  
  .single-back-btn {
    flex-direction: row-reverse;
    padding-right: 5px;
  }
  
  .single-back-btn .btn-arrow-left {
    background: transparent;
    border: 1.5px solid var(--text-white);
    margin-right: var(--spacing-xxxs);
  }
  
  .single-back-btn:hover .btn-arrow-left {
    transform: translateX(-3px);
  }
  
  /* ============================================
     ABOUT SECTION
     ============================================ */
  
  .about-section {
    position: relative;
    padding: var(--spacing-5xl) var(--spacing-lg);
  }
  
  .about-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  
  .about-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .about-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(198.177deg, rgba(255, 255, 255, 0) 4.0643%, rgb(255, 255, 255) 61.774%), 
                linear-gradient(-66.9728deg, rgba(255, 255, 255, 0) 1.2963%, rgb(255, 255, 255) 68.892%);
    z-index: -1;
  }
  
  .section-title {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--neutral-darker);
    margin-bottom: var(--spacing-2xl);
  }
  
  .section-title-center {
    text-align: center;
  }
  
  .section-title-white {
    color: var(--text-white);
  }
  
  .about-grid {
    display: grid;
    grid-template-columns: 616px 1fr;
    gap: var(--spacing-xl);
    align-items: center;
  }
  
  .about-images {
    position: relative;
    width: 616px;
    height: 640px;
  }
  
  .about-image-left,
  .about-image-right {
    position: absolute;
    width: 293px;
    height: 610px;
    overflow: hidden;
  }
  
  .about-image-left {
    top: 0;
    left: 0;
  }
  
  .about-image-right {
    bottom: 0;
    right: 0;
  }
  
  .about-image-left img,
  .about-image-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .about-content {
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-base);
    color: var(--text-body);
  }
  
  .about-content p {
    margin-bottom: 1em;
  }
  
  .about-content p:last-child {
    margin-bottom: 0;
  }
  
  .about-grid-full {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    max-height: 100vh;
  }
  
  .about-grid-full-content {
    padding: var(--spacing-5xl) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-y: auto;
  }
  
  .about-grid-full-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    min-height: 600px;
    max-height: 100vh;
  }
  
  .about-grid-full-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* ============================================
     DARK SECTIONS
     ============================================ */
  
  .section-dark {
    background: var(--bg-dark);
    color: var(--text-white);
  }
  
  .section-darker {
    background: var(--bg-darker);
    color: var(--text-white);
    overflow: hidden;
  }
  
  /* ============================================
     FEATURES LIST
     ============================================ */
  
  #troeven {
    min-height: 100vh;
      padding: var(--spacing-4xl) var(--spacing-lg);
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: 600px 1fr;
    gap: var(--spacing-xl);
    align-items: center;
  }
  
  .features-image {
    width: 600px;
    height: 487px;
    overflow: hidden;
  }
  
  .features-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .features-list {
    list-style: none;
  }
  
  .feature-item {
    display: flex;
    gap: var(--spacing-xs);
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
  }
  
  .feature-item.active .feature-underline {
    width: 222px;
  }
  
  .feature-number {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-sm);
    color: var(--text-white);
    flex-shrink: 0;
  }
  
  .feature-content {
    flex: 1;
  }
  
  .feature-content:hover {
    cursor: hand;
  }
  
  .feature-title {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    letter-spacing: -0.44px;
    color: var(--text-white);
    margin-bottom: 8px;
  }
  
  .feature-description {
    color: var(--text-invert);
    line-height: var(--leading-relaxed);
    transition: max-height 0.5s ease, opacity 0.5s ease, margin-top 0.5s ease;
    overflow: hidden;
  }
  
  .feature-item:not(.active) .feature-title {
    opacity: 0.4;
  }
  
  .feature-item:not(.active) .feature-description {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
  }
  
  .feature-item.active .feature-description {
    max-height: 1000px;
    opacity: 1;
    margin-top: 8px;
  }
  
  .feature-title {
    transition: opacity 0.4s ease;
  }
  
  .feature-underline {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--text-white);
    z-index: 1;
    /* Transition removed to allow GSAP full control */
  }
  
  /* ============================================
     PHOTO GALLERY
     ============================================ */
  
  .gallery {
    padding: var(--spacing-3xl) 0;
  }
  
  .gallery-intro {
    text-align: center;
    max-width: 802px;
    margin: 0 auto var(--spacing-xl);
    padding: 0 var(--spacing-lg);
  }
.gallery-intro h2 {
	margin-bottom: var(--spacing-xs);
}
  
  .gallery-intro p {
    margin-top: var(--spacing-xxs);
    color: var(--neutral-dark);
  }
  
  .gallery-slider-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 48px;
  }
  
  .gallery-slider-container {
    padding-left: var(--spacing-lg);
    overflow: hidden;
  }
  
  .gallery-slider {
    display: flex;
    gap: 20px;
    transition: transform 0.5s ease;
    will-change: transform;
  }
  
  .gallery-slide {
    flex: 0 0 auto;
    width: 280px;
  }
  
  .gallery-slide-content {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: var(--bg-dark);
  }
  
  .gallery-slide-content img,
  .gallery-slide-content video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-base);
    cursor: pointer;
  }
  
  .gallery-slide-content:hover .gallery-overlay {
    background: rgba(0, 0, 0, 0.6);
    opacity: 1;
  }
  
  .gallery-overlay-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #000000;
    border-radius: 50%;
    padding: 12px;
    transition: var(--transition-base);
  }
  
  .gallery-overlay-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
  }
  
  .gallery-slide-content:hover .gallery-overlay-icon {
    transform: scale(1.1);
  }
  
  .gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--spacing-lg);
  }
  
  .gallery-nav {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
  }
  
  .gallery-nav-btn {
    width: 51px;
    height: 49px;
    background: #363636;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition-base);
  }
  
  .gallery-nav-btn:hover:not(.disabled) {
    background: #4a4a4a;
  }
  
  .gallery-nav-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  .gallery-dots {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  
  .gallery-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #b8b8b8;
    cursor: pointer;
    transition: var(--transition-base);
  }
  
  .gallery-dot.active {
    background: var(--text-heading);
  }
  
  /* ============================================
     NEWS SECTION
     ============================================ */
  
  .news-section {
    padding: var(--spacing-3xl) var(--spacing-lg);
  }
  
  .news-intro {
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }
  
  .news-intro .section-title {
    margin-bottom: 0;
  }
  
  .news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
  }
  
  .news-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-white);
    border: 1.5px solid #cfcfcf;
    transition: var(--transition-base);
    overflow: hidden;
  }
  
  .news-card:hover {
    border-color: var(--neutral-darker);
  }
  
  .news-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-dark);
  }
  
  .news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base);
  }
  
  .news-card:hover .news-card-image img {
    transform: scale(1.05);
  }
  
  .news-card-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  .news-card-meta {
    margin-bottom: var(--spacing-xxs);
  }
  
  .news-card-date {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--neutral-dark);
  }
  
  .news-card-title {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-lg);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    margin-bottom: var(--spacing-xxs);
  }
  
  .news-card-title a {
    color: inherit;
    transition: var(--transition-base);
  }
  
  .news-card-title a:hover {
    color: var(--neutral-dark);
  }
  
  .news-card-excerpt {
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-base);
    margin-bottom: var(--spacing-md);
    flex: 1;
  }
  
  .news-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xxxs);
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-heading);
    margin-top: auto;
    transition: var(--transition-base);
  }
  
  .news-card-link:hover {
    color: var(--neutral-dark);
  }
  
  .news-card-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--neutral-darker);
    transition: var(--transition-base);
  }
  
  .news-card-link-arrow img {
    width: 12px;
    height: 12px;
  }
  
  .news-card-link:hover .news-card-link-arrow {
    background: var(--neutral-dark);
    transform: rotate(45deg);
  }
  
  /* ============================================
     LOCATION SECTION
     ============================================ */
  
  .location-section {
    position: relative;
    min-height: 100vh;
    padding: var(--spacing-4xl) var(--spacing-lg);
  }
  
  .location-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  
  .location-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .location-content {
    max-width: 50%;
  }
  
  .location-content .section-title {
    margin-bottom: 30px;
  }
  
  .location-content p {
    color: var(--neutral-dark);
  }
  
  /* ============================================
     JOBS SECTION
     ============================================ */
  
  .jobs-section {
    position: relative;
    padding: var(--spacing-4xl) var(--spacing-lg);
    overflow: hidden;
  }
  
  .jobs-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  
  .jobs-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .jobs-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(97.4988deg, rgba(24, 24, 24, 0) 22.179%, rgb(24, 24, 24) 72.301%), 
                linear-gradient(1.36635e-06deg, rgba(24, 24, 24, 0) 21.139%, rgb(24, 24, 24) 96.089%);
    z-index: -1;
  }
  
  .jobs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: start;
  }
  
  .jobs-intro {
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: sticky;
    top: 0;
    align-self: start;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .jobs-intro.sticky-disabled {
    position: relative;
  }
  
  .jobs-intro .section-title {
    margin-bottom: 0;
  }
  
  .jobs-intro p {
    color: var(--text-white);
    max-width: 532px;
  }
  
  .job-listing {
    padding: 20px 0;
  }
  
  .job-title {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    letter-spacing: -0.5px;
    color: var(--text-white);
    margin-bottom: 30px;
  }
  
  .job-subtitle {
    font-size: var(--text-sm);
    color: var(--text-invert);
    margin-bottom: 8px;
  }
  
  .job-section {
    margin-bottom: 30px;
  }
  
  .job-section-title {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: var(--text-base);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-white);
    margin: 15px 0;
  }
  
  .job-content {
    color: var(--text-invert);
    line-height: var(--leading-relaxed);
  }
  
  .job-content p {
    margin-bottom: 1em;
  }
  
  .job-content p:last-child {
    margin-bottom: 0;
  }
  
  .job-requirements,
  .job-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  
  .job-requirements li,
  .job-content ul li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 1em;
  }
  
  .job-requirements li:last-child,
  .job-content ul li:last-child {
    margin-bottom: 0;
  }
  
  .job-requirements li::before,
  .job-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 10px;
    height: 10px;
    background-image: url('/wp-content/themes/demeyere-grondwerken-theme/assets/icons/arrow-up-right.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(45deg);
  }
  
  /* ============================================
     CONTACT FORM SECTION
     ============================================ */
  
  .contact-section {
    padding: var(--spacing-4xl) var(--spacing-lg);
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 5.039%, rgb(255, 255, 255) 73.628%);
  }
  
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 614px;
    gap: var(--spacing-xl);
  }
  
  .contact-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 62px;
    position: relative;
  }
  
  .contact-tab-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 57px;
    background: var(--neutral-darker);
    z-index: 0;
    pointer-events: none;
  }
  
  .contact-tab {
    height: 57px;
    padding: 5px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    border: 2px solid var(--neutral-darker);
    margin-right: -2px;
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    background: transparent;
    color: var(--text-heading);
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
  }
  
  .contact-tab.active {
    color: var(--text-white);
  }
  
  .contact-tab:hover {
    opacity: 0.8;
  }
  
  .contact-intro .section-title {
    margin-bottom: var(--spacing-xs);
  }
  
  .contact-intro p {
    max-width: 525px;
    color: var(--neutral-dark);
  }
  
  .contact-form {
    background: var(--bg-white);
    border: 1.5px solid #cfcfcf;
    padding: var(--spacing-md);
  }
  
  .form-group {
    margin-bottom: var(--spacing-sm);
  }
  
  .form-label {
    font-family: 'Orbitron', sans-serif;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--text-heading);
    display: block;
    margin-bottom: var(--spacing-xxxs);
  }
  
  .form-input,
  .form-textarea {
    width: 100%;
    padding: 0 12px;
    border: none;
    border-bottom: 1px solid var(--border-inactive);
    font-family: 'Geist', sans-serif;
    font-size: var(--text-base);
    color: var(--text-heading);
    background: transparent;
    transition: var(--transition-base);
    height: 27px;
  }
  
  .form-textarea {
    min-height: 77px;
    padding: 12px;
    resize: vertical;
  }
  
  .form-input:focus,
  .form-textarea:focus {
    outline: none;
    border-bottom-color: var(--neutral-darker);
  }
  
  .form-submit {
    width: 100%;
    height: 57px;
    background: var(--neutral-darker);
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 5px 5px 24px;
    position: relative;
  }
  
  .form-submit:hover {
    background: #3a3a3a;
  }
  
  .form-submit-arrow {
    width: 48px;
    height: 49px;
    background: transparent;
    border: 1.5px solid var(--text-white);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .form-submit-arrow img {
    width: 12px;
    height: 12px;
  }
  
  /* ============================================
     FOOTER
     ============================================ */
  
  .footer {
    background: var(--bg-dark);
    padding: 100px var(--spacing-lg) var(--spacing-xl);
    color: var(--text-white);
  }
  
  .footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    position: relative;
  }
  
  .footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .footer-col.animated {
    opacity: 1;
    transform: translateY(0);
  }
  
  .footer-divider {
    position: absolute;
    top: 0;
    height: 138px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
  }
  
  .footer-divider:nth-child(2) {
    left: 33.33%;
  }
  
  .footer-divider:nth-child(3) {
    left: 66.66%;
  }
  
  .footer-title {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-base);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-base);
  }
  
  .footer-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
  }
  
  .footer-item {
    display: flex;
    gap: var(--spacing-xxs);
    align-items: flex-start;
    opacity: 0.6;
  }
  
  .footer-item svg,
  .footer-item img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  
  .footer-item p {
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-base);
  }
  
  .footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0.6;
  }
  
  .footer-social-icon {
    width: 30px;
    height: 30px;
  }
  
  .footer-credits {
    text-align: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .footer-logo-large {
    font-family: 'Ethnocentric', sans-serif;
    font-style: italic;
    font-size: var(--text-5xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    color: var(--text-white);
    margin-bottom: var(--spacing-xl);
  }
  
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.6;
  }
  
  .footer-links {
    display: flex;
    gap: var(--spacing-xs);
  }
  
  .footer-link {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  
  .footer-link:hover {
    opacity: 0.8;
  }
  
  .footer-link-icon {
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    width: auto;
    color: inherit;
  }
  
  .footer-link-icon svg {
    display: block;
    height: 100%;
    width: auto;
    fill: currentColor;
    color: inherit;
  }
  
  .footer-copyright {
    text-align: right;
  }
  
  /* ============================================
     RESPONSIVE DESIGN
     ============================================ */
  
  @media (max-width: 1440px) {
    .container-full {
      padding: 0 var(--spacing-lg);
    }
  }
  
  @media (max-width: 1200px) {
    .about-grid,
    .features-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
    
    .about-images {
      margin: 0 auto;
    }
    
    .about-grid-full {
      grid-template-columns: 1fr;
    }
    
    .about-grid-full-image {
      min-height: 400px;
    }
    
    .jobs-grid,
    .contact-grid {
      grid-template-columns: 1fr;
    }
    
    .news-grid {
      grid-template-columns: 1fr;
    }
    
    .location-content {
      max-width: 100%;
    }
    
    /* Features: remove borders and make titles smaller on tablet */
    .feature-item {
      border-bottom: none !important;
    }
    
    .feature-item .feature-title {
      font-size: var(--text-base) !important;
    }
    
    .feature-item .feature-underline {
      display: none !important;
    }
    
    /* News cards: make titles same size as feature titles on tablet */
    .news-card-title {
      font-size: var(--text-base) !important;
    }
  }
  
  @media (max-width: 768px) {
    /* Container & Section Padding */
    .container {
      padding: 0 var(--spacing-sm);
    }
    
    .section {
      padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .section-lg {
      padding: var(--spacing-2xl) var(--spacing-sm);
    }
    
    /* Typography - Limit all titles to max font-size on mobile */
    h1, h2, h3, h4, h5, h6,
    .hero-title,
    .section-title,
    .single-hero-title,
    .news-card-title,
    .job-title,
    .job-section-title,
    .feature-title,
    .footer-title,
    .footer-logo-large,
    .gallery-intro h2 {
      /*font-size: var(--text-2xl) !important;*/
		font-size: 1.5rem !important;
    }
        
    /* About Section */
    .about-section {
      padding: var(--spacing-2xl) var(--spacing-sm);
    }
    
    .about-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
    
    .about-images {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: auto !important;
      position: relative !important;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
    }
    
    .about-image-left,
    .about-image-right {
      position: relative !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: 300px;
      aspect-ratio: 293 / 610;
      margin-bottom: 0 !important;
      top: auto !important;
      left: auto !important;
      bottom: auto !important;
      right: auto !important;
    }
    
    .about-image-left img,
    .about-image-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .about-content {
      width: 100%;
    }
    
    /* About Grid Full */
    .about-grid-full {
      grid-template-columns: 1fr;
      max-height: none;
    }
    
    .about-grid-full-content {
      padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .about-grid-full-image {
      min-height: 300px;
      max-height: 400px;
    }
    
    /* Features Section */
    #troeven {
      min-height: auto;
      padding: var(--spacing-2xl) var(--spacing-sm);
    }
    
    .features-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
    
    .features-image {
      width: 100%;
      max-width: 100%;
      height: auto;
      min-height: 300px;
      margin: 0 auto;
    }
    
    .features-list {
      width: 100%;
    }
    
    .feature-item {
      padding: var(--spacing-xxs) 0;
      border-bottom: none !important;
    }
    
    /* On mobile/tablet: all items are open (active state) */
    .feature-item .feature-title {
      opacity: 1 !important;
      font-size: var(--text-base) !important;
    }
    
    .feature-item .feature-description {
      max-height: 1000px !important;
      opacity: 1 !important;
      margin-top: 8px !important;
    }
    
    .feature-item .feature-underline {
      display: none !important;
    }
    
    /* News cards: make titles same size as feature titles on mobile */
    .news-card-title {
      font-size: var(--text-base) !important;
    }
    
    /* Location Section */
    .location-section {
      min-height: auto;
      padding: var(--spacing-2xl) var(--spacing-sm);
    }
    
    .location-content {
      max-width: 100%;
    }
    
    .location-content .section-title {
      margin-bottom: var(--spacing-xs);
    }
    
    /* Single Post Template */
    .single-hero {
      min-height: 50vh;
      padding: calc(var(--spacing-4xl) + 80px) var(--spacing-sm) var(--spacing-xl);
    }
    
    .single-hero-title {
      font-size: var(--text-2xl);
    }
    
    .single-content-section {
      padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .single-post-content {
      max-width: 100%;
    }
    
    .single-post-content h2 {
      font-size: var(--text-xl);
      margin-top: var(--spacing-md);
    }
    
    .single-post-content h3 {
      font-size: var(--text-lg);
      margin-top: var(--spacing-md);
    }
    
    .single-back-home {
      margin-top: var(--spacing-xl);
    }
    
    /* Gallery Section */
    .gallery {
      padding: var(--spacing-xl) 0;
    }
    
    .gallery-intro {
      padding: 0 var(--spacing-sm);
      margin-bottom: var(--spacing-md);
    }
    
    .gallery-slider-container {
      padding-left: var(--spacing-sm);
    }
    
    .gallery-slide {
      width: 240px;
    }
    
    .gallery-controls {
      padding: 0 var(--spacing-sm);
    }
    
    /* News Section */
    .news-section {
      padding: var(--spacing-xl) var(--spacing-sm);
    }
    
    .news-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
    
    .news-card-content {
      padding: var(--spacing-sm);
    }
    
    /* Jobs Section */
    .jobs-section {
      padding: var(--spacing-2xl) var(--spacing-sm);
    }
    
    .jobs-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
    
    .jobs-intro {
      gap: var(--spacing-xs);
    }
    
    .jobs-intro p {
      max-width: 100%;
    }
    
    .job-listing {
      padding: var(--spacing-xs) 0;
    }
    
    .job-title {
      font-size: var(--text-lg);
      margin-bottom: var(--spacing-xs);
    }
    
    .job-section {
      margin-bottom: var(--spacing-md);
    }
    
    /* Contact Section */
    .contact-section {
      padding: var(--spacing-2xl) var(--spacing-sm);
    }
    
    .contact-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
    }
    
    .contact-tabs {
      margin-bottom: var(--spacing-md);
      flex-wrap: wrap;
    }
    
    .contact-tab {
      flex: 1;
      min-width: 140px;
      font-size: 11px;
      padding-left: var(--spacing-xxxs);
      padding-right: var(--spacing-xxxs);
    }
    
    .contact-intro p {
      max-width: 100%;
    }
    
    .contact-form {
      padding: var(--spacing-sm);
    }
    
    /* Footer */
    .footer {
      padding: var(--spacing-2xl) var(--spacing-sm) var(--spacing-md);
    }
    
    .footer-content {
      grid-template-columns: 1fr;
      gap: var(--spacing-md);
      margin-bottom: var(--spacing-md);
    }
    
    .footer-divider {
      display: none;
    }
    
    .footer-col {
      gap: var(--spacing-xs);
    }
    
    .footer-credits {
      padding-top: var(--spacing-md);
    }
    
    .footer-logo-large {
      font-size: 48px;
      margin-bottom: var(--spacing-md);
    }
    
    .footer-bottom {
      flex-direction: column;
      gap: var(--spacing-xxs);
      text-align: center;
      align-items: center;
    }
    
    .footer-links {
      flex-direction: column;
      gap: var(--spacing-xxxs);
      align-items: center;
    }
    
    .footer-copyright {
      text-align: center;
    }
    
    /* Typography */
    .section-title {
      font-size: 32px;
      margin-bottom: var(--spacing-md);
    }
    
    /* Buttons */
    .hero-actions {
      flex-direction: column;
    }
    
    .btn {
      width: 100%;
    }
    
    /* Navbar */
    .navbar-nav {
      display: none; /* Implement mobile menu as needed */
    }
    
    .navbar {
      padding: 16px var(--spacing-sm);
    }
    
    .navbar-logo {
      width: 160px;
      height: 45px;
    }
    
    /* Page Template */
    .entry-content {
      max-width: 100% !important;
    }
    
    .entry-thumbnail {
      margin-bottom: var(--spacing-sm) !important;
    }
    
    .entry-thumbnail img {
      width: 100%;
      height: auto;
    }
  }
  
  @media (min-width: 769px) and (max-width: 1200px) {
    /* Tablet Landscape - Images side by side with 1:1 ratio */
    .about-images {
      display: flex !important;
      flex-direction: row !important;
      gap: var(--spacing-xs);
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      min-height: auto !important;
      position: relative !important;
      margin: 0 auto;
    }
    
    .about-image-left,
    .about-image-right {
      position: relative !important;
      width: 50% !important;
      max-width: 50% !important;
      flex: 1;
      aspect-ratio: 1 / 1 !important;
      min-height: auto !important;
      height: auto !important;
      top: auto !important;
      left: auto !important;
      bottom: auto !important;
      right: auto !important;
      margin-bottom: 0 !important;
    }
  }
  
  @media (max-width: 480px) {
    /* Spacing adjustments for small mobile */
    :root {
      --spacing-lg: 24px;
      --spacing-xl: 32px;
      --spacing-2xl: 48px;
      --spacing-3xl: 48px;
      --spacing-4xl: 56px;
      --spacing-5xl: 64px;
    }
    
    /* Typography - Limit all titles to max font-size on small mobile */
    h1, h2, h3, h4, h5, h6,
    .hero-title,
    .section-title,
    .single-hero-title,
    .news-card-title,
    .job-title,
    .feature-title,
    .footer-title,
    .footer-logo-large,
    .gallery-intro h2 {
		font-size: 1.5rem !important;
    }
    
    .container {
      padding: 0 var(--spacing-xxs);
    }
    
    .section {
      padding: var(--spacing-lg) var(--spacing-xxs);
    }
    
    .section-lg {
      padding: var(--spacing-xl) var(--spacing-xxs);
    }
    
    /* About Section - Small Mobile */
    .about-section {
      padding: var(--spacing-xl) var(--spacing-xxs);
    }
    
    .about-images {
      gap: var(--spacing-xxs);
    }
    
    .about-image-left,
    .about-image-right {
      min-height: 250px;
      aspect-ratio: 293 / 610;
    }
    
    .about-grid-full-content {
      padding: var(--spacing-lg) var(--spacing-xxs);
    }
    
    .about-grid-full-image {
      min-height: 250px;
      max-height: 300px;
    }
    
    /* Features Section - Small Mobile */
    #troeven {
      padding: var(--spacing-xl) var(--spacing-xxs);
    }
    
    .features-image {
      min-height: 250px;
    }
    
    .feature-number {
      font-size: var(--text-xl);
    }
    
    .feature-title {
      font-size: var(--text-base);
    }
    
    /* Location Section - Small Mobile */
    .location-section {
      padding: var(--spacing-xl) var(--spacing-xxs);
    }
    
    /* Single Post Template - Small Mobile */
    .single-hero {
      min-height: 40vh;
      padding: calc(var(--spacing-3xl) + 60px) var(--spacing-xxs) var(--spacing-lg);
    }
    
    .single-hero-title {
      font-size: var(--text-xl);
    }
    
    .single-content-section {
      padding: var(--spacing-lg) var(--spacing-xxs);
    }
    
    .single-post-content h2 {
      font-size: var(--text-lg);
    }
    
    .single-post-content h3 {
      font-size: var(--text-base);
    }
    
    .single-back-home {
      margin-top: var(--spacing-md);
    }
    
    /* Gallery Section - Small Mobile */
    .gallery {
      padding: var(--spacing-lg) 0;
    }
    
    .gallery-intro {
      padding: 0 var(--spacing-xxs);
      margin-bottom: var(--spacing-sm);
    }
    
    .gallery-slide {
      width: 200px;
    }
    
    .gallery-slider-container {
      padding-left: var(--spacing-xxs);
    }
    
    .gallery-controls {
      padding: 0 var(--spacing-xxs);
    }
    
    .gallery-nav-btn {
      width: 45px;
      height: 43px;
    }
    
    /* News Section - Small Mobile */
    .news-section {
      padding: var(--spacing-lg) var(--spacing-xxs);
    }
    
    .news-card-content {
      padding: var(--spacing-xs);
    }
    
    /* Jobs Section - Small Mobile */
    .jobs-section {
      padding: var(--spacing-xl) var(--spacing-xxs);
    }
    
    .job-title {
      font-size: var(--text-base);
    }
    
    /* Contact Section - Small Mobile */
    .contact-section {
      padding: var(--spacing-xl) var(--spacing-xxs);
    }
    
    .contact-tabs {
      margin-bottom: var(--spacing-sm);
    }
    
    .contact-tab {
      height: 50px;
      font-size: 10px;
      padding-left: 8px;
      padding-right: 8px;
    }
    
    .contact-form {
      padding: var(--spacing-xs);
    }
    
    .form-group {
      margin-bottom: var(--spacing-xs);
    }
    
    /* Footer - Small Mobile */
    .footer {
      padding: var(--spacing-xl) var(--spacing-xxs) var(--spacing-sm);
    }
    
    .footer-logo-large {
      font-size: 36px;
    }
    
    /* Typography - Small Mobile */
    .section-title {
      font-size: 28px;
      margin-bottom: var(--spacing-sm);
    }
    
    /* Navbar - Small Mobile */
    .navbar {
      padding: 12px var(--spacing-xxs);
    }
    
    .navbar-logo {
      width: 140px;
      height: 40px;
    }
    
    /* Page Template - Small Mobile */
    .entry-thumbnail {
      margin-bottom: var(--spacing-xs) !important;
    }
  }