/* ==========================================================================
   Seven Beaufort - Organic Luxury Design System (style.css)
   ========================================================================== */

/* 1. Imports */
@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* 2. Custom Properties (Design Tokens) */
:root {
    /* Color Palette - Organic Editorial Summer Scheme */
    --color-background: #fcf9f4;                 /* Off-White Canvas */
    --color-surface: #fcf9f4;
    --color-surface-dim: #dcdad5;
    --color-surface-bright: #fcf9f4;
    
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f6f3ee;
    --color-surface-container: #f0ede9;          /* Sand Container Background */
    --color-surface-container-high: #eae8e3;
    --color-surface-container-highest: #e5e2dd;
    
    --color-on-surface: #1c1c19;                 /* Charcoal Primary Text */
    --color-on-surface-variant: #454840;         /* Muted Text */
    
    --color-inverse-surface: #31302d;
    --color-inverse-on-surface: #f3f0eb;
    
    --color-outline: #75786f;                    /* Taupe Outline */
    --color-outline-variant: #c5c8bd;
    
    /* Brand Accents */
    --color-primary: #526046;                    /* Sage Green (Primary Accent) */
    --color-on-primary: #ffffff;
    --color-primary-container: #6a795d;
    --color-on-primary-container: #f9ffed;
    --color-inverse-primary: #bcccab;
    
    --color-secondary: #9a442a;                  /* Terracotta (Secondary Accent) */
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fd9171;
    --color-on-secondary-container: #742911;
    
    --color-tertiary: #715362;                   /* Navy/Deep Slate (Contrast Accent) */
    --color-on-tertiary: #ffffff;
    
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    
    /* Accents & Decorative */
    --color-sky-blue: #5f8d9b;                   /* Soft Summer Mediterranean Sky Blue */
    --color-taupe: #75786f;
    --color-sage: #526046;
    --color-terracotta: #9a442a;
    
    /* Rounded Radius Scale */
    --rounded-sm: 0.25rem;                       /* 4px - Inner small elements / image borders */
    --rounded-default: 0.5rem;                   /* 8px - Buttons, Inputs */
    --rounded-md: 0.75rem;                       /* 12px - Intermediate elements */
    --rounded-lg: 1rem;                          /* 16px - Cards, main panels */
    --rounded-xl: 1.5rem;                        /* 24px - Large containers, modals */
    --rounded-full: 9999px;                      /* Pill shapes, chips, tags */
    
    /* Spacing Rhythm Scale */
    --spacing-unit: 8px;
    --spacing-gutter: 24px;
    --spacing-margin-desktop: 80px;
    --spacing-margin-mobile: 20px;
    --container-max-width: 1280px;
    
    /* Shadow Settings (Ambient Navy Tint at 5% Opacity) */
    --shadow-soft: 0 10px 30px rgba(113, 83, 98, 0.05);
    --shadow-spread: 0 20px 40px rgba(113, 83, 98, 0.1);
    --shadow-btn: 0 4px 6px rgba(82, 96, 70, 0.1);
    --shadow-btn-hover: 0 8px 16px rgba(82, 96, 70, 0.2);
}

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

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

