/* ==========================================================================
   ASIA WEB DIGITAL — pages.css
   Section-level composition. Nothing here fights components.css for spacing:
   layout gaps come from flex/grid, never from element margins.
   ========================================================================== */

/* Every page starts below the fixed header. */
main { padding-top: var(--header-h); }

/* --------------------------------------------------------------------------
   HOME HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: end; }
.hero-t {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 122%;
  font-size: clamp(2.05rem, 8.4vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin: 0;
}
.hero-t .l1, .hero-t .l2, .hero-t .l3 { display: block; }
.hero-t .l3 { color: var(--jade); }
.hero-copy { display: flex; flex-direction: column; gap: var(--s-5); align-items: flex-start; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero-side { display: flex; flex-direction: column; gap: var(--s-4); }
.hero-plate {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--jade-deep);
  overflow: hidden;
  min-height: 260px;
}
.hero-plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-plate-tag {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem; right: 1.1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}

.hero-meta {
  display: grid;
  gap: var(--s-5);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.hero-meta-i { display: flex; flex-direction: column; gap: 0.3rem; }
.hero-meta-k { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.hero-meta-v { font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: 1.0625rem; letter-spacing: -0.01em; }

.hero-spine {
  position: absolute;
  right: calc(var(--gutter) * 0.35);
  top: 18%;
  display: none;
}

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.75fr); }
}
@media (min-width: 1280px) {
  .hero-spine { display: flex; }
}

/* --------------------------------------------------------------------------
   INNER PAGE HEADER
   -------------------------------------------------------------------------- */
.phead { position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; }
.phead-in { display: flex; flex-direction: column; gap: var(--s-5); }
.phead-t { max-width: 18ch; }
.phead-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: end; }
@media (min-width: 900px) {
  .phead-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); }
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.crumbs a { transition: color var(--t-fast); }
.crumbs a:hover { color: var(--neon-ink); }
.crumbs span[aria-hidden] { opacity: 0.5; }
.on-dark .crumbs { color: rgba(255,255,255,0.6); }
.on-dark .crumbs a:hover { color: var(--neon); }

/* --------------------------------------------------------------------------
   GENERIC SECTION HEADER
   -------------------------------------------------------------------------- */
.shead { display: flex; flex-direction: column; gap: var(--s-4); padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.shead-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: end; padding-bottom: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 900px) {
  .shead-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr); }
}

/* --------------------------------------------------------------------------
   GRIDS
   -------------------------------------------------------------------------- */
