/* Loves1stSite Web Designs — storefront v2 shared styles
   Dark/gold identity. Techy, clean, sharp. Mobile-first. */
:root{
  --bg:#0a0a0e; --bg2:#101016; --panel:#14141c; --panel2:#191922;
  --line:#26262f; --ink:#f4f1ea; --mut:#a9a49a; --dim:#7c776c;
  --gold:#c9a24b; --gold2:#e8c877; --gold-deep:#8a6d2a;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --rad:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--gold);color:#14100a}
img{max-width:100%;display:block}
a{color:var(--gold2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);flex:none}
h1,h2,h3{line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
h2{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:800;margin:.35em 0 .45em}
h2 .g, h1 .g{color:var(--gold2)}
.lede{color:var(--mut);font-size:clamp(1rem,1.6vw,1.13rem);max-width:620px;line-height:1.68}
section{padding:clamp(76px,10vw,118px) 0}
.btn{display:inline-flex;align-items:center;gap:.5em;background:var(--gold);color:#14100a;font-weight:800;
  padding:.85em 1.5em;border-radius:999px;text-decoration:none;font-size:.98rem;border:1px solid var(--gold);
  transition:transform .35s cubic-bezier(.22,1,.36,1),background .35s ease,color .35s ease,box-shadow .35s ease,border-color .35s ease}
.btn:hover{transform:translateY(-1px);background:var(--gold2);box-shadow:0 12px 32px rgba(201,162,75,.22)}
.btn.ghost{background:transparent;color:var(--ink);border-color:#3d3d4a}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold2);box-shadow:0 12px 28px rgba(0,0,0,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- top bar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:18px;
  padding:13px 22px;background:rgba(10,10,14,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.topbar.scrolled{border-bottom-color:var(--line);box-shadow:0 12px 34px rgba(0,0,0,.45)}
.brand{color:var(--ink);text-decoration:none;font-weight:900;letter-spacing:.01em;font-size:1.02rem;line-height:1.1;margin-right:auto}
.brand b{color:var(--gold)}
.brand small{display:block;font-weight:600;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.nav{display:none;gap:24px}
.nav a{color:var(--mut);text-decoration:none;font-size:.9rem;font-weight:600;position:relative;padding-bottom:4px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.nav a:hover{color:var(--gold2)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current="page"]{color:var(--gold2)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.callbtn{background:var(--gold);color:#14100a;text-decoration:none;font-weight:800;font-size:.88rem;padding:.6em 1.15em;border-radius:999px;white-space:nowrap}
@media(min-width:900px){.nav{display:flex}}

/* ---------- mobile action bar ---------- */
.mobilebar{position:fixed;inset:auto 12px 12px 12px;z-index:55;display:flex;gap:10px;
  background:rgba(16,16,22,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:999px;padding:8px;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.mobilebar a{flex:1;text-align:center;text-decoration:none;font-weight:800;font-size:.92rem;padding:.7em 0;border-radius:999px}
.mobilebar .mb-call{background:var(--gold);color:#14100a}
.mobilebar .mb-demo{background:transparent;color:var(--ink);border:1px solid #3d3d4a}
@media(min-width:900px){.mobilebar{display:none}}
@media(max-width:899px){body{padding-bottom:76px}}

/* ---------- hero (home, cinematic film) ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:150px 0 74px;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#07070b}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media video{opacity:0;transition:opacity 1.2s ease;animation:herodrift 28s ease-in-out infinite alternate}
.hero-media video.on{opacity:1}
@keyframes herodrift{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero .wrap>*{animation:rise 1.15s cubic-bezier(.22,1,.36,1) both}
.hero .wrap>*:nth-child(2){animation-delay:.14s}
.hero .wrap>*:nth-child(3){animation-delay:.27s}
.hero .wrap>*:nth-child(4){animation-delay:.4s}
.hero .wrap>*:nth-child(5){animation-delay:.53s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-media .grid{position:absolute;inset:0;background:
  linear-gradient(rgba(244,241,234,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(244,241,234,.045) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(75% 65% at 50% 42%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(75% 65% at 50% 42%,#000 30%,transparent 78%)}
.hero-shade{position:absolute;inset:auto 0 0 0;height:52%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(10,10,14,.94))}
.hero h1{font-family:"Marcellus",var(--serif);font-size:clamp(2.6rem,7.2vw,5.1rem);font-weight:400;letter-spacing:.012em;line-height:1.08;max-width:15ch;margin:.28em 0 .3em}
.hero h1 em{font-family:inherit;font-style:normal;font-weight:400;color:var(--gold2);letter-spacing:inherit}
.hero .lede{max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;color:var(--mut);font-size:.9rem;font-weight:600}
.hero-proof span::before{content:"—";color:var(--gold);margin-right:9px}

/* ---------- interior page hero ---------- */
.phero{position:relative;padding:172px 0 72px;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(58% 90% at 82% 0%,rgba(201,162,75,.16),transparent 60%),
             radial-gradient(40% 70% at 8% 100%,rgba(70,64,120,.20),transparent 65%),
             linear-gradient(160deg,#12121a,#0a0a0e 62%)}
.phero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(244,241,234,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(244,241,234,.035) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(70% 80% at 50% 30%,#000 25%,transparent 75%);
  -webkit-mask-image:radial-gradient(70% 80% at 50% 30%,#000 25%,transparent 75%);pointer-events:none}
.phero h1{font-size:clamp(2.2rem,5.6vw,3.9rem);font-weight:900;max-width:18ch;margin:.3em 0 .35em;position:relative;z-index:1}
.phero .lede{position:relative;z-index:1}
.phero .wrap{position:relative;z-index:1}
.phero .wrap>*{animation:rise 1.05s cubic-bezier(.22,1,.36,1) both}
.phero .wrap>*:nth-child(2){animation-delay:.13s}
.phero .wrap>*:nth-child(3){animation-delay:.26s}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line);background:var(--bg2);padding:15px 0;overflow:hidden}
.ticker .track{display:flex;width:max-content;white-space:nowrap;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--dim);animation:tick 64s linear infinite}
.ticker .track span{padding:0 26px}
.ticker .track b{color:var(--gold);font-weight:800}
@keyframes tick{to{transform:translateX(-50%)}}

@font-face{font-family:"Marcellus";src:url("fonts/marcellus-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-500i.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}

/* ---------- proof strip ---------- */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden}
.strip div{background:var(--panel);padding:30px 24px 26px}
.strip b{display:block;font-family:var(--serif);font-size:2.9rem;font-weight:500;line-height:1.02;color:var(--ink);letter-spacing:.01em}
.strip b i{font-style:italic;color:var(--gold2)}
.strip small{display:block;margin-top:10px;color:var(--mut);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.65}
@media(min-width:860px){.strip{grid-template-columns:repeat(4,1fr)}}

/* ---------- work / portfolio ---------- */
.work{background:var(--bg2);border-block:1px solid var(--line)}
.work-grid{display:grid;gap:34px;align-items:center;margin-top:14px}
@media(min-width:920px){.work-grid{grid-template-columns:1.15fr .85fr}}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.shot{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--panel);box-shadow:0 24px 50px rgba(0,0,0,.4)}
.shot img{transition:transform 1s cubic-bezier(.22,1,.36,1)}
.shot:hover img{transform:scale(1.03)}
.shot figcaption{padding:11px 14px;font-size:.8rem;color:var(--mut);border-top:1px solid var(--line)}
.shot.phone{max-width:230px;justify-self:center;width:100%}
@media(max-width:700px){.shots{grid-template-columns:1fr 1fr}.shots .shot:first-child{grid-column:1/-1}.shot.phone{max-width:none}}
.work-copy ul,.ticks{list-style:none;margin:18px 0 26px}
.work-copy li,.ticks li{padding:9px 0 9px 30px;position:relative;color:var(--mut);border-bottom:1px dashed #23232c}
.work-copy li::before,.ticks li::before{content:"";position:absolute;left:2px;top:17px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.work-copy li b,.ticks li b{color:var(--ink)}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}

/* ---------- services ---------- */
.svc-grid{display:grid;gap:16px;margin-top:36px}
@media(min-width:700px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.svc-grid{grid-template-columns:repeat(4,1fr)}}
.svc{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:28px 24px;position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .5s ease,box-shadow .5s ease}
.svc::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.svc:hover{transform:translateY(-3px);border-color:#3a3a48;box-shadow:0 24px 48px rgba(0,0,0,.35)}
.svc:hover::before{transform:scaleX(1)}
.svc .n{font-size:.72rem;font-weight:800;letter-spacing:.24em;color:var(--gold-deep)}
.svc h3{font-size:1.12rem;margin:.5em 0 .4em}
.svc p{color:var(--mut);font-size:.93rem}
.included{margin-top:44px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;background:var(--bg2);padding:28px 26px}
.included h3{font-size:1.2rem;margin-bottom:8px}
.included .ticks{margin:10px 0 0;display:grid;gap:0 34px}
@media(min-width:820px){.included .ticks{grid-template-columns:1fr 1fr}}

/* ---------- how it works ---------- */
.how{background:var(--bg2);border-block:1px solid var(--line)}
.steps{display:grid;gap:16px;margin-top:36px}
@media(min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:30px 26px}
.step .big{font-size:3rem;font-weight:900;color:transparent;-webkit-text-stroke:1.5px var(--gold);line-height:1}
.step h3{margin:.55em 0 .4em;font-size:1.25rem}
.step p{color:var(--mut);font-size:.95rem}
.step p b{color:var(--gold2)}

/* ---------- parallax band ---------- */
.band{position:relative;padding:120px 0;overflow:hidden;text-align:center;isolation:isolate}
.band .bgimg{position:absolute;inset:-14% 0;z-index:-2;background:
  radial-gradient(60% 90% at 50% 0%,rgba(201,162,75,.22),transparent 60%),
  linear-gradient(180deg,#0a0a0e,#17130a 50%,#0a0a0e);will-change:transform}
.band blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,4.4vw,2.7rem);max-width:22ch;margin:0 auto;line-height:1.25}
.band small{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}

/* ---------- cinematic closing band ---------- */
.filmband{position:relative;padding:130px 0;overflow:hidden;text-align:center;isolation:isolate;border-block:1px solid var(--line)}
.filmband .fb-media{position:absolute;inset:0;z-index:-2;background:#07070b}
.filmband .fb-media img,.filmband .fb-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.filmband .fb-media video{opacity:0;transition:opacity 1.4s ease}
.filmband .fb-media video.on{opacity:1}
.filmband .fb-shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 50% 50%,rgba(10,10,14,.25),rgba(10,10,14,.78))}
.filmband blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,4.6vw,2.9rem);max-width:24ch;margin:0 auto;line-height:1.22}
.filmband blockquote em{color:var(--gold2)}
.filmband small{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.filmband .btnrow{justify-content:center;margin-top:30px}

/* ---------- CTA band ---------- */
.ctaband{text-align:center}
.ctaband .lede{margin:0 auto}
.ctaband .btnrow{justify-content:center;margin-top:28px}

/* ---------- pricing ---------- */
.price-grid{display:grid;gap:18px;margin-top:40px;align-items:stretch}
@media(min-width:920px){.price-grid{grid-template-columns:1fr 1fr 1fr}}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 28px;display:flex;flex-direction:column;position:relative}
.plan.hot{border-color:var(--gold);background:linear-gradient(180deg,#1a170e,var(--panel) 55%);box-shadow:0 30px 60px rgba(0,0,0,.45)}
.plan .tag{position:absolute;top:-13px;left:28px;background:var(--gold);color:#14100a;font-size:.68rem;font-weight:900;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan h3{font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mut)}
.plan .amt{font-size:3.1rem;font-weight:900;line-height:1;margin:.22em 0 .05em;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.plan .amt small{font-size:1rem;color:var(--mut);font-weight:600}
.plan .per{color:var(--dim);font-size:.88rem;margin-bottom:20px}
.plan ul{list-style:none;margin:0 0 26px;flex:1}
.plan li{padding:8px 0 8px 26px;position:relative;color:var(--mut);font-size:.95rem;border-bottom:1px dashed #23232c}
.plan li::before{content:"";position:absolute;left:2px;top:16px;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.plan li b{color:var(--ink)}
.plan .btn{justify-content:center}
.plan.pack{background:var(--panel2)}
.plan.pack .amt{color:var(--gold2)}
.price-note{margin-top:26px;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:18px 22px;color:var(--mut);background:var(--bg2);font-size:.97rem}
.price-note b{color:var(--ink)}

/* ---------- included perk: review plate ---------- */
.perk{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#12121a,#0d0b07 72%);padding:38px 30px;display:grid;gap:36px;align-items:center;position:relative;overflow:hidden}
.perk::before{content:"";position:absolute;inset:0;background:radial-gradient(46% 60% at 18% 50%,rgba(201,162,75,.14),transparent 65%);pointer-events:none}
@media(min-width:920px){.perk{grid-template-columns:.85fr 1.15fr;padding:46px 48px}}
.perk-visual{display:flex;flex-direction:column;align-items:center;gap:22px;position:relative}
.plate{width:min(272px,78vw);aspect-ratio:4/5;border-radius:18px;background:linear-gradient(165deg,#1c1c26,#101016 58%,#141007);border:1px solid #3d3d4c;box-shadow:0 34px 60px rgba(0,0,0,.55),inset 0 0 0 6px #0a0a0e,inset 0 0 0 7px rgba(201,162,75,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:28px 22px;text-align:center;transform:rotate(-2deg)}
.plate-stars{color:var(--gold);font-size:1.3rem;letter-spacing:.3em;text-indent:.3em}
.plate .nfc{color:var(--gold)}
.plate-title{font-family:var(--serif);font-style:italic;font-size:1.55rem;line-height:1.15;color:var(--ink)}
.plate-title span{color:var(--gold2)}
.plate-sub{font-size:.7rem;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--mut)}
.plate-brand{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);border-top:1px dashed #2c2c38;padding-top:12px;width:100%}
.qrtile{background:#fff;border-radius:14px;padding:12px 12px 9px;width:136px;box-shadow:0 18px 34px rgba(0,0,0,.45);text-align:center}
.qrtile .qrsvg{display:block;width:100%;height:auto}
.qrtile span{display:block;margin-top:7px;font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#55524b}
.perk-copy{position:relative}
.perk-copy h3{font-size:clamp(1.6rem,3.2vw,2.1rem);margin:.3em 0 .4em}
.perk-copy p{color:var(--mut);max-width:54ch}
.perk .note{margin-top:18px;font-size:.84rem;color:var(--dim);border-left:3px solid var(--gold-deep);padding-left:13px;max-width:54ch}

/* ---------- faq ---------- */
.faq{background:var(--bg2);border-block:1px solid var(--line)}
.faq-list{margin-top:34px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 4px}
summary{cursor:pointer;font-weight:800;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--gold);font-weight:900}
details[open ] summary::after{content:"–"}
details p{color:var(--mut);margin-top:10px;max-width:680px}

/* ---------- about ---------- */
.checks{list-style:none;margin-top:26px;display:grid;gap:0 34px}
@media(min-width:820px){.checks{grid-template-columns:1fr 1fr}}
.checks li{padding:11px 0 11px 30px;position:relative;color:var(--mut);border-bottom:1px dashed #23232c}
.checks li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
.checks li b{color:var(--ink)}
.designer{display:grid;gap:30px;align-items:center;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#12121a,#0d0b07 75%);padding:38px 30px;position:relative;overflow:hidden}
@media(min-width:920px){.designer{grid-template-columns:.8fr 1.2fr;padding:46px 48px}}
.designer .monogram{width:150px;height:150px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto;
  font-family:var(--serif);font-size:3.4rem;color:var(--gold2);background:radial-gradient(70% 70% at 50% 35%,rgba(201,162,75,.18),transparent)}
.designer h3{font-size:clamp(1.5rem,3vw,2rem);margin:.25em 0 .4em}
.designer p{color:var(--mut);max-width:56ch}

/* ---------- form ---------- */
.form-grid{display:grid;gap:40px;margin-top:10px}
@media(min-width:920px){.form-grid{grid-template-columns:.9fr 1.1fr}}
form{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:30px 26px}
.frow{display:grid;gap:16px}
@media(min-width:640px){.frow.two{grid-template-columns:1fr 1fr}}
label{display:block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:7px}
input,select,textarea{width:100%;background:#0d0d12;border:1px solid #2c2c38;border-radius:10px;color:var(--ink);
  padding:13px 14px;font:inherit;font-size:.98rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
textarea{min-height:96px;resize:vertical}
.field{margin-bottom:16px}
form .btn{width:100%;justify-content:center;cursor:pointer;font-size:1rem}
.form-alt{margin-top:14px;text-align:center;color:var(--dim);font-size:.9rem}
.confirm{display:none;border:1px solid var(--gold);background:#171408;border-radius:12px;padding:18px 20px;margin-bottom:18px}
.confirm.show{display:block}
.confirm b{color:var(--gold2)}
.contact-lines{margin-top:8px}
.contact-lines div{padding:15px 0;border-bottom:1px dashed #23232c;color:var(--mut)}
.contact-lines b{display:block;color:var(--ink);font-size:1.08rem;margin-top:2px}
.contact-lines .k{font-size:.72rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:52px 0 60px;background:#070709}
.foot{display:grid;gap:28px}
@media(min-width:860px){.foot{grid-template-columns:1.3fr 1fr 1fr}}
footer p,footer a{color:var(--mut);font-size:.93rem}
footer a{text-decoration:none}
footer a:hover{color:var(--gold2)}
footer h4{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.fine{margin-top:34px;color:#55524b;font-size:.8rem;border-top:1px solid #17171d;padding-top:18px}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .hero-media video,.filmband .fb-media video{display:none}
}

/* ---------- portfolio cards ---------- */
.pf-grid{display:grid;gap:22px;margin-top:40px}
@media(min-width:860px){.pf-grid{grid-template-columns:repeat(3,1fr)}}
.pf-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;text-decoration:none;box-shadow:0 24px 50px rgba(0,0,0,.4);transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease}
.pf-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.pf-card img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top center;display:block}
.pf-cap{padding:16px 18px 18px;border-top:1px solid var(--line)}
.pf-cap h3{font-size:1.15rem;margin:0 0 2px;color:var(--ink)}
.pf-cap .url{color:var(--gold2);font-weight:700;font-size:.86rem;letter-spacing:.02em}
.pf-cap p{color:var(--mut);font-size:.88rem;margin:6px 0 0}