/* Waterfront Karachi guide layout.
   Salwa family type (Lora headings, Inter text) on a publication structure.
   House rules from the SYNQ playbook: no eyebrow labels, no letter-spaced
   capitals, no tight negative tracking, no oversized bold display type,
   no gradient accents, no rows of icon cards. Accent rules are solid. */
:root {
  --wk-ink: #121619;
  --wk-text: #2a3338;
  --wk-muted: #5f6d74;
  --wk-line: #e4e9ec;
  --wk-paper: #ffffff;
  --wk-mist: #f4f7f8;
  --wk-sea: #1d7896;
  --wk-sea-dark: #155a71;
  --wk-sky: #a9dcea;
  --wk-night: #10191e;
  --wk-serif: "Lora", Georgia, "Times New Roman", serif;
  --wk-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wk-wrap: 1180px;
  --wk-read: 720px;
}
body.wk { background: var(--wk-paper); color: var(--wk-text); font-family: var(--wk-sans); font-size: 17px; line-height: 1.65; }
.wk *, .wk *::before, .wk *::after { box-sizing: border-box; }
/* Salwa's compiled sheet sets p, li, a and label to 16px Roboto at normal
   weight everywhere, stripes odd table rows and makes tbody inline. Undo those
   inside the guide so the rules below decide. Keep this block first. */
