/* =========================================================
   KALAASIDDHI — DESIGN TOKENS
   ========================================================= */

:root{
    --kalaa-blue:#2643C4;
    --siddhi-green:#0EA57A;
    --gold:#A97100;
    --gold-soft:#D4A63A;
    --ivory:#F5F1EA;
    --ivory-dark:#EDE6D8;
    --white:#FFFFFF;
    --text-dark:#221F1A;
    --text-muted:#5F5A50;

    --font-display:'Berkshire Swash', cursive;
    --font-body:'Poppins', sans-serif;

    --container:1280px;
    --radius-lg:26px;
    --radius-md:18px;

    --ease:cubic-bezier(.22,1,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
    font-family:var(--font-body);
    background:var(--ivory);
    color:var(--text-dark);
    overflow-x:hidden;
    line-height:1.6;
}

img{ display:block; max-width:100%; }

a{ color:inherit; }

.eyebrow{
    display:inline-block;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    font-weight:600;
    color:var(--siddhi-green);
    margin-bottom:14px;
}

.section-heading{
    font-size:clamp(30px,4vw,44px);
    font-weight:700;
    letter-spacing:-0.5px;
}

/* buttons */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}

.btn-primary{
    background:linear-gradient(100deg,var(--kalaa-blue),var(--siddhi-green));
    color:var(--white);
    box-shadow:0 10px 24px rgba(38,67,196,.22);
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 30px rgba(38,67,196,.3);
}

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

.btn-secondary:hover{
    background:var(--gold);
    color:var(--white);
    transform:translateY(-3px);
}

/* scroll reveal */

.reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
}

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

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   HEADER — FIXED & STABLE
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(245, 241, 234, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled{
    box-shadow:0 4px 20px rgba(0,0,0,.06);
}

.header-inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 6%;
    width: 100%;
}

.brand-logo{
    height:42px;
    width:auto;
}

.nav{
    display:flex;
    align-items:center;
    gap:34px;
}

.nav-link{
    text-decoration:none;
    font-weight:500;
    font-size:15px;
    color:var(--text-dark);
    position:relative;
    padding-bottom:4px;
}

.nav-link::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0%;
    height:2px;
    background:linear-gradient(90deg,var(--kalaa-blue),var(--siddhi-green));
    transition:width .3s var(--ease);
}

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

.nav-cta{ margin-left:8px; }

.hamburger{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:1200;
}

.hamburger span{
    display:block;
    height:2px;
    width:100%;
    background:var(--kalaa-blue);
    border-radius:2px;
    transition:transform .35s var(--ease), opacity .35s var(--ease);
}

.hamburger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(34,31,26,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
    z-index:900;
}

.nav-overlay.is-active{
    opacity:1;
    pointer-events:auto;
}

/* =========================================================
   HERO
   ========================================================= */

.hero{
    position:relative;
    padding:64px 6% 40px;
    overflow:hidden;
}

.hero-mandala{
    position:absolute;
    pointer-events:none;
    opacity:.5;
    z-index:0;
}

.hero-mandala--one{
    width:360px;
    top:-110px;
    right:-90px;
}

.hero-mandala--two{
    width:230px;
    bottom:-80px;
    left:-70px;
    transform:rotate(18deg);
}

.hero-inner{
    max-width:var(--container);
    margin:0 auto;
    display:flex;
    align-items:center;
    gap:60px;
    position:relative;
    z-index:1;
}

.hero-content{ flex:1 1 460px; }

.hero-title{
    font-size:clamp(38px,5.5vw,64px);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-1px;
    margin-bottom:22px;
}

