/* ============ TOKENS ============ */
:root{
    --bg:#0a0a0b;
    --bg-2:#111114;
    --bg-3:#17171b;
    --ink:#f3f0ea;
    --muted:#9a958c;
    --line:#26262c;
    --accent:#c8312b;      /* blood red */
    --accent-2:#d9b26a;    /* gold */
    --r:14px;
    --maxw:1240px;
    --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#fff}

h1,h2,h3{font-family:'Bebas Neue',sans-serif;font-weight:400;line-height:.95;letter-spacing:.02em}

/* ============ BUTTONS ============ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:15px 30px;border-radius:50px;font-weight:600;font-size:.86rem;
    letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;
    transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s;
}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:#e23b34;transform:translateY(-3px)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
.btn--full{width:100%}

/* ============ NAV ============ */
.nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px clamp(20px,5vw,56px);
    transition:background .4s,padding .4s,border-color .4s;
    border-bottom:1px solid transparent;
}
.nav.is-scrolled{background:rgba(10,10,11,.82);backdrop-filter:blur(14px);padding:14px clamp(20px,5vw,56px);border-color:var(--line)}
.nav__brand{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:.06em}
.nav__brand span{color:var(--accent)}
.nav__links{display:flex;align-items:center;gap:34px}
.nav__links a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .25s}
.nav__links a:hover{color:var(--ink)}
.nav__cta{padding:11px 24px;border:1px solid var(--accent);border-radius:50px;color:var(--ink)!important}
.nav__cta:hover{background:var(--accent)}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:26px;height:2px;background:var(--ink);transition:.3s}

/* ============ HERO ============ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    padding:130px clamp(20px,5vw,56px) 50px;overflow:hidden;
    background:radial-gradient(120% 80% at 80% -10%,rgba(200,49,43,.10) 0%,transparent 55%),var(--bg)}
/* full-bleed opening video */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    filter:grayscale(.35) contrast(1.06) brightness(.85)}
.hero__overlay{position:absolute;inset:0;z-index:0;
    background:
        radial-gradient(120% 90% at 30% 20%,transparent 30%,rgba(10,10,11,.65) 100%),
        linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.4) 45%,rgba(10,10,11,.97) 100%)}
/* oversized ghost wordmark bleeding off the edge */
.hero__ghost{position:absolute;right:-4vw;bottom:-6vh;z-index:1;pointer-events:none;
    font-family:'Bebas Neue',sans-serif;font-size:42vw;line-height:.7;color:transparent;
    -webkit-text-stroke:1px rgba(243,240,234,.05);letter-spacing:.01em}
.hero__inner{position:relative;z-index:1;width:100%}
.hero__content{max-width:760px}
.hero__title{font-size:clamp(3.2rem,10vw,8.4rem);text-shadow:0 8px 40px rgba(0,0,0,.5)}
.hero__title em{display:inline-block}
.hero__sub{max-width:480px;color:#d7d2c9;font-size:1.05rem;margin:24px 0 36px;
    font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-style:italic}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}
.hero__stats{position:relative;z-index:1;display:flex;gap:clamp(28px,6vw,72px);margin-top:auto;padding-top:54px}
.hero__stats div{display:flex;flex-direction:column}
.hero__stats strong{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3rem);color:var(--ink);line-height:1}
.hero__stats span{color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}

