/* ==========================================
   LANDSCAPING & LAWN CARE — PAGE-SPECIFIC STYLE
   Same brand palette/type as the rest of the site
   (navy / gold / white, from variables.css) — its
   own layout language lives here, isolated from
   css/industry-page.css, css/home-service-page.css,
   and css/roofing-page.css so no other page is touched.
========================================== */

/* ==========================================
   HERO — full-bleed dusk photo of the finished
   landscape, slow Ken Burns drift, staggered
   fade-up entrance, and a field of drifting
   firefly light specks for extra ambient motion.
========================================== */

.ll-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:120px;

}
.ll-hero__media{

    position:absolute;

    inset:-5%;

    z-index:0;

}
.ll-hero__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 42%;

    animation:llHeroZoom 36s ease-in-out infinite alternate;

    will-change:transform;

}
.ll-hero__scrim{

    position:absolute;

    inset:0;

    z-index:0;

    background:

        radial-gradient(ellipse 62% 54% at 50% 40%, rgba(8,21,45,.82) 0%, rgba(8,21,45,.3) 62%, rgba(8,21,45,0) 100%),

        linear-gradient(180deg, rgba(8,21,45,.5) 0%, rgba(8,21,45,.1) 24%, rgba(8,21,45,.14) 68%, rgba(8,21,45,.7) 100%);

}
.ll-hero__grain{

    position:absolute;

    inset:0;

    z-index:0;

    opacity:.05;

    mix-blend-mode:overlay;

    pointer-events:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}

/* Firefly field — small warm specks drifting
   upward through the dusk garden, staggered
   size/speed/position per dot for an organic,
   non-mechanical feel. */

.ll-hero__fireflies{

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    overflow:hidden;

}
.ll-hero__fireflies span{

    position:absolute;

    bottom:-4%;

    width:5px;

    height:5px;

    border-radius:50%;

    background:radial-gradient(circle, rgba(255,236,190,.95) 0%, rgba(216,177,75,.7) 55%, rgba(216,177,75,0) 100%);

    box-shadow:0 0 10px 2px rgba(230,199,104,.55);

    opacity:0;

    animation:llFireflyRise linear infinite;

}
.ll-hero__fireflies span:nth-child(1){ left:8%;  --drift:18px;  width:4px; height:4px; animation-duration:14s; animation-delay:.5s; }
.ll-hero__fireflies span:nth-child(2){ left:19%; --drift:-14px; width:6px; height:6px; animation-duration:18s; animation-delay:3s; }
.ll-hero__fireflies span:nth-child(3){ left:31%; --drift:12px;  width:4px; height:4px; animation-duration:12s; animation-delay:1.5s; }
.ll-hero__fireflies span:nth-child(4){ left:47%; --drift:-16px; width:5px; height:5px; animation-duration:16s; animation-delay:5s; }
.ll-hero__fireflies span:nth-child(5){ left:63%; --drift:14px;  width:4px; height:4px; animation-duration:13s; animation-delay:2.4s; }
.ll-hero__fireflies span:nth-child(6){ left:76%; --drift:-12px; width:6px; height:6px; animation-duration:19s; animation-delay:6.2s; }
.ll-hero__fireflies span:nth-child(7){ left:88%; --drift:16px;  width:4px; height:4px; animation-duration:15s; animation-delay:.8s; }
.ll-hero__fireflies span:nth-child(8){ left:95%; --drift:-10px; width:5px; height:5px; animation-duration:17s; animation-delay:4s; }

