/* ============================================================
   PROLIFIC VA — style.css
   Evolution: Diani-focused, bigger mission, refined typography
   Work section revamped into full-width alternating stories
   ============================================================ */

/* === PAGE TRANSITIONS ===
   Native cross-document view transitions (Chromium) smooth the jump
   between index.html and work.html. Unsupported browsers simply ignore
   this and navigate as before — no fallback needed. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.45s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* CSS-only fade-in on load — works in every browser, no JS required */
body {
    animation: page-fade-in 0.5s ease both;
}

@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* === RESET & BASE === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    line-height: 1.75;
    color: #f5f5f0;
    background: linear-gradient(
        180deg,
        #0a0a0f 0%,
        #12121a 8%,
        #1a1a25 15%,
        #252535 25%,
        #3a3a4a 40%,
        #5a5a6a 55%,
        #8a8a8a 70%,
        #b8b5aa 82%,
        #e8e4d9 92%,
        #f5f2ea 100%
    );
    min-height: 100vh;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    overflow-x: clip;
    position: relative;
}

/* Belt-and-braces: any negative margin, transform, or oversized
   background layer inside a section should never be able to push
   the page into horizontal scroll. `clip` (with `hidden` as the
   fallback for older browsers) stops it at every level, not just
   the body. */
section,
main,
header,
footer {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

/* === TYPOGRAPHY ===
   Scaled up per the brief:
   Hero: 72–80px | Section h2: 48–56px | Body: 20px | Prose: max 65ch
*/

h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    line-height: 1.15;
}

h1 {
    font-size: clamp(3rem, 7vw, 5rem);
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
    margin-bottom: 2.5rem;
}

h3 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 1.5rem;
}

p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.8;
}


 
/* === NAVBAR === */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5vw;
    mix-blend-mode: difference;
    color: #D4AF37;
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.navbar.navbar-hidden {
    transform: translateY(-100%);
}
 
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;
    z-index: 210;
}

.logo img {
    height: 34px;
    width: auto;
    display: block;
}
 
.nav-links {
    display: flex;
    gap: 2rem;
}
 
.nav-links a {
    font-size: 0.82rem;
    font-weight: 400;
    color: rgba(212, 175, 55, 0.72);
    text-decoration: none;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 3px;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}
 
/* Animated underline — slides in left to right */
.nav-links a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #f4c84b;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.nav-links a:hover {
    color: #f4c84b;
    text-shadow: 0 0 8px rgba(244, 200, 75, 0.35);
}
 
.nav-links a:hover::after {
    transform: scaleX(1);
}
 
/* Active page — permanent underline */
.nav-links a.nav-active {
    color: #f4c84b;
}
 
.nav-links a.nav-active::after {
    transform: scaleX(1);
}
 
.nav-toggle {
    display: none;
    position: relative;
    z-index: 210;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
 
.nav-toggle span {
    display: block;
    width: 26px;
    height: 2px;
    background: #D4AF37;
    border-radius: 2px;
    transform-origin: center;
    transition:
        transform  0.35s cubic-bezier(0.23, 1, 0.32, 1),
        opacity    0.25s ease,
        width      0.3s ease;
}
 
.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
 
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(8, 8, 14, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.8rem;
    opacity: 0;
    transform: translateY(-12px);
    transition:
        opacity   0.35s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
 
.nav-overlay.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}
 
.nav-overlay a {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 8vw, 3.2rem);
    font-weight: 400;
    color: #D4AF37;
    text-decoration: none;
    letter-spacing: 0.04em;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s ease;
}
 
.nav-overlay.is-open a:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.08s; }
.nav-overlay.is-open a:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.14s; }
.nav-overlay.is-open a:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.20s; }
.nav-overlay.is-open a:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.26s; }
 
.nav-overlay a:hover { color: #fff; opacity: 1 !important; }
 
.nav-overlay a + a {
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    padding-top: 2.8rem;
    margin-top: -2.8rem;
}
 
@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-toggle { display: flex; }
}
 
body.nav-open { overflow: hidden; }
 
 
/* === GALLERY NAV (work.html) ===
   Minimal: brand + "Selected Work" sub-label on the left,
   single "Home" link on the right. No hamburger needed.
*/
.navbar-work {
    mix-blend-mode: difference;
}
 
.logo-work {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    line-height: 1;
}
 
