/* style.css */

/*------------------------------------------------------------------
[Table of Contents]

1.  CSS Variables
2.  Global Resets & Base Styles
3.  Layout & Container
4.  Utility Classes
5.  Header & Navigation
6.  Buttons (Global)
7.  Hero Section
8.  Card Styles (Global & Specific)
    8.1. Generic Card
    8.2. Step Card (Our Process)
    8.3. Instructor Card
    8.4. Workshop Card
    8.5. Portfolio Item
    8.6. Webinar Card
9.  Section Specific Styles
    9.1. Our Process Section
    9.2. Instructors Section
    9.3. Workshops Section
    9.4. Portfolio Section
    9.5. History Section
    9.6. Clientele Section
    9.7. Behind the Scenes Section
    9.8. Webinars Section
    9.9. External Resources Section
    9.10. Contact Section & Form
    9.11. Page Title Section (About, Contact, Legal)
    9.12. Success Page
    9.13. Privacy & Terms Pages
10. Footer
11. Animations & Transitions
    11.1. Barba.js Page Transitions
    11.2. Scroll Animations
    11.3. Microinteractions
12. Responsive Design
-------------------------------------------------------------------*/

/* 1. CSS Variables */
:root {
    --font-primary: 'DM Sans', sans-serif;
    --font-secondary: 'Space Grotesk', sans-serif;

    /* Brutalist & Gradient Color Scheme */
    --color-primary-start: #FF8C00; /* Vibrant Orange */
    --color-primary-end: #FFAE42;   /* Lighter Orange/Tangerine */
    --color-primary-gradient: linear-gradient(135deg, var(--color-primary-start) 0%, var(--color-primary-end) 100%);
    --color-primary-gradient-hover: linear-gradient(135deg, var(--color-primary-end) 0%, var(--color-primary-start) 100%);

    --color-accent-dark: #2c3e50; /* Dark Slate Blue */
    --color-accent-medium: #34495e; /* Medium Slate Blue */
    --color-accent-light: #7f8c8d;  /* Greyish Blue */

    --color-text-primary: #212121; /* Very Dark Grey / Near Black */
    --color-text-secondary: #555555; /* Medium Grey */
    --color-text-light: #f8f9fa;   /* Off-white for dark backgrounds */
    --color-text-headings: #1a1a1a;

    --color-background-light: #f4f6f8; /* Very Light Grey */
    --color-background-alt: #e9ecef;   /* Slightly Darker Light Grey */
    --color-background-dark: #1f1f1f;  /* Dark Grey for Footer/etc. */

    --color-border-brutalist: #121212; /* Black for sharp borders */
    --color-border-subtle: #d1d1d1;   /* Light grey for less prominent borders */

    --shadow-brutalist: 5px 5px 0px var(--color-accent-light);
    --shadow-brutalist-hover: 8px 8px 0px var(--color-primary-start);
    --shadow-soft: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-inset: inset 2px 2px 5px rgba(0,0,0,0.1);

    --border-radius-sharp: 0px; /* Brutalism: No rounded corners */
    --border-radius-subtle: 3px;

    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.35s;
    --transition-speed-slow: 0.6s;
    --transition-easing: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Non-linear movement */
    --transition-easing-smooth: ease-in-out;

    --header-height: 80px; /* Approximate header height for padding */
}

/* 2. Global Resets & Base Styles */
*,
*::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);
    background-color: var(--color-background-light);
    color: var(--color-text-primary);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* For Barba.js */
    text-rendering: optimizeLegibility;
    padding-top: 0px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--color-text-headings);
    margin-bottom: 0.8em;
    line-height: 1.25;
    font-weight: 700;
    text-transform: uppercase; /* Brutalist headings */
    letter-spacing: 0.5px;
}

h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); text-shadow: 1px 1px 0px rgba(0,0,0,0.1); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

p {
    margin-bottom: 1.25em;
    font-size: 1rem;
    color: var(--color-text-secondary);
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-primary-start);
    text-decoration: none;
    transition: color var(--transition-speed-fast) var(--transition-easing-smooth);
}
a:hover {
    color: var(--color-primary-end);
    text-decoration: underline;
    text-decoration-thickness: 2px; /* Brutalist underline */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-style: none; /* Remove default border on images in links */
}