.ll-hero__inner{

    position:relative;

    z-index:1;

    text-align:center;

    margin-top:-48px;

}
.ll-hero__copy{

    max-width:1260px;

    margin:0 auto;

}
.ll-hero__tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--color-gold);

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:26px;

}
.ll-hero__tag::before,
.ll-hero__tag::after{

    content:"";

    width:28px;

    height:1px;

    background:linear-gradient(90deg, rgba(216,177,75,0), var(--color-gold));

}
.ll-hero__tag::after{

    background:linear-gradient(90deg, var(--color-gold), rgba(216,177,75,0));

}
.ll-hero__copy h1{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2.4rem, 4.4vw, 3.7rem);

    line-height:1.24;

    letter-spacing:-.5px;

    color:var(--color-white);

    text-shadow:0 10px 34px rgba(0,0,0,.55);

    margin-bottom:28px;

}
.ll-hero__lede{

    font-size:1.18rem;

    line-height:1.85;

    color:var(--color-text);

    text-shadow:0 4px 18px rgba(0,0,0,.5);

    max-width:640px;

    margin:0 auto 42px;

}
.ll-hero .hero__buttons{

    justify-content:center;

}
.ll-hero__tag,
.ll-hero__copy h1,
.ll-hero__lede,
.ll-hero .hero__buttons{

    opacity:0;

    animation:llHeroFadeUp .85s cubic-bezier(.22,.68,0,1) forwards;

}
.ll-hero__tag{ animation-delay:.15s; }
.ll-hero__copy h1{ animation-delay:.32s; }
.ll-hero__lede{ animation-delay:.5s; }
.ll-hero .hero__buttons{ animation-delay:.68s; }

.ll-hero__scrollcue{

    position:absolute;

    left:50%;

    bottom:32px;

    z-index:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:rgba(255,255,255,.55);

    font-size:.68rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transform:translateX(-50%);

    opacity:0;

    animation:llHeroFadeUp .8s cubic-bezier(.22,.68,0,1) forwards;

    animation-delay:1s;

}
.ll-hero__scrollcue svg{

    width:16px;

    height:16px;

    animation:llHeroBob 2.2s ease-in-out infinite;

}
@keyframes llHeroZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.09); }

}
@keyframes llHeroFadeUp{

    from{ opacity:0; transform:translateY(20px); }

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

}
@keyframes llHeroBob{

    0%, 100%{ transform:translateY(0); }

    50%{ transform:translateY(6px); }

}
@keyframes llFireflyRise{

    0%{ transform:translate(0, 0) scale(.7); opacity:0; }

    12%{ opacity:1; }

    50%{ transform:translate(var(--drift), -46vh) scale(1); opacity:.85; }

    88%{ opacity:.4; }

    100%{ transform:translate(calc(var(--drift) * -1), -92vh) scale(.6); opacity:0; }

}
@media (max-width:900px){

    /* .ll-hero centers its content via flexbox (align-items:center)
       rather than plain padding, so it looked fine when this was
       tested against a browser window taller than an actual phone
       viewport. On a real ~892px-tall viewport the mobile heading
       wraps to 3 lines and is much taller, and centering that inside
       the full-height box — on top of the fixed 120px padding-top —
       still leaves a big gap above it; shrinking the padding barely
       helps because centering just redistributes half the saved
       space back onto the gap below. Anchor to the top instead, like
       every other hero section on the site, so padding directly
       controls the gap. */
    .ll-hero{ align-items:flex-start; padding-top:90px; }

    .ll-hero__inner{ margin-top:0; }

}
@media (prefers-reduced-motion: reduce){

    .ll-hero__media img{ animation:none; }

    .ll-hero__fireflies span{ animation:none; opacity:0; }

    .ll-hero__tag,
    .ll-hero__copy h1,
    .ll-hero__lede,
    .ll-hero .hero__buttons,
    .ll-hero__scrollcue,
    .ll-hero__scrollcue svg{

        animation:none;

        opacity:1;

    }

}

/* ==========================================
   HARD WORK DOESN'T GET YOU FOUND — white
   section, framed truck photo left, headline
   + proof card right. Both halves fade/rise
   into place on scroll (see app.js).
========================================== */

