/* =========================================================
   Bunny Nest Property Care
   Professional Luxury Website Styles
   Dark green + gold branding, Airbnb-inspired layout
========================================================= */

:root{
    --green-950:#07110d;
    --green-900:#0b1f18;
    --green-800:#102f24;
    --green-700:#174333;
    --green-600:#1f5a44;

    --gold-500:#d4af37;
    --gold-400:#e6c865;
    --gold-200:#f6e7ad;

    --cream-100:#fffaf1;
    --cream-200:#f6f0e4;
    --cream-300:#ede3d1;

    --white:#ffffff;
    --black:#111111;
    --charcoal:#1b211e;
    --muted:#6a746f;

    --glass-light:rgba(255,255,255,.14);
    --glass-dark:rgba(7,17,13,.62);

    --shadow-soft:0 20px 70px rgba(0,0,0,.14);
    --shadow-strong:0 30px 100px rgba(0,0,0,.26);

    --radius-xl:34px;
    --radius-lg:24px;
    --radius-md:16px;

    --container:1180px;
    --transition:.35s cubic-bezier(.22,.61,.36,1);
}

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:110px;
}

body{
    font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--cream-200);
    color:var(--charcoal);
    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

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

::selection{
    background:var(--gold-500);
    color:var(--black);
}

/* Utilities */
.container{
    width:min(var(--container),88vw);
    margin-inline:auto;
}

.section{
    padding:120px 0;
    position:relative;
}

.eyebrow{
    color:var(--gold-500);
    text-transform:uppercase;
    letter-spacing:.22em;
    font-size:.78rem;
    font-weight:900;
    margin-bottom:18px;
}

h1,h2,h3{
    font-family:"Cormorant Garamond",serif;
    font-weight:700;
    line-height:.95;
}

h1{
    font-size:clamp(3.3rem,8vw,8rem);
    letter-spacing:-.05em;
}

h2{
    font-size:clamp(2.6rem,5vw,5.4rem);
    letter-spacing:-.035em;
}

h3{
    font-size:clamp(1.6rem,3vw,2.25rem);
}

p{
    line-height:1.8;
}

.section-heading{
    max-width:790px;
    margin:0 auto 64px;
    text-align:center;
}

.section-heading p:not(.eyebrow){
    margin-top:20px;
    color:var(--muted);
}

/* Loader */
.loader{
    position:fixed;
    inset:0;
    background:radial-gradient(circle at center,var(--green-700),var(--green-950));
    display:grid;
    place-items:center;
    z-index:9999;
    transition:opacity .65s ease, visibility .65s ease;
}

.loader.is-hidden{
    opacity:0;
    visibility:hidden;
}

.loader__inner{
    display:grid;
    place-items:center;
    gap:14px;
    color:white;
}

.loader__bunny{
    width:84px;
    height:84px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    display:grid;
    place-items:center;
    font-size:3rem;
    box-shadow:0 0 0 12px rgba(255,255,255,.05);
    animation:loaderPulse 1.35s infinite;
}

.loader__text{
    letter-spacing:.28em;
    text-transform:uppercase;
    font-weight:900;
    font-size:.78rem;
    color:var(--gold-200);
}

@keyframes loaderPulse{
    50%{transform:scale(1.1)}
}

/* Cursor glow */
.cursor-glow{
    position:fixed;
    width:360px;
    height:360px;
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(212,175,55,.16),transparent 66%);
    transform:translate(-50%,-50%);
    z-index:1;
    opacity:.7;
    mix-blend-mode:multiply;
}

/* Navigation */
.site-header{
    position:fixed;
    top:22px;
    left:0;
    width:100%;
    z-index:1000;
    pointer-events:none;
}

.navbar{
    width:min(1240px,92vw);
    margin-inline:auto;
    padding:14px 16px 14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    border:1px solid rgba(255,255,255,.26);
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:white;
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    box-shadow:0 18px 60px rgba(0,0,0,.18);
    pointer-events:auto;
    transition:var(--transition);
}

