/* ==========================================================================
   Law Firms Industry Page (lf-page)
   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 and css/home-service-page.css
   so no other page is touched.
   ========================================================================== */

/* ==========================================
   HERO — full-bleed photo, left-aligned copy
   set into a bottom-left scrim like a magazine
   cover, staggered fade-up entrance.
========================================== */

.lf-hero{

    position:relative;

    min-height:94vh;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

    padding-top:120px;

}
.lf-hero__media{

    position:absolute;

    inset:0;

    z-index:0;

}
.lf-hero__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center 38%;

    transform:scale(1.03);

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

    will-change:transform;

}
.lf-hero__scrim{

    position:absolute;

    inset:0;

    z-index:0;

    background:

        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(8,21,45,.9) 0%, rgba(8,21,45,.25) 55%, rgba(8,21,45,0) 75%),

        linear-gradient(0deg, rgba(8,21,45,.92) 0%, rgba(8,21,45,.6) 34%, rgba(8,21,45,.08) 64%, rgba(8,21,45,.18) 100%),

        linear-gradient(100deg, rgba(8,21,45,.72) 0%, rgba(8,21,45,.3) 42%, rgba(8,21,45,0) 66%);

}
.lf-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");

}
.lf-hero__inner{

    position:relative;

    z-index:1;

    padding-bottom:96px;

}
.lf-hero__copy{

    max-width:600px;

}
.lf-hero__tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:9px 18px 9px 14px;

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

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

    background:rgba(8,17,34,.5);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    color:var(--color-white);

    letter-spacing:1.6px;

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:26px;

}
.lf-hero__tag-dot{

    width:7px;

    height:7px;

    flex:none;

    border-radius:50%;

    background:var(--color-gold);

    box-shadow:0 0 0 4px rgba(216,177,75,.22);

}
.lf-hero__copy h1{

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

    font-weight:600;

    font-size:clamp(2.5rem, 4.2vw, 3.6rem);

    line-height:1.18;

    letter-spacing:-.5px;

    color:var(--color-white);

    text-shadow:0 6px 26px rgba(0,0,0,.55);

    margin-bottom:26px;

}
.lf-hero__copy h1 em{

    font-style:italic;

    color:var(--color-gold);

}
.lf-hero__copy p{

    font-size:1.15rem;

    line-height:1.75;

    color:var(--color-text);

    text-shadow:0 2px 14px rgba(0,0,0,.5);

    margin-bottom:16px;

    max-width:540px;

}
.lf-hero__copy p:last-of-type{

    margin-bottom:34px;

}
.lf-hero .hero__buttons{

    justify-content:flex-start;

}
.lf-hero__tag,
.lf-hero__copy h1,
.lf-hero__copy p,
.lf-hero .hero__buttons{

    opacity:0;

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

}
.lf-hero__tag{ animation-delay:.15s; }
.lf-hero__copy h1{ animation-delay:.32s; }
.lf-hero__copy p:nth-of-type(1){ animation-delay:.48s; }
.lf-hero__copy p:nth-of-type(2){ animation-delay:.6s; }
.lf-hero .hero__buttons{ animation-delay:.75s; }

.lf-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:lfHeroFadeUp .8s cubic-bezier(.22,.68,0,1) forwards;

    animation-delay:1s;

}
.lf-hero__scrollcue svg{

    width:16px;

    height:16px;

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

}
@keyframes lfHeroZoom{

    from{ transform:scale(1.03); }

    to{ transform:scale(1.1); }

}
@keyframes lfHeroFadeUp{

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

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

}
@keyframes lfHeroBob{

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

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

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

    .lf-hero{ min-height:auto; padding:130px 0 60px; }

    .lf-hero__inner{ padding-bottom:20px; }

    .lf-hero__scrollcue{ display:none; }

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

    .lf-hero{ padding:70px 0 50px; }

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

    .lf-hero__media img{ animation:none; }

    .lf-hero__tag,
    .lf-hero__copy h1,
    .lf-hero__copy p,
    .lf-hero .hero__buttons,
    .lf-hero__scrollcue,
    .lf-hero__scrollcue svg{

        animation:none;

        opacity:1;

    }

}

