/* ===== Reset & Base Styles ===== */
@font-face {
    font-family: 'Gobold';
    src: url('assets/fonts/gobold/Gobold Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gobold';
    src: url('assets/fonts/gobold/Gobold Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Branding';
    src: url('assets/fonts/branding-2/Branding Medium.otf') format('opentype');
    font-weight: 400;
    /* Using Medium as base/regular */
    font-style: normal;
}

@font-face {
    font-family: 'Branding';
    src: url('assets/fonts/branding-2/Branding Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Modern Color Palette */
    --primary-color: #eb5b4c;
    --primary-dark: #C65D26;
    --primary-light: #FF8F5A;
    --secondary-color: #FF9F76;
    --accent-color: #F25F18;

    /* Neutrals */
    --text-dark: #2d2e2b;
    --text-medium: #374151;
    --text-light: #6B7280;
    --bg-light: #FFF8F5;
    --bg-white: #FFFFFF;
    --bg-off-white: #FAFAFA;
    --border-color: #F3E6E0;

    /* Modern Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(235, 91, 76, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(235, 91, 76, 0.1), 0 2px 4px -1px rgba(235, 91, 76, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(235, 91, 76, 0.1), 0 4px 6px -2px rgba(235, 91, 76, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(235, 91, 76, 0.1), 0 10px 10px -5px rgba(235, 91, 76, 0.04);
    --shadow-orange: 0 10px 30px -5px rgba(235, 91, 76, 0.3);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-blur: blur(12px);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
}

/* Realistic Background for Contact Section */
#pourqui {
    position: relative;
    background-color: var(--bg-white);
    /* Base color */
    overflow: hidden;
}

/* Watermark removed as requested */
/* Decorative elements are now handled by .bg-decoration in HTML */

#pourqui .text-content h2,

#pourqui .text-content h2,
#pourqui .text-content p {
    /* Revert to default or dark text since background is now light */
    color: var(--text-dark);
    text-shadow: none;
}

/* Ensure content is above watermark/background */
#pourqui .container {
    position: relative;
    z-index: 1;
}

/* Ensure hero remains dark/overlayed properly without too much noise interference */
.hero {
    background-image: url('assets/img/pexels-brett-sayles-2865412.jpg');
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

body {
    font-family: 'Branding', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-off-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.logo,
.nav-links a {
    font-family: 'Gobold', sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* Gobold often benefits from spacing */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition);
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.navbar.scrolled .nav-links a {
    color: #2d2e2b;
    /* Dark text on scroll */
    text-shadow: none;
}

.navbar.scrolled .mobile-menu-toggle span {
    background-color: #2d2e2b;
    box-shadow: none;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
}

.logo:hover {
    transform: scale(1.05);
}

.logo img {
    height: 80px;
    /* Increased from 60px as requested */
    width: auto;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

/* ===== Split Section & Form ===== */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 2rem 0;
}

@media (max-width: 900px) {
    .split-section {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.form-card {
    background-color: var(--bg-white);
    padding: 3rem;
    border-radius: 4px;
    /* Rounded like buttons as requested */
    border: 2px solid var(--primary-color);
    /* Orange border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 1rem;
    /* Mantine default spacing */
}

.form-group label {
    display: block;
    margin-bottom: 0.25rem;
    /* ~4px spacing */
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    font-family: 'Branding', sans-serif;
    color: var(--text-dark);
}

.form-control {
    width: 100%;
    height: 42px;
    /* Mantine 'md' size */
    padding: 0 12px 0 40px;
    /* Added left padding for icon */
    border: 1px solid #ced4da;
    /* Mantine default border color */
    border-radius: 4px;
    /* Mantine default radius */
    font-size: 0.875rem;
    /* 14px */
    font-family: 'Branding', sans-serif;
    color: var(--text-dark);
    transition: border-color 100ms ease;
    background-color: #fff;
    appearance: none;
    /* Remove default styling */
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
    /* Mantine focus ring */
}

/* Input Icon Wrapper */
.input-icon-wrapper {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    /* Muted gray for icon */
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 2;
}

textarea.form-control {
    height: auto;
    min-height: 100px;
    padding: 12px;
    /* Reset padding for textarea (no icon typically) */
    resize: vertical;
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-medium);
    cursor: pointer;
}

.form-checkbox input {
    margin-top: 3px;
    accent-color: var(--primary-color);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.text-content h2 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.text-content p {
    font-size: 1.125rem;
    color: var(--text-medium);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.nav-links a {
    text-decoration: none;
    color: white;
    /* Changed to white for visibility on hero background */
    font-weight: 500;
    transition: var(--transition);
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* Added shadow for legibility */
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: white;
    /* Changed to white for hero background */
    transition: var(--transition);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ===== Hero Section ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('assets/img/pexels-brett-sayles-2865412.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
    text-align: center;
    position: relative;
    padding-top: 80px;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    /* Slightly darker overlay for better text contrast */
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    color: white;
    /* Explicitly set to white */
}

.hero-content p {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
    color: white;
    /* Explicitly set to white */
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    border-radius: 4px;
    /* Reduced radius for sharper Gobold look */
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: var(--shadow-md);
}

.hero .btn-primary {
    background-color: white;
    color: var(--primary-color);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
    background-color: var(--primary-dark);
}

.hero .btn-primary:hover {
    background-color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

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

.hero .btn-secondary {
    color: white;
    border-color: white;
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.hero .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
    color: white;
}

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 25px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    z-index: 3;
}

.scroll-indicator span {
    width: 6px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 3px;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(20px);
        opacity: 0;
    }
}

/* ===== Animations ===== */
.fade-in {
    animation: fadeIn 1s ease-in;
}

.fade-in-delay {
    animation: fadeIn 1s ease-in 0.3s both;
}

.fade-in-delay-2 {
    animation: fadeIn 1s ease-in 0.6s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Decorative Background Elements ===== */
.bg-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

.deco-icon {
    position: absolute;
    stroke: var(--primary-color);
    opacity: 0.08;
    transition: transform 0.3s ease;
}

.deco-1 {
    width: 120px;
    height: 120px;
    top: 10%;
    left: 5%;
    animation: float 6s ease-in-out infinite;
}

.deco-2 {
    width: 80px;
    height: 80px;
    top: 15%;
    right: 10%;
    animation: float 8s ease-in-out infinite 1s;
}

.deco-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 8%;
    animation: float 7s ease-in-out infinite 2s;
}

.deco-4 {
    width: 90px;
    height: 90px;
    top: 50%;
    right: 5%;
    animation: float 9s ease-in-out infinite 1.5s;
}

.deco-5 {
    width: 110px;
    height: 110px;
    bottom: 10%;
    right: 15%;
    animation: float 7.5s ease-in-out infinite 0.5s;
}

.deco-6 {
    width: 70px;
    height: 70px;
    top: 70%;
    left: 12%;
    animation: float 8.5s ease-in-out infinite 3s;
}

.deco-7 {
    width: 95px;
    height: 95px;
    top: 15%;
    left: 8%;
    animation: float 6.5s ease-in-out infinite;
}

.deco-8 {
    width: 85px;
    height: 85px;
    top: 60%;
    right: 8%;
    animation: float 7s ease-in-out infinite 1s;
}

.deco-9 {
    width: 75px;
    height: 75px;
    bottom: 25%;
    left: 10%;
    animation: float 8s ease-in-out infinite 2s;
}

.deco-10 {
    width: 100px;
    height: 100px;
    top: 30%;
    right: 12%;
    animation: float 7.5s ease-in-out infinite 1.5s;
}

.deco-11 {
    width: 80px;
    height: 80px;
    top: 80%;
    right: 20%;
    animation: float 8s ease-in-out infinite 2s;
}

.deco-12 {
    width: 70px;
    height: 70px;
    top: 5%;
    right: 30%;
    animation: float 6s ease-in-out infinite 1s;
}

.deco-13 {
    width: 90px;
    height: 90px;
    top: 35%;
    right: 5%;
    animation: float 7s ease-in-out infinite 1s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-20px) rotate(5deg);
    }

    50% {
        transform: translateY(-10px) rotate(-5deg);
    }

    75% {
        transform: translateY(-15px) rotate(3deg);
    }
}

/* ===== Services Section ===== */
.services {
    padding: 100px 0;
    background-color: var(--bg-light);
    background-image:
        radial-gradient(circle at 2px 2px, rgba(235, 91, 76, 0.03) 1px, transparent 0);
    background-size: 40px 40px;
    position: relative;
    overflow: hidden;
}

.services .container {
    position: relative;
    z-index: 1;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-dark);
}

/* ===== About Section ===== */
p {
    color: var(--text-light);
    line-height: 1.8;
}

/* ===== For Who Section - Interactive Tabs ===== */
.for-who {
    padding: 100px 0;
    background-color: var(--bg-white);
    position: relative;
}

.section-subtitle {
    text-align: center;
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Tab Toggle Styles */
.tab-toggle {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
    flex-wrap: wrap;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background-color: var(--bg-white);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}

.tab-btn svg {
    transition: var(--transition);
}

.tab-btn:hover {
    border-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-color: transparent;
    box-shadow: var(--shadow-orange);
}

.tab-btn.active svg {
    stroke: white;
}

/* Tab Content Styles */
.tab-content {
    display: none;
    animation: fadeInContent 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Story Container */
.story-container {
    max-width: 100%;
    /* Changed from 900px to allow full grid width */
    margin: 0 auto;
}

.story-header {
    text-align: center;
    margin-bottom: 4rem;
}

.story-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.story-intro {
    font-size: 1.125rem;
    color: var(--text-light);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
}

/* Journey Steps */
.journey-steps {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 3rem;
}

.journey-step {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.journey-step.fade-in-visible {
    opacity: 1;
    transform: translateY(0);
}

.journey-step::after {
    content: '';
    position: absolute;
    left: 30px;
    top: 70px;
    bottom: -48px;
    width: 2px;
    background: linear-gradient(180deg, var(--primary-color) 0%, transparent 100%);
}

.journey-step:last-child::after {
    display: none;
}

.step-number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-orange);
    position: relative;
    z-index: 1;
}

.step-content {
    flex: 1;
    background-color: var(--bg-white);
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.step-content:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-light);
}

.step-content h4 {
    font-size: 1.5rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.step-content>p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.step-benefits {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.step-benefits li {
    color: var(--text-dark);
    padding-left: 2rem;
    position: relative;
    line-height: 1.6;
}

.step-benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.25rem;
}

/* ===== Flat Features Section ===== */
.flat-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.flat-card {
    background-color: var(--bg-white);
    padding: 2.5rem;
    border-radius: 8px;
    /* Slightly rounded, but kept square-ish for flat look */
    border-left: 6px solid var(--primary-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    /* Very subtle shadow, almost flat */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flat-card:hover {
    transform: translateY(-5px);
    background-color: #fdfdfd;
}

.flat-card p {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.5;
    margin: 0;
}

/* Make the first part of the sentence punchy if possible via a span, 
   but since we are replacing full HTML blocks, we'll style the P generally strong. */
.flat-card strong {
    color: var(--primary-color);
    font-family: 'Gobold', sans-serif;
    letter-spacing: 0.05em;
    font-size: 1.4rem;
    display: block;
    margin-bottom: 0.5rem;
}

/* Hide legacy elements if needed or just replace valid HTML */
/* Story CTA */
.story-cta {
    text-align: center;
    padding-top: 4rem;
}

.story-cta .btn {
    padding: 1rem 3rem;
    font-size: 1.125rem;
}

/* ===== Split Section & Form (Contact/For Who) ===== */
/* NOTE: Replaced by About section in HTML, but keeping styles if referenced elsewhere or for future use */
#pourqui.for-who {
    position: relative;
    background-color: var(--bg-white);
    overflow: visible;
    z-index: 40;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* ===== Features Intro and Section (Combined) ===== */
.features-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.features-text {
    padding-right: 2rem;
}

.features-text h2 {
    text-align: left;
    margin-bottom: 1.5rem;
}

.features-text p {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-medium);
}

.features-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 280px);
    /* Increased height for text */
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
    /* Zoom effect on hover */
}

/* Static Overlay for Grid */
.gallery-item .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0.9) 100%);
    display: flex;
    align-items: flex-end;
    z-index: 5;
    /* Ensure it stays on top */
}