.site-header.is-scrolled .navbar{
    background:rgba(7,17,13,.82);
    border-color:rgba(255,255,255,.12);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:max-content;
}

.brand__mark{
    width:44px;
    height:44px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.24);
    font-size:1.4rem;
}

.brand__text{
    display:grid;
    line-height:1.05;
}

.brand__text strong{
    font-weight:900;
    letter-spacing:.01em;
}

.brand__text small{
    color:rgba(255,255,255,.72);
    font-size:.72rem;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.nav-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:28px;
}

.nav-links a{
    font-size:.92rem;
    font-weight:800;
    color:rgba(255,255,255,.88);
    position:relative;
    transition:var(--transition);
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:2px;
    border-radius:999px;
    background:var(--gold-500);
    transition:var(--transition);
}

.nav-links a:hover{
    color:white;
}

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

.nav-button{
    min-width:max-content;
    background:var(--gold-500);
    color:var(--black);
    padding:13px 22px;
    border-radius:999px;
    font-weight:900;
    box-shadow:0 12px 30px rgba(212,175,55,.25);
    transition:var(--transition);
}

.nav-button:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 50px rgba(212,175,55,.35);
}

.hamburger{
    display:none;
    width:46px;
    height:46px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.hamburger span{
    display:block;
    width:20px;
    height:2px;
    margin:5px auto;
    border-radius:999px;
    background:white;
    transition:var(--transition);
}

.hamburger.is-open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2){
    opacity:0;
}

.hamburger.is-open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

/* Image placeholders */
.image-placeholder,
.portfolio-item,
.comparison__image,
.lightbox__image{
    display:grid;
    place-items:center;
    text-align:center;
    color:rgba(255,255,255,.92);
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
    border:3px dashed rgba(212,175,55,.72);
    background:
        linear-gradient(135deg,rgba(16,47,36,.88),rgba(7,17,13,.72)),
        repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 12px,transparent 12px 24px);
    position:relative;
    overflow:hidden;
}

.image-placeholder::before,
.portfolio-item::before,
.comparison__image::before,
.lightbox__image::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center,rgba(212,175,55,.22),transparent 58%);
    opacity:.8;
}

.image-placeholder span,
.image-placeholder small,
.portfolio-item span,
.portfolio-item small,
.comparison__image span,
.comparison__image small{
    position:relative;
    z-index:2;
}

.image-placeholder small,
.portfolio-item small,
.comparison__image small{
    display:block;
    margin-top:8px;
    font-size:.74rem;
    color:rgba(255,255,255,.68);
    letter-spacing:.08em;
}

/* Hero */
.hero{
    min-height:100vh;
    position:relative;
    display:grid;
    place-items:center;
    overflow:hidden;
    color:white;
    text-align:center;
    padding:145px 6vw 90px;
    isolation:isolate;
}

.hero__image{
    position:absolute;
    inset:-9%;
    z-index:-3;
    animation:kenBurns 22s ease-in-out infinite alternate;
    will-change:transform;
}

.image-placeholder--hero{
    width:100%;
    height:100%;
    font-size:clamp(1.6rem,4vw,3.5rem);
}

@keyframes kenBurns{
    from{transform:scale(1)}
    to{transform:scale(1.12)}
}

.hero__gradient{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(circle at 50% 45%,rgba(212,175,55,.18),transparent 42%),
        linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.68)),
        linear-gradient(90deg,rgba(7,17,13,.7),transparent 38%,rgba(7,17,13,.7));
}

.hero__content{
    width:min(1010px,92vw);
    transition:transform .12s linear;
}

.hero__lead{
    width:min(760px,92vw);
    margin:26px auto 34px;
    font-size:clamp(1.05rem,2.1vw,1.35rem);
    color:rgba(255,255,255,.84);
}

.hero__actions{
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:999px;
    padding:16px 28px;
    font-weight:900;
    transition:var(--transition);
    min-height:54px;
}

.button--gold{
    background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
    color:var(--black);
    box-shadow:0 18px 50px rgba(212,175,55,.24);
}

