/* CSS Reset & Normalize */
html, body {
    margin: 0;
    padding: 0;
    background-color: #fff;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Neue Plak', 'Faktum Test', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: inherit;
}

p, ul, ol, dl {
    margin: 0;
}

ul, ol {
    list-style: none;
    padding: 0;
}

a, a:hover, a:focus, a:active {
    text-decoration: none;
    color: inherit;
}

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

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    outline: none;
    border: none;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

input, select, textarea {
    outline: none;
    border: none;
    background: none;
}

input:focus, input:hover,
select:focus, select:hover,
textarea:focus, textarea:hover,
button:focus, button:hover {
    outline: none;
    border: none;
}

input:active, select:active, textarea:active, button:active {
    outline: none;
    border: none;
}

/* Base font variables and main CSS variables */
:root {
    --font-neue-plak: 'Neue Plak', sans-serif;
    --font-neue-plak-condensed: 'Neue Plak Condensed', sans-serif;
    --font-neue-plak-extended: 'Neue Plak Extended', sans-serif;
    --font-neue-plak-text: 'Neue Plak Text', sans-serif;
    --font-faktum: 'Faktum Test', sans-serif;
    --font-inter: 'Inter', sans-serif;

    /* Color Variables from main-optimized.css */
    --color-primary: #000;
    --color-secondary: #fff;
    --color-accent: #FDCB0A;
    --color-gray: #9E9E9E;
    --color-light-gray: #F1F1F1;
    --color-dark-gray: #272525;

    /* Font Size Variables from main-optimized.css */
    --font-size-xl: 200px;
    --font-size-lg: 150px;
    --font-size-md: 120px;
    --font-size-sm: 100px;
    --font-size-base: 20px;
    --font-size-36: 36px;
    --font-size-28: 28px;
    --font-size-small: 16px;

    /* Spacing Variables from main-optimized.css */
    --spacing-xl: 100px;
    --spacing-lg: 80px;
    --spacing-md: 60px;
    --spacing-sm: 50px;
    --spacing-xs: 30px;
    --spacing-xs-light: 20px;
}

/* Global font utility classes */

/* Neue Plak font family */
.font-neue-plak {
    font-family: var(--font-neue-plak);
}

.font-neue-plak-light {
    font-family: var(--font-neue-plak);
    font-weight: 300;
}

.font-neue-plak-regular {
    font-family: var(--font-neue-plak);
    font-weight: normal;
}

.font-neue-plak-bold {
    font-family: var(--font-neue-plak);
    font-weight: bold;
}

.font-neue-plak-black {
    font-family: var(--font-neue-plak);
    font-weight: 900;
}

/* Neue Plak Condensed font family */
.font-neue-plak-condensed {
    font-family: var(--font-neue-plak-condensed);
}

.font-neue-plak-condensed-regular {
    font-family: var(--font-neue-plak-condensed);
    font-weight: normal;
}

.font-neue-plak-condensed-bold {
    font-family: var(--font-neue-plak-condensed);
    font-weight: bold;
}

/* Neue Plak Extended font family */
.font-neue-plak-extended {
    font-family: var(--font-neue-plak-extended);
}

.font-neue-plak-extended-regular {
    font-family: var(--font-neue-plak-extended);
    font-weight: normal;
}

.font-neue-plak-extended-bold {
    font-family: var(--font-neue-plak-extended);
    font-weight: bold;
}

/* Neue Plak Text font family */
.font-neue-plak-text {
    font-family: var(--font-neue-plak-text);
}

.font-neue-plak-text-bold {
    font-family: var(--font-neue-plak-text);
    font-weight: bold;
}

/* Faktum Test font family */
.font-faktum {
    font-family: var(--font-faktum);
}

.font-faktum-regular {
    font-family: var(--font-faktum);
    font-weight: normal;
}

.font-faktum-bold {
    font-family: var(--font-faktum);
    font-weight: bold;
}

/* Inter font family */
.font-inter {
    font-family: var(--font-inter);
}

.font-inter-thin {
    font-family: var(--font-inter);
    font-weight: 100;
}

.font-inter-extra-light {
    font-family: var(--font-inter);
    font-weight: 200;
}

.font-inter-light {
    font-family: var(--font-inter);
    font-weight: 300;
}

.font-inter-regular {
    font-family: var(--font-inter);
    font-weight: 400;
}

.font-inter-medium {
    font-family: var(--font-inter);
    font-weight: 500;
}