/* ============ MARQUEE ============ */
.marquee{background:var(--accent);overflow:hidden;padding:14px 0;white-space:nowrap}
.marquee__track{display:inline-flex;animation:scroll 28s linear infinite}
.marquee__track span{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.1em;color:#fff;padding-right:30px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(70px,11vw,140px) clamp(20px,5vw,56px)}
.section__head{max-width:680px;margin-bottom:54px}
.kicker{color:var(--accent);letter-spacing:.28em;text-transform:uppercase;font-size:.74rem;font-weight:600;margin-bottom:16px}
.section__title{font-size:clamp(2.6rem,6vw,4.6rem)}
.section__lead{color:var(--muted);font-size:1.05rem;margin-top:18px;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.3rem}

/* ============ FILTERS ============ */
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.filter{background:var(--bg-2);border:1px solid var(--line);color:var(--muted);
    padding:10px 22px;border-radius:50px;cursor:pointer;font-size:.8rem;letter-spacing:.06em;
    text-transform:uppercase;transition:.25s}
.filter:hover{color:var(--ink);border-color:var(--ink)}
.filter.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ============ GALLERY ============ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;grid-auto-flow:dense}
.tile{position:relative;overflow:hidden;border-radius:var(--r);cursor:pointer;background:var(--bg-2);aspect-ratio:1}
.tile.tall{grid-row:span 2;aspect-ratio:1/2}
.tile.wide{grid-column:span 2;aspect-ratio:2/1}
.tile img{transition:transform .7s var(--ease);filter:grayscale(.25)}
.tile:hover img{transform:scale(1.08);filter:grayscale(0)}
.tile__meta{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
    padding:18px;background:linear-gradient(transparent 45%,rgba(0,0,0,.8));opacity:0;transition:opacity .35s}
.tile:hover .tile__meta{opacity:1}
.tile__meta strong{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:.03em}
.tile.is-hidden{display:none}
.tile--new{opacity:0;transform:translateY(20px)}

/* load more */
.gallery__more{display:flex;justify-content:center;margin-top:38px}
.gallery__more .btn{letter-spacing:.12em}
.gallery__more .btn:disabled{opacity:.55;cursor:default;border-color:var(--line);transform:none;color:var(--accent-2)}

/* ============ ARTISTS ============ */
.artist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.artist{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .4s var(--ease),border-color .4s}
.artist:hover{transform:translateY(-8px);border-color:var(--accent)}
.artist__img{aspect-ratio:6/7;overflow:hidden}
.artist__img img{filter:grayscale(.5);transition:.6s}
.artist:hover .artist__img img{filter:grayscale(0);transform:scale(1.05)}
.artist__body{padding:26px}
.artist__body h3{font-size:1.9rem}
.artist__role{color:var(--accent-2);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;margin:6px 0 14px}
.artist__bio{color:var(--muted);font-size:.94rem}
.artist__social{display:flex;gap:14px;margin-top:18px}
.artist__social a{font-size:.74rem;letter-spacing:.1em;color:var(--ink);border:1px solid var(--line);padding:6px 14px;border-radius:50px;transition:.25s}
.artist__social a:hover{background:var(--ink);color:var(--bg)}

/* ============ SERVICES ============ */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{position:relative;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
    padding:38px;overflow:hidden;transition:.4s var(--ease)}
.card:hover{background:var(--bg-3);transform:translateY(-6px)}
.card h3{font-size:1.8rem;margin-bottom:12px}
.card p{color:var(--muted);max-width:42ch}
.card__price{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--ink)!important;margin-top:22px;letter-spacing:.03em}
.card__price small{font-size:.9rem;color:var(--muted);font-family:'Inter';letter-spacing:0}

/* ============ PROCESS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{padding:34px 26px;border-top:2px solid var(--line);transition:border-color .4s}
.step:hover{border-color:var(--accent)}
.step span{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;color:var(--accent)}
.step h3{font-size:1.6rem;margin:10px 0 10px}
.step p{color:var(--muted);font-size:.92rem}

/* ============ TESTIMONIALS ============ */
.quotes{background:var(--bg-2);max-width:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.quotes__inner{max-width:840px;margin:0 auto;text-align:center}
.quotes__mark{font-family:'Cormorant Garamond',serif;font-size:6rem;color:var(--accent);line-height:.4;height:50px}
.quotes blockquote{font-family:'Cormorant Garamond',serif;font-size:clamp(1.5rem,3.4vw,2.3rem);
    font-style:italic;line-height:1.4;min-height:3.6em;transition:opacity .4s}
.quotes__author{color:var(--accent-2);letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;margin-top:22px}
.quotes__dots{display:flex;gap:10px;justify-content:center;margin-top:28px}
.quotes__dots button{width:9px;height:9px;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:.3s}
.quotes__dots button.is-active{background:var(--accent);transform:scale(1.3)}

/* ============ BOOK ============ */
.book__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.book__contact{list-style:none;margin-top:34px;display:grid;gap:18px}
.book__contact li{display:flex;flex-direction:column;border-left:2px solid var(--accent);padding-left:16px}
.book__contact strong{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.book__contact li{color:var(--ink);font-size:1.05rem}
.book__form{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:36px;display:grid;gap:22px}
.field{position:relative}
.field input,.field select,.field textarea{
    width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
    color:var(--ink);padding:18px 16px 8px;font-family:inherit;font-size:.96rem;transition:border-color .25s;resize:vertical}
.field textarea{padding-top:22px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field label{position:absolute;left:16px;top:15px;color:var(--muted);font-size:.95rem;pointer-events:none;transition:.2s var(--ease)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
    top:6px;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.field .label--static{top:6px;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2)}
.field select{color:var(--ink);appearance:none}
.field select option{background:var(--bg-2)}
.book__note{font-size:.85rem;color:var(--accent-2);min-height:1em;text-align:center}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--line);padding:60px clamp(20px,5vw,56px) 36px;max-width:var(--maxw);margin:0 auto}
.footer__top{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line)}
.footer__links{display:flex;gap:26px}
.footer__links a,.footer__social a{color:var(--muted);font-size:.84rem;letter-spacing:.08em;text-transform:uppercase;transition:color .25s}
.footer__links a:hover,.footer__social a:hover{color:var(--ink)}
.footer__social{display:flex;gap:22px}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:26px;color:var(--muted);font-size:.8rem}