.button--glass{
    background:rgba(255,255,255,.14);
    color:white;
    border:1px solid rgba(255,255,255,.26);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.button--full{
    width:100%;
}

.button:hover{
    transform:translateY(-4px);
}

.hero__trust{
    margin:42px auto 0;
    width:min(850px,92vw);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.hero__trust div{
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,.11);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.hero__trust strong{
    display:block;
    color:var(--gold-200);
    margin-bottom:4px;
}

.hero__trust span{
    color:rgba(255,255,255,.72);
    font-size:.86rem;
}

.hero__scroll{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    display:grid;
    place-items:center;
    gap:8px;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
}

.hero__scroll span{
    width:1px;
    height:46px;
    background:linear-gradient(transparent,var(--gold-500));
}

.hero__particles span{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(212,175,55,.65);
    box-shadow:0 0 18px rgba(212,175,55,.8);
    z-index:-1;
    animation:floatParticle 11s linear infinite;
}

.hero__particles span:nth-child(1){left:8%;bottom:12%;animation-delay:0s}
.hero__particles span:nth-child(2){left:18%;bottom:20%;animation-delay:2s}
.hero__particles span:nth-child(3){left:31%;bottom:9%;animation-delay:5s}
.hero__particles span:nth-child(4){left:46%;bottom:16%;animation-delay:1s}
.hero__particles span:nth-child(5){left:61%;bottom:11%;animation-delay:4s}
.hero__particles span:nth-child(6){left:74%;bottom:18%;animation-delay:3s}
.hero__particles span:nth-child(7){left:84%;bottom:10%;animation-delay:6s}
.hero__particles span:nth-child(8){left:93%;bottom:22%;animation-delay:2.5s}

@keyframes floatParticle{
    0%{transform:translateY(0) scale(.6);opacity:0}
    18%{opacity:1}
    100%{transform:translateY(-520px) scale(1.3);opacity:0}
}

/* Intro */
.intro{
    background:var(--white);
}

.intro__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    align-items:start;
}

.intro__copy p{
    color:var(--muted);
}

.stat-grid{
    margin-top:34px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.stat-card{
    border-radius:24px;
    padding:24px 16px;
    background:linear-gradient(180deg,var(--cream-100),var(--cream-200));
    text-align:center;
    border:1px solid rgba(212,175,55,.22);
}

.stat-card strong{
    display:block;
    font-size:2.8rem;
    line-height:1;
    color:var(--green-700);
    font-weight:900;
}

.stat-card span{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:.82rem;
    font-weight:800;
}

/* Services */
.services{
    background:
        radial-gradient(circle at top left,rgba(212,175,55,.12),transparent 38%),
        linear-gradient(180deg,var(--cream-200),var(--cream-100));
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.service-card{
    position:relative;
    min-height:390px;
    padding:32px;
    border-radius:var(--radius-xl);
    background:rgba(255,255,255,.76);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
    transform-style:preserve-3d;
    transition:transform .18s ease, box-shadow var(--transition), border-color var(--transition);
}

.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,rgba(212,175,55,.22),transparent 36%),
        linear-gradient(135deg,rgba(255,255,255,.8),rgba(255,255,255,.3));
    opacity:0;
    transition:var(--transition);
}

.service-card:hover{
    box-shadow:var(--shadow-strong);
    border-color:rgba(212,175,55,.34);
}

.service-card:hover::before{
    opacity:1;
}

.service-card__icon,
.service-card h3,
.service-card p,
.service-card ul,
.service-card__badge{
    position:relative;
    z-index:2;
}

.service-card__icon{
    width:66px;
    height:66px;
    border-radius:22px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--green-800),var(--green-600));
    color:white;
    font-size:2rem;
    margin-bottom:28px;
    box-shadow:0 16px 36px rgba(16,47,36,.24);
}

.service-card p{
    margin-top:16px;
    color:var(--muted);
}

.service-card ul{
    list-style:none;
    margin-top:24px;
    display:grid;
    gap:12px;
}

