/* FieldTrip - Responsive Foundation Styles */

/* Custom Font Loading */
@font-face {
    font-family: 'PP Agrandir Wide';
    src: url('FONT/PPAgrandir-WideRegular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === Viewport Refactor (Phase 2) === */
/* === Phase 4 Responsive & Row Consistency Complete === */
html, body {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    position: fixed;
    width: 100%;
    background-color: var(--color-background);
    background-attachment: fixed;
}

.app-container,
.layout-container,
.section {
    height: 100dvh;
    min-height: 100dvh;
    background-color: var(--color-background);
    background-attachment: fixed;
}

body {
    font-family: 'PP Agrandir Wide', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
}

/* === Design Tokens (Phase 5) === */
:root {
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.25rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 3rem;
    --spacing-container: 2.5rem;
    --container-padding-desktop: var(--spacing-md) var(--spacing-lg) var(--spacing-xl) var(--spacing-lg); /* More bottom padding for desktop */
    
    /* Common sizes */
    --size-icon: 24px;
    --size-logo-mobile: 200px;
    --size-logo-desktop: 300px;
    --size-illustration-desktop: 450px;
    --size-contact-max: 600px;

    /* Typography */
    --base-font-size: 1.1rem;

    /* Colors */
    --color-primary: #083521;
    --color-text: #083521;
    --color-background: #d7d3c1;
    --color-overlay-bg: rgba(245, 243, 240, 0.9);

    /* Animation */
    --animation-duration: 0.8s;
    --animation-duration-fast: 0.4s;
    --animation-duration-slow: 1.2s;
    --animation-easing: cubic-bezier(0.4,0,0.2,1);
}

/* Main app container */
.app-container {
    /* Layout */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    
    /* Spacing */
    height: 100dvh;
    min-height: 100dvh;
}

/* Layout containers for consistent structure */
.layout-container {
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
    flex: 1 1 auto;
}

/* 5-row layout system - unified padding */
.row {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Spacing */
    padding: var(--spacing-md); /* Unified spacing: 1.5rem everywhere */
}

/* RULE-BASED ROW SYSTEM - Follows 5 rules: visibility, no overlap, full height, uniform padding, big animation */
/* Normalized row behavior */
.row-1, .row-2, .row-4, .row-5 { 
    flex: 0 0 auto; /* Rule 2: Don't grow/shrink to prevent overlap */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md); /* Rule 4: Uniform padding */
}

/* Section 1: illustration column */
#section-1 .row-3 {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-height: none; /* Remove any height constraints */
}

/* Section 2: text block (static) - positioned like illustration in Section 1 */
#section-2 .row-3 {
    flex: 1 1 auto; /* Grow to fill available space like Section 1 */
    min-height: 0; /* Allow flex shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

/* Section 2: empty row 2 */
#section-2 .row-2 {
    flex: 0 0 auto; /* Don't grow */
    min-height: 0; /* Minimal height */
    padding: 0; /* No padding */
    display: none; /* Hide completely */
}

    /* Section 2 row-5: Empty spacing row */
    #section-2 .row-5 {
        flex: 0 0 auto; /* Don't grow */
        min-height: 30px; /* Increase height for more spacing */
        padding: 0; /* No padding */
        display: flex; /* Show the row */
    }

.row-1--header {
    flex: 0 0 auto; /* Rule 2: Don't grow/shrink to prevent overlap */
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--spacing-md); /* Rule 4: Uniform padding */
}

/* Section styles */
.section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh; /* JavaScript-calculated viewport height */
    opacity: 0;
    visibility: hidden;
    transform: translateY(100dvh); /* Match height calculation */
    transition: opacity var(--animation-duration) var(--animation-easing), 
                visibility var(--animation-duration) var(--animation-easing),
                transform 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Flex layout for proper space distribution */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Allow inner flex shrink to prevent clipping */
    flex: 1 1 auto;
    min-height: 0;
    /* Ensure proper stacking context for links */
    z-index: 1;
}

.section--active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* Ensure active section is on top for proper link interaction */
    z-index: 2;
}

/* Section going out of view - slides up */
.section--exiting-up {
    opacity: 1;
    visibility: visible;
    transform: translateY(-100dvh);
    z-index: 1;
}

/* Section going out of view - slides down */
.section--exiting-down {
    opacity: 1;
    visibility: visible;
    transform: translateY(100dvh);
    z-index: 1;
}