.cards-2 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cards-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.cards-4 { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.work-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.pair { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* --------------------------------------------------------------------------
   POSTER ART — generated, no stock photography anywhere on this site
   -------------------------------------------------------------------------- */
.poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.poster-label {
  position: absolute;
  left: 1rem; top: 1rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  z-index: 1;
}

/* --------------------------------------------------------------------------
   PROCESS — a genuine sequence, so it is genuinely numbered
   -------------------------------------------------------------------------- */
.proc { display: grid; gap: 0; counter-reset: step; }
.proc-i {
  display: grid;
  gap: var(--s-3) var(--s-6);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--rule-light-soft);
  align-items: start;
}
.proc-i:last-child { border-bottom: 1px solid var(--rule-light-soft); }
.proc-n {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  color: var(--neon-soft);
}
.proc-d { color: rgba(255,255,255,0.8); font-size: var(--fs-sm); max-width: 58ch; }
@media (min-width: 820px) {
  .proc-i { grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   MARKETS BAND — markets served, explicitly not offices
   -------------------------------------------------------------------------- */
.markets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.market {
  background: var(--paper);
  padding: clamp(1.2rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: background var(--t-med) var(--e-soft), color var(--t-med) var(--e-soft);
}
.market:hover { background: var(--jade); color: var(--white); }
.market-k { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }
.market-v { font-family: var(--f-display); font-weight: 700; font-stretch: 110%; font-size: var(--fs-h4); letter-spacing: -0.015em; }
@media (min-width: 620px) { .markets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .markets { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   TESTIMONIAL
   -------------------------------------------------------------------------- */
.quote { display: flex; flex-direction: column; gap: var(--s-5); max-width: 30ch; }
.quote-t {
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  line-height: 1.22;
  letter-spacing: -0.022em;
  max-width: 24ch;
}
.quote-t::before { content: "\201C"; color: var(--neon); }
.quote-t::after { content: "\201D"; color: var(--neon); }
.quote-by { display: flex; flex-direction: column; gap: 0.2rem; }
.quotes { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   CAPABILITY LIST (service detail pages)
   -------------------------------------------------------------------------- */
.caps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
.cap { background: var(--mist); padding: clamp(1.3rem, 2.6vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; transition: background var(--t-med) var(--e-soft); }
.cap:hover { background: var(--paper); }
.cap-ic { color: var(--jade); }
.cap p { font-size: var(--fs-sm); color: var(--ink-80); }
@media (min-width: 640px) { .caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .caps { grid-template-columns: repeat(3, 1fr); } }

.deliver { display: grid; gap: 0; }
.deliver li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: var(--s-4);
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  font-size: var(--fs-sm);
}
.deliver li:first-child { border-top: 1px solid var(--rule); }
.deliver .k { font-family: var(--f-mono); font-size: var(--fs-label); color: var(--jade); }

/* Engagement models — no invented pricing */
.models { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.model { display: flex; flex-direction: column; gap: var(--s-4); border: 1px solid var(--rule); padding: clamp(1.4rem, 2.6vw, 2rem); background: var(--paper); transition: border-color var(--t-med) var(--e-soft), transform var(--t-med) var(--e-out); }
.model:hover { border-color: var(--ink); transform: translateY(-4px); }
.model-tag { align-self: flex-start; }
@media (min-width: 820px) { .models { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   TEAM
   -------------------------------------------------------------------------- */
.team { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.member { display: flex; flex-direction: column; gap: 0.85rem; text-align: left; width: 100%; }
.member-fig { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--jade-deep); }
.member-fig svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.8s var(--e-out); }
.member:hover .member-fig svg { transform: scale(1.05); }
.member-fig::after {
  content: "Read bio";
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.7rem 0.9rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--neon);
  transform: translateY(100%);
  transition: transform var(--t-med) var(--e-out);
}
.member:hover .member-fig::after { transform: none; }
.member-n { font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: 1.0625rem; letter-spacing: -0.012em; }
.member-r { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }

/* --------------------------------------------------------------------------
   CAREERS
   -------------------------------------------------------------------------- */
.jobs { border-top: 1px solid var(--rule); }
.job {
  width: 100%;
  display: grid;
  gap: 0.4rem var(--s-5);
  padding-block: clamp(1.3rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
  text-align: left;
  align-items: center;
  transition: padding-inline var(--t-med) var(--e-out), background var(--t-med) var(--e-soft);
}
.job:hover { background: var(--paper); padding-inline: clamp(0.5rem, 1.4vw, 1.25rem); }
.job-t { font-family: var(--f-display); font-weight: 700; font-stretch: 110%; font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: -0.02em; line-height: 1.15; transition: color var(--t-fast); }
.job:hover .job-t { color: var(--jade); }
.job-m { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.job-go { justify-self: start; }
@media (min-width: 820px) {
  .job { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; }
  .job-go { justify-self: end; }
}
.jd { display: flex; flex-direction: column; gap: var(--s-5); }
.jd h4 { padding-bottom: 0.15rem; }
.jd ul { display: flex; flex-direction: column; gap: 0.55rem; }
.jd ul li { display: grid; grid-template-columns: 0.9rem 1fr; gap: 0.75rem; font-size: var(--fs-sm); color: var(--ink-80); align-items: baseline; }
.jd ul li::before { content: ""; width: 6px; height: 6px; background: var(--neon); display: block; }
.perks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.perk { background: var(--paper); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }

/* --------------------------------------------------------------------------
   CONTACT
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.cdetails { display: flex; flex-direction: column; gap: var(--s-6); }
.cdetail { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.cdetail-v { font-family: var(--f-display); font-weight: 700; font-stretch: 108%; font-size: var(--fs-h4); letter-spacing: -0.015em; }
.cdetail-v a { transition: color var(--t-fast); }
.cdetail-v a:hover { color: var(--neon-ink); }

/* A drawn locator, not an embedded third-party map. */
.locator { position: relative; aspect-ratio: 16 / 10; background: var(--jade-deep); overflow: hidden; }
.locator svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.locator-pin {
  position: absolute;
  left: 58%; top: 46%;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--neon);
  transform: translate(-50%, -50%);
}
.locator-pin::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid var(--neon);
  border-radius: 999px;
  animation: ping 2.6s var(--e-out) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.1); opacity: 0; } }

/* --------------------------------------------------------------------------
   INSIGHTS + ARTICLE
   -------------------------------------------------------------------------- */
.post { display: flex; flex-direction: column; gap: 0.9rem; padding-block: var(--s-5); border-bottom: 1px solid var(--rule); transition: padding-inline var(--t-med) var(--e-out), background var(--t-med) var(--e-soft); }
.post:hover { background: var(--paper); padding-inline: clamp(0.5rem, 1.4vw, 1.25rem); }
.post-t { transition: color var(--t-fast); max-width: 30ch; }
.post:hover .post-t { color: var(--jade); }
.post-m { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }

.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 1.35rem; }
.prose p { color: var(--ink-80); font-size: var(--fs-lead); line-height: 1.68; }
.prose h2 { padding-top: 1.4rem; }
.prose h3 { padding-top: 0.6rem; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 0.7rem; }
.prose ul li { display: grid; grid-template-columns: 1rem 1fr; gap: 0.85rem; color: var(--ink-80); align-items: baseline; }
.prose ul li::before { content: ""; width: 7px; height: 7px; background: var(--neon); display: block; }
.prose ol { counter-reset: n; }
.prose ol li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.85rem; color: var(--ink-80); align-items: baseline; counter-increment: n; }
.prose ol li::before { content: counter(n, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--fs-label); color: var(--jade); }
.prose blockquote {
  border-left: 3px solid var(--neon);
  padding: 0.3rem 0 0.3rem 1.4rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: var(--fs-h4);
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.prose figure { display: flex; flex-direction: column; gap: 0.7rem; }
.prose figcaption { font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 0.11em; text-transform: uppercase; color: var(--slate); }
.prose .fig-plate { position: relative; aspect-ratio: 16 / 9; background: var(--jade-deep); overflow: hidden; }
.prose .fig-plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.toc { border-left: 1px solid var(--rule); padding-left: var(--s-5); display: flex; flex-direction: column; gap: 0.7rem; position: sticky; top: calc(var(--header-h) + 2rem); }
.toc a { font-size: var(--fs-sm); color: var(--slate); transition: color var(--t-fast), transform var(--t-fast) var(--e-out); display: inline-block; }
.toc a:hover { color: var(--jade); transform: translateX(3px); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1000px) { .article-grid { grid-template-columns: minmax(0, 1fr) 15rem; } }

/* --------------------------------------------------------------------------
   CASE STUDY
   -------------------------------------------------------------------------- */
.cs-stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.cs-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .cs-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.cs-plate { position: relative; aspect-ratio: 16 / 9; background: var(--jade-deep); overflow: hidden; }
.cs-plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   FOOTER SUBSCRIBE ROW
   -------------------------------------------------------------------------- */
.ftr-sub-row { display: flex; gap: 0.75rem; align-items: flex-end; }
.ftr-sub-row .input { flex: 1 1 auto; min-width: 0; }
.ftr-sub-row .btn { padding-inline: 1.1rem; flex: none; }

/* --------------------------------------------------------------------------
   LEGAL / SITEMAP / 404
   -------------------------------------------------------------------------- */
.legal { max-width: 70ch; display: flex; flex-direction: column; gap: 1.3rem; }
.legal h2 { padding-top: 1.5rem; }
.legal p, .legal li { color: var(--ink-80); font-size: var(--fs-sm); }
.legal ul { display: flex; flex-direction: column; gap: 0.55rem; }
.legal ul li { display: grid; grid-template-columns: 0.9rem 1fr; gap: 0.8rem; align-items: baseline; }
.legal ul li::before { content: ""; width: 6px; height: 6px; background: var(--jade); display: block; }

.smap { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.smap ul { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1rem; }
.smap a { font-size: var(--fs-sm); color: var(--ink-80); transition: color var(--t-fast), transform var(--t-fast) var(--e-out); display: inline-block; }
.smap a:hover { color: var(--jade); transform: translateX(4px); }

.e404 { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); align-items: flex-start; }
.e404-n {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(5rem, 22vw, 16rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
  color: var(--jade);
}

/* --------------------------------------------------------------------------
   MISC
   -------------------------------------------------------------------------- */
.rule { height: 1px; background: var(--rule); }
.on-dark .rule { background: var(--rule-light-soft); }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scroll-cue { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-mono); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.scroll-cue svg { animation: bob 2.4s var(--e-soft) infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* --------------------------------------------------------------------------
   PLATE — reusable generated-art panel
   -------------------------------------------------------------------------- */
.plate { position: relative; overflow: hidden; background: var(--jade-deep); aspect-ratio: 4 / 3; }
.plate svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.plate-tag {
  position: absolute;
  left: 1.1rem; bottom: 1.1rem; right: 1.1rem;
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.on-dark .deliver li { border-color: var(--rule-light-soft); color: rgba(255,255,255,0.8); }
.on-dark .deliver .k { color: var(--neon-soft); }
.on-dark .cap { background: var(--jade-deep); }
.on-dark .caps { background: var(--rule-light-soft); border-color: var(--rule-light-soft); }
.on-dark .card { background: rgba(255,255,255,0.04); border-color: var(--rule-light-soft); }
.on-dark .card-body { color: rgba(255,255,255,0.75); }
.on-dark .model { background: rgba(255,255,255,0.04); border-color: var(--rule-light-soft); }
.on-dark .model:hover { border-color: var(--white); }
.on-dark .market { background: var(--jade-deep); }
.on-dark .market:hover { background: var(--neon); }
.on-dark .job, .on-dark .jobs, .on-dark .post { border-color: var(--rule-light-soft); }
.on-dark .acc, .on-dark .acc-item { border-color: var(--rule-light-soft); }
.on-dark .acc-item > summary:hover, .on-dark .acc-item[open] > summary { color: var(--neon); }
.on-dark .acc-panel p { color: rgba(255,255,255,0.75); }
.on-dark .cdetail { border-color: var(--rule-light-soft); }
.on-dark .filter { border-color: var(--rule-light); color: rgba(255,255,255,0.82); }
.on-dark .filter:hover { color: var(--white); border-color: var(--white); }
.on-dark .filter[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--ink); }

/* Related services row */
.rel { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 780px) { .rel { grid-template-columns: repeat(3, 1fr); } }
.rel-a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.35rem 1.5rem; border: 1px solid var(--rule); background: var(--paper);
  transition: background var(--t-med) var(--e-soft), color var(--t-med) var(--e-soft), border-color var(--t-med) var(--e-soft);
}
.rel-a:hover { background: var(--jade); border-color: var(--jade); color: var(--white); }
.rel-a .ar { transition: transform var(--t-med) var(--e-out); }
.rel-a:hover .ar { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   WORK CARD — link + quick-view button as siblings (never nested)
   -------------------------------------------------------------------------- */
.wcard-link { display: flex; flex-direction: column; gap: 1rem; }
.wcard-foot { margin-top: auto; }
.wcard-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; padding-top: 0.15rem; }
.qbtn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--f-mono); font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate);
  padding: 0.5rem 0; position: relative; min-height: 34px;
}
.qbtn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform var(--t-med) var(--e-out); }
.qbtn:hover { color: var(--neon-ink); }
.qbtn:hover::after { transform: scaleX(1); transform-origin: left center; }
.on-dark .qbtn { color: rgba(255,255,255,0.6); }
.on-dark .qbtn:hover { color: var(--neon); }
.filter-empty { padding-block: var(--s-8); text-align: center; color: var(--slate); }

/* Components whose ground flips to jade on hover take the white focus ring. */
.srow:hover, .rel-a:hover, .market:hover, .nav-panel a:hover { --focus: #FFFFFF; }