:root,[data-theme="light"]{--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);--text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--radius-md:.75rem;--radius-lg:1.25rem;--radius-xl:1.75rem;--radius-full:9999px;--font-display:'Cabinet Grotesk','Inter',sans-serif;--font-body:'Satoshi','Inter',sans-serif;--color-bg:#f5f8fc;--color-surface:#ffffff;--color-surface-2:#eef4fb;--color-border:#cfdae8;--color-text:#163150;--color-text-muted:#56708c;--color-primary:#1767b0;--color-primary-soft:#dceaf8;--color-gold:#d5a34a;--shadow-sm:0 1px 2px rgba(10,31,53,.06);--shadow-md:0 12px 28px rgba(17,56,95,.10);--shadow-lg:0 24px 56px rgba(17,56,95,.14)}
    [data-theme="dark"]{--color-bg:#101821;--color-surface:#162332;--color-surface-2:#1b2a3d;--color-border:#30455f;--color-text:#edf4fb;--color-text-muted:#afc0d3;--color-primary:#77b2ea;--color-primary-soft:#22384c;--color-gold:#e1bc70;--shadow-sm:0 1px 2px rgba(0,0,0,.25);--shadow-md:0 12px 28px rgba(0,0,0,.30);--shadow-lg:0 24px 56px rgba(0,0,0,.36)}
    *,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top left, rgba(23,103,176,.08), transparent 28%),var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-base);line-height:1.6}img,svg{display:block;max-width:100%;height:auto}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.08}p{margin:0;max-width:72ch}.container{max-width:1220px;margin:0 auto;padding:0 var(--space-4)}section{padding:var(--space-16) 0}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:var(--space-4);top:var(--space-4);z-index:99;background:var(--color-surface);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full)}
    .site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--color-bg) 88%, transparent);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in srgb,var(--color-border) 88%, transparent)}
    .topbar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0}
    .brand{display:flex;align-items:center;gap:var(--space-3)}.brand svg{width:54px;height:54px}.brand strong{display:block;font-size:var(--text-lg)}.brand span{display:block;color:var(--color-text-muted);font-size:var(--text-sm)}
    .theme-btn,.apply-btn{min-height:44px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);box-shadow:var(--shadow-sm)}
    .heart-tabs{display:flex;gap:var(--space-3);overflow:auto;padding:0 0 var(--space-4);scrollbar-width:none}.heart-tabs::-webkit-scrollbar{display:none}
    .heart-tab{position:relative;display:flex;align-items:center;justify-content:center;width:142px;min-width:142px;height:104px;padding:14px 12px 24px;color:var(--color-primary);font-weight:700;font-size:11px;line-height:1.05;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);clip-path:path('M 66 106 C 25 75 10 58 10 35 C 10 18 24 8 39 8 C 50 8 61 14 66 24 C 71 14 82 8 93 8 C 108 8 122 18 122 35 C 122 58 107 75 66 106 Z')}
    .lang-switch{min-height:46px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:.8rem 1rem}.theme-toggle{width:46px;padding:0}
    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-8);align-items:center}.eyebrow{display:inline-flex;align-items:center;background:var(--color-primary-soft);color:var(--color-primary);padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-weight:700;font-size:var(--text-sm)}
    h1{font-size:clamp(2.5rem,5vw,5.3rem);letter-spacing:-.04em;margin-top:var(--space-5)}.hero-copy p{margin-top:var(--space-5);color:var(--color-text-muted);font-size:var(--text-lg)}.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--space-5);border-radius:var(--radius-full);font-weight:700}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-surface);border:1px solid var(--color-border)}
    .hero-card{background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));border:1px solid var(--color-border);border-radius:32px;padding:var(--space-4);box-shadow:var(--shadow-lg)}.hero-card img{border-radius:24px;aspect-ratio:4/5;object-fit:cover}
    .language-band{margin-top:var(--space-8);background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 8%, var(--color-surface)),color-mix(in srgb,var(--color-gold) 8%, var(--color-surface)));border:1px solid var(--color-border);border-radius:28px;padding:var(--space-5);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-5);box-shadow:var(--shadow-md)}.language-band h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}.language-band p{color:var(--color-text-muted)}.language-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);align-content:flex-start}.language-chips span{display:inline-flex;align-items:center;min-height:40px;padding:0 .95rem;border-radius:999px;background:var(--color-surface);border:1px solid color-mix(in srgb,var(--color-primary) 18%, var(--color-border));font-size:var(--text-sm);font-weight:700;color:var(--color-primary)}
    .heart-divider{display:flex;justify-content:center;align-items:center;padding:var(--space-3) 0}.heart-divider svg{width:108px;height:92px}.heart-divider .beat{transform-origin:center;animation:beat 2.3s ease-in-out infinite;filter:drop-shadow(0 10px 24px rgba(23,103,176,.18))}@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(.98)}42%{transform:scale(1.08)}60%{transform:scale(1)}}
    .discipline{scroll-margin-top:140px}.discipline-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:center}.discipline-media img{border-radius:28px;box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover}.discipline-copy{display:grid;gap:var(--space-4)}.pill-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.pill{display:inline-flex;align-items:center;padding:.55rem .95rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);font-size:var(--text-sm);font-weight:700}
    .compliance-panel{margin-top:var(--space-5);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));border:1px solid var(--color-border);box-shadow:var(--shadow-md);border-radius:28px;padding:var(--space-5)}.compliance-panel h3{font-size:var(--text-lg);margin-bottom:var(--space-3)}.legal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.legal-item{display:flex;gap:var(--space-2);align-items:flex-start;background:var(--color-surface);border:1px solid var(--color-border);padding:var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm)}.legal-item:before{content:'✓';font-weight:800;color:var(--color-primary)}
    .upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin-top:var(--space-4)}.upload-box{background:var(--color-surface);border:1px dashed color-mix(in srgb,var(--color-primary) 38%, var(--color-border));border-radius:18px;padding:var(--space-4)}.upload-box strong{display:block}.upload-box span{display:block;margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--text-sm)}.upload-box input{margin-top:var(--space-3);width:100%}
    .apply-panel{background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 10%, var(--color-surface)),var(--color-surface));border:1px solid var(--color-border);box-shadow:var(--shadow-lg);border-radius:32px;padding:var(--space-8)}.section-head{margin-bottom:var(--space-6)}.section-head p{color:var(--color-text-muted);margin-top:var(--space-3)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}label{display:grid;gap:var(--space-2);font-size:var(--text-sm);font-weight:700}input,select,textarea{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--color-border);background:var(--color-surface);padding:0 var(--space-4);color:var(--color-text)}textarea{min-height:120px;resize:vertical;padding:var(--space-3) var(--space-4)}.full{grid-column:1/-1}
    footer{padding:var(--space-10) 0 var(--space-16);color:var(--color-text-muted)}
    @media (max-width:980px){.hero-grid,.discipline-grid,.language-band,.legal-grid,.upload-grid,.form-grid{grid-template-columns:1fr}.heart-tab{width:132px;min-width:132px;height:98px;font-size:10px;padding:12px 10px 24px;clip-path:path('M 66 21 C 66 7, 46 2, 33 14 C 20 2, 0 7, 0 21 C 0 46, 33 64, 33 64 C 33 64, 66 46, 66 21 Z')}.topbar{flex-wrap:wrap}.brand{width:100%}}
    @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.heart-divider .beat{animation:none}}
    html {
      scroll-padding-top: 100px;
      scroll-behavior: smooth;
    }
    .lang-switch{
        min-height: 39px;
        padding: 0 10px;
        height: 30px;
        font-size: 13px;
        padding: 0 var(--space-4);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        background: var(--color-surface);
        box-shadow: var(--shadow-sm);
    }