/* Illustration container - now part of row-3 */
.illustration-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.illustration {
    height: 100%;           /* Fill container height */
    max-height: 70dvh;      /* Allow more space */
    min-height: 40dvh;       /* Ensure minimum size */
    width: auto;
    object-fit: contain;
    /* opacity: 1; - Removed to prevent conflict with section-specific hiding */
}

/* Desktop illustration constraint */
@media (min-width: 769px) {
    .illustration {
        min-height: 40vh !important;
        max-width: var(--size-illustration-desktop); /* Reasonable desktop constraint */
    }
    
    /* Specific animations - 120% size */
    .illustration[src*="bird.gif"],
    .illustration[src*="bath.gif"],
    .illustration[src*="hill.gif"] {
        transform: scale(1.2);
    }
}

/* Mobile-specific illustration sizing - moved to main mobile block */

/* Content visibility states */
.section__content--hidden {
    opacity: 0;
    transform: translateY(20px);
}

/* Load animation sequence classes - improved smooth animations */
.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2; /* Ensure button stays above other content */
}

.fade-out {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Section 1 rows — canonical */
/* Initial state - hide content until animation starts (Section 1 only) */
#section-1 .row-1, 
#section-1 .row-2, 
#section-1 .row-3, 
#section-1 .row-4, 
#section-1 .row-5 {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrows are now outside sections, no overrides needed */

/* Ensure illustration starts hidden (Section 1 only) */
#section-1 .illustration {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* CSS safety net to prevent flash */
#section-1.hidden .row-1,
#section-1.hidden .row-2,
#section-1.hidden .row-3 img,
#section-1.hidden .row-4,
/* Section 1 hidden row-5 rule removed - arrow now outside section */

.section__content {
    text-align: center;
    max-width: var(--size-contact-max);
    width: 100%;
}

.section__logo {
    width: var(--size-logo-desktop); /* Desktop size */
    height: auto;
    max-width: var(--size-logo-desktop);
}

.section__logo--header {
    width: var(--size-logo-mobile);
    height: auto;
    position: fixed;
    left: 25px;
    top: 25px;
    transform: none;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

/* Navigation arrow positioning - unified centering for all screen sizes */
.nav-arrow--down,
.nav-arrow--up {
    width: var(--size-icon); /* Ensure consistent width */
    height: var(--size-icon); /* Ensure consistent height */
    position: absolute; /* Position absolutely so arrows don't move with content */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Remove auto margin */
}

/* Position down arrow at bottom center */
.nav-arrow--down {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px) !important;
    /* Ensure positioning is relative to viewport */
    position: fixed;
}

/* Position up arrow at top center */
.nav-arrow--up {
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(10px) !important;
    /* Ensure positioning is relative to viewport */
    position: fixed;
}

/* Removed unused .section__title - using logo instead */

.section__description {
    font-size: 1.1rem;
    font-weight: 400;
    max-width: 400px;
    margin: 0 auto var(--spacing-lg);
    line-height: 1.5;
}

/* Base font size moved to design tokens above */

/* Text block for section 2 */
.text-block {
    max-width: 600px;
    margin: 0 auto var(--spacing-lg);
    text-align: center;
}

.text-block p {
    margin-bottom: var(--spacing-md);
    font-size: var(--base-font-size);
    line-height: 1.6;
}

/* Links use 50% of base font size */
a {
    font-size: calc(var(--base-font-size) * 0.8);
}

/* CTA Button */
.cta-button {
    background: var(--color-background); /* Match background color, just in case if screen goes very small and button goes over content */
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: inherit;
    font-size: calc(var(--base-font-size) * 0.8);
    cursor: pointer;
    border-radius: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2; /* Ensure button stays above animations */
}

.cta-button--visible {
    opacity: 1;
    transform: translateY(0);
}

.cta-button:hover {
    background: var(--color-primary);
    color: var(--color-background);
    transform: translateY(-2px);
}

.cta-button:active {
    transform: translateY(0) scale(0.98);
}

/* Navigation Arrows */
.nav-arrow {
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    /* Position fixed so arrows don't move with content during transitions */
    position: fixed;
    z-index: 100;
    /* Reset button defaults that might affect centering */
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow--visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) !important;
    transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.nav-arrow:hover {
    color: var(--color-text);
}

/* Arrow hover transitions - different directions for each arrow type */
.nav-arrow--down.nav-arrow--visible:hover {
    transform: translateX(-50%) translateY(-3px) !important; /* Down arrow moves up on hover */
}

.nav-arrow--up.nav-arrow--visible:hover {
    transform: translateX(-50%) translateY(3px) !important; /* Up arrow moves down on hover */
}

.nav-arrow svg {
    width: 24px;
    height: 24px;
}

/* Contact Overlay */
.contact-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-overlay--visible {
    opacity: 1;
    visibility: visible;
}

.contact-overlay--visible .overlay-background {
    background: var(--color-overlay-bg);
    opacity: 1;
}

.overlay-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: background 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.14s,
                opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.14s;
}

