@font-face{font-family:KVSwizzy;src:url('swizzy-regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:KVSwizzy;src:url('swizzy-bold.otf') format('opentype');font-weight:700;font-display:swap}
:root{font-family:KVSwizzy,Arial,sans-serif;color:#050301;background:#f2f0ef;font-size:14px;line-height:1.5;color-scheme:light;--radius:10px;--gap:10px}
*{box-sizing:border-box}body{margin:0}header{background:#fff;padding:31px max(38px,calc((100vw - 1136px)/2));display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #dddcd9}
.brand img{display:block;width:220px;max-width:100%;height:auto}#client-brand{display:flex;align-items:center;gap:20px;border-left:1px solid #dededc;padding-left:25px}#client-brand>span{font-size:11px;color:#36454f}#client-logo{width:148px;height:auto;display:block}
main{max-width:1212px;padding:35px 38px 25px;margin:auto}.hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:32px;align-items:center}
h1{font-size:clamp(32px,4.2vw,47px);line-height:1.08;letter-spacing:-1.6px;margin:0;font-weight:700;overflow-wrap:anywhere}h2{font-size:23px;letter-spacing:-.7px;line-height:1.2;margin:0}p{line-height:1.7;white-space:pre-line}#message{color:#36454f;max-width:390px;margin:20px 0 22px}.muted{font-size:12px;color:#36454f}.eyebrow{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#36454f;margin:0 0 16px;display:flex;align-items:center;gap:10px}.eyebrow:before{content:'';width:10px;height:10px;background:#ffeb00;flex-shrink:0}
button,.button{font:inherit;font-size:12px;display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1.3;padding:12px 16px;border:1px solid #b7bab9;border-radius:var(--radius);background:transparent;color:#050301;text-decoration:none;cursor:pointer}.primary,form>button{background:#ffeb00;border-color:#ffeb00;font-weight:700}.primary:hover,form>button:hover{background:#f3df00}.secondary:hover{background:white}.actions{display:flex;gap:10px;flex-wrap:wrap}#section-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:17px}a{color:inherit;text-underline-offset:4px}#section-links a{color:#36454f;font-size:12px;padding:8px 0}#expires{margin:10px 0 0;font-size:11px}
.photo{display:block;padding:0;border:0;overflow:hidden;background:#e6e3df;border-radius:var(--radius);width:100%;aspect-ratio:1.5}.photo img{width:100%;height:100%;object-fit:cover;display:block}#hero-image .photo{aspect-ratio:1.35}.media-section{margin-top:38px;border-top:1px solid #cfd0cc;padding-top:22px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:17px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}figure{margin:0;min-width:0}figcaption{font-size:11px;color:#36454f;padding-top:7px;overflow-wrap:anywhere}.photo-actions{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.photo-actions a{font-size:11px;padding:8px 0}.retry{font-size:11px;margin-top:6px}
.movie{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:24px}.movie video{width:100%;height:auto;aspect-ratio:16/9;background:#050301;display:block;border-radius:var(--radius)}.reel{grid-template-columns:minmax(0,190px) minmax(0,1fr)}.reel video{aspect-ratio:9/16;object-fit:contain}.movie h3{font-size:18px;letter-spacing:-.4px;margin:0 0 8px;overflow-wrap:anywhere}.movie .muted{margin:0 0 18px}.file-list{padding:0;list-style:none}.file-list li{display:flex;align-items:center;gap:16px;justify-content:space-between;border-top:1px solid #ddd;padding:17px 0;overflow-wrap:anywhere}
.invoice{margin-top:26px;padding:17px 0;border-block:1px solid #cfd0cc;display:flex;align-items:center;justify-content:space-between;gap:20px}.invoice strong{font-size:13px}.invoice p{margin:2px 0 0;font-size:11px}.invoice a{font-size:12px;padding:9px 0}footer{max-width:1212px;margin:auto;padding:22px 38px 28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;color:#36454f;font-size:11px}
#code-form{max-width:440px}label{display:block;margin:16px 0 8px}input{font:inherit;border:1px solid #aaa;background:white;border-radius:var(--radius);padding:12px;max-width:100%;width:100%}form>button{margin-top:18px}:focus-visible{outline:3px solid #36454f;outline-offset:4px}dialog{position:fixed;inset:auto;margin:0;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:max-content;border:0;border-radius:var(--radius);padding:24px;max-width:min(1000px,94vw);max-height:92vh}dialog::backdrop{background:#050301bb}#preview-image{display:block;max-width:100%;max-height:70vh;object-fit:contain;margin-bottom:12px}.close{display:flex;margin:0 0 12px auto}[hidden]{display:none!important}
@media(max-width:760px){header{padding:26px 25px;gap:20px}.brand img{width:190px}#client-brand{padding-left:18px;gap:12px}#client-logo{width:125px}#client-brand>span:first-child{display:none}main{padding:29px 25px 23px}.hero{grid-template-columns:1fr;gap:24px}#hero-image .photo{aspect-ratio:1.75}.media-section{margin-top:29px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}footer{padding-inline:25px}}
@media(max-width:600px){.movie{grid-template-columns:1fr;gap:18px}.movie.reel{grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:17px}.movie h3{font-size:16px}.section-head{align-items:flex-start;flex-direction:column;gap:5px}.invoice{align-items:flex-start;flex-direction:column;gap:4px}.file-list li{flex-wrap:wrap}}
@media(max-width:430px){header{padding:22px 18px;gap:16px;flex-wrap:wrap}.brand img{width:164px}#client-brand{padding-left:14px;min-width:0}#client-logo{width:103px}main{padding:25px 18px 21px}h1{font-size:34px}.eyebrow{font-size:10px;letter-spacing:1.3px;margin-bottom:13px}footer{padding-inline:18px}.photo-actions{flex-wrap:wrap;gap:0}}
@media(max-width:350px){.movie.reel{grid-template-columns:minmax(0,100px) minmax(0,1fr);gap:13px}}

/* Shared layout stays unchanged; the palette and frame follow the local theme. */
:root{--page:#f2f0ef;--surface:#fff;--ink:#050301;--muted:#36454f;--line:#cfd0cc;--strong-line:#b7bab9;--frame:#fff;--photo-line:#d2d0ca;background:var(--page);color:var(--ink)}
:root[data-theme=dark]{color-scheme:dark;--page:#101213;--surface:#1a1d1f;--ink:#f2f0ef;--muted:#b7c0c5;--line:#373d40;--strong-line:#626c71;--frame:#1c2022;--photo-line:#495155}
header{background:var(--surface);border-color:var(--line)}
.brand img{width:200px}
:root[data-theme=dark] .brand img{filter:invert(1)}
.header-actions{display:flex;align-items:center;gap:18px;min-width:0}
#client-brand{border-color:var(--line)}#client-logo{background:#fff;border-radius:6px;padding:7px}
#message,.muted,.eyebrow,#section-links a,#client-brand>span,figcaption,footer{color:var(--muted)}
button,.button{color:var(--ink);border-color:var(--strong-line)}
.primary,form>button{color:#050301;border-color:#ffeb00}
.secondary:hover{background:var(--surface)}
.photo{padding:3px;border:1px solid var(--photo-line);background:var(--frame);box-shadow:0 1px 3px #0503010a}
.photo img{border-radius:calc(var(--radius) - 4px)}
.media-section,.invoice,.file-list li{border-color:var(--line)}
input,dialog{color:var(--ink);background:var(--surface);border-color:var(--strong-line)}
#preview-image{border:1px solid var(--photo-line);padding:3px;background:var(--frame);border-radius:var(--radius)}
:root[data-theme=dark] :focus-visible{outline-color:#ffeb00}
.theme-toggle{width:44px;height:44px;padding:11px;flex-shrink:0;border-radius:50%;background:var(--surface)}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .sun-icon{display:none}
:root[data-theme=dark] .theme-toggle .moon-icon{display:none}
:root[data-theme=dark] .theme-toggle .sun-icon{display:block}
@media(max-width:760px){.brand img{width:168px}}
@media(max-width:430px){.brand img{width:132px}.header-actions{gap:12px}}
@media(max-width:350px){.brand img{width:104px}#client-logo{width:84px}.header-actions{gap:8px}}

#client-logo:not([hidden]){background:#fff;border-radius:8px;padding:10px;box-sizing:content-box;object-fit:contain;max-height:90px;max-width:240px}

.job-dates{display:flex;flex-wrap:wrap;gap:18px 32px;margin:22px 0}.job-date{min-width:140px}.job-date dt{font-size:.78rem;color:var(--muted,#69757a);margin:0 0 5px}.job-date dd{font-weight:600;margin:0}.hub-card .job-dates{gap:12px 20px;font-size:.85rem}.hub-card .job-date{min-width:120px}

html[data-theme=dark] img[data-themed-logo=true]{background:transparent!important}
.gallery-group-title{grid-column:1/-1;margin:24px 0 4px;font-size:1.1rem}

/* Photo navigation stays within the existing viewport-bounded modal. */
.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.preview-toolbar .close{margin:0;flex-shrink:0}#preview-position{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-photo{touch-action:pan-y pinch-zoom;position:relative;display:grid;place-items:center;margin-bottom:12px}.preview-photo #preview-image{margin-bottom:0;box-sizing:border-box}.preview-arrow{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;font-size:36px;line-height:1;border:1px solid #ffffff70;border-radius:50%;color:#fff;background:#191919c9;box-shadow:0 2px 8px #0003}.preview-arrow.previous{left:8px}.preview-arrow.next{right:8px}.preview-arrow:hover:not(:disabled){background:#191919}.preview-arrow:focus-visible{outline:3px solid #ffeb00;outline-offset:3px}.preview-arrow:disabled{opacity:.28;cursor:default}

/* Responsive deliverables: one shared row for video/reels where it fits. */
.motion-sections.has-both{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:34px;align-items:start}
.motion-sections>section{min-width:0}
.motion-sections.has-both .movie:not(.reel){grid-template-columns:minmax(0,1fr);gap:18px}
.motion-sections.has-both .movie.reel{grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:20px}
.motion-sections.has-both .movie h3{font-size:16px}
.output-brand{margin-top:48px;padding-top:30px;border-top:1px solid var(--line)}
.output-brand-head{display:flex;align-items:center;justify-content:space-between;gap:24px;min-width:0}
.output-brand-head h2{margin:0;font-size:28px;overflow-wrap:anywhere}
.output-brand-head+.media-section,.output-brand-head+.motion-sections>section{margin-top:28px}
.output-brand-logo{width:auto;max-width:220px;max-height:76px;object-fit:contain;background:#fff;border-radius:8px;padding:10px;box-sizing:content-box}
.output-brand-logo[data-themed-logo=true]{background:transparent}
.output-brand .media-section h3{font-size:22px;margin:0}
.floorplan-gallery{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));max-width:820px}
.floorplan-gallery .photo{aspect-ratio:4/3;background:#fff}
.floorplan-gallery .photo img{object-fit:contain}
.document-card{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.document-card h4{margin:0 0 12px;overflow-wrap:anywhere}
.extra-invoices{display:contents}
@media(max-width:900px){.motion-sections.has-both{grid-template-columns:minmax(0,1fr);gap:0}.motion-sections.has-both .movie.reel{grid-template-columns:minmax(0,170px) minmax(0,1fr)}}
@media(max-width:600px){.output-brand-head{align-items:flex-start;gap:16px}.output-brand-head h2{font-size:24px}.output-brand-logo{max-width:130px;max-height:54px;padding:6px}.output-brand{margin-top:32px;padding-top:24px}.motion-sections.has-both .movie.reel{grid-template-columns:minmax(0,125px) minmax(0,1fr);gap:17px}}
@media(max-width:350px){.motion-sections.has-both .movie.reel{grid-template-columns:minmax(0,100px) minmax(0,1fr)}}

/* Compact cards only inside the agency's branded output sections. */
.reel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:28px 24px;align-items:start}
.reel-grid>.gallery-group-title{grid-column:1/-1}
.output-brand .reel-grid .movie.reel{display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0;margin:0}
.output-brand .reel-grid .movie.reel video{width:100%;max-width:220px;aspect-ratio:9/16;object-fit:contain}
.output-brand .reel-grid .movie.reel>div{min-width:0;max-width:100%}
.output-brand .reel-grid .movie.reel h3{font-size:16px;line-height:1.35}
.output-brand .reel-grid .movie.reel .muted{margin-bottom:12px}
@media(max-width:600px){.reel-grid{grid-template-columns:minmax(0,1fr);gap:28px}.output-brand .reel-grid .movie.reel video{max-width:210px}}

/* Brand wordmarks are the section titles, rather than a duplicate on the right. */
.output-brand-head{justify-content:flex-start}
.output-brand-head h2{max-width:100%}
.output-brand-head .output-brand-logo{display:block;max-width:min(320px,100%);max-height:76px}
.output-brand-head .output-brand-logo[data-themed-logo=true]{padding:0}
@media(max-width:600px){.output-brand-head .output-brand-logo{max-width:min(260px,100%);max-height:64px}}

/* This wordmark already has alpha; do not place a white plate behind it. */
#brand-zitkovi .output-brand-logo{background:transparent;padding:0;border-radius:0}

/* Real, keyboard-accessible playback control above the actual initial frame. */
.movie-stage{position:relative;min-width:0;width:100%;border-radius:var(--radius)}
.movie-stage .movie-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;min-height:44px;padding:0;border-radius:50%;border:1px solid #ffffffb3;background:#111b;color:#fff;box-shadow:0 3px 18px #0004;z-index:1}
.movie-stage .movie-play::before{content:'';display:block;width:0;height:0;border-block:12px solid transparent;border-left:20px solid currentColor;margin-left:5px}
.movie-stage .movie-play:hover{background:#111e}
.movie-stage .movie-play:focus-visible{outline:3px solid #ffeb00;outline-offset:5px}
.output-brand .reel-grid .movie.reel>.movie-stage{width:100%;max-width:220px}
@media(max-width:600px){.movie-stage .movie-play{width:58px;height:58px}.output-brand .reel-grid .movie.reel>.movie-stage{max-width:210px}}

/* A single portrait/landscape pair keeps the existing video column width.
   Its portrait height follows (container - gap) * 1.65/2.65 * 9/16. */
.motion-sections.paired-motion .movie.reel{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.motion-sections.paired-motion .movie.reel>.movie-stage{width:210px;max-width:100%;justify-self:start}
.motion-sections.paired-motion .movie.reel video{max-width:none}
@media(min-width:901px){
 .motion-sections.paired-motion{container-type:inline-size}
 .motion-sections.paired-motion .movie.reel>.movie-stage{height:calc((100cqw - 34px) / 2.65 * 1.65 * 9 / 16);width:auto;aspect-ratio:9/16}
 .motion-sections.paired-motion .movie.reel video{width:100%;height:100%}
}