/* RN IMAGE GRID */

.modern-gallery{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

/* IMAGE CARD */

.gallery-item{
    position:relative;
    aspect-ratio:1/1; /* perfect square */

    overflow:hidden;
    border-radius:18px;

    border:4px solid #fff;

    background:#fff;

    box-shadow:
        0 4px 14px rgba(0,0,0,0.08);
}

/* IMAGE */

.gallery-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* MOBILE */

@media (max-width:640px){

    .modern-gallery{
        grid-template-columns:1fr;
    }

}
  /* =========================================
           STORYTELLING TIMELINE (ALTERNATING)
           — Preserves original gallery as a base but transforms into alternating story blocks
           ========================================= */
        
        .storytelling-timeline {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 3rem;
        }
        
        /* each story block: alternates layout */
        .story-block {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2rem;
            background: transparent;
            transition: all 0.3s ease;
        }
        
        /* image container — uses same design language as original gallery-item */
        .story-image {
            flex: 1.2;
            min-width: 240px;
        }
        
        .story-card {
            position: relative;
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 34px;
            border: 4px solid rgba(255, 255, 255, 0.95);
            background: #ffffff;
            box-shadow: 0 20px 45px rgba(16, 24, 40, 0.10), 0 8px 18px rgba(16, 24, 40, 0.05);
            transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
            animation: floatCard 7s ease-in-out infinite;
        }
        
        .story-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .6s ease;
        }
        
        .story-card:hover {
            transform: translateY(-12px) scale(1.02);
            z-index: 20;
            box-shadow: 0 30px 60px rgba(16, 24, 40, 0.18), 0 12px 24px rgba(16, 24, 40, 0.08);
        }
        
        .story-card:hover img {
            transform: scale(1.05);
        }
        
        /* narrative text panel — matches legal-item styling but more storytelling */
        .story-text {
            flex: 1;
            background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2));
            border: 1px solid var(--color-border);
            border-radius: 32px;
            padding: 1.75rem;
            box-shadow: var(--shadow-md);
            transition: transform 0.25s ease;
        }
        
        .story-text h4 {
            font-size: var(--text-lg);
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--color-primary);
            letter-spacing: -0.01em;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .story-text h4::before {
            content: "✨";
            font-size: 1.4rem;
        }
        
        .story-text p {
            color: var(--color-text-muted);
            font-size: var(--text-sm);
            line-height: 1.5;
            margin-bottom: 1rem;
        }
        
        .story-badge {
            display: inline-block;
            background: var(--color-primary-soft);
            color: var(--color-primary);
            border-radius: var(--radius-full);
            padding: 0.3rem 0.9rem;
            font-size: 0.75rem;
            font-weight: 700;
            margin-top: 0.5rem;
        }
        
        /* alternating order: for even blocks image right, text left */
        .story-block.reverse {
            flex-direction: row-reverse;
        }
        
        /* keep responsive */
        @media (max-width: 980px) {
            .story-block, .story-block.reverse {
                flex-direction: column;
            }
            .story-image, .story-text {
                width: 100%;
            }
            .story-card {
                max-width: 420px;
                margin: 0 auto;
            }
        }
        
        @keyframes floatCard {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
        }
        
        /* dark mode consistency */
        [data-theme="dark"] .story-card {
            border: 4px solid rgba(255, 255, 255, 0.95);
            box-shadow: 0 25px 55px rgba(0, 0, 0, 0.35);
        }
        
        [data-theme="dark"] .story-text {
            background: var(--color-surface);
            border-color: var(--color-border);
        }
        
        /* Override for mobile to ensure animation is subtle */
        @media (max-width: 640px) {
            .story-card {
                animation: none;
            }
        }

/* DEFAULT */

.mobile-header{
    display:none;
}


/* MOBILE */

@media (max-width:768px){

    .desktop-header{
        display:none;
    }

    .mobile-header{
        display:block;
        padding:14px;
    }

    .mobile-top{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }

    .mobile-brand-text{
        text-align:center;
        margin-top:10px;
    }

    .mobile-brand-text strong{
        display:block;
        font-size:18px;
    }

    .mobile-brand-text span{
        font-size:12px;
        color:var(--color-text-muted);
    }

    .mobile-buttons{
        display:flex;
        gap:10px;
        margin-top:14px;
    }

    .mobile-buttons .apply-btn{
        flex:1;
        text-align:center;
        padding:10px;
    }

    .mobile-heart-tabs{
        margin-top:18px;

        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:0px;
    }

    .mobile-heart-tabs .heart-tab{
        width:100%;
        min-width:unset;
        height:82px;
        font-size:13px;
        justify-content: flex-start;
    }
    html {
      scroll-padding-top: 250px;
      scroll-behavior: smooth;
    }

}