/* ==========================================================================
   MUGILU PRODUCTIONS — design tokens
   Identity taken from the studio logo: a solid block with the M knocked out
   and a condensed caps wordmark. Burgundy is the single accent — it carries
   every action, active state and chart mark; the neutrals are warmed toward
   it so the whole palette reads as one family, and the photographs still sit
   on a quiet ground.
   ========================================================================== */
:root{
  --paper:#F5F1F1; --surface:#FFFFFF; --surface-2:#FBF7F7; --wash:#EFE4E6;
  --ink:#1C1013; --ink-2:#5E4A4E; --ink-3:#8E7A7E;
  --line:#E6DCDD; --line-2:#CFBFC2;
  --block:#6E1B2E; --block-ink:#FFFFFF;
  --accent:#6E1B2E; --accent-text:#7A1F35; --accent-soft:#F3E7EA; --accent-bright:#A82F50;
  --good:#2C6B50; --good-w:#EDF2EF;
  --warn:#7E5C12; --warn-w:#F4EEDF;
  --crit:#A8401C; --crit-w:#F8E9E3;
  --d1:#5E1729; --d2:#A67480;           /* chart: one burgundy ramp, two steps */
  --grid:#EAE0E1;
  --night:#1A0B10; --night-ink:#F6EFF0;
  --shadow:0 1px 2px rgba(28,16,19,.06), 0 10px 30px -14px rgba(28,16,19,.20);
  --shadow-lg:0 2px 8px rgba(28,16,19,.08), 0 30px 70px -28px rgba(28,16,19,.36);
  --r:4px; --r-sm:3px; --r-lg:6px;
  --max:1200px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#140A0D; --surface:#1E1216; --surface-2:#26171C; --wash:#332127;
    --ink:#F4EDEE; --ink-2:#B0A0A4; --ink-3:#857478;
    --line:#33232A; --line-2:#48333B;
    --block:#F4EDEE; --block-ink:#140A0D;
    --accent:#9E2B4A; --accent-text:#E093A5; --accent-soft:#33161F; --accent-bright:#B8365A;
    --good:#58A882; --good-w:#17251E;
    --warn:#C99F3E; --warn-w:#2A2114;
    --crit:#E08055; --crit-w:#2C1A14;
    --d1:#EBB3C0; --d2:#A45E70;
    --grid:#2A1B21;
    --night:#0F0609; --night-ink:#F6EFF0;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
    --shadow-lg:0 2px 8px rgba(0,0,0,.6), 0 30px 70px -28px rgba(0,0,0,.95);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#140A0D; --surface:#1E1216; --surface-2:#26171C; --wash:#332127;
  --ink:#F4EDEE; --ink-2:#B0A0A4; --ink-3:#857478;
  --line:#33232A; --line-2:#48333B;
  --block:#F4EDEE; --block-ink:#140A0D;
  --accent:#9E2B4A; --accent-text:#E093A5; --accent-soft:#33161F; --accent-bright:#B8365A;
  --good:#58A882; --good-w:#17251E;
  --warn:#C99F3E; --warn-w:#2A2114;
  --crit:#E08055; --crit-w:#2C1A14;
  --d1:#EBB3C0; --d2:#A45E70;
  --grid:#2A1B21;
  --night:#0F0609; --night-ink:#F6EFF0;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  --shadow-lg:0 2px 8px rgba(0,0,0,.6), 0 30px 70px -28px rgba(0,0,0,.95);
  color-scheme:dark;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-size:15px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0; text-wrap:balance}
.display{font-family:"Bebas Neue",Impact,"Arial Narrow",sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.012em; line-height:.94}
h1{font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(2.4rem,5.9vw,5rem); line-height:.9; letter-spacing:.01em}
h2{font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:.96; letter-spacing:.012em}
h3{font-size:1.02rem; font-weight:600; letter-spacing:-.005em; line-height:1.3}
h4{font-size:.94rem; font-weight:600; line-height:1.35}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; font-size:.94em}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.muted{color:var(--ink-2)}
.tiny{font-size:.8rem}
.wrap{max-width:var(--max); margin:0 auto; padding:0 26px}
@media(max-width:620px){.wrap{padding:0 18px}}
.stack{display:flex; flex-direction:column; min-width:0}
.row{display:flex; align-items:center; flex-wrap:wrap; min-width:0}
.spread{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* the logo's own device: a solid block with content knocked out */
.blockmark{display:inline-block; background:var(--block); color:var(--block-ink); padding:2px 9px 3px;
  font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:.8rem; line-height:1.35}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ============ PROTOTYPE BAR ============ */
@media(max-width:760px){
}

/* ============ LOGO ============ */
.logo{display:flex; align-items:center; gap:10px; text-decoration:none}
.logo img.mk{height:30px; width:auto}
.logo img.wd{height:17px; width:auto}
.logo img{display:block}
.logo .lk{display:flex; flex-direction:column; gap:3px; align-items:flex-start}
.logo .tl{font-family:"IBM Plex Mono",monospace; font-size:.52rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3)}
img.on-light{display:block} img.on-dark{display:none}
:root[data-theme="dark"] img.on-dark{display:block}
:root[data-theme="dark"] img.on-light{display:none}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) img.on-dark{display:block}
  :root:not([data-theme="light"]) img.on-light{display:none}
}
.always-dark img.on-dark{display:block !important}
.always-dark img.on-light{display:none !important}