body {
    background-color: var(--color-background);
    color: var(--color-on-surface);
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Premium Tactile Editorial Paper Grain Overlay */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.045; /* Extremely subtle and luxurious editorial tactile texture */
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background: var(--color-surface-container-highest);
    border-radius: var(--rounded-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* 4. Typography Scale */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Libre Caslon Text', serif;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-on-surface);
}

.display-lg {
    font-family: 'Libre Caslon Text', serif;
    font-size: 4rem; /* 64px */
    line-height: 4.5rem; /* 72px */
    letter-spacing: -0.02em;
    font-weight: 400;
}

.headline-xl {
    font-family: 'Libre Caslon Text', serif;
    font-size: 3rem; /* 48px */
    line-height: 3.5rem; /* 56px */
    font-weight: 400;
}

.headline-lg {
    font-family: 'Libre Caslon Text', serif;
    font-size: 2rem; /* 32px */
    line-height: 2.5rem; /* 40px */
    font-weight: 400;
}

.headline-md {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
    font-weight: 400;
}

.body-lg {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
    font-weight: 400;
}

.body-md {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
    font-weight: 400;
    color: var(--color-on-surface-variant);
}

.label-md {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    line-height: 1.25rem; /* 20px */
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.label-sm {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    line-height: 1rem; /* 16px */
    color: var(--color-on-surface-variant);
}

/* Adaptive Display Sizes for Mobile */
@media (max-width: 768px) {
    .display-lg {
        font-size: 2.5rem; /* 40px */
        line-height: 3rem; /* 48px */
        letter-spacing: -0.01em;
    }
    .headline-xl {
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
    .headline-lg {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }
}

/* 5. Layout & Grid System */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-margin-desktop);
    padding-right: var(--spacing-margin-desktop);
}

@media (max-width: 1024px) {
    .container {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (max-width: 768px) {
    .container {
        padding-left: var(--spacing-margin-mobile);
        padding-right: var(--spacing-margin-mobile);
    }
}

/* Grid layout generators */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--spacing-gutter);
}

.col-span-12 { grid-column: span 12 / span 12; }
.col-span-8  { grid-column: span 8 / span 8; }
.col-span-7  { grid-column: span 7 / span 7; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-2  { grid-column: span 2 / span 2; }

@media (max-width: 1024px) {
    .grid-12 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4 { grid-column: span 8 / span 8; }
    .col-span-3, .col-span-2 { grid-column: span 4 / span 4; }
}

@media (max-width: 768px) {
    .grid-12 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .col-span-12, .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4, .col-span-3, .col-span-2 {
        grid-column: span 4 / span 4;
    }
}

/* Flex Utilities */
.flex-row-center {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.gap-4 { gap: 32px; }

/* 6. Section Breathing / Spacing */
.py-breathing-lg {
    padding-top: 100px;
    padding-bottom: 100px;
}

.py-breathing-md {
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 768px) {
    .py-breathing-lg {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .py-breathing-md {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* 7. Reusable Custom Components */

/* Editorial Header Navigation */
.brand-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(252, 249, 244, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(117, 120, 111, 0.15);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-nav-container {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand-logo {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.brand-logo-img {
    height: 42px; /* Perfect proportion within the 90px header height */
    width: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand-logo:hover .brand-logo-img {
    transform: scale(1.04); /* Premium, organic micro-scaling feedback */
}

.logo-main {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--color-on-surface);
}

.logo-sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--color-primary);
    line-height: 1.1;
}

.nav-links {
    display: flex;
    gap: 8px;
    background: var(--color-surface-container-low);
    padding: 4px;
    border-radius: var(--rounded-full);
    border: 1px solid rgba(117, 120, 111, 0.1);
}

.nav-tab {
    padding: 10px 20px;
    border-radius: var(--rounded-full);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-tab:hover {
    color: var(--color-on-surface);
    background-color: rgba(82, 96, 70, 0.05);
}

.nav-tab-active {
    background-color: var(--color-primary);
    color: var(--color-on-primary) !important;
    box-shadow: 0 4px 10px rgba(82, 96, 70, 0.15);
}

/* Showcase Cards */
.card {
    background-color: var(--color-surface-container);
    border: 1px solid rgba(117, 120, 111, 0.3); /* Taupe at 30% */
    border-radius: var(--rounded-lg);
    padding: 40px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-spread);
    border-color: rgba(82, 96, 70, 0.6);
}

.card:hover::before {
    transform: scaleX(1);
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--rounded-default);
    background-color: var(--color-surface-container-high);
    border: 1px solid rgba(117, 120, 111, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 24px;
    color: var(--color-on-surface);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.card:hover .card-icon {
    transform: scale(1.08) rotate(2deg);
}

.card-title {
    margin-bottom: 12px;
}

.card-desc {
    margin-bottom: 32px;
}

.card-action {
    display: flex;
    align-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-top: auto;
}

.card-action span {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.card:hover .card-action span {
    transform: translateX(6px);
}

/* Restricted Card overrides */
.card-restricted {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: var(--color-surface-container-low);
    border-color: rgba(117, 120, 111, 0.15);
}

.card-restricted:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
    border-color: rgba(117, 120, 111, 0.15);
}

.card-restricted::before {
    display: none;
}

.card-restricted .card-icon {
    color: var(--color-on-surface-variant);
}

.card-restricted:hover .card-icon {
    transform: none;
}

.badge-restricted {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    border: 1.5px solid rgba(117, 120, 111, 0.3);
    padding: 4px 12px;
    border-radius: var(--rounded-full);
    align-self: flex-start;
    margin-top: auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: var(--rounded-default);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    text-decoration: none;
}

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

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

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

.btn-secondary:hover {
    transform: translateY(-2px);
    background-color: rgba(82, 96, 70, 0.05);
    box-shadow: 0 6px 12px rgba(82, 96, 70, 0.08);
}

.btn-accent {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
    box-shadow: 0 4px 6px rgba(154, 68, 42, 0.15);
}

.btn-accent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(154, 68, 42, 0.25);
    background-color: #833923;
}

.btn-accent-outline {
    background-color: transparent;
    border: 1.5px solid var(--color-secondary);
    color: var(--color-secondary);
}

.btn-accent-outline:hover {
    transform: translateY(-2px);
    background-color: rgba(154, 68, 42, 0.05);
    box-shadow: 0 6px 12px rgba(154, 68, 42, 0.1);
}

/* Chip Tags */
.chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: var(--rounded-full);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-right: 8px;
    margin-bottom: 8px;
}

.chip-sage {
    background-color: rgba(82, 96, 70, 0.1);
    color: var(--color-primary);
}

.chip-terracotta {
    background-color: rgba(154, 68, 42, 0.1);
    color: var(--color-secondary);
}

.chip-sky {
    background-color: rgba(95, 141, 155, 0.1);
    color: var(--color-sky-blue);
}

.chip-navy {
    background-color: rgba(113, 83, 98, 0.1);
    color: var(--color-tertiary);
}

/* Forms & Inputs */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--spacing-gutter);
}

.form-label {
    margin-bottom: 8px;
    color: var(--color-on-surface-variant);
}

.form-input {
    border: none;
    border-bottom: 1px solid rgba(117, 120, 111, 0.4);
    background-color: transparent;
    padding: 12px 4px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    color: var(--color-on-surface);
    transition: all 0.3s ease;
    border-radius: 0;
}

.form-input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    background-color: rgba(82, 96, 70, 0.02);
}

/* Lists & Tables */
.project-list {
    display: flex;
    flex-direction: column;
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(117, 120, 111, 0.2); /* Taupe at 20% */
}

.list-item:last-child {
    border-bottom: none;
}

.list-item-main {
    display: flex;
    flex-direction: column;
}

.list-item-title {
    margin-bottom: 4px;
}

/* Generic Layout Elements */
.editorial-lead {
    font-family: 'Libre Caslon Text', serif;
    font-style: italic;
    color: var(--color-on-surface-variant);
    border-left: 2px solid var(--color-primary);
    padding-left: var(--spacing-gutter);
    margin-bottom: 40px;
}

.hero-block {
    text-align: center;
    max-width: 800px;
    margin: 80px auto 100px auto;
}

.hero-block h1 {
    margin-bottom: 24px;
}

.hero-block p {
    color: var(--color-on-surface-variant);
    margin-bottom: 40px;
}

/* Reusable Footer */
.brand-footer {
    border-top: 1px solid rgba(117, 120, 111, 0.15);
    background-color: var(--color-surface-container-low);
    color: var(--color-on-surface-variant);
    padding-top: 60px;
    padding-bottom: 60px;
    margin-top: auto;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
}

.footer-copy {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* 8. Modern Micro-Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1.2s ease-out forwards;
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* 9. Dashboard Panels & Overlays */
.panel-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-gutter);
    margin-bottom: 40px;
}

.panel {
    background-color: var(--color-surface-container-lowest);
    border: 1px solid rgba(117, 120, 111, 0.2);
    border-radius: var(--rounded-lg);
    padding: 32px;
}

.panel-header {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-primary);
    border-bottom: 1px solid rgba(117, 120, 111, 0.15);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.stat-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-gutter);
    margin-bottom: 40px;
}