.service-card li{
    color:var(--charcoal);
    font-weight:700;
    font-size:.92rem;
}

.service-card li::before{
    content:"✓";
    color:var(--gold-500);
    margin-right:9px;
    font-weight:900;
}

.featured-card{
    background:linear-gradient(180deg,var(--green-800),var(--green-950));
    color:white;
}

.featured-card p,
.featured-card li{
    color:rgba(255,255,255,.76);
}

.service-card__badge{
    position:absolute;
    top:18px;
    right:18px;
    background:var(--gold-500);
    color:var(--black);
    border-radius:999px;
    padding:8px 12px;
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* Experience */
.experience{
    background:var(--green-950);
    color:white;
}

.experience::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 85% 20%,rgba(212,175,55,.16),transparent 34%),
        radial-gradient(circle at 10% 80%,rgba(255,255,255,.08),transparent 34%);
    pointer-events:none;
}

.experience__grid{
    position:relative;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:70px;
    align-items:center;
}

.experience__image{
    min-height:620px;
    border-radius:44px;
    overflow:hidden;
    box-shadow:var(--shadow-strong);
}

.image-placeholder--large{
    width:100%;
    height:100%;
    min-height:620px;
    font-size:clamp(1.2rem,3vw,2.4rem);
}

.experience__content p:not(.eyebrow){
    margin-top:24px;
    color:rgba(255,255,255,.72);
}

.check-list{
    display:grid;
    gap:14px;
    margin-top:34px;
}

.check-list div{
    display:flex;
    align-items:center;
    gap:14px;
    padding:17px 18px;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
}

.check-list span{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--gold-500);
    color:var(--black);
    font-weight:900;
    flex:0 0 auto;
}

/* Process */
.process{
    background:var(--cream-100);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.process-step{
    padding:34px 26px;
    border-radius:var(--radius-xl);
    background:white;
    box-shadow:var(--shadow-soft);
    border:1px solid rgba(212,175,55,.18);
}

.process-step span{
    display:inline-grid;
    place-items:center;
    width:54px;
    height:54px;
    border-radius:50%;
    background:var(--green-800);
    color:var(--gold-400);
    font-weight:900;
    margin-bottom:28px;
}

.process-step p{
    margin-top:16px;
    color:var(--muted);
}

/* Comparison */
.before-after{
    background:linear-gradient(180deg,var(--cream-200),var(--white));
}

.comparison{
    position:relative;
    height:min(680px,72vh);
    min-height:440px;
    overflow:hidden;
    border-radius:46px;
    box-shadow:var(--shadow-strong);
    background:var(--green-900);
    user-select:none;
}

.comparison__image{
    position:absolute;
    inset:0;
    color:white;
    font-size:clamp(1.2rem,3vw,2.6rem);
}

.comparison__image--before{
    background:
        linear-gradient(135deg,rgba(68,54,42,.92),rgba(155,130,88,.78)),
        repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 12px,transparent 12px 24px);
}

.comparison__image--after{
    background:
        linear-gradient(135deg,rgba(16,47,36,.96),rgba(31,90,68,.82)),
        repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 12px,transparent 12px 24px);
    clip-path:inset(0 50% 0 0);
}

.comparison__range{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    z-index:6;
    cursor:ew-resize;
}

.comparison__handle{
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:3px;
    background:white;
    z-index:5;
    transform:translateX(-50%);
}

.comparison__handle::after{
    content:"↔";
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:64px;
    height:64px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--gold-400),var(--gold-500));
    color:var(--black);
    display:grid;
    place-items:center;
    font-weight:900;
    box-shadow:0 16px 45px rgba(0,0,0,.28);
}

.comparison__label{
    position:absolute;
    top:24px;
    z-index:7;
    border-radius:999px;
    background:rgba(0,0,0,.42);
    color:white;
    padding:10px 16px;
    font-weight:900;
    backdrop-filter:blur(14px);
}

.comparison__label--before{
    left:24px;
}

.comparison__label--after{
    right:24px;
}