.gallery-item .card-content {
    padding: 1.5rem;
    /* Reduced padding */
    width: 100%;
}

.gallery-item .card-content h3 {
    color: white;
    font-size: 1.25rem;
    /* Reduced font size */
    text-transform: uppercase;
    font-family: 'Gobold', sans-serif;
    margin-bottom: 0.5rem;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.gallery-item .card-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    /* Reduced font size */
    line-height: 1.4;
    font-weight: 400;
    margin-bottom: 0;
}

.gallery-see-more {
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
}

.gallery-see-more:hover {
    background-color: var(--primary-dark);
}

.gallery-see-more span {
    font-family: 'Gobold', sans-serif;
    text-transform: uppercase;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.gallery-see-more i {
    font-size: 1.5rem;
}

@media (max-width: 900px) {
    .features-split {
        grid-template-columns: 1fr;
    }

    .features-text {
        padding-right: 0;
        text-align: center;
    }

    .features-text h2 {
        text-align: center;
    }
}

/* ===== Services Section (Features) ===== */
.services {
    padding: 100px 0;
    background-color: var(--bg-light);
    background-image:
        radial-gradient(circle at 2px 2px, rgba(235, 91, 76, 0.03) 1px, transparent 0);
    background-size: 40px 40px;
    position: relative;
    overflow: visible;
    /* Allow shadow to show */
    z-index: 30;
}

/* ===== About Section ===== */
.about {
    padding: 100px 0;
    background-color: var(--bg-white);
    position: relative;
    z-index: 40;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h2 {
    text-align: left;
    margin-bottom: 1.5rem;
}

.about-text p {
    color: var(--text-light);
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.features-list {
    list-style: none;
    margin-top: 2rem;
}

.features-list li {
    padding: 0.75rem 0;
    color: var(--text-dark);
    font-weight: 500;
}

.about-image {
    height: 100%;
    min-height: 400px;
}

.about-devices-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    /* Optional: add a subtle float animation or shadow if desired, 
       but for now keeping it clean as requested */
}

/* ===== Interest Section ===== */
.interest {
    padding: 100px 0;
    background: var(--bg-white);
    background-size: auto;
    position: relative;
    overflow: hidden;
    z-index: 20;
    /* Stacking Effect: Element 4 */
}

.interest-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.interest-subtitle {
    font-size: 1.125rem;
    color: var(--text-light);
    margin-bottom: 3rem;
    line-height: 1.8;
}

.interest-form {
    margin-bottom: 2rem;
}

.form-inline {
    display: flex;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto 1rem;
}

.form-inline input[type="email"] {
    flex: 1;
    padding: 18px 32px;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-full, 5px);
    font-size: 1rem;
    transition: var(--transition);
    font-family: inherit;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
}

.form-inline input[type="email"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(235, 91, 76, 0.15);
}

.form-inline .btn {
    padding: 16px 32px;
    background-color: var(--primary-color);
    color: white;
    white-space: nowrap;
    font-weight: 600;
}

.form-inline .btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-orange);
}