.overlay-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: transparent;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: 0;
    z-index: 1001;
    transition: transform 0.2s ease; /* Add smooth rotation transition */
}

.overlay-close:hover {
    transform: rotate(90deg);
}

.contact-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    max-width: 500px; /* Default desktop width */
    width: 100%;
    padding: var(--spacing-lg);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.84s; /* Appear after all transitions complete */
}

.contact-overlay--visible .contact-info {
    opacity: 1;
}

.contact-intro {
    font-size: var(--base-font-size);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
    white-space: pre-line; /* Preserve line breaks from HTML */
}

.contact-details {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
}

.contact-email,
.contact-phone {
    font-size: calc(var(--base-font-size) * 1.15);
    color: var(--color-text);
    text-decoration: none;
}

.contact-email:hover {
    text-decoration: none;
}

/* General mobile - up to 768px */
@media screen and (max-width: 768px) {
    .layout-container {
        padding: 0; /* Remove padding to fit viewport properly */
    }
    
    .section__description {
        font-size: 1rem;
    }
    
    /* Mobile-specific logo sizing - works for both real mobile and Safari dev tools */
    .section__logo {
        width: clamp(250px, 20vw, 350px) !important; /* Bigger on mobile: min 250px, max 350px, 20% viewport */
        max-width: 350px !important;
        height: auto;
    }
    
    /* Mobile-specific illustration sizing - FORCE LARGE SIZE */
    .illustration {
        height: 100% !important; /* Fill container height */
        /* max-height: 50vh !important; Add constraint to avoid illustration growing too large */
        width: auto !important; /* Maintain aspect ratio */
        max-width: none !important; /* Remove width constraint - as big as possible */
        min-width: 250px !important; /* Ensure minimum size */
        object-fit: contain !important; /* Safe containment without distortion */
    }
    
    /* Hide logo in section 2 on mobile */
    #section-2 .section__logo--header {
        display: none;
    }
    
    /* Center everything on mobile */
    .row {
        justify-content: center;
        text-align: center;
    }
    
    /* MOBILE RULES: 1.Visible 2.No overlap 3.Full height 4.Uniform padding 5.Big animation */
    /* RULE 2: Prevent overlap by using simple flex behavior */
    
    /* Section 2 rows use unified padding from global .row rule */
    
    .row-1--header {
        justify-content: center;
    }
    
    /* DESKTOP RULES: 1.Visible 2.No overlap 3.Full height 4.Uniform padding 5.Big animation */
    .row-3 {
        flex: 1 !important; /* Rule 3: Fill available space to use full height */
        min-height: 0; /* Allow flex shrinking */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        padding-block: 0; /* Remove vertical padding */
        padding-inline: var(--spacing-md); /* Keep horizontal padding */
        max-height: none; /* Remove height constraint */
    }
    
    /* Desktop other rows - don't grow but don't shrink either */
    .row-1, .row-2, .row-4, .row-5 {
        flex-shrink: 0; /* Rule 2: Don't shrink to prevent overlap */
    }
    
    /* Ensure row-4 (button) stays centered */
    .row-4 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Ensure row-5 (down arrow) stays visible */
    .row-5 {
        flex-shrink: 0;
        /* min-height: 15vh; */
        min-height: 65px !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Mobile section 2 header row - logo and up arrow */
    #section-2 .row-1 {
        flex: 0 0 auto; /* Don't grow/shrink */
        padding: var(--spacing-md);
        display: flex;
        justify-content: flex-start; /* Logo on left, arrow positioned absolutely */
        align-items: center;
        position: relative;
        min-height: 60px; /* Ensure consistent header height */
        height: 60px; /* Fixed height to prevent layout shifts */
        overflow: visible; /* Allow arrow to extend outside if needed */
        margin-bottom: var(--spacing-lg); /* Space between arrow and text block */
    }
    
    /* Ensure logo doesn't shift when arrow appears */
    #section-2 .section__logo--header {
        flex: 0 0 auto;
        margin-right: auto; /* Push to left side */
    }
    
    /* Section 2 rows — canonical */
/* Mobile section 1 layout - spacing handled by global button margin rule */

