/*
  Theme: Computer And Office Equipment - Hp Inc Argentina
  Design System: Modern with Hyperrealistic Textures
  Color Scheme: Split-Complementary
  Animation Style: Particle Animation
  Fonts: Playfair Display (Headings), Source Sans Pro (Body)
*/

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

1.  CSS Variables
2.  Base Styles & Resets
3.  Typography
4.  Layout (Container, Grid, Columns)
5.  Utility Classes
6.  Header & Navigation
7.  Global Button Styles
8.  Hero Section
9.  Card Styles (General & Specific)
    9.1 General Card
    9.2 Process Step Card
    9.3 Portfolio/Gallery/Project Card
    9.4 Resource Card
    9.5 Event Card
    9.6 Award Item
10. Section Specific Styles
    10.1 About Preview
    10.2 Our Process
    10.3 Portfolio
    10.4 History (Accordion)
    10.5 Projects
    10.6 Sustainability
    10.7 Awards & Accolades
    10.8 Events Calendar
    10.9 External Resources
    10.10 Contact Section (Main Page)
11. Page Specific Styles
    11.1 General Page Title Section
    11.2 About Page
    11.3 Contact Page (Standalone)
    11.4 Privacy & Terms Pages
    11.5 Success Page
12. Footer
13. Parallax & Overlays
14. Animations & Transitions
15. Glassmorphism
16. Particle Styles
17. Cookie Consent Popup
18. Responsive Media Queries
-------------------------------------------------------------------*/

/* 1. CSS Variables
-------------------------------------------------------------------*/
:root {
    /* Fonts */
    --font-primary: 'Source Sans Pro', sans-serif;
    --font-secondary: 'Playfair Display', serif;

    /* Base Colors (Split-Complementary based on HP Blue) */
    --color-primary: #007DBA;        /* HP Blue - Main */
    --color-primary-dark: #005A87;   /* Darker shade of primary */
    --color-primary-light: #61AEDB;  /* Lighter shade of primary */

    --color-accent1: #E87A04;        /* Vibrant Orange (Split Complement 1) */
    --color-accent1-dark: #C76403;
    --color-accent2: #FFC107;        /* Vibrant Yellow (Split Complement 2) - was #FFAA00 */
    --color-accent2-dark: #D9A400;

    /* Neutral Colors */
    --color-text: #333333;
    --color-text-light: #555555;
    --color-text-headings: #222222;
    --color-text-inverted: #FFFFFF;
    --color-background: #F4F7F6;
    --color-surface: #FFFFFF;
    --color-border: #DEE2E6;
    --color-light-gray: #E9ECEF;
    --color-medium-gray: #CED4DA;
    --color-dark-gray: #495057;

    --color-dark-footer: #222831;
    --color-footer-text: #EEEEEE;
    --color-footer-link: #B0BEC5;
    --color-footer-link-hover: var(--color-accent2);

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-success: #28A745;
    --color-error: #DC3545;

    /* Gradients */
    --gradient-overlay: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5));
    --gradient-primary-accent: linear-gradient(135deg, var(--color-primary), var(--color-accent1));
    --gradient-texture-subtle: linear-gradient(rgba(255,255,255,0.05), rgba(0,0,0,0.05)); /* For hyperrealistic touch */

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.07);
    --shadow-md: 0 5px 15px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.15);
    --text-shadow-dark-bg: 1px 1px 3px rgba(0,0,0,0.5);

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease-in-out;

    /* Borders */
    --border-radius-sm: 5px;
    --border-radius-md: 8px;

    /* Spacing */
    --spacing-xs: 0.5rem; /* 8px */
    --spacing-sm: 1rem;   /* 16px */
    --spacing-md: 1.5rem; /* 24px */
    --spacing-lg: 2.5rem; /* 40px */
    --spacing-xl: 4rem;   /* 64px */

    /* Header height (approximate) */
    --header-height: 70px; /* Adjust if header padding/logo size changes */
}

/* 2. Base Styles & Resets
-------------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px; /* Base font size */
}

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

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

ul, ol {
    list-style: none;
}

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

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

/* 3. Typography
-------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--color-text-headings);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); } /* Responsive font size */
h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.5rem, 3vw, 1.8rem); color: var(--color-primary-dark); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
p { margin-bottom: var(--spacing-md); }