.logo-work span:first-child,
.logo-gallery span:first-child {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    font-weight: 500;
    color: #D4AF37;
    letter-spacing: 0.06em;
}
 
.logo-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(212, 175, 55, 0.5);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
 
.nav-home-link {
    font-size: 0.82rem;
    font-weight: 400;
    color: #D4AF37;
    text-decoration: none;
    letter-spacing: 0.06em;
    opacity: 0.75;
    position: relative;
    padding-bottom: 3px;
    transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}
 
.nav-home-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #f4c84b;
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
 
.nav-home-link:hover {
    opacity: 1;
    color: #f4c84b;
    text-shadow: 0 0 8px rgba(244, 200, 75, 0.35);
}
 
.nav-home-link:hover::after {
    width: 100%;
}
 
/* === HERO CTA BUTTON === */
.hero-cta {
    margin-top: 3.5rem;
    padding: 1.25rem 3.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    color: #1a1a00;
    background: linear-gradient(135deg, #f5c842 0%, #e6a800 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    z-index: 4;
    box-shadow:
        0 4px 16px rgba(212, 175, 55, 0.4),
        0 0 0 0 rgba(255, 200, 30, 0.6);
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
    animation: ctaPulse 2.5s ease-in-out infinite;
}

.hero-cta:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow:
        0 8px 28px rgba(212, 175, 55, 0.6),
        0 0 0 8px rgba(255, 200, 30, 0.3);
    animation: none;
}

.hero-cta:active {
    transform: translateY(-2px) scale(1.02);
}

/* .fade-in also sets the `animation` shorthand, and since it's a single
   class selector with equal specificity to .hero-cta, whichever rule is
   defined later in the file wins — which was silently cancelling the
   pulse forever. Bumping specificity here restores it: fade in once,
   then settle into the pulse. */
.hero-cta.fade-in {
    animation:
        heroFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        ctaPulse 2.5s ease-in-out 0.9s infinite;
}

@keyframes ctaPulse {
    0%   { box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), 0 0 0 0   rgba(255, 200, 30, 0.6); }
    50%  { box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), 0 0 0 12px rgba(255, 200, 30, 0);   }
    100% { box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), 0 0 0 0   rgba(255, 200, 30, 0.6); }
}

@media (max-width: 768px) {
    .hero-cta {
        padding: 1.1rem 2.75rem;
        font-size: 1rem;
    }
}

/* The footer sits on a light cream/gold gradient — the same warm hue
   family as the button itself. On hover the old glow (rgba(255,200,30))
   blended straight into that background, which read as the button
   "disappearing." Swapping in a darker, more saturated amber shadow
   and a slightly deeper gradient keeps it visible against light backgrounds. */
.footer-cta:hover {
    background: linear-gradient(135deg, #eec03d 0%, #c98f00 100%);
    box-shadow:
        0 8px 28px rgba(184, 134, 11, 0.5),
        0 0 0 8px rgba(184, 134, 11, 0.18);
}


/* === ENQUIRY MODAL ===
   Rebuilt as a responsive "dialogue card" rather than a fixed-width
   mobile form: fluid width via min(), a real two-column grid on
   desktop, deeper background blur, and a floating scale+fade entrance.
*/
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(6, 6, 14, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        visibility 0s linear 0.35s,
        backdrop-filter 0.35s ease;
    overflow-y: auto;
    padding: 4rem 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.35s ease,
        visibility 0s linear 0s,
        backdrop-filter 0.35s ease;
}

.modal-content {
    background: linear-gradient(to bottom, #fdfaf3 0%, #fff8e1 30%, #ffefc2 70%, #ffe8a8 100%);
    border-radius: 28px;
    width: min(92vw, 720px);
    max-height: 90vh;
    overflow-y: auto;
    padding: 3.25rem 3.2rem 2.75rem;
    position: relative;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 0 120px rgba(255, 215, 0, 0.2);
    transform: translateY(40px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    margin: auto;
}

.modal-overlay.is-open .modal-content {
    transform: translateY(0) scale(1);
}

/* Softer, smaller close button — a quiet circle rather than a
   heavy bordered box. */
.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: #fff;
    border: 1px solid rgba(31, 42, 68, 0.12);
    color: #1f2a44;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, box-shadow 0.25s ease;
    z-index: 10;
}

.modal-close:hover {
    background: #f5efdd;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: rotate(90deg);
}

/* Header gets real breathing room before the form starts */
.modal-header {
    text-align: center;
    margin-bottom: 1.75rem;
    padding-right: 2.5rem;
}

.modal-content h2 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    color: #1f2a44;
    margin-bottom: 0.75rem;
}

.modal-intro {
    font-size: 0.95rem;
    color: #2c3e50;
    line-height: 1.6;
    opacity: 0.85;
}

.modal-divider {
    width: 100%;
    height: 1px;
    background: rgba(31, 42, 68, 0.1);
    margin-bottom: 1.75rem;
}

.modal-divider-tight {
    margin-top: 0.5rem;
    margin-bottom: 1.25rem;
}

/* Two columns on desktop, one on mobile — scanning horizontally
   makes the wide card feel intentional rather than a mobile form
   stretched into empty space. */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

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

.form-group { margin-bottom: 1.4rem; }

.form-group-full { margin-bottom: 1.4rem; }

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1f2a44;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
}