.hero-title-accent{
    display:block;
    background:linear-gradient(100deg,var(--kalaa-blue),var(--siddhi-green));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-text{
    font-size:16.5px;
    color:var(--text-muted);
    max-width:480px;
    margin-bottom:32px;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:40px;
}

/* =========================================================
   HERO GALLERY — cross / plus layout
              [ top ]
   [ left ]  [ BIG  ]  [ right ]
             [ bottom ]
   All tiles use a fixed aspect-ratio (not fr-based row
   sizing) so every image reliably COVERS its box, and the
   whole block sizes predictably no matter the source photo's
   original orientation.
   ========================================================= */

.hero-gallery{
    flex:1 1 420px;
    position:relative;
    height:clamp(360px, 36vw, 520px);
    max-width:560px;
    margin:0 auto;
}

.hero-card{
    position:absolute;
    overflow:hidden;
    border-radius:var(--radius-md);
    background:var(--ivory-dark);
    box-shadow:0 16px 34px rgba(34,31,26,.14);
    animation:floatY 6s ease-in-out infinite;
}

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

.hero-card--main{
    width:46%;
    height:76%;
    top:12%;
    left:27%;
    border-radius:var(--radius-lg);
    z-index:2;
}

.hero-card--top{
    width:25%;
    height:25%;
    top:0;
    left:37.5%;
    z-index:3;
    animation-delay:.2s;
}

.hero-card--left{
    width:25%;
    height:25%;
    top:37.5%;
    left:0;
    z-index:3;
    animation-delay:.4s;
    animation-direction:reverse;
}

.hero-card--right{
    width:25%;
    height:25%;
    top:37.5%;
    right:0;
    z-index:3;
    animation-delay:.6s;
}

.hero-card--bottom{
    width:25%;
    height:25%;
    bottom:0;
    left:37.5%;
    z-index:3;
    animation-delay:.3s;
    animation-direction:reverse;
}

@keyframes floatY{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-10px); }
}

/* =========================================================
   INTRO / ABOUT BLURB
   ========================================================= */

.intro-blurb{
    max-width:760px;
    margin:0 auto;
    padding:20px 6% 10px;
    text-align:center;
}

.intro-text{
    font-size:clamp(15px,1.6vw,18px);
    color:var(--text-muted);
    line-height:1.9;
}

/* =========================================================
   JOURNEY / STORY
   ========================================================= */

.journey{
    max-width:var(--container);
    margin:0 auto;
    padding:110px 6%;
}

.journey-intro{
    text-align:center;
    max-width:620px;
    margin:0 auto 80px;
}

.journey-heading{
    font-family:var(--font-display);
    font-weight:400;
    font-size:clamp(32px,4.5vw,54px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom:14px;
}

.text-kalaa{ color:var(--kalaa-blue); }
.text-siddhi{ color:var(--siddhi-green); }
.journey-arrow{ color:var(--gold); font-size:.6em; }

.journey-tagline{
    font-family:var(--font-display);
    font-size:clamp(15px,1.6vw,19px);
    color:var(--gold);
    letter-spacing:.5px;
    margin-bottom:18px;
}

.journey-sub{
    color:var(--text-muted);
    font-size:16px;
}

.journey-steps{
    display:flex;
    flex-direction:column;
    gap:100px;
}

.journey-step{
    display:flex;
    align-items:center;
    gap:70px;
}

.journey-step--reverse{ flex-direction:row-reverse; }

.journey-image{
    flex:1 1 0;
    width:100%;
    max-width:440px;
    aspect-ratio:1/1;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:var(--ivory-dark);
    box-shadow:0 18px 40px rgba(34,31,26,.12);
}

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

.journey-image--avatar{
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--kalaa-blue),var(--siddhi-green));
}

.journey-image--avatar span{
    font-family:var(--font-display);
    font-size:clamp(48px,8vw,84px);
    color:var(--white);
}

.journey-image--avatar-alt{
    background:linear-gradient(135deg,var(--siddhi-green),var(--kalaa-blue));
}

.journey-text{ flex:1 1 0; }

.journey-number{
    font-family:var(--font-display);
    color:var(--gold);
    font-size:15px;
    letter-spacing:3px;
    display:block;
    margin-bottom:10px;
}

.journey-text h3{
    font-size:clamp(20px,2.6vw,30px);
    font-weight:700;
    margin-bottom:14px;
}

.journey-text p{
    color:var(--text-muted);
    max-width:420px;
    font-size:15.5px;
}

.journey-closing{
    text-align:center;
    margin-top:100px;
}

.gold-divider{
    display:inline-block;
    width:80px;
    height:1.5px;
    background:var(--gold);
    margin-bottom:22px;
}

.journey-closing-text{
    font-size:18px;
    color:var(--text-muted);
    font-style:italic;
}

/* =========================================================
   STATS STRIP
   ========================================================= */

.stats-strip{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:40px;
    max-width:900px;
    margin:40px auto 0;
    padding:0 6%;
    text-align:center;
}

.stat-item{ flex:1 1 200px; }

.stat-number{
    font-family:var(--font-display);
    font-size:clamp(36px,5vw,52px);
    background:linear-gradient(100deg,var(--kalaa-blue),var(--siddhi-green));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    display:block;
}

.stat-label{
    font-size:13.5px;
    color:var(--text-muted);
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-top:6px;
    display:block;
}