.ll-hardwork{

    background:var(--color-white);

    padding:var(--space-3xl) 0;

}
.ll-hardwork__grid{

    display:grid;

    grid-template-columns:1fr 1.05fr;

    gap:72px;

    align-items:center;

}
.ll-hardwork__media{

    opacity:0;

    transform:translateY(28px) scale(.97);

    transition:opacity .9s cubic-bezier(.22,.68,0,1), transform .9s cubic-bezier(.22,.68,0,1);

}
.ll-hardwork__media.is-visible{

    opacity:1;

    transform:translateY(0) scale(1);

}
.ll-hardwork__frame{

    padding:14px;

    background:var(--color-white);

    border:1px solid rgba(8,21,45,.1);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-card);

}
.ll-hardwork__img{

    display:block;

    width:100%;

    height:auto;

    border-radius:calc(var(--radius-lg) - 8px);

}
.ll-hardwork__copy{

    opacity:0;

    transform:translateY(28px);

    transition:opacity .9s cubic-bezier(.22,.68,0,1) .15s, transform .9s cubic-bezier(.22,.68,0,1) .15s;

}
.ll-hardwork__copy.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ll-hardwork__copy h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(1.9rem, 3vw, 2.6rem);

    line-height:1.32;

    letter-spacing:-.5px;

    color:var(--color-background);

    margin-bottom:24px;

}
.ll-hardwork__copy > p{

    font-size:1.05rem;

    line-height:1.85;

    color:rgba(8,21,45,.68);

    margin-bottom:34px;

}
.ll-hardwork__card{

    background:var(--color-white);

    border:1px solid rgba(8,21,45,.1);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-card);

    padding:34px 36px;

}
.ll-hardwork__card-label{

    display:block;

    font-size:.9rem;

    font-weight:700;

    color:var(--color-background);

    margin-bottom:6px;

}
.ll-hardwork__search-list li{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 0;

    font-size:1.02rem;

    font-style:italic;

    color:rgba(8,21,45,.78);

}
.ll-hardwork__search-list li + li{

    border-top:1px solid rgba(8,21,45,.08);

}
.ll-hardwork__search-icon{

    flex:none;

    display:flex;

    align-items:center;

    justify-content:center;

    width:20px;

    height:20px;

    color:var(--color-gold);

}
.ll-hardwork__search-icon svg{

    width:100%;

    height:100%;

}
@media (max-width:900px){

    .ll-hardwork__grid{

        grid-template-columns:1fr;

        gap:44px;

    }

}
@media (prefers-reduced-motion: reduce){

    .ll-hardwork__media,
    .ll-hardwork__copy{

        transition:none;

        opacity:1;

        transform:none;

    }

}

/* ==========================================
   YOU DON'T NEED TECHNOLOGY TO MOW A LAWN —
   navy section, copy left, split-screen proof
   image right with an ambient gold glow and a
   slow continuous float once revealed.
========================================== */

.ll-digital{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.ll-digital__grid{

    display:grid;

    grid-template-columns:.95fr 1.15fr;

    gap:72px;

    align-items:center;

}
.ll-digital__copy{

    opacity:0;

    transform:translateY(28px);

    transition:opacity .9s cubic-bezier(.22,.68,0,1), transform .9s cubic-bezier(.22,.68,0,1);

}
.ll-digital__copy.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ll-digital__copy h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(1.9rem, 3vw, 2.6rem);

    line-height:1.32;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:24px;

}
.ll-digital__copy p{

    font-size:1.05rem;

    line-height:1.85;

    color:var(--color-text);

}
.ll-digital__media{

    position:relative;

    opacity:0;

    transform:translateY(28px) scale(.97);

    transition:opacity .9s cubic-bezier(.22,.68,0,1) .15s, transform .9s cubic-bezier(.22,.68,0,1) .15s;

}
.ll-digital__media.is-visible{

    opacity:1;

    transform:translateY(0) scale(1);

}
.ll-digital__media.is-visible .ll-digital__frame{

    animation:llDigitalFloat 7s ease-in-out 1s infinite;

}
.ll-digital__glow{

    position:absolute;

    inset:-14% -10%;

    background:radial-gradient(closest-side, rgba(216,177,75,.28), rgba(216,177,75,0) 68%);

    filter:blur(38px);

    z-index:0;

    pointer-events:none;

}
.ll-digital__frame{

    position:relative;

    z-index:1;

    overflow:hidden;

    border-radius:var(--radius-lg);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:var(--shadow-card);

}
.ll-digital__img{

    display:block;

    width:100%;

    height:auto;

}
@keyframes llDigitalFloat{

    0%, 100%{ transform:translateY(0); }

    50%{ transform:translateY(-10px); }

}
@media (max-width:900px){

    .ll-digital__grid{

        grid-template-columns:1fr;

        gap:44px;

    }

}
@media (prefers-reduced-motion: reduce){

    .ll-digital__copy,
    .ll-digital__media{

        transition:none;

        opacity:1;

        transform:none;

    }

    .ll-digital__media.is-visible .ll-digital__frame{ animation:none; }

}