/* ==========================================
   SECTION 2 — THE NEW SEARCH
   (white bg, two comparison cards, left card's
   query bubbles auto-swipe through new example
   searches every 4s)
========================================== */

.lf-intent{

    background:var(--color-white);

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

}
.lf-intent__head{

    max-width:720px;

    margin:0 auto 64px;

    text-align:center;

}
.lf-intent__head h2{

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

    font-weight:600;

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

    line-height:1.32;

    letter-spacing:-.5px;

    color:var(--color-background);

    margin-bottom:20px;

}
.lf-intent__head h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.lf-intent__head p{

    font-size:1.1rem;

    line-height:1.8;

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

}
.lf-intent__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:32px;

    align-items:start;

}
.lf-intent__card{

    background:var(--color-white);

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

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

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

    padding:36px 34px;

}
.lf-intent__card-label{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--color-gold);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1.6px;

    text-transform:uppercase;

    margin-bottom:26px;

}
.lf-intent__card-label svg{

    width:18px;

    height:18px;

    flex:none;

}

/* -- left card: rotating intent-search bubbles -- */

.lf-intent__bubbles{

    display:flex;

    flex-direction:column;

    gap:14px;

}
.lf-intent__bubble{

    max-width:88%;

    background:rgba(8,21,45,.04);

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

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

    padding:14px 18px;

    font-size:.98rem;

    font-style:italic;

    line-height:1.5;

    color:var(--color-background);

}
.lf-intent__bubble--right{

    margin-left:auto;

}

/* -- right card: static traditional-search example -- */

.lf-intent__query{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.05rem;

    font-style:italic;

    color:var(--color-background);

    padding-bottom:22px;

    margin-bottom:22px;

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

}
.lf-intent__query svg{

    width:19px;

    height:19px;

    flex:none;

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

}
.lf-intent__note{

    background:rgba(8,21,45,.04);

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

    padding:22px 24px;

}
.lf-intent__note p{

    font-size:.98rem;

    line-height:1.75;

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

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

    .lf-intent__grid{ grid-template-columns:1fr; gap:24px; }

}

/* ==========================================
   SECTION 3 — TRUST THE STORY
   (navy bg, photo + copy split, checklist of
   crucial questions the site must answer)
========================================== */

.lf-story{

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

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

}
.lf-story__grid{

    display:grid;

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

    gap:72px;

    align-items:center;

}
.lf-story__frame{

    position:relative;

    overflow:hidden;

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

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

    aspect-ratio:4/3;

}
.lf-story__frame img{

    width:100%;

    height:100%;

    object-fit:cover;

}
.lf-story__copy h2{

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

    font-weight:600;

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

    line-height:1.3;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:24px;

}
.lf-story__copy h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.lf-story__copy p{

    font-size:1.05rem;

    line-height:1.85;

    color:var(--color-text);

    margin-bottom:40px;

}
.lf-story__q-label{

    display:block;

    color:var(--color-gold);

    letter-spacing:1.6px;

    font-size:.8rem;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:6px;

}
.lf-story__questions ul{

    display:flex;

    flex-direction:column;

}
.lf-story__questions li{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 2px;

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

    font-size:1.02rem;

    color:var(--color-text);

}
.lf-story__questions li svg{

    flex:none;

    width:19px;

    height:19px;

    color:var(--color-gold);

}
.lf-story__questions li.is-strong{

    color:var(--color-white);

    font-weight:700;

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

    .lf-story__grid{ grid-template-columns:1fr; gap:40px; }

}

/* ==========================================
   SECTION 4 — SIX PILLARS
   (white bg, icon grid instead of a plain
   list, glow-framed image filling the full
   column height so the layout never runs out
   of content before it runs out of image)
========================================== */

