/* ==========================================================================
   Ineq Utrian — Design System
   Palette, typography and layout per approved art direction.
   ========================================================================== */

:root{
    --bg:#101012;
    --surface:#1A1A1D;
    --text:#F3F1EC;
    --muted:#9A968D;
    --accent:#C7A464;
    --font-display:'Fraunces', serif;
    --font-body:'Manrope', sans-serif;
    --container-width:1200px;
    --gap:2rem;
    --transition-slow: 900ms cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-weight:400;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}

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

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

.container{
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 1.5rem;
}

.sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
    position:absolute; left:-999px; top:0; background:var(--accent); color:var(--bg);
    padding:.75rem 1.25rem; z-index:1000;
}
.skip-link:focus{ left:1rem; top:1rem; }

h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:500;
    line-height:1.08;
    margin:0 0 1rem;
    letter-spacing:-0.01em;
}

p{ margin:0 0 1rem; }

.muted{ color:var(--muted); }
.small{ font-size:.85rem; }

.eyebrow{
    display:inline-block;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.72rem;
    font-weight:600;
    color:var(--accent);
    margin-bottom:1rem;
}

.display-xl{ font-size:clamp(2.6rem,6vw,5.4rem); }
.display-lg{ font-size:clamp(2rem,4.2vw,3.4rem); }
.display-md{ font-size:clamp(1.6rem,3vw,2.4rem); }

.lead{ font-size:1.15rem; color:var(--text); max-width:44ch; }

.gold-line{
    height:1px;
    width:100%;
    background:linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
    opacity:.7;
}

.btn{
    display:inline-block;
    padding:.9rem 1.9rem;
    font-family:var(--font-body);
    font-weight:600;
    font-size:.9rem;
    letter-spacing:.04em;
    text-transform:uppercase;
    border:1px solid var(--accent);
    transition:background var(--transition-slow), color var(--transition-slow);
}
.btn-solid{
    background:var(--accent);
    color:var(--bg);
}
.btn-solid:hover, .btn-solid:focus{
    background:transparent;
    color:var(--accent);
}
.btn-outline{
    background:transparent;
    color:var(--text);
}
.btn-outline:hover, .btn-outline:focus{
    background:var(--accent);
    color:var(--bg);
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header{
    position:relative;
    background:var(--bg);
    z-index:100;
}
.site-header__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.4rem 1.5rem;
}
.wordmark{
    font-family:var(--font-display);
    font-size:1.35rem;
    letter-spacing:.03em;
    color:var(--text);
}
.wordmark--footer{ margin-bottom:.4rem; }

.primary-nav ul{
    list-style:none;
    display:flex;
    gap:2rem;
    margin:0;
    padding:0;
}
.primary-nav a{
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:600;
    color:var(--muted);
    padding-bottom:.35rem;
    border-bottom:1px solid transparent;
    transition:color 300ms ease, border-color 300ms ease;
}
.primary-nav a:hover,
.primary-nav a:focus,
.primary-nav a.is-active{
    color:var(--text);
    border-color:var(--accent);
}

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:34px;
    height:34px;
    background:none;
    border:none;
    cursor:pointer;
}
.nav-toggle span{
    display:block;
    height:1px;
    background:var(--text);
    width:100%;
}