/* ============ LIGHTBOX ============ */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(7,7,8,.95);backdrop-filter:blur(6px);
    display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:88vw;max-height:84vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox__close{position:absolute;top:24px;right:30px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);
    border:0;color:#fff;font-size:2.4rem;width:56px;height:56px;border-radius:50%;cursor:pointer;transition:background .25s}
.lightbox__nav:hover{background:var(--accent)}
.lightbox__prev{left:24px}
.lightbox__next{right:24px}

/* ============ REVEAL ANIM ============ */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ============ ARTSY LAYER ============ */
/* film grain over everything */
.grain{
    position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
    animation:grain 700ms steps(4) infinite;mix-blend-mode:overlay;
}
@keyframes grain{
    0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}
    50%{transform:translate(4%,-6%)}75%{transform:translate(-4%,-4%)}100%{transform:translate(6%,6%)}
}

/* ghost watermark word behind section titles */
.section__head{position:relative;overflow:visible}
.section__head[data-ghost]::before{
    content:attr(data-ghost);
    position:absolute;left:-.06em;top:-.62em;z-index:-1;
    font-family:'Bebas Neue',sans-serif;font-size:clamp(7rem,20vw,17rem);line-height:.8;
    color:transparent;-webkit-text-stroke:1px rgba(243,240,234,.05);
    pointer-events:none;white-space:nowrap;letter-spacing:.02em;
}

/* serif italic accent inside display headings */
.section__title em,.hero__title em{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;
    color:var(--accent-2);letter-spacing:0;
}

/* gallery tiles: duotone-ish grade, lift on hover */
.tile{transition:transform .5s var(--ease),opacity .5s var(--ease)}
.tile:hover{transform:translateY(-4px)}
.tile img{filter:grayscale(.45) contrast(1.05) brightness(.95)}
.tile:hover img{filter:grayscale(0) contrast(1.02) brightness(1)}

/* artist cards: mono-to-color on hover */
.artist__img{position:relative}
.artist__img img{filter:grayscale(.65) contrast(1.05)}
.artist:hover .artist__img img{filter:grayscale(0)}

/* hero eyebrow as serif italic accent */
.hero__eyebrow{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;
    letter-spacing:.14em;color:var(--accent-2);margin-bottom:20px}

/* decorative hairline divider used between sections */
.section + .section{position:relative}
.section + .section::before{
    content:'✦';position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
    color:var(--accent);font-size:.8rem;background:var(--bg);padding:0 14px;
}
.section + .section{border-top:1px solid var(--line)}

/* ============ RESPONSIVE ============ */
/* Desktop (>980px) is intentionally left untouched. */

/* ---- Tablet landscape (≤980): iPad Pro / iPad landscape ---- */
@media(max-width:980px){
    .gallery{grid-template-columns:repeat(3,1fr)}
    .steps{grid-template-columns:repeat(2,1fr)}
}