.section-title {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
    padding-bottom: var(--spacing-sm);
}
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: var(--border-radius-sm);
}

.section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-text-light);
    max-width: 750px;
    margin: calc(-1 * var(--spacing-md)) auto var(--spacing-lg) auto;
}

.text-center { text-align: center; }
.text-white { color: var(--color-text-inverted) !important; }

/* 4. Layout (Container, Grid, Columns)
-------------------------------------------------------------------*/
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--spacing-sm)); /* Gutter compensation */
}
.column {
    padding: 0 var(--spacing-sm); /* Gutter */
    flex-basis: 100%;
    margin-bottom: var(--spacing-md);
}
@media (min-width: 768px) {
    .column { flex: 1; }
    .column.is-two-thirds {
        flex-basis: 66.666%;
        max-width: 66.666%;
    }
    .column.is-one-third {
        flex-basis: 33.333%;
        max-width: 33.333%;
    }
}

.grid {
    display: grid;
    gap: var(--spacing-md);
}
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 992px) {
    .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
}

/* 5. Utility Classes
-------------------------------------------------------------------*/
.content-section {
    padding: var(--spacing-xl) 0;
    position: relative; /* For overlays or pseudo-elements */
}

.textured-background {
    background-color: var(--color-light-gray);
    /* Example: background-image: url('image/subtle-noise-texture.png'), var(--gradient-light); */
    /* background-blend-mode: overlay; */
}
.textured-background-light {
    background-color: var(--color-background);
}

.link-styled, .read-more-link {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border: 2px solid var(--color-accent1);
    color: var(--color-accent1);
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all var(--transition-speed) var(--transition-timing);
}
.link-styled:hover, .read-more-link:hover {
    background-color: var(--color-accent1);
    color: var(--color-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.read-more-link { /* More subtle variation perhaps */
    border-color: var(--color-primary);
    color: var(--color-primary);
}
.read-more-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* 6. Header & Navigation
-------------------------------------------------------------------*/
.site-header {
    background-color: var(--color-surface);
    padding: var(--spacing-sm) 0;
    box-shadow: var(--shadow-md);
    position: fixed; /* Fixed navigation */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color var(--transition-speed) var(--transition-timing);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo img {
    max-height: 40px; /* Adjust as needed */
    transition: transform var(--transition-speed) var(--transition-timing);
}
.logo:hover img {
    transform: scale(1.05);
}

.main-navigation ul {
    display: flex;
}
.main-navigation li {
    margin-left: var(--spacing-md);
}
.main-navigation a {
    color: var(--color-text);
    font-weight: 600;
    padding: var(--spacing-xs) 0;
    position: relative;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
.main-navigation a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -3px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-primary);
    transition: width var(--transition-speed) var(--transition-timing);
}
.main-navigation a:hover::after,
.main-navigation a.active::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: 1001;
}
.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text);
    position: relative;
    transition: all var(--transition-speed) var(--transition-timing);
}
.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-text);
    position: absolute;
    transition: all var(--transition-speed) var(--transition-timing);
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

.menu-toggle[aria-expanded="true"] .hamburger-icon { background-color: transparent; }
.menu-toggle[aria-expanded="true"] .hamburger-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .hamburger-icon::after { top: 0; transform: rotate(-45deg); }

/* 7. Global Button Styles
-------------------------------------------------------------------*/
.btn, button, input[type="submit"], input[type="button"] {
    display: inline-block;
    font-family: var(--font-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-lg);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-speed) var(--transition-timing);
    border: none;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: var(--shadow-sm);
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
    background-color: var(--color-primary-dark);
    color: var(--color-white); /* Ensure text color remains white on hover */
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    text-decoration: none;
}

.btn-accent, .cta-button { /* .cta-button used in HTML */
    background-color: var(--color-accent1);
}
.btn-accent:hover, .cta-button:hover {
    background-color: var(--color-accent1-dark);
}

.btn-outline-primary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-outline-accent {
    background-color: transparent;
    color: var(--color-accent1);
    border: 2px solid var(--color-accent1);
}
.btn-outline-accent:hover {
    background-color: var(--color-accent1);
    color: var(--color-white);
}

