/* ============================================
   BYROOH CREATIONS — Homepage (index.php)
   Scoped to homepage only, loaded via functions.php
   is_front_page() / is_home() conditional enqueue
   ============================================ */

html body {
    font-family: var(--font-body) !important;
    color: var(--ink-soft) !important;
    background: var(--paper) !important;
    border: none !important;
    line-height: 1.75 !important;
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased !important;
    margin: 0 !important;
    padding: 0 !important;
}

:root {
    --paper:#F2EBE0;--paper-warm:#EDE4D5;--paper-deep:#E4DACB;--cream:#FAF6F0;
    --ink:#2C2416;--ink-soft:#5A4D3E;--ink-faded:#8C7E6E;--ink-ghost:#B8AFA4;
    --green:#3E6B27;--green-soft:#6B8F56;--green-pale:#A8C496;--green-lightest:#d6e8c8;
    --gold:#B8943E;--gold-light:#D4A85C;
    --terracotta:#C4714A;--terracotta-l:#D9886A;
    --dark-bg:#1E1A14;--dark-surface:#2C2416;
    --font-heading:'Fraunces',Georgia,serif;
    --font-body:'DM Sans','Segoe UI',sans-serif;
    --font-hand:'Kalam',cursive;
    --ease:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(0,.6,.4,1);

    /* Synced spacing tokens — change these, not the calc()s below */
    --gap-lg: 24px;
    --gap-md: 16px;
    --testimonial-cols-desktop: 3;
    --testimonial-cols-tablet: 2;
}

#hero,#hero *,#featuredProducts,#featuredProducts *,#testimonials,#testimonials *,
.drawer-zone,.drawer-zone *,.texture-grain,.texture-fur,.texture-vignette,
.whyus-layout,.whyus-layout *{box-sizing:border-box}

img{max-width:100%;height:auto;display:block}
.defs-vault{position:absolute;width:0;height:0;overflow:hidden}

body::after{content:'';position:fixed;inset:0;background:url('../assets/background.png') center/cover no-repeat;opacity:.09;z-index:-1;pointer-events:none}

.texture-grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:200px}
.texture-fur{position:fixed;inset:0;z-index:9997;pointer-events:none;opacity:.03;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.015 0.09' numOctaves='5' seed='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:400px}
.texture-vignette{position:fixed;inset:0;z-index:9996;pointer-events:none;background:radial-gradient(ellipse at center,transparent 40%,rgba(44,36,22,.12) 100%)}

.icon{width:18px;height:18px;display:inline-block;vertical-align:middle;flex-shrink:0}
.icon--lg{width:28px;height:28px}

h1,h2,h3,h4{font-family:var(--font-heading);color:var(--ink);line-height:1.2;font-weight:500}
h3{font-size:1.15rem;font-weight:600;border-bottom:none}
p{margin-bottom:16px}p:last-child{margin-bottom:0}
.text-accent{color:var(--green)}
.text-sm{font-size:.88rem}

.display-xl{font-size:clamp(2.4rem,5.5vw,4.2rem);letter-spacing:-.025em;line-height:1.08;margin-bottom:28px}
.display-lg{font-size:clamp(2.1rem,4.8vw,3.6rem);letter-spacing:-.02em;line-height:1.1;margin-bottom:28px}
.display-md{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.015em;line-height:1.12;margin-bottom:24px}

.kicker{display:inline-block;font-family:var(--font-body);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:3.5px;color:var(--green);margin-bottom:16px;position:relative}
.kicker::after{content:'';display:block;width:36px;height:2px;background:var(--green);margin-top:10px}
.kicker--light{color:var(--green-pale)}.kicker--light::after{background:var(--green-pale)}
.kicker--cream{color:rgba(255,255,255,.7)}.kicker--cream::after{background:rgba(255,255,255,.35)}

.lede{font-size:1.1rem;color:var(--ink-soft);max-width:560px;line-height:1.85;margin-bottom:44px}

.link-cta{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--green);padding:10px 0;border-bottom:1.5px solid var(--green);transition:all .35s var(--ease)}
.link-cta .icon{transition:transform .35s var(--ease)}
.link-cta:hover{gap:14px}.link-cta:hover .icon{transform:translateX(4px)}
.link-cta--cream{color:var(--cream);border-color:rgba(255,255,255,.6)}.link-cta--cream:hover{border-color:var(--cream)}
.link-cta--ghost-cream{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.2)}.link-cta--ghost-cream:hover{color:var(--cream)}
.hero-cta-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:44px}