.field-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.optional-tag {
    font-weight: 400;
    opacity: 0.55;
    text-transform: none;
    letter-spacing: 0;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    color: #1f2a44;
    background: rgba(255, 255, 255, 0.85);
    border: 1.5px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(31, 42, 68, 0.5);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: #f5c842;
    box-shadow: 0 0 0 3px rgba(245, 200, 66, 0.2);
}

.form-group textarea { resize: vertical; min-height: 110px; line-height: 1.5; }

.form-submit {
    width: 100%;
    padding: 0.95rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #1a1a00;
    background: linear-gradient(135deg, #f5c842 0%, #e6a800 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease;
    margin-top: 0.4rem;
    position: relative;
    z-index: 100;
    display: block;
}

.form-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.5), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.form-submit:active {
    transform: translateY(1px) scale(0.98);
}

.form-submit:disabled { opacity: 0.7; cursor: not-allowed; }

.form-status {
    text-align: center;
    margin-top: 0.8rem;
    font-size: 0.85rem;
    min-height: 20px;
    color: #1f2a44;
    font-weight: 500;
}

.form-status.success { color: #2ecc71; }
.form-status.error   { color: #e74c3c; }

@media (max-width: 700px) {
    .modal-overlay {
        padding: 1.25rem;
        align-items: flex-start;
    }
    .modal-content {
        width: min(94vw, 480px);
        padding: 2.5rem 1.5rem 2rem;
        margin: 1rem auto;
        border-radius: 20px;
    }
    .modal-header { padding-right: 2rem; }
}

body.modal-open { overflow: hidden; }


/* === HERO === */
.hero {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 5vw 6rem;
    overflow: hidden;
}

.noise-overlay {
    z-index: 1;
    position: absolute;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.hero-content {
    max-width: 900px;
    text-align: center;
    position: relative;
    z-index: 3;
}

/* Eyebrow — "Diani, Kenya" */
.hero-eyebrow {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(212, 175, 55, 0.7);
    margin-bottom: 1.5rem;
}

.hero h1 {
    margin-bottom: 2rem;
    color: #ffb803;
}

.subtext {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 184, 3, 0.85);
    margin-bottom: 1.25rem;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}



.hero-lamp {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.hero-lamp img {
    width: min(100px, 30vw);
    height: auto;
    opacity: 0.85;
    filter: brightness(1.05) contrast(0.95) saturate(0.9);
}

.stars,
.shooting-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.stars { z-index: 0; }
.shooting-stars { z-index: 2; }


/* === STORY — full-bleed background image, ~65vh bridge section === */
.story {
    position: relative;
    overflow: hidden;
    min-height: 65vh;
    display: flex;
    align-items: center;
}

/* Background image layer */
.story-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.story-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.52) saturate(0.8) blur(0.5px);
    display: block;
}

/* Gradient: solid dark at text left, opens sharply at 45% so people show through right */
.story-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(6, 6, 12, 0.90)  0%,
        rgba(6, 6, 12, 0.85)  30%,
        rgba(6, 6, 12, 0.45)  45%,
        rgba(6, 6, 12, 0.12)  70%,
        rgba(6, 6, 12, 0.04) 100%
    );
}

/* Dawn stars sit above bg, below text */
.story .dawn-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.story-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 7rem 5vw;
}

.story-text {
    max-width: 44ch;
}