ul, ol {
    list-style-position: inside;
    padding-left: 1.5em; /* Default padding for lists */
}
li {
    margin-bottom: 0.5em;
}

/* 3. Layout & Container */
.container {
    width: 90%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.section-padding {
    padding-top: clamp(60px, 10vh, 100px);
    padding-bottom: clamp(60px, 10vh, 100px);
}

.section-bg-alt {
    background-color: var(--color-background-alt);
    border-top: 3px solid var(--color-border-brutalist);
    border-bottom: 3px solid var(--color-border-brutalist);
}

.content-column {
    max-width: 800px; /* For single column text like history, privacy */
    margin-left: auto;
    margin-right: auto;
}

/* Flexbox/Grid based columns */
.columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Gutter compensation */
}
.column {
    padding: 0 15px; /* Gutter */
    box-sizing: border-box;
    margin-bottom: 30px; /* Space between rows of columns */
}
.is-one-third { flex-basis: 33.3333%; max-width: 33.3333%; }
.is-half { flex-basis: 50%; max-width: 50%; }
.is-two-thirds { flex-basis: 66.6666%; max-width: 66.6666%; }


/* 4. Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.section-title {
    text-align: center;
    margin-bottom: clamp(30px, 5vh, 60px);
    color: var(--color-text-headings);
    position: relative;
    padding-bottom: 15px;
}
/* Brutalist underline for section titles */
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 80px;
    height: 4px;
    background: var(--color-primary-gradient);
}

.section-subtitle {
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(30px, 5vh, 50px);
    font-size: clamp(1rem, 1.8vw, 1.15rem);
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.read-more-link {
    display: inline-block;
    font-family: var(--font-secondary);
    font-weight: bold;
    color: var(--color-primary-start);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 0;
    position: relative;
    transition: color var(--transition-speed-fast) ease;
}
.read-more-link::after {
    content: '→';
    margin-left: 8px;
    transition: transform var(--transition-speed-fast) var(--transition-easing);
}
.read-more-link:hover {
    color: var(--color-primary-end);
    text-decoration: none;
}
.read-more-link:hover::after {
    transform: translateX(5px);
}


/* 5. Header & Navigation */
.site-header {
    background-color: #ffffff;
    padding: 15px 0;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 4px solid var(--color-border-brutalist);
    transition: background-color var(--transition-speed-normal) ease;
}
/* Scrolled header state if needed
.site-header.scrolled {
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(5px);
}
*/
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-family: var(--font-secondary);
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: bold;
    color: var(--color-text-headings);
    text-decoration: none;
    letter-spacing: -0.5px;
}
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
.main-nav li {
    margin-left: clamp(15px, 2.5vw, 30px);
    margin-bottom: 0;
}
.main-nav a {
    font-family: var(--font-secondary);
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 500;
    padding: 8px 0;
    position: relative;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    letter-spacing: 0.5px;
    transition: color var(--transition-speed-fast) ease;
}
.main-nav a::before { /* Brutalist hover effect */
    content: '';
    position: absolute;
    bottom: -4px; /* Align with header border */
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--color-primary-start);
    transition: width var(--transition-speed-normal) var(--transition-easing);
}
.main-nav a:hover,
.main-nav a.active { /* Ensure .active is handled by JS */
    color: var(--color-primary-start);
}
.main-nav a:hover::before,
.main-nav a.active::before {
    width: 100%;
}

.nav-toggle { /* Burger Menu Icon */
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above menu items when open */
}
.nav-toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background-color: var(--color-text-headings);
    margin: 6px 0;
    transition: all var(--transition-speed-normal) var(--transition-easing-smooth);
    border-radius: var(--border-radius-subtle);
}