.wk p, .wk li, .wk a, .wk label { font-family: inherit; font-size: inherit; font-weight: inherit; }
.wk tbody { display: table-row-group; width: auto; }
.wk tr { width: auto !important; background: none; }
.wk tr:nth-child(odd) { background: none; }
.wk .wk-btn, .wk .wk-btn:hover, .wk .wk-toc a, .wk .wk-crumbs a, .wk .wk-card, .wk .wk-hubcard, .wk .wk-latest a { text-decoration: none; }
.wk img { max-width: 100%; height: auto; display: block; }
.wk a { color: inherit; }
.wk h1, .wk h2, .wk h3, .wk h4 { font-family: var(--wk-serif); color: var(--wk-ink); font-weight: 600; letter-spacing: 0; text-wrap: balance; }
.wk-wrap { max-width: var(--wk-wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.wk-skip { position: absolute; left: -9999px; }
.wk-skip:focus { left: 16px; top: 16px; z-index: 99; background: #fff; padding: 8px 12px; }
.wk :focus-visible { outline: 2px solid var(--wk-sea); outline-offset: 2px; }

/* ---------- Masthead ---------- */
.wk-mast { border-bottom: 1px solid var(--wk-line); background: #fff; }
.wk-mast__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.wk-mast__logo { flex-shrink: 0; display: block; line-height: 0; }
.wk-mast__logo img { height: 40px; width: auto; max-width: none; }
.wk-mast__logo span { font: 600 24px/1 var(--wk-serif); color: var(--wk-ink); }
.wk-mast__contact { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.wk-mast__phone { color: var(--wk-ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.wk-nav { border-top: 1px solid var(--wk-line); }
.wk-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 30px; flex-wrap: wrap; }
.wk-nav a { display: inline-block; padding: 13px 0 12px; font-size: 15px; font-weight: 500; color: var(--wk-text); text-decoration: none; border-bottom: 2px solid transparent; }
.wk-nav a:hover, .wk-nav .current-menu-item > a, .wk-nav .current-page-ancestor > a { color: var(--wk-ink); border-bottom-color: var(--wk-sea); }
.wk-menu-toggle { display: none; background: none; border: 1px solid var(--wk-line); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
@media (max-width: 860px) {
  .wk-mast__bar { min-height: 64px; }
  .wk-mast__logo img { height: 30px; }
  .wk-mast__phone, .wk-mast__contact .wk-btn--ghost { display: none; }
  .wk-menu-toggle { display: inline-flex; }
  .wk-nav { display: none; }
  .wk-nav.is-open { display: block; }
  .wk-nav ul { flex-direction: column; gap: 0; }
  .wk-nav a { padding: 12px 0; border-bottom: 1px solid var(--wk-line); width: 100%; }
}

/* ---------- Buttons ---------- */
.wk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font: 600 15px/1.2 var(--wk-sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.wk-btn--sea { background: var(--wk-sea); color: #fff; }
.wk-btn--sea:hover { background: var(--wk-sea-dark); }
.wk-btn--sky { background: var(--wk-sky); color: #0b3340; }
.wk-btn--sky:hover { background: #93d0e1; }
.wk-btn--ghost { border-color: var(--wk-line); color: var(--wk-ink); background: #fff; }
.wk-btn--ghost:hover { border-color: var(--wk-ink); }
.wk-btn--wa { background: #1f8f4e; color: #fff; }
.wk-btn--sm { padding: 8px 14px; font-size: 14px; }
.wk-btn svg { width: 17px; height: 17px; flex: none; }

/* ---------- Home ---------- */
.wk-section { padding: 56px 0; }
.wk-section + .wk-section { border-top: 1px solid var(--wk-line); }
.wk-section--mist { background: var(--wk-mist); border-top: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line); }
.wk-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.wk-section__head h2 { font-size: 28px; margin: 0; }
.wk-section__head a { font-size: 15px; font-weight: 600; color: var(--wk-sea); text-decoration: none; }
.wk-lead { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 44px; padding: 40px 0 56px; }
.wk-lead__img { border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--wk-mist); }
.wk-lead__img img { width: 100%; height: 100%; object-fit: cover; }
.wk-lead h1 { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.18; margin: 22px 0 12px; }
.wk-lead h1 a { text-decoration: none; }
.wk-lead h1 a:hover { color: var(--wk-sea); }
.wk-lead p { margin: 0 0 12px; font-size: 18px; color: var(--wk-text); max-width: 62ch; }
.wk-meta { font-size: 14px; color: var(--wk-muted); }
.wk-latest h2 { font-size: 20px; margin: 0 0 6px; }
.wk-latest ol { list-style: none; margin: 0; padding: 0; }
.wk-latest li { padding: 16px 0; border-top: 1px solid var(--wk-line); }
.wk-latest a { text-decoration: none; display: block; }
.wk-latest a strong { display: block; font: 600 18px/1.35 var(--wk-serif); color: var(--wk-ink); margin-bottom: 4px; }
.wk-latest a:hover strong { color: var(--wk-sea); }
@media (max-width: 900px) { .wk-lead { grid-template-columns: 1fr; gap: 30px; } }

.wk-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wk-hubcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--wk-line); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color .15s; }
.wk-hubcard:hover { border-color: var(--wk-sea); }
.wk-hubcard__img { aspect-ratio: 16 / 9; background: var(--wk-mist); }
.wk-hubcard__img img { width: 100%; height: 100%; object-fit: cover; }
.wk-hubcard__body { padding: 20px 22px 22px; }
.wk-hubcard h3 { font-size: 22px; margin: 0 0 6px; }
.wk-hubcard p { font-size: 15px; color: var(--wk-muted); margin: 0 0 16px; }
.wk-hubcard dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; padding-top: 16px; border-top: 1px solid var(--wk-line); }
.wk-hubcard dt { font-size: 13px; color: var(--wk-muted); }
.wk-hubcard dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--wk-ink); }
@media (max-width: 900px) { .wk-desk { grid-template-columns: 1fr; } }

.wk-numbers { background: var(--wk-night); color: #fff; padding: 56px 0; }
.wk-numbers h2 { color: #fff; font-size: 24px; margin: 0 0 30px; }
.wk-numbers__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.wk-numbers__row div { border-top: 2px solid var(--wk-sea); padding-top: 16px; }
.wk-numbers b { display: block; font: 600 26px/1.2 var(--wk-serif); color: #fff; }
.wk-numbers span { display: block; margin-top: 8px; font-size: 15px; color: #c3cfd4; line-height: 1.5; }
.wk-numbers small { display: block; margin-top: 30px; font-size: 13px; color: #8c9ca3; }
@media (max-width: 900px) { .wk-numbers__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wk-numbers__row { grid-template-columns: 1fr; } }

.wk-stories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.wk-story { text-decoration: none; }
.wk-story__img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--wk-mist); }
.wk-story__img img { width: 100%; height: 100%; object-fit: cover; }
.wk-story strong { display: block; font: 600 18px/1.35 var(--wk-serif); color: var(--wk-ink); margin: 14px 0 6px; }
.wk-story:hover strong { color: var(--wk-sea); }
.wk-story span { font-size: 14.5px; color: var(--wk-muted); }
@media (max-width: 900px) { .wk-stories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wk-stories { grid-template-columns: 1fr; } }

/* ---------- Article (hub, project, guide) ---------- */
.wk-article-head { max-width: 860px; margin: 0 auto; padding-top: 34px; }
.wk-crumbs { font-size: 14px; color: var(--wk-muted); margin-bottom: 18px; }
.wk-crumbs a { color: var(--wk-muted); text-decoration: none; }
.wk-crumbs a:hover { color: var(--wk-sea); }
.wk-crumbs span[aria-hidden] { margin: 0 8px; }
.wk-article-head h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; margin: 0 0 16px; }
.wk-standfirst { font: 400 20px/1.55 var(--wk-serif); color: #3a464c; margin: 0 0 22px; }
.wk-byline { display: flex; flex-wrap: wrap; gap: 6px 22px; padding: 14px 0; border-top: 1px solid var(--wk-line); border-bottom: 1px solid var(--wk-line); font-size: 14px; color: var(--wk-muted); }
.wk-byline strong { color: var(--wk-ink); font-weight: 600; }
.wk-figure { max-width: 1100px; margin: 30px auto 0; }
.wk-figure__img { border-radius: 12px; overflow: hidden; aspect-ratio: 21 / 9; background: var(--wk-mist); }
.wk-figure__img img { width: 100%; height: 100%; object-fit: cover; }
.wk-figure figcaption { font-size: 13.5px; color: var(--wk-muted); margin-top: 10px; }
.wk-article-body { max-width: 1100px; margin: 0 auto; padding: 40px 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
@media (max-width: 960px) { .wk-article-body { grid-template-columns: minmax(0, 1fr); gap: 32px; } .wk-figure__img { aspect-ratio: 16 / 9; } }

.wk-answer { background: var(--wk-mist); border-left: 3px solid var(--wk-sea); border-radius: 0 10px 10px 0; padding: 18px 22px; margin: 0 0 32px; }
.wk-answer h2 { font: 600 16px/1.3 var(--wk-sans); color: var(--wk-sea); margin: 0 0 8px; }
.wk-answer p { margin: 0; font-size: 17.5px; color: var(--wk-ink); }

.wk-prose { max-width: var(--wk-read); }
.wk-prose > * + * { margin-top: 0; }
.wk-prose p { margin: 0 0 18px; }
.wk-prose h2 { font-size: 27px; line-height: 1.25; margin: 44px 0 14px; scroll-margin-top: 24px; }
.wk-prose h3 { font-size: 21px; margin: 30px 0 10px; }
.wk-prose a { color: var(--wk-sea); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.wk-prose ul, .wk-prose ol { margin: 0 0 20px; padding-left: 22px; }
.wk-prose li { margin-bottom: 8px; }
.wk-prose strong { color: var(--wk-ink); }
.wk-prose table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 15.5px; display: table; }
.wk-main, .wk-prose { min-width: 0; }
@media (max-width: 640px) { .wk-prose table { display: block; max-width: 100%; overflow-x: auto; } }
.wk-prose thead th { background: var(--wk-mist); font-weight: 600; color: var(--wk-ink); }
.wk-prose th, .wk-prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--wk-line); vertical-align: top; }
.wk-prose .wk-note { background: var(--wk-mist); border-radius: 10px; padding: 16px 20px; margin: 22px 0; font-size: 16px; }
.wk-facts-table { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-size: 15.5px; }
.wk-facts-table th, .wk-facts-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--wk-line); }
.wk-facts-table th { width: 40%; color: var(--wk-muted); font-weight: 500; }
.wk-facts-table td { color: var(--wk-ink); font-weight: 600; }

.wk-rail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 960px) { .wk-rail { position: static; } }
.wk-box { border: 1px solid var(--wk-line); border-radius: 12px; padding: 20px 22px; background: #fff; }
.wk-box h2 { font: 600 17px/1.3 var(--wk-serif); margin: 0 0 14px; }
.wk-glance { margin: 0; display: grid; gap: 12px; }
.wk-glance dt { font-size: 13px; color: var(--wk-muted); }
.wk-glance dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--wk-ink); line-height: 1.4; }
.wk-status { display: inline-block; font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 999px; background: #e3f2f6; color: var(--wk-sea-dark); }
.wk-status--sold { background: #f1f1f1; color: #5a5a5a; }
.wk-toc ol { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.wk-toc li { margin-bottom: 8px; }
.wk-toc a { color: var(--wk-text); text-decoration: none; }
.wk-toc a:hover { color: var(--wk-sea); }

/* Adviser card and contact panel */
.wk-adviser { background: var(--wk-night); color: #e6edf0; border-radius: 12px; padding: 22px; }
.wk-adviser h2 { color: #fff; font: 600 18px/1.3 var(--wk-serif); margin: 0 0 6px; }
.wk-adviser p { margin: 0 0 16px; font-size: 14.5px; color: #c3cfd4; line-height: 1.55; }
.wk-adviser__people { display: grid; gap: 14px; margin-bottom: 16px; }
.wk-person { display: flex; gap: 12px; align-items: center; }
.wk-person img, .wk-person__ph { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: #22343c; }
.wk-person strong { display: block; color: #fff; font-size: 15.5px; }
.wk-person span { display: block; font-size: 13.5px; color: #a9b8bf; }
.wk-person a { color: var(--wk-sky); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.wk-adviser .wk-btn { width: 100%; margin-top: 8px; }

.wk-contact { background: var(--wk-mist); border-top: 1px solid var(--wk-line); padding: 64px 0; }
.wk-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 56px; align-items: start; }
.wk-contact h2 { font-size: 30px; margin: 0 0 12px; }
.wk-contact__lede { font-size: 17.5px; margin: 0 0 26px; max-width: 54ch; }
.wk-contact .wk-person img, .wk-contact .wk-person__ph { width: 64px; height: 64px; }
.wk-contact .wk-person strong { color: var(--wk-ink); font-size: 17px; }
.wk-contact .wk-person span { color: var(--wk-muted); }
.wk-contact .wk-person a { color: var(--wk-sea); }
.wk-contact__people { display: grid; gap: 18px; margin-bottom: 24px; }
.wk-contact__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wk-formcard { background: #fff; border: 1px solid var(--wk-line); border-radius: 14px; padding: 28px; }
.wk-formcard h3 { font-size: 22px; margin: 0 0 6px; }
.wk-formcard > p { font-size: 15px; color: var(--wk-muted); margin: 0 0 18px; }
.wk-formcard form { display: grid; gap: 12px; }
.wk-formcard label { display: block; font-size: 14px; font-weight: 600; color: var(--wk-ink); margin-bottom: 5px; }
.wk-formcard input, .wk-formcard select, .wk-formcard textarea { width: 100%; font: 16px var(--wk-sans); color: var(--wk-ink); background: #fff; border: 1.5px solid var(--wk-line); border-radius: 10px; padding: 11px 13px; min-height: 46px; }
.wk-formcard input:focus, .wk-formcard select:focus, .wk-formcard textarea:focus { border-color: var(--wk-sea); outline: none; }
.wk-formcard .wk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wk-formcard button[type=submit] { width: 100%; margin-top: 6px; }
.wk-formcard .wk-small { font-size: 13px; color: var(--wk-muted); margin: 6px 0 0; }
.wk-form-note { min-height: 1.2em; margin: 6px 0 0; font-weight: 600; font-size: 15px; }
.wk-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
@media (max-width: 900px) { .wk-contact__grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 480px) { .wk-formcard .wk-row2 { grid-template-columns: 1fr; } .wk-formcard { padding: 22px; } }

/* FAQ, related, sources */
.wk-faq { max-width: var(--wk-read); }
.wk-faq h2 { font-size: 27px; margin: 0 0 16px; }
.wk-faq__item { border-top: 1px solid var(--wk-line); }
.wk-faq__item:last-child { border-bottom: 1px solid var(--wk-line); }
.wk-faq__q { width: 100%; text-align: left; background: none; border: 0; padding: 18px 40px 18px 0; font: 600 17px/1.4 var(--wk-sans); color: var(--wk-ink); cursor: pointer; position: relative; }
.wk-faq__q::after { content: "+"; position: absolute; right: 6px; top: 14px; font-size: 24px; font-weight: 400; color: var(--wk-sea); }
.wk-faq__q[aria-expanded="true"]::after { content: "\2212"; }
.wk-faq__a p { margin: 0 0 18px; }
.wk-related { padding: 56px 0; border-top: 1px solid var(--wk-line); }
.wk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .wk-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wk-cards { grid-template-columns: 1fr; } }
.wk-card { display: flex; flex-direction: column; text-decoration: none; }
.wk-card__img { aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--wk-mist); }
.wk-card__img img { width: 100%; height: 100%; object-fit: cover; }
.wk-card strong { font: 600 19px/1.3 var(--wk-serif); color: var(--wk-ink); margin: 14px 0 4px; }
.wk-card:hover strong { color: var(--wk-sea); }
.wk-card span { font-size: 14.5px; color: var(--wk-muted); }
.wk-sources { max-width: var(--wk-read); font-size: 14.5px; color: var(--wk-muted); }
.wk-sources h2 { font-size: 20px; margin: 0 0 10px; }
.wk-sources ol { padding-left: 20px; margin: 0; }
.wk-sources li { margin-bottom: 6px; }
.wk-sources a { color: var(--wk-muted); }
.wk-after { padding: 8px 0 56px; display: grid; gap: 48px; }

/* Floating contact buttons and mobile bar */
.wk-float { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.wk-float .wk-btn { box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
@media (max-width: 860px) {
  .wk-float { left: 0; right: 0; bottom: 0; flex-direction: row; gap: 0; background: #fff; border-top: 1px solid var(--wk-line); padding: 10px max(12px, env(safe-area-inset-left, 0px)) max(10px, env(safe-area-inset-bottom, 0px)); }
  .wk-float .wk-btn { flex: 1; box-shadow: none; border-radius: 10px; margin: 0 4px; }
  body.wk { padding-bottom: 72px; }
}

/* Footer (Salwa black footer, guide links) */
.wk-foot { background: #000; color: #cdd5d9; padding: 56px 0 28px; font-size: 15px; }
.wk-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.wk-foot h2 { font: 600 16px/1.3 var(--wk-sans); color: #fff; margin: 0 0 14px; }
.wk-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.wk-foot a { color: #cdd5d9; text-decoration: none; }
.wk-foot a:hover { color: #fff; }
.wk-foot__logo img { height: 38px; width: auto; margin-bottom: 16px; }
.wk-foot__legal { margin-top: 40px; padding-top: 22px; border-top: 1px solid #262c2f; font-size: 13.5px; color: #8e9ba1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.wk-foot__legal p { margin: 0; max-width: 80ch; }
@media (max-width: 900px) { .wk-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wk-foot__grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .wk * { transition: none !important; } }

/* Phone masthead: wordmark sized by height; the fixed Call back bar replaces the pill */
@media (max-width: 520px) { .wk-mast__logo img { height: 24px; } .wk-mast__contact .wk-mast__advice { display: none; } }