/* 8. Hero Section
-------------------------------------------------------------------*/
.hero-section {
    position: relative;
    color: var(--color-text-inverted);
    padding: var(--spacing-xl) 0; /* Dynamic padding */
    padding-top: calc(var(--header-height) + var(--spacing-xl)); /* Offset for fixed header */
    padding-bottom: var(--spacing-xl);
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height)); /* Example for full viewport feel, adjust as needed */
}

.hero-overlay { /* Used for darkening background images */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-overlay);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.hero-section h1 {
    color: var(--color-text-inverted); /* IMPORTANT: Hero text must be white */
    text-shadow: var(--text-shadow-dark-bg);
    margin-bottom: var(--spacing-md);
}

.hero-section p {
    font-size: 1.2rem;
    color: var(--color-text-inverted); /* IMPORTANT: Hero text must be white */
    text-shadow: var(--text-shadow-dark-bg);
    margin-bottom: var(--spacing-lg);
    line-height: 1.8;
}

/* 9. Card Styles
-------------------------------------------------------------------*/
/* 9.1 General Card */
.card {
    background-color: var(--color-surface);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);
    display: flex;
    flex-direction: column;
    height: 100%; /* For equal height cards in a grid */
    text-align: center; /* STRICT: Center content */
}

.card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.card-image, .image-container { /* STRICT: Wrapper for image */
    width: 100%;
    overflow: hidden;
    display: flex; /* For centering the image itself if it's smaller than container */
    justify-content: center;
    align-items: center;
    background-color: var(--color-light-gray); /* Placeholder if image is transparent */
}

.card-image img {
    width: 100%;
    height: 220px; /* STRICT: Fixed height for image containers */
    object-fit: cover; /* STRICT: Crop image to fit */
    display: block; /* Remove extra space */
    border-radius: 0; /* Images inside cards typically don't need radius if card has overflow:hidden */
    margin: 0 auto; /* STRICT: Center image if its aspect ratio doesn't fill width */
}

.card-content {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button to bottom if present */
}

.card-content h3 {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-sm);
}

.card-content p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    flex-grow: 1; /* Allows text to take up available space */
}
.card .btn, .card .link-styled, .card .read-more-link {
    margin-top: auto; /* Pushes button to the bottom of the card content */
    align-self: center; /* Center button horizontally */
}

/* 9.2 Process Step Card */
.step.card .card-image img {
    height: 200px; /* Slightly different height for process steps */
}
.step-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
    font-family: var(--font-secondary);
}

/* 9.3 Portfolio/Gallery/Project Card */
.gallery-item .card-image img,
.project-item .card-image img {
    height: 250px;
}

/* 9.4 Resource Card */
.resource-item .card-content h3 {
    font-size: 1.2rem;
}
.resource-item .card-content h3 a {
    color: var(--color-primary-dark);
}
.resource-item .card-content p {
    font-size: 0.9rem;
    margin-top: var(--spacing-xs);
}

/* 9.5 Event Card */
.event-item .card-content {
    text-align: left; /* Events might be better left-aligned */
}
.event-date {
    display: block;
    font-weight: 600;
    color: var(--color-accent1);
    margin-bottom: var(--spacing-xs);
    font-size: 0.9rem;
}

/* 9.6 Award Item (Not strictly a card, but similar structure) */
.award-item {
    text-align: center;
    padding: var(--spacing-md);
}
.award-image {
    max-width: 120px;
    height: auto;
    margin: 0 auto var(--spacing-sm) auto; /* STRICT: Center image */
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}
.award-item h3 {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
}

/* 10. Section Specific Styles
-------------------------------------------------------------------*/
/* 10.1 About Preview */
#about-preview .column img {
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
}

/* 10.2 Our Process */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.progress-indicator-container {
    text-align: center;
    margin-top: var(--spacing-lg);
}
.progress-indicator-container p {
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
}
.progress-bar {
    width: 100%;
    max-width: 600px;
    height: 25px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background-color: var(--color-light-gray);
    margin: 0 auto;
}
.progress-bar::-webkit-progress-bar {
    background-color: var(--color-light-gray);
    border-radius: var(--border-radius-md);
}
.progress-bar::-webkit-progress-value {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-md);
    transition: width 0.8s var(--transition-timing);
}
.progress-bar::-moz-progress-bar { /* Firefox */
    background-color: var(--color-primary);
    border-radius: var(--border-radius-md);
    transition: width 0.8s var(--transition-timing);
}

