/* ============================================================
   ZAHRA ALKANZ REALTY — ONE FONT SYSTEM FOR THE WHOLE WEBSITE
   Loaded LAST on every page, so it wins over older page styles.
   Cinzel ............ brand name in the logo only
   Cormorant Garamond  all headings
   Jost .............. body text, menus, buttons, forms
   IBM Plex Mono ..... figures (prices, permit numbers, stats)
   ============================================================ */
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/cormorant-garamond-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-weight:600;font-style:italic;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/jost-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/jost-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/jost-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/jost-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/jost-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Jost';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/jost-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/cinzel-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/cinzel-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Cinzel';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/cinzel-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-weight:800;font-style:normal;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}

:root{
  --zk-head:'Plus Jakarta Sans','Segoe UI',system-ui,Arial,sans-serif;
  --zk-body:'Jost','Segoe UI',system-ui,Arial,sans-serif;
  --zk-brand:'Cinzel',Georgia,serif;
  --zk-num:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  /* old variable names used inside the pages, pointed at the new fonts */
  --head:var(--zk-head);--f-head:var(--zk-head);
  --body:var(--zk-body);--f-body:var(--zk-body);
  --display:var(--zk-body);--f-display:var(--zk-body);
  --brand:var(--zk-brand);--f-brand:var(--zk-brand);
  --num:var(--zk-num);--f-num:var(--zk-num);
}

/* Body & UI */
html body,body input,body select,body textarea,body button,body .btn,body .btn-wa,
body nav,body nav a,body footer,body footer a,body footer p,body label,body p,body li,body td{
  font-family:var(--zk-body)!important}

/* Every heading on every page — calm, composed sans */
html body h1,html body h2,html body h3,html body h4,html body h5,
html body .tagline,html body .sq-title,html body .pop2-title,html body .cta h3,
html body .wu-list h3,html body .ret-dark h3,html body .sn h3{
  font-family:var(--zk-head)!important;font-style:normal!important;
  font-weight:700!important;letter-spacing:-.02em!important;line-height:1.18}
html body h3,html body h4,html body h5{font-weight:700!important;letter-spacing:-.01em!important}
html body .tagline{font-weight:800!important;letter-spacing:-.035em!important;line-height:1.04!important}
html body h1 em,html body h2 em,html body h1 i,html body h2 i,html body .tagline span,html body .tagline em{
  font-family:var(--zk-head)!important;font-style:normal!important}
html body .quote p{font-family:var(--zk-head)!important;font-style:normal!important;font-weight:600!important;letter-spacing:-.015em!important}

/* Brand wordmark in the logo keeps the logo's roman caps */
html body .zk-word b,html body .zk-word i{font-family:var(--zk-brand)!important;font-style:normal!important}

/* Small uppercase labels — same clean sans, gold, spaced */
html body .label,html body .eyebrow,html body .kicker,html body .tag,html body .tag-new,html body .role,
html body .brand-mark,html body .brand-sub,html body .cover-meta,html body .proj .dev,html body .tm-group,
html body footer h4,html body .off-tag,html body .hero-badge span,html body .permit span,html body .srk-eoi span,
html body .ex-tag,html body .deity .d,html body .dir-label,html body .dir-side,html body .center-cell .t,html body .cities,html body .devs div{
  font-family:var(--zk-head)!important;font-style:normal!important;font-weight:700!important;letter-spacing:.12em!important}

/* Figures */
html body .price,html body .permit,html body .stat b,html body .hero-badge b,html body .fact .big,
html body .off-table td,html body .cred b,html body .steps .n,html body .reasons .k{
  font-family:var(--zk-num)!important;font-variant-numeric:tabular-nums}

/* ============================================================
   READABILITY (WCAG AA) — darker gold for small text on light
   backgrounds; light text kept light on navy sections
   ============================================================ */
:root{--zk-gold-text:#7A5A1E}
html body .zk-ink-gold,html body .tm-group,
html body .lb-row.top .lb-rank,html body .pnum,html body .deity .d,html body .ex-tag,
html body header.zh .zk-word i,html body header.zh nav a.on,html body header.zh nav a:hover,
html body .steps .n,html body .reasons .k,html body .sn .n{color:var(--zk-gold-text)!important}
html body .lb-rank,html body .wu-list span{color:#6E6555!important}
html body .wu-list h3{color:#8A5E1F!important}
html body .pad.gold{color:#0F2A4A!important}
/* keep labels light on dark sections */
html body .hero .eyebrow,html body .vhero .eyebrow,html body .cta .eyebrow,
html body .off-feature .label,html body footer .label,html body .srk .label{color:#E8C877!important}
html body footer.zf p,html body footer.zf li,html body footer.zf a{color:#C9D6E6!important}
html body .off-feature-head p{color:#DCE5F0!important}
html body footer .zk-word i,html body .off-card .label{color:#E8C877!important}
html body .off-card p{color:#C9D6E6!important}
html body .zk-ink-light{color:#E8C877!important}
html body .vastu .copy p,html body .vastu li{color:#DCE5F0!important}
html body .zk-word i{font-size:.68rem!important;letter-spacing:.14em!important;font-weight:700!important}

/* v8 readability: larger logo tagline and small labels */
html body .zk-word i{font-size:.74rem!important;letter-spacing:.09em!important;font-weight:700!important;color:#6B4E18!important}
html body footer .zk-word i,html body footer.zf .zk-word i{color:#E8C877!important}
html body .label,html body .eyebrow,html body .kicker,html body .tag,html body .role,html body .tm-group,html body footer h4{font-size:max(13px,.8rem)!important}
html body .permit span,html body .proj .dev,html body .tag-new{font-size:12.5px!important}
html body .note,html body .world-note,html body .cmp-src{font-size:max(13.5px,.85rem)}
html body footer p,html body footer .foot p{color:#C9D6E6!important}

/* v12 mobile polish: readable small text, comfortable tap targets, no iOS zoom on forms */
html body .off-tag,html body .idesk-tag,html body .ts-item span{font-size:12.5px!important}
html body textarea,html body input:not([type=checkbox]):not([type=radio]),html body select{font-size:16px!important}
@media (max-width:760px){
  html body .off-more{display:inline-flex;align-items:center;min-height:44px;margin-top:4px!important}
  html body #contact .lines a,html body .info p a,html body .consent-line a{display:inline-block;padding:10px 0;min-height:44px;box-sizing:border-box}
  html body .consent-line a{padding:0;min-height:0}
  html body .zk-filter button{min-height:40px}
  html body .btn,html body .zh-btn,html body .vbtn,html body .send{min-height:46px}
}