/* Portfolio */
.portfolio{
    background:white;
}

.portfolio-filters{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:34px;
}

.filter-button{
    border:1px solid rgba(16,47,36,.16);
    background:var(--cream-100);
    padding:11px 18px;
    border-radius:999px;
    font-weight:900;
    transition:var(--transition);
}

.filter-button.active,
.filter-button:hover{
    background:var(--green-800);
    color:white;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:245px;
    gap:20px;
}

.portfolio-item{
    border-radius:34px;
    padding:24px;
    color:var(--green-950);
    background:
        linear-gradient(135deg,var(--cream-300),var(--cream-100)),
        repeating-linear-gradient(45deg,rgba(16,47,36,.08) 0 12px,transparent 12px 24px);
    border-color:rgba(16,47,36,.18);
    transition:opacity .3s ease, transform var(--transition), box-shadow var(--transition);
}

.portfolio-item::before{
    background:radial-gradient(circle at center,rgba(255,255,255,.54),transparent 56%);
}

.portfolio-item:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-soft);
}

.portfolio-item.is-hidden{
    opacity:0;
    transform:scale(.92);
    pointer-events:none;
    display:none;
}

.portfolio-item--tall{
    grid-row:span 2;
}

.portfolio-item--wide{
    grid-column:span 2;
}

/* Reviews */
.reviews{
    background:var(--green-950);
    color:white;
    overflow:hidden;
}

.reviews .section-heading p:not(.eyebrow){
    color:rgba(255,255,255,.65);
}

.testimonial-marquee{
    overflow:hidden;
    width:100%;
    padding:8px 0 18px;
}

.testimonial-track{
    display:flex;
    gap:22px;
    width:max-content;
    animation:testimonialScroll 34s linear infinite;
}

.testimonial-marquee:hover .testimonial-track{
    animation-play-state:paused;
}