/* =========================================================
   QUALITY PULL-QUOTE
   ========================================================= */

.quality-quote{
    max-width:720px;
    margin:60px auto 0;
    text-align:center;
    padding:40px 34px;
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:0 16px 34px rgba(34,31,26,.08);
    border-left:4px solid var(--gold);
}

.quality-quote p{
    font-family:var(--font-display);
    font-size:clamp(20px,2.6vw,28px);
    color:var(--text-dark);
    line-height:1.5;
}

.quality-quote span{
    display:block;
    margin-top:14px;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--siddhi-green);
    font-weight:600;
}

/* =========================================================
   SIDDHI STEP — AUTO CAROUSEL
   ========================================================= */

.journey-image--carousel{
    position:relative;
}

.carousel-track{
    position:relative;
    width:100%;
    height:100%;
}

.carousel-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    visibility:hidden;
    transition:opacity 1s var(--ease);
}

.carousel-slide.is-active{
    opacity:1;
    visibility:visible;
}

.carousel-dots{
    position:absolute;
    bottom:14px;
    left:0;
    right:0;
    display:flex;
    justify-content:center;
    gap:6px;
    z-index:2;
}

.carousel-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:rgba(255,255,255,.55);
    transition:background .3s ease, transform .3s ease;
}

.carousel-dots span.is-active{
    background:var(--white);
    transform:scale(1.3);
}

/* =========================================================
   COLLECTIONS
   ========================================================= */

.collections{
    max-width:var(--container);
    margin:0 auto;
    padding:20px 6% 120px;
}

.collections-intro{
    text-align:center;
    margin-bottom:56px;
}

.collections-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.collection-card{
    position:relative;
    display:block;
    aspect-ratio:3/4;
    border-radius:var(--radius-lg);
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 16px 34px rgba(34,31,26,.12);
    cursor:pointer;
    background:var(--ivory-dark);
}

.collection-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s var(--ease);
}

.collection-card:hover img{
    transform:scale(1.08);
}

.collection-card-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:26px;
    background:linear-gradient(to top, rgba(34,31,26,.75) 0%, rgba(34,31,26,0) 55%);
    color:var(--white);
}

.collection-card-overlay h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:8px;
}

.collection-link{
    font-size:14px;
    font-weight:500;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .35s var(--ease), transform .35s var(--ease);
}

.collection-card:hover .collection-link{
    opacity:1;
    transform:translateY(0);
}

/* =========================================================
   CRAFT GALLERY
   ========================================================= */

.craft-gallery{
    max-width:var(--container);
    margin:0 auto;
    padding:100px 6% 120px;
}

.craft-intro{
    text-align:center;
    margin-bottom:56px;
}

.craft-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.craft-item{
    position:relative;
    aspect-ratio:1/1;
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:0 16px 34px rgba(34,31,26,.12);
    background:var(--ivory-dark);
}

.craft-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s var(--ease);
}

.craft-item:hover img{
    transform:scale(1.08);
}

/* =========================================================
   PAGE TRANSITION
   ========================================================= */

.page-transition{
    position:fixed;
    inset:0;
    z-index:5000;
    opacity:0;
    pointer-events:none;
}

.page-transition::before{
    content:'';
    position:fixed;
    inset:0;
    background:linear-gradient(120deg,var(--kalaa-blue),var(--siddhi-green));
    opacity:0;
    transition:opacity .7s var(--ease) .15s;
}

.page-transition img{
    position:fixed;
    object-fit:cover;
    border-radius:var(--radius-lg);
    transition:all .8s var(--ease);
    top:var(--pt-top,0);
    left:var(--pt-left,0);
    width:var(--pt-width,100px);
    height:var(--pt-height,100px);
}

.page-transition.is-active{
    opacity:1;
    pointer-events:auto;
}

.page-transition.is-active::before{
    opacity:.6;
}

.page-transition.is-active img{
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:0;
}

/* =========================================================
   BACK TO TOP
   ========================================================= */

.back-to-top{
    position:fixed;
    bottom:24px;
    right:24px;
    width:52px;
    height:52px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--kalaa-blue),var(--siddhi-green));
    color:var(--white);
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(38,67,196,.32);
    opacity:0;
    visibility:hidden;
    transform:translateY(14px) scale(.9);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease), box-shadow .3s ease;
    z-index:950;
}

.back-to-top.is-visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.back-to-top:hover{
    transform:translateY(-4px) scale(1.05);
    box-shadow:0 14px 30px rgba(38,67,196,.4);
}