/* 10.4 History (Accordion) */
.accordion {
    max-width: 800px;
    margin: 0 auto;
}
.accordion-item {
    background-color: var(--color-surface);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.accordion-header {
    background-color: transparent; /* Cleaner look */
    color: var(--color-text-headings);
    cursor: pointer;
    padding: var(--spacing-md);
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: var(--font-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--transition-speed) var(--transition-timing);
}
.accordion-header:hover {
    background-color: var(--color-light-gray);
}
.accordion-header .accordion-icon {
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform var(--transition-speed) var(--transition-timing);
    color: var(--color-primary);
}
.accordion-header[aria-expanded="true"] .accordion-icon {
    transform: rotate(45deg);
}
.accordion-content {
    padding: 0 var(--spacing-md);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}
.accordion-content p {
    padding: var(--spacing-md) 0;
    font-size: 1rem;
    color: var(--color-text-light);
    margin:0;
}
#history.parallax-background .accordion-item {
    background-color: rgba(255,255,255,0.9); /* Slight transparency for accordion on parallax */
}
#history.parallax-background .accordion-header,
#history.parallax-background .accordion-content p {
    color: var(--color-text); /* Ensure readability */
}


/* 10.6 Sustainability */
.sustainability-points {
    list-style: none;
    padding-left: 0;
    margin-top: var(--spacing-md);
}
.sustainability-points li {
    padding-left: 35px;
    position: relative;
    margin-bottom: var(--spacing-sm);
    font-size: 1.05rem;
}
.sustainability-points .icon-animated { /* Placeholder for JS animated icons */
    position: absolute;
    left: 0;
    top: 4px; /* Adjust vertical alignment */
    width: 24px;
    height: 24px;
    background-color: var(--color-accent2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white); /* For an icon font if used */
    font-size: 0.8rem;
}
/* Example leaf icon (replace with actual SVG or font icon) */
.sustainability-points .icon-animated[data-icon-type="leaf"]::before { content: "🌿"; font-size: 1rem; }
.sustainability-points .icon-animated[data-icon-type="recycle"]::before { content: "♻️"; font-size: 1rem; }
.sustainability-points .icon-animated[data-icon-type="globe"]::before { content: "🌍"; font-size: 1rem; }


/* 10.10 Contact Section (Main Page) */
.contact-section { /* Used on ./ */
    position: relative;
    padding: var(--spacing-xl) 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.contact-overlay { /* Specific for this section if needed, or use .hero-overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)); /* Darker overlay */
    z-index: 1;
}
.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    position: relative;
    z-index: 2;
}
.contact-info, .contact-form-container {
    flex: 1;
    min-width: 320px;
    padding: var(--spacing-lg);
    /* Glassmorphism for contact section */
    background: rgba(255, 255, 255, 0.05); /* Very subtle white */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--shadow-md);
}
.contact-info h3, .contact-form-container h3 {
    color: var(--color-text-inverted);
    margin-bottom: var(--spacing-md);
    text-shadow: var(--text-shadow-dark-bg);
}
.contact-info p, .contact-info a {
    color: var(--color-footer-link); /* Light color for readability */
    margin-bottom: var(--spacing-sm);
}
.contact-info a:hover {
    color: var(--color-text-inverted);
}

.form-group {
    margin-bottom: var(--spacing-md);
}
.form-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-inverted); /* Labels in dark contact section */
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-medium-gray);
    border-radius: var(--border-radius-sm);
    font-family: var(--font-primary);
    font-size: 1rem;
    background-color: rgba(255,255,255,0.9); /* Slightly transparent inputs */
    color: var(--color-text);
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(0,125,186,.25); /* HP Blue focus glow */
    outline: none;
    background-color: var(--color-white); /* Opaque on focus */
}
.form-group textarea {
    resize: vertical;
    min-height: 120px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-light);
    opacity: 1;
}

