/* ==========================================================
   Ansith — shared site styles
   Used by index.html, work.html and every case study.
   ========================================================== */

:root {
  --bg:        #F9FAFC;
  --surface:   #FFFFFF;
  --tint:      #F1F4F8;
  --tint-2:    #E8EDF4;
  --border:    rgba(213, 220, 230, .78);
  --line:      #E5E9EF;
  --ink:       #12161D;
  --body:      #5A606B;
  --muted:     #7E8590;
  --faint:     #B3BAC5;
  --accent:    #2B5BD3;
  --hover-fill: #3F6496;
  --hover-glow: 0 10px 24px rgba(63, 100, 150, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
  --accent-bg: #EBF1FC;
  --tone:      #4F6D91;               /* second line of two-tone headings: steel blue */
  --nav-on:    rgba(63, 100, 150, .14);
  --night-a:   #15213A;
  --night-b:   #33405A;
  --shadow:    0 10px 34px rgba(30, 42, 60, .05);
  --shadow-lg: 0 30px 80px rgba(36, 52, 72, .14), 0 6px 18px rgba(36, 52, 72, .05);

  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --ease:  cubic-bezier(.2, .7, .1, 1);

  --pad: clamp(16px, 3.2vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 15px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p, figure { margin: 0; }
p + p { margin-top: 1em; }
strong { color: var(--ink); font-weight: 600; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
svg.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.main  { flex: 1; min-width: 0; }
.wrap  { max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- Sidebar (original look) + collapse ---------- */
:root { --side-w: 248px; --rail-w: 76px; }
html.nav-collapsed { --side-w: var(--rail-w); }

.sidebar {
  position: sticky; top: 0;
  width: var(--side-w); height: 100vh; flex: none;
  display: flex; flex-direction: column; gap: 40px;
  padding: 40px 24px 32px;
  background: rgba(250, 252, 254, .92);
  border-right: 1px solid rgba(219, 224, 229, .76);
  overflow: hidden;
  z-index: 20;
}
html.nav-ready .sidebar { transition: width .16s ease-out, padding .16s ease-out; }

.brand { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.brand > a { display: block; min-width: 0; white-space: nowrap; }
.brand .nm { display: block; color: var(--ink); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -0.01em; }
.brand .rl { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* ansith.design wordmark, used in the phone/tablet bar */
.wordmark { display: none; width: 108px; height: auto; flex: none; }
.menu-btn { display: none; width: 36px; height: 36px; border-radius: 9px; background: var(--nav-on); color: #607C9E; place-items: center; margin-left: auto; flex: none; }
.collapse-btn {
  margin-left: auto; flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #4A5A6E;
  background: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 1px 2px rgba(44, 72, 106, .06);
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.collapse-btn:hover { background: #fff; color: var(--accent); border-color: rgba(43, 91, 211, .2); box-shadow: 0 4px 12px rgba(43, 91, 211, .14); }
.collapse-btn svg { width: 16px; height: 16px; stroke-width: 2; transition: transform .25s var(--ease); }
.collapse-btn:hover svg { transform: translateX(-2px); }
html.nav-collapsed .collapse-btn:hover svg { transform: scaleX(-1) translateX(-2px); }
html.nav-collapsed .collapse-btn svg { transform: scaleX(-1); }

.nav-panel { display: flex; flex-direction: column; flex: 1; gap: 32px; min-height: 0; }
.nav-panel nav { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px; }
.nav-panel nav::-webkit-scrollbar { display: none; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px; border-radius: 9px;
  font-size: 13.5px; color: var(--ink); white-space: nowrap;
  border: 1px solid transparent;
  transition: background .15s;
}
.rail-item:hover { background: #EFF3F8; }
.rail-item[aria-current="page"] { background: #ECF2F9; border-color: #DAE5F3; color: #38506D; }
.rail-item svg { color: var(--muted); width: 20px; height: 20px; flex: none; }
.rail-item[aria-current="page"] svg { color: #617C9E; }

/* sub-menus (Work, Side Projects) */
.group-row { position: relative; }
.group-row .rail-item { padding-right: 40px; }
.sub-toggle {
  position: absolute; right: 4px; top: 50%; width: 30px; height: 30px; transform: translateY(-50%);
  display: grid; place-items: center; border-radius: 7px; color: var(--muted);
  transition: background .15s, color .15s;
}
.sub-toggle:hover { background: rgba(43, 91, 211, .1); color: var(--ink); }
.sub-toggle svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.group.open .sub-toggle svg { transform: rotate(90deg); }
.sub {
  list-style: none; margin: 0 0 4px 21px; padding: 0 0 0 12px; border-left: 1px solid var(--line);
  display: none; flex-direction: column; gap: 1px;
}
.group.open .sub { display: flex; padding-top: 4px; }
.sub a {
  position: relative; display: block; padding: 6px 10px; border-radius: 7px;
  font-size: 13px; color: var(--body); white-space: nowrap;
  transition: background .15s, color .15s;
}
.sub a:hover { background: #EFF3F8; color: var(--ink); }
.sub a.on { color: #335782; font-weight: 500; }
.sub a.on::before { content: ""; position: absolute; left: -13px; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: #335782; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 18px; }
.social { display: flex; gap: 8px; }
.social a {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; flex: none;
  color: var(--body); border: 1px solid var(--border); background: var(--surface);
  transition: color .15s, border-color .15s;
}
.social a:hover { color: var(--accent); border-color: #CFDEF0; }
.social svg { width: 16px; height: 16px; }
.open-to {
  display: inline-flex; align-items: flex-end; gap: 6px; white-space: nowrap;
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.open-to:hover { color: var(--ink); }
.open-to svg { width: 13px; height: 13px; margin-bottom: 2px; }
.open-to .mail { display: none; }

/* collapsed: icons only */
@media (min-width: 1024px) {
  html.nav-collapsed .sidebar { padding-left: 14px; padding-right: 14px; }
  html.nav-collapsed .brand > a { display: none; }
  html.nav-collapsed .collapse-btn { margin: 0 auto; width: 38px; height: 38px; }
  html.nav-collapsed .rail-item { width: 46px; padding: 0; justify-content: center; margin: 0 auto; }
  html.nav-collapsed .rail-item .lbl { display: none; }
  html.nav-collapsed .sub-toggle, html.nav-collapsed .group .sub { display: none; }
  html.nav-collapsed .group-row .rail-item { padding-right: 0; }
  html.nav-collapsed .social { flex-direction: column; align-items: center; }
  html.nav-collapsed .open-to { justify-content: center; width: 46px; height: 40px; margin: 0 auto; align-items: center; border-radius: 9px; }
  html.nav-collapsed .open-to:hover { background: #EFF3F8; }
  html.nav-collapsed .open-to .t, html.nav-collapsed .open-to .out { display: none; }
  html.nav-collapsed .open-to .mail { display: block; width: 20px; height: 20px; margin: 0; }
}

/* ---------- Floating sidebar (desktop): sits over the page so backgrounds run edge to edge ---------- */
@media (min-width: 1024px) {
  :root { --nav-off: calc(var(--side-w) + 24px); }
  .shell { display: block; }
  .sidebar {
    position: fixed; left: 12px; top: 12px; bottom: 12px; height: auto; z-index: 40;
    border-radius: 24px; border: 1px solid rgba(255, 255, 255, .85);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .42) 45%, rgba(255, 255, 255, .72) 100%),
      linear-gradient(180deg, #C6D9F0 0%, #DBE7F5 40%, #EFF4FA 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 50px rgba(44, 72, 106, .12);
  }
  /* content moves over; section backgrounds still fill the full width underneath the panel */
  .main { width: 100%; }
  .main > :is(section, header, footer):not(.case-head) { padding-left: var(--nav-off); }
  /* bars without a full-bleed background start beside the panel instead of under it */
  .main > .case-head { margin-left: calc(var(--nav-off) - 12px); }
  .main > .wrap { margin-left: calc(var(--nav-off) + max(0px, (100% - var(--nav-off) - 1120px) / 2)); margin-right: max(0px, (100% - var(--nav-off) - 1120px) / 2); }
  html.nav-ready .main > :is(section, header, footer, .wrap) { transition: padding-left .16s ease-out, margin .16s ease-out; }
  .to-top { right: clamp(16px, 2.4vw, 32px); }

  .sidebar .brand .rl { color: #6A7A8E; }
  .sidebar .nav { position: relative; }
  .sidebar .rail-item { position: relative; z-index: 1; color: #283340; background: transparent; border-color: transparent; transition: color .2s; }
  .sidebar .rail-item:hover { background: transparent; }
  .sidebar .rail-item svg { color: #6A7A8E; transition: color .2s, transform .25s var(--ease); }
  .sidebar .rail-item:hover svg { color: #335782; transform: translateX(2px); }
  .sidebar .rail-item[aria-current="page"] { background: transparent; border-color: transparent; box-shadow: none; color: #335782; font-weight: 500; }
  .sidebar .rail-item[aria-current="page"] svg { color: #335782; }
  /* one soft indigo tint that glides between items */
  .nav-glide {
    position: absolute; left: 0; top: 0; z-index: 0; width: 100%; height: 40px; border-radius: 10px; pointer-events: none;
    background: linear-gradient(90deg, rgba(79, 109, 145, .15), rgba(79, 109, 145, .07));
    box-shadow: inset 0 0 0 1px rgba(79, 109, 145, .14);
    opacity: 0;
    transition: transform .28s cubic-bezier(.3, .7, .2, 1), height .28s cubic-bezier(.3, .7, .2, 1), opacity .2s;
  }
  .nav-glide::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #335782; }
  html.nav-collapsed .nav-glide { left: 50%; width: 46px; margin-left: -23px; }
  html.nav-collapsed .nav-glide::before { display: none; }
  .sidebar .social a { background: rgba(18, 22, 29, .06); border-color: transparent; color: #4A5A6E; transition: background .2s, color .2s, transform .2s var(--ease); }
  .sidebar .open-to { color: #6A7A8E; }
  .sidebar .open-to:hover { color: #335782; background: transparent; }
  .sidebar .sub { border-left-color: rgba(79, 109, 145, .22); }
  .sidebar .sub a:hover { background: rgba(79, 109, 145, .09); }
}
@media (prefers-reduced-motion: reduce) { .nav-glide, .sidebar .rail-item svg { transition: none; } }

/* social: lift a little and fill with each brand's colour */
.social a { transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease), box-shadow .2s; }
.social a:hover, .social a:focus-visible, .sidebar .social a:hover { color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(21, 25, 30, .14); }
.social a[data-brand="linkedin"]:hover, .social a[data-brand="linkedin"]:focus-visible { background: #0A66C2; }
.social a[data-brand="instagram"]:hover, .social a[data-brand="instagram"]:focus-visible { background: linear-gradient(135deg, #EFB26E 0%, #E2688A 55%, #A86BC4 100%); }
.social a[data-brand="behance"]:hover, .social a[data-brand="behance"]:focus-visible { background: #1769FF; }
.social a[data-brand="dribbble"]:hover, .social a[data-brand="dribbble"]:focus-visible { background: #EA4C89; }
@media (prefers-reduced-motion: reduce) { .social a:hover { transform: none; } }

/* ---------- Motion: one light system for every page ---------- */
/* page changes cross-fade (browser-native, no script); the sidebar stays put */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease-out; }
@media (min-width: 1024px) { .sidebar { view-transition-name: sidebar; } }

@keyframes load-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* page load: the opening lines arrive in a quick stagger */
html.motion :is(.hero-copy, .page-sky .wrap) > * { animation: load-rise .8s var(--ease) both; }
html.motion :is(.hero-copy, .page-sky .wrap) > :nth-child(2) { animation-delay: .08s; }
html.motion :is(.hero-copy, .page-sky .wrap) > :nth-child(3) { animation-delay: .16s; }
html.motion :is(.hero-copy, .page-sky .wrap) > :nth-child(n+4) { animation-delay: .24s; }

/* clouds never animate: no fades or rises */
:is(.clouds, .cloud-edge, .band-clouds, .sky-edge, .foot-edge, .foot-puffs, .films .edge) { animation: none !important; transition: none !important; }

/* scroll: content fades up once as it enters (classes added by site.js) */
/* a softer, longer settle with a smaller rise; the compositor hint is only held until the block has landed */
html.motion .rv { opacity: 0; transform: translate3d(0, 14px, 0); will-change: opacity, transform; transition: opacity 1s cubic-bezier(.25, .6, .3, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--rv-d, 0s); }
html.motion .rv.in { opacity: 1; transform: none; will-change: auto; }

/* tooltip for the collapsed rail (one element, positioned by site.js) */
.rail-tip {
  position: fixed; z-index: 100; pointer-events: none;
  padding: 6px 10px; border-radius: 8px;
  background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.3; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(21, 25, 30, .18);
  opacity: 0; transform: translate(-4px, -50%); transition: opacity .15s, transform .15s var(--ease);
}
.rail-tip.show { opacity: 1; transform: translate(0, -50%); }
.rail-tip::before { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px; }

/* ---------- Type ---------- */
.display, .h2 {
  margin: 0;
  font-weight: 500;
  text-transform: none;
  color: var(--ink);
}
.display {
  font-variation-settings: "wdth" 90;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1;
  letter-spacing: -0.035em;
}
.h2 {
  font-variation-settings: "wdth" 92;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.display .tone, .h2 .tone { color: var(--tone); }
.display .ln, .h2 .ln { display: block; }

.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin: 0; }
.eyebrow .num {
  display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--accent-bg); color: var(--accent);
  font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.lede { font-size: 16px; line-height: 1.75; color: var(--body); max-width: 46ch; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 500;
  transition: background .2s, transform .2s var(--ease);
}
.btn:hover { background: #293340; }
.btn svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.btn:hover svg.down { transform: translateY(2px); }
.btn:hover svg.out  { transform: translate(2px, -2px); }

.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ink); }
.arrow-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover svg { transform: translate(2px, -2px); }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 19px; padding: 9px; box-shadow: var(--shadow); }
.card img, .card .ph { border-radius: 12px; width: 100%; }
.ph {
  aspect-ratio: 16 / 9; display: grid; place-items: center;
  color: var(--muted); font-size: 12px;
  background: repeating-linear-gradient(-45deg, #F6F7F9 0 14px, #EFF1F4 14px 28px);
}

/* ---------- Section scaffolding ---------- */
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head .eyebrow { margin-bottom: 18px; }

/* ---------- Project cards ---------- */
.project {
  display: block;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 8px; box-shadow: var(--shadow);
  transition: border-color .25s, box-shadow .35s var(--ease), transform .35s var(--ease);
  scroll-margin-top: 24px;
}
a.project:hover { border-color: #D5E2F1; box-shadow: var(--shadow-lg); }
.soon { font-size: 11px; color: var(--muted); }

/* Hawkeye: product on a pale sky stage */

/* ---------- Lightbox ---------- */
[data-lightbox] { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 12px; padding: 40px 24px; background: rgba(21, 25, 30, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; max-height: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 140px); border-radius: 14px; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.lightbox figcaption { color: #E4EAF2; font-size: 14px; text-align: center; }
.lb-close, .lb-nav { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); transition: background .15s; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-close { position: absolute; top: 20px; right: 20px; }
.lb-nav { justify-self: center; }
.lb-nav.next svg { transform: scaleX(-1); }
@media (max-width: 767.98px) { .lightbox { grid-template-columns: 1fr; padding: 72px 12px 24px; } .lb-nav { display: none; } }

/* ---------- Closing CTA + footer ---------- */
.cta { background: linear-gradient(180deg, var(--tint) 0%, #ECF0F6 100%); padding: clamp(72px, 9vw, 120px) 0 0; overflow: hidden; }
.cta-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.cta .eyebrow { margin-bottom: 18px; }
/* closing bar: plain text and button sitting directly on the sky */
.foot-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px;
  margin: clamp(56px, 7vw, 96px) 0 clamp(20px, 2.4vw, 32px); padding: 8px 8px 8px 0;
  font-size: 13.5px; line-height: 1.45; color: var(--body);
}
.foot-row .top {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 6px 0 16px;
  font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.foot-row .top i {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(44, 72, 106, .14);
  transition: background .2s, color .2s, transform .25s var(--ease);
}
.foot-row .top svg { width: 15px; height: 15px; }
.foot-row .top:hover i { background: var(--hover-fill, #4F6D91); color: #fff; transform: translateY(-2px); }

/* ---------- Artwork (drawn in code, in the site palette) ---------- */
.art { position: relative; overflow: hidden; container-type: inline-size; border-radius: 15px; }

/* pre-rendered cloud layers overhang the section edges on purpose: never cap their width */
img.clouds, img.cloud-edge, img.band-clouds, img.sky-edge, img.foot-edge, img.foot-puffs, img.edge { max-width: none; }

/* ---------- Work cards (shared): cover + badge, title, one line ---------- */
/* .wcards.stack = homepage deck that stacks on scroll; .wcards.grid = 2-up grid; .grid.g3 = 3-up */
.wcards.stack { display: flex; flex-direction: column; gap: 28px; }
.wcards.stack .wcard { position: sticky; top: calc(28px + var(--i, 0) * 16px); height: clamp(520px, 74vh, 640px); }
.wcards.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.wcards.grid .wcard { aspect-ratio: 10 / 9; scroll-margin-top: 24px; }

.wcard {
  position: relative; display: block;
  border-radius: 28px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 24px 60px rgba(44, 72, 106, .14);
  transform-origin: 50% 0;
}
.wc-cover { position: absolute; inset: 0; overflow: hidden; }

/* designed stand-in covers until real ones exist */
.wc-cover.ph { display: grid; place-items: center; padding: 0 4% 38%; aspect-ratio: auto; color: inherit; font-size: inherit; }
.wc-cover.ph::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(21, 25, 30, .08) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(#000, transparent 75%); mask-image: linear-gradient(#000, transparent 75%); }
.wc-cover.ph-clarion { background: radial-gradient(80% 70% at 35% 8%, #EEF6F3 0%, rgba(238, 246, 243, 0) 60%), linear-gradient(160deg, #D6E9E3 0%, #B7D4CC 100%); }

.wc-cover.ph-roam { background: radial-gradient(80% 70% at 70% 10%, #E4EDF5 0%, rgba(228, 237, 245, 0) 60%), linear-gradient(160deg, #C9D8E5 0%, #A9BED1 100%); }

/* Hawkeye cover: the animated SVG (with its own dark stage) fills the top of a full dark card. The card is the
   same near-black as the artwork's edges, a cobalt bloom sits behind it, and the caption fades in from the bottom. */
.wc-cover.cv-hk { background: radial-gradient(60% 46% at 50% 36%, rgba(190, 205, 225, .13) 0%, rgba(190, 205, 225, 0) 72%), radial-gradient(40% 30% at 90% 4%, rgba(120, 160, 230, .10) 0%, rgba(120, 160, 230, 0) 70%), linear-gradient(170deg, #1A2029 0%, #12171F 45%, #0D1117 100%); container-type: size; }
/* dot grid under the artwork, same texture as the placeholder covers, fading out toward the caption */
.wc-cover.cv-hk::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(150, 180, 230, .20) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(#000, transparent 80%); mask-image: linear-gradient(#000, transparent 80%); }
/* sized in container units so the artwork keeps breathing room on the tall work card and the wide home deck */
.cv-hk .hk-main { position: absolute; left: 50%; top: 3cqh; width: min(100cqw, 118cqh); max-width: none; height: auto; transform: translateX(-50%); transition: transform 1.2s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent), linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-composite: intersect; }
a.wcard:hover .cv-hk .hk-main { transform: translateX(-50%) scale(1.03); }
.wcard.dark.hk { background: #0D1117; border-color: rgba(255, 255, 255, .10); box-shadow: 0 24px 60px rgba(14, 22, 38, .38); }
.wcard.dark.hk::after { height: 52%; background: linear-gradient(180deg, rgba(13, 17, 23, 0) 0%, rgba(13, 17, 23, .80) 45%, #0D1117 88%); }
.wcard.dark.hk .wc-badge { color: #B4C6E4; background: rgba(120, 160, 230, .10); border-color: rgba(160, 190, 235, .20); }
.wcard.dark.hk .wc-line { color: #9AA6B8; }
.wcard.dark.hk .wc-cta { background: #2F6FED; box-shadow: 0 8px 22px rgba(47, 111, 237, .35); }
@media (max-width: 1023px) { .cv-hk .hk-main { top: 50%; width: min(100cqw, 130cqh); transform: translate(-50%, -50%); } a.wcard:hover .cv-hk .hk-main { transform: translate(-50%, -50%) scale(1.03); } }

/* dark work card: caption fades into the same near-black, accents use the cobalt from the artwork */
.wcard.dark { background: #0B0F15; border-color: rgba(255, 255, 255, .09); box-shadow: 0 24px 60px rgba(8, 14, 24, .4), 0 0 0 1px rgba(47, 111, 237, .06); }
.wcard.dark::after { background: linear-gradient(180deg, rgba(11, 15, 21, 0) 0%, rgba(11, 15, 21, .88) 52%, rgba(11, 15, 21, .99) 100%); }
.wcard.dark .wc-badge { color: #9DB8E6; background: rgba(47, 111, 237, .12); border-color: rgba(120, 165, 240, .22); }
.wcard.dark h3 { color: #fff; }
.wcard.dark .wc-line { color: #9AA6B8; }
.wcard.dark .wc-cta { background: #2F6FED; color: #fff; box-shadow: 0 8px 22px rgba(47, 111, 237, .35); }
a.wcard.dark:hover .wc-cta { background: #4A85F5; box-shadow: 0 10px 30px rgba(47, 111, 237, .55); }

/* Octo Optimizer cover: the artwork fills the card, caption fades into the same near-black */
.wc-cover.cv-octo { background: #0B0A16; }
.wc-cover.cv-octo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 1.2s var(--ease); }
a.wcard:hover .cv-octo img { transform: scale(1.035); }
.wcards.side .wc-cover.cv-octo img, .wcards.grid .wc-cover.cv-octo img { height: auto; bottom: auto; object-fit: contain; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }

/* Nasdaq cover: a static SVG. The card takes its colors from the artwork (pale blue-white with a cobalt glow),
   with a soft blue edge and shadow so it holds its own against the page. Same dot grid as the other covers. */
.wcard.nas { background: linear-gradient(160deg, #F4F8FD 0%, #DDE8F6 100%); border-color: rgba(43, 91, 211, .16); box-shadow: 0 24px 60px rgba(43, 91, 211, .16); }
.wcard.nas::after { height: 38%; background: linear-gradient(180deg, rgba(221, 232, 246, 0) 0%, rgba(221, 232, 246, .82) 50%, rgba(221, 232, 246, .97) 100%); }
.wc-cover.cv-nasl { background: radial-gradient(60% 55% at 78% 46%, rgba(59, 143, 240, .20) 0%, rgba(59, 143, 240, 0) 72%), radial-gradient(80% 60% at 25% 5%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #F4F8FD 0%, #DDE8F6 100%); container-type: size; }
.wc-cover.cv-nasl::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(43, 91, 211, .16) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(#000, transparent 75%); mask-image: linear-gradient(#000, transparent 75%); }
.cv-nasl .nas-main { position: absolute; left: 50%; top: 4cqh; width: min(98cqw, 116cqh); max-width: none; height: auto; transform: translateX(-50%); transition: transform 1.2s var(--ease); }
a.wcard:hover .cv-nasl .nas-main { transform: translateX(-50%) translateY(-4px) scale(1.02); }
.wcard.nas .wc-badge { color: var(--accent); background: rgba(43, 91, 211, .08); border-color: rgba(43, 91, 211, .18); }
@media (max-width: 1023px) { .cv-nasl .nas-main { top: 50%; width: min(98cqw, 130cqh); transform: translate(-50%, -50%); } a.wcard:hover .cv-nasl .nas-main { transform: translate(-50%, -50%) scale(1.02); } }
.wcard.dark.navy { background: #070A10; box-shadow: 0 24px 60px rgba(6, 12, 24, .45), 0 0 0 1px rgba(30, 120, 220, .08); }
.wcard.dark.navy::after { background: linear-gradient(180deg, rgba(7, 10, 16, 0) 0%, rgba(7, 10, 16, .86) 55%, rgba(7, 10, 16, .98) 100%); }
.wcard.dark.navy .wc-badge { color: #A9CBF5; background: rgba(30, 120, 220, .14); border-color: rgba(100, 165, 240, .26); }
.wcard.dark.navy .wc-cta { background: #1A73D9; color: #fff; box-shadow: 0 8px 22px rgba(26, 115, 217, .4); }
a.wcard.dark.navy:hover .wc-cta { background: #3A8CEB; box-shadow: 0 10px 30px rgba(58, 140, 235, .55); }

/* minimal caption straight on the cover: badge, title, one line */
.wcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(250, 252, 254, 0) 0%, rgba(250, 252, 254, .82) 55%, rgba(250, 252, 254, .97) 100%); }
.wc-cap { position: absolute; left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); bottom: clamp(24px, 3vw, 36px); z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.wc-badge {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 400; line-height: 1.4; color: #5C6B7E;
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .7);
}
.wcard h3 { margin: 14px 0 0; font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.wc-line { margin-top: 8px; font-size: 15px; color: var(--body); }
.wc-cta { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; transition: background .25s, box-shadow .25s, transform .3s var(--ease); }
.wc-cta svg { width: 18px; height: 18px; }
a.wcard:hover .wc-cta { background: var(--hover-fill); box-shadow: var(--hover-glow); transform: translate(2px, -2px) rotate(-8deg); }
.wc-soon { flex: none; font-size: 12.5px; color: var(--muted); }

/* ---------- Side-project cards: the work card, slightly different ----------
   Two per row, landscape instead of tall, a lighter caption and a quiet white
   arrow button. A lone last card spans the full row. */
.wcards.side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.wcards.side .wcard { aspect-ratio: 16 / 11.5; border-radius: 22px; box-shadow: 0 18px 44px rgba(46, 72, 110, .12); scroll-margin-top: 24px; }
.wcards.side .wcard:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
.wcards.side .wc-cap { left: 26px; right: 26px; bottom: 24px; gap: 16px; }
.wcards.side .wcard h3 { margin-top: 12px; font-size: clamp(19px, 1.7vw, 24px); }
.wcards.side .wc-line { font-size: 14px; }
.wcards.side .wc-cover.ph { padding-bottom: 30%; }
.wcards.side .wc-cta { width: 42px; height: 42px; background: #fff; color: var(--ink); box-shadow: 0 6px 16px rgba(46, 72, 110, .16); }
.wcards.side .wc-cta svg { width: 16px; height: 16px; }
a.wcard:hover .wc-cta { color: #fff; }
/* artwork, tuned for the landscape crop (shared by Home and Side Projects) */

  

/* laptop and tablet widths: the cards are narrow, so give them more height */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .wcards.side .wcard { aspect-ratio: 1 / .96; }
  .wcards.side .wcard:last-child:nth-child(odd) { aspect-ratio: 2.3 / 1; }
  .wcards.side .wc-cap { left: 22px; right: 22px; bottom: 20px; }
  
  
}
@media (max-width: 767.98px) {
  .wcards.side { grid-template-columns: 1fr; gap: 16px; }
  .wcards.side .wcard, .wcards.side .wcard:last-child:nth-child(odd) { aspect-ratio: auto; grid-column: auto; border-radius: 20px; }
  .wcards.side .wc-cap { left: auto; right: auto; bottom: auto; }
}

/* grid sizing */
.wc-cover { container-type: inline-size; }
.wcards.grid .wcard h3 { font-size: clamp(22px, 2vw, 28px); }
.wcards.grid .wc-line { font-size: 14px; }
.wcards.grid .wc-cta { width: 46px; height: 46px; }

/* drawn artwork fills the cover */
.wc-cover > .art { position: absolute; inset: 0; border-radius: 0; }

@media (max-width: 767.98px) {
  .wcards.stack .wcard { position: relative; top: auto; height: auto; }
  .wcards.grid{ grid-template-columns: 1fr; gap: 16px; }
  .wcards.grid .wcard{ aspect-ratio: auto; }
  .wcard { border-radius: 20px; display: flex; flex-direction: column; background: var(--surface); }
  .wc-cover, .wc-cover.ph { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .wc-cover.ph { padding: 0 4%; }
  
  .wcard::after { display: none; }
  .wc-cap{ position: relative; left: auto; right: auto; bottom: auto; padding: 18px 18px 20px; }
  .wc-cta, .wcards.grid .wc-cta { width: 44px; height: 44px; }
}

/* ---------- Cloud header (page intros) ---------- */
.page-sky {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #CDDEF3 0%, #DCE8F7 40%, #EBF2FA 75%, var(--bg) 100%);
  padding-bottom: clamp(70px, 8vw, 120px);
}
.page-sky > :not(img) { position: relative; z-index: 2; }
.page-sky .sky-edge { display: block; object-fit: fill; position: absolute; left: -5%; bottom: -2px; width: 110%; height: clamp(90px, 11vw, 150px); z-index: 1; pointer-events: none; overflow: visible; transform: scaleY(-1); }

/* ---------- Cloud footer (all pages) ---------- */
.cta.cloud-foot {
  position: relative; isolation: isolate;
  padding-top: clamp(160px, 18vw, 240px);
  background: linear-gradient(180deg, #E2EBF7 0%, #CDDEF3 60%, #C0D5EE 100%);
}
.cloud-foot > .wrap { position: relative; z-index: 2; }
.cloud-foot .foot-edge { display: block; object-fit: fill; position: absolute; left: -5%; top: -2px; width: 110%; height: clamp(110px, 14vw, 190px); z-index: 1; pointer-events: none; overflow: visible; }
.cloud-foot .foot-puffs { display: block; object-fit: cover; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .7; }

/* ---------- Responsive ---------- */

@media (max-width: 1023.98px) {
  .shell { flex-direction: column; }
  /* top bar: clear over the page at rest, frosted sky glass once you scroll */
  :root { --bar-h: 68px; }
  html { scroll-padding-top: calc(var(--bar-h) + 12px); }
  .sidebar {
    position: fixed; left: 0; right: 0; top: 0; z-index: 60;
    width: 100%; height: auto; padding: 12px var(--pad); gap: 0; overflow: visible;
    border: 0; border-bottom: 1px solid transparent;
    background: transparent;
    transition: background .25s, border-color .25s, box-shadow .25s;
  }
  html.scrolled .sidebar {
    background: rgba(230, 239, 249, .72);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border-bottom-color: rgba(255, 255, 255, .6);
    box-shadow: 0 6px 24px rgba(44, 72, 106, .08);
  }
  /* the first section starts at the very top, under the clear bar: its sky and clouds fill the whole screen top */
  .main > .page-sky:first-child { padding-top: var(--bar-h); }
  .main > .case-head:first-child { border-top: 0; margin-top: var(--bar-h); }
  .brand { width: 100%; min-height: 44px; position: relative; z-index: 2; }
  .brand .nm, .brand .rl { display: none; }
  .brand > a { display: flex; align-items: center; color: #15191E; transition: color .2s; }
  .wordmark { display: block; }
  .collapse-btn { display: none; }
  .main { width: 100%; }

  /* menu button: two lines that morph into an X */
  .menu-btn { display: grid; width: 42px; height: 42px; border-radius: 50%; background: transparent; border: 1px solid transparent; color: #222D3A; transition: background .25s, border-color .25s; }
  html.scrolled .menu-btn, .menu-btn:hover { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }
  .sidebar.open .menu-btn { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }
  .burger { position: relative; width: 18px; height: 10px; }
  .burger i { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.3, .7, .2, 1), top .3s cubic-bezier(.3, .7, .2, 1); }
  .burger i:first-child { top: 0; } .burger i:last-child { top: 8.4px; }
  .sidebar.open .burger i:first-child { top: 4.2px; transform: rotate(45deg); }
  .sidebar.open .burger i:last-child { top: 4.2px; transform: rotate(-45deg); }
  html.scrolled .sidebar.open, .sidebar.open { border-bottom-color: transparent; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* full-screen menu */
  .nav-panel {
    position: fixed; inset: 0; z-index: 1;
    display: flex; flex-direction: column; gap: 28px;
    padding: 76px var(--pad) max(28px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
    background:
      linear-gradient(180deg, #CDDEF3 0%, #DFEAF8 45%, #F5F9FD 100%);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease-out, visibility 0s .25s;
  }
  .sidebar.open .nav-panel { opacity: 1; visibility: visible; transition: opacity .25s ease-out; }
  .nav-panel .nav { gap: 4px; }
  .nav-panel .nav > li { opacity: 0; transform: translateY(10px); transition: opacity .35s ease-out, transform .35s cubic-bezier(.3, .7, .2, 1); }
  .sidebar.open .nav-panel .nav > li { opacity: 1; transform: none; transition-delay: calc(.05s + var(--n, 0) * .04s); }
  .nav-panel .rail-item { height: 52px; padding: 0 14px; border-radius: 14px; font-family: var(--head); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; gap: 14px; color: var(--ink); }
  .nav-panel .rail-item svg { width: 21px; height: 21px; color: #6A7A8E; }
  .nav-panel .rail-item:hover, .nav-panel .rail-item:active { background: rgba(255, 255, 255, .5); }
  .nav-panel .rail-item[aria-current="page"] { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); color: #335782; }
  .nav-panel .rail-item[aria-current="page"] svg { color: #335782; }
  .nav-panel .group-row .rail-item { padding-right: 52px; }
  .nav-panel .sub-toggle { width: 40px; height: 40px; right: 8px; }
  .nav-panel .sub { margin: 4px 0 8px 28px; border-left-color: rgba(43, 91, 211, .2); }
  .nav-panel .sub a { font-size: 15px; padding: 9px 12px; }
  .side-foot { margin-top: auto; flex-direction: row; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(43, 91, 211, .12);
    opacity: 0; transition: opacity .35s ease-out; }
  .sidebar.open .side-foot { opacity: 1; transition-delay: .25s; }
  .side-foot .social a { width: 42px; height: 42px; background: rgba(18, 22, 29, .06); border-color: transparent; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-panel .nav > li, .side-foot, .burger i { transition: none !important; }
}

@media (max-width: 767.98px) {
  body { font-size: 14.5px; }
  .section-head, .cta-row { flex-direction: column; align-items: flex-start; }
  .card { border-radius: 12px; padding: 5px; }
  .card img, .card .ph { border-radius: 9px; }
  .project { border-radius: 16px; padding: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 479.98px) {
  .foot-row { padding-left: 0; }
}

/* ---------- Homepage work deck (redesign): text panel on the left, cover panel on the right ----------
   Each sticky card is a light glass card with an inset rounded cover. The cover keeps its own colors, and the
   text always reads dark on light, whichever cover sits beside it. Below 1024px the cards stay stacked as before. */
@media (min-width: 1024px) {
  .wcards.stack .wcard, .wcards.stack .wcard.dark, .wcards.stack .wcard.nas {
    display: grid; grid-template-columns: minmax(250px, .62fr) 1.5fr; gap: 12px; padding: 12px;
    height: clamp(430px, 60vh, 500px); background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FA 100%);
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow: 0 22px 54px rgba(44, 72, 106, .14), 0 0 0 1px rgba(213, 220, 230, .6); }
  .wcards.stack .wcard::after { display: none; }
  .wcards.stack .wc-cover, .wcards.stack .wc-cover.ph { position: relative; inset: auto; order: 2; min-height: 0; height: auto; padding: 0; border-radius: 20px; overflow: hidden; }
  .wcards.stack .wc-cover.cv-hk, .wcards.stack .wc-cover.cv-nasl { container-type: size; }
  .wcards.stack .cv-hk .hk-main, .wcards.stack .cv-nasl .nas-main { top: 50%; left: 50%; width: min(100cqw, 178cqh); transform: translate(-50%, -50%); }
  .wcards.stack a.wcard:hover .cv-hk .hk-main, .wcards.stack a.wcard:hover .cv-nasl .nas-main { transform: translate(-50%, -50%) scale(1.03); }
  .wcards.stack .wc-cap { position: static; order: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; padding: clamp(18px, 2vw, 30px) clamp(10px, 1.4vw, 22px) clamp(14px, 1.6vw, 22px) clamp(14px, 1.6vw, 24px); }
  .wcards.stack .wcard h3, .wcards.stack .wcard.dark h3, .wcards.stack .wcard.nas h3 { margin-top: 18px; font-size: clamp(34px, 3.6vw, 52px); color: var(--ink); }
  .wcards.stack .wcard .wc-line, .wcards.stack .wcard.dark .wc-line, .wcards.stack .wcard.nas .wc-line { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--body); max-width: 26ch; }
  .wcards.stack .wcard .wc-badge, .wcards.stack .wcard.dark .wc-badge, .wcards.stack .wcard.nas .wc-badge { color: var(--accent); background: rgba(43, 91, 211, .07); border: 1px solid rgba(43, 91, 211, .16); }
  .wcards.stack .wcard .wc-cta, .wcards.stack .wcard.dark .wc-cta { background: var(--ink); color: #fff; box-shadow: none; }
  a.wcards.stack .wcard:hover .wc-cta, .wcards.stack a.wcard:hover .wc-cta, .wcards.stack a.wcard.dark:hover .wc-cta { background: var(--hover-fill); box-shadow: var(--hover-glow); }
}

/* Homepage deck: each card wears its own cover color again (dark charcoal, sage-teal, pale blue), inside the split layout */
@media (min-width: 1024px) {
  .wcards.stack .wcard.dark.hk { background: linear-gradient(170deg, #1A2029 0%, #0D1117 100%); border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 24px 60px rgba(14, 22, 38, .38); }
  .wcards.stack .wcard.dark.hk h3 { color: #fff; }
  .wcards.stack .wcard.dark.hk .wc-line { color: #9AA6B8; }
  .wcards.stack .wcard.dark.hk .wc-badge { color: #B4C6E4; background: rgba(120, 160, 230, .10); border-color: rgba(160, 190, 235, .22); }
  .wcards.stack .wcard.dark.hk .wc-cta { background: #2F6FED; box-shadow: 0 8px 22px rgba(47, 111, 237, .35); }
  .wcards.stack a.wcard.dark.hk:hover .wc-cta { background: #4A85F5; box-shadow: 0 10px 30px rgba(47, 111, 237, .55); }

  .wcards.stack .wcard.mesh { background: linear-gradient(160deg, #D6E9E3 0%, #B7D4CC 100%); border-color: rgba(255, 255, 255, .7);
    box-shadow: 0 24px 60px rgba(44, 92, 88, .18); }
  .wcards.stack .wcard.mesh .wc-badge { color: #3E6A66; background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .75); }

  .wcards.stack .wcard.nas { background: linear-gradient(160deg, #F4F8FD 0%, #DDE8F6 100%); border-color: rgba(43, 91, 211, .16);
    box-shadow: 0 24px 60px rgba(43, 91, 211, .16); }
}

/* Homepage deck typography: industry as a plain eyebrow, smaller title and line, key facts as a ruled list pinned to
   the bottom of the text panel, and the arrow button sitting on the cover's top-right corner. */

@media (min-width: 1024px) {
  .wcards.stack .wcard .wc-badge, .wcards.stack .wcard.dark .wc-badge, .wcards.stack .wcard.nas .wc-badge,
  .wcards.stack .wcard.dark.hk .wc-badge, .wcards.stack .wcard.mesh .wc-badge {
    display: block; padding: 0; background: none; border: 0; border-radius: 0; font-size: 13.5px; font-weight: 400; letter-spacing: .01em; line-height: 1.3; }
  .wcards.stack .wcard.dark.hk .wc-badge { color: #8FA9D6; }
  .wcards.stack .wcard.mesh .wc-badge { color: #4F6E69; }
  .wcards.stack .wcard.nas .wc-badge { color: var(--accent); }
  .wcards.stack .wcard h3, .wcards.stack .wcard.dark h3, .wcards.stack .wcard.nas h3 { margin-top: 12px; font-size: clamp(28px, 2.7vw, 38px); letter-spacing: -0.04em; line-height: 1.04; }
  .wcards.stack .wcard .wc-line, .wcards.stack .wcard.dark .wc-line, .wcards.stack .wcard.nas .wc-line { margin-top: 10px; font-size: 15px; line-height: 1.5; max-width: 28ch; }
  .wcards.stack .wc-cap { gap: 28px; }
  .wcards.stack .wc-cap > div:first-child { width: 100%; }

  
  
  
  
  .wcards.stack .wcard.dark.hk { --rule: rgba(255, 255, 255, .12); }
  
  
  .wcards.stack .wcard.mesh { --rule: rgba(40, 70, 64, .18); }
  
  .wcards.stack .wcard.nas { --rule: rgba(43, 91, 211, .16); }

  .wcards.stack .wc-cta { position: absolute; top: 28px; right: 28px; z-index: 3; width: 46px; height: 46px; }
}

/* Homepage deck facts, quieter: a small aligned list with no rules. Value and label share a baseline. */

/* Hawkeye cover: the SVG now has no background of its own, so the card's gradient shows through and nothing
   needs feathering. */
.cv-hk .hk-main { -webkit-mask-image: none; mask-image: none; }

/* Homepage deck: one dot grid across the whole card, fading softly from the artwork outward, instead of a grid
   confined to the cover. The covers are transparent here and the card carries the gradient and glow. */
@media (min-width: 1024px) {
  .wcards.stack .wc-cover, .wcards.stack .wc-cover.ph, .wcards.stack .wc-cover.ph-clarion, .wcards.stack .wc-cover.cv-hk, .wcards.stack .wc-cover.cv-nasl { background: none; }
  .wcards.stack .wc-cover::before { display: none; }
  .wcards.stack .wcard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(var(--dot, rgba(21, 25, 30, .09)) 1px, transparent 1px); background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(75% 90% at 68% 42%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%);
    mask-image: radial-gradient(75% 90% at 68% 42%, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 100%); }

  .wcards.stack .wcard.dark.hk { --dot: rgba(150, 180, 230, .17);
    background: radial-gradient(52% 62% at 70% 40%, rgba(190, 205, 225, .12) 0%, rgba(190, 205, 225, 0) 72%), radial-gradient(38% 40% at 96% 0%, rgba(120, 160, 230, .14) 0%, rgba(120, 160, 230, 0) 70%), linear-gradient(170deg, #1A2029 0%, #0D1117 100%); }
  .wcards.stack .wcard.mesh { --dot: rgba(21, 25, 30, .10);
    background: radial-gradient(70% 70% at 62% 8%, #EEF6F3 0%, rgba(238, 246, 243, 0) 62%), linear-gradient(160deg, #D6E9E3 0%, #B7D4CC 100%); }
  .wcards.stack .wcard.nas { --dot: rgba(43, 91, 211, .15);
    background: radial-gradient(44% 56% at 78% 52%, rgba(59, 143, 240, .20) 0%, rgba(59, 143, 240, 0) 72%), radial-gradient(70% 60% at 30% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 60%), linear-gradient(160deg, #F4F8FD 0%, #DDE8F6 100%); }
}

/* Homepage deck refinements: smaller title, an eyebrow that sits in the card's own tones, and a quiet glass arrow */
@media (min-width: 1024px) {
  .wcards.stack .wcard h3, .wcards.stack .wcard.dark h3, .wcards.stack .wcard.nas h3 { margin-top: 10px; font-size: clamp(23px, 2vw, 28px); letter-spacing: -0.035em; line-height: 1.1; }
  .wcards.stack .wcard .wc-line, .wcards.stack .wcard.dark .wc-line, .wcards.stack .wcard.nas .wc-line { margin-top: 8px; }

  .wcards.stack .wcard .wc-badge, .wcards.stack .wcard.dark.hk .wc-badge, .wcards.stack .wcard.mesh .wc-badge, .wcards.stack .wcard.nas .wc-badge {
    display: flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .02em; }
  .wcards.stack .wc-badge::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
  .wcards.stack .wcard.dark.hk .wc-badge { color: rgba(196, 212, 240, .72); }
  .wcards.stack .wcard.mesh .wc-badge { color: rgba(40, 72, 66, .72); }
  .wcards.stack .wcard.nas .wc-badge { color: rgba(43, 91, 211, .78); }

  .wcards.stack .wcard .wc-cta, .wcards.stack .wcard.mesh .wc-cta, .wcards.stack .wcard.nas .wc-cta, .wcards.stack .wcard.dark .wc-cta, .wcards.stack .wcard.dark.hk .wc-cta {
    top: 24px; right: 24px; width: 36px; height: 36px; box-shadow: none; transform: none;
    background: rgba(18, 22, 29, .06); color: var(--ink); border: 1px solid rgba(18, 22, 29, .14);
    transition: background .25s, border-color .25s, color .25s; }
  .wcards.stack .wc-cta svg { width: 14px; height: 14px; }
  .wcards.stack .wcard.dark.hk .wc-cta { background: rgba(255, 255, 255, .08); color: #DCE6F8; border-color: rgba(255, 255, 255, .18); }
  .wcards.stack a.wcard .wc-cta, .wcards.stack a.wcard:hover .wc-cta { transform: none; box-shadow: none; }
  .wcards.stack a.wcard:hover .wc-cta { background: rgba(18, 22, 29, .12); border-color: rgba(18, 22, 29, .26); color: var(--ink); }
  .wcards.stack a.wcard.dark.hk:hover .wc-cta { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .32); color: #fff; box-shadow: none; }
}

/* ---------- Meshilogic cover: a real photo-style mockup on a neutral light-gray card ----------
   The card's gray is sampled from the image's own backdrop, and the image dissolves into it on every edge. */
.wcard.mesh { background: linear-gradient(160deg, #E9EBEF 0%, #D7D8DC 100%); box-shadow: 0 24px 60px rgba(40, 48, 66, .14); }
.wcard.mesh::after { background: linear-gradient(180deg, rgba(222, 223, 227, 0) 0%, rgba(222, 223, 227, .82) 52%, rgba(222, 223, 227, .97) 100%); }
.wc-cover.cv-mesh { background: radial-gradient(80% 60% at 32% 4%, #F6F7F9 0%, rgba(246, 247, 249, 0) 62%), linear-gradient(160deg, #E9EBEF 0%, #D7D8DC 100%); container-type: size; }
.wc-cover.cv-mesh::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(21, 25, 30, .09) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(#000, transparent 75%); mask-image: linear-gradient(#000, transparent 75%); }

.wcard.mesh .wc-badge { color: #5A6275; background: rgba(255, 255, 255, .6); border-color: rgba(255, 255, 255, .8); }

/* ---------- Homepage deck, text panel v3: eyebrow, title, line, then the facts as three soft tiles ---------- */
@media (min-width: 1024px) {
  .wcards.stack .wcard, .wcards.stack .wcard.dark, .wcards.stack .wcard.nas { grid-template-columns: minmax(320px, .8fr) 1.5fr; }
  .wcards.stack .wc-cover.cv-mesh { background: none; }
  
  
  .wcards.stack .wcard.mesh { --dot: rgba(21, 25, 30, .09); --rule: rgba(40, 48, 66, .12);
    background: radial-gradient(70% 70% at 62% 8%, #F6F7F9 0%, rgba(246, 247, 249, 0) 62%), linear-gradient(160deg, #E9EBEF 0%, #D7D8DC 100%); }
  .wcards.stack .wcard.mesh .wc-badge { color: rgba(60, 68, 86, .74); background: none; border: 0; }
  

  
  
  
  
  
  
}

/* ---------- Meshilogic cover v2: the photo is the card's background, edge to edge ----------
   The image fills the whole card, so the phones run off the card's own edges the way they run off the photo.
   On the homepage deck a soft fade of the photo's gray (with the dot grid) sits behind the text. */

.wc-cover.cv-mesh::before { display: none; }
@media (min-width: 1024px) {
  .wcards.stack .wcard.mesh .wc-cover.cv-mesh { position: absolute; inset: 0; z-index: -1; order: 0; border-radius: inherit; }
  .wcards.stack .wcard.mesh .wc-cover.cv-mesh::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-color: #E5E6EA; background-image: radial-gradient(rgba(21, 25, 30, .09) 1px, transparent 1px); background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 27%, rgba(0, 0, 0, .8) 36%, rgba(0, 0, 0, .35) 46%, transparent 60%);
    mask-image: linear-gradient(90deg, #000 0%, #000 27%, rgba(0, 0, 0, .8) 36%, rgba(0, 0, 0, .35) 46%, transparent 60%); }
  .wcards.stack .wcard.mesh::before { display: none; }
}

/* one fact per homepage card */

/* Meshilogic homepage card v3: text on the card's own gray, photo running off the right, top and bottom edges
   of the card, dissolving only on its left side. No wash over the phones. */
@media (min-width: 1024px) {
  .wcards.stack .wcard.mesh::before { display: block; }
  .wcards.stack .wcard.mesh .wc-cover.cv-mesh { inset: 0 0 0 34%; border-radius: 0; z-index: -1;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 9%, #000 24%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 9%, #000 24%); }
  .wcards.stack .wcard.mesh .wc-cover.cv-mesh::after { display: none; }
  
}

/* Meshilogic homepage card v4: zoomed out. The whole photo shows, anchored to the right edge of the card and
   centered vertically, dissolving softly on its left, top and bottom into the card's gray. */
@media (min-width: 1024px) {
  .wcards.stack .wcard.mesh .wc-cover.cv-mesh { inset: 0 0 0 31%; -webkit-mask-image: none; mask-image: none; }
  
  
}

/* ---------- Meshilogic card: two real-life style iPhone mockups (silver titanium, black bezel, dynamic island) ----------
   Built in CSS so they stay sharp at any size. To drop in a real screenshot, replace .ph-ui inside .phone-screen
   with <img class="phone-shot" src="assets/meshilogic/…" alt=""> (it fills the screen). */

.phone { position: absolute; width: var(--w); aspect-ratio: 9 / 19.2; border-radius: calc(var(--w) * .165); padding: calc(var(--w) * .021);
  background: linear-gradient(135deg, #F6F7F9 0%, #C3C6CC 24%, #EEF0F2 50%, #A9ACB3 76%, #DDDFE3 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 1px rgba(92, 98, 110, .38), 16px 30px 44px rgba(26, 32, 46, .28), 4px 8px 12px rgba(26, 32, 46, .16);
  transform: translate3d(calc(var(--px) * var(--w)), calc(var(--py) * var(--w)), calc(var(--pz) * 1px)) translate(-50%, -50%); transition: transform .8s var(--ease); }

/* placeholder screens: soft skeletons in the app's lavender and blue until real screenshots arrive */

@media (min-width: 1024px) {
  
  
  .wcards.stack .wcard.mesh::before { display: block; }
}

/* isometric layout: five phones lie on a tilted plane, stepping diagonally and rising slightly, front one last */

.phone { --px: calc((var(--i) - 2) * .66); --py: calc((var(--i) - 2) * .12); --pz: calc(var(--i) * 10); }
a.wcard:hover .phone { --pz: calc(var(--i) * 18 + 6); }

/* Meshilogic card: five phones on the isometric plane, laid out like the cover photo (profile, home, attendance on top; feed and report below).
   --px / --py are plane coordinates in phone widths; the scene is nudged so the group sits centred. */
.phone { --pz: 0; transform: translate3d(calc(var(--px) * var(--k) * var(--w)), calc(var(--py) * var(--k) * var(--w)), calc(var(--pz) * 1px)) translate(-50%, -50%); }
a.wcard:hover .phone { --pz: 14; }

/* Meshilogic cover, realistic pass: bigger phones that run off the card's edges like the cover photo, a brushed-titanium
   frame, a black bezel with a thin inner highlight, a camera lens in the island, a soft glare on the glass and a long
   cast shadow on the surface. Each screen takes a real image: <img class="phone-shot" src="assets/meshilogic/phone-1.webp" alt="">. */

.phone { border-radius: calc(var(--w) * .18); padding: calc(var(--w) * .016);
  background: linear-gradient(145deg, #FBFBFC 0%, #B9BCC3 18%, #E9EBEE 38%, #8F939B 62%, #D9DBE0 82%, #A3A6AD 100%);
  box-shadow: inset 0 0 0 calc(var(--w) * .006) rgba(255, 255, 255, .85), inset 0 0 0 calc(var(--w) * .012) rgba(70, 76, 88, .35),
    0 0 0 1px rgba(70, 76, 88, .45), calc(var(--w) * .34) calc(var(--w) * .5) calc(var(--w) * .38) rgba(24, 30, 44, .26), calc(var(--w) * .08) calc(var(--w) * .12) calc(var(--w) * .1) rgba(24, 30, 44, .22); }

/* ---------- Octo Optimizer on the homepage deck: same dark card as Hawkeye, artwork as a rounded cover panel ---------- */
.wcard.dark.hk.octo .wc-cover.cv-octo { background: #0B0A16; }
.wcard.dark.hk.octo .wc-cover.cv-octo img { object-position: center; }
@media (min-width: 1024px) {
  .wcards.stack .wcard.dark.hk.octo { --dot: rgba(170, 160, 255, .13);
    background: radial-gradient(52% 62% at 70% 40%, rgba(120, 100, 255, .10) 0%, rgba(120, 100, 255, 0) 72%), radial-gradient(38% 40% at 96% 0%, rgba(140, 120, 255, .10) 0%, rgba(140, 120, 255, 0) 70%), linear-gradient(170deg, #17151F 0%, #0D0C14 100%); }
  .wcards.stack .wcard.dark.hk.octo .wc-cover.cv-octo { background: #0B0A16; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset; }
}
@media (max-width: 1023px) {
  .wcard.dark.hk.octo::after { background: linear-gradient(180deg, rgba(13, 12, 20, 0) 0%, rgba(13, 12, 20, .80) 45%, #0D0C14 88%); }
  .wcard.dark.hk.octo { background: #0D0C14; }
}

/* ---------- Octo Optimizer card: themed from its cover (deep-sea navy, indigo button, sea-green progress) ---------- */
 .wcard.dark.hk.octo { --octo-bg: #020A24; background: linear-gradient(175deg, #040D2E 0%, #020A24 100%); box-shadow: 0 24px 60px rgba(2, 10, 36, .45), 0 0 0 1px rgba(90, 120, 255, .10); }
.wc-cover.cv-octo, .wcard.dark.hk.octo .wc-cover.cv-octo { background: #01081C; }
 .wcard.dark.hk.octo::after { background: linear-gradient(180deg, rgba(2, 10, 36, 0) 0%, rgba(2, 10, 36, .86) 55%, rgba(2, 10, 36, .98) 100%); }
 .wcard.dark.hk.octo .wc-badge { color: #A9C2FF; background: rgba(70, 100, 255, .14); border-color: rgba(130, 160, 255, .26); }
 .wcard.dark.hk.octo .wc-line { color: #93A4C8; }
 .wcard.dark.hk.octo .wc-cta { background: #3B22E8; box-shadow: 0 8px 22px rgba(59, 34, 232, .42); }
 a.wcard.dark.hk.octo:hover .wc-cta { background: #5640F0; box-shadow: 0 10px 30px rgba(86, 64, 240, .55); }
@media (min-width: 1024px) {
  .wcards.stack .wcard.dark.hk.octo { --dot: rgba(120, 150, 255, .12);
    background: radial-gradient(52% 62% at 70% 40%, rgba(40, 80, 220, .14) 0%, rgba(40, 80, 220, 0) 72%), radial-gradient(38% 40% at 96% 0%, rgba(60, 100, 255, .10) 0%, rgba(60, 100, 255, 0) 70%), linear-gradient(170deg, #061237 0%, #020A24 100%); }
  .wcards.stack .wcard.dark.hk.octo .wc-cover.cv-octo { background: #01081C; box-shadow: 0 0 0 1px rgba(130, 160, 255, .10) inset; }
  
}
@media (max-width: 1023px) { .wcard.dark.hk.octo { background: #020A24; } }

/* Octo Optimizer cover: the three-window cut-out sits on a deep-sea backdrop built in CSS (no baked background).
   Navy fading to a brighter ocean blue at the foot, an indigo glow behind the front window and a faint dot grid. */
.wc-cover.cv-octo.mock, .wcard.dark.hk.octo .wc-cover.cv-octo.mock { background:
  radial-gradient(60% 55% at 62% 46%, rgba(70, 60, 235, .22) 0%, rgba(70, 60, 235, 0) 70%),
  linear-gradient(180deg, #020A24 0%, #04123A 62%, #0A2266 100%); }
.wc-cover.cv-octo.mock::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(140, 170, 255, .16) 1px, transparent 1px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }
.wc-cover.cv-octo.mock img, .wcards.side .wc-cover.cv-octo.mock img, .wcards.grid .wc-cover.cv-octo.mock img { position: absolute; inset: auto; left: 50%; top: 9%; width: 82%; height: auto; max-width: none; object-fit: contain; -webkit-mask-image: none; mask-image: none;
  transform: translateX(-50%); filter: drop-shadow(0 22px 34px rgba(0, 4, 24, .6)); transition: transform 1.2s var(--ease); }
a.wcard:hover .cv-octo.mock img { transform: translateX(-50%) scale(1.03); }
@media (min-width: 1024px) {
  .wcards.stack .wcard.dark.hk.octo .wc-cover.cv-octo.mock { background:
    radial-gradient(60% 55% at 58% 48%, rgba(70, 60, 235, .24) 0%, rgba(70, 60, 235, 0) 72%),
    linear-gradient(180deg, #020A24 0%, #04123A 62%, #0A2266 100%); }
  .wcards.stack .wcard.dark.hk.octo .wc-cover.cv-octo.mock img { top: 50%; width: 84%; transform: translate(-50%, -50%); }
  .wcards.stack a.wcard:hover .cv-octo.mock img { transform: translate(-50%, -50%) scale(1.03); }
}

/* Octo Optimizer v3: no cover panel. The cut-out sits straight on the card, which carries the theme of the original design:
   deep-sea navy, and an indigo glow behind the front window. */
 .wcard.dark.hk.octo, .wcards.stack .wcard.dark.hk.octo { --dot: rgba(140, 170, 255, .10);
  background:
    radial-gradient(80% 65% at 66% 34%, rgba(60, 48, 200, .13) 0%, rgba(60, 48, 200, .07) 30%, rgba(60, 48, 200, .025) 58%, rgba(60, 48, 200, 0) 85%),
    linear-gradient(180deg, #000B26 0%, #00091E 50%, #000614 100%);
  box-shadow: 0 24px 60px rgba(2, 10, 36, .45); }
.wc-cover.cv-octo.mock, .wcard.dark.hk.octo .wc-cover.cv-octo.mock, .wcards.stack .wcard.dark.hk.octo .wc-cover.cv-octo.mock { background: none; box-shadow: none; }
.wc-cover.cv-octo.mock::before { display: none; }
.wc-cover.cv-octo.mock { overflow: visible; }
 .wcard.dark.hk.octo::after { background: linear-gradient(180deg, rgba(0, 8, 27, 0) 0%, rgba(0, 8, 27, .72) 56%, rgba(0, 8, 27, .94) 100%); }
.wc-cover.cv-octo.mock img, .wcards.side .wc-cover.cv-octo.mock img, .wcards.grid .wc-cover.cv-octo.mock img { top: 8%; width: 86%; left: 52%; filter: drop-shadow(0 26px 40px rgba(0, 4, 30, .7)); }
@media (min-width: 1024px) { .wcards.stack .wcard.dark.hk.octo .wc-cover.cv-octo.mock img { left: 50%; width: 92%; } }

/* One stroke for every work card: the white hairline and soft top highlight Meshilogic wears (Home deck, Work grid, Side Projects) */
.wcard, .wcard.dark, .wcard.dark.hk, .wcard.dark.navy, .wcard.nas, .wcard.mesh,
.wcards.stack .wcard.dark.hk, .wcards.stack .wcard.dark.hk.octo, .wcards.stack .wcard.nas, .wcards.stack .wcard.mesh { border-color: rgba(255, 255, 255, .8); }
.wcard.dark.hk, .wcard.dark.navy, .wcards.stack .wcard.dark.hk { box-shadow: 0 24px 60px rgba(14, 22, 38, .38); }
 .wcard.dark.hk.octo, .wcards.stack .wcard.dark.hk.octo { box-shadow: 0 24px 60px rgba(0, 8, 27, .45); }
.wcard.nas, .wcards.stack .wcard.nas { box-shadow: 0 24px 60px rgba(43, 91, 211, .16); }
.wcards.stack .wcard.mesh { box-shadow: 0 24px 60px rgba(40, 48, 66, .14); }

/* Case-study cover frames wear the same white hairline as the work cards */
figure.stage.stage { border: 1px solid rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .8); }

/* ---------- Arrow button, one design for every card and every breakpoint ----------
   A clean solid disc with no stroke: ink on light cards, white on dark ones. On hover the disc lifts a touch and only the arrow
   travels. Sizes step down gracefully: 44px by default, 42px on the Home deck, 40px on side-project cards. */
.wcard { --cta-bg: var(--ink); --cta-fg: #fff; --cta-bg-h: #2A3441; }
.wcard.dark, .wcard.hk, .wcard.hk.octo { --cta-bg: #fff; --cta-fg: #12161D; --cta-bg-h: #E7EDFB; }
.wcards .wcard .wc-cta, .wcards.stack .wcard .wc-cta, .wcards.side .wcard .wc-cta, .wcards.grid .wcard .wc-cta,
.wcards.stack .wcard.dark.hk .wc-cta, .wcards.stack .wcard.mesh .wc-cta, .wcards.stack .wcard.nas .wc-cta, .wcards.stack .wcard.dark .wc-cta {
  width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 50%;
  background: var(--cta-bg) !important; color: var(--cta-fg) !important;
  box-shadow: 0 6px 18px rgba(12, 18, 30, .18) !important; transform: none !important;
  transition: background .25s, box-shadow .25s, transform .3s var(--ease) !important; }
.wcards .wcard .wc-cta svg { width: 18px; height: 18px; stroke-width: 1.8; transition: transform .3s var(--ease); }
.wcards a.wcard:hover .wc-cta, .wcards.stack a.wcard:hover .wc-cta, .wcards.stack a.wcard.dark.hk:hover .wc-cta, .wcards.side a.wcard:hover .wc-cta {
  background: var(--cta-bg-h) !important; color: var(--cta-fg) !important; border: 0 !important;
  box-shadow: 0 10px 24px rgba(12, 18, 30, .26) !important; transform: translateY(-2px) !important; }
.wcards a.wcard:hover .wc-cta svg { transform: translate(2px, -2px); }
.wcards.side .wcard .wc-cta { width: 40px !important; height: 40px !important; }
.wcards.side .wcard .wc-cta svg { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .wcards.stack .wcard .wc-cta { top: 24px; right: 24px; width: 42px !important; height: 42px !important; }
}

/* Meshilogic card carries no graphic, so on stacked (mobile) layouts the empty cover collapses and the card is just its caption */
@media (max-width: 1023px) { .wc-cover.cv-mesh:empty { display: none; } .wcard.mesh .wc-cap { padding-top: 56px; } }

/* Coming-soon placeholders: no title, just the muted label, aligned left */
.wcard.soon .wc-cap { justify-content: flex-start; }

/* Case-study cover frames match the work cards: same hairline, same corner radius at each breakpoint */
figure.stage.stage { border-radius: 28px; }
@media (max-width: 1023px) { figure.stage.stage { border-radius: 20px; } }

/* ---------- Arrow button v2: frosted glass, tinted to its card ----------
   Dark cards get a light frosted disc with a cool tint (blue on Hawkeye, indigo on Octo Optimizer); light cards get a tinted
   disc with a darker arrow (steel blue on Nasdaq, soft ink on Meshilogic). Only a faint top highlight, no outline. */
.wcard { --cta-bg: rgba(18, 22, 29, .08); --cta-fg: #12161D; --cta-bg-h: rgba(18, 22, 29, .14); --cta-hi: rgba(255, 255, 255, .7); --cta-sh: rgba(40, 48, 66, .16); }
.wcard.nas { --cta-bg: rgba(43, 91, 211, .12); --cta-fg: #2B5BD3; --cta-bg-h: rgba(43, 91, 211, .2); --cta-sh: rgba(43, 91, 211, .22); }
.wcard.dark.hk { --cta-bg: rgba(140, 175, 255, .16); --cta-fg: #EAF1FF; --cta-bg-h: rgba(140, 175, 255, .28); --cta-hi: rgba(255, 255, 255, .28); --cta-sh: rgba(0, 0, 0, .4); }
.wcard.dark.hk.octo{ --cta-bg: rgba(150, 140, 255, .20); --cta-fg: #F1EEFF; --cta-bg-h: rgba(150, 140, 255, .34); --cta-hi: rgba(255, 255, 255, .30); --cta-sh: rgba(0, 4, 30, .5); }
.wcards .wcard .wc-cta, .wcards.stack .wcard .wc-cta, .wcards.side .wcard .wc-cta, .wcards.grid .wcard .wc-cta,
.wcards.stack .wcard.dark.hk .wc-cta, .wcards.stack .wcard.mesh .wc-cta, .wcards.stack .wcard.nas .wc-cta, .wcards.stack .wcard.dark .wc-cta {
  background: var(--cta-bg) !important; color: var(--cta-fg) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--cta-hi), 0 8px 20px var(--cta-sh) !important; }
.wcards a.wcard:hover .wc-cta, .wcards.stack a.wcard:hover .wc-cta, .wcards.stack a.wcard.dark.hk:hover .wc-cta, .wcards.side a.wcard:hover .wc-cta {
  background: var(--cta-bg-h) !important; color: var(--cta-fg) !important;
  box-shadow: inset 0 1px 0 var(--cta-hi), 0 12px 26px var(--cta-sh) !important; }

/* ---------- Arrow button v3: one frosted disc for every card ----------
   Smoked glass with a soft light sheen and a white arrow. The same on light and dark cards, so nothing changes from card to card. */
.wcard, .wcard.nas, .wcard.dark.hk, .wcard.dark.hk.octo{ --cta-bg: rgba(16, 22, 34, .58); --cta-bg-h: rgba(16, 22, 34, .74); --cta-fg: #fff; --cta-hi: rgba(255, 255, 255, .34); --cta-sh: rgba(10, 16, 30, .22); }
.wcards .wcard .wc-cta, .wcards.stack .wcard .wc-cta, .wcards.side .wcard .wc-cta, .wcards.grid .wcard .wc-cta,
.wcards.stack .wcard.dark.hk .wc-cta, .wcards.stack .wcard.mesh .wc-cta, .wcards.stack .wcard.nas .wc-cta, .wcards.stack .wcard.dark .wc-cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .04)), var(--cta-bg) !important; color: #fff !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--cta-hi), 0 8px 22px var(--cta-sh) !important; }
.wcards a.wcard:hover .wc-cta, .wcards.stack a.wcard:hover .wc-cta, .wcards.stack a.wcard.dark.hk:hover .wc-cta, .wcards.side a.wcard:hover .wc-cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .06)), var(--cta-bg-h) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 var(--cta-hi), 0 10px 26px var(--cta-sh) !important; transform: none !important; }

/* ---------- Eyebrow badge: one style on Home and Work ----------
   The Work page pill, with no leading dot, on every card at every breakpoint. */
.wcards .wc-badge::before, .wcards.stack .wc-badge::before { content: none !important; display: none !important; }
.wcards .wcard .wc-badge {
  display: inline-block !important; padding: 4px 11px !important; border-radius: 999px !important;
  font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important;
  color: #5C6B7E !important; background: rgba(255, 255, 255, .5) !important; border: 1px solid rgba(255, 255, 255, .7) !important; }
.wcards .wcard.dark.hk .wc-badge { color: #B4C6E4 !important; background: rgba(120, 160, 230, .10) !important; border-color: rgba(160, 190, 235, .20) !important; }
.wcards .wcard.dark.hk.octo .wc-badge{ color: #A9C2FF !important; background: rgba(70, 100, 255, .14) !important; border-color: rgba(130, 160, 255, .26) !important; }
.wcards .wcard.nas .wc-badge { color: var(--accent) !important; background: rgba(43, 91, 211, .08) !important; border-color: rgba(43, 91, 211, .18) !important; }
.wcards .wcard.mesh .wc-badge { color: #5A6275 !important; background: rgba(255, 255, 255, .6) !important; border-color: rgba(255, 255, 255, .8) !important; }

/* Metrics on the work cards: no box, the label and figure just sit in the card */

/* Eyebrow text only: no pill, no border, no fill, no leading dot. Just muted text, tinted to the card. */
.wcards .wcard .wc-badge, .wcards .wcard.dark.hk .wc-badge, .wcards .wcard.dark.hk.octo .wc-badge, .wcards .wcard.nas .wc-badge, .wcards .wcard.mesh .wc-badge {
  display: block !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 13px !important; line-height: 1.4 !important; letter-spacing: 0 !important; color: #5C6B7E !important; }
.wcards .wcard.dark.hk .wc-badge { color: #8FA3C4 !important; }
.wcards .wcard.dark.hk.octo .wc-badge{ color: #8FA6E0 !important; }
.wcards .wcard.nas .wc-badge { color: #4F6FB8 !important; }
.wcards .wcard.mesh .wc-badge { color: #5A6275 !important; }

/* Back to top: the white-filled pill again, with a dark disc for emphasis */
.foot-row .top { height: 48px; padding: 0 6px 0 22px; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(44, 72, 106, .16); transition: box-shadow .25s, transform .25s var(--ease); outline: none; }
.foot-row .top i { width: 36px; height: 36px; background: var(--ink); color: #fff; box-shadow: none; }
.foot-row .top svg { width: 16px; height: 16px; }
.foot-row .top:hover { box-shadow: 0 12px 30px rgba(44, 72, 106, .22); }
.foot-row .top:hover i { background: var(--hover-fill, #4F6D91); transform: translateY(-2px); }
.foot-row .top:focus { outline: none; }
.foot-row .top:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Footer bar: the whole row is one frosted-glass container (text and button together) */
.foot-row { padding: 8px 8px 8px 26px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .26));
  -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 32px rgba(44, 72, 106, .10); }
@media (max-width: 767.98px) { .foot-row { padding: 12px 12px 12px 20px; border-radius: 22px; } }

/* Footer bar v2: a fully rounded, quiet glass pill that blends into the sky; "Back to top" sits inside it with no container of its own */
.foot-row { padding: 8px 10px 8px 28px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .12));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 6px 20px rgba(44, 72, 106, .06); }
.foot-row .top { height: 40px; padding: 0 4px 0 12px; border-radius: 999px; background: none; box-shadow: none; }
.foot-row .top:hover { box-shadow: none; }
.foot-row .top i { width: 32px; height: 32px; background: rgba(255, 255, 255, .6); color: var(--ink); box-shadow: none; }
.foot-row .top:hover i { background: #fff; color: var(--ink); transform: translateY(-2px); }
@media (max-width: 767.98px) { .foot-row { padding: 10px 10px 10px 22px; border-radius: 32px; } }

/* Footer credit line wears the same type as "Back to top": same size, weight and ink colour */
.foot-row > span { font-size: 13.5px; font-weight: 500; color: var(--ink); }

/* Footer bar v3: plain frosted tint, no stroke and no shadow; text in a soft navy that sits well on the sky */
.foot-row { box-shadow: none; border: 0; background: rgba(255, 255, 255, .22); }
.foot-row > span, .foot-row .top { color: #36507A; }
.foot-row .top i { color: #36507A; background: rgba(255, 255, 255, .55); }
.foot-row .top:hover i { color: #36507A; background: rgba(255, 255, 255, .85); }

/* Footer bar v4: no pill. A hairline divider across the top, the credit line below it, and "Back to top" as a plain text link */
.foot-row { border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
  padding: 22px 0 0; position: relative; }
.foot-row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(51, 87, 130, .11); }
.foot-row > span { font-size: 13px; font-weight: 400; letter-spacing: .01em; color: #4A6385; }
.foot-row .top { height: auto; padding: 0; gap: 6px; font-size: 13px; font-weight: 500; color: #335782; background: none; box-shadow: none; transition: color .2s; }
.foot-row .top i { width: auto; height: auto; background: none; border-radius: 0; box-shadow: none; color: inherit; display: inline-flex; transition: transform .25s var(--ease); }
.foot-row .top svg { width: 14px; height: 14px; }
.foot-row .top:hover { color: var(--ink); }
.foot-row .top:hover i { background: none; color: inherit; transform: translateY(-2px); }
@media (max-width: 767.98px) { .foot-row { padding: 18px 0 0; border-radius: 0; } }

/* Hawkeye card highlight: a two-line statement instead of a single number. The sentence leads, the facts sit beneath it. */

/* Homepage and Work deck, caption typography: a smaller title, a clear step down to the description, and the highlight as a ruled block at the foot */
@media (min-width: 1024px) {
  .wcards.stack .wcard .wc-badge { font-size: 12px; letter-spacing: 0; }
  .wcards.stack .wcard h3, .wcards.stack .wcard.dark h3, .wcards.stack .wcard.nas h3, .wcards.stack .wcard.mesh h3 { margin-top: 16px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; }
  .wcards.stack .wcard .wc-line { margin-top: 8px; max-width: 30ch; font-size: 13.5px; line-height: 1.55; letter-spacing: 0; }
  
  
  
  
}

/* Deck category label as a quiet translucent pill (light tint on dark cards, dark tint on light cards) */
.wcards.stack .wcard .wc-badge, .wcards.stack .wcard.nas .wc-badge, .wcards.stack .wcard.mesh .wc-badge, .wcards.stack .wcard.dark.hk .wc-badge, .wcards.stack .wcard.dark.hk.octo .wc-badge {
  display: inline-flex !important; width: fit-content; padding: 4px 11px !important; border: 1px solid rgba(18, 22, 29, .09) !important; border-radius: 999px !important;
  background: rgba(18, 22, 29, .04) !important; font-size: 12px !important; line-height: 1.3 !important; }
.wcards.stack .wcard.dark.hk .wc-badge, .wcards.stack .wcard.dark.hk.octo .wc-badge { border-color: transparent !important; background: rgba(255, 255, 255, .12) !important; color: #fff !important; }
/* Light cards (Nasdaq, Meshilogic): same stroke-free pill as the dark cards, a soft blue-grey fill with near-black text */
.wcards.stack .wcard.nas .wc-badge, .wcards.stack .wcard.mesh .wc-badge { border: 0 !important; background: rgba(66, 86, 116, .11) !important; color: #1A2230 !important; }

/* Deck cards: no metric block, so the badge, title and line sit together at the foot of the caption column */
@media (min-width: 1024px) {
  .wcards.stack .wc-cap { justify-content: flex-end; }
  .wcards.stack .wcard .wc-line { max-width: 34ch; }
}

/* Coming soon tag: sits where the arrow button was on cards that are not linked yet */
.wcards .wcard .wc-tag { position: absolute; top: 24px; right: 24px; z-index: 3; display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 999px; font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  background: rgba(66, 86, 116, .11); color: #1A2230; }
.wcards .wcard.dark .wc-tag { background: rgba(255, 255, 255, .14); color: #fff; }
@media (min-width: 1024px) { .wcards.stack .wcard .wc-tag { top: 28px; right: 28px; } }