.story-text h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: #fff;
    margin-bottom: 2.25rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.story-text p {
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 1.25rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* "Delivery is only the beginning." — anchor sentence */
.story-anchor {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.15rem, 2vw, 1.5rem) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-style: italic;
    margin-bottom: 1.75rem !important;
}

/* The three short when-clauses */
.story-list {
    margin: 0 0 1.75rem;
    padding-left: 1.25rem;
    border-left: 3px solid rgba(212, 175, 55, 0.55);
}

.story-list p {
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.65) !important;
    font-style: italic;
    font-size: clamp(0.95rem, 1.3vw, 1.05rem) !important;
}

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

/* "That's where being local matters." — closing punch */
.story-pivot {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
    color: #f5c842 !important;
    font-weight: 500;
    margin-top: 2rem !important;
    margin-bottom: 0 !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5) !important;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .story { min-height: auto; }
    .story-content { padding: 6rem 5vw; }
    .story-bg-overlay { background: rgba(6, 6, 12, 0.78); }
    .story-text { max-width: 100%; }
}


/* === WORK TEASER SECTION — sunrise, dark to light === */
.work-teaser {
    position: relative;
    overflow: hidden;
    padding: 0 0 7rem;
    background: linear-gradient(
        to bottom,
        #0b0d12   0%,
        #262b35  10%,
        #4a4640  22%,
        #6e4f30  32%,
        #a8712f  42%,
        #d9a244  52%,
        #e8c583  64%,
        #cdd0c9  78%,
        #969dac 100%
    );
}

/* Sunrise photo band — real photo carries the top of the arc,
   the section gradient above continues it for any viewport height */
.work-teaser-photo {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 58vh;
    min-height: 460px;
    max-height: 640px;
    z-index: 0;
    overflow: hidden;
}

.work-teaser-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    display: block;
}

.work-teaser-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(4, 6, 10, 0.75) 0%,
        rgba(4, 6, 10, 0.55) 35%,
        rgba(4, 6, 10, 0.25) 60%,
        rgba(4, 6, 10, 0)   100%
    );
}

.work-teaser-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 11rem 5vw 0;
}

.work-teaser-eyebrow {
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f5c842;
    opacity: 0.85;
    margin-bottom: 0.75rem;
}

.work-teaser h3 {
    text-align: center;
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    color: #ffb803;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    font-weight: 400;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.case-subheader {
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.3rem, 3vw, 1.9rem);
    color: #E0C070;
    font-style: italic;
    font-weight: 400;
    margin: -0.5rem 0 0;
    letter-spacing: 0.02em;
    opacity: 0.88;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}

/* Category label above card title (also used on work.html cards) */
.project-category {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #E0C070;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

/* ── Teaser grid: light glass cards, minimal copy, one click ── */
.teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 4rem 0 5rem;
}

.teaser-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 251, 244, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 20px 45px rgba(20, 10, 0, 0.22);
    opacity: 0;
    transform: translateY(40px);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.teaser-card.card-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--card-delay, 0s),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)  var(--card-delay, 0s);
}

.teaser-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(20, 10, 0, 0.3);
}

.teaser-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.teaser-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.teaser-card:hover .teaser-card-image img { transform: scale(1.06); }

.teaser-card-body {
    padding: 1.6rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
}

.teaser-card-body .project-category {
    color: #a8631f;
    opacity: 1;
}

.teaser-card-body h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.35rem, 2vw, 1.6rem);
    color: #201f28;
    letter-spacing: -0.01em;
    margin-bottom: 0.4rem;
}

.teaser-card-pitch {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    color: #55545e;
    margin-bottom: 1.1rem !important;
}

.teaser-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #a8631f;
    margin-top: auto;
}

.teaser-card-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s ease;
}

.teaser-card:hover .teaser-card-link { color: #7a4712; }
.teaser-card:hover .teaser-card-link svg { transform: translateX(4px); }

@media (max-width: 900px) {
    .teaser-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin: 3rem 0 3.5rem;
    }
}

@media (max-width: 768px) {
    .work-teaser-content { padding: 8rem 6vw 0; }
    .work-teaser-photo { height: 46vh; min-height: 340px; }
}

/* ── Single CTA footer ── */
.work-footer {
    max-width: 720px;
    margin: 3rem auto 0;
    padding: 0 1.5rem;
    text-align: center;
}