.font-inter-semi-bold {
    font-family: var(--font-inter);
    font-weight: 600;
}

.font-inter-bold {
    font-family: var(--font-inter);
    font-weight: 700;
}

.font-inter-extra-bold {
    font-family: var(--font-inter);
    font-weight: 800;
}

.font-inter-black {
    font-family: var(--font-inter);
    font-weight: 900;
}

/* Font weight utility classes */
.font-thin {
    font-weight: 100 !important;
}

.font-extra-light {
    font-weight: 200 !important;
}

.font-light {
    font-weight: 300 !important;
}

.font-normal {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semi-bold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

.font-extra-bold {
    font-weight: 800 !important;
}

.font-black {
    font-weight: 900 !important;
}

/* Combined utility classes for common usage */
.title-neue-plak {
    font-family: var(--font-neue-plak);
    font-weight: bold;
}

.heading-neue-plak-condensed {
    font-family: var(--font-neue-plak-condensed);
    font-weight: bold;
}

.text-neue-plak {
    font-family: var(--font-neue-plak);
    font-weight: normal;
}

.text-faktum {
    font-family: var(--font-faktum);
    font-weight: normal;
}

.subtitle-neue-plak-extended {
    font-family: var(--font-neue-plak-extended);
    font-weight: normal;
}

.title-inter {
    font-family: var(--font-inter);
    font-weight: 700;
}

.heading-inter {
    font-family: var(--font-inter);
    font-weight: 600;
}

.text-inter {
    font-family: var(--font-inter);
    font-weight: 400;
}

.subtitle-inter {
    font-family: var(--font-inter);
    font-weight: 500;
}

.button {
    position: relative;
    display: flex;
    align-items: center;
}

.button > span {
    background-color: #2d2d2d;
    color: #fff;
    padding: 10px 20px;
    display: block;
}

.button:hover, .button:focus {
    color: #fff;
}

.button::after {
    color: #fff;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #9e9e9e;
    background-image: url('../img/arrow-top.svg');
    background-size: 11px 11px;
    background-position: center center;
    background-repeat: no-repeat;
    line-height: 1;
    font-size: 10px;
}

.button-light {
    position: relative;
    display: flex;
    align-items: center;
}

.button-light > span {
    background-color: #000;
    color: #fff;
    padding: 5px 20px;
    display: block;
    font-size: 24px;
}

.button-light:hover, .button-light:focus {
    color: #fff;
}

.button-light::after {
    color: #fff;
    content: "\e900";
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    background-color: #9e9e9e;
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 8px;
}

/* ======================================= */
/* SEMANTIC UTILITY CLASSES BASED ON MAIN.CSS */
/* ======================================= */

/* Background Color Utilities */
.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-gray {
    background-color: var(--color-gray);
}

.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-dark-gray {
    background-color: var(--color-dark-gray);
}

/* Section Background Patterns - Based on main-optimized.css analysis */
.section-dark {
    background-color: var(--color-primary);
}

.section-light {
    background-color: var(--color-secondary);
}

.section-accent {
    background-color: var(--color-accent);
}

/* Text Color Utilities */
.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

.text-accent {
    color: var(--color-accent) !important;
}

.text-gray {
    color: var(--color-gray) !important;
}

.text-light-gray {
    color: var(--color-light-gray) !important;
}

.text-dark-gray {
    color: var(--color-dark-gray) !important;
}

/* Typography Utilities - Based on main-optimized.css patterns */
.title-xl {
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.title-lg {
    font-size: var(--font-size-lg);
    color: var(--color-primary);
}

.title-lg-light {
    font-size: var(--font-size-lg);
    color: var(--color-secondary);
}

.title-md {
    font-size: var(--font-size-md);
    color: var(--color-secondary);
}

.title-md-36 {
    font-size: var(--font-size-36);
}

.title-md-28 {
    font-size: var(--font-size-28);
}

.title-sm {
    font-size: var(--font-size-sm);
    color: var(--color-light-gray);
}

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

.title-small {
    font-size: var(--font-size-small);
}

/* Home Section Patterns - Based on main-optimized.css */
.home-section {
    padding: var(--spacing-lg) 0;
}

.home-intro-style {
    background-color: var(--color-secondary);
    height: 500px;
}

.home-about-style {
    background-color: var(--color-primary);
    padding: 52px 0;
}

.home-portfolio-style {
    background-color: var(--color-secondary);
    padding: var(--spacing-lg) 0 130px;
}

/* Work Section Patterns */
.work-intro-style {
    background-color: var(--color-secondary);
    padding: 20px 0 70px;
}

.portfolios-main-style {
    background-color: var(--color-primary);
    padding: 70px 0;
}

/* Culture Section Patterns */
.culture-intro-style {
    background-color: var(--color-primary);
    padding: 20px 0 var(--spacing-xs);
}

.culture-title-style {
    font-size: 38px;
    background-color: var(--color-accent);
    margin-bottom: 20px;
    padding: 0 10px;
}

.culture-description-style {
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    line-height: 100%;
}

/* About Section Patterns */
.about-intro-style {
    background-color: var(--color-secondary);
    padding: 20px 0 70px;
}

.about-description-style {
    padding: 0 var(--spacing-xs);
    font-size: var(--font-size-base);
    color: var(--color-primary);
}

/* Leadership Section Patterns */
.leadership-main-style {
    background-color: var(--color-primary);
    padding: var(--spacing-lg) 0;
}

.leader-box-text {
    color: var(--color-secondary);
}

/* Services Section Patterns */
.services-main-style {
    background-color: var(--color-secondary);
    padding: var(--spacing-xl) 0;
}

.services-list-link {
    font-size: 90px;
    color: var(--color-primary);
    position: relative;
}

/* Clients Section Patterns */
.clients-main-style {
    background-color: var(--color-primary);
    padding: var(--spacing-md) 0;
}

/* Contact Section Patterns */
.contact-top-style {
    background-color: var(--color-primary);
    padding: var(--spacing-sm) 0 20px;
}

.contact-address-text {
    color: var(--color-secondary);
    font-size: var(--font-size-base);
}

.new-business-style {
    background-color: var(--color-secondary);
}

/* Career Section Patterns */
.career-main-style {
    background-color: var(--color-primary);
    padding: var(--spacing-xs) 0;
}

.career-text {
    color: var(--color-secondary);
}

/* Award Section Patterns */
.award-intro-style {
    background-color: var(--color-primary);
    padding: 20px 0 70px;
}

.award-competitions-style {
    background-color: var(--color-primary);
    padding: var(--spacing-sm) 0;
}

.award-text {
    color: var(--color-secondary);
}

.award-gray-text {
    color: var(--color-gray);
}

/* Layout Utilities */
.section-padding-xl {
    padding: var(--spacing-xl) 0;
}

.section-padding-lg {
    padding: var(--spacing-lg) 0;
}

.section-padding-md {
    padding: var(--spacing-md) 0;
}

.section-padding-sm {
    padding: var(--spacing-sm) 0;
}

.section-padding-xs {
    padding: var(--spacing-xs) 0;
}

/* Spacing Utilities */
.p-xs {
    padding: var(--spacing-xs);
}

.p-sm {
    padding: var(--spacing-sm);
}

.p-md {
    padding: var(--spacing-md);
}

.p-lg {
    padding: var(--spacing-lg);
}

.p-xl {
    padding: var(--spacing-xl);
}

.pt-xs {
    padding-top: var(--spacing-xs);
}

.pt-sm {
    padding-top: var(--spacing-sm);
}

.pt-md {
    padding-top: var(--spacing-md);
}

.pt-lg {
    padding-top: var(--spacing-lg);
}

.pt-xl {
    padding-top: var(--spacing-xl);
}

.pb-xs {
    padding-bottom: var(--spacing-xs);
}
.pb-xs-light {
    padding-bottom: var(--spacing-xs-light);
}
.pb-sm {
    padding-bottom: var(--spacing-sm);
}

.pb-md {
    padding-bottom: var(--spacing-md);
}

.pb-lg {
    padding-bottom: var(--spacing-lg);
}

.pb-xl {
    padding-bottom: var(--spacing-xl);
}

.px-xs {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
}

.px-sm {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.px-md {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.px-lg {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.px-xl {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}

.py-xs {
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}

.py-sm {
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
}

.py-md {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

.py-lg {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
}

.py-xl {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* Margin Utilities */
.m-xs {
    margin: var(--spacing-xs);
}

.m-sm {
    margin: var(--spacing-sm);
}

.m-md {
    margin: var(--spacing-md);
}

.m-lg {
    margin: var(--spacing-lg);
}

.m-xl {
    margin: var(--spacing-xl);
}

.mt-xs {
    margin-top: var(--spacing-xs);
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mb-xs {
    margin-bottom: var(--spacing-xs);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}


/* Object Fit */
.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}