/* 6. Buttons (Global) */
.button, button, input[type="submit"], input[type="button"] {
    font-family: var(--font-secondary);
    display: inline-block;
    padding: 12px 30px;
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 3px solid var(--color-border-brutalist);
    border-radius: var(--border-radius-sharp);
    transition: all var(--transition-speed-normal) var(--transition-easing);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden; /* For ripple */
    z-index: 1; /* For ripple */
    box-shadow: 3px 3px 0px var(--color-border-brutalist);
}

.button:active, button:active, input[type="submit"]:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0px var(--color-border-brutalist);
}

.button-primary,
input[type="submit"] { /* Default form submit to primary */
    background: var(--color-primary-gradient);
    color: var(--color-text-light);
    border-color: var(--color-border-brutalist); /* Keep border for brutalist effect even with gradient */
}
.button-primary:hover,
input[type="submit"]:hover {
    background: var(--color-primary-gradient-hover);
    color: #fff; /* Ensure text remains white */
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px var(--color-border-brutalist);
    border-color: var(--color-border-brutalist);
}

.button-secondary {
    background-color: transparent;
    color: var(--color-text-headings);
    border-color: var(--color-border-brutalist);
}
.button-secondary:hover {
    background-color: var(--color-text-headings);
    color: var(--color-text-light);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px var(--color-accent-medium);
}

/* 7. Hero Section */
.hero-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(80px, 15vh, 150px) 0;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: calc(85vh - var(--header-height)); /* Example height, adjust as needed */
    color: var(--color-text-light); /* Enforced by prompt */
}
.hero-content h1 {
    color: var(--color-text-light); /* Enforced by prompt */
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Responsive font size */
    margin-bottom: 0.5em;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6); /* Ensure readability */
}
.hero-content p {
    color: var(--color-text-light); /* Enforced by prompt */
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-bottom: 1.5em;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Ensure readability */
    line-height: 1.8;
}
.hero-section .button-primary {
    padding: 15px 35px;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

/* 8. Card Styles (Global & Specific) */

/* 8.1. Generic Card */
.card {
    background-color: #ffffff;
    border: 3px solid var(--color-border-brutalist);
    box-shadow: var(--shadow-brutalist);
    transition: transform var(--transition-speed-normal) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    height: 100%;
    display: flex;
    flex-direction: column;
    /* align-items: center; -- This centers the .card-image and .card-content blocks, not their internal content */
    text-align: left; /* Default text alignment for content inside */
}
.card:hover {
    transform: translate(-5px, -5px); /* More pronounced brutalist hover */
    box-shadow: var(--shadow-brutalist-hover);
}
.card-image {
    width: 100%; /* Ensure image container takes full width of card */
    overflow: hidden;
    border-bottom: 3px solid var(--color-border-brutalist);
    position: relative;
    height: 250px; /* Fixed height for image containers in cards */
    display: flex; /* For centering image if needed, though object-fit should handle it */
    align-items: center;
    justify-content: center;
    background-color: var(--color-background-alt); /* Placeholder bg */
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area, might crop */
    transition: transform var(--transition-speed-slow) var(--transition-easing-smooth);
}
.card:hover .card-image img {
    transform: scale(1.08) rotate(1deg); /* Subtle non-linear movement */
}
.card-content {
    padding: clamp(20px, 3vw, 30px);
    flex-grow: 1; /* Allows content to push button down */
    display: flex;
    flex-direction: column;
}
.card-content h3 {
    margin-bottom: 0.5em;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    color: var(--color-text-headings);
}
.card-content p {
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: var(--color-text-secondary);
    margin-bottom: 1em;
    line-height: 1.6;
}
.card-content .button,
.card-content .read-more-link {
    margin-top: auto; /* Pushes button/link to the bottom of the card content */
    align-self: flex-start; /* Align button to the left */
}

/* Centering content within card children if a card itself is set to align-items: center */
/* (The prompt had contradictory instructions, this attempts to reconcile) */
/* If .card uses align-items: center, then .card-image and .card-content will be centered. */
/* If items *inside* .card-content need centering: */
.card.text-center .card-content,
.card.text-center .card-image { /* if you need to center image this way */
    text-align: center;
}
.card.text-center .card-content .button,
.card.text-center .card-content .read-more-link {
    align-self: center;
}


/* 8.2. Step Card (Our Process) */
.step-card {
    background-color: #ffffff;
    padding: 30px 25px;
    border: 3px solid var(--color-border-brutalist);
    position: relative;
    box-shadow: var(--shadow-brutalist);
    transition: all var(--transition-speed-normal) var(--transition-easing);
}
.step-card:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 8px 8px 0px var(--color-primary-start);
}
.step-number {
    position: absolute;
    top: -22px; /* Overlap border */
    left: -22px;
    background: var(--color-primary-gradient);
    color: var(--color-text-light);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: var(--font-secondary);
    border: 3px solid var(--color-border-brutalist);
    box-shadow: 3px 3px 0 var(--color-border-brutalist);
}
.step-card h3 {
    margin-top: 25px; /* Space for number */
    margin-bottom: 0.7em;
    font-size: 1.4rem;
}