@media (max-width:900px){
    .nav-toggle{ display:flex; }
    .primary-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--surface);
        max-height:0;
        overflow:hidden;
        transition:max-height 400ms ease;
    }
    .primary-nav.is-open{ max-height:400px; }
    .primary-nav ul{
        flex-direction:column;
        gap:0;
        padding:1rem 1.5rem 1.5rem;
    }
    .primary-nav li{ border-bottom:1px solid rgba(199,164,100,.15); }
    .primary-nav a{
        display:block;
        padding:1rem 0;
        border-bottom:none;
    }
}

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
[data-reveal]{
    opacity:0;
    transform:translateY(24px);
    transition:opacity var(--transition-slow), transform var(--transition-slow);
}
[data-reveal].is-visible{
    opacity:1;
    transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
    [data-reveal]{ opacity:1; transform:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
    position:relative;
    min-height:78vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--bg);
}
.hero__media{
    position:absolute;
    inset:0;
    z-index:1;
}
.hero__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(.72) saturate(1.02);
}
.hero__media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(16,16,18,.15) 0%, rgba(16,16,18,.55) 55%, rgba(16,16,18,.92) 100%);
}
.hero__content{
    position:relative;
    z-index:2;
    max-width:560px;
    padding:3.5rem 2rem 4.5rem;
    border-left:1px solid var(--accent);
    margin-left:1.5rem;
}
@media (max-width:700px){
    .hero{ min-height:82vh; align-items:flex-end; }
    .hero__content{ margin-left:0; padding:2.2rem 1.5rem 3rem; border-left:none; border-top:1px solid var(--accent); }
}
.hero h1{ margin-bottom:1.2rem; }

/* ==========================================================================
   Statement / Offer — asymmetric editorial split
   ========================================================================== */
.split{
    padding:7rem 0;
    background:var(--bg);
}
.split__grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:clamp(2rem,5vw,5rem);
    align-items:center;
}
.split--reverse .split__grid{
    grid-template-columns:1.1fr 0.9fr;
}
.split--reverse .split__text{ order:2; }
.split--reverse .split__media{ order:1; }
.split__text{ max-width:46ch; }
.split__media{ position:relative; }
.split__media img{ width:100%; height:auto; }
.split__media figcaption{
    margin-top:1rem;
    font-size:.82rem;
    color:var(--muted);
    letter-spacing:.03em;
}
@media (max-width:900px){
    .split{ padding:4.5rem 0; }
    .split__grid, .split--reverse .split__grid{
        grid-template-columns:1fr;
    }
    .split--reverse .split__text,
    .split--reverse .split__media{ order:initial; }
}

/* ==========================================================================
   Fullbleed
   ========================================================================== */
.fullbleed{
    position:relative;
    min-height:64vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
}
.fullbleed img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(.68);
}
.fullbleed__caption{
    position:relative;
    z-index:2;
    padding:3rem clamp(1.5rem,6vw,5rem);
    max-width:640px;
}
.fullbleed__caption p{
    font-family:var(--font-display);
    font-size:clamp(1.3rem,2.4vw,2rem);
    color:var(--text);
    margin:0;
}

/* ==========================================================================
   Craft — portrait split
   ========================================================================== */
.craft{
    padding:7rem 0;
}
.craft__grid{
    display:grid;
    grid-template-columns:1fr 0.7fr;
    gap:clamp(2rem,5vw,4rem);
    align-items:start;
}
.craft__media img{
    width:100%;
    height:auto;
}
.craft__text{
    max-width:48ch;
    padding-top:1rem;
}
@media (max-width:900px){
    .craft{ padding:4.5rem 0; }
    .craft__grid{ grid-template-columns:1fr; }
    .craft__media{ order:-1; max-width:340px; margin:0 auto 2rem; }
}

/* ==========================================================================
   Gallery — staggered filmstrip
   ========================================================================== */