/* Mobile section 2 layout - center text block in viewport */
#section-2 .row-3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        flex: none; /* Override flex behavior */
        width: 100%;
        max-width: calc(100vw - 2rem); /* Constrain width to fit viewport */
        /* COMPLETELY STATIC - no animations, transitions, or transforms */
        transition: none;
        animation: none;
        will-change: auto;
        backface-visibility: visible;
    }
    
    /* Mobile up arrow rule removed - arrows now outside sections */
    
    /* Text block with proper centering and width constraints - COMPLETELY STATIC */
    #section-2 .text-block {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center vertically in available space */
        align-items: center;
        max-width: calc(100vw - 2rem); /* Constrain width to fit viewport */
        width: 100%;
        padding: 0; /* No padding that affects paragraph spacing */
        text-align: center; /* Center text within container */
        /* COMPLETELY STATIC - no animations, transitions, or transforms */
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        /* Ensure stable positioning - prevent shifts from arrow */
        flex: 1 1 auto;
        min-height: 0;
        /* Better space division - distribute content more evenly */
        height: 100%;
        min-height: 60vh; /* Take up more space but not too much */
        padding: var(--spacing-lg) var(--spacing-sm); /* More vertical padding for better distribution */
        margin-bottom: var(--spacing-lg); /* Space between text block and contact button */
    }
    
    /* Contact button in separate row - always visible */
    .section#section-2 .cta-button {
        flex: 0 0 auto; /* Don't grow/shrink - prevent overlap */
        padding: 1rem 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(0.6rem, 3vw, 0.9rem) !important; /* Properly sized button text */
        min-height: auto !important; /* Use global button height */
        max-width: calc(100vw - 2rem) !important; /* Prevent button from exceeding viewport */
        visibility: visible !important; /* Force visibility */
        z-index: 2; /* Ensure button stays above other content */
    }
    
    /* Request references button - same sizing as Contact Us */
    .section#section-1 .cta-button {
        flex: 0 0 auto; /* Don't grow/shrink - prevent overlap */
        padding: 1rem 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: clamp(0.6rem, 3vw, 0.9rem) !important; /* Properly sized button text */
        min-height: auto !important; /* Use global button height */
        max-width: calc(100vw - 2rem) !important; /* Prevent button from exceeding viewport */
        visibility: visible !important; /* Force visibility */
    }
    
    /* Auto-sizing text block container - consolidated with centering styles above */
    
    /* Simple text block - natural paragraph breaks from content */
    #section-2 .text-block p {
        font-size: 0.9rem !important; /* Match section 1 description font size */
        line-height: 1.4; /* Match section 1 line height */
        margin: 0; /* No margins - let line breaks handle spacing */
        max-width: calc(100vw - 2rem); /* Constrain width to fit viewport with padding */
        width: 100%; /* Full width within constraints */
        margin-left: auto;
        margin-right: auto;
        text-align: center; /* Center text within paragraphs */
        white-space: pre-line; /* Respect line breaks from JSON */
        /* COMPLETELY STATIC - no animations, transitions, or transforms */
        transition: none;
        transform: none;
        animation: none;
        will-change: auto;
        backface-visibility: visible;
        word-wrap: break-word; /* Break long words if needed */
        overflow-wrap: break-word; /* Additional word breaking support */
    }
    
    /* Fixed font size for section 1 description on mobile - preserves line breaks */
    #section-1 .section__description {
        font-size: 0.9rem !important; /* Match section 2 font size */
        line-height: 1.4;
        max-width: calc(100vw - 2rem); /* Full width minus padding */
        margin: 0 auto;
        white-space: pre-line; /* Preserve line breaks from JSON */
    }
    
    /* Auto-sizing font for all mobile text - but don't override specific section rules */
    .section__description:not(#section-1 .section__description) {
        font-size: clamp(0.6rem, 4vw, 1.2rem) !important;
        max-width: calc(100vw - 2rem);
        margin: 0 auto;
    }
    
    .contact-form {
        padding: var(--spacing-lg);
        margin: var(--spacing-sm);
    }
    
    .contact-form h2 {
        font-size: 1.5rem;
    }
    
    
    /* Mobile contact overlay styles */
    .contact-overlay .contact-info {
        max-width: calc(100vw - 4rem) !important; /* Increased padding from 2rem to 4rem */
        width: 100% !important;
        padding: var(--spacing-xl) !important; /* Even more internal padding for breathing room */
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.84s !important; /* Appear after all transitions complete */
    }
    
    .contact-intro {
        font-size: clamp(0.6rem, 4vw, 1.2rem);
        margin-bottom: var(--spacing-xl);
        white-space: pre-line; /* Preserve line breaks from HTML */
    }
    
    .contact-details {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: center;
        text-align: center;
    }
    
    .contact-email,
    .contact-phone {
        font-size: clamp(0.7rem, 4.6vw, 1.38rem); /* 115% of intro font size */
        white-space: nowrap;
    }
    
    /* CRITICAL: Section 2 contact button protection - now using scaling approach */
    #section-2 .cta-button {
        margin-bottom: 15vh;
        position: relative; /* Enable z-index stacking */
        z-index: 10; /* Ensure button stays above other content */
    }
    
    /* Additional protection for section 2 row-4 (button container) - desktop-style positioning */
    #section-2 .row-4 {
        position: absolute;
        top: calc(50% + 180px); /* Position below text block (mobile text is smaller than desktop) */
        left: 50%;
        transform: translateX(-50%);
        flex: none; /* Override flex behavior */
        padding: 20px 0 0 0; /* Add 20px top padding for extra spacing */
        z-index: 10;
    }
    
    /* Make section 2 button visible on mobile */
    #section-2 .cta-button {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    /* CRITICAL: App container protection - now using scaling approach */
    .app-container {
        min-height: 100dvh; /* Use dynamic viewport height for iOS Safari 26 */
        position: relative; /* Enable proper stacking context */
        overflow: hidden; /* Prevent scrolling - scaling handles content fit */
    }
    
    /* Enhanced viewport height protection */
    html, body {
        /* iOS Safari browser chrome background fix */
        background-color: var(--color-background);
        background-attachment: fixed;
    }
}

