/* Works / Open Studio Index — bright portfolio poster system */

body.works-showcase {
  --works-ink: #0a3f72;
  --works-blue: #0759d3;
  --works-cyan: #00c8f2;
  --works-coral: #ff705f;
  --works-lime: #dfff64;
  --works-paper: #f7fcff;
  --works-line: rgba(10, 63, 114, 0.2);
  color: var(--works-ink);
  background:
    linear-gradient(rgba(7, 89, 211, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 89, 211, 0.045) 1px, transparent 1px),
    var(--works-paper);
  background-size: 54px 54px;
}

.works-showcase ::selection {
  color: var(--works-ink);
  background: var(--works-lime);
}

.works-showcase .site-header {
  color: var(--works-ink);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 2px solid var(--works-blue);
  box-shadow: 0 8px 0 rgba(0, 200, 242, 0.08);
  backdrop-filter: blur(18px);
}

.works-showcase .brand,
.works-showcase .brand:hover,
.works-showcase .brand-name,
.works-showcase .gnav a {
  color: var(--works-ink);
}

.works-showcase .brand-mark {
  color: #ffffff;
  background: var(--works-blue);
  border-color: var(--works-blue);
  box-shadow: 6px 6px 0 var(--works-lime);
}

.works-showcase .brand-mark::after {
  background: var(--works-coral);
}

.works-showcase .header-cta {
  color: #ffffff;
  background: var(--works-blue);
  border-color: var(--works-blue);
  box-shadow: 7px 7px 0 var(--works-lime);
}

.works-showcase .header-cta:hover {
  color: #ffffff;
  background: #0649ad;
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 var(--works-lime);
}

.works-showcase .page-hero.salt-field {
  min-height: clamp(520px, 68vh, 720px);
  color: var(--works-ink);
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.98) 0 51%, rgba(207, 245, 255, 0.9) 51% 76%, rgba(223, 255, 100, 0.48) 76% 100%);
  border-bottom: 2px solid var(--works-blue);
  overflow: hidden;
}

.works-showcase .page-hero.salt-field::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(48vw, 720px);
  height: 13px;
  right: -5%;
  top: 27%;
  background: var(--works-coral);
  transform: rotate(-9deg);
  box-shadow:
    0 28px 0 var(--works-cyan),
    0 56px 0 rgba(7, 89, 211, 0.17);
  pointer-events: none;
}

.works-showcase .page-hero.salt-field::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(34vw, 470px);
  aspect-ratio: 1;
  right: 3%;
  bottom: -28%;
  border: 2px solid rgba(7, 89, 211, 0.35);
  background:
    linear-gradient(rgba(7, 89, 211, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 89, 211, 0.13) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: rotate(10deg);
  pointer-events: none;
}

.works-showcase .page-hero .container {
  position: relative;
  z-index: 1;
}

.works-showcase .page-hero .crumb,
.works-showcase .page-hero .crumb a,
.works-showcase .page-hero .lead {
  color: #40688e;
}

body.works-showcase .page-hero h1 {
  color: var(--works-ink) !important;
  font-size: clamp(4.6rem, 10vw, 9.5rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  text-shadow: 5px 5px 0 rgba(0, 200, 242, 0.2);
}

.works-showcase #estimate .wlink {
  color: var(--works-ink);
  background: var(--works-lime);
  border: 1px solid var(--works-ink);
}

.works-showcase .page-hero .lead {
  max-width: 620px;
  font-size: clamp(1rem, 1.5vw, 1.24rem);
  line-height: 1.9;
}

.works-showcase .page-hero .en {
  right: -0.04em;
  bottom: -0.2em;
  color: rgba(7, 89, 211, 0.08);
  -webkit-text-stroke: 1px rgba(7, 89, 211, 0.28);
  font-size: clamp(10rem, 28vw, 28rem);
}

.works-showcase .works-page-sec {
  padding: clamp(92px, 11vw, 160px) 0;
  background:
    linear-gradient(135deg, rgba(0, 200, 242, 0.1), transparent 34%),
    transparent;
}