.back-to-top.is-clicked svg{
    animation:brushStroke .55s var(--ease);
}

@keyframes brushStroke{
    0%{ transform:translate(0,0) rotate(0deg); }
    35%{ transform:translate(-2px,-3px) rotate(-12deg); }
    70%{ transform:translate(1px,1px) rotate(8deg); }
    100%{ transform:translate(0,0) rotate(0deg); }
}

@media (max-width:560px){
    .back-to-top{
        width:46px;
        height:46px;
        bottom:18px;
        right:18px;
    }
}

/* =========================================================
   REELS
   ========================================================= */

.reels{
    max-width:var(--container);
    margin:0 auto;
    padding:40px 6% 120px;
}

.reels-intro{
    text-align:center;
    margin-bottom:44px;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
}

.reels-sub{
    color:var(--text-muted);
    font-size:15.5px;
    margin-top:8px;
}

.reels-track{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
}

.reel-card{
    position:relative;
    flex:0 0 auto;
    width:220px;
    aspect-ratio:9/16;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:#111;
    scroll-snap-align:start;
    box-shadow:0 16px 30px rgba(34,31,26,.16);
}

.reel-video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.reel-mute-btn{
    position:absolute;
    bottom:12px;
    right:12px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:rgba(0,0,0,.45);
    border:none;
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(4px);
    z-index:2;
}

.reel-toggle-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:56px;
    height:56px;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    border:none;
    color:var(--kalaa-blue);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,0,0,.28);
    z-index:3;
    transition:opacity .3s ease, transform .3s ease;
}

.reel-toggle-btn:hover{
    transform:translate(-50%,-50%) scale(1.08);
}

.reel-card.is-playing .reel-toggle-btn{
    opacity:0;
}

.reel-card.is-playing .reel-toggle-btn:hover{
    opacity:1;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
    background:var(--text-dark);
    color:var(--ivory);
    padding:80px 6% 30px;
}

.footer-inner{
    max-width:var(--container);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
    gap:36px;
    padding-bottom:50px;
}

.footer-logo{
    height:38px;
    filter:brightness(0) invert(1);
    margin-bottom:16px;
}

.footer-brand p{
    color:rgba(245,241,234,.65);
    font-size:14px;
    max-width:260px;
}

.footer-col h4{
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:18px;
    color:var(--gold-soft);
}

.footer-col a{
    display:block;
    text-decoration:none;
    color:rgba(245,241,234,.8);
    font-size:14.5px;
    margin-bottom:12px;
    transition:color .25s ease;
}

.footer-col a:hover{ color:var(--white); }

.footer-social{
    display:flex;
    gap:16px;
    margin-top:6px;
}

.footer-social a{ margin:0; }

.footer-bottom{
    max-width:var(--container);
    margin:0 auto;
    border-top:1px solid rgba(245,241,234,.15);
    padding-top:24px;
    font-size:13px;
    color:rgba(245,241,234,.55);
    text-align:center;
}

/* =========================================================
   RESPONSIVE — LAPTOP / SMALL DESKTOP
   ========================================================= */

@media (max-width:1100px){

    .hero-inner{ gap:36px; }

    .hero-gallery{ max-width:460px; }

    .journey-step,
    .journey-step--reverse{ gap:44px; }

    .journey-heading{ font-size:clamp(28px,4.2vw,44px); }
    .journey-text h3{ font-size:clamp(19px,2.3vw,25px); }

    .reel-card{ width:190px; }
}

/* =========================================================
   RESPONSIVE — TABLET
   ========================================================= */