/* 11. Page Specific Styles
-------------------------------------------------------------------*/
/* 11.1 General Page Title Section (for inner pages) */
.page-title-section {
    position: relative;
    color: var(--color-text-inverted);
    padding: var(--spacing-lg) 0;
    padding-top: calc(var(--header-height) + var(--spacing-lg)); /* Offset for fixed header */
    padding-bottom: var(--spacing-lg);
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 40vh; /* Reduced from original prompt, use natural height as much as possible */
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-title-section .hero-overlay { /* Can reuse hero-overlay if styles are same */
    background: var(--gradient-overlay);
}
.page-title-section h1 {
    color: var(--color-text-inverted);
    text-shadow: var(--text-shadow-dark-bg);
}
.page-title-section p {
    color: var(--color-text-inverted);
    text-shadow: var(--text-shadow-dark-bg);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* 11.2 About Page */
#about-page .values-list { /* Assuming a class for the values list in about.html */
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}
#about-page .values-list li {
    background-color: var(--color-surface);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
}
#about-page .values-list .icon-animated {
    margin-right: var(--spacing-sm);
    flex-shrink: 0;
    /* Styles for these icons need to be defined, similar to sustainability */
}

/* 11.3 Contact Page (Standalone) */
.contact-form-standalone .form-group label {
    color: var(--color-text); /* Labels on light background */
}
.contact-form-standalone .form-group input,
.contact-form-standalone .form-group textarea,
.contact-form-standalone .form-group select {
    background-color: var(--color-surface); /* Opaque inputs */
}
.contact-details { padding-right: var(--spacing-lg); }
.map-section { background-color: var(--color-light-gray); padding-bottom: 0; }
.map-container {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.map-container iframe { display: block; border:0; }


/* 11.4 Privacy & Terms Pages */
.legal-text-page main { /* Assuming a wrapper class or target main directly */
    padding-top: calc(var(--header-height) + var(--spacing-lg)); /* IMPORTANT: Offset for fixed header */
}
.legal-text { /* Container for the text itself */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: var(--spacing-xl);
}
.legal-text h3 {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: 1.5rem;
    color: var(--color-primary-dark);
}
.legal-text ul {
    list-style: disc;
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.legal-text ul li {
    margin-bottom: var(--spacing-xs);
}

/* 11.5 Success Page */
body.success-page { /* Add this class to body in success.html */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* IMPORTANT: Full height */
}
.success-page main {
    flex-grow: 1; /* Allow main to take up space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height); /* Account for fixed header */
}
.success-container {
    text-align: center;
    padding: var(--spacing-lg);
}
.success-icon {
    font-size: 5rem;
    color: var(--color-success);
    margin-bottom: var(--spacing-md);
    /* SVG styles could be here or inline */
}
.success-message h1 {
    margin-bottom: var(--spacing-md);
}
.success-message p {
    margin-bottom: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.back-home-button { /* Already styled by .btn global style */
    /* Add specific overrides if needed */
}


/* 12. Footer
-------------------------------------------------------------------*/
.site-footer {
    background-color: var(--color-dark-footer);
    color: var(--color-footer-text);
    padding: var(--spacing-xl) 0 var(--spacing-md) 0;
    font-size: 0.9rem;
}
.footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}
.footer-column h4 {
    font-family: var(--font-secondary);
    color: var(--color-white);
    font-size: 1.3rem;
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--spacing-xs);
    display: inline-block;
}
.footer-column ul li {
    margin-bottom: var(--spacing-xs);
}
.footer-column a {
    color: var(--color-footer-link);
}
.footer-column a:hover {
    color: var(--color-footer-link-hover);
    text-decoration: underline;
}
.footer-column img[alt*="Logo Hp Inc"] {
    margin-top: var(--spacing-sm);
    opacity: 0.8;
}
/* IMPORTANT: Text-based social links */
.social-links-text li a {
    display: inline-block;
    padding: var(--spacing-xs) 0; /* Add some padding for easier clicking */
    /* Further styling if needed, e.g., icons via ::before if text isn't enough */
}
.social-links-text li a:hover {
    /* Specific hover for social links if different from general footer links */
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.85rem;
    color: var(--color-footer-link);
}
.footer-bottom p {
    margin: var(--spacing-xs) 0;
}

/* 13. Parallax & Overlays
-------------------------------------------------------------------*/
.parallax-background {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}
/* Generic overlay for sections with background images and text on top */
.section-with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-overlay); /* Defined in variables */
    z-index: 1;
}
.section-with-overlay > .container { /* Ensure content is above overlay */
    position: relative;
    z-index: 2;
}
.section-with-overlay .section-title,
.section-with-overlay .section-subtitle,
.section-with-overlay p,
.section-with-overlay h1, .section-with-overlay h2, .section-with-overlay h3 {
    color: var(--color-text-inverted);
    text-shadow: var(--text-shadow-dark-bg);
}

