/* =========================================================================
   MKPL Architects · MODX + ContentBlocks
   Port of the MKPL-demo V2 pages (Home v2, Projects V2, People v2,
   Project - BHA Campus V2, Nav). Values copied 1:1 from the prototype.
   ========================================================================= */

@keyframes mkplCue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;font-family:"proxima-nova",system-ui,sans-serif;color:#403f38;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
/* 3-nov: links that already draw a bottom border (category bar etc.) animate that border instead of adding an underline */
@keyframes mkUlRe{0%{border-bottom-color:transparent}100%{border-bottom-color:currentColor}}
a[style*="border-bottom"]:not(header a):not([style*="display: grid"]):hover{animation:mkUlRe .5s ease forwards}
a:not(header a):not(:has(img,svg,video,iframe,[role=img])):not([style*="border-bottom"]){text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .4s ease}
a:not(header a):not(:has(img,svg,video,iframe,[role=img])):not([style*="border-bottom"]):hover{text-decoration-color:currentColor}
img{border:0}

/* ---- Desktop / phone branches (prototype switched at 760px) ------------- */
@media (min-width:761px){.ph{display:none!important}}
@media (max-width:760px){.dk{display:none!important}}

/* Everything after a sticky hero scrolls over it */
.mk-over{position:relative;z-index:1;background:#fff}

/* ---- Nav ---------------------------------------------------------------- */
/* Home preloader: header hidden until the hero opens (navHidden) */
html[data-mk-intro] header[data-navfix]{opacity:0!important;transform:translateY(-16px)!important}
/* nav-style "bar" turns into the burger below 880px (desktop branch) */
@media (max-width:879px){header .mk-navbar{display:none!important}}
@media (min-width:880px){header .mk-burger{display:none!important}}
.mk-msub:hover{opacity:1!important}
.mk-hov-ul:hover{border-bottom-color:#fff!important}

/* ---- Footer ------------------------------------------------------------- */
.mk-band ~ .mk-foot,.mk-band ~ .mk-foot-m{border-top:1px solid rgba(255,255,255,.15)}

/* ---- Project facts / text (shared markup, desktop vs phone sizes) ------- */
.mk-fact-k{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#403f38}
.mk-fact-v{margin:0;font-size:16px;letter-spacing:.5px;line-height:1.4}
.mk-statement{margin:0;font-size:38px;font-weight:300;letter-spacing:.5px;line-height:1.2}
.mk-body{margin:0;font-size:18px;line-height:1.6;text-wrap:pretty}
.mk-body p{margin:0}
.mk-body p + p{margin-top:1.6em}
@media (max-width:760px){
  .mk-fact-k{margin:0 0 3px;font-size:11px}
  .mk-fact-v{font-size:14px;letter-spacing:0}
  .mk-statement{margin:0 0 16px;font-size:24px;font-weight:400;line-height:1.2}
  .mk-body{font-size:14px}
}

/* ---- Gallery rows (heights come from the layout settings) --------------- */
.mk-gal{display:grid;gap:2px;margin-top:2px}
.mk-gal > img{width:100%;height:var(--h,560px);object-fit:cover;display:block}
.mk-gal.c1{grid-template-columns:1fr}
.mk-gal.c11{grid-template-columns:1fr 1fr}
.mk-gal.c12{grid-template-columns:1fr 2fr}
.mk-gal.c21{grid-template-columns:2fr 1fr}
.mk-gal.c111{grid-template-columns:1fr 1fr 1fr}
@media (max-width:760px){
  .mk-gal > img{height:var(--hm,260px)}
  .mk-gal.m-stack{grid-template-columns:1fr}
}
.mk-gal-end{height:90px}
@media (max-width:760px){.mk-gal-end{height:30px}}

/* ---- Projects catalog ---------------------------------------------------- */
[data-qink="1"]::placeholder{color:#fff;opacity:.8}
.mk-pcard img{will-change:transform}
.mk-src-list{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Project "next" block hovers ---------------------------------------- */
.mk-zoom-3 img{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.mk-zoom-3:hover img{transform:scale(1.03)}

/* ---- Pebble cursor (site/pebble-cursor.css) ------------------------------ */
html, html * { cursor: default; }
html :is(a[href], a[href] *, button, button *, [role="button"], [role="button"] *, label, select, summary, [onclick]) { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%272030%20-475%20230%20230%27%3E%3Cg%20transform%3D%27scale(1%2C-1)%27%3E%3Cpath%20d%3D%27m%202082.44%2C260.684%20c%2066.68%2C0%20158.2%2C12.961%20159.32%2C74.089%200.92%2C50.95%20-142.64%2C157.454%20-177.83%2C122.258%20-35.2%2C-35.195%20-48.15%2C-196.347%2018.51%2C-196.347%20z%27%20fill%3D%27%23403f38%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2714%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 4 2, pointer !important; }
html input, html textarea { cursor: text !important; }

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important}
}

/* ---- People grids (2nov: 6 cols on desktop; airy gap 20/12) ---- */
.mk-pgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;padding:0 max(40px, 5vw)}
.mk-pgrid-d{padding-bottom:60px}
.mk-pgrid-s{padding-bottom:90px}
@media (min-width:1800px){.mk-pgrid{grid-template-columns:repeat(6,1fr)}}
.mk-pc{position:relative;display:block;aspect-ratio:3 / 4;overflow:hidden;background:#f2f1ec}
.mk-pc-img{position:absolute;inset:0;background-size:cover;background-position:center 20%;transform:scale(1);transition:transform 1.6s cubic-bezier(.22,1,.36,1), filter .8s ease;filter:grayscale(1) contrast(1.05)}
.mk-pc-cap{position:absolute;inset:auto 0 0 0;padding:40px 14px 14px;background:linear-gradient(transparent,rgba(0,0,0,.45));color:#fff;transition:opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1);pointer-events:none}
.mk-pc-n{display:block;font-size:16px;font-weight:600}
.mk-pc-t{display:block;font-size:14px;opacity:.9}
a.mk-pc:hover{opacity:1}
.mk-li:hover{opacity:.55!important}
@media (min-width:761px){
  .mk-pc-s .mk-pc-cap{opacity:0;transform:translateY(8px);transition:opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1)}
  .mk-pc:hover .mk-pc-img{transform:scale(1.035)}
  .mk-pc-s:hover .mk-pc-cap{opacity:1;transform:translateY(0);transition:opacity .7s ease .08s, transform .9s cubic-bezier(.22,1,.36,1) .08s}
}
@media (max-width:760px){
  .mk-pgrid{grid-template-columns:1fr 1fr;gap:12px;padding:0 20px}
  .mk-pgrid-d{padding-bottom:36px}
  .mk-pgrid-s{padding-bottom:56px}
  .mk-pc-d{cursor:pointer}
  .mk-pc-d .mk-pc-cap{padding:40px 12px 12px}
  .mk-pc-d .mk-pc-n{font-size:15px}
  .mk-pc-d .mk-pc-t{font-size:12px}
  .mk-pc-s .mk-pc-cap{padding:30px 8px 8px}
  .mk-pc-s .mk-pc-n{font-size:12px;line-height:1.2}
  .mk-pc-s .mk-pc-t{font-size:11px}
}
.mk-pm-bio p{margin:0 0 10px;max-width:470px;font-size:14px;line-height:1.6}
.mk-pm-bio-m p{margin:0 0 9px;font-size:14px;line-height:1.6}

/* ---- Project gallery + viewer (Project - BHA Campus, gallery grid) ------ */
.mk-galv button:hover img{transform:scale(1.02)}
.mk-galv button:hover{opacity:1}
.mk-lb-arrow{opacity:.85}
.mk-lb-arrow:hover{opacity:1!important}

/* ---- Studio pages: About Us text blocks + fade-up reveal ----------------- */
.mk-tb p{margin:0;font-size:18px;line-height:1.6;max-width:40em;text-wrap:pretty}
.mk-tb-m{padding:48px 20px;display:flex;flex-direction:column;gap:20px}
.mk-tb-m p{margin:0;font-size:14px;line-height:1.6;max-width:40em;text-wrap:pretty}
.mk-tb-m.mk-tb-lead{padding:56px 20px 48px;gap:28px}

[data-fu]{transition:opacity 1s ease, transform 1.2s cubic-bezier(.16,1,.3,1)}
html.fu-on [data-fu]:not([data-fud]){opacity:0;transform:translateY(28px)}
.mk-pub p{margin:0;font-size:18px;line-height:1.6;max-width:40em;text-wrap:pretty}
.mk-pub-m p{margin:0;font-size:14px;line-height:1.6;max-width:40em;text-wrap:pretty}
.mk-tb-m.mk-tb-space{padding:56px 20px 48px;gap:28px}
/* project gallery: gentle zoom on hover (BHA, 30 oct) */
[data-gallery] button img{transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
[data-gallery] button:hover img{transform:scale(1.02)!important}
.mk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* QA 31-oct: people hover */
.mk-pc .mk-pc-img{transition:transform 1.6s cubic-bezier(.22,1,.36,1), filter .8s ease, clip-path 1.5s cubic-bezier(.16,1,.3,1) !important}

/* ---- Ideas / Explorations (site/Exploration.dc.html) ---- */
.mk-ex-t{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;padding:40px max(40px, 5vw) 90px}
.mk-ex-t.mk-ex-first{padding-top:80px}
.mk-ex-h{grid-column:1 / span 4;margin:0;font-size:38px;font-weight:300;letter-spacing:.5px;line-height:1.2;text-wrap:pretty}
.mk-ex-b{grid-column:6 / span 7;display:flex;flex-direction:column;gap:24px}

.mk-ex-b p{margin:0;font-size:18px;line-height:1.6;text-wrap:pretty}
.mk-ex-imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 max(40px, 5vw) 90px;align-items:start}
.mk-ex-im{grid-column:1 / -1}
.mk-ex-im img{display:block;width:100%;height:auto}
.mk-ex-full,.mk-ex-half{background:#f2f1ec}
.mk-ex-half{grid-column:auto}
.mk-ex-indent{padding-left:calc((100% - 220px) * 5 / 12 + 100px)}
.mk-ex-next{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;margin:40px max(40px, 5vw) 120px;padding:48px;background:#f2f1ec}
.mk-ex-next-l{display:flex;flex-direction:column;gap:8px}
.mk-ex-next-k{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.mk-ex-next-t{font-size:30px;font-weight:300;letter-spacing:.5px;line-height:1.2}
.mk-ex-wrap{position:relative;z-index:1;background:#fff;display:flow-root}
@media (max-width:760px){
.mk-ex-t{grid-template-columns:1fr;padding:24px 20px 48px}
.mk-ex-t.mk-ex-first{padding-top:48px}
.mk-ex-h{grid-column:1 / -1;font-size:20px}
.mk-ex-b,.mk-ex-noh .mk-ex-b{grid-column:1 / -1}
.mk-ex-b p{font-size:14px}
.mk-ex-imgs{grid-template-columns:1fr;padding:0 20px 48px}
.mk-ex-half{grid-column:1 / -1}
.mk-ex-indent{padding-left:0}
.mk-ex-next{margin:24px 20px 64px;padding:28px 24px}
.mk-ex-next-t{font-size:20px}
}

/* QA 31-oct: on phone, Awards (and any fact flagged as long) take a full row */
.ph [class*="mk-fact-award"]{grid-column:1 / -1;padding-top:6px;border-top:1px solid #e4e3dd}
.ph [class*="mk-fact-award"] .mk-fact-v{line-height:1.6}

/* 2nov: facts can list several items (one per line), e.g. Awards */
.mk-fact-vs{display:flex;flex-direction:column;gap:12px}
.mk-fact-vs .mk-fact-v{margin:0}