@media (max-width:900px){

    .nav{
        position:fixed;
        top:0;
        right:-100%;
        width:min(340px,80%);
        height:100vh;
        background:var(--ivory);
        flex-direction:column;
        justify-content:center;
        align-items:flex-start;
        gap:30px;
        padding:40px;
        transition:right .4s var(--ease);
        box-shadow:-10px 0 30px rgba(0,0,0,.12);
        z-index:1100;
    }

    .nav.is-active{ right:0; }

    .nav-link{ font-size:19px; }

    .nav-cta{ margin-left:0; margin-top:10px; }

    .hamburger{ display:flex; }

    .hero-inner{
        flex-direction:column;
        text-align:center;
    }

    .hero-text{ margin-left:auto; margin-right:auto; }

    .hero-actions{ justify-content:center; }

    .hero-gallery{
        position:relative;
        height:clamp(280px, 62vw, 380px);
        max-width:380px;
        margin:24px auto 0;
    }

    .hero-card{
        position:absolute;
        inset:0;
        width:100% !important;
        height:100% !important;
        opacity:0;
        animation:none !important;
        transition:opacity .8s var(--ease);
    }

    .hero-card.is-active{
        opacity:1;
        z-index:4;
    }

    .journey{ padding:80px 6%; }

    .journey-heading{ font-size:clamp(26px,5vw,36px); }
    .journey-tagline{ font-size:15px; }

    .journey-step,
    .journey-step--reverse{
        flex-direction:column;
        text-align:center;
        gap:28px;
    }

    .journey-image{
        max-width:100%;
        width:100%;
        min-height:280px;
    }

    .journey-text p{ margin:0 auto; }

    .journey-text h3{ font-size:22px; }

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

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

    .footer-inner{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width:560px){

    .header-inner{ padding:14px 5%; }

    .brand-logo{ height:34px; }

    .hero{ padding:40px 5% 20px; }

    .hero-title{ letter-spacing:-0.5px; }

    .hero-actions{ flex-direction:column; width:100%; margin-bottom:18px; }

    .btn{ width:100%; }

    .hero-gallery{ gap:12px; }

    /* Size only here — opacity for mobile is set once, in the
       consolidated MANDALA block near the end of this file.
       (Previously this rule and that later block both set
       opacity on equally-specific selectors; whichever came
       later in the file silently won, so this half was being
       ignored. Splitting it like this removes the conflict.) */
    .hero-mandala--one{ width:160px; }
    .hero-mandala--two{ width:110px; }

    .intro-text{ font-size:14.5px; }

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

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

    .stats-strip{ gap:28px; }

    .footer-inner{
        grid-template-columns:1fr;
        gap:34px;
        text-align:center;
    }

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

    .footer-brand p{
        max-width:280px;
        margin:0 auto;
    }

    .footer-social{
        justify-content:center;
    }

    .journey{ padding:60px 5%; }

    .journey-heading{ font-size:clamp(22px,7vw,30px); gap:10px; }
    .journey-tagline{ font-size:14px; }
    .journey-sub{ font-size:14.5px; }
    .journey-text h3{ font-size:20px; }
    .journey-text p{ font-size:14.5px; }

    .journey-steps{ gap:64px; }

    .journey-closing{ margin-top:64px; }

    .section-heading{ font-size:clamp(26px,7vw,34px); }

    .reel-card{ width:160px; }
}

/* =========================================================
   RESPONSIVE — LARGE DESKTOP
   ========================================================= */

@media (min-width:1440px){

    .header-inner,
    .hero-inner,
    .journey,
    .collections,
    .reels,
    .footer-inner,
    .footer-bottom{
        max-width:1400px;
    }

    .hero-title{ font-size:70px; }

    .hero-gallery{ max-width:620px; }

    .section-heading{ font-size:48px; }

    .journey-heading{ font-size:58px; }

    .journey-tagline{ font-size:20px; }

    .journey-sub{ font-size:17.5px; }

    .journey-text h3{ font-size:31px; }

    .journey-text p{ font-size:16.5px; }

    .intro-text{ font-size:19px; }

    .hero-mandala--one{ width:420px; }
    .hero-mandala--two{ width:270px; }
}

/* =========================================================
   MANDALA — desktop/laptop gets the smooth blend-into-ivory
   look via mix-blend-mode. Mobile/tablet do NOT use blend
   mode: it conflicts with the header's backdrop-filter blur
   on many mobile browsers (iOS Safari especially), causing
   rendering glitches that don't happen on desktop. Mobile
   instead just uses a plain low-opacity image — same visual
   intent, without the risky blend mode.
   ========================================================= */

@media (min-width:901px){
    .hero-mandala{
        mix-blend-mode:multiply;
    }
}

@media (max-width:900px){
    .hero-mandala{
        mix-blend-mode:normal;
        opacity:.22;
    }
}

/* =========================================================
   Guaranteed hero gallery on mobile/tablet — all 5 images
   shown at once in a static grid, no JS/opacity dependency.
   ========================================================= */

@media (max-width:900px){

    .hero-gallery{
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
        height:auto;
        max-width:420px;
        margin:24px auto 0;
    }

    .hero-card{
        position:static;
        width:100%;
        height:auto;
        aspect-ratio:1/1;
        opacity:1;
        visibility:visible;
        animation:none;
        transition:none;
    }

    .hero-card--main{
        grid-column:1 / span 2;
        aspect-ratio:16/11;
    }

}