.work-footer-divider {
    width: 60px;
    height: 1px;
    background: rgba(122, 71, 18, 0.35);
    margin: 0 auto 3rem;
}

.work-explore {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    gap: 0.6rem;
}

.work-explore-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    color: #7a4712;
    transition: color 0.25s ease;
}

.work-explore-sub {
    font-size: 0.95rem;
    color: rgba(40, 34, 24, 0.65);
    max-width: 42ch;
    line-height: 1.6;
}

.work-explore-arrow {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #3a2205;
    background: linear-gradient(135deg, #f5c842 0%, #e6a800 100%);
    padding: 0.85rem 2.25rem;
    border-radius: 50px;
    box-shadow: 0 4px 16px rgba(122, 71, 18, 0.28);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.work-explore:hover .work-explore-title { color: #4a2a0a; }
.work-explore:hover .work-explore-arrow {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 8px 24px rgba(122, 71, 18, 0.4);
}

@media (max-width: 768px) {
    .work-footer { margin-top: 4rem; }
}


/* ============================================================
   MISSION STRIP — a breath between Work and Testimonials.
   Same sunrise photo as the Work section, cropped tight on the
   horizon glow. Overlay bookends at the same tone the sections
   either side of it already meet at, so it reads as a pause,
   not a new sky story.
   ============================================================ */
.mission-strip {
    position: relative;
    overflow: hidden;
    padding: 5.5rem 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22vw;
}

.mission-strip-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.mission-strip-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 70%;
    display: block;
}

.mission-strip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #969dac 0%,
        rgba(150, 157, 172, 0.5) 18%,
        rgba(12, 9, 6, 0.5) 50%,
        rgba(150, 157, 172, 0.5) 82%,
        #969dac 100%
    );
}

.mission-quote {
    position: relative;
    z-index: 2;
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.2rem, 2.6vw, 1.75rem);
    line-height: 1.65;
    color: #fdf6e8;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
    .mission-strip { padding: 4rem 6vw; min-height: 0; }
    .mission-quote { font-size: 1.15rem; }
}


/* ============================================================
   TESTIMONIALS — dark, cinematic "interview card" language
   Sky story: the sun that rose over "Selected Work" gets swallowed
   by dark cloud (the photo) through the middle of this section,
   then the cloud breaks into the same glow that opens the footer.
   ============================================================ */
.testimonials {
    padding: 11rem 5vw 11rem;
    position: relative;
    overflow: hidden;
    background: #2a2c3a;
}

.testimonials-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.testimonials-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
}

.testimonials-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #969dac 0%,
        rgba(150, 157, 172, 0.6) 6%,
        rgba(20, 18, 22, 0.25) 16%,
        rgba(12, 12, 16, 0.4) 40%,
        rgba(12, 12, 16, 0.4) 60%,
        rgba(20, 14, 4, 0.15) 82%,
        rgba(255, 216, 130, 0.55) 94%,
        #ffe8a8 100%
    );
}

.testimonials-content {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
}

.testimonials h2 {
    text-align: center;
    font-size: clamp(2.4rem, 5vw, 3.75rem);
    color: #ffb803;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}

.testimonials-sub {
    text-align: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 5rem;
    font-style: italic;
    letter-spacing: 0.01em;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.testimonial-card {
    background: rgba(20, 22, 34, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 16px;
    padding: 1.65rem 1.65rem 1.4rem;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(212, 175, 55, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    /* scroll reveal — starts invisible */
    opacity: 0;
    transform: translateY(40px);
}

/* Subtle stagger — breaks the grid symmetry */
.testimonial-card.offset {
    margin-top: 1.5rem;
}

.testimonial-card.card-revealed {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1) var(--t-delay, 0s),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1)  var(--t-delay, 0s),
        box-shadow 0.35s ease, border-color 0.35s ease;
}

.testimonial-card.offset.card-revealed {
    transform: translateY(0);
}

.testimonial-card.card-revealed:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45), 0 0 50px rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
}

.testimonial-card.offset.card-revealed:hover {
    transform: translateY(-6px);
}

/* Single keyword badge — the idea to remember */
.testimonial-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #E0C070;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 50px;
    padding: 0.3rem 0.8rem;
    margin-bottom: 0.65rem;
}

.testimonial-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    margin-bottom: 0.85rem;
    background: #12121a;
}