.stat-card {
    background-color: var(--color-surface-container-low);
    border: 1px solid rgba(117, 120, 111, 0.15);
    border-radius: var(--rounded-default);
    padding: 24px;
    border-left: 3px solid var(--color-primary);
}

.stat-card-accent {
    border-left-color: var(--color-secondary);
}

.stat-num {
    font-family: 'Libre Caslon Text', serif;
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--color-on-surface);
}

@media (max-width: 1024px) {
    .panel-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stat-group {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================================================
   Samuel's Scrollytelling & Premium Editorial Interactive Extensions
   ========================================================================== */

/* 1. Hero Cover Section (Intro just about Samuel) */
.hero-cover-section {
    min-height: 80vh;
    display: grid;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-image-frame {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 4 / 5;
    border-radius: var(--rounded-lg);
    background-color: var(--color-surface-container);
    overflow: visible;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded-lg);
    border: 1px solid rgba(117, 120, 111, 0.2);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
    position: relative;
}

@media (hover: hover) {
    .hero-img {
        filter: grayscale(20%);
    }

    .hero-image-frame:hover .hero-img,
    .hero-image-frame:hover video {
        filter: grayscale(0%);
        transform: scale(1.02) rotate(-1deg);
    }
}

.frame-border {
    position: absolute;
    top: 16px;
    left: 16px;
    right: -16px;
    bottom: -16px;
    border: 1px solid var(--color-primary);
    border-radius: var(--rounded-lg);
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.6;
}

@media (hover: hover) {
    .hero-image-frame:hover .frame-border {
        transform: translate(-8px, -8px);
        opacity: 0.9;
    }
}

/* 2. Scrollytelling Layout */
.scrollytelling-section {
    position: relative;
    width: 100%;
    display: flex;
    background-color: var(--color-surface-container-low);
    border-top: 1px solid rgba(117, 120, 111, 0.15);
    border-bottom: 1px solid rgba(117, 120, 111, 0.15);
}

.sticky-visual-showcase {
    position: sticky;
    top: 90px;
    width: 50%;
    height: calc(100vh - 90px);
    overflow: hidden;
    background-color: var(--color-surface-container);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.media-stack {
    position: relative;
    width: 85%;
    height: 80%;
    max-width: 580px;
    max-height: 720px;
    overflow: hidden;
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-spread);
    border: 1px solid rgba(117, 120, 111, 0.25);
    background-color: var(--color-surface);
}

.showcase-media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

.showcase-media-wrapper.active {
    opacity: 1;
    z-index: 2;
}

.showcase-img, .showcase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Gradients and Overlays for Showcase Media */
.image-tint, .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(28, 28, 25, 0.15) 100%);
    pointer-events: none;
    z-index: 4;
}

/* 3. Scrolling Narrative */
.scrolling-narrative {
    width: 50%;
    padding-left: 64px;
    padding-right: 64px;
    position: relative;
    z-index: 6;
}

.story-mobile-spacer {
    display: none;
}

.story-step {
    min-height: 240vh; /* Expanded to 240vh to slow down transition velocity and add spacious breathing room */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40vh;
    padding-bottom: 40vh;
}

.story-card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 540px;
    position: relative;
}

.story-card-footer {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.story-card {
    background: rgba(252, 249, 244, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(117, 120, 111, 0.25);
    border-radius: var(--rounded-lg);
    padding: 48px;
    box-shadow: var(--shadow-soft);
    width: 100%;
    max-width: 540px;
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.story-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--color-primary);
    opacity: 0.7;
}

.story-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.story-card-number {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
}

.story-card-indicator {
    width: 32px;
    height: 3px;
    border-radius: var(--rounded-full);
}

.story-card-details {
    border-top: 1px solid rgba(117, 120, 111, 0.15);
    padding-top: 24px;
    margin-top: 24px;
}

.story-accomplishments-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.story-accomplishments-list li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-on-surface-variant);
}

.story-accomplishments-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: 700;
}

.story-accomplishments-list li:last-child {
    margin-bottom: 0;
}

.story-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--rounded-full);
    border: 1px solid rgba(82, 96, 70, 0.15);
    background: rgba(252, 249, 244, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(82, 96, 70, 0.6);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    outline: none;
}