/* Drawer nav (desktop) */
.drawer-zone{
    position:fixed;left:0;top:0;height:100vh;z-index:900;
    display:flex;align-items:center;
}

.drawer-tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:44px;
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:.6rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;
    color:var(--ink-ghost);
    padding:16px 10px;
    transition:opacity .35s var(--ease), background .35s var(--ease);
    cursor:default;user-select:none;
    background: rgba(242, 235, 224, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.drawer-tab-dot{display:block;width:3px;height:3px;border-radius:50%;background:var(--green);margin:10px auto}
.drawer-logo{width:52px;height:52px;object-fit:contain;border-radius:50%;margin-bottom:24px;opacity:.85;filter:drop-shadow(0 2px 6px rgb(255,255,255))}
.drawer-nav{position:absolute;left:0;top:0;height:100%;display:flex;flex-direction:column;justify-content:center;padding:40px 40px 40px 28px;opacity:0;transform:translateX(-16px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.drawer-zone:hover .drawer-nav,.drawer-zone.open .drawer-nav{opacity:1;transform:translateX(0);pointer-events:auto}
.drawer-zone:hover .drawer-tab,.drawer-zone.open .drawer-tab{opacity:0;pointer-events:none}
.drawer-link{font-family:var(--font-body);font-size:.88rem;font-weight:500;color:var(--ink-soft);padding:7px 0;position:relative;display:inline-block;white-space:nowrap;transition:color .3s var(--ease)}
.drawer-link::after{content:'';position:absolute;bottom:3px;left:0;width:0;height:1px;background:var(--ink);transition:width .3s var(--ease)}
.drawer-link:hover{color:var(--ink)}.drawer-link:hover::after{width:100%}
.drawer-link.active{color:var(--green)}.drawer-link.active::after{width:100%;background:var(--green)}
.drawer-nav-foot{font-size:.65rem;font-weight:600;color:var(--ink-ghost);letter-spacing:1.5px;text-transform:uppercase;margin-top:28px}

/* Mobile nav toggle — shown only under 768px, replaces the drawer.
   Requires a button in markup: <button class="mobile-nav-toggle" id="mobileNavToggle" aria-label="Menu">☰</button>
   and .drawer-nav gets class "mobile-open" toggled via JS (see note at bottom). */
.mobile-nav-toggle{
    display:none;
    position:fixed;top:16px;right:16px;z-index:950;
    width:44px;height:44px;border-radius:50%;
    background:rgba(30,26,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border:1.5px solid rgba(255,255,255,.25);color:#fff;
    align-items:center;justify-content:center;cursor:pointer;font-size:1.3rem;
}

.screen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:100px 10vw;position:relative}
.screen--flow{min-height:auto;padding:120px 10vw}
.screen--deep{background:rgba(62,107,39,.02)}

#hero{padding:0;position:relative;overflow:hidden;min-height:100vh;max-height:900px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to right,rgba(30,26,20,.72) 0%,rgba(30,26,20,.45) 45%,rgba(30,26,20,.25) 75%,rgba(30,26,20,.35) 100%)}

.hero-type{position:relative;z-index:3;max-width:600px;padding:0 8vw}

/* Single merged hero-title rule — no duplicate declarations elsewhere */
.hero-title{
    font-size:clamp(2rem,5.2vw,4.8rem);
    line-height:1.06;
    letter-spacing:-.04em;
    margin-bottom:24px;
    color:var(--cream);
    text-shadow:0 2px 30px rgba(0,0,0,.25);
    border-bottom:none;
}
.hero-title .line{display:block;opacity:0;transform:translateY(30px);animation:lineReveal .9s var(--ease-out) forwards}
.hero-title .line:nth-child(1){animation-delay:.3s}
.hero-title .line:nth-child(2){animation-delay:.55s}
.hero-title .line:nth-child(3){animation-delay:.8s}
.accent-line{color:var(--green-pale)}.accent-line em{font-style:italic;font-weight:400}
@keyframes lineReveal{to{opacity:1;transform:translateY(0)}}

.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.75);max-width:440px;line-height:1.85}

.hero-badge{position:absolute;top:28px;right:6vw;z-index:4}
.hero-badge-img{width:80px;height:80px;object-fit:contain;border-radius:50%;filter:drop-shadow(0 4px 16px rgba(0,0,0,.3));animation:heroFloat 5s ease-in-out infinite}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.hero-motto{position:absolute;bottom:60px;left:10vw;z-index:3;font-family:var(--font-hand);font-size:.95rem;color:rgba(255,255,255,.4);letter-spacing:1px}

.mute-btn{position:absolute;bottom:32px;right:6vw;z-index:10;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:rgba(0,0,0,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease)}
.mute-btn:hover{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.5)}
.mute-btn[data-muted="true"] .spk-on{display:none}
.mute-btn[data-muted="false"] .spk-off{display:none}