/* 8.3. Instructor Card */
.instructor-card .card-image { height: 300px; }
.instructor-title {
    font-style: italic;
    color: var(--color-accent-medium);
    margin-bottom: 0.5em;
    font-size: 1rem;
    font-family: var(--font-primary);
    text-transform: none; /* Override h global uppercase */
    letter-spacing: 0;
}

/* 8.4. Workshop Card & 8.6. Webinar Card */
.workshop-card .card-image,
.webinar-card .card-image {
    height: 280px;
}

/* 8.5. Portfolio Item */
.portfolio-item .card-image {
    height: 220px;
}
.portfolio-item .card-content h3 {
    font-size: 1.3rem;
}

/* 9. Section Specific Styles */

/* 9.1. Our Process Section */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(25px, 4vw, 40px);
}

/* 9.2. Instructors Section & 9.4 Portfolio Section & 9.7 Behind the Scenes */
#instructors .columns,
#portfolio .gallery,
#behind-the-scenes .gallery { /* .gallery is also .columns in HTML */
    gap: 30px; /* If using grid directly on .gallery */
}
#behind-the-scenes .card-image { /* Specific for BTS section if needed */
    height: 250px;
    border-bottom: none; /* No border if it's just image + caption */
}
#behind-the-scenes .card { /* Simpler card for BTS */
    box-shadow: none;
    border: 3px solid var(--color-border-brutalist);
    padding: 10px;
    background-color: var(--color-background-alt);
}
#behind-the-scenes .card:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-brutalist);
}
.caption {
    text-align: center;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-top: 15px;
    font-size: 0.9rem;
    padding: 0 10px;
}

/* 9.5. History Section */
#history p {
    font-size: 1.05rem;
    line-height: 1.8;
}
.image-container-fullwidth {
    margin-top: 40px;
}
.image-container-fullwidth img {
    border: 4px solid var(--color-border-brutalist);
    box-shadow: var(--shadow-brutalist);
}

/* 9.6. Clientele Section */
.clientele-profile {
    text-align: center;
    padding: 25px;
    border: 3px dashed var(--color-border-subtle);
    background-color: #fff;
    height: 100%;
    transition: all var(--transition-speed-normal) var(--transition-easing);
}
.clientele-profile:hover {
    border-color: var(--color-primary-start);
    transform: translateY(-5px);
    box-shadow: var(--shadow-brutalist);
}
.clientele-profile img { /* Icon for clientele */
    margin: 0 auto 20px auto;
    background-color: var(--color-background-alt);
    padding: 15px;
    border: 2px solid var(--color-border-subtle);
    width: 80px; /* Fixed size for icons */
    height: 80px;
}
.clientele-profile h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5em;
}

/* 9.8. Webinars Section */
/* Uses generic card styles, ensure .columns provides good spacing */