.lf-pillars{

    background:var(--color-white);

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

}
.lf-pillars__grid{

    display:grid;

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

    gap:80px;

    align-items:stretch;

}
.lf-pillars__copy h2{

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

    font-weight:600;

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

    line-height:1.3;

    letter-spacing:-.5px;

    color:var(--color-background);

    margin-bottom:20px;

}
.lf-pillars__copy h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.lf-pillars__copy > p{

    font-size:1.05rem;

    line-height:1.8;

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

    max-width:560px;

    margin-bottom:44px;

}
.lf-pillars__list{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px 40px;

    margin-bottom:36px;

}
.lf-pillars__item{

    padding:22px 0;

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

    opacity:0;

    transform:translateY(18px);

    transition:opacity .6s ease, transform .6s ease;

}
.lf-pillars__item.is-visible{

    opacity:1;

    transform:translateY(0);

}
.lf-pillars__item:nth-child(1){ transition-delay:0s; }
.lf-pillars__item:nth-child(2){ transition-delay:.08s; }
.lf-pillars__item:nth-child(3){ transition-delay:.16s; }
.lf-pillars__item:nth-child(4){ transition-delay:.24s; }
.lf-pillars__item:nth-child(5){ transition-delay:.32s; }
.lf-pillars__item:nth-child(6){ transition-delay:.4s; }
.lf-pillars__icon{

    width:24px;

    height:24px;

    color:var(--color-gold);

    margin-bottom:14px;

}
.lf-pillars__item h3{

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

    font-weight:600;

    font-size:1.18rem;

    color:var(--color-background);

    margin-bottom:8px;

}
.lf-pillars__item p{

    font-size:.92rem;

    line-height:1.65;

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

}
.lf-pillars__tip{

    display:flex;

    align-items:flex-start;

    gap:16px;

    background:linear-gradient(135deg, rgba(216,177,75,.1), rgba(216,177,75,.03));

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

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

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

    padding:22px 26px;

}
.lf-pillars__tip svg{

    flex:none;

    width:22px;

    height:22px;

    color:var(--color-gold);

    margin-top:2px;

}
.lf-pillars__tip p{

    font-style:italic;

    font-size:.98rem;

    line-height:1.75;

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

}

/* -- media: glow, sticky frame filling the column -- */

.lf-pillars__media{

    position:relative;

    min-height:420px;

    /* .lf-pillars__glow bleeds past this box on purpose (inset:-6%
       -8%) for a soft ambient effect — clip it here so that bleed
       can't push the page itself wider than the viewport. */
    overflow:hidden;

}
.lf-pillars__glow{

    position:absolute;

    inset:-6% -8%;

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

    filter:blur(38px);

    z-index:0;

    pointer-events:none;

}
.lf-pillars__frame{

    position:sticky;

    top:120px;

    z-index:1;

    overflow:hidden;

    height:min(720px, calc(100vh - 160px));

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

    box-shadow:

        inset 0 0 80px rgba(0,0,0,.25),

        0 40px 90px rgba(8,21,45,.28);

}
.lf-pillars__frame img{

    width:100%;

    height:100%;

    object-fit:cover;

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

    will-change:transform;

}
@keyframes lfPillarsZoom{

    from{ transform:scale(1); }

    to{ transform:scale(1.07); }

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

    .lf-pillars__grid{ grid-template-columns:1fr; gap:48px; }

    .lf-pillars__media{ min-height:0; }

    .lf-pillars__frame{ position:relative; top:0; height:auto; aspect-ratio:16/10; }

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

    .lf-pillars__list{ grid-template-columns:1fr; gap:0; }

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

    .lf-pillars__item{ transition:none; opacity:1; transform:none; }

    .lf-pillars__frame img{ animation:none; }

}

/* ==========================================
   SECTION 5 — TRADITIONAL SEARCH VS. AI
   CONVERSATION
   (navy bg, glass cards; the AI Conversation
   thread auto-swipes to a new scenario every
   4s, the Traditional Search list stays put)
========================================== */

