/* =========================================================================
   QamarNext Technologies — Case Studies / Work page
   Extends style.css + pages.css + about.css (crumb, CTA). Scoped .wk-*
   ========================================================================= */

.work-page{ display: block; }
.wk-section{ position: relative; padding: var(--space-section) var(--gutter); }
.wk-section.on-dim{ background: var(--white-dim); color: var(--ink); }

/* ---------- Hero ---------- */
.wk-hero{
  position: relative; overflow: hidden;
  background: var(--coal); color: var(--paper);
  padding: calc(var(--nav-h) + var(--space-lg)) 0 0;
}
.wk-hero::before{
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(55% 80% at 80% 20%, rgba(45,217,196,0.12), transparent 70%);
}
.wk-hero-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.35; pointer-events: none; }
.wk-hero-inner{ position: relative; z-index: 2; padding: 0 var(--gutter) var(--space-xl); }
.wk-hero .eyebrow{ color: var(--teal-light); }
.wk-hero-title{
  font-family: var(--font-display); font-size: var(--fs-hero);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.02em;
  margin: var(--space-md) 0; max-width: 16ch;
}
.wk-hero-title em{
  font-style: normal;
  background: linear-gradient(100deg, var(--teal), var(--teal-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wk-hero-lede{ font-size: var(--fs-body-lg); color: var(--paper-muted); max-width: 52ch; }
.wk-hero-stats{
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
  margin: var(--space-lg) 0 0; padding-top: var(--space-md);
  border-top: 1px solid var(--line-on-coal);
}
.wk-hero-stats div{ display: flex; flex-direction: column; gap: 0.3em; }
.wk-hero-stats dt{ font-family: var(--font-mono); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--paper-muted); }
.wk-hero-stats dd{ margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.wk-hero-stats div:not(:last-child) dd{ font-family: var(--font-mono); font-weight: 500; font-size: 1.9rem; color: var(--teal-light); line-height: 1; }

.wk-marquee{
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-on-coal);
  overflow: hidden; padding: 1.1rem 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.wk-marquee-track{ display: flex; width: max-content; animation: wkMarquee 38s linear infinite; }
.wk-marquee span{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 1rem + 1vw, 2rem); letter-spacing: -0.01em;
  color: rgba(246,248,247,0.28); padding: 0 1.4rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2.8rem;
}
.wk-marquee span::after{ content: '✦'; font-size: 0.5em; color: var(--teal); opacity: 0.7; }
@keyframes wkMarquee{ to{ transform: translateX(-50%); } }

/* ---------- Browser frame + screenshot ---------- */
.wk-browser{
  display: block; position: relative;
  border-radius: 12px; overflow: hidden;
  background: var(--coal-raised);
  border: 1px solid var(--line-on-white);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 24px 50px -24px rgba(11,20,32,0.35);
}
.wk-browser-bar{
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  background: #0E1925; border-bottom: 1px solid var(--line-on-coal);
}
.wk-browser-bar i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(246,248,247,0.18); }
.wk-browser-bar span{
  margin-left: 10px; flex: 1; max-width: 22rem;
  font-size: 0.68rem; color: var(--paper-muted);
  background: rgba(246,248,247,0.06); border-radius: 999px; padding: 3px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-shot{ position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--brand, var(--coal)); }
.wk-shot img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 600ms var(--ease-out), transform 1.2s var(--ease-out);
}
.wk-shot.is-loaded img{ opacity: 1; }
.wk-shot-cover{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem;
  padding: 1.4rem;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,0.18), transparent 60%),
    linear-gradient(160deg, var(--brand, var(--coal)), color-mix(in srgb, var(--brand, #0B1420) 55%, #000));
  color: #fff;
}
.wk-shot-cover::before{
  content: ''; position: absolute; inset: 0; opacity: 0.25;
  background-image: radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px);
  background-size: 16px 16px;
}
.wk-shot-cover b{ position: relative; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.wk-shot-cover small{ position: relative; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
a.wk-browser:hover .wk-shot img, .wk-card:hover .wk-shot img{ transform: scale(1.03); }

/* ---------- Featured ---------- */
.wk-feature{
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: var(--space-xl); align-items: center;
}
.wk-feature-shot{ transition: transform var(--dur-med) var(--ease-out); }
.wk-feature-shot:hover{ transform: translateY(-4px); }
.wk-kicker{
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em;
}
.wk-kicker span{ background: var(--teal); color: var(--coal); padding: 0.25em 0.65em; border-radius: 999px; }
.wk-feature-title{
  font-family: var(--font-display); font-size: var(--fs-display);
  font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  margin: var(--space-sm) 0 var(--space-md);
}
.wk-feature-lede{ font-size: var(--fs-body-lg); color: var(--ink-muted); line-height: 1.6; }
.wk-built{ margin: var(--space-lg) 0; border-top: 1px solid var(--line-on-white); }
.wk-built li{
  display: grid; grid-template-columns: 1fr; gap: 0.15em;
  padding: 0.85rem 0 0.85rem 1.4rem; position: relative;
  border-bottom: 1px solid var(--line-on-white);
}
.wk-built li::before{
  content: ''; position: absolute; left: 0.1rem; top: 1.3rem;
  width: 7px; height: 7px; border-radius: 2px; background: var(--teal); transform: rotate(45deg);
}
.wk-built b{ font-family: var(--font-display); font-weight: 600; }
.wk-built span{ font-size: var(--fs-small); color: var(--ink-muted); }
.wk-feature-foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.wk-platform{
  font-size: var(--fs-micro); letter-spacing: 0.06em;
  padding: 0.45em 0.85em; border-radius: 999px;
  border: 1px solid var(--line-on-white); color: var(--ink-muted); background: var(--white-dim);
}
@media (max-width: 980px){ .wk-feature{ grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ---------- Grid head + filters ---------- */
.wk-grid-head{
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-xl);
}
.wk-grid-head .section-heading{ margin-top: var(--space-sm); }
.wk-grid-head .section-lede{ margin-top: var(--space-md); max-width: 56ch; }
.wk-filters{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wk-chip{
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.04em;
  padding: 0.65em 1em; border-radius: 999px;
  border: 1px solid var(--line-on-white); background: var(--white); color: var(--ink);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.wk-chip span{ opacity: 0.55; }
.wk-chip:hover{ border-color: var(--coal); }
.wk-chip.is-active{ background: var(--coal); border-color: var(--coal); color: var(--paper); }
.wk-chip.is-active span{ color: var(--teal-light); opacity: 1; }

/* ---------- Grid ---------- */
.wk-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg) var(--space-md); }
.wk-card{
  display: flex; flex-direction: column; gap: var(--space-md);
  transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.wk-card.is-hidden{ display: none; }
.wk-card .wk-browser{ transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med); }
.wk-card:hover .wk-browser{ transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(11,20,32,0.45); }
.wk-card-body{ display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.wk-card h3{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.wk-card h3 a:hover{ color: var(--teal); }
.wk-card-body > p:not(.wk-kicker){ color: var(--ink-muted); max-width: 56ch; }
.wk-tags{ display: flex; flex-wrap: wrap; gap: 0.4em; }
.wk-tags li{
  font-family: var(--font-mono); font-size: var(--fs-micro);
  padding: 0.3em 0.7em; border-radius: 999px;
  border: 1px solid var(--line-on-white); background: var(--white);
}
.wk-card-foot{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line-on-white);
}
.wk-visit{ font-size: var(--fs-small); color: var(--ink); display: inline-flex; gap: 0.4em; }
.wk-visit span{ color: var(--teal); transition: transform var(--dur-fast) var(--ease-out); }
.wk-visit:hover{ color: var(--teal); }
.wk-visit:hover span{ transform: translate(2px,-2px); }

.wk-card-cta{
  border-radius: var(--radius-md);
  background: var(--coal); color: var(--paper);
  position: relative; overflow: hidden;
}
.wk-card-cta::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(45,217,196,0.22), transparent 70%),
    radial-gradient(rgba(201,211,214,0.08) 1px, transparent 1px) 0 0 / 18px 18px;
}
.wk-card-cta-inner{
  position: relative; height: 100%; min-height: 22rem;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--space-sm);
  padding: var(--space-lg);
}
.wk-card-cta .wk-kicker{ color: var(--teal-light); }
.wk-card-cta h3{ font-size: var(--fs-h2); line-height: 1.05; }
.wk-card-cta p:not(.wk-kicker){ color: var(--paper-muted); max-width: 40ch; margin-bottom: var(--space-sm); }
.wk-empty{ margin-top: var(--space-lg); color: var(--ink-muted); }

@media (max-width: 760px){
  .wk-grid{ grid-template-columns: 1fr; }
  .wk-grid-head{ align-items: flex-start; }
  .wk-filters{ flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 0.2rem; scrollbar-width: none; }
  .wk-filters::-webkit-scrollbar{ display: none; }
  .wk-chip{ flex: none; }
  .wk-card-cta-inner{ min-height: 16rem; }
}

/* ---------- Approach ---------- */
.wk-approach{ display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: var(--space-xl); align-items: start; }
.wk-approach .eyebrow{ color: var(--teal-light); }
.wk-approach .section-heading{ margin-top: var(--space-sm); }
.wk-approach-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-on-coal); }
.wk-approach-list li{ display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: 1px solid var(--line-on-coal); }
.wk-approach-list span{ color: var(--teal); font-size: var(--fs-small); padding-top: 0.25em; }
.wk-approach-list b{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.wk-approach-list p{ color: var(--paper-muted); margin-top: 0.35em; max-width: 54ch; }
@media (max-width: 900px){ .wk-approach{ grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ---------- AI profiles list ---------- */
.wk-ai-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--space-lg);
  border-top: 1px solid var(--line-on-white);
}
.wk-ai-list li{ border-bottom: 1px solid var(--line-on-white); }
.wk-ai-list a{
  display: grid; grid-template-columns: 2.4rem 1fr auto 1.2rem; align-items: center; gap: 0.6rem;
  padding: 1.05rem 0.2rem;
  transition: padding-left var(--dur-med) var(--ease-out);
}
.wk-ai-list a > span{ color: var(--teal); font-size: var(--fs-small); }
.wk-ai-list b{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.wk-ai-list em{ font-style: normal; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); text-align: right; }
.wk-ai-list i{ font-style: normal; color: var(--teal); opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast), transform var(--dur-med) var(--ease-out); }
.wk-ai-list a:hover{ padding-left: 0.7rem; }
.wk-ai-list a:hover b{ color: var(--coal); }
.wk-ai-list a:hover i{ opacity: 1; transform: none; }
@media (max-width: 900px){
  .wk-ai-list{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .wk-ai-list a{ grid-template-columns: 2rem 1fr 1rem; }
  .wk-ai-list em{ display: none; }
  .wk-hero-stats div:last-child{ flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .wk-marquee-track{ animation: none; }
}

/* ---------- Featured case study: Karachi Halls ---------- */
.kh-head{
  display: grid; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  gap: var(--space-xl); align-items: end; margin-bottom: var(--space-xl);
}
.kh-head .wk-feature-title{ margin-bottom: 0; }
.kh-pair{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg) var(--space-md); }
.kh-product{ margin: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.kh-product .wk-browser{ transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med); }
.kh-product:hover .wk-browser{ transform: translateY(-4px); box-shadow: 0 30px 60px -28px rgba(11,20,32,0.45); }
.kh-product figcaption{ display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.kh-label{ font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); }
.kh-label b{ color: var(--teal); font-weight: 500; margin-right: 0.5em; }
.kh-product h3{ font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.kh-product figcaption > p:not(.kh-label){ color: var(--ink-muted); max-width: 56ch; }

.kh-modules{
  margin-top: var(--space-xl);
  border-radius: var(--radius-md);
  background: var(--coal); color: var(--paper);
  padding: var(--space-lg);
  position: relative; overflow: hidden;
}
.kh-modules::before{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(45,217,196,0.16), transparent 70%),
    radial-gradient(rgba(201,211,214,0.07) 1px, transparent 1px) 0 0 / 18px 18px;
}
.kh-modules-title{ position: relative; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal-light); margin-bottom: var(--space-md); }
.kh-modules ol{
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--line-on-coal);
}
.kh-modules li{
  display: grid; grid-template-columns: 2.2rem 1fr; column-gap: 0.4rem; align-content: start;
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-bottom: 1px solid var(--line-on-coal);
  transition: background var(--dur-fast);
}
.kh-modules li:not(:nth-child(3n+1)){ padding-left: var(--space-md); border-left: 1px solid var(--line-on-coal); }
.kh-modules li span{ grid-row: span 2; color: var(--teal); font-size: var(--fs-small); padding-top: 0.15em; }
.kh-modules li b{ font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
.kh-modules li p{ color: var(--paper-muted); font-size: var(--fs-small); margin-top: 0.3em; }
.kh-modules li:hover b{ color: var(--teal-light); }

.wk-card-cta{ grid-column: 1 / -1; }
.wk-card-cta-inner{ min-height: 0; }

@media (max-width: 980px){
  .kh-head{ grid-template-columns: 1fr; gap: var(--space-md); }
  .kh-modules ol{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kh-modules li:not(:nth-child(3n+1)){ padding-left: 0; border-left: 0; }
  .kh-modules li:nth-child(even){ padding-left: var(--space-md); border-left: 1px solid var(--line-on-coal); }
}
@media (max-width: 760px){
  .kh-pair{ grid-template-columns: 1fr; }
  .kh-modules{ padding: var(--space-md); }
  .kh-modules ol{ grid-template-columns: 1fr; }
  .kh-modules li, .kh-modules li:nth-child(even){ padding-left: 0; padding-right: 0; border-left: 0; }
}