.works-showcase .wgrid {
  counter-reset: work-cover;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 48px);
  border: 0;
}

.works-showcase .wcard {
  --cover-a: #c9f4ff;
  --cover-b: #dfff64;
  counter-increment: work-cover;
  min-width: 0;
  overflow: visible;
  color: var(--works-ink);
  border: 2px solid var(--works-blue);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 14px 14px 0 color-mix(in srgb, var(--cover-b) 76%, white);
  transition:
    transform 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.25s ease;
}

.works-showcase .wcard:nth-child(2) { --cover-a: #dbe6ff; --cover-b: #ff8e7d; }
.works-showcase .wcard:nth-child(3) { --cover-a: #e6ffc1; --cover-b: #74ddff; }
.works-showcase .wcard:nth-child(4) { --cover-a: #fff0a4; --cover-b: #8eecd2; }
.works-showcase .wcard:nth-child(5) { --cover-a: #ffd9cd; --cover-b: #ffe360; }
.works-showcase .wcard:nth-child(6) { --cover-a: #c7f1ff; --cover-b: #ff8173; }
.works-showcase .wcard:nth-child(7) { --cover-a: #dce7ff; --cover-b: #dfff64; }
.works-showcase .wcard:nth-child(8) { --cover-a: #c9f4ff; --cover-b: #93e7ff; }
.works-showcase .wcard:nth-child(9) { --cover-a: #dcecff; --cover-b: #7cdeff; }
.works-showcase .wcard:nth-child(10) { --cover-a: #ffe2dc; --cover-b: #dfff64; }
.works-showcase .wcard:nth-child(11) { --cover-a: #c8efff; --cover-b: #ff8e7d; }

.works-showcase .wcard:hover {
  color: var(--works-ink);
  background: #ffffff;
  transform: translate(-5px, -7px);
  box-shadow: 22px 24px 0 color-mix(in srgb, var(--cover-b) 78%, white);
}

.works-showcase .wcard:first-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
}

.works-showcase .wcard:first-child .wthumb {
  min-height: 470px;
  height: 100%;
  border-right: 2px solid var(--works-blue);
  border-bottom: 0;
}

.works-showcase .wthumb {
  height: 300px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 2px solid var(--works-blue);
  background:
    linear-gradient(145deg, var(--cover-a), #ffffff 58%, var(--cover-b));
}

.works-showcase .wthumb::before {
  content: counter(work-cover, decimal-leading-zero);
  position: absolute;
  z-index: 5;
  top: 15px;
  left: 15px;
  min-width: 46px;
  padding: 8px 10px;
  color: #ffffff;
  background: var(--works-blue);
  border: 1px solid var(--works-ink);
  font-family: "Syne", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  box-shadow: 5px 5px 0 var(--cover-b);
}

.works-showcase .wthumb::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: 0.26;
  background:
    linear-gradient(rgba(7, 89, 211, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7, 89, 211, 0.22) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}

.works-showcase .wthumb-screen img {
  position: absolute;
  z-index: 2;
  width: 84%;
  height: 78%;
  left: 8%;
  top: 12%;
  object-fit: cover;
  object-position: top;
  border: 7px solid #ffffff;
  box-shadow: 18px 22px 0 rgba(7, 89, 211, 0.15);
  transform: rotate(-1.6deg);
  transition:
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.works-showcase .wcard:nth-child(even) .wthumb-screen img {
  transform: rotate(1.6deg);
}

.works-showcase .wcard:hover .wthumb-screen img {
  transform: rotate(0deg) scale(1.035);
  box-shadow: 24px 28px 0 rgba(7, 89, 211, 0.19);
}

.works-showcase .wthumb-cover img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.works-showcase .wthumb-cover svg {
  display: none;
}

.works-showcase .wcard:hover .wthumb-cover img {
  transform: scale(1.045);
}

.works-showcase .badge {
  z-index: 6;
  top: 15px;
  right: 15px;
  color: var(--works-ink);
  background: var(--works-lime);
  border: 1px solid var(--works-ink);
  border-radius: 0;
}

.works-showcase .wbody {
  padding: clamp(26px, 3.2vw, 40px);
}

.works-showcase .work-cat,
.works-showcase .wmeta-label {
  color: var(--works-blue);
}

.works-showcase .wbody h3 {
  color: var(--works-ink);
  font-size: clamp(1.42rem, 2.1vw, 2rem);
  line-height: 1.35;
}

.works-showcase .wbody > p,
.works-showcase .wmeta-val {
  color: #4d6c88;
}

.works-showcase .wmeta {
  border-top-color: var(--works-line);
}

.works-showcase .wlink {
  width: fit-content;
  padding: 9px 13px;
  color: #ffffff;
  background: var(--works-blue);
}

.works-showcase .wlink .arr {
  color: var(--works-lime);
}

.works-showcase .cta-band {
  color: var(--works-ink);
  background:
    linear-gradient(120deg, #c9f4ff 0 62%, #dfff64 62%);
  border-block: 2px solid var(--works-blue);
}

.works-showcase .cta-band h2,
.works-showcase .cta-band p {
  color: var(--works-ink);
}

.works-showcase .btn-ink {
  color: #ffffff;
  background: var(--works-blue);
  border-color: var(--works-blue);
  box-shadow: 7px 7px 0 var(--works-coral);
}

.works-showcase .site-footer {
  color: var(--works-ink);
  background: #e6f7ff;
  border-top-color: var(--works-blue);
}

.works-showcase .site-footer a,
.works-showcase .footer-brand,
.works-showcase .footer-brand .wordmark {
  color: var(--works-ink);
}

@media (max-width: 820px) {
  .works-showcase .page-hero.salt-field {
    min-height: 560px;
    background:
      linear-gradient(155deg, #ffffff 0 59%, #c9f4ff 59% 84%, #dfff64 84%);
  }

  body.works-showcase .page-hero h1 {
    font-size: clamp(4.4rem, 22vw, 7rem);
  }

  .works-showcase .wgrid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .works-showcase .wcard:first-child {
    grid-column: auto;
    display: flex;
  }

  .works-showcase .wcard:first-child .wthumb,
  .works-showcase .wthumb {
    min-height: 0;
    height: 235px;
    border-right: 0;
    border-bottom: 2px solid var(--works-blue);
  }

  .works-showcase .wcard {
    box-shadow: 8px 9px 0 color-mix(in srgb, var(--cover-b) 75%, white);
  }

  .works-showcase .wcard:hover {
    transform: none;
    box-shadow: 8px 9px 0 color-mix(in srgb, var(--cover-b) 75%, white);
  }

  .works-showcase .wthumb-screen img {
    width: 88%;
    height: 78%;
    left: 6%;
    border-width: 5px;
    box-shadow: 10px 12px 0 rgba(7, 89, 211, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .works-showcase .wcard,
  .works-showcase .wthumb img {
    transition: none;
  }
}

/* Refined showcase — imagery and material depth over broad saturated fields */
body.works-showcase {
  --works-ink: #3b4b62;
  --works-blue: #6575a2;
  --works-cyan: #94bac2;
  --works-coral: #c9897a;
  --works-lime: #e3e8c8;
  --works-paper: #f7f9fa;
  --works-line: rgba(59, 75, 98, 0.17);
  background:
    linear-gradient(rgba(101, 117, 162, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(101, 117, 162, 0.032) 1px, transparent 1px),
    var(--works-paper);
  background-size: 58px 58px;
}

.works-showcase .site-header {
  border-bottom: 1px solid rgba(101, 117, 162, 0.28);
  box-shadow: 0 14px 40px rgba(57, 70, 92, 0.07);
}

.works-showcase .brand-mark,
.works-showcase .header-cta {
  box-shadow: 0 12px 28px rgba(76, 89, 130, 0.2);
}

.works-showcase .page-hero.salt-field {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.99) 0 43%, rgba(247, 250, 251, 0.83) 61%, rgba(233, 240, 242, 0.34) 100%),
    url("/assets/capabilities-blueprint-studio-v1.webp");
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: scroll, fixed;
  border-bottom: 1px solid rgba(101, 117, 162, 0.28);
}

.works-showcase .page-hero.salt-field::before {
  height: 5px;
  opacity: 0.72;
  box-shadow: 0 19px 0 rgba(148, 186, 194, 0.72), 0 38px 0 rgba(101, 117, 162, 0.12);
}

.works-showcase .page-hero.salt-field::after {
  opacity: 0.24;
}

body.works-showcase .page-hero h1 {
  text-shadow: 5px 5px 0 rgba(148, 186, 194, 0.15);
}

.works-showcase #estimate .wlink,
.works-showcase .badge {
  background: #edf0dc;
  border-color: rgba(59, 75, 98, 0.32);
}

.works-showcase .works-page-sec {
  background:
    radial-gradient(circle at 8% 8%, rgba(148, 186, 194, 0.12), transparent 26rem),
    transparent;
}

.works-showcase .wcard {
  --cover-a: #e8eff1;
  --cover-b: #e7e9dd;
  border: 1px solid rgba(101, 117, 162, 0.32);
  border-radius: 18px;
  box-shadow: 0 28px 72px rgba(57, 70, 92, 0.11);
}

.works-showcase .wcard:nth-child(2),
.works-showcase .wcard:nth-child(5),
.works-showcase .wcard:nth-child(8),
.works-showcase .wcard:nth-child(11) {
  --cover-a: #e9ebf2;
  --cover-b: #eee4e0;
}

.works-showcase .wcard:nth-child(3),
.works-showcase .wcard:nth-child(6),
.works-showcase .wcard:nth-child(9) {
  --cover-a: #e5edef;
  --cover-b: #e8ecdf;
}

.works-showcase .wcard:nth-child(4),
.works-showcase .wcard:nth-child(7),
.works-showcase .wcard:nth-child(10) {
  --cover-a: #f0ece0;
  --cover-b: #e7ecea;
}

.works-showcase .wcard:hover {
  box-shadow: 0 38px 88px rgba(57, 70, 92, 0.16);
}

.works-showcase .wthumb,
.works-showcase .wcard:first-child .wthumb {
  border-color: rgba(101, 117, 162, 0.28);
}

.works-showcase .wthumb::before {
  border: 0;
  border-radius: 999px;
  box-shadow: 0 9px 22px rgba(73, 86, 126, 0.2);
}

.works-showcase .wthumb-screen img {
  box-shadow: 0 26px 52px rgba(57, 70, 92, 0.16);
}

.works-showcase .wcard:hover .wthumb-screen img {
  box-shadow: 0 32px 64px rgba(57, 70, 92, 0.19);
}

.works-showcase .cta-band {
  background: linear-gradient(120deg, #e8eff1 0 63%, #eef0df 63%);
  border-block: 1px solid rgba(101, 117, 162, 0.3);
}

.works-showcase .btn-ink {
  border-radius: 999px;
  box-shadow: 0 14px 30px rgba(74, 87, 127, 0.2);
}

.works-showcase .site-footer {
  background: #e9eff1;
  border-top-color: rgba(101, 117, 162, 0.28);
}

@media (max-width: 820px) {
  .works-showcase .page-hero.salt-field {
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.99) 0 61%, rgba(238, 244, 245, 0.9) 82%, rgba(240, 241, 226, 0.74) 100%),
      url("/assets/capabilities-blueprint-studio-v1.webp");
    background-position: center, 68% center;
    background-size: cover, cover;
    background-attachment: scroll;
  }

  .works-showcase .wcard,
  .works-showcase .wcard:hover {
    box-shadow: 0 22px 54px rgba(57, 70, 92, 0.11);
  }
}