/* ==========================================
   LET YOUR WORK DO THE TALKING — white
   section, centered head, large editorial
   photo with gallery-style corner brackets,
   ambient glow, inset vignette, and a slow
   Ken Burns drift once revealed.
========================================== */

.ll-portfolio{

    background:var(--color-white);

    padding:var(--space-2xl) 0;

    overflow:hidden;

}
.ll-portfolio__head{

    max-width:720px;

    margin:0 auto 36px;

    text-align:center;

    opacity:0;

    transform:translateY(24px);

    transition:opacity .9s cubic-bezier(.22,.68,0,1), transform .9s cubic-bezier(.22,.68,0,1);

}
.ll-portfolio__head.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ll-portfolio__tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--color-gold);

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

}
.ll-portfolio__tag::before,
.ll-portfolio__tag::after{

    content:"";

    width:28px;

    height:1px;

    background:linear-gradient(90deg, rgba(216,177,75,0), var(--color-gold));

}
.ll-portfolio__tag::after{

    background:linear-gradient(90deg, var(--color-gold), rgba(216,177,75,0));

}
.ll-portfolio__head h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.4vw, 2.7rem);

    letter-spacing:-.5px;

    color:var(--color-background);

    margin-bottom:20px;

}
.ll-portfolio__head p{

    font-size:1.05rem;

    line-height:1.85;

    color:rgba(8,21,45,.68);

}
.ll-portfolio__media{

    position:relative;

    max-width:1080px;

    margin:0 auto;

    opacity:0;

    transform:translateY(32px) scale(.98);

    transition:opacity 1s cubic-bezier(.22,.68,0,1) .15s, transform 1s cubic-bezier(.22,.68,0,1) .15s;

}
.ll-portfolio__media.is-visible{

    opacity:1;

    transform:translateY(0) scale(1);

}
.ll-portfolio__glow{

    position:absolute;

    inset:-10% -6%;

    background:radial-gradient(closest-side, rgba(216,177,75,.22), rgba(216,177,75,0) 70%);

    filter:blur(46px);

    z-index:0;

    pointer-events:none;

}
.ll-portfolio__frame{

    position:relative;

    z-index:1;

    overflow:hidden;

    aspect-ratio:2 / 1;

    border-radius:var(--radius-lg);

    box-shadow:0 30px 70px rgba(8,21,45,.18), 0 8px 24px rgba(8,21,45,.1);

}
.ll-portfolio__img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 62%;

    animation:llPortfolioZoom 30s ease-in-out infinite alternate;

    animation-play-state:paused;

    will-change:transform;

}
.ll-portfolio__media.is-visible .ll-portfolio__img{ animation-play-state:running; }
.ll-portfolio__vignette{

    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    box-shadow:inset 0 0 90px rgba(8,21,45,.28);

    border-radius:var(--radius-lg);

}
.ll-portfolio__corner{

    position:absolute;

    width:36px;

    height:36px;

    z-index:2;

    pointer-events:none;

}
.ll-portfolio__corner--tl{

    top:-14px;

    left:-14px;

    border-top:2px solid var(--color-gold);

    border-left:2px solid var(--color-gold);

}
.ll-portfolio__corner--br{

    bottom:-14px;

    right:-14px;

    border-bottom:2px solid var(--color-gold);

    border-right:2px solid var(--color-gold);

}
@keyframes llPortfolioZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.07); }

}
@media (max-width:640px){

    .ll-portfolio__corner{ display:none; }

}
@media (prefers-reduced-motion: reduce){

    .ll-portfolio__head,
    .ll-portfolio__media{

        transition:none;

        opacity:1;

        transform:none;

    }

    .ll-portfolio__img{ animation:none; }

}

/* ==========================================
   BE VISIBLE WHERE THE WORK IS — navy
   section, centered pin icon with a radar-
   style pulse, headline, body, and a gold-
   accented closing line.
========================================== */