.testimonial-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Company logo variant (EuroBuild) sits on a light disc so the mark reads clearly */
.testimonial-photo.testimonial-logo {
    background: #fdfaf3;
}

.testimonial-photo.testimonial-logo img {
    object-fit: contain;
    padding: 12px;
}

/* Headline — the sentence that gets remembered */
.testimonial-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.2rem, 2.1vw, 1.45rem);
    font-weight: 500;
    line-height: 1.25;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem !important;
}

/* Supporting line — small, quiet, optional read */
.testimonial-explain {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1rem !important;
}

.testimonial-footer {
    width: 100%;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.author-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 0.01em;
}

.author-role {
    font-size: 0.75rem;
    color: rgba(224, 192, 112, 0.85);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 440px;
        margin: 0 auto;
        gap: 2.5rem;
    }
    .testimonial-card.offset { margin-top: 0; }
}

@media (max-width: 600px) {
    .testimonials { padding: 8rem 5vw 8rem; }
}


/* ============================================================
   FOOTER — Generous sunrise space, clear CTA
   ============================================================ */
.footer {
    padding: 7rem 5vw 5rem;
    position: relative;
    background: linear-gradient(
        to bottom,
        #ffe8a8 0%,
        #ffefc2 30%,
        #fff8e1 60%,
        #fdfaf3 100%
    );
    text-align: center;
}

.footer::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: radial-gradient(circle at 50% 120%, rgba(255,215,0,0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.footer-content {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.footer-heading {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.15;
    color: #001f3f;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.footer-sub {
    font-size: 1.1rem;
    color: rgba(0, 31, 63, 0.65);
    line-height: 1.7;
    margin-bottom: 3.5rem;
    max-width: 52ch;
    margin-left: auto;
    margin-right: auto;
}

.footer-cta {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.footer-cta-note {
    font-size: 0.8rem;
    color: rgba(0, 31, 63, 0.4);
    font-style: italic;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .footer { padding: 9rem 5vw 6rem; }
    .footer-heading { font-size: clamp(2rem, 7vw, 2.8rem); }
    .footer-sub { font-size: 1rem; }
}

/* ============================================================
   SITE FOOTER — closing note. Sky story lands here: full midday
   blue, sun high overhead, clear of the clouds that passed
   through the testimonials section.
   ============================================================ */
.site-footer {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 5vw 3.5rem;
    text-align: center;
}

.site-footer-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.site-footer-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 8%;
    display: block;
}

.site-footer-photo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #fdfaf3 0%,
        rgba(253, 250, 243, 0.85) 9%,
        rgba(255, 255, 255, 0.55) 20%,
        rgba(255, 255, 255, 0.5) 100%
    );
}

.site-footer-content {
    position: relative;
    z-index: 2;
    max-width: 480px;
    margin: 0 auto;
}

.footer-phone-prompt {
    font-size: 0.95rem;
    color: rgba(0, 31, 63, 0.7);
    margin-bottom: 0.5rem;
}

.footer-phone-plain {
    display: inline-block;
    font-size: 0.95rem;
    color: #001f3f;
    text-decoration: none;
    letter-spacing: 0.01em;
    margin-bottom: 2.5rem;
    transition: color 0.3s ease;
}

.footer-phone-plain:hover {
    color: #b8860b;
}

.footer-divider {
    width: 60px;
    height: 1px;
    background: rgba(0, 31, 63, 0.2);
    margin: 0 auto 2rem;
}

.slogan {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    color: #001f3f;
    font-style: italic;
    opacity: 0.8;
    margin-bottom: 1rem;
}

.footer-socials {
    display: flex;
    justify-content: center;
    gap: 1.1rem;
    margin-bottom: 1.5rem;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #001f3f;
    background: rgba(0, 31, 63, 0.07);
    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.footer-socials a:hover {
    color: #b8860b;
    background: rgba(184, 134, 11, 0.12);
    transform: translateY(-2px);
}

.copyright {
    font-size: 0.85rem;
    color: rgba(0, 31, 63, 0.55);
}

@media (max-width: 768px) {
    .site-footer { padding: 3.5rem 5vw 3rem; }
}


/* ============================================================
   HERO STARFIELD
   ============================================================ */
.star {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.25;
    background: #fff;
    width:  var(--size);
    height: var(--size);
    box-shadow: 0 0 calc(var(--size) * 1.5) calc(var(--size) * 0.5) var(--flare-color);
    animation: starFlare var(--duration) var(--delay) infinite ease-in-out;
    will-change: opacity, transform;
}

@keyframes starFlare {
    0%   { opacity: 0.15; transform: translate(-50%,-50%) scale(1);   }
    48%  { opacity: 0.15; transform: translate(-50%,-50%) scale(1);   }
    52%  { opacity: 1;    transform: translate(-50%,-50%) scale(1.8); }
    56%  { opacity: 0.9;  transform: translate(-50%,-50%) scale(1.4); }
    60%  { opacity: 1;    transform: translate(-50%,-50%) scale(2.0); }
    68%  { opacity: 0.5;  transform: translate(-50%,-50%) scale(1.2); }
    75%  { opacity: 0.15; transform: translate(-50%,-50%) scale(1);   }
    100% { opacity: 0.15; transform: translate(-50%,-50%) scale(1);   }
}


/* ============================================================
   SHOOTING STARS
   ============================================================ */
.meteor {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0  6px 2px rgba(255, 240, 180, 0.95),
        0 0 14px 4px rgba(255, 210, 100, 0.6),
        0 0 28px 8px rgba(255, 180,  60, 0.25);
    opacity: 0;
    animation-name: meteorFly;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    will-change: transform, opacity;
}

.meteor::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 120px;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(var(--streak-angle));
    background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,220,120,0.15) 25%, rgba(255,240,180,0.55) 60%, rgba(255,255,255,0.9) 100%);
    border-radius: 1px;
    filter: blur(1.5px);
}