/* ============ SITE NAV ============ */
.sitenav{position:sticky; top:33px; z-index:80; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(16px); border-bottom:1px solid var(--line)}
.sitenav .inner{max-width:var(--max); margin:0 auto; padding:12px 26px; display:flex; align-items:center; gap:20px}
.sitenav .logo{margin-right:auto}
.navlinks{display:flex; gap:2px; flex-wrap:wrap}
.navlinks a{padding:7px 12px; text-decoration:none; font-size:.83rem; font-weight:500; color:var(--ink-2); letter-spacing:.01em}
.navlinks a:hover{color:var(--ink)}
.navlinks a.on{color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent)}
@media(max-width:900px){.navlinks{display:none}.sitenav .inner{gap:10px; padding:10px 18px}}
.navtoggle{display:none; background:transparent; border:1px solid var(--line-2); padding:6px 12px; font-size:.8rem; font-weight:600}
@media(max-width:900px){.navtoggle{display:block}.sitenav .inner > .btn{display:none}.sitenav{position:static}}
.mobilenav{display:none; border-top:1px solid var(--line); background:var(--surface); padding:6px}
.mobilenav.open{display:block}
.mobilenav a{display:block; padding:10px 14px; text-decoration:none; font-weight:500}
.mobilenav a:hover{background:var(--wash)}
.mobilenav .sepline{border-top:1px solid var(--line); margin:6px 0}

/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px;
  border:1px solid transparent; font-size:.8rem; font-weight:600; text-decoration:none; white-space:nowrap;
  letter-spacing:.05em; text-transform:uppercase; transition:background .15s, color .15s, border-color .15s}
