/* Zendejas Arquitectos — client material update v5 / audited against ZA WEB.pages */
.client-home-cover{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .28s ease,transform .4s ease;pointer-events:none}
.home-band:hover>.client-home-cover,.home-band:focus-visible>.client-home-cover,.home-band.is-hovered>.client-home-cover{filter:grayscale(0);transform:scale(1.008)}
.home-band>.client-home-video{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .28s ease,transform .4s ease;pointer-events:none;background:#050505}
.home-band:hover>.client-home-video,.home-band:focus-visible>.client-home-video,.home-band.is-hovered>.client-home-video{filter:grayscale(0);transform:scale(1.008)}

/* silver vector logo; SVG source stays crisp on retina/4K */
.brand-link .logo-perspective{transition:transform .42s cubic-bezier(.2,.8,.2,1),filter .42s ease;transform-origin:50% 55%}
.brand-link:hover .logo-perspective,.brand-link:focus-visible .logo-perspective{transform:translateY(-2px) rotate(-1.3deg) scale(1.025);filter:drop-shadow(0 4px 12px rgba(255,255,255,.08))}

/* ordering and captions */
.projects-grid .project-card{transition:opacity .2s ease}
.project-card .project-caption strong{font-size:clamp(16px,1.35vw,23px)}
.project-card .project-caption>span{font-size:12px}

/* Design */
.client-design-page{padding:54px 5vw 90px 17.5vw;min-height:75vh}
.client-design-page .page-intro{max-width:850px;margin-bottom:38px}
.client-design-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.7fr);gap:34px;align-items:start}
.client-design-media{position:relative;overflow:hidden;background:#0b0b0b;min-height:520px}
.client-design-media img{width:100%;height:100%;min-height:520px;object-fit:cover;filter:grayscale(1);transition:filter .3s ease,transform .4s ease}
.client-design-media:hover img{filter:grayscale(0);transform:scale(1.01)}
.client-design-copy{padding-top:12px}
.client-design-copy h2{font-size:clamp(28px,3vw,46px);font-weight:300;margin:0 0 18px}
.client-design-copy p{color:#ddd;font-size:16px;line-height:1.7;max-width:420px}
.client-design-copy .client-meta{margin-top:28px;padding-top:18px;border-top:1px solid #2a2a2a;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#aaa}

/* Films */
.client-film-page{padding:45px 5vw 90px 17.5vw;min-height:75vh}
.client-film-showcase{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.65fr);gap:38px;align-items:start}
.client-film-media{background:#050505;overflow:hidden;aspect-ratio:16/9}
.client-film-media video{width:100%;height:100%;object-fit:cover;display:block}
.client-film-copy{padding-top:4px}
.client-film-copy .eyebrow{margin-bottom:18px}
.client-film-copy h1{font-size:clamp(34px,4.4vw,68px);font-weight:300;line-height:1;margin-bottom:24px}
.client-film-facts{display:grid;gap:14px;padding:22px 0;border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;margin-bottom:25px}
.client-film-facts div{display:grid;grid-template-columns:80px 1fr;gap:18px;font-size:14px}
.client-film-facts span:first-child{color:#888;text-transform:uppercase;letter-spacing:.12em;font-size:10px;padding-top:3px}
.client-film-link{display:inline-flex;gap:8px;align-items:center;font-size:13px;border-bottom:1px solid currentColor;padding-bottom:5px}

/* Art */
.client-art-page{padding:50px 5vw 90px 11vw;min-height:75vh}
.client-art-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:36px}
.client-art-head h1{font-size:clamp(38px,5vw,74px);font-weight:300;line-height:1}
.client-art-head p{max-width:400px;color:#aaa;font-size:13px;line-height:1.6}
.client-art-reel-wrap{position:relative}
.client-art-reel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(330px,42vw);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 16px;scrollbar-width:thin}
.client-art-card{scroll-snap-align:start;min-width:0}
.client-art-image{background:#111;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden}
.client-art-image img{width:100%;height:100%;object-fit:contain;background:#f1f1ef}
.client-art-meta{display:grid;grid-template-columns:1fr auto;gap:16px;padding:16px 2px 0;border-top:1px solid #2b2b2b;margin-top:10px}
.client-art-meta h2{font-size:18px;font-weight:400;margin:0 0 6px}
.client-art-meta p{font-size:11px;line-height:1.55;color:#aaa;margin:0}
.client-art-meta .client-art-size{font-size:11px;color:#aaa;white-space:nowrap;padding-top:3px}
.client-art-reel-btn{position:absolute;z-index:4;top:42%;transform:translateY(-50%);width:42px;height:42px;border:1px solid #fff;background:#000c;color:#fff;border-radius:50%;display:grid;place-items:center;cursor:pointer}
.client-art-reel-btn.prev{left:-21px}.client-art-reel-btn.next{right:-21px}
.client-art-bio{display:grid;grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);gap:46px;margin-top:70px;padding-top:34px;border-top:1px solid #2a2a2a}
.client-art-bio h2{font-size:24px;font-weight:400}
.client-art-bio p{font-size:17px;line-height:1.75;color:#ddd;margin-bottom:18px;max-width:900px}
.client-art-quote{font-size:22px!important;color:#fff!important;margin:28px 0!important}
.client-art-link{display:inline-flex;border-bottom:1px solid currentColor;padding-bottom:5px;font-size:13px;gap:8px}

/* Studio supplied imagery */
.studio-page .za-rail-item img,.studio-page .studio-image-rail img,.studio-page .wide-story-media img{filter:grayscale(1);transition:filter .3s ease,transform .4s ease}
.studio-page .za-rail-item:hover img,.studio-page .studio-image-rail img:hover,.studio-page .wide-story-media:hover img{filter:grayscale(0)}
.studio-page .studio-copy section{margin-bottom:40px!important}
.studio-page .studio-copy p{line-height:1.62!important;margin-bottom:17px!important}

/* Casa LM full supplied information */
.client-lm-story{width:min(90vw,1380px);margin:4px auto 70px;padding-top:34px;border-top:1px solid #292929}
.client-lm-story h2{font-size:clamp(28px,3.3vw,48px);font-weight:300;margin-bottom:28px}
.client-lm-story-grid{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);gap:42px}
.client-lm-story h3{font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 18px;color:#aaa}
.client-lm-program{display:grid;gap:8px;font-size:14px;line-height:1.55}
.client-lm-copy p{font-size:16px;line-height:1.75;color:#ddd;margin:0 0 18px}
.client-lm-credit{font-size:11px!important;color:#888!important;margin-top:28px!important}

/* CV click-to-preview */
.cv-page .awards-list article,.cv-page .publication-list article{cursor:pointer;transition:background .2s ease,padding-left .2s ease}
.cv-page .awards-list article:hover,.cv-page .publication-list article:hover{background:#0b0b0b;padding-left:10px}
.client-modal{position:fixed;inset:0;z-index:100005;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:30px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.client-modal.open{opacity:1;visibility:visible}
.client-modal-dialog{position:relative;width:min(94vw,1100px);max-height:90vh;background:#0a0a0a;border:1px solid #2f2f2f;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.client-modal-media{display:flex;align-items:center;justify-content:center;min-height:300px;overflow:auto;background:#111}
.client-modal-media img{display:block;max-width:100%;max-height:76vh;object-fit:contain}
.client-modal-caption{padding:16px 20px;color:#ddd;font-size:13px;border-top:1px solid #2a2a2a}
.client-modal-close{position:absolute;right:12px;top:12px;z-index:2;width:36px;height:36px;border-radius:50%;background:#000d;border:1px solid #fff;color:#fff;font-size:20px;cursor:pointer}

/* Contact map / location arrow */
.contact-map{position:relative}
.client-location-arrow{position:absolute;left:18px;bottom:20px;z-index:4;display:inline-flex;align-items:center;gap:12px;background:#050505e8;border:1px solid #ffffff45;color:#fff;padding:13px 18px 13px 16px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.client-location-arrow::before{content:'↗';font-size:18px;line-height:1}
.client-location-arrow:hover{background:#fff;color:#000}


/* light theme compatibility */
html.za-theme-light .client-design-copy p,html.za-theme-light .client-art-bio p,html.za-theme-light .client-lm-copy p{color:#333}
html.za-theme-light .client-design-copy .client-meta,html.za-theme-light .client-art-meta p,html.za-theme-light .client-art-meta .client-art-size{color:#666}
html.za-theme-light .client-design-copy .client-meta,html.za-theme-light .client-film-facts,html.za-theme-light .client-art-bio,html.za-theme-light .client-lm-story{border-color:#d7d7d7}
html.za-theme-light .client-art-meta{border-color:#d7d7d7}
html.za-theme-light .client-art-reel-btn{background:#fff;color:#000;border-color:#000}
html.za-theme-light .client-art-quote{color:#111!important}
html.za-theme-light .cv-page .awards-list article:hover,html.za-theme-light .cv-page .publication-list article:hover{background:#f3f3f3}
html.za-theme-light .client-modal{background:rgba(245,245,245,.94)}
html.za-theme-light .client-modal-dialog{background:#fff;border-color:#ccc}
html.za-theme-light .client-modal-media{background:#eee}
html.za-theme-light .client-modal-caption{color:#222;border-color:#ccc}

@media(max-width:950px){
  .client-design-page,.client-film-page,.client-art-page{padding:36px 22px 70px}
  .client-design-grid,.client-film-showcase,.client-art-bio,.client-lm-story-grid{grid-template-columns:1fr}
  .client-design-media,.client-design-media img{min-height:360px}
  .client-film-media{order:1}.client-film-copy{order:2}
  .client-art-head{display:block}.client-art-head p{margin-top:16px}
  .client-art-reel{grid-auto-columns:minmax(280px,82vw)}
  .client-art-reel-btn{display:none}
  .client-lm-story{width:calc(100% - 30px);margin-bottom:50px}
}
/* Final client requirements from ZA WEB.pages */
.home-band .band-name{font-size:clamp(15px,1.15vw,20px)!important;letter-spacing:.025em!important}
.cv-top>.text-link{display:none!important}
#za-preloader .za-preloader-mark::after,#za-preloader .za-preloader-rule,#za-preloader .za-preloader-copy{display:none!important}
#za-preloader .za-preloader-mark img{filter:none!important;image-rendering:auto!important}


/* ===== Audited ZA WEB.pages requirements ===== */
/* Larger cover labels + remove diagonal arrow from covers */
.home-band .band-name{font-size:clamp(18px,1.5vw,28px)!important;letter-spacing:.025em!important}
.home-band .band-name>[aria-hidden="true"]{display:none!important}

/* Project name + year remain visible on category covers */
.project-card.client-caption-always .project-caption,
.projects-grid .project-card .project-caption{opacity:1!important;transform:none!important;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.projects-grid .project-card::after{opacity:.32!important;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.74) 100%)!important}
.projects-grid .project-card:hover::after,.projects-grid .project-card:focus-visible::after{opacity:.5!important}
.projects-grid .project-card .project-caption strong{font-size:clamp(20px,1.75vw,29px)!important}
.projects-grid .project-card .project-caption>span{font-size:clamp(11px,.78vw,13px)!important}

/* Design behaves like the project categories */
.client-design-houses-style{padding:45px 5vw 90px 17.5vw!important}
.client-design-houses-style .page-intro{margin-bottom:28px!important}
.client-design-projects{grid-template-columns:minmax(0,1fr)!important;max-width:1100px}
.client-design-projects .project-card{aspect-ratio:16/10;min-height:520px}
.client-design-projects .project-card>img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s ease,transform .4s ease}
.client-design-projects .project-card:hover>img,.client-design-projects .project-card:focus-visible>img{filter:grayscale(0);transform:scale(1.01)}

/* Tighter studio copy, with imagery remaining around the text */
.studio-page .client-studio-compact section{margin-bottom:28px!important}
.studio-page .client-studio-compact p{margin-bottom:13px!important;line-height:1.56!important}
.studio-page .client-studio-compact h1,.studio-page .client-studio-compact h2{margin-bottom:18px!important}
.studio-page .studio-editorial{gap:14px!important}

/* Brand "gesture" before returning home */
.brand-link.client-home-gesture .logo-perspective{animation:clientHomeGesture .42s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes clientHomeGesture{
  0%{transform:translateY(0) rotate(0) scale(1);filter:none}
  38%{transform:translateY(-5px) rotate(-4deg) scale(1.07);filter:drop-shadow(0 4px 12px rgba(255,255,255,.12))}
  72%{transform:translateY(1px) rotate(2deg) scale(.99)}
  100%{transform:translateY(0) rotate(0) scale(1)}
}

/* Exact lower-left location treatment */
.client-location-arrow{left:0!important;bottom:0!important;border-left:0!important;border-bottom:0!important}

/* Preloader: crisp HD silver vector, no decorative line/copy underneath */
#za-preloader .za-preloader-mark::after,#za-preloader .za-preloader-rule,#za-preloader .za-preloader-copy{display:none!important}
#za-preloader .za-preloader-mark img{filter:none!important;image-rendering:auto!important}

/* Design project detail page */
.design-static-detail{padding:30px 5vw 80px 17.5vw}
.design-static-detail .design-detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:34px;align-items:start}
.design-static-detail .design-detail-media{background:#0a0a0a;min-height:560px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.design-static-detail .design-detail-media img{width:100%;height:100%;min-height:560px;object-fit:cover;filter:grayscale(1);transition:filter .3s ease,transform .4s ease}
.design-static-detail .design-detail-media:hover img{filter:grayscale(0);transform:scale(1.01)}
.design-static-detail .design-detail-info h1{font-size:clamp(38px,4.5vw,68px);font-weight:300;line-height:1;margin-bottom:28px}
.design-static-detail .design-detail-info dl{display:grid;gap:14px;border-top:1px solid #2a2a2a;padding-top:20px}
.design-static-detail .design-detail-info dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#888;margin-bottom:3px}
.design-static-detail .design-detail-info dd{font-size:15px;color:#ddd}
.design-static-detail .design-detail-info .back-link{margin-top:28px;display:inline-flex}
html.za-theme-light .design-static-detail .design-detail-info dd{color:#222}
html.za-theme-light .design-static-detail .design-detail-info dl{border-color:#d7d7d7}

@media(max-width:950px){
  .client-design-houses-style{padding:34px 22px 70px!important}
  .client-design-projects .project-card{min-height:340px}
  .design-static-detail{padding:30px 22px 60px}
  .design-static-detail .design-detail-grid{grid-template-columns:1fr}
  .design-static-detail .design-detail-media,.design-static-detail .design-detail-media img{min-height:360px}
}


/* Art reel closer to the three-across reference on large screens */
@media(min-width:1180px){
  .client-art-reel{grid-auto-columns:minmax(300px,27vw)!important}
}

/* 2026-09-21 — Bio de artista complementaria */
.client-art-bio .za-artist-bio-extra{margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.client-art-bio .za-artist-bio-extra h3{margin:0 0 12px;font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.client-art-bio .za-artist-bio-extra p{margin:0;max-width:900px;line-height:1.7}
html.za-theme-light .client-art-bio .za-artist-bio-extra{border-color:rgba(0,0,0,.14)}

/* Header visit counter — intentionally minimal */
.header-tools .client-visit-count,.client-visit-count.in-header{display:inline-flex!important;align-items:center!important;color:inherit!important;white-space:nowrap!important;font-size:10px!important;line-height:1!important;letter-spacing:.16em!important;text-transform:uppercase!important;opacity:.72!important;position:relative!important;top:1px!important;visibility:visible!important}
.header-tools .client-visit-count::after,.client-visit-count.in-header::after{content:"";display:inline-block;width:1px;height:16px;background:currentColor;opacity:.22;margin-left:12px}
html.za-theme-light .header-tools .client-visit-count,html.za-theme-light .client-visit-count.in-header{color:#111!important}