/* 9.9. External Resources Section */
.resources-list .resource-item {
    background-color: #fff;
    padding: 25px;
    margin-bottom: 25px;
    border: 3px solid var(--color-border-subtle);
    box-shadow: 4px 4px 0px var(--color-border-subtle);
    transition: all var(--transition-speed-normal) var(--transition-easing);
}
.resources-list .resource-item:hover {
    border-color: var(--color-primary-start);
    box-shadow: 6px 6px 0px var(--color-primary-start);
    transform: translateX(5px);
}
.resources-list .resource-item h4 {
    margin-top: 0;
    margin-bottom: 0.5em;
    font-size: 1.3rem;
}
.resources-list .resource-item h4 a {
    color: var(--color-text-headings);
}
.resources-list .resource-item h4 a:hover {
    color: var(--color-primary-start);
}
.resources-list .resource-item p {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* 9.10. Contact Section & Form */
.contact-form-container {
    background-color: #ffffff;
    padding: clamp(25px, 4vw, 40px);
    border: 3px solid var(--color-border-brutalist);
    box-shadow: var(--shadow-brutalist);
    max-width: 750px; /* Slightly wider for forms */
    margin: 0 auto 40px auto;
}
.form-group {
    margin-bottom: 25px;
}
.form-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: var(--font-secondary);
    color: var(--color-text-headings);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select, /* Added select styling */
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid var(--color-border-subtle);
    border-radius: var(--border-radius-sharp);
    box-sizing: border-box;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-text-primary);
    background-color: var(--color-background-light);
    transition: border-color var(--transition-speed-fast) ease, box-shadow var(--transition-speed-fast) ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-primary-start);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-start-rgb, 255,140,0),0.3); /* Define --color-primary-start-rgb if using rgba */
    background-color: #fff;
}
.form-group textarea {
    resize: vertical;
    min-height: 150px;
}
.contact-details {
    text-align: center;
    margin-top: 40px;
}
.contact-details p {
    margin-bottom: 0.8em;
    font-size: 1.1rem;
}
.contact-details strong {
    font-family: var(--font-secondary);
    text-transform: uppercase;
}
.contact-info-block {
    margin-bottom: 30px;
    text-align: left;
    padding: 20px;
    border-left: 5px solid var(--color-primary-start); /* Brutalist accent */
    background-color: var(--color-background-alt);
    border-top: 2px solid var(--color-border-subtle);
    border-right: 2px solid var(--color-border-subtle);
    border-bottom: 2px solid var(--color-border-subtle);
}
.contact-info-block img { /* Icons in contact info */
    float: left;
    margin-right: 15px;
    margin-bottom: 10px; /* For smaller screens */
    width: 40px;
    height: 40px;
}
.contact-info-block h3 {
    font-size: 1.3rem;
    margin-bottom: 0.3em;
}
.contact-info-block p { font-size: 1rem; }
.map-container img {
    border: 3px solid var(--color-border-brutalist);
    box-shadow: var(--shadow-brutalist);
}

/* 9.11. Page Title Section (About, Contact, Legal) */
.page-title-section {
    padding: clamp(60px, 10vh, 100px) 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    position: relative;
    color: var(--color-text-light); /* Assuming dark background image */
}
.page-title { /* For h1 in these sections */
    font-size: clamp(2.5rem, 5.5vw, 3.8rem);
    text-transform: uppercase;
    color: var(--color-text-light); /* Ensure it's white as per hero req for similar setup */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}
.page-title-section::before { /* Overlay for readability */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)); In HTML already */
    z-index: 0;
}
.page-title-section .container {
    position: relative;
    z-index: 1;
}

/* 9.12. Success Page */
body[data-barba-namespace="success"] main, /* Targeting main on success page */
.centered-content-section { /* Generic class for such layouts */
    min-height: calc(100vh - var(--header-height) - 150px); /* Adjust 150px for footer height approx */
    display: flex;
    flex-direction: column; /* Ensure footer can be pushed down if content is short */
    align-items: center;
    justify-content: center;
    padding: 40px 15px;
}
body[data-barba-namespace="success"] .site-footer {
    margin-top: auto; /* Push footer to bottom if content is short */
}
.success-icon,
body[data-barba-namespace="success"] main img[alt="Icono de éxito"] {
    width: clamp(80px, 15vw, 120px);
    height: auto;
    margin-bottom: 30px;
}
.lead-text { /* For success page messages */
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    color: var(--color-text-secondary);
    max-width: 650px;
    margin: 0 auto 25px auto;
    line-height: 1.7;
}