.btn-primary{background:var(--accent); color:#FFFFFF}
.btn-primary:hover{filter:brightness(1.18)}
.btn-ghost{border-color:var(--line-2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink); background:var(--surface)}
.btn-invert{background:var(--accent-bright); color:#FFFFFF}
.btn-invert:hover{filter:brightness(1.14)}
.btn-outline-light{border-color:rgba(255,255,255,.35); color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn-sm{padding:7px 13px; font-size:.7rem}
.btn-danger{background:var(--crit-w); color:var(--crit)}

/* ============ PHOTO FRAMES ============ */
.frame{position:relative; overflow:hidden; background:var(--wash); display:block}
.frame img{width:100%; height:100%; object-fit:cover; display:block}
.frame.ph::before{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, var(--wash) 0 10px, var(--surface-2) 10px 20px)}
.frame .slot{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:13px 15px; z-index:2}
.frame.ph .slot{color:var(--ink-2)}
.frame:not(.ph) .slot{color:#fff; background:linear-gradient(to top, rgba(6,6,6,.72) 0%, rgba(6,6,6,.12) 48%, transparent 74%)}
.frame .slot b{font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:1.12rem; letter-spacing:.02em; line-height:1.05}
.frame .slot span{font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; opacity:.8; margin-top:5px}
.hero .frame.ph, .section.ink .frame.ph, .login .art .frame.ph{background:#241318}
.hero .frame.ph::before, .section.ink .frame.ph::before{background:repeating-linear-gradient(45deg,#2C1720 0 10px,#1D0F14 10px 20px)}
.hero .frame.ph .slot, .section.ink .frame.ph .slot{color:rgba(246,239,240,.62)}
.hero .frame.ph .badge-ov, .section.ink .frame.ph .badge-ov{background:var(--accent-bright); color:#FFFFFF}
.frame .badge-ov{position:absolute; top:11px; left:11px; z-index:3; font-family:"IBM Plex Mono",monospace;
  font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; background:#1A0B10; color:#fff; padding:4px 8px}
.frame.ph .badge-ov{background:var(--ink); color:var(--paper)}
a.frame:hover img, .frame.clickable:hover img{transform:scale(1.02)}
.frame img{transition:transform .5s ease}

/* ============ HERO ============ */
.hero{background:#1A0B10; color:#F6EFF0; position:relative; background-image:radial-gradient(900px 500px at 78% -10%, rgba(168,47,80,.22), transparent 62%), radial-gradient(700px 420px at 4% 108%, rgba(110,27,46,.28), transparent 66%)}
.hero .inner{max-width:var(--max); margin:0 auto; padding:0 26px}
.hero .top{display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:end; padding:64px 0 44px}
@media(max-width:900px){.hero .top{grid-template-columns:1fr; gap:30px; padding:44px 0 32px}.hero .inner{padding:0 18px}}
.hero h1{color:#fff}
.hero h1 .thin{display:block; color:#9C9891}
.hero .lede{color:rgba(246,239,240,.7); max-width:44ch; margin-top:22px; font-size:1rem}
.hero .cta{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap}
.hero .facts{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid rgba(255,255,255,.16)}
.hero .facts div{padding:20px 22px 26px 0; border-right:1px solid rgba(255,255,255,.16)}
.hero .facts div:last-child{border-right:0}
.hero .facts b{display:block; font-family:"Bebas Neue",Impact,sans-serif; font-size:2.1rem; font-weight:400; color:#fff; line-height:1}
.hero .facts span{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,239,240,.5)}
.herostack{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.herostack .frame:nth-child(1){grid-row:span 2; aspect-ratio:3/4.5}
.herostack .frame:nth-child(2),.herostack .frame:nth-child(3){aspect-ratio:4/3}

/* ============ SECTIONS ============ */
.section{padding:76px 0}
.section.tight{padding:48px 0}
.section.alt{background:var(--surface)}
.section.ink{background:#1A0B10; color:#F6EFF0}
.section.ink h2,.section.ink h3{color:#fff}
.section.ink .muted{color:rgba(246,239,240,.62)}
.sechead{max-width:58ch; margin-bottom:36px}
.sechead h2{margin-top:12px}
.sechead .eyebrow{color:var(--accent-text)}
.sechead p{color:var(--ink-2); margin-top:14px}
.grid{display:grid; gap:1px; background:var(--line)}
.grid>*{min-width:0}
.grid.gap{gap:18px; background:transparent}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:940px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{background:var(--surface); border:1px solid var(--line); padding:22px}
.card.pad-lg{padding:28px}
.cell-b{background:var(--paper); padding:26px 24px; display:flex; flex-direction:column; gap:10px}
.section.alt .cell-b{background:var(--surface)}
.cell-b .k{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.cell-b p{color:var(--ink-2); font-size:.9rem}

/* numbered process — a real sequence */
.steps{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line)}
@media(max-width:940px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.steps .st{background:var(--surface); padding:24px 20px 28px; display:flex; flex-direction:column; gap:9px}
.steps .n{font-family:"Bebas Neue",Impact,sans-serif; font-size:2.4rem; line-height:.8; color:var(--line-2)}
.steps h4{margin-top:2px}
.steps p{font-size:.86rem; color:var(--ink-2)}

/* album tiers */
.tier{background:var(--surface); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:12px}
.tier.feature{border-color:var(--accent); border-width:2px}
.tier .price{font-family:"Bebas Neue",Impact,sans-serif; font-size:2.4rem; line-height:1}
.tier .price small{font-family:Archivo,sans-serif; font-size:.74rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.tier ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; font-size:.86rem; color:var(--ink-2)}
.tier ul li{padding-left:14px; position:relative}
.tier ul li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:1px; background:var(--ink-3)}

/* chips + gallery */
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:24px}
.chip{background:transparent; border:1px solid var(--line-2); padding:6px 14px; font-size:.76rem; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#FFFFFF}
.gal{columns:3; column-gap:12px}
@media(max-width:900px){.gal{columns:2}}
@media(max-width:560px){.gal{columns:1}}
.gal .frame{break-inside:avoid; margin-bottom:12px; width:100%; display:block}
.gal .frame img{height:auto; width:100%; display:block}

/* gallery folder cards */
.foldercard{display:flex; flex-direction:column; text-decoration:none; background:var(--surface); border:1px solid var(--line); overflow:hidden}
.foldercard:hover{border-color:var(--accent)}
.foldercard .fcimg{display:block; aspect-ratio:4/3; overflow:hidden; background:var(--wash)}
.foldercard .fcimg img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.foldercard:hover .fcimg img{transform:scale(1.03)}
.foldercard .fcbody{display:flex; flex-direction:column; gap:5px; padding:18px 20px 20px}
.foldercard .fcname{font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; font-size:1.5rem; line-height:1; letter-spacing:.015em}
.foldercard .fcmeta{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.foldercard .fccount{font-size:.8rem; font-weight:600; color:var(--accent-text); margin-top:6px}

/* film cards — typographic posters that open the film on YouTube */
.filmcard{position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:5px;
  aspect-ratio:16/9; padding:20px 22px; text-decoration:none; color:#fff; overflow:hidden;
  background:#1A0B10; background-image:radial-gradient(700px 420px at 82% -20%, rgba(168,47,80,.42), transparent 64%),
    radial-gradient(560px 380px at 6% 118%, rgba(110,27,46,.5), transparent 66%);
  border:1px solid rgba(255,255,255,.12); transition:border-color .18s}
.filmcard::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px); pointer-events:none}
.filmcard:hover{border-color:rgba(255,255,255,.4)}
.filmcard .play{position:absolute; top:20px; left:22px; width:38px; height:38px; display:grid; place-items:center;
  background:var(--accent-bright); color:#fff; font-size:.85rem; padding-left:3px}
.filmcard .ft{font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; font-size:2rem; line-height:.95; letter-spacing:.015em}
.filmcard.big .ft{font-size:3rem}
.filmcard .fs{font-family:"IBM Plex Mono",monospace; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(246,239,240,.6)}
.filmcard .fw{font-size:.76rem; font-weight:600; color:var(--accent-text); margin-top:6px}

/* crew */
.crewav{width:44px;height:44px;flex:none;display:grid;place-items:center;background:var(--accent);color:#fff;
  font-family:"Bebas Neue",Impact,sans-serif;font-size:1.1rem;letter-spacing:.04em}
.skilltag{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--ink-2); padding:3px 7px; white-space:nowrap}

/* quotes */
.quote{background:var(--surface); border:1px solid var(--line); padding:26px; display:flex; flex-direction:column; gap:16px}
.quote blockquote{margin:0; font-size:1.02rem; line-height:1.5}
.quote .who b{font-size:.86rem; display:block}
.quote .who span{font-size:.76rem; color:var(--ink-3)}

/* forms */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select,.field textarea{background:var(--surface); border:1px solid var(--line-2); padding:11px 13px; font-size:.9rem; width:100%; border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink); outline:none}
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.formgrid{grid-template-columns:1fr}}

/* footer */
.foot{background:#1A0B10; color:rgba(246,239,240,.6); padding:60px 0 24px}
.foot h4{color:rgba(246,239,240,.42); font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; font-weight:400; margin-bottom:14px}
.foot a{display:block; text-decoration:none; padding:4px 0; font-size:.86rem; color:rgba(246,239,240,.72)}
.foot a:hover{color:var(--accent-text)}
.foot .bar{border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:20px; font-size:.75rem; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap}


/* ============ APP SHELL ============ */
.app{display:grid; grid-template-columns:236px 1fr; min-height:calc(100vh - 33px)}
@media(max-width:860px){.app{grid-template-columns:1fr}}
.side{border-right:1px solid var(--line); background:var(--surface); padding:20px 12px; display:flex; flex-direction:column; gap:1px}
@media(max-width:860px){.side{min-width:0; border-right:0; border-bottom:1px solid var(--line); flex-direction:row; overflow-x:auto; padding:8px; gap:2px}}
.side .who{padding:2px 10px 18px; border-bottom:1px solid var(--line); margin-bottom:14px; display:flex; gap:11px; align-items:center}
@media(max-width:860px){.side .who{display:none}}
.side .who .av{width:34px;height:34px;flex:none;display:grid;place-items:center;font-family:"Bebas Neue",Impact,sans-serif;font-size:.9rem;letter-spacing:.04em;background:var(--accent);color:#FFFFFF}
.side .who b{display:block; font-size:.85rem; line-height:1.25}
.side .who span{font-size:.7rem; color:var(--ink-3)}
.navi{background:transparent; border:0; text-align:left; padding:9px 12px; font-size:.84rem; font-weight:500; color:var(--ink-2); display:flex; align-items:center; gap:10px; white-space:nowrap}
.navi:hover{background:var(--wash); color:var(--ink)}
.navi[aria-current="true"]{background:var(--accent); color:#FFFFFF; font-weight:600}
.navi .dot{width:5px;height:5px;background:currentColor;opacity:.5;flex:none}
.side .sep{margin-top:auto; padding-top:14px}
@media(max-width:860px){.side .sep{margin-top:0; padding-top:0}}
.main{padding:28px 28px 64px; min-width:0}
@media(max-width:620px){.main{padding:20px 18px 48px}}
.pagehead{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.pagehead h2{font-size:1.95rem}
.pagehead p{color:var(--ink-2); font-size:.87rem; margin-top:6px}

/* ============ LOGIN ============ */
.login{min-height:calc(100vh - 33px); display:grid; grid-template-columns:1.05fr .95fr}
@media(max-width:860px){.login{grid-template-columns:1fr}}
.login .art{background:#1A0B10; background-image:radial-gradient(800px 460px at 80% 4%, rgba(168,47,80,.26), transparent 62%), radial-gradient(640px 420px at 6% 98%, rgba(110,27,46,.30), transparent 66%); position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:44px; color:#fff; gap:30px}
@media(max-width:860px){.login .art{display:none}}
.login .art blockquote{font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; font-size:2.3rem; line-height:.98; max-width:14ch; margin:0; color:#fff}
.login .pane{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--paper)}
.login .box{width:100%; max-width:376px; display:flex; flex-direction:column; gap:16px}
.demohint{border:1px solid var(--accent); background:var(--accent-soft); padding:11px 13px; font-size:.79rem; color:var(--accent-text)}
.demohint b{font-family:"IBM Plex Mono",monospace}
.loginerr{border:1px solid var(--crit); border-left-width:3px; background:var(--surface); padding:11px 13px; font-size:.81rem; color:var(--crit); font-weight:600}
.staffdoor{display:flex; flex-direction:column; gap:14px; margin-top:4px}
.sdrule{display:block; position:relative; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}
.sdrule::before{content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line)}
.sdrule span{position:relative; background:var(--paper); padding:0 12px}

/* ============ STATS ============ */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
@media(max-width:940px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats{grid-template-columns:1fr}}
.stat{background:var(--surface); padding:17px 19px; display:flex; flex-direction:column; gap:7px; min-width:0}
.stat .lab{font-family:"IBM Plex Mono",monospace; font-size:.59rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.stat .val{font-family:"Bebas Neue",Impact,sans-serif; font-size:2.15rem; line-height:.9; font-variant-numeric:tabular-nums; letter-spacing:.01em}
.stat .sub{font-size:.77rem; color:var(--ink-2)}
.delta{font-size:.74rem; font-weight:700}
.delta.up{color:var(--good)} .delta.down{color:var(--crit)}

/* ============ BADGES ============ */
.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; font-family:"IBM Plex Mono",monospace;
  font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; white-space:nowrap; line-height:1.6}
.badge::before{content:""; width:5px; height:5px; background:currentColor; flex:none}
.b-good{background:var(--good-w); color:var(--good)}
.b-warn{background:var(--warn-w); color:var(--warn)}
.b-crit{background:var(--crit-w); color:var(--crit)}
.b-info{background:var(--wash); color:var(--ink-2)}
.b-ink{background:var(--accent); color:#FFFFFF}
.badge.plain::before{display:none}

/* ============ TABLES ============ */
.tablewrap{overflow-x:auto; border:1px solid var(--line); background:var(--surface)}
table.dt{width:100%; border-collapse:collapse; font-size:.86rem; min-width:660px}
table.dt th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.59rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:400; padding:11px 14px;
  border-bottom:1px solid var(--line-2); background:var(--surface-2); white-space:nowrap; position:sticky; top:0}
table.dt td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.dt tr:last-child td{border-bottom:0}
table.dt tbody tr:hover{background:var(--wash)}
table.dt td.r,table.dt th.r{text-align:right}
.rowlink{cursor:pointer}
.cellhead{font-weight:600}
.cellsub{font-size:.74rem; color:var(--ink-3)}

/* ============ CALENDAR ============ */
.calbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap}
.calgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.caldow{background:var(--surface-2); font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding:8px 0}
.cell{min-width:0; background:var(--surface); border:0; min-height:92px; padding:7px; display:flex; flex-direction:column; gap:4px; text-align:left}
.cell.out{background:var(--surface-2); opacity:.5}
.cell.today{box-shadow:inset 0 0 0 2px var(--accent)}
.cell .d{font-family:"IBM Plex Mono",monospace; font-size:.7rem; color:var(--ink-3)}
.cell.has{cursor:pointer}
.cell.has:hover{background:var(--wash)}
.ev{min-width:0; font-size:.66rem; font-weight:600; padding:3px 5px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-left:3px solid}
.ev.wedding{background:var(--accent); color:#FFFFFF; border-color:var(--accent)}
.ev.engagement{background:var(--accent-soft); color:var(--accent-text); border-color:var(--accent-text)}
.ev.prewed{background:var(--wash); color:var(--ink-2); border-color:var(--ink-3)}
.ev.event{background:var(--good-w); color:var(--good); border-color:var(--good)}
.ev.hold{background:var(--warn-w); color:var(--warn); border-color:var(--warn)}
@media(max-width:620px){.cell{min-height:64px; padding:4px}.ev{font-size:.58rem}}

/* ============ ASSIGN ============ */
.picker{display:flex; flex-wrap:wrap; gap:7px}
.pick{display:flex; align-items:center; gap:9px; border:1px solid var(--line-2); background:var(--surface); padding:5px 13px 5px 5px; font-size:.82rem; font-weight:500}
.pick .av{width:26px;height:26px;flex:none;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:500;background:var(--accent);color:#FFFFFF}
.pick[aria-pressed="true"]{border-color:var(--accent); background:var(--accent); color:#FFFFFF}
.pick[aria-pressed="true"] .av{background:#FFFFFF; color:var(--accent)}
.pick[disabled]{opacity:.4; cursor:not-allowed; text-decoration:line-through}
.pick .tagrole{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.pick[aria-pressed="true"] .tagrole{color:rgba(255,255,255,.72)}

.gearrow{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 13px; border:1px solid var(--line); background:var(--surface); width:100%; text-align:left}
.gearrow.on{border-color:var(--accent); background:var(--accent-soft)}
.stepper{display:flex; align-items:center; border:1px solid var(--line-2); background:var(--surface)}
.stepper button{background:transparent; border:0; padding:3px 11px; font-size:.95rem; color:var(--ink-2)}
.stepper button:hover:not([disabled]){background:var(--accent); color:#FFFFFF}
.stepper button[disabled]{opacity:.3; cursor:not-allowed}
.stepper span{padding:3px 10px; font-family:"IBM Plex Mono",monospace; font-size:.78rem; min-width:34px; text-align:center; border-left:1px solid var(--line-2); border-right:1px solid var(--line-2)}

/* ============ MILESTONES / PROGRESS ============ */
.bar{height:6px; background:var(--wash); overflow:hidden; display:flex}
.bar i{display:block; height:100%; background:var(--accent)}
.ms{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.msrow{display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center; padding:14px; background:var(--surface)}
@media(max-width:620px){.msrow{grid-template-columns:auto 1fr; row-gap:8px}.msrow .msamt{grid-column:2}}
.msdot{width:26px;height:26px;display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;font-size:.68rem;font-weight:500;flex:none}
.msdot.paid{background:var(--good-w); color:var(--good)}
.msdot.due{background:var(--warn-w); color:var(--warn)}
.msdot.overdue{background:var(--crit-w); color:var(--crit)}
.msdot.next{background:var(--wash); color:var(--ink-3)}
.msamt{font-family:"IBM Plex Mono",monospace; font-weight:500; font-variant-numeric:tabular-nums}

.track{display:flex; gap:1px; overflow-x:auto; background:var(--line); border:1px solid var(--line)}
.step{flex:1; min-width:138px; padding:16px 14px; background:var(--surface); border-top:3px solid var(--line-2)}
.step.done{border-top-color:var(--accent)}
.step.active{border-top-color:var(--warn)}
.step .stl{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.step.done .stl{color:var(--accent-text)} .step.active .stl{color:var(--warn)}
.step b{display:block; font-size:.88rem; margin:6px 0 3px}
.step span{font-size:.76rem; color:var(--ink-2)}

.refcard{background:linear-gradient(150deg,#2B0F1A 0%,#5E1729 100%); color:#fff; padding:28px}
.refcard .pts{font-family:"Bebas Neue",Impact,sans-serif; font-size:4rem; line-height:.85; color:#fff}
.refcode{display:inline-flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.3); padding:7px 13px; font-family:"IBM Plex Mono",monospace; letter-spacing:.16em; font-size:.82rem}

/* ============ QUOTE / INVOICE ============ */
.two{display:grid; grid-template-columns:1.28fr .72fr; gap:20px; align-items:start}
.two>*{min-width:0}
@media(max-width:980px){.two{grid-template-columns:1fr}}
.lineitem{display:grid; grid-template-columns:1fr 74px 116px 116px 34px; gap:8px; align-items:center}
@media(max-width:720px){.lineitem{grid-template-columns:1fr 1fr; gap:8px}.lineitem .li-total{grid-column:1/-1}}
.lineitem input{background:var(--surface); border:1px solid var(--line-2); padding:9px 11px; font-size:.85rem; width:100%; border-radius:0}
.lineitem input:focus{border-color:var(--ink); outline:none}
.lineitem .li-total{font-family:"IBM Plex Mono",monospace; text-align:right; font-weight:500; font-size:.86rem}
.iconbtn{background:transparent; border:1px solid var(--line-2); width:34px; height:34px; display:grid; place-items:center; color:var(--ink-3)}
.iconbtn:hover{border-color:var(--crit); color:var(--crit)}
.totals{display:grid; gap:10px}
.totals .tr{display:flex; justify-content:space-between; font-size:.87rem}
.totals .tr span:last-child{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.totals .tr.grand{border-top:1px solid var(--accent); padding-top:12px; margin-top:4px; font-size:1rem; font-weight:700}
.toggle{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:.86rem; font-weight:600}
.toggle input{position:absolute; opacity:0; width:0; height:0}
.toggle .tr-track{width:40px; height:20px; background:var(--wash); border:1px solid var(--line-2); position:relative; transition:background .18s}
.toggle .tr-track::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; background:var(--ink-3); transition:transform .18s}
.toggle input:checked + .tr-track{background:var(--accent); border-color:var(--accent)}
.toggle input:checked + .tr-track::after{transform:translateX(20px); background:var(--paper)}
.toggle input:focus-visible + .tr-track{outline:2px solid var(--ink); outline-offset:2px}

.paper{background:var(--surface); border:1px solid var(--line); padding:30px; font-size:.85rem}
.paper .ph{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:20px; border-bottom:2px solid var(--accent)}
.paper table{width:100%; border-collapse:collapse; margin:18px 0; font-size:.82rem}
.paper table th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:400; padding:8px 0; border-bottom:1px solid var(--line-2)}
.paper table td{padding:10px 0; border-bottom:1px solid var(--line)}
.paper table td.r,.paper table th.r{text-align:right; font-family:"IBM Plex Mono",monospace}

/* ============ CHARTS ============ */
.chartcard{background:var(--surface); border:1px solid var(--line); padding:20px 20px 14px}
.chartcard h4{font-size:.95rem}
.chartcard .cap{font-size:.77rem; color:var(--ink-3); margin-top:3px}
.legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:.77rem; color:var(--ink-2)}
.legend i{width:10px; height:10px; display:inline-block; margin-right:7px; vertical-align:-1px}
svg .gridline{stroke:var(--grid); stroke-width:1}
svg .axis{fill:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.05em}
svg .vlabel{fill:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500}
.hbar{display:grid; grid-template-columns:118px 1fr 52px; gap:12px; align-items:center; font-size:.83rem; padding:5px 0}
.hbar .tk{background:var(--wash); height:10px; overflow:hidden}
.hbar .tk i{display:block; height:100%}
.hbar .v{font-family:"IBM Plex Mono",monospace; text-align:right; font-size:.79rem; color:var(--ink-2)}
.tip{position:fixed; z-index:200; pointer-events:none; background:#1A0B10; color:#fff; padding:8px 12px; font-size:.77rem; box-shadow:var(--shadow-lg); opacity:0; transition:opacity .12s}
.tip.show{opacity:1}

/* ============ MOODBOARD / DOCS / GALLERY ADMIN ============ */
.refgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px}
.refitem{border:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column}
.refmedia{aspect-ratio:4/3; overflow:hidden; background:var(--wash); display:block}
.refmedia img{width:100%; height:100%; object-fit:cover; display:block}
.reflink{height:100%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
  text-decoration:none; padding:18px; background:var(--surface-2); border-bottom:1px solid var(--line); position:relative}
.reflink::before{content:"LINK"; position:absolute; top:14px; left:18px; font-family:"IBM Plex Mono",monospace;
  font-size:.54rem; letter-spacing:.18em; color:var(--ink-3)}
.reflink .rl1{font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; font-size:1.5rem; line-height:1; color:var(--ink)}
.reflink .rl2{font-size:.76rem; font-weight:600; color:var(--accent-text)}
.reflink:hover .rl2{text-decoration:underline}
.refbody{padding:14px 15px 16px}

.docrow{display:grid; grid-template-columns:auto 1fr auto auto; gap:14px; align-items:center;
  padding:12px 14px; border:1px solid var(--line); background:var(--surface)}
@media(max-width:620px){.docrow{grid-template-columns:auto 1fr; row-gap:10px}}
.docrow .dk{width:38px;height:38px;flex:none;display:grid;place-items:center;background:var(--accent-soft);
  color:var(--accent-text); font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.08em}
.toggle.tiny{font-size:.72rem; gap:7px}
.toggle.tiny .tr-track{width:34px;height:18px}
.toggle.tiny .tr-track::after{width:12px;height:12px}
.toggle.tiny input:checked + .tr-track::after{transform:translateX(16px)}

.photocell{position:relative; border:1px solid var(--line); background:var(--surface)}
.photocell img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.photocell .covertag{position:absolute; top:8px; left:8px; background:var(--accent); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-size:.54rem; letter-spacing:.12em; text-transform:uppercase; padding:3px 7px}
.photocell .pcbar{display:flex; gap:5px; padding:8px; border-top:1px solid var(--line)}
.photocell .pcbar .btn{flex:1; padding:5px 6px; font-size:.62rem}
.photocell .pccap{padding:0 9px 9px; font-size:.72rem; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fadmincover{display:grid; place-items:center; width:100%; aspect-ratio:16/9; background:var(--wash);
  border:0; border-bottom:1px solid var(--line); overflow:hidden; padding:0}
.fadmincover img{width:100%; height:100%; object-fit:cover; display:block}

/* ============ MONEY ============ */
.payrow{display:grid; grid-template-columns:1.1fr 1.5fr .9fr 62px 100px 96px auto 34px; gap:7px; align-items:center}
.payrow.head{padding:0 0 4px; font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.payrow.head span:nth-child(6){text-align:right}
.payrow select,.payrow input{background:var(--surface); border:1px solid var(--line-2); padding:8px 9px;
  font-size:.82rem; width:100%; border-radius:0; min-width:0}
.payrow select:focus,.payrow input:focus{border-color:var(--accent); outline:none}
.payrow.addrow{border:1px dashed var(--accent); padding:8px; background:var(--accent-soft)}
@media(max-width:900px){
  .payrow{grid-template-columns:1fr 1fr; gap:6px}
  .payrow.head{display:none}
  .payrow .li-total{grid-column:1/-1; text-align:left}
}
.exprow{display:grid; grid-template-columns:auto 1fr auto auto 34px; gap:12px; align-items:center;
  padding:11px 13px; border:1px solid var(--line); background:var(--surface)}
@media(max-width:760px){.exprow{grid-template-columns:auto 1fr; row-gap:8px}}
.exprow .ecat{font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--wash); color:var(--ink-2); padding:5px 8px; white-space:nowrap}
.settlerow{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:.85rem}
.settlerow:last-child{border-bottom:0}
.ratecard{margin-top:12px; border-top:1px solid var(--line); padding-top:10px; display:grid; gap:5px}
.ratecard .rr{display:flex; justify-content:space-between; gap:10px; font-size:.74rem; color:var(--ink-2)}
.ratecard .rr .mono{font-size:.72rem; color:var(--ink)}

/* ============ MODAL ============ */
.scrim{position:fixed; inset:0; background:rgba(8,8,8,.6); backdrop-filter:blur(3px); z-index:150; display:grid; place-items:center; padding:20px}
.modal{background:var(--paper); border:1px solid var(--line-2); width:min(780px,100%); max-height:88vh; overflow:auto; box-shadow:var(--shadow-lg)}
.modal .mh{position:sticky; top:0; background:var(--paper); border-bottom:1px solid var(--line-2); padding:20px 24px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; z-index:2}
.modal .mb{padding:24px}
.modal .mf{position:sticky; bottom:0; background:var(--paper); border-top:1px solid var(--line-2); padding:14px 24px; display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap}
.closex{background:transparent; border:0; font-size:1.4rem; color:var(--ink-3); line-height:1; padding:0 4px}
.closex:hover{color:var(--ink)}

.kv{display:grid; grid-template-columns:auto 1fr; gap:8px 18px; font-size:.86rem}
.kv dt{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:2px}
.kv dd{margin:0; font-weight:500}
.subhead{font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); margin:24px 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line)}
.subhead:first-child{margin-top:0}
.toastbox{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(14px); background:#1A0B10; color:#fff; padding:12px 20px; font-size:.83rem; box-shadow:var(--shadow-lg); z-index:300; opacity:0; transition:all .2s; pointer-events:none; max-width:92vw; text-align:center}
.toastbox.show{opacity:1; transform:translateX(-50%) translateY(0)}
.empty{text-align:center; padding:44px 20px; color:var(--ink-3)}
.note{background:var(--surface-2); border-left:3px solid var(--accent); padding:13px 16px; font-size:.83rem; color:var(--ink-2)}
.note b{color:var(--ink)}

/* ==========================================================================
   LIVE SITE — additions on top of the prototype's styles
   Everything below exists only on the public website: the skip link, the
   real <img> frames, the gallery lightbox, the WhatsApp button and the
   handful of utility classes that replaced inline styles.
   ========================================================================== */

.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--accent); color:#fff; padding:10px 16px; font-weight:600}
.skip:focus{left:0}

.logolink{display:inline-flex; text-decoration:none}
.navcta{white-space:nowrap}

/* ---- photographs -------------------------------------------------------- */
.frame{position:relative; display:block; overflow:hidden; background:var(--wash);
  border:0; padding:0; margin:0; width:100%; aspect-ratio:var(--ar, 3/4); cursor:default}
.frame img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
a.frame, button.frame{cursor:pointer}
a.frame:hover img, button.frame:hover img, button.frame:focus-visible img{transform:scale(1.035)}
button.frame:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.frame .fmeta{position:absolute; left:0; right:0; bottom:0; padding:34px 14px 12px; display:flex;
  flex-direction:column; gap:2px; color:#fff; pointer-events:none;
  background:linear-gradient(to top, rgba(16,7,10,.80), rgba(16,7,10,.42) 42%, transparent)}
.frame .fmeta b{font-size:.92rem; font-weight:600; line-height:1.2}
.frame .fmeta i{font-family:"IBM Plex Mono",monospace; font-style:normal; font-size:.62rem;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.78)}
.frame .fbadge{position:absolute; top:10px; left:10px; font-family:"IBM Plex Mono",monospace;
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:rgba(16,7,10,.62); padding:4px 8px; backdrop-filter:blur(3px)}

.herostack{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.herostack .frame:first-child{grid-row:span 2; aspect-ratio:3/4}
.herostack .frame{aspect-ratio:4/3}
@media(max-width:760px){
  .herostack{grid-template-columns:1fr 1fr}
  .herostack .frame:first-child{grid-row:span 1; aspect-ratio:4/3}
}

/* ---- gallery ------------------------------------------------------------ */
.shoot + .shoot{margin-top:44px}
.shoothead{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line)}
.shoothead h3{font-family:"Bebas Neue",Impact,sans-serif; font-size:1.6rem; letter-spacing:.02em;
  text-transform:uppercase; line-height:1}
.gal{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:12px}
@media(max-width:520px){.gal{grid-template-columns:1fr 1fr; gap:8px}}
.chips{margin-bottom:26px}
.frame[hidden]{display:none}

/* ---- lightbox ----------------------------------------------------------- */
.lightbox{position:fixed; inset:0; z-index:150; background:rgba(12,5,8,.95);
  display:grid; grid-template-columns:64px 1fr 64px; grid-template-rows:1fr auto;
  align-items:center; justify-items:center; padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{grid-column:2; grid-row:1; max-width:100%; max-height:82vh; object-fit:contain;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.9)}
.lbcap{grid-column:1/-1; grid-row:2; color:rgba(246,239,240,.72); font-size:.82rem;
  font-family:"IBM Plex Mono",monospace; letter-spacing:.08em; text-transform:uppercase;
  padding-top:16px; text-align:center}
.lbclose{position:absolute; top:14px; right:16px; background:transparent; border:0;
  color:rgba(246,239,240,.8); font-size:2rem; line-height:1; padding:6px 12px; cursor:pointer}
.lbnav{background:transparent; border:0; color:rgba(246,239,240,.65); font-size:2.6rem;
  line-height:1; cursor:pointer; padding:10px; grid-row:1}
.lbnav.prev{grid-column:1} .lbnav.next{grid-column:3}
.lbclose:hover, .lbnav:hover{color:#fff}
.lbclose:focus-visible, .lbnav:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media(max-width:640px){
  .lightbox{grid-template-columns:44px 1fr 44px; padding:10px}
  .lbnav{font-size:2rem}
}

/* ---- WhatsApp ----------------------------------------------------------- */
.wafab{position:fixed; right:18px; bottom:18px; z-index:100; display:inline-flex; align-items:center;
  gap:9px; background:#1F7A4C; color:#fff; padding:11px 16px; font-weight:600; font-size:.85rem;
  text-decoration:none; box-shadow:0 8px 26px -8px rgba(0,0,0,.5)}
.wafab:hover{background:#186039; color:#fff}
.wafab:focus-visible{outline:2px solid #fff; outline-offset:2px}
@media(max-width:520px){.wafab{right:12px; bottom:12px; padding:11px 13px} .wafab span{display:none}}
.pill{border:1px solid rgba(255,255,255,.22); padding:5px 12px; font-size:.74rem; display:inline-block}

/* ---- utilities that replaced inline styles ------------------------------ */
.bordered{border:1px solid var(--line)}
.sechead.flush{margin:0}
.sechead.flush h2{margin-top:10px}
.eyebrow.dim{color:rgba(246,239,240,.45)}
.accentmark{background:var(--accent-bright); color:#fff}
.center{text-align:center}
.narrow{max-width:48ch; margin:16px auto 0}
.onink{color:#fff}
.dimline{margin-top:28px; color:rgba(246,239,240,.55); font-size:.82rem}
.accent{color:var(--accent-text); font-weight:600}
.selfstart{align-self:flex-start}
.inkgrid{gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14)}
.inkcell{background:#1A0B10; padding:26px 24px}
.inkcell h3{color:#fff}
.inkcell p{margin-top:9px; font-size:.89rem}
.cardh{margin:8px 0 16px; font-size:1.2rem}
.cellv{font-size:.98rem}
.deft{font-size:.9rem}
.filmname{font-family:"Bebas Neue",Impact,sans-serif; font-size:1.25rem; text-transform:uppercase; letter-spacing:.02em}
.formh{margin:10px 0 8px; font-size:2rem}
.phones{font-size:1rem; font-weight:500}
.phones a, .card a{color:inherit}
.ticks{margin:12px 0 0; padding-left:18px; font-size:.86rem; color:var(--ink-2);
  display:flex; flex-direction:column; gap:8px}
.addon{padding:10px 0; border-bottom:1px solid var(--line); font-size:.88rem}
.tierc{margin-top:auto; align-self:flex-start}
.msrow{grid-template-columns:auto 1fr auto}
.msrow b{font-size:.9rem}
.note a{color:var(--accent-text); font-weight:600}
.rule{margin:16px 0}

/* the prototype swapped logos by data-theme; here light/dark is all we need */
.logo img.on-light{display:block} .logo img.on-dark{display:none}
@media (prefers-color-scheme:dark){
  .logo img.on-light{display:none} .logo img.on-dark{display:block}
}
.always-dark .logo img.on-light{display:none !important}
.always-dark .logo img.on-dark{display:block !important}
.logo img.wd{height:17px; width:auto}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}