.lf-compare{

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

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

}
.lf-compare__head{

    max-width:680px;

    margin:0 auto 60px;

    text-align:center;

}
.lf-compare__head h2{

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

    font-weight:600;

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

    line-height:1.3;

    letter-spacing:-.5px;

    color:var(--color-white);

    margin-bottom:16px;

}
.lf-compare__head h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.lf-compare__head p{

    font-size:1.1rem;

    color:var(--color-text);

}
.lf-compare__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:32px;

    margin-bottom:64px;

}
.lf-compare__card{

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

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

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

    padding:32px 30px;

}
.lf-compare__card--ai{

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

    box-shadow:0 30px 70px rgba(0,0,0,.25);

}
.lf-compare__label{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--color-gold);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1.6px;

    text-transform:uppercase;

    margin-bottom:24px;

}
.lf-compare__label svg{

    width:18px;

    height:18px;

    flex:none;

}

/* -- left: traditional search list -- */

.lf-compare__list{

    display:flex;

    flex-direction:column;

    gap:12px;

}
.lf-compare__list li{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 18px;

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

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

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

    font-size:1rem;

    color:var(--color-text);

}
.lf-compare__list li svg{

    flex:none;

    width:16px;

    height:16px;

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

}

/* -- right: rotating AI conversation thread -- */

.lf-compare__thread{

    display:flex;

    flex-direction:column;

    gap:12px;

}
.lf-compare__msg{

    max-width:90%;

    padding:14px 18px;

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

    font-size:.96rem;

    line-height:1.55;

    transition:opacity .4s ease, transform .4s ease;

}
.lf-compare__msg--user{

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

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

    color:var(--color-white);

    font-style:italic;

}
.lf-compare__msg--reply{

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

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

    color:var(--color-text);

    margin-left:auto;

}
.lf-compare__msg--reply:nth-of-type(2){ max-width:82%; }
.lf-compare__msg--reply:nth-of-type(3){ max-width:74%; }
.lf-compare__msg.is-swiping{

    opacity:0;

    transform:translateY(6px);

}

/* -- closing statement -- */

.lf-compare__closing{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}
.lf-compare__lead{

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

    font-weight:600;

    font-size:1.35rem;

    line-height:1.5;

    color:var(--color-white);

    margin-bottom:28px;

}
.lf-compare__closing p:not(.lf-compare__lead){

    font-size:1.02rem;

    line-height:1.85;

    color:var(--color-text);

}
.lf-compare__closing p:not(.lf-compare__lead) + p{

    margin-top:18px;

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

    .lf-compare__grid{ grid-template-columns:1fr; gap:24px; }

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

    .lf-compare__msg{ transition:none; }

    .lf-compare__msg.is-swiping{ opacity:1; transform:none; }

}

/* ==========================================
   SECTION 6 — FINAL CTA
   (white bg, soft gold glow for warmth instead
   of a flat close to the page)
========================================== */

.lf-cta{

    position:relative;

    background:var(--color-white);

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

    overflow:hidden;

}
.lf-cta__glow{

    position:absolute;

    top:50%;

    left:50%;

    width:900px;

    height:520px;

    transform:translate(-50%,-50%);

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

    filter:blur(10px);

    z-index:0;

    pointer-events:none;

}
.lf-cta__inner{

    position:relative;

    z-index:1;

    max-width:720px;

    margin:0 auto;

    text-align:center;

    opacity:0;

    transform:translateY(24px);

    transition:opacity .7s ease, transform .7s ease;

}
.lf-cta__inner.is-visible{

    opacity:1;

    transform:translateY(0);

}
.lf-cta__inner h2{

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

    font-weight:600;

    font-size:clamp(2.1rem, 3.8vw, 2.9rem);

    line-height:1.28;

    letter-spacing:-.5px;

    color:var(--color-background);

    margin-bottom:22px;

}
.lf-cta__inner h2 em{

    font-style:italic;

    color:var(--color-gold);

}
.lf-cta__inner p{

    font-size:1.1rem;

    line-height:1.8;

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

    max-width:600px;

    margin:0 auto 40px;

}
.lf-cta .hero__buttons{

    justify-content:center;

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

    .lf-cta__inner{ transition:none; opacity:1; transform:none; }

}