.story-nav-arrow .arrow-icon {
    font-size: 0.95rem;
    font-weight: 700;
    transition: transform 0.3s ease;
}

/* Premium Ambient Bobbing Animations */
@keyframes bobbing-up {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes bobbing-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

.story-nav-arrow.arrow-up {
    margin-bottom: 16px;
    animation: bobbing-up 4s ease-in-out infinite;
}

.story-nav-arrow.arrow-down {
    margin-top: 16px;
    animation: bobbing-down 4s ease-in-out infinite;
}

/* Hover Micro-interactions (Pause ambient movement, apply strong shift) */
.story-nav-arrow.arrow-up:hover {
    animation-play-state: paused;
    transform: translateY(-6px);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(82, 96, 70, 0.15);
}

.story-nav-arrow.arrow-down:hover {
    animation-play-state: paused;
    transform: translateY(6px);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(82, 96, 70, 0.15);
}

/* Special styling for the R&D arrow */
.story-nav-arrow.is-last {
    border-color: rgba(154, 68, 42, 0.2);
    color: var(--color-secondary);
}

.story-nav-arrow.is-last:hover {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
    border-color: var(--color-secondary);
    transform: translateY(6px);
    box-shadow: 0 4px 12px rgba(154, 68, 42, 0.15);
}

/* 4. Timeline Progress Gauge */
.timeline-gauge-container {
    position: absolute;
    left: 48px;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: rgba(117, 120, 111, 0.15);
    z-index: 10;
}

.timeline-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0%;
    background-color: var(--color-primary);
    transition: height 0.15s ease-out;
}

.timeline-dots {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 11;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-surface);
    border: 2px solid rgba(117, 120, 111, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-dot:hover {
    transform: scale(1.4);
    border-color: var(--color-primary);
}

.timeline-dot.active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    transform: scale(1.4);
    box-shadow: 0 0 0 4px rgba(82, 96, 70, 0.15);
}