/* 9.13. Privacy & Terms Pages */
body[data-barba-namespace="privacy"] main > section:first-of-type,
body[data-barba-namespace="terms"] main > section:first-of-type {
    /* The page-title-section handles its own padding. This is for the content section below it. */
}
body[data-barba-namespace="privacy"] main > section.section-padding:not(.page-title-section),
body[data-barba-namespace="terms"] main > section.section-padding:not(.page-title-section) {
    padding-top: clamp(40px, 8vh, var(--header-height)); /* Ensure content below hero is not hidden by sticky header */
}

body[data-barba-namespace="privacy"] .content-column h2,
body[data-barba-namespace="terms"] .content-column h2 {
    margin-top: 2em;
    margin-bottom: 0.8em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--color-border-subtle);
    font-size: 1.8rem;
}
body[data-barba-namespace="privacy"] .content-column h2:first-of-type,
body[data-barba-namespace="terms"] .content-column h2:first-of-type {
    margin-top: 0;
}
body[data-barba-namespace="privacy"] .content-column ul,
body[data-barba-namespace="terms"] .content-column ul {
    margin-bottom: 1.5em;
    padding-left: 2em; /* More indent for legal lists */
}
body[data-barba-namespace="privacy"] .content-column li,
body[data-barba-namespace="terms"] .content-column li {
    margin-bottom: 0.8em;
    line-height: 1.7;
}


/* 10. Footer */
.site-footer {
    background-color: var(--color-background-dark);
    color: var(--color-text-light);
    padding: clamp(50px, 8vh, 80px) 0;
    border-top: 6px solid var(--color-primary-start); /* Strong brutalist accent */
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: clamp(30px, 5vw, 50px);
}
.footer-content h4 {
    font-family: var(--font-secondary);
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 10px;
}
.footer-content h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--color-primary-gradient);
}
.footer-nav ul, .footer-social ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-nav li, .footer-social li {
    margin-bottom: 12px;
}
.footer-nav a, .footer-social a {
    color: #bdc3c7; /* Light grey for links */
    text-decoration: none;
    transition: color var(--transition-speed-fast) ease, padding-left var(--transition-speed-fast) ease;
    font-size: 0.95rem;
}
.footer-nav a:hover, .footer-social a:hover {
    color: var(--color-primary-end);
    text-decoration: none; /* No underline, rely on color and subtle movement */
    padding-left: 5px; /* Non-linear movement hint */
}
.footer-copyright {
    grid-column: 1 / -1; /* Span all columns */
    text-align: center;
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--color-accent-medium);
    font-size: 0.9rem;
    color: var(--color-accent-light);
}
.footer-copyright p { margin-bottom: 5px; color: var(--color-accent-light);}


/* 11. Animations & Transitions */

/* 11.1. Barba.js Page Transitions (Basic) */
.barba-leave-active,
.barba-enter-active {
  transition: opacity var(--transition-speed-normal) var(--transition-easing-smooth);
}
.barba-leave-to,
.barba-enter-from {
  opacity: 0;
  position: absolute; /* Prevent layout jumps */
  width: 100%;
}
.barba-enter-active {
    animation: fadeIn var(--transition-speed-slow) var(--transition-easing-smooth) forwards;
}
@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 11.2. Scroll Animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--transition-speed-slow) var(--transition-easing-smooth),
                transform var(--transition-speed-slow) var(--transition-easing); /* Non-linear */
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 11.3. Microinteractions */
/* Ripple effect for buttons */
.button .ripple, button .ripple { /* Added by JS */
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  width: 100px; /* Initial size */
  height: 100px;
  margin-top: -50px; /* Center it */
  margin-left: -50px;
  animation: ripple-animation var(--transition-speed-slow) linear;
  transform: scale(0);
  pointer-events: none; /* Important */
  z-index: -1; /* Behind button text */
}
@keyframes ripple-animation {
  to {
    transform: scale(3); /* Expand size */
    opacity: 0;
  }
}