/* ---- Tablet portrait + large phones (≤900): hamburger nav ---- */
@media(max-width:900px){
    .nav{padding:18px clamp(18px,5vw,40px)}
    .nav.is-scrolled{padding:12px clamp(18px,5vw,40px)}
    .nav__links{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--bg-2);
        flex-direction:column;justify-content:center;align-items:flex-start;gap:26px;padding:40px;
        transform:translateX(100%);transition:transform .4s var(--ease);
        border-left:1px solid var(--line);z-index:55}
    .nav__links.is-open{transform:none;box-shadow:-24px 0 60px rgba(0,0,0,.5)}
    .nav__links a{font-size:1.15rem}
    .nav__cta{align-self:flex-start}
    .nav__burger{display:flex;z-index:60}
    .nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav__burger.is-open span:nth-child(2){opacity:0}
    .nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    /* iPad portrait still has room for 2-up services/steps but stack the booking */
    .book__grid{grid-template-columns:1fr;gap:40px}
}

/* ---- iPad: center the hero block and drop the buttons down a touch ---- */
@media(min-width:641px) and (max-width:980px){
    .hero__inner{display:flex;justify-content:center}
    .hero__content{max-width:640px;text-align:center}
    .hero__sub{margin:24px auto 30px}
    .hero__actions{margin-top:120px;justify-content:center}
    .hero__stats{justify-content:center}
}

/* ---- Phones (≤640) ---- */
@media(max-width:640px){
    .hero{min-height:100svh;padding:118px 22px 44px}
    .hero__title{font-size:clamp(2.9rem,13vw,5rem)}
    .hero__sub{font-size:1.15rem;margin:20px 0 30px}
    .hero__actions{gap:12px}
    .hero__actions .btn{flex:1 1 auto;text-align:center}
    .hero__stats{gap:8px;padding-top:40px}
    .hero__stats div{flex:1 1 30%}
    .hero__stats strong{font-size:1.9rem}
    .hero__stats span{font-size:.66rem}
    .marquee__track span{font-size:1.2rem;padding-right:24px}
    .section{padding:64px 22px}
    .section__head{margin-bottom:36px}
    .section__head[data-ghost]::before{font-size:33vw;top:-.5em}
    .gallery{grid-template-columns:repeat(2,1fr);gap:10px}
    .tile.wide{grid-column:span 2}
    .tile.tall{grid-row:span 2}
    .cards,.steps{grid-template-columns:1fr}
    .book__form{padding:26px}
    /* all three artists stay side by side, compact portrait cards */
    .artist-grid{grid-template-columns:repeat(3,1fr);gap:9px}
    .artist__body{padding:11px 10px 14px}
    .artist__body h3{font-size:1.15rem;line-height:1}
    .artist__role{font-size:.5rem;letter-spacing:.05em;margin:5px 0 0}
    .artist__bio,.artist__social{display:none}
    .quotes blockquote{min-height:5em}
    .footer__top{flex-direction:column;align-items:flex-start;gap:22px}
    .footer__bottom{flex-direction:column;gap:6px}
}

/* ---- Small phones (≤430) ---- */
@media(max-width:430px){
    .gallery{grid-template-columns:1fr}
    .tile,.tile.wide,.tile.tall{grid-column:auto;grid-row:auto;aspect-ratio:4/5}
    .hero__title{font-size:clamp(2.6rem,14vw,4rem)}
    .lightbox__nav{width:46px;height:46px;font-size:2rem}
    .lightbox__prev{left:10px}
    .lightbox__next{right:10px}
    .lightbox__close{top:16px;right:18px}
}

/* ---- Touch devices: no hover state, so reveal color + captions ---- */
@media(hover:none){
    .tile img,.artist__img img{filter:grayscale(0) contrast(1.03)}
    .tile__meta{opacity:1;background:linear-gradient(transparent 52%,rgba(0,0,0,.72))}
    .hero__video{filter:grayscale(.25) contrast(1.05) brightness(.85)}
}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
    /* keep the brand marquee scrolling even with Reduce Motion / Low Power Mode */
    .marquee__track{animation:scroll 28s linear infinite!important}
}