/* 5. Strategic Projects Section Styling */
.projects-section {
    border-top: 1px solid rgba(117, 120, 111, 0.15);
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Compact Portal CTA Styles */
.portal-cta-box {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.portal-cta-card {
    background: rgba(252, 249, 244, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(117, 120, 111, 0.25);
    border-radius: var(--rounded-lg);
    padding: 36px;
    box-shadow: var(--shadow-soft);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-secondary); /* Terracotta */
    opacity: 0.8;
}

.portal-cta-box:hover .portal-cta-card {
    transform: translateY(-6px);
    border-color: rgba(154, 68, 42, 0.4); /* Terracotta accent */
    box-shadow: var(--shadow-spread);
    background: rgba(252, 249, 244, 0.85);
}

.portal-cta-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.portal-cta-icon-group {
    display: flex;
    gap: 8px;
    font-size: 1.35rem;
}

.portal-cta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.portal-cta-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.portal-cta-list .bullet {
    color: var(--color-secondary);
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.2;
}

.portal-cta-footer .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 0.8rem;
    border-radius: var(--rounded-md);
    border-color: rgba(154, 68, 42, 0.3);
    color: var(--color-secondary);
    background: transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-cta-box:hover .portal-cta-footer .btn {
    background-color: var(--color-secondary);
    color: #ffffff !important;
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-btn-hover);
}

@media (max-width: 768px) {
    .portal-cta-card {
        padding: 24px;
    }
}


/* 6. Robust Responsive Styling */
@media (max-width: 1024px) {
    .scrollytelling-section {
        flex-direction: column;
    }

    .sticky-visual-showcase {
        position: sticky;
        top: 90px; /* Pinned below global header */
        width: 100%;
        height: 40vh; /* Occupies top 40% of viewport */
        background-color: var(--color-surface-container);
        z-index: 10; /* Placed ABOVE scrolling content */
        border-bottom: 1px solid rgba(117, 120, 111, 0.15);
        padding: 16px 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* Pinned upper shadow */
    }

    .media-stack {
        width: 85%;
        height: 90%;
        max-width: 420px;
        max-height: none;
        border-radius: var(--rounded-md);
    }

    .scrolling-narrative {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 5; /* Placed BELOW sticky showcase */
        position: relative;
    }

    /* 
       Physical Top-Aligned Snap Tracks (iOS Safe Scrollytelling):
       By setting track height to exactly calc(100vh - 90px) and snapping the track to the top ('start'),
       we align the top of each track exactly at the header bottom.
       Inside the track, an empty .story-mobile-spacer occupies the top 40vh (covering the sticky media showcase),
       guaranteeing that the card wrapper underneath starts exactly at the visual showcase border.
       Flexbox centering in the remaining bottom space centers the card perfectly and automatically on all devices.
    */
    .story-step {
        min-height: calc(100vh - 90px) !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important; /* Start aligned under spacer */
        align-items: center;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box;
        scroll-snap-align: start !important; /* Extremely reliable native start-snapping */
        scroll-snap-stop: always;
    }

    .story-mobile-spacer {
        display: block;
        height: calc(40vh + 20px); /* Pushes cards exactly below visual showcase + 20px luxury gap */
        width: 100%;
        flex-shrink: 0;
    }

    .story-card-wrapper {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1; /* Centers card dynamically inside the remaining bottom height */
        padding-bottom: 24px;
        padding-top: 8px;
    }

    .story-card {
        max-width: 100%;
        padding: 18px 16px;
        background-color: rgba(252, 249, 244, 0.95);
        border: 1px solid rgba(117, 120, 111, 0.18);
        opacity: 1 !important; /* Keep cards visible on mobile for easier reading */
        transform: none !important;
        scroll-snap-align: none !important; /* Snapping is handled reliably by the parent track! */
    }

    .story-card-details {
        display: none; /* Hide detailed accomplishments on mobile to keep it extremely compact */
    }

    .story-card h3 {
        font-size: 1.20rem !important; /* Make title highly compact on mobile */
        margin-bottom: 4px !important;
    }

    .story-card h4 {
        font-size: 0.72rem !important;
        margin-bottom: 12px !important;
    }

    .story-card p {
        font-size: 0.78rem !important;
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
    }

    .story-card-footer {
        margin-top: 14px !important;
        gap: 4px !important;
    }

    .timeline-gauge-container {
        display: none; /* Hide progress bar on mobile to keep screen clean */
    }
    
    /* Smaller navigation arrows for mobile screen widths */
    .story-nav-arrow {
        width: 34px;
        height: 34px;
    }
    
    .story-nav-arrow.arrow-up {
        margin-bottom: 8px;
    }
    
    .story-nav-arrow.arrow-down {
        margin-top: 8px;
    }
}

@media (max-width: 768px) {
    .hero-cover-section {
        grid-template-columns: 1fr;
        padding-top: 60px;
        padding-bottom: 40px;
        text-align: center;
        gap: 40px;
    }
    
    .hero-cover-section .col-span-7 {
        grid-column: span 4 / span 4;
        order: 2;
    }
    
    .hero-cover-section .col-span-5 {
        grid-column: span 4 / span 4;
        order: 1;
        display: flex;
        justify-content: center;
    }

    .hero-image-frame {
        max-width: 280px;
    }

    .editorial-lead {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(117, 120, 111, 0.2);
        border-bottom: 1px solid rgba(117, 120, 111, 0.2);
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .hero-cover-section .flex-row-center {
        justify-content: center !important;
    }

    .sticky-visual-showcase {
        height: 35vh;
    }

    .story-mobile-spacer {
        height: calc(35vh + 16px) !important;
    }

    .story-card-wrapper {
        padding-bottom: 16px !important;
        padding-top: 4px !important;
    }

    .story-card {
        padding: 14px 12px !important;
    }

    .story-card h3 {
        font-size: 1.10rem !important;
        margin-bottom: 2px !important;
    }

    .story-card h4 {
        font-size: 0.70rem !important;
        margin-bottom: 6px !important;
    }

    .story-card p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    .story-card-footer {
        margin-top: 8px !important;
    }

    .story-nav-arrow {
        width: 32px !important;
        height: 32px !important;
    }

    .story-nav-arrow.arrow-up {
        margin-bottom: 4px !important;
    }

    .story-nav-arrow.arrow-down {
        margin-top: 4px !important;
    }
}

/* ==========================================================================
   7. Native Scroll Snapping (Scroll Ankers)
   ========================================================================== */
html {
    scroll-padding-top: 90px; /* Offset the snap point to perfectly account for sticky navigation header */
    scroll-behavior: smooth;
}

html.allow-snap {
    scroll-snap-type: y mandatory;
}

.hero-cover-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* 
   Shifting the scroll-snap-align target from the step container (135vh, which is larger than the viewport)
   to the individual story-card (which is smaller than the viewport) on desktop.
   On mobile, snapping is handled cleanly by the parent track (.story-step).
*/
@media (min-width: 1025px) {
    .story-card {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}

.projects-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.brand-footer {
    scroll-snap-align: end;
}

/* ==========================================================================
   Strategic Case Studies Showcase Grid
   ========================================================================== */
.cases-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.case-card {
    position: relative;
    padding: 32px 32px 32px 32px !important; /* Override standard card padding */
    min-height: 400px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align typography beautifully at the bottom of the card */
    height: 100%;
    background-color: var(--color-background) !important; /* Warm sand/off-white background */
    border: 1px solid rgba(117, 120, 111, 0.25) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-spread);
    border-color: rgba(154, 68, 42, 0.5) !important; /* Terracotta hover accent border */
}

.case-card::before {
    background-color: var(--color-secondary) !important; /* Terracotta top line */
    z-index: 10;
}

/* Background image scaling and transitions */
.case-card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-card:hover .case-card-bg-img {
    transform: scale(1.05);
}

/* Hover-specific opacity cross-fading for outline / color layered cards */
.bg-img-outline {
    opacity: 1;
}

.bg-img-color {
    opacity: 0;
}

.case-card:hover .bg-img-outline {
    opacity: 0;
}

.case-card:hover .bg-img-color {
    opacity: 1;
}

/* Large on-brand off-white gradient overlay to protect text readability */
.case-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(252, 249, 244, 0) 0%, rgba(252, 249, 244, 0.5) 40%, rgba(252, 249, 244, 1) 100%);
    z-index: 2;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-card:hover .case-card-overlay {
    opacity: 0.06; /* Reveal the background image in its pure, raw, vibrant color on hover */
}

/* Typography container fading out on hover to create a pure visual gallery feel */
.case-card-content {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-card:hover .case-card-content {
    opacity: 0;
    transform: translateY(12px); /* Elegant slide down transition */
    pointer-events: none; /* Let clicks pass safely to the parent card container */
}

/* Float minimalist vector icon in top-right corner with modern light glassmorphism */
.case-card-icon-overlay {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 4;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(252, 249, 244, 0.7); /* Light Glass */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary); /* Slate-green icon */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(117, 120, 111, 0.2);
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.case-card:hover .case-card-icon-overlay {
    background: var(--color-secondary); /* Solid terracotta on hover */
    color: #ffffff; /* White icon on hover */
    transform: scale(1.05);
}

.case-card-icon-overlay svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

/* Elegant tags displayed below each grid card container on the light background */
.case-card-tags-below {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 4px;
    margin-top: 14px;
    transition: opacity 0.3s ease;
}

.chip-below {
    font-size: 0.75rem; /* 12px */
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary); /* Slate-green primary */
    background-color: rgba(117, 120, 111, 0.06);
    border: 1px solid rgba(117, 120, 111, 0.18);
    padding: 3px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Elegant group-hover tag row fade */
.case-card-tags-below:hover .chip-below {
    opacity: 0.6;
}

.case-card-tags-below .chip-below:hover {
    opacity: 1;
    background-color: rgba(154, 68, 42, 0.08);
    color: var(--color-secondary); /* Dynamic hover to terracotta primary */
    border-color: rgba(154, 68, 42, 0.3);
}

/* Arrow hover tease micro-animation */
.case-card:hover .card-action span {
    transform: translateX(4px);
}

/* ==========================================================================
   Cinematic Case Studies Lightbox Portal Overlay
   ========================================================================== */
.case-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: none;
    overflow: hidden;
}

.case-lightbox.active {
    display: block;
}

.lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(28, 28, 25, 0.35); /* Elegant translucent dimming */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: opacity 0.5s ease;
    z-index: 1;
}