.ll-visible{

    background:var(--color-background-alt);

    padding:var(--space-3xl) 0;

}
.ll-visible__inner{

    max-width:720px;

    margin:0 auto;

    text-align:center;

    opacity:0;

    transform:translateY(24px);

    transition:opacity .9s cubic-bezier(.22,.68,0,1), transform .9s cubic-bezier(.22,.68,0,1);

}
.ll-visible__inner.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ll-visible__icon{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    margin-bottom:20px;

    color:var(--color-gold);

}
.ll-visible__icon svg{

    position:relative;

    z-index:1;

    width:100%;

    height:100%;

}
.ll-visible__pulse{

    position:absolute;

    inset:6px;

    border-radius:50%;

    border:1.5px solid var(--color-gold);

    opacity:0;

    animation:llVisiblePulse 3s ease-out infinite;

}
.ll-visible__pulse--2{ animation-delay:1.5s; }
.ll-visible__inner:not(.is-visible) .ll-visible__pulse{ animation-play-state:paused; }
.ll-visible__inner h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2rem, 3.4vw, 2.7rem);

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:22px;

}
.ll-visible__inner > p{

    font-size:1.1rem;

    line-height:1.85;

    color:var(--color-text);

}
.ll-visible__closing{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(1.7rem, 3.1vw, 2.4rem);

    line-height:1.3;

    letter-spacing:-.3px;

    color:var(--color-white);

    margin-top:40px;

}
.ll-visible__closing em{

    font-style:italic;

    color:var(--color-gold);

}
@keyframes llVisiblePulse{

    0%{ transform:scale(.7); opacity:.9; }

    100%{ transform:scale(1.9); opacity:0; }

}
@media (prefers-reduced-motion: reduce){

    .ll-visible__inner{

        transition:none;

        opacity:1;

        transform:none;

    }

    .ll-visible__pulse{ animation:none; opacity:0; }

}

/* ==========================================
   THE NEXT CUSTOMER MAY NOT SEARCH GOOGLE —
   white section housing a floating "AI
   Assistant" chat card: two real query
   phrasings, a persistent typing indicator,
   and a parsed-intent chip readout.
========================================== */

.ll-ai{

    background:var(--color-white);

    padding:var(--space-2xl) 0;

}
.ll-ai__grid{

    display:grid;

    grid-template-columns:.92fr 1.08fr;

    gap:64px;

    align-items:center;

}
.ll-ai__copy{

    opacity:0;

    transform:translateY(24px);

    transition:opacity .9s cubic-bezier(.22,.68,0,1), transform .9s cubic-bezier(.22,.68,0,1);

}
.ll-ai__copy.is-visible{

    opacity:1;

    transform:translateY(0);

}
.ll-ai__tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--color-gold);

    letter-spacing:3px;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:18px;

}
.ll-ai__tag::before,
.ll-ai__tag::after{

    content:"";

    width:28px;

    height:1px;

    background:linear-gradient(90deg, rgba(216,177,75,0), var(--color-gold));

}
.ll-ai__tag::after{

    background:linear-gradient(90deg, var(--color-gold), rgba(216,177,75,0));

}
.ll-ai__copy h2{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(1.9rem, 2.8vw, 2.5rem);

    line-height:1.24;

    letter-spacing:-.5px;

    color:var(--color-background);

    margin-bottom:14px;

}
.ll-ai__lede{

    font-size:1.1rem;

    color:rgba(8,21,45,.68);

}

/* -- the chat card -- */

.ll-ai__panel{

    position:relative;

    opacity:0;

    transform:translateY(28px) scale(.98);

    transition:opacity .9s cubic-bezier(.22,.68,0,1) .12s, transform .9s cubic-bezier(.22,.68,0,1) .12s;

}
.ll-ai__panel.is-visible{

    opacity:1;

    transform:translateY(0) scale(1);

}
.ll-ai__glow{

    position:absolute;

    inset:-8% -10%;

    background:radial-gradient(closest-side, rgba(216,177,75,.2), rgba(216,177,75,0) 70%);

    filter:blur(40px);

    z-index:0;

    pointer-events:none;

}
.ll-ai__card{

    position:relative;

    z-index:1;

    background:var(--color-background);

    border:1px solid rgba(255,255,255,.08);

    border-radius:var(--radius-lg);

    box-shadow:0 30px 70px rgba(8,21,45,.28), 0 8px 24px rgba(8,21,45,.16);

    padding:8px 28px 28px;

    overflow:hidden;

}
.ll-ai__card-header{

    position:relative;

    display:flex;

    align-items:center;

    gap:10px;

    padding:16px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    margin-bottom:26px;

    overflow:hidden;

}
.ll-ai__card-header::after{

    content:"";

    position:absolute;

    top:0;

    left:-40%;

    width:40%;

    height:100%;

    background:linear-gradient(90deg, rgba(216,177,75,0), rgba(216,177,75,.16), rgba(216,177,75,0));

    animation:llAiSweep 5s ease-in-out infinite;

}
.ll-ai__card-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:30px;

    height:30px;

    color:var(--color-gold);

    flex:none;

}
.ll-ai__card-icon svg{ width:100%; height:100%; }
.ll-ai__card-title{

    font-size:.92rem;

    font-weight:700;

    color:var(--color-white);

}
.ll-ai__card-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-left:auto;

    font-size:.74rem;

    font-weight:600;

    letter-spacing:.4px;

    color:var(--color-gold);

}
.ll-ai__card-status-dot{

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--color-gold);

    animation:llAiBlink 1.8s ease-in-out infinite;

}