@keyframes testimonialScroll{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

.testimonial-card{
    width:360px;
    min-height:230px;
    padding:30px;
    border-radius:32px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.stars{
    color:var(--gold-500);
    letter-spacing:.08em;
    margin-bottom:18px;
}

.testimonial-card p{
    color:rgba(255,255,255,.78);
    margin-bottom:22px;
}

.testimonial-card strong{
    color:white;
}

/* Quote */
.quote{
    background:
        radial-gradient(circle at top right,rgba(212,175,55,.16),transparent 35%),
        var(--cream-200);
}

.quote-card{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:56px;
    align-items:start;
    background:white;
    border-radius:48px;
    padding:56px;
    box-shadow:var(--shadow-strong);
    border:1px solid rgba(212,175,55,.16);
}

.quote-card__content p:not(.eyebrow){
    margin-top:20px;
    color:var(--muted);
}

.contact-panel{
    margin-top:34px;
    display:grid;
    gap:10px;
    padding:24px;
    border-radius:24px;
    background:var(--cream-100);
    border:1px solid rgba(212,175,55,.2);
}

.quote-form{
    display:grid;
    gap:18px;
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

label{
    display:grid;
    gap:8px;
}

label span{
    font-weight:900;
    font-size:.88rem;
    color:var(--green-800);
}

input,
select,
textarea{
    width:100%;
    border:1px solid #ddd1bd;
    border-radius:18px;
    background:#fffaf3;
    padding:15px 16px;
    color:var(--charcoal);
    outline:none;
    transition:var(--transition);
}

textarea{
    min-height:158px;
    resize:vertical;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--gold-500);
    box-shadow:0 0 0 4px rgba(212,175,55,.14);
    background:white;
}

.input-error{
    border-color:#b00020 !important;
}

.form-message{
    min-height:24px;
    font-weight:800;
}

.form-message.success{
    color:var(--green-700);
}

.form-message.error{
    color:#b00020;
}

/* FAQ */
.faq{
    background:white;
}

.faq-list{
    max-width:900px;
    margin:0 auto;
    display:grid;
    gap:14px;
}

.faq-item{
    border:1px solid rgba(16,47,36,.12);
    border-radius:24px;
    overflow:hidden;
    background:var(--cream-100);
}

.faq-item button{
    width:100%;
    border:0;
    background:transparent;
    padding:22px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    text-align:left;
    color:var(--green-900);
    font-weight:900;
}

.faq-item button span{
    font-size:1.4rem;
    color:var(--gold-500);
    transition:var(--transition);
}

.faq-item.is-open button span{
    transform:rotate(45deg);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    color:var(--muted);
    line-height:1.8;
    padding:0 24px;
    transition:max-height .35s ease, padding .35s ease;
}

.faq-item.is-open .faq-answer{
    max-height:220px;
    padding:0 24px 24px;
}

/* Footer */
.footer{
    background:var(--green-950);
    color:white;
    padding:80px 0 28px;
}

.footer__grid{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:38px;
}

.brand--footer{
    margin-bottom:20px;
}

.footer p,
.footer a{
    color:rgba(255,255,255,.68);
}

.footer h3{
    font-size:1.5rem;
    margin-bottom:20px;
}

.footer__grid > div{
    display:grid;
    align-content:start;
    gap:10px;
}

.footer__bottom{
    width:min(var(--container),88vw);
    margin:50px auto 0;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

/* Floating buttons */
.whatsapp-button{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:900;
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    border-radius:999px;
    background:#25d366;
    color:white;
    font-weight:900;
    box-shadow:0 18px 48px rgba(0,0,0,.25);
    transition:var(--transition);
}

.whatsapp-button:hover{
    transform:translateY(-4px);
}

.back-to-top{
    position:fixed;
    right:24px;
    bottom:88px;
    width:48px;
    height:48px;
    border-radius:50%;
    border:0;
    background:var(--green-800);
    color:white;
    font-size:1.2rem;
    box-shadow:0 18px 48px rgba(0,0,0,.22);
    opacity:0;
    transform:translateY(16px);
    pointer-events:none;
    transition:var(--transition);
    z-index:900;
}

.back-to-top.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

/* Lightbox */
.lightbox{
    position:fixed;
    inset:0;
    z-index:3000;
    display:none;
    place-items:center;
    padding:36px;
    background:rgba(0,0,0,.86);
}

.lightbox.is-open{
    display:grid;
}

.lightbox__close{
    position:absolute;
    top:24px;
    right:28px;
    width:54px;
    height:54px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:white;
    font-size:2.4rem;
    line-height:1;
}

.lightbox__panel{
    width:min(920px,92vw);
    color:white;
    text-align:center;
}

.lightbox__image{
    width:100%;
    height:min(620px,68vh);
    border-radius:36px;
    margin-bottom:24px;
    font-size:clamp(1.4rem,3vw,2.6rem);
}

.lightbox__panel p{
    color:rgba(255,255,255,.68);
}

/* Reveal animations */
.reveal{
    opacity:0;
    transform:translateY(38px);
    transition:opacity .85s ease, transform .85s ease;
}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
    }

    .cursor-glow{
        display:none;
    }
}

/* Responsive */
@media(max-width:1120px){
    .nav-links{
        gap:18px;
    }

    .service-grid,
    .process-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .portfolio-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .experience__grid,
    .quote-card,
    .intro__grid{
        grid-template-columns:1fr;
    }

    .experience__image,
    .image-placeholder--large{
        min-height:460px;
    }

    .footer__grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:860px){
    .cursor-glow{
        display:none;
    }

    .site-header{
        top:14px;
    }

    .navbar{
        border-radius:28px;
    }

    .hamburger{
        display:block;
        order:3;
    }

    .nav-button{
        display:none;
    }

    .nav-links{
        position:absolute;
        left:0;
        right:0;
        top:76px;
        display:grid;
        gap:0;
        padding:10px;
        border-radius:28px;
        background:rgba(7,17,13,.95);
        border:1px solid rgba(255,255,255,.12);
        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);
        box-shadow:var(--shadow-strong);
        opacity:0;
        transform:translateY(-14px);
        pointer-events:none;
        transition:var(--transition);
    }

    .nav-links.is-open{
        opacity:1;
        transform:translateY(0);
        pointer-events:auto;
    }

    .nav-links a{
        padding:17px 18px;
        border-bottom:1px solid rgba(255,255,255,.08);
    }

    .nav-links a:last-child{
        border-bottom:0;
    }

    .hero{
        padding-top:130px;
    }

    .hero__trust,
    .stat-grid,
    .form-grid{
        grid-template-columns:1fr;
    }

    .hero__trust{
        margin-top:28px;
    }

    .section{
        padding:86px 0;
    }

    .quote-card{
        padding:30px;
        border-radius:32px;
    }

    .comparison{
        min-height:360px;
        border-radius:30px;
    }

    .testimonial-card{
        width:310px;
    }

    .whatsapp-button strong{
        display:none;
    }
}