.lightbox-window {
    position: absolute;
    top: 5vh;
    left: 5vw;
    width: 90vw;
    height: 90vh;
    background-color: var(--color-surface-container-low);
    border: 1px solid rgba(117, 120, 111, 0.25);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-spread);
    overflow: hidden;
    z-index: 2;
    transform: scale(0.96) translateY(20px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.case-lightbox.active .lightbox-window {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Close Button (Floating micro-interaction) */
.lightbox-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 100;
    border-radius: 50%;
    border: 1px solid rgba(117, 120, 111, 0.25);
    background-color: rgba(252, 249, 244, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-outline);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-soft);
}

.lightbox-close .close-icon {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    transition: transform 0.3s ease;
}

.lightbox-close:hover {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-on-secondary);
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 4px 12px rgba(154, 68, 42, 0.2);
}

/* 2-Column Split Grid */
.lightbox-grid {
    display: flex;
    height: 100%;
    width: 100%;
}

/* Left Side: Cinematic Visual Showcase */
.lightbox-visual {
    width: 50%;
    height: 100%;
    position: relative;
    background-color: var(--color-surface-container);
    overflow: hidden;
    border-right: 1px solid rgba(117, 120, 111, 0.2);
}

.lightbox-media-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.lightbox-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 40%, rgba(28, 28, 25, 0.12) 100%);
    pointer-events: none;
    z-index: 4;
}

/* Scroll Progress Tracker Gauge inside lightbox */
.lightbox-progress-container {
    position: absolute;
    left: 24px;
    top: 15%;
    bottom: 15%;
    width: 2px;
    background: rgba(117, 120, 111, 0.15);
    z-index: 10;
}

.lightbox-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0%;
    background-color: var(--color-secondary); /* Terracotta active fill */
    transition: height 0.15s ease-out;
}

/* Right Side: Scrollable Editorial Content */
.lightbox-content-scroll {
    width: 50%;
    height: 100%;
    overflow-y: auto;
    background-color: var(--color-surface-container-lowest);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* buttery smooth momentum scroll for iOS */
    scroll-snap-type: y mandatory;
    scroll-padding: 0;
}

.lightbox-editorial-header {
    border-bottom: 1px solid rgba(117, 120, 111, 0.15);
    padding-bottom: 24px;
    margin-bottom: 40px;
}

.lightbox-section {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 80px 64px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(117, 120, 111, 0.1);
}

.lightbox-section:last-of-type {
    border-bottom: none;
}

/* Scroll Nudge Indicator */
.lightbox-scroll-nudge {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--color-on-surface-variant);
    opacity: 0.6;
    transition: opacity 0.3s ease, color 0.3s ease;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    user-select: none;
    z-index: 5;
}

.lightbox-scroll-nudge:hover {
    opacity: 1;
    color: var(--color-primary);
}

.nudge-arrow {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: nudgeBounce 2.2s infinite ease-in-out;
}

@keyframes nudgeBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(5px);
    }
    60% {
        transform: translateY(2.5px);
    }
}

/* ==========================================================================
   Responsive Lightbox Layout Overrides
   ========================================================================== */
@media (max-width: 1024px) {
    .lightbox-window {
        top: 2.5vh;
        left: 2.5vw;
        width: 95vw;
        height: 95vh;
    }

    .lightbox-grid {
        flex-direction: column;
    }

    /* Convert visual showcase to top sticky bar */
    .lightbox-visual {
        width: 100%;
        height: 35%;
        border-right: none;
        border-bottom: 1px solid rgba(117, 120, 111, 0.2);
    }

    /* Convert content scroll panel to bottom sheet */
    .lightbox-content-scroll {
        width: 100%;
        height: 65%;
    }

    .lightbox-section {
        padding: 40px 24px;
    }
    
    .lightbox-close {
        top: 16px;
        right: 16px;
        width: 36px;
        height: 36px;
    }
    
    .lightbox-close .close-icon {
        font-size: 1.25rem;
    }
    
    .lightbox-progress-container {
        display: none; /* Hide progress bar on tablet/mobile */
    }
    
    .lightbox-editorial-header {
        margin-bottom: 24px;
    }
    
    .lightbox-editorial-header h2 {
        font-size: 2rem !important;
    }

    .lightbox-scroll-nudge {
        bottom: 16px;
    }
}