.scroll-cue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3}
.scroll-cue span{display:block;width:1px;height:48px;background:linear-gradient(to bottom,rgba(255,255,255,.5),transparent);animation:scrollPulse 2.5s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.6;transform:scaleY(1)}50%{opacity:.15;transform:scaleY(.5)}}

.poly{position:relative;background:var(--cream);padding:10px;box-shadow:0 6px 30px rgba(0,0,0,.07);border-radius:2px;transition:transform .6s var(--ease),box-shadow .4s var(--ease);cursor:default}
.poly img{display:block;width:100%;border-radius:1px}
.poly:hover{transform:scale(1.04) rotate(0deg) !important;z-index:10;box-shadow:0 16px 60px rgba(0,0,0,.14)}
.tape{position:absolute;width:72px;height:18px;top:-9px;left:50%;transform:translateX(-50%) rotate(-5deg);opacity:.6;border-radius:1px;pointer-events:none}
.tape--gold{background:linear-gradient(135deg,var(--gold),var(--gold-light))}
.tape--terracotta{background:linear-gradient(135deg,var(--terracotta),var(--terracotta-l))}

.ledger{margin-top:20px}
.ledger-row{display:grid;grid-template-columns:56px 1fr;gap:0 24px;padding:28px 0;border-bottom:1px solid rgba(0,0,0,.06);align-items:baseline;transition:all .4s var(--ease);transition-delay:calc(var(--i,0) * .09s)}
.ledger-row:hover{padding-left:8px;border-color:var(--green-pale)}
.ledger-index{font-family:var(--font-hand);font-size:2rem;font-weight:700;color:var(--green-pale);opacity:.4;line-height:1}
.ledger-row h3{margin-bottom:6px}
.ledger-row p{font-size:.92rem;color:var(--ink-faded);margin:0}

.whyus-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:start}
.whyus-content{max-width:700px}

.polaroid{position:relative;background:#fff;padding:12px 12px 45px 12px;box-shadow:0 8px 30px rgba(0,0,0,.12);border-radius:2px;display:inline-block;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.polaroid img{display:block;width:100%;height:auto;border-radius:1px}
.polaroid:hover{transform:scale(1.03) rotate(-1deg) !important;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:10}
.pin{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:14px;height:14px;background:radial-gradient(circle at 30% 30%,#ef4444,#991b1b);border-radius:50%;box-shadow:inset -2px -2px 4px rgba(0,0,0,.3),0 4px 6px rgba(0,0,0,.4);z-index:5}
.pin::after{content:'';position:absolute;top:10px;left:5px;width:2px;height:6px;background:rgba(0,0,0,.15);border-radius:1px;transform:rotate(20deg)}
.pin--gold{background:radial-gradient(circle at 30% 30%,#fbbf24,#b45309)}

/* ── Reveal ─────────────────────────────── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* ── Featured products ─────────────────── */
/* auto-fit/minmax replaces fixed breakpoint columns — no dead zone on tablets */
.featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap-lg);margin-top:40px}
.featured-card{position:relative;display:flex;flex-direction:column;background:var(--cream);border:1px solid rgba(0,0,0,.06);border-radius:4px;overflow:hidden;text-decoration:none;color:inherit;transition:all .45s var(--ease)}
.featured-card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(62,107,39,.12);border-color:var(--green-pale)}
.featured-card-img{position:relative;overflow:hidden;background:var(--paper-warm)}
.featured-card-img img{width:100%;aspect-ratio:1/1.1;object-fit:cover;transition:transform .6s var(--ease)}
.featured-card:hover .featured-card-img img{transform:scale(1.06)}
.featured-badge{position:absolute;top:12px;left:12px;padding:4px 12px;background:var(--green);color:var(--cream);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;border-radius:2px}
.featured-badge--gold{background:var(--gold)}
.featured-card-body{padding:20px 20px 28px;flex-grow:1;display:flex;flex-direction:column}
.featured-card-body h3{font-size:1.05rem;margin-bottom:6px}
.featured-card-body p{color:var(--ink-faded);line-height:1.6;flex-grow:1}
.featured-price{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;color:var(--green);margin-top:12px}
.featured-card-rooh{position:absolute;bottom:-8px;right:-8px;width:55px;opacity:.12;filter:grayscale(.2);pointer-events:none;transition:opacity .4s var(--ease)}
.featured-card:hover .featured-card-rooh{opacity:.22}

/* ── Testimonials slider ───────────────── */
/* widths derived from the same --gap-lg token used in the track's gap, so they can't drift out of sync */
.testimonial-slider{position:relative;display:flex;align-items:center;gap:var(--gap-md);margin-top:40px}
.testimonial-track-wrapper{overflow:hidden;flex:1;border-radius:4px}
.testimonial-track{display:flex;gap:var(--gap-lg);transition:transform .55s cubic-bezier(.4,0,.2,1)}
.testimonial-card{
    flex:0 0 calc((100% - (var(--testimonial-cols-desktop) - 1) * var(--gap-lg)) / var(--testimonial-cols-desktop));
    position:relative;height:auto;min-height:0;
}
.testimonial-card-inner{padding:24px 24px 44px;display:flex;flex-direction:column;height:100%}
.testimonial-card .testimonial-rooh{position:absolute;bottom:-10px;right:-10px;width:60px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));pointer-events:none}

