/* Kaleier - CSS Design System 8px Grid System, Asymmetric Layouts, Modern Aesthetics*//* Local Inter Font - GDPR Compliant (self-hosted) */@font-face { font-family: 'Inter'; src: url('/assets/inter-font/Inter_18pt-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap;}@font-face { font-family: 'Inter'; src: url('/assets/inter-font/Inter_18pt-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap;}@font-face { font-family: 'Inter'; src: url('/assets/inter-font/Inter_18pt-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap;}@font-face { font-family: 'Inter'; src: url('/assets/inter-font/Inter_18pt-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap;}@font-face { font-family: 'Inter'; src: url('/assets/inter-font/Inter_18pt-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap;}:root { --primary: #D5610B; /* Orange Accent */ --primary-dark: #b8540a; --bg-white: #FFFFFF; --bg-charcoal: #121212; --bg-light: #F8F9FA; --text-dark: #1A1A1A; --text-titles: #60695C; --text-light: #F5F5F5; --text-muted: #666666; --grid-unit: 8px; --container-max: 1440px; --radius-lg: 24px; --radius-md: 12px; --shadow-soft: 0 20px 50px rgba(0, 0, 0, 0.05); --transition-base: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);}* { margin: 0; padding: 0; box-sizing: border-box;}html { scroll-behavior: smooth;}body { font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--text-dark); background-color: var(--bg-white); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased;}img { max-width: 100%; display: block;}ul { list-style: none;}a { text-decoration: none; color: inherit; transition: var(--transition-base);}.container { max-width: var(--container-max); margin: 0 auto; padding: 0 calc(var(--grid-unit) * 4); width: 100%;}/* Typography */h1,h2,h3,h4 { color: var(--text-titles); line-height: 0.95; font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em;}h1 { font-size: clamp(3rem, 6vw, 4.5rem);}h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-bottom: calc(var(--grid-unit) * 6);}h3 { font-size: clamp(1.25rem, 2.5vw, 2rem); margin-bottom: calc(var(--grid-unit) * 3);}/* Buttons */.btn { display: inline-flex; align-items: center; justify-content: center; padding: calc(var(--grid-unit) * 2.5) calc(var(--grid-unit) * 5); font-weight: 700; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.08em; cursor: pointer; border: none; border-radius: 100px;}.btn--primary { background-color: var(--primary); color: white;}.btn--primary:hover { background-color: var(--primary-dark); transform: scale(1.05);}.btn--black { display: none; /* Removed */}.btn--secondary { background-color: transparent; border: 1.5px solid var(--primary); color: var(--primary);}.btn--secondary:hover { background-color: var(--primary); color: white; border-color: var(--primary);}.btn--large { padding: calc(var(--grid-unit) * 3.5) calc(var(--grid-unit) * 7); font-size: 0.9375rem;}/* Header */.header { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid rgba(0, 0, 0, 0.05);}.container--header { display: flex; justify-content: space-between; align-items: center; padding-top: calc(var(--grid-unit) * 2); padding-bottom: calc(var(--grid-unit) * 2);}.nav__list { display: flex; gap: calc(var(--grid-unit) * 4);}.nav__link { font-weight: 600; font-size: 0.9375rem; color: var(--text-dark);}.nav__link:hover,.nav__link.active { color: var(--primary);}.nav__mobile-info { display: none;}.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 12px; z-index: 2000; position: relative; width: 48px; height: 48px; color: var(--text-dark);}.nav-toggle svg { width: 28px; height: 28px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);}.nav-toggle .icon-close { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.5);}.nav-toggle.active .icon-menu { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0.5);}.nav-toggle.active .icon-close { opacity: 1; transform: translate(-50%, -50%) rotate(0) scale(1);}@media (max-width: 900px) { .nav-toggle { display: block; } .nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: white; z-index: 1050; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform: translateY(-20px); } .nav.active { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; display: flex !important; } .nav__list { flex-direction: column; align-items: center; gap: calc(var(--grid-unit) * 5); } .nav__link { font-size: 2rem; font-weight: 800; text-transform: uppercase; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; } /* Staggered animation for links */ .nav.active .nav__link { opacity: 1; transform: translateY(0); } .nav.active .nav__item:nth-child(1) .nav__link { transition-delay: 0.1s; } .nav.active .nav__item:nth-child(2) .nav__link { transition-delay: 0.15s; } .nav.active .nav__item:nth-child(3) .nav__link { transition-delay: 0.2s; } .nav.active .nav__item:nth-child(4) .nav__link { transition-delay: 0.25s; } .nav__mobile-info { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--grid-unit) * 10); gap: calc(var(--grid-unit) * 2); } .nav__phone { font-size: 1.25rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 8px; } .btn--header { display: none; /* Hide top right button on mobile header */ } .nav .btn--header { display: inline-flex; /* Show inside mobile menu instead */ margin-top: 20px; } body.nav-open { overflow: hidden; }}/* Hero Section */.hero { position: relative; background-color: var(--bg-white); color: var(--text-dark); padding-top: calc(var(--grid-unit) * 12); padding-bottom: 0; overflow: hidden;}.hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 80px 80px; z-index: 1;}.hero__container { position: relative; z-index: 2;}.hero__top { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: calc(var(--grid-unit) * 12); align-items: start; margin-bottom: calc(var(--grid-unit) * 15); /* More breathing room before images */}.hero__title { text-align: left; margin-bottom: 0; max-width: 900px;}.hero__content-right { text-align: left; max-width: 100%;}.hero__text { font-size: 1.125rem; color: var(--text-muted); margin-bottom: calc(var(--grid-unit) * 4); line-height: 1.6;}.hero__actions { display: flex; gap: calc(var(--grid-unit) * 2); justify-content: flex-start;}/* Hero Images Layout - Mosaic/Tiles */.hero__images-wrapper { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, 200px); gap: calc(var(--grid-unit) * 3); margin-bottom: -100px; /* Overlap with ticker */ position: relative; z-index: 3;}.hero__image { border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);}.hero__image--left { grid-column: 1 / span 4; grid-row: 1 / span 2;}.hero__image--center { grid-column: 5 / span 5; grid-row: 1 / span 2; transform: translateY(40px);}.hero__image--right { grid-column: 10 / span 3; grid-row: 1 / span 2;}.hero__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);}.hero__image:hover img { transform: scale(1.05);}/* Orange Ticker Bar - Modern Style */.hero__ticker { background-color: var(--primary); padding: calc(var(--grid-unit) * 5) 0; margin-top: 250px; position: relative; z-index: 1; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255, 255, 255, 0.1);}.ticker__content { display: flex; width: max-content; animation: ticker 30s linear infinite;}.ticker__item { font-size: 1.75rem; /* Larger font size */ font-weight: 800; letter-spacing: 0.1em; color: white; padding: 0 calc(var(--grid-unit) * 8); text-transform: uppercase;}.ticker__sep { color: rgba(255, 255, 255, 0.6); font-size: 1.75rem;}@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); }}/* Sections */.section { padding: calc(var(--grid-unit) * 18) 0; position: relative;}.section--intro { background-color: var(--bg-white); padding-top: calc(var(--grid-unit) * 10);}.section--intro::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 80px); height: 1px; background-color: rgba(0, 0, 0, 0.05);}.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 15); align-items: center;}/* Comparison Slider */.comparison-slider { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1); --position: 50%;}.comparison-slider__image { position: absolute; inset: 0; width: 100%; height: 100%;}.comparison-slider__image img { width: 100%; height: 100%; object-fit: cover;}.comparison-slider__image--after { clip-path: polygon(var(--position) 0, 100% 0, 100% 100%, var(--position) 100%);}.comparison-slider__handle { position: absolute; top: 0; bottom: 0; left: var(--position); width: 4px; background-color: white; transform: translateX(-50%); pointer-events: none; z-index: 2; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}.comparison-slider__handle-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background-color: white; border: 4px solid var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}.comparison-slider__handle-button svg { width: 16px; height: 16px; color: var(--primary);}.comparison-slider__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: col-resize; z-index: 3; -webkit-appearance: none; appearance: none;}.comparison-slider__label { position: absolute; bottom: 24px; padding: 8px 16px; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); color: white; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 8px; pointer-events: none; z-index: 1;}.comparison-slider__label--before { left: 24px;}.comparison-slider__label--after { right: 24px;}/* Core Strengths - Cards */.section--strengths { background-color: var(--bg-light);}.section--strengths::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 60px 60px; z-index: 1;}.strengths__grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--grid-unit) * 3); margin-top: calc(var(--grid-unit) * 12);}.card { background: white; padding: calc(var(--grid-unit) * 5); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: var(--transition-base); position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.03); display: flex; flex-direction: column;}.card:hover { transform: translateY(-8px); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);}.card__icon { width: 40px; height: 40px; color: var(--primary); margin-bottom: calc(var(--grid-unit) * 3);}.card__title { font-size: 1.125rem; margin-bottom: calc(var(--grid-unit) * 2); line-height: 1.3;}.card__text { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5;}/* Services Section - Modern Layered */.section--services { background-color: #F4F4F4; color: var(--text-dark); position: relative; padding: calc(var(--grid-unit) * 20) 0;}.section--services::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 1px, transparent 1px); background-size: 80px 80px; z-index: 1;}.services__container { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 15); align-items: center;}.services__header { display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 6);}.services__intro { font-size: 1.125rem; color: var(--text-muted); line-height: 1.6; max-width: 500px;}.services__actions { display: flex; gap: calc(var(--grid-unit) * 2); margin-top: calc(var(--grid-unit) * 2);}.services__item { font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 800; text-transform: uppercase; padding: calc(var(--grid-unit) * 4) 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; align-items: center; letter-spacing: -0.02em; transition: var(--transition-base);}.services__item:hover { color: var(--primary); padding-left: calc(var(--grid-unit) * 2);}.services__item::before { content: ''; width: 24px; height: 2px; background-color: var(--primary); margin-right: calc(var(--grid-unit) * 3); opacity: 0; transition: var(--transition-base);}.services__item:hover::before { opacity: 1;}/* About Section */.section--about { background-color: var(--bg-white); padding: calc(var(--grid-unit) * 15) 0;}.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 12); align-items: center;}.about__image-wrapper { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 4 / 5;}.about__image { width: 100%; height: 100%; object-fit: cover;}.section__subtitle { display: block; font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: calc(var(--grid-unit) * 2);}.about__actions { margin-top: calc(var(--grid-unit) * 6);}@media (max-width: 768px) { .about__grid { grid-template-columns: 1fr; }}/* Final CTA Section */.section--trust { position: relative; padding: calc(var(--grid-unit) * 20) 0; background-color: var(--bg-white); color: var(--text-dark); overflow: hidden;}.section--trust::before { content: ''; position: absolute; inset: 0; background-image: url('assets/hero-texture.png'); background-size: cover; opacity: 0.1; z-index: 1;}.trust__grid { position: relative; z-index: 2; max-width: 800px;}.trust__actions { margin-top: calc(var(--grid-unit) * 8);}.section--trust .section__title { margin-bottom: calc(var(--grid-unit) * 4);}.section--trust .section__description { color: var(--text-muted);}/* Projects Section */.section--projects { background-color: white;}.projects__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--grid-unit) * 4); margin-top: calc(var(--grid-unit) * 10);}.project { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--shadow-soft); transition: var(--transition-base);}.project:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);}.project__image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);}.project:hover .project__image { transform: scale(1.1);}@media (max-width: 1024px) { .projects__grid { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 640px) { .projects__grid { grid-template-columns: 1fr; }}/* Final CTA Section */.section--cta { background-color: var(--bg-light); padding: calc(var(--grid-unit) * 20) 0; text-align: center; color: var(--text-dark); overflow: hidden; border-top: 1px solid rgba(0, 0, 0, 0.05);}.container--cta { max-width: 900px;}.cta__title { margin-bottom: calc(var(--grid-unit) * 4); font-size: clamp(2.5rem, 5vw, 4.5rem);}.cta__text { font-size: 1.375rem; margin-bottom: calc(var(--grid-unit) * 8); font-weight: 400; opacity: 0.9; line-height: 1.5;}/* Footer */.footer { background-color: #F8F9FA; color: var(--text-dark); padding: calc(var(--grid-unit) * 15) 0 calc(var(--grid-unit) * 6); border-top: 1px solid rgba(0, 0, 0, 0.05);}.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: calc(var(--grid-unit) * 12); margin-bottom: calc(var(--grid-unit) * 12);}.footer__brand img { margin-bottom: calc(var(--grid-unit) * 4);}.footer__brand p { color: var(--text-muted); font-size: 1.125rem; max-width: 300px;}.footer__title { font-weight: 800; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: calc(var(--grid-unit) * 5);}.footer__links li { margin-bottom: calc(var(--grid-unit) * 3);}.footer__links a { color: var(--text-muted); transition: var(--transition-base);}.footer__links a:hover { color: var(--primary); padding-left: 5px;}.footer__contact-list li { display: flex; align-items: center; gap: calc(var(--grid-unit) * 2); color: var(--text-muted); margin-bottom: calc(var(--grid-unit) * 2);}.footer__contact-list svg { width: 20px; height: 20px; color: var(--primary); flex-shrink: 0;}.footer__bottom { padding-top: calc(var(--grid-unit) * 6); border-top: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.875rem; color: rgba(255, 255, 255, 0.4); display: flex; justify-content: space-between;}/* Responsiveness */@media (max-width: 1024px) { .container { padding: 0 calc(var(--grid-unit) * 3); } .hero__images-wrapper { grid-template-rows: repeat(2, 150px); } .intro__grid, .services__container { grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 6); } .strengths__grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }}@media (max-width: 768px) { h1 { font-size: clamp(2.5rem, 8vw, 3rem); } h2 { font-size: clamp(1.75rem, 6vw, 2.25rem); margin-bottom: calc(var(--grid-unit) * 4); } .section { padding: calc(var(--grid-unit) * 10) 0; } /* Hero Mobile */ .hero { padding-top: calc(var(--grid-unit) * 8); } .hero__top { grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 4); margin-bottom: calc(var(--grid-unit) * 6); } .hero__title { text-align: center; } .hero__content-right { text-align: center; } .hero__actions { justify-content: center; flex-direction: column; width: 100%; } .hero__actions .btn { width: 100%; } .hero__images-wrapper { display: block; margin-bottom: -50px; } .hero__image--left, .hero__image--right { display: none; } .hero__image--center { width: 100%; height: 250px; border-radius: var(--radius-md); } /* About Section Mobile */ .about__grid { grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 6); } .about__actions { margin-top: calc(var(--grid-unit) * 4); } /* Intro Slider Mobile */ .intro__visual { order: 1; /* Move slider AFTER text */ margin-top: calc(var(--grid-unit) * 6); } /* Services Section Mobile */ .services__actions { flex-direction: column; gap: calc(var(--grid-unit) * 2); } .services__actions .btn { width: 100%; } /* Strengths Grid */ .strengths__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 8); } .nav { display: none; } .btn--header { display: none; } .nav-toggle { display: block; background: none; border: none; width: 30px; height: 20px; position: relative; } .nav-toggle span { display: block; width: 100%; height: 2px; background-color: var(--text-dark); margin-bottom: 6px; }}/* Visual Hierarchy & Utilities */.section__title--center { text-align: center;}.section__description--center { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto;}.section__description { font-size: 1.25rem; color: var(--text-muted); line-height: 1.7;}/* Local Section - High Contrast & Premium */.section--local { position: relative; overflow: hidden; background-color: var(--text-titles); color: white; padding: calc(var(--grid-unit) * 20) 0;}.section--local .section__title { color: white; margin-bottom: calc(var(--grid-unit) * 4);}.section--local .section__description { color: rgba(255, 255, 255, 0.9); font-size: 1.5rem; line-height: 1.6; max-width: 900px; margin-left: auto; margin-right: auto;}.section--local::after { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%); pointer-events: none;}/* Final CTA Section Refinement */.section--cta { background-color: var(--bg-white); border-top: none;}.cta__card { background-color: #f2f4f2; /* Improved contrast against pure white */ padding: calc(var(--grid-unit) * 12); border-radius: 40px; border: 1px solid rgba(0, 0, 0, 0.05); /* Added subtle border */ text-align: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.04); max-width: 1000px; margin: 0 auto; transition: var(--transition-base);}.cta__card:hover { transform: translateY(-8px); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);}.cta__card .cta__title { margin-bottom: calc(var(--grid-unit) * 3);}.cta__card .cta__text { color: var(--text-muted); font-size: 1.25rem; margin-bottom: calc(var(--grid-unit) * 6); max-width: 600px; margin-left: auto; margin-right: auto;}@media (max-width: 768px) { .cta__card { padding: calc(var(--grid-unit) * 8) calc(var(--grid-unit) * 4); border-radius: 24px; } .section--local .section__description { font-size: 1.125rem; }}/* --- Services Page Styles --- *//* Compact Hero */.hero--compact { padding-bottom: calc(var(--grid-unit) * 12); min-height: auto;}.hero--compact .hero__container { display: flex; justify-content: center;}.hero__content-center { text-align: center; max-width: 900px;}.hero__content-center .hero__title { text-align: center; margin-bottom: calc(var(--grid-unit) * 3);}/* Services Rows */.section--services-list { background-color: var(--bg-white); padding: calc(var(--grid-unit) * 12) 0;}.service-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 12); align-items: center; margin-bottom: calc(var(--grid-unit) * 12); padding-bottom: calc(var(--grid-unit) * 12); border-bottom: 1px solid rgba(0, 0, 0, 0.05);}.service-row:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none;}.service-row--reverse { direction: rtl; /* Quick way to swap columns visually */}.service-row--reverse .service-row__content { direction: ltr; /* Reset text direction */}.service-row__image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); height: 400px;}.service-row__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}.service-row:hover .service-row__image img { transform: scale(1.03);}.service-row__content h3 { color: var(--primary); margin-bottom: calc(var(--grid-unit) * 2);}.service-row__content h4 { font-size: 1rem; margin-top: calc(var(--grid-unit) * 4); margin-bottom: calc(var(--grid-unit) * 2); color: var(--text-titles);}.service-row__content p { color: var(--text-muted); font-size: 1.0625rem; margin-bottom: calc(var(--grid-unit) * 2);}.service-list { list-style: disc; padding-left: calc(var(--grid-unit) * 3); color: var(--text-muted); margin-bottom: calc(var(--grid-unit) * 4);}.service-list li { margin-bottom: calc(var(--grid-unit) * 1);}.btn--sm { padding: calc(var(--grid-unit) * 1.5) calc(var(--grid-unit) * 3); font-size: 0.75rem;}/* Process Section */.section--process { padding: calc(var(--grid-unit) * 15) 0;}.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--grid-unit) * 4); margin-top: calc(var(--grid-unit) * 8);}.process-card { background: white; padding: calc(var(--grid-unit) * 4); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); position: relative; overflow: hidden; text-align: center; transition: var(--transition-base);}.process-card:hover { transform: translateY(-5px);}.process-card__number { font-size: 4rem; font-weight: 800; color: rgba(0, 0, 0, 0.03); position: absolute; top: -10px; right: -10px; line-height: 1;}.process-card h3 { font-size: 1.25rem; margin-bottom: calc(var(--grid-unit) * 2); color: var(--text-titles); position: relative;}.process-card p { font-size: 0.9375rem; color: var(--text-muted); position: relative;}/* Local Grid on Services Page */.local-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(var(--grid-unit) * 10); align-items: center; margin-top: calc(var(--grid-unit) * 6);}.local-quote blockquote { font-size: 1.5rem; font-weight: 700; font-style: italic; color: white; border-left: 4px solid var(--primary); padding-left: calc(var(--grid-unit) * 4); line-height: 1.4;}/* FAQ Section */.faq-list { margin-top: calc(var(--grid-unit) * 8); display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 2);}.faq-item { background: white; border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition-base);}.faq-item[open] { box-shadow: var(--shadow-soft); border-color: transparent;}.faq-item summary { padding: calc(var(--grid-unit) * 3); font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 50px;}.faq-item summary::-webkit-details-marker { display: none;}.faq-item summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--primary); font-weight: 400; transition: transform 0.3s;}.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg);}.faq-answer { padding: 0 calc(var(--grid-unit) * 3) calc(var(--grid-unit) * 3); color: var(--text-muted); line-height: 1.6; border-top: 1px solid rgba(0, 0, 0, 0.03);}/* Responsive Services Page */@media (max-width: 900px) { .service-row, .service-row--reverse { grid-template-columns: 1fr; direction: ltr; /* Reset visual swap */ gap: calc(var(--grid-unit) * 4); } .service-row__image { height: 250px; } .process-grid { grid-template-columns: repeat(2, 1fr); } .local-grid { grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 6); }}@media (max-width: 600px) { .process-grid { grid-template-columns: 1fr; }}/* --- Projects Page Styles --- */.section--gallery { padding-top: calc(var(--grid-unit) * 10);}.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: calc(var(--grid-unit) * 2); /* Narrower gap for cleaner tile look */}.gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-light); box-shadow: var(--shadow-soft); transition: var(--transition-base); cursor: pointer;}.gallery-item:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);}.gallery-item__image { aspect-ratio: 1 / 1; overflow: hidden;}.gallery-item__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease;}.gallery-item:hover .gallery-item__image img { transform: scale(1.05);}@media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile for tiles */ gap: calc(var(--grid-unit) * 1); }}/* --- Over Ons Page Styles --- *//* Story Section */.section--story p { font-size: 1.125rem; line-height: 1.8; color: var(--text-muted); max-width: 800px; margin: 0 auto calc(var(--grid-unit) * 4); text-align: center;}/* Selling Points Grid (Creative Table Replacement) */.selling-points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: calc(var(--grid-unit) * 6); margin-top: calc(var(--grid-unit) * 8);}/* --- Over Ons Page Styles (Refined) --- *//* Hero Text */.hero__text { font-size: 1.2rem; line-height: 1.6; color: var(--text-muted); font-weight: 500;}/* Story Section */.section--story p { font-size: 1.25rem; line-height: 1.9; color: var(--text-dark); max-width: 800px; margin: 0 auto calc(var(--grid-unit) * 6); text-align: left; font-weight: 400;}.story-content { border-left: 2px solid var(--primary); padding-left: calc(var(--grid-unit) * 8); margin-top: calc(var(--grid-unit) * 8);}/* Selling Points Grid (Creative Table Replacement) */.section--why-different { background-color: var(--bg-light); padding: calc(var(--grid-unit) * 16) 0;}.selling-points-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: calc(var(--grid-unit) * 6); margin-top: calc(var(--grid-unit) * 10);}.selling-point-card { background: white; padding: calc(var(--grid-unit) * 8); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* Subtle shadow */ text-align: left; transition: var(--transition-base); border: 1px solid rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; align-items: flex-start;}.selling-point-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); /* More lift */}.selling-point-icon { font-size: 2rem; margin-bottom: calc(var(--grid-unit) * 4); display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--bg-light); border-radius: 12px; color: var(--primary);}.selling-point-card h3 { margin-bottom: calc(var(--grid-unit) * 2); color: var(--text-titles); font-size: 1.35rem; font-weight: 700;}.selling-point-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.6;}/* Specialization Grid (Feature List) */.section--specialization { background-color: white; padding: calc(var(--grid-unit) * 16) 0;}.specialization-list { max-width: 1000px; margin: calc(var(--grid-unit) * 10) auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--grid-unit) * 8);}.specialization-item { padding: calc(var(--grid-unit) * 6); background: #FAFAFA; border-radius: var(--radius-md); border-left: 4px solid var(--primary); transition: background-color 0.3s ease;}.specialization-item:hover { background: #F0F0F0;}.specialization-item h3 { color: var(--text-titles); font-size: 1.3rem; margin-bottom: calc(var(--grid-unit) * 2); font-weight: 600;}.specialization-item p { color: var(--text-muted); margin: 0; font-size: 1.05rem;}.specialization-note { grid-column: 1 / -1; margin-top: calc(var(--grid-unit) * 4); padding: calc(var(--grid-unit) * 6); background: white; border: 1px dashed var(--primary); /* Dashed border for distinct look */ border-radius: var(--radius-md); text-align: center; font-weight: 600; color: var(--text-titles); font-size: 1.1rem;}/* Local & Personal Section */.section--local-personal { padding-bottom: calc(var(--grid-unit) * 20); padding-top: calc(var(--grid-unit) * 10);}.local-personal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 16); align-items: center; margin-top: calc(var(--grid-unit) * 8);}.local-content h2 { margin-bottom: calc(var(--grid-unit) * 6); color: var(--text-titles); font-size: 2.5rem; /* Larger */ font-weight: 800; line-height: 1.1;}.local-content p { color: var(--text-muted); font-size: 1.125rem; line-height: 1.7; margin-bottom: calc(var(--grid-unit) * 4);}.local-list { list-style: none; /* Custom bullets */ padding-left: 0; color: var(--text-dark);}.local-list li { margin-bottom: calc(var(--grid-unit) * 3); padding-left: 30px; position: relative; font-weight: 500;}.local-list li::before { content: 'Create'; content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background-color: var(--primary); border-radius: 50%;}.personal-card { background: white; border-radius: 200px 200px 20px 20px; /* Unique shape - "Arch" */ overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1); position: relative;}.personal-card__image { height: 400px; overflow: hidden;}.personal-card__image img { width: 100%; height: 100%; object-fit: cover;}.personal-card__content { padding: calc(var(--grid-unit) * 8); text-align: center; background: white;}.personal-card__content h3 { font-size: 1.1rem; margin-bottom: calc(var(--grid-unit) * 4); color: var(--primary); text-transform: uppercase; letter-spacing: 1px; font-weight: 700;}.personal-card__content blockquote { font-style: italic; color: var(--text-titles); margin-bottom: calc(var(--grid-unit) * 4); font-size: 1.25rem; line-height: 1.5; font-weight: 600;}.personal-card__content cite { font-weight: 400; color: var(--text-muted); font-style: normal; display: block; font-size: 0.9rem;}@media (max-width: 900px) { .section--story p, .story-content { padding-left: 0; border-left: none; text-align: center; } .specialization-list { grid-template-columns: 1fr; } .local-personal-grid { grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 8); } .local-content h2 { font-size: 2rem; } .personal-card { max-width: 400px; margin: calc(var(--grid-unit) * 8) auto 0; border-radius: 20px; /* Standard radius on mobile */ }}/* --- Contact Page Styles --- */.section--contact-page { padding: calc(var(--grid-unit) * 12) 0; background-color: var(--bg-white);}.contact-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--grid-unit) * 10); align-items: flex-start;}@media (min-width: 1024px) { .contact-page-grid { grid-template-columns: 1fr 1.2fr; gap: calc(var(--grid-unit) * 20); }}.contact-details__title { font-size: 2.5rem; line-height: 1.1; margin-bottom: calc(var(--grid-unit) * 4); text-transform: none; /* Let the casing handle it */}.contact-details__text { font-size: 1.125rem; color: var(--text-muted); margin-bottom: calc(var(--grid-unit) * 8); max-width: 500px;}.contact-info-list { display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 5);}.contact-info-item { display: flex; gap: calc(var(--grid-unit) * 3); align-items: flex-start;}.contact-info-icon { width: 48px; height: 48px; background: var(--bg-light); border-radius: 12px; padding: 12px; color: var(--primary); flex-shrink: 0;}.contact-info-item strong { display: block; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px;}.contact-info-item p { font-size: 1.1rem; font-weight: 600; color: var(--text-titles);}/* Contact Form */.contact-form-container { background: var(--bg-light); padding: calc(var(--grid-unit) * 8); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);}.contact-form { display: flex; flex-direction: column; gap: calc(var(--grid-unit) * 6);}.form-group { display: flex; flex-direction: column; gap: 8px;}.form-group label { font-size: 0.9rem; font-weight: 700; color: var(--text-titles); text-transform: uppercase; margin-bottom: 4px;}.form-group input,.form-group textarea { padding: calc(var(--grid-unit) * 3); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; transition: var(--transition-base); background: white;}.form-group input:focus,.form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(213, 97, 11, 0.1);}/* Form Tiles (Icon Select) */.form-tiles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--grid-unit) * 2); margin-top: 8px;}@media (min-width: 640px) { .form-tiles-grid { grid-template-columns: repeat(3, 1fr); }}.form-tile { position: relative; cursor: pointer;}.form-tile input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}.form-tile__content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: calc(var(--grid-unit) * 3); background: white; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--radius-md); transition: var(--transition-base); text-align: center; height: 100%;}.form-tile__icon { font-size: 1.5rem;}.form-tile__label { font-size: 0.85rem; font-weight: 600; color: var(--text-dark);}.form-tile input:checked+.form-tile__content { border-color: var(--primary); background: rgba(213, 97, 11, 0.05);}.form-tile:hover .form-tile__content { border-color: var(--primary);}/* Privacy Checkbox */.form-checkbox { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 0.9rem; color: var(--text-muted);}.form-checkbox input { width: 20px; height: 20px; accent-color: var(--primary); cursor: pointer;}.w-full { width: 100%;}/* Map Section */.section--map { margin-top: calc(var(--grid-unit) * 10); position: relative;}.map-background { height: 600px; background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url('assets/belgium.png'); background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); margin: 0 calc(var(--grid-unit) * 4); overflow: hidden;}.map-card { background: white; padding: calc(var(--grid-unit) * 8); border-radius: var(--radius-md); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1); max-width: 500px; text-align: center; z-index: 2;}.map-card h3 { font-size: 1.75rem; margin-bottom: calc(var(--grid-unit) * 2); text-transform: none;}.map-card p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: calc(var(--grid-unit) * 4);}.region-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}.region-tag { background: var(--bg-light); padding: 6px 16px; border-radius: 50px; font-size: 0.9rem; font-weight: 700; color: var(--primary);}@media (max-width: 900px) { .contact-page-grid { grid-template-columns: 1fr; gap: calc(var(--grid-unit) * 6); } .contact-details { text-align: left; } .contact-details__title { font-size: 1.5rem; margin-bottom: calc(var(--grid-unit) * 2); word-wrap: break-word; } .contact-details__text { margin-left: 0; margin-right: 0; margin-bottom: calc(var(--grid-unit) * 4); font-size: 1rem; } .contact-info-item { justify-content: flex-start; text-align: left; align-items: flex-start; } .contact-info-icon { width: 40px; height: 40px; padding: 10px; } .hero--compact .hero__text { margin-bottom: 0; } .contact-form-container { padding: calc(var(--grid-unit) * 4); overflow-x: hidden; } .form-tiles-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .form-tile__content { padding: 12px 8px; } .map-background { height: auto; min-height: 400px; margin: 0 16px; padding: 20px 0; } .map-card { max-width: 90%; padding: calc(var(--grid-unit) * 4); margin: 0 16px; } .map-card h3 { font-size: 1.5rem; } .map-card p { font-size: 1rem; margin-bottom: calc(var(--grid-unit) * 3); } .region-tags { gap: 8px; padding-bottom: 16px; } .region-tag { padding: 4px 12px; font-size: 0.85rem; }}/* Cookie Consent Banner */#cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15); z-index: 9999; padding: calc(var(--grid-unit) * 3); transform: translateY(100%); transition: transform 0.3s ease-out;}#cookie-banner.cookie-banner--visible { transform: translateY(0);}.cookie-banner__content { max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--grid-unit) * 4);}.cookie-banner__text { flex: 1;}.cookie-banner__text h3 { font-size: 1.25rem; margin-bottom: calc(var(--grid-unit) * 1); color: var(--text-titles); text-transform: none;}.cookie-banner__text p { font-size: 0.95rem; color: var(--text-muted); margin: 0; line-height: 1.5;}.cookie-banner__text a { color: var(--primary); text-decoration: underline; font-weight: 600;}.cookie-banner__actions { display: flex; gap: calc(var(--grid-unit) * 2); flex-shrink: 0;}.cookie-btn { padding: calc(var(--grid-unit) * 2) calc(var(--grid-unit) * 4); font-weight: 700; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; cursor: pointer; border: none; border-radius: 100px; transition: var(--transition-base); white-space: nowrap;}.cookie-btn--primary { background-color: var(--primary); color: white;}.cookie-btn--primary:hover { background-color: var(--primary-dark); transform: scale(1.05);}.cookie-btn--secondary { background-color: transparent; border: 1.5px solid var(--primary); color: var(--primary);}.cookie-btn--secondary:hover { background-color: var(--primary); color: white;}@media (max-width: 768px) { .cookie-banner__content { flex-direction: column; text-align: center; gap: calc(var(--grid-unit) * 3); } .cookie-banner__actions { width: 100%; justify-content: center; } .cookie-btn { flex: 1; max-width: 200px; }}