@media (max-width: 768px) {
    .lightbox-visual {
        height: 30%;
    }
    
    .lightbox-content-scroll {
        height: 70%;
    }
    
    .lightbox-section {
        padding: 32px 16px;
    }
}

/* ==========================================================================
   Verified Reviews Section & Modals
   ========================================================================== */
.reviews-section {
    position: relative;
    z-index: 10;
}

.review-card {
    background-color: var(--color-surface-container-lowest);
    border: 1px solid rgba(117, 120, 111, 0.2);
    border-radius: var(--rounded-md);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(113, 83, 98, 0.02);
    position: relative;
    min-height: 250px;
}

.review-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-soft);
}

.review-header {
    margin-bottom: 20px;
}

.review-user-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--rounded-full);
    object-fit: cover;
    border: 1.5px solid var(--color-outline-variant);
}

.review-user-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-on-surface);
    margin: 0 0 2px 0;
}

.review-verified-badge {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
}

.review-text {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.05rem;
    line-height: 1.55;
    font-style: italic;
    color: var(--color-on-surface-variant);
    margin-bottom: 24px;
    flex-grow: 1;
    position: relative;
}

.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(117, 120, 111, 0.1);
    padding-top: 16px;
    font-size: 0.75rem;
    color: var(--color-outline);
}

.review-action-btn {
    transition: all 0.2s ease !important;
}

.review-action-btn:hover {
    background-color: rgba(117, 120, 111, 0.08) !important;
    transform: translateY(-1px);
}

.review-action-btn:active {
    transform: translateY(0);
}

.review-date {
    font-weight: 500;
}

/* Original Comment Tooltip */
.original-comment-toggle {
    position: relative;
    cursor: help;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    color: var(--color-outline);
    padding: 2px 6px;
    background: var(--color-surface-container-low);
    border: 1px solid rgba(117, 120, 111, 0.15);
    border-radius: var(--rounded-sm);
    transition: all 0.2s ease;
}

.original-comment-toggle:hover {
    color: var(--color-primary);
    background: rgba(82, 96, 70, 0.05);
    border-color: var(--color-primary);
}

.original-comment-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 250px;
    background-color: var(--color-inverse-surface);
    color: var(--color-inverse-on-surface);
    padding: 12px 16px;
    border-radius: var(--rounded-sm);
    box-shadow: var(--shadow-spread);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.4;
    text-transform: none;
    letter-spacing: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
}

.original-comment-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 15px;
    border: 6px solid transparent;
    border-top-color: var(--color-inverse-surface);
}

.original-comment-toggle:hover .original-comment-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Custom Google Login Button in style.css */
.btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background-color: var(--color-surface-container-lowest);
    border: 1.5px solid var(--color-outline-variant);
    color: var(--color-on-surface);
    padding: 14px 28px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--rounded-default);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    box-shadow: var(--shadow-soft);
}

.btn-google:hover {
    border-color: var(--color-primary);
    background-color: rgba(82, 96, 70, 0.02);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.btn-google svg {
    width: 18px;
    height: 18px;
}

/* Spinner & Animations */
.spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(82, 96, 70, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s linear infinite;
    margin: 0 auto 24px auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* ==========================================================================
   10. Tactile Canvas Memo & Drawing System
   ========================================================================== */

.memo-section {
    background-color: var(--color-background);
    position: relative;
    overflow: hidden;
}

/* Gelinieerd Memobriefje (Notebook style paper grid) */
.memo-paper-container {
    position: relative;
    perspective: 1500px; /* Essential for 3D envelope fold */
    max-width: 600px;
    margin: 0 auto;
    z-index: 10;
}

.memo-paper {
    background-color: #faf7f2; /* Cream/Bone paper tone */
    border-radius: var(--rounded-sm);
    box-shadow: 0 10px 40px rgba(113, 83, 98, 0.08), 
                0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(117, 120, 111, 0.25);
    position: relative;
    transform-origin: center bottom;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 1s cubic-bezier(0.25, 1, 0.5, 1);
    /* Lined Paper Background (28px horizontal rows) */
    background-image: 
        /* Red left margin line */
        linear-gradient(to right, transparent 59px, #e3a99c 59px, #e3a99c 61px, transparent 61px),
        /* Grey horizontal notebook lines */
        linear-gradient(rgba(117, 120, 111, 0.08) 1px, transparent 1px);
    background-size: 100% 100%, 100% 28px;
    background-position: 0 0, 0 12px;
    padding: 40px 30px 30px 80px; /* Indent body to align with red margin line */
    box-sizing: border-box;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231c1c19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/></svg>") 2 22, crosshair; /* Custom Pen Cursor */
}

/* Memo header branding */
.memo-paper-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(117, 120, 111, 0.15);
    padding-bottom: 12px;
    margin-bottom: 24px;
    margin-right: 10px;
}

.memo-paper-title {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.15rem;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-outline);
}

.memo-paper-indicator {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-secondary);
    text-transform: uppercase;
}

/* Canvas Area */
.memo-canvas-wrapper {
    position: relative;
    width: 100%;
    height: 320px; /* Lined grid area */
    border-radius: var(--rounded-sm);
    overflow: hidden;
}