.form-note {
    font-size: 0.875rem;
    color: var(--text-light);
    font-style: italic;
}

.success-message {
    display: none;
    background-color: var(--bg-white);
    padding: 3rem 2rem;
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    margin: 2rem auto 0;
    animation: slideIn 0.5s ease;
}

.success-message.show {
    display: block;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.success-message h3 {
    font-size: 1.75rem;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.success-message p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.success-message .btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 12px 24px;
}

.success-message .btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* ===== Footer ===== */
.footer {
    background-color: var(--text-dark);
    color: white;
    padding: 5rem 0 2rem;
    margin-top: auto;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-logo {
    height: 60px;
    width: auto;
    margin-bottom: 1rem;
    display: block;
}

.footer-section h3,
.footer-section h4 {
    margin-bottom: 1rem;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
}

.footer-section a:hover {
    color: white;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    font-size: 1.5rem;
    /* Larger icons */
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.social-links a:hover {
    transform: translateY(-3px);
    /* Slight lift on hover */
    color: var(--primary-color);
    /* Orange hover effect */
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
}

/* ===== Responsive Design ===== */
@media (max-width: 768px) {
    .nav-links {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .hero {
        background-attachment: scroll;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .form-inline {
        flex-direction: column;
    }

    .form-inline .btn {
        width: 100%;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    /* For Who Section Responsive */
    .tab-toggle {
        flex-direction: column;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .tab-btn {
        width: 100%;
        justify-content: center;
    }

    .journey-step {
        flex-direction: column;
        gap: 1rem;
    }

    .journey-step::after {
        left: 30px;
        top: 70px;
    }

    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .step-content {
        padding: 1.5rem;
    }

    .step-content h4 {
        font-size: 1.25rem;
    }

    .story-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .success-message {
        padding: 2rem 1.5rem;
    }

    /* Keep pill shape on mobile but stack if too small? 
       Actually user asked for "cartouche", usually easier to keep inline on mobile 
       unless very small width. Let's try to keep it inline but allow wrap if needed. 
       For now, standard stacking for very small screens or keep fluid. */
    #heroForm .form-inline {
        flex-direction: column;
        padding: 10px;
        border-radius: 20px;
    }

    #heroForm .form-inline .btn {
        width: 100%;
        margin-top: 5px;
    }
}

/* ===== Hero Form Custom Pill Style ===== */
#heroForm .form-inline {
    background: var(--bg-white);
    padding: 4px;
    border-radius: 50px;
    gap: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    align-items: stretch;
    height: 64px;
    /* Force consistent height */
    display: flex;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border: 4px solid rgba(255, 255, 255, 0.2);
    background-clip: padding-box;
    position: relative;
    z-index: 10;
}

#heroForm .form-inline .input-icon-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
}

#heroForm .form-inline input[type="email"] {
    border: none;
    box-shadow: none;
    background: transparent;
    padding-left: 10px;
    height: 100%;
    /* Fill height */
    border-radius: 0;
}

#heroForm .form-inline input[type="email"]:focus {
    box-shadow: none;
    outline: none;
}

#heroForm .form-inline .input-icon {
    position: static;
    transform: none;
    color: var(--primary-color);
    margin-left: 20px;
    font-size: 1.2rem;
}

#heroForm .form-inline .btn {
    border-radius: 50px;
    padding: 0 32px;
    /* Remove vertical padding, rely on flex centering */
    margin: 0;
    box-shadow: none;
    height: auto;
    /* Fill container height */
    border: none;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#heroForm .form-inline .btn:hover {
    transform: none !important;
    background-color: var(--primary-dark);
}

/* ===== Scroll to Top Button ===== */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--text-dark);
    /* Default Black */
    color: white;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    /* Center the arrow */
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Prevent clicking when invisible */
}

.scroll-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.scroll-to-top.inverted {
    background-color: white;
    color: var(--text-dark);
    /* Black arrow */
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}