.testimonial-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink-ghost);background:var(--cream);color:var(--ink-soft);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .3s var(--ease);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.testimonial-arrow:hover{background:var(--green);color:var(--cream);border-color:var(--green);box-shadow:0 4px 20px rgba(62,107,39,.2);transform:scale(1.08)}
.testimonial-arrow:disabled{opacity:.3;cursor:default;pointer-events:none}

.testimonial-dots{display:flex;justify-content:center;gap:10px;margin-top:28px}
.testimonial-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink-ghost);background:transparent;cursor:pointer;transition:all .3s var(--ease);padding:0}
.testimonial-dot.active{background:var(--green);border-color:var(--green);transform:scale(1.2)}

/* ── Responsive ─────────────────────────── */
@media(max-width:1100px){
    .whyus-layout{grid-template-columns:1fr;gap:48px}
    :root{--testimonial-cols-desktop:2}
}

@media(max-width:900px){
    :root{--testimonial-cols-desktop:2}
}

@media(max-width:768px){
    .screen{padding:80px 7vw}.screen--flow{padding:90px 7vw}

    /* Drawer replaced by mobile toggle instead of vanishing entirely */
    .drawer-zone{
        display:flex;
        pointer-events:none;
    }
    .drawer-tab{display:none}
    .drawer-nav{
        opacity:0;transform:translateX(-100%);pointer-events:none;
        width:min(80vw,320px);background:var(--cream);
        box-shadow:0 0 40px rgba(0,0,0,.2);
        padding:80px 32px 40px;
    }
    .drawer-zone.open .drawer-nav{
        opacity:1;transform:translateX(0);pointer-events:auto;
    }
    .drawer-zone.open{pointer-events:auto}
    .mobile-nav-toggle{display:flex}

    .hero-title{font-size:clamp(2rem,9vw,3.6rem)}
    .hero-badge-img{width:60px;height:60px}
    .hero-motto{font-size:.8rem;bottom:70px}
    .ledger-row{grid-template-columns:44px 1fr;gap:0 16px}
    .testimonial-arrow{display:none}
    :root{--testimonial-cols-desktop:1}

    .hero-type{padding:0;max-width:100%}
}

@media(max-width:520px){
    .screen{padding:64px 6vw}.screen--flow{padding:72px 6vw}
    .hero-badge{top:16px;right:4vw}.hero-badge-img{width:50px;height:50px}
    .mute-btn{bottom:16px;right:4vw;width:38px;height:38px}
    .hero-cta-row{flex-direction:column;align-items:flex-start;gap:16px}
    .featured-grid{grid-template-columns:1fr;gap:var(--gap-md)}
}

@media(max-width:380px){
    .hero-title{font-size:clamp(1.7rem,10vw,2.6rem)}
    .display-md{font-size:clamp(1.5rem,7vw,2.2rem)}
    .lede{font-size:1rem}
    .screen{padding:48px 5vw}.screen--flow{padding:56px 5vw}
}

@media (max-height: 800px) and (min-width: 1024px){
    .hero-title{ font-size:clamp(1.8rem,4.2vw,3.6rem); margin-bottom:16px; }
    .hero-sub{ font-size:.95rem; }
}

/* ── Testimonials — darkened green section ─────────── */
#testimonials .kicker{
    color:var(--green);
}
#testimonials .kicker::after{
    background:var(--green);
}
#testimonials h2.display-md{
    color:var(--ink);
}

footer{ background: var(--ink) !important; }