.memo-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    touch-action: none; /* Prevent scroll on touch while drawing */
}

/* Canvas Drawing Placeholder Text */
.memo-canvas-placeholder {
    position: absolute;
    top: 15px;
    left: 10px;
    color: rgba(117, 120, 111, 0.45);
    font-family: 'Libre Caslon Text', serif;
    font-style: italic;
    font-size: 1.25rem;
    line-height: 28px;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.memo-canvas-placeholder.hidden {
    opacity: 0;
}

/* Canvas Controls bar */
.memo-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(117, 120, 111, 0.1);
}

.memo-btn-clear {
    background: none;
    border: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.725rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-outline);
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.memo-btn-clear:hover {
    color: var(--color-secondary);
}

/* Step 2 overlay: Typed explanation */
.memo-clarify-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(250, 247, 242, 0.98); /* Matching paper background */
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 40px 40px 30px 40px;
    box-sizing: border-box;
    border-radius: var(--rounded-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Let pointer events pass to the canvas beneath when hidden */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.memo-clarify-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Capture inputs when active */
    cursor: default; /* Reset custom drawing pen cursor to default standard pointer */
}

.memo-clarify-textarea {
    flex-grow: 1;
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(117, 120, 111, 0.3);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.95rem;
    color: var(--color-on-surface);
    resize: none;
    outline: none;
    line-height: 1.7;
    margin-top: 16px;
    margin-bottom: 24px;
    padding: 4px;
}

.memo-clarify-textarea::placeholder {
    color: var(--color-outline-variant);
    font-style: italic;
}

/* Glassmorphism Auth Modal */
.memo-auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    background-color: rgba(28, 28, 25, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.memo-auth-modal.active {
    opacity: 1;
    visibility: visible;
}

.memo-auth-card {
    background-color: var(--color-surface);
    border: 1px solid rgba(117, 120, 111, 0.25);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-spread);
    width: 100%;
    max-width: 440px;
    padding: 40px;
    text-align: center;
    box-sizing: border-box;
    transform: translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.memo-auth-modal.active .memo-auth-card {
    transform: translateY(0);
}

.memo-auth-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.memo-auth-title {
    font-family: 'Libre Caslon Text', serif;
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.memo-auth-desc {
    font-size: 0.875rem;
    color: var(--color-on-surface-variant);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* 3D Folding & Sending Animation States */
.memo-paper.folding {
    transform: scale(0.85) rotateX(45deg);
    box-shadow: 0 30px 60px rgba(113, 83, 98, 0.15);
}

.memo-paper.folded {
    transform: scale(0.6) rotateX(80deg) translateY(-200px);
    opacity: 0;
}

.memo-paper.flyaway {
    transform: scale(0.3) rotateX(90deg) translateY(-1000px) rotateY(15deg);
    opacity: 0;
}

/* Success Card */
.memo-success-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 100%;
    max-width: 460px;
    background-color: var(--color-surface-container);
    border: 1px solid rgba(82, 96, 70, 0.3);
    border-radius: var(--rounded-lg);
    box-shadow: var(--shadow-spread);
    padding: 40px;
    text-align: center;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.memo-success-card.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    z-index: 20;
}

/* Admin Dashboard Polaroid Styling for Memos */
.admin-memo-card {
    background-color: var(--color-surface-container-lowest);
    border: 1px solid rgba(117, 120, 111, 0.18);
    border-radius: var(--rounded-md);
    padding: 24px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admin-memo-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-spread);
}

.admin-memo-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-memo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--color-primary);
}

.admin-memo-meta {
    flex-grow: 1;
    overflow: hidden;
}

.admin-memo-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-on-surface);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.admin-memo-email {
    font-size: 0.725rem;
    color: var(--color-outline);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.admin-memo-date {
    font-size: 0.65rem;
    color: var(--color-outline-variant);
    margin-top: 1px;
}

/* The Polaroid Handwritten drawing frame */
.admin-memo-polaroid {
    background-color: #faf7f2;
    border: 1px solid rgba(117, 120, 111, 0.15);
    padding: 12px 12px 28px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transform: rotate(-1.5deg);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.admin-memo-polaroid:hover {
    transform: rotate(0.5deg) scale(1.02);
}

.admin-memo-img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    border: 1px solid rgba(117, 120, 111, 0.08);
    background-color: #faf7f2;
    display: block;
}

.admin-memo-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.825rem;
    color: var(--color-on-surface-variant);
    line-height: 1.5;
    background: var(--color-surface-container-low);
    border-left: 2px solid var(--color-secondary);
    padding: 10px 14px;
    border-radius: 0 var(--rounded-sm) var(--rounded-sm) 0;
    margin-bottom: 16px;
    flex-grow: 1;
    font-style: italic;
}

.admin-memo-action-bar {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(117, 120, 111, 0.08);
    padding-top: 12px;
}

/* Modal view in Admin panel to inspect drawings full size */
.admin-memo-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 600;
    background-color: rgba(28, 28, 25, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
}

.admin-memo-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.admin-memo-lightbox-content {
    background-color: #faf7f2;
    border: 1px solid rgba(117, 120, 111, 0.2);
    border-radius: var(--rounded-sm);
    padding: 30px;
    box-shadow: var(--shadow-spread);
    width: 90%;
    max-width: 750px;
    box-sizing: border-box;
    transform: scale(0.9);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.admin-memo-lightbox.active .admin-memo-lightbox-content {
    transform: scale(1);
}