/* Glassmorphism example (use sparingly with Brutalism) */
.glass-effect {
    background: rgba(255, 255, 255, 0.1); /* Low opacity white */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* Safari */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--border-radius-subtle); /* Glass usually has some rounding */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Parallax background (simple CSS example) */
.parallax-section {
    background-attachment: fixed; /* This creates the parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* 12. Responsive Design */
@media (max-width: 992px) { /* Tablet */
    .is-one-third, .is-half, .is-two-thirds {
        flex-basis: 100%;
        max-width: 100%;
    }
    .column:not(:last-child) {
        margin-bottom: 30px;
    }
    .process-steps, .gallery {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Allow 2 columns if space */
    }
     .hero-content h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
    .hero-content p { font-size: clamp(1rem, 2.2vw, 1.25rem); }
}

@media (max-width: 768px) { /* Mobile */
    :root { --header-height: 70px; }

    h1 { font-size: clamp(1.8rem, 6vw, 2.5rem); }
    h2 { font-size: clamp(1.5rem, 5vw, 2rem); }
    .section-padding {
        padding-top: clamp(50px, 8vh, 80px);
        padding-bottom: clamp(50px, 8vh, 80px);
    }
    .hero-content h1 { font-size: clamp(2rem, 7vw, 3rem); }

    .nav-toggle { display: block; }
    .main-nav .nav-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: calc(var(--header-height) - 4px); /* Position below header's border */
        left: 0;
        width: 100%;
        background-color: #ffffff;
        padding: 20px 0;
        box-shadow: var(--shadow-soft);
        border-top: 3px solid var(--color-border-brutalist);
        animation: slideDownMobileMenu 0.4s var(--transition-easing-smooth) forwards;
    }
    @keyframes slideDownMobileMenu {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .main-nav .nav-menu.active { display: flex; }
    .main-nav li {
        margin: 15px 20px;
        text-align: center;
    }
    .main-nav a { font-size: 1.1rem; }
    .main-nav a::before { display: none; } /* Remove underline for mobile items */
    .main-nav a:hover, .main-nav a.active {
        color: var(--color-primary-start);
        background-color: var(--color-background-alt); /* Highlight for mobile */
        padding: 10px 15px;
        border-radius: var(--border-radius-subtle);
    }

    /* Active state for burger icon (X shape) */
    .nav-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    .process-steps, .gallery {
        grid-template-columns: 1fr; /* Stack on mobile */
    }
    .footer-content {
        grid-template-columns: 1fr; /* Stack footer columns */
        text-align: center;
    }
    .footer-content h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer-nav a:hover, .footer-social a:hover {
        padding-left: 0; /* Disable padding shift on mobile hover for footer */
    }
    .column.is-two-thirds { /* Ensure content in contact page column takes full width */
      flex-basis: 100%;
      max-width: 100%;
    }
    .contact-form-container { padding: 20px; }
    .contact-info-block { padding: 15px; }

    /* Specific to privacy/terms for mobile to ensure readability of headers */
    body[data-barba-namespace="privacy"] .content-column h2,
    body[data-barba-namespace="terms"] .content-column h2 {
        font-size: 1.5rem;
    }
}

/* Cookie Popup Styles (from prompt) */
#cookie-popup {
    /* display: none; In HTML for JS control */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(30,30,30,0.95);
    color: #f1f1f1;
    padding: 20px;
    text-align: center;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
    font-size: 0.95rem;
}
#cookie-popup p {
    margin: 0 0 15px 0;
    font-size: 1rem;
    color: #f1f1f1; /* Ensure text color is light for dark bg */
}
#cookie-popup button#accept-cookies { /* Specific selector for styling */
    background: var(--color-primary-gradient); /* Use theme button style */
    color: white;
    border: 2px solid var(--color-border-brutalist);
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: var(--border-radius-sharp);
    font-family: var(--font-secondary);
    text-transform: uppercase;
    box-shadow: 2px 2px 0 var(--color-border-brutalist);
}
#cookie-popup button#accept-cookies:hover {
    background: var(--color-primary-gradient-hover);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--color-border-brutalist);
}
*{
    opacity: 1 !important;
}