@media(max-width:640px){
    .container{
        width:min(92vw,var(--container));
    }

    .brand__text small{
        display:none;
    }

    .brand__mark{
        width:40px;
        height:40px;
    }

    .hero__actions{
        display:grid;
        width:100%;
    }

    .button{
        width:100%;
    }

    .service-grid,
    .process-grid,
    .portfolio-grid,
    .footer__grid{
        grid-template-columns:1fr;
    }

    .portfolio-item--wide,
    .portfolio-item--tall{
        grid-column:auto;
        grid-row:auto;
    }

    .portfolio-grid{
        grid-auto-rows:220px;
    }

    .footer__bottom{
        display:grid;
    }

    .section-heading{
        margin-bottom:42px;
    }

    .image-placeholder--hero{
        font-size:1.4rem;
    }
}


/* =========================================================
   Uploaded Bunny Nest Hero Image
   The uploaded file is now used at: assets/images/hero.jpg
========================================================= */

.hero__image--photo{
    background:
        radial-gradient(circle at center, rgba(255,255,255,.98), rgba(246,240,228,.94) 40%, rgba(16,47,36,.86) 74%),
        linear-gradient(135deg, var(--green-950), var(--green-800));
    display:grid;
    place-items:center;
    border:0;
    padding:clamp(28px, 6vw, 90px);
}

.hero__image--photo img{
    width:min(760px, 76vw);
    max-height:52vh;
    object-fit:contain;
    filter:
        drop-shadow(0 26px 46px rgba(0,0,0,.22))
        drop-shadow(0 0 34px rgba(255,255,255,.78));
    opacity:.98;
    animation:heroLogoFloat 7s ease-in-out infinite;
}

@keyframes heroLogoFloat{
    0%,100%{transform:translateY(0) scale(1)}
    50%{transform:translateY(-10px) scale(1.015)}
}

.hero__gradient{
    background:
        radial-gradient(circle at 50% 43%, rgba(255,255,255,.44), transparent 33%),
        radial-gradient(circle at 50% 45%, rgba(212,175,55,.16), transparent 48%),
        linear-gradient(180deg, rgba(7,17,13,.04), rgba(7,17,13,.78)),
        linear-gradient(90deg, rgba(7,17,13,.82), transparent 44%, rgba(7,17,13,.82));
}

.hero__content{
    margin-top:clamp(220px, 34vh, 360px);
    padding:28px;
    border-radius:34px;
    background:rgba(7,17,13,.42);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 24px 80px rgba(0,0,0,.22);
}

.brand__mark--image{
    overflow:hidden;
    background:#fff;
}

.brand__mark--image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(2.45);
}

@media(max-width:860px){
    .hero__image--photo img{
        width:min(640px, 86vw);
        max-height:42vh;
    }

    .hero__content{
        margin-top:clamp(180px, 30vh, 300px);
        padding:22px;
    }
}

@media(max-width:640px){
    .hero__image--photo{
        padding:22px;
    }

    .hero__image--photo img{
        width:92vw;
        max-height:36vh;
    }

    .hero__content{
        margin-top:clamp(160px, 28vh, 250px);
    }
}