/* -- messages -- */

.ll-ai__messages{

    display:flex;

    flex-direction:column;

    gap:16px;

    margin-bottom:26px;

}
.ll-ai__message{

    max-width:88%;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.1);

    border-radius:16px 16px 16px 4px;

    padding:14px 18px;

}
.ll-ai__message--refined{

    align-self:flex-end;

    max-width:92%;

    background:rgba(216,177,75,.1);

    border-color:rgba(216,177,75,.3);

    border-radius:16px 16px 4px 16px;

}
.ll-ai__message-meta{

    display:block;

    font-size:.68rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:rgba(201,209,220,.55);

    margin-bottom:8px;

}
.ll-ai__message--refined .ll-ai__message-meta{ color:rgba(216,177,75,.85); }
.ll-ai__message p{

    font-size:.98rem;

    font-style:italic;

    line-height:1.6;

    color:var(--color-text);

}
.ll-ai__typing{

    display:flex;

    align-items:center;

    gap:5px;

    padding-left:4px;

}
.ll-ai__typing span{

    width:6px;

    height:6px;

    border-radius:50%;

    background:rgba(216,177,75,.6);

    animation:llAiTypingDot 1.4s ease-in-out infinite;

}
.ll-ai__typing span:nth-child(2){ animation-delay:.18s; }
.ll-ai__typing span:nth-child(3){ animation-delay:.36s; }

/* -- parsed intent chips -- */

.ll-ai__parsed{

    padding-top:22px;

    border-top:1px solid rgba(255,255,255,.08);

}
.ll-ai__parsed-label{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:.74rem;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

    color:rgba(201,209,220,.6);

    margin-bottom:14px;

}
.ll-ai__parsed-label svg{

    width:14px;

    height:14px;

    color:var(--color-gold);

    flex:none;

}
.ll-ai__chips{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}
.ll-ai__chip{

    font-size:.82rem;

    font-weight:600;

    color:var(--color-white);

    background:rgba(255,255,255,.05);

    border:1px solid rgba(216,177,75,.35);

    border-radius:var(--radius-pill);

    padding:8px 16px;

}

/* -- closing copy (nested inside .ll-ai__copy) -- */

.ll-ai__foot{

    margin-top:28px;

}
.ll-ai__foot p{

    font-size:1rem;

    line-height:1.75;

    color:rgba(8,21,45,.68);

}
.ll-ai__foot-bold{

    font-weight:700;

    color:var(--color-background);

    margin-top:18px;

}
@keyframes llAiSweep{

    0%{ left:-40%; }

    100%{ left:100%; }

}
@keyframes llAiBlink{

    0%, 100%{ opacity:1; }

    50%{ opacity:.35; }

}
@keyframes llAiTypingDot{

    0%, 60%, 100%{ transform:translateY(0); opacity:.5; }

    30%{ transform:translateY(-4px); opacity:1; }

}
@media (max-width:900px){

    .ll-ai__grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}
@media (max-width:640px){

    .ll-ai__message,
    .ll-ai__message--refined{ max-width:100%; }

}
@media (prefers-reduced-motion: reduce){

    .ll-ai__copy,
    .ll-ai__panel{

        transition:none;

        opacity:1;

        transform:none;

    }

    .ll-ai__card-header::after,
    .ll-ai__card-status-dot,
    .ll-ai__typing span{ animation:none; }

    .ll-ai__card-status-dot{ opacity:1; }

    .ll-ai__typing span{ opacity:.7; }

}