.gallery{
    padding:7rem 0;
    background:var(--surface);
}
.gallery__intro{
    max-width:52ch;
    margin-bottom:3.5rem;
}
.gallery__grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:1.5rem;
}
.gallery__frame{
    position:relative;
    overflow:hidden;
}
.gallery__frame img{ width:100%; height:100%; object-fit:cover; }
.gallery__frame figcaption{
    margin-top:.8rem;
    font-size:.78rem;
    letter-spacing:.05em;
    color:var(--muted);
    text-transform:uppercase;
}
.gallery__frame--a{ grid-column:1 / span 7; grid-row:1; }
.gallery__frame--b{ grid-column:8 / span 5; grid-row:1; margin-top:3.5rem; }
.gallery__frame--c{ grid-column:2 / span 6; grid-row:2; margin-top:2rem; }
@media (max-width:900px){
    .gallery{ padding:4.5rem 0; }
    .gallery__grid{ grid-template-columns:1fr; }
    .gallery__frame--a,.gallery__frame--b,.gallery__frame--c{
        grid-column:1; grid-row:auto; margin-top:0;
    }
    .gallery__frame + .gallery__frame{ margin-top:2rem; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{
    padding:7rem 0;
}
.faq__intro{ max-width:50ch; margin-bottom:2.5rem; }
.faq__list{
    border-top:1px solid rgba(199,164,100,.25);
}
.faq__item{
    border-bottom:1px solid rgba(199,164,100,.25);
    padding:1.4rem 0;
}
.faq__item summary{
    cursor:pointer;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-family:var(--font-display);
    font-size:1.1rem;
    color:var(--text);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{
    content:"+";
    font-size:1.4rem;
    color:var(--accent);
    margin-left:1rem;
    transition:transform 300ms ease;
}
.faq__item[open] summary::after{ content:"–"; }
.faq__item p{
    margin-top:1rem;
    max-width:60ch;
    color:var(--muted);
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta{
    padding:6rem 0;
    background:var(--surface);
    text-align:left;
    position:relative;
}
.cta__inner{
    max-width:620px;
}
.cta h2{ margin-bottom:1rem; }
.cta .btn{ margin-top:1rem; }

/* ==========================================================================
   Generic page banner (about/services/process/contacts/privacy)
   ========================================================================== */
.page-banner{
    padding:5.5rem 0 3.5rem;
    border-bottom:1px solid rgba(199,164,100,.2);
}
.page-banner .eyebrow{ margin-bottom:1.2rem; }
.page-banner p.lead{ margin-top:1rem; }

.content-section{
    padding:5rem 0;
}
.content-section + .content-section{
    border-top:1px solid rgba(199,164,100,.12);
}
.content-section__grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:clamp(2rem,5vw,4rem);
}
@media (max-width:900px){
    .content-section__grid{ grid-template-columns:1fr; }
}

.steps{
    list-style:none;
    margin:0;
    padding:0;
    counter-reset:step;
    display:grid;
    gap:2.5rem;
}
.steps li{
    counter-increment:step;
    position:relative;
    padding-left:3.5rem;
    border-top:1px solid rgba(199,164,100,.2);
    padding-top:1.6rem;
}
.steps li::before{
    content:counter(step,decimal-leading-zero);
    position:absolute;
    left:0;
    top:1.6rem;
    font-family:var(--font-display);
    font-size:1.4rem;
    color:var(--accent);
}
.steps h3{ margin-bottom:.5rem; }

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
}
@media (max-width:900px){
    .contact-grid{ grid-template-columns:1fr; }
}
.contact-card{
    padding:2rem;
    background:var(--surface);
    border:1px solid rgba(199,164,100,.2);
}
.contact-card address{ font-style:normal; line-height:1.8; }

.legal-block{ max-width:74ch; }
.legal-block h2{ margin-top:2.5rem; }
.legal-block h2:first-child{ margin-top:0; }

/* Footer */
.site-footer{ background:var(--bg); padding-top:3.5rem; }
.footer__grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:2.5rem;
    padding-bottom:2.5rem;
}
.footer__nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer__nav a{ color:var(--muted); font-size:.9rem; }
.footer__nav a:hover{ color:var(--accent); }
.footer__contact address{ font-style:normal; color:var(--muted); margin-bottom:.6rem; line-height:1.7; }
.footer__contact a{ color:var(--text); }
.footer__contact a:hover{ color:var(--accent); }
.footer__bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 1.5rem 2rem;
    border-top:1px solid rgba(199,164,100,.15);
    flex-wrap:wrap;
    gap:.5rem;
}
@media (max-width:700px){
    .footer__grid{ grid-template-columns:1fr; }
}
/* Landing Factory generated brand lockup */
.lf-brand-lockup{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}.lf-brand-lockup img{display:block;width:auto;height:44px;max-width:min(260px,48vw);object-fit:contain}@media(max-width:700px){.lf-brand-lockup img{height:36px;max-width:54vw}}