.meteor::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 100px;
    bottom: 0;
    left: 50%;
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(var(--streak-angle));
    background: linear-gradient(to top, transparent 0%, rgba(255,200,80,0.08) 40%, rgba(255,240,180,0.22) 100%);
    filter: blur(5px);
    border-radius: 4px;
}

@keyframes meteorFly {
    0%   { opacity: 0;   transform: translate(var(--startX), var(--startY)); }
    6%   { opacity: 1; }
    80%  { opacity: 0.9; }
    100% { opacity: 0; transform: translate(calc(var(--startX) + var(--travelX)), calc(var(--startY) + var(--travelY))); }
}


/* ============================================================
   DAWN STARS (story section)
   ============================================================ */
.story .dawn-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.dawn-star {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    width:  var(--size);
    height: var(--size);
    opacity: 0.12;
    background: #fff;
    box-shadow: 0 0 calc(var(--size) * 1.2) calc(var(--size) * 0.3) var(--flare-color);
    animation: dawnStarFlare var(--duration) var(--delay) infinite ease-in-out;
    will-change: opacity;
}

@keyframes dawnStarFlare {
    0%   { opacity: 0.08; transform: translate(-50%,-50%) scale(1);   }
    45%  { opacity: 0.08; transform: translate(-50%,-50%) scale(1);   }
    52%  { opacity: 0.55; transform: translate(-50%,-50%) scale(1.4); }
    60%  { opacity: 0.35; transform: translate(-50%,-50%) scale(1.2); }
    72%  { opacity: 0.08; transform: translate(-50%,-50%) scale(1);   }
    100% { opacity: 0.08; transform: translate(-50%,-50%) scale(1);   }
}


/* ============================================================
   STORY TEXT — SCROLL REVEAL (fade up, single column)
   ============================================================ */
.story-text.reveal-ready {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}

.story-text.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ============================================================
   HERO FADE-IN ANIMATIONS
   ============================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: heroFadeIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s;  }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s;  }
.delay-5 { animation-delay: 0.8s;  }

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


/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 300;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 2px rgba(255,255,255,0.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background 0.25s ease;
    animation: whatsappPulse 2.8s ease-in-out infinite;
}

.whatsapp-float:hover {
    transform: scale(1.15);
    background: #20bd5a;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.2);
    animation: none;
}

.whatsapp-float svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.whatsapp-float:hover svg { transform: scale(1.1); }

@keyframes whatsappPulse {
    0%   { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0   rgba(37,211,102,0.45); }
    50%  { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 10px rgba(37,211,102,0);    }
    100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 0 0 0   rgba(37,211,102,0.45); }
}

@media (max-width: 768px) {
    .whatsapp-float { bottom: 1.5rem; right: 1.2rem; width: 46px; height: 46px; }
    .whatsapp-float svg { width: 22px; height: 22px; }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}