/* Additional mobile styles consolidated into main mobile block above */

/* Small mobile - up to 480px */
@media (max-width: 480px) {
    #section-2 .row-3 {
        padding: var(--spacing-sm) 0; /* Minimal padding for very small screens */
    }
    
    #section-2 .text-block {
        padding: var(--spacing-md); /* Reduced padding */
    }
    
    #section-2 .text-block p {
        font-size: 0.9rem !important; /* Match section 1 font size */
    }
    
    #section-2 .cta-button {
        font-size: 0.7rem !important; /* Smaller button text */
        padding: 0.4rem 0.8rem; /* Even smaller padding for very small screens */
        min-height: auto !important; /* Use global button height */
    }
    
    #section-1 .cta-button {
        font-size: 0.7rem !important; /* Smaller button text */
        padding: 0.4rem 0.8rem; /* Even smaller padding for very small screens */
        min-height: auto !important; /* Use global button height */
    }

    /* Enhanced protection for very small screens - section 1 bottom arrow */
    /* Section 1 row-5 mobile rule removed - arrow now outside section */
    
    /* Enhanced protection for very small screens - section 2 contact button */
    #section-2 .cta-button {
        margin-bottom: var(--spacing-lg); /* Standard spacing */
    }
    
    #section-2 .row-5 {
        padding-bottom: var(--spacing-md); /* Standard padding */
        min-height: 30px; /* Use same spacing as main mobile rule */
    }
}

/* Avoid cta-button being too close to bottom */
#section-1 .cta-button {
    margin-bottom: 80px; /* Add space to prevent overlap with down arrow */
}

#section-2 .cta-button {
    margin-bottom: 15vh;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .section {
        transition: none;
    }
    
    /* Mobile nav-arrow rule removed - arrows now outside sections */
    
    .cta-button {
        transition: none;
    }
}

/* Desktop section 1 description - full width */
@media (min-width: 769px) {
    #section-1 .section__description {
        max-width: none; /* Remove width constraint on desktop */
        white-space: nowrap; /* Keep on one line */
    }
    
    /* Desktop section 2 logo - fixed position */
    #section-2 .section__logo--header {
        position: fixed;
        left: 25px;
        top: 25px;
        transform: none;
        z-index: 200;
        opacity: 0;
        transition: opacity 0.8s ease-in-out;
    }
    
    /* Desktop section 2 layout - center text block in viewport */
    #section-2 .row-3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        flex: none; /* Override flex behavior */
        width: 100%;
        max-width: 600px; /* Reasonable max width for text */
    }
    
    /* Desktop section 2 contact button - positioned below text block */
    #section-2 .row-4 {
        position: absolute;
        top: calc(50% + 200px); /* Start below the text block (50% + estimated text height) */
        left: 50%;
        transform: translateX(-50%);
        flex: none; /* Override flex behavior */
        padding: 20px 0 0 0; /* Add 20px top padding to move button lower */
    }
}

/* Focus styles for accessibility */
.nav-arrow:focus,
.cta-button:focus {
    outline: 2px solid #007acc;
    outline-offset: 2px;
}