/* 14. Animations & Transitions (General, Animate.css complements this)
-------------------------------------------------------------------*/
/* Smooth transition for elements revealed by ScrollReveal */
[data-sr-id] {
    transition-property: opacity, transform, visibility;
    transition-duration: 0.6s; /* Adjust to match ScrollReveal or be slightly faster */
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}
/* Animate.css pulse for CTA - already handled by class in HTML */

/* 15. Glassmorphism (Utility class or apply directly)
-------------------------------------------------------------------*/
.glassmorphism {
    background: rgba(255, 255, 255, 0.1); /* Adjust alpha for desired transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* 16. Particle Styles (JS creates particles, CSS styles them)
-------------------------------------------------------------------*/
#particle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10; /* Far behind everything */
    pointer-events: none;
}
.particle { /* Class added by JS to each particle */
    position: absolute;
    border-radius: 50%;
    /* opacity, background-color, width, height, top, left set by JS */
}

/* 17. Cookie Consent Popup (Styles from previous HTML, can be enhanced)
-------------------------------------------------------------------*/
#cookieConsentPopup {
    /* Style is mostly inline in HTML for simplicity, can move here for consistency */
    font-family: var(--font-primary);
}
#cookieConsentPopup p a {
    color: var(--color-primary-light); /* Ensure link is visible on dark background */
}
#cookieConsentPopup #acceptCookieButton {
    background-color: var(--color-primary); /* Use theme button color */
}
#cookieConsentPopup #acceptCookieButton:hover {
    background-color: var(--color-primary-dark);
}
#cookie-settings-link { /* In footer */
    cursor: pointer;
}


/* 18. Responsive Media Queries
-------------------------------------------------------------------*/
@media (max-width: 992px) {
    .main-navigation li { margin-left: var(--spacing-sm); }
    .hero-section { min-height: auto; padding-top: calc(var(--header-height) + var(--spacing-lg)); padding-bottom: var(--spacing-lg); }
    .process-steps { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 767px) {
    html { font-size: 15px; } /* Slightly smaller base font on mobile */

    .menu-toggle { display: block; }
    .main-navigation ul {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below header */
        left: 0;
        width: 100%;
        background-color: var(--color-surface);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-sm) 0;
        border-top: 1px solid var(--color-border);
    }
    .main-navigation ul.active { display: flex; }
    .main-navigation li {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
    .main-navigation a {
        display: block;
        padding: var(--spacing-sm);
        border-bottom: 1px solid var(--color-light-gray);
    }
    .main-navigation li:last-child a { border-bottom: none; }
    .main-navigation a::after { display: none; }

    .hero-section { padding-top: calc(var(--header-height) + var(--spacing-md)); padding-bottom: var(--spacing-md); }
    .hero-section h1 { font-size: clamp(2rem, 6vw, 2.5rem); }
    .hero-section p { font-size: 1.1rem; }

    .btn, button, input[type="submit"], input[type="button"] {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.95rem;
    }

    .content-section { padding: var(--spacing-lg) 0; }
    .section-title { margin-bottom: var(--spacing-md); }
    .section-subtitle { font-size: 1rem; margin-bottom: var(--spacing-md); }

    .columns, .contact-container { flex-direction: column; }
    .column { max-width: 100%; }

    .footer-columns {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-column h4 { display: block; }

    .card-image img { height: 200px; } /* Adjust card image height for mobile */
    .step.card .card-image img { height: 180px; }
    .gallery-item .card-image img, .project-item .card-image img { height: 220px; }

    .parallax-background { background-attachment: scroll; } /* Disable parallax on mobile for performance */
}