@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
    --ink: #111;
    --muted: #666;
    --paper: #f5f3ee;
    --line: #d9d6cf;
    --dark: #151515
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Manrope, system-ui, sans-serif;
    line-height: 1.6
}

a {
    color: inherit;
    text-decoration: none
}

.container {
    max-width: 1240px
}

.serif {
    font-family: "Instrument Sans", system-ui, sans-serif;
    font-weight: 400
}

.navbar {
    background: rgba(245, 243, 238, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -.03em
}

.nav-link {
    font-size: .85rem;
    color: #555 !important
}

.nav-link:hover,
.nav-link.active {
    color: #111 !important
}

.btn-main {
    background: #111;
    color: #fff;
    border-radius: 0;
    padding: .85rem 1.25rem;
    font-size: .82rem;
    font-weight: 600
}

.btn-main:hover {
    background: #333;
    color: #fff
}

.btn-ghost {
    border: 1px solid #111;
    border-radius: 0;
    padding: .8rem 1.15rem;
    font-size: .82rem;
    font-weight: 600
}

.hero {
    padding: 150px 0 90px
}

.eyebrow,
.page-no {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #777;
    font-weight: 600
}

.hero h1,
.page-hero h1,
.project-hero h1 {
    font-size: clamp(2rem, 9vw, 5rem);
    line-height: .98;
    letter-spacing: -.055em;
    margin: 20px 0 35px
}

.hero-copy {
    font-size: 1.05rem;
    max-width: 680px;
    color: #555
}

.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px
}

.marquee {
    border-block: 1px solid var(--line);
    padding: 20px 0;
    color: #666;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .14em
}

.metrics {
    padding: 75px 0
}

.metric {
    border-left: 1px solid var(--line);
    padding-left: 24px
}

.metric-num {
    font-size: 3rem;
    letter-spacing: -.06em
}

.metric-label {
    color: #777;
    font-size: .78rem;
    max-width: 210px
}

.section {
    padding: 110px 0
}

.section-dark {
    background: #151515;
    color: #fff
}

.section-title {
    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: .9;
    letter-spacing: -.045em
}

.work-card {
    border-top: 1px solid var(--line);
    padding: 28px 0 55px
}

.work-media,
.project-image {
    aspect-ratio: 16/9;
    background: #dedbd3;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 28px;
    display: grid;
    place-items: center
}

.placeholder {
    font-family: "Instrument Serif";
    font-size: clamp(2rem, 5vw, 4rem);
    color: #777;
    text-align: center;
    padding: 20px
}

.work-title {
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1;
    letter-spacing: -.04em
}

.work-desc {
    color: #666;
    max-width: 700px
}

.tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 18px
}

.tag {
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 5px 10px;
    font-size: .68rem;
    color: #666
}

.about-quote {
    font-family: "Instrument Serif";
    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: .95;
    letter-spacing: -.04em
}

.process-row {
    border-top: 1px solid #333;
    padding: 28px 0
}

.process-no {
    font-size: .75rem;
    color: #888
}

.process-title {
    font-family: "Instrument Serif";
    font-size: 2.4rem
}

.process-copy {
    color: #aaa
}

.faq-item {
    border-top: 1px solid var(--line);
    padding: 24px 0
}

.faq-item p {
    color: #666;
    max-width: 800px
}

.page-hero,
.project-hero {
    padding: 135px 0 80px
}

.project-meta {
    border-block: 1px solid var(--line);
    padding: 22px 0;
    margin: 45px 0
}

.project-body {
    max-width: 850px
}

.project-body h2 {
    font-family: "Instrument Serif";
    font-size: 3.4rem;
    line-height: 1;
    margin-top: 70px
}

.project-body p {
    font-size: 1.08rem;
    color: #555
}

.contact-card {
    border: 1px solid var(--line);
    padding: 35px;
    background: #eeeae2
}

.form-control,
.form-select {
    border: 0;
    border-bottom: 1px solid #bbb;
    border-radius: 0;
    background: transparent;
    padding: 14px 0
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
    background: transparent;
    border-color: #111
}

footer {
    border-top: 1px solid var(--line);
    padding: 60px 0
}

.footer-name {
    font-family: "Instrument Serif";
    font-size: 4rem
}

@media(max-width:767px) {
    .hero {
        padding-top: 120px
    }

    .metric {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 20px 0
    }

    .section {
        padding: 80px 0
    }

    .page-hero,
    .project-hero {
        padding-top: 115px
    }
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 32px
}

.work-grid .work-card {
    padding-bottom: 35px
}

.work-grid .work-media {
    margin-bottom: 22px
}

.case-nav {
    position: sticky;
    top: 78px;
    z-index: 5;
    border-bottom: 1px solid var(--line);
    background: rgba(245, 243, 238, .94);
    backdrop-filter: blur(10px)
}

.case-nav a {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #666;
    padding: 15px 0
}

.case-nav a:hover {
    color: #111
}

.case-section {
    padding: 105px 0;
    border-bottom: 1px solid var(--line);
    counter-increment: case-section
}

.case-section h2 {
    font-family: "Instrument Serif";
    font-size: clamp(3.5rem, 7vw, 7.5rem);
    line-height: .86;
    letter-spacing: -.055em;
    margin: 0 0 48px;
    max-width: 980px
}

.case-section h2::before {
    content: "CASE STUDY  /  " counter(case-section, decimal-leading-zero);
    display: block;
    font-family: Manrope, system-ui, sans-serif;
    font-size: .7rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #777;
    font-weight: 700;
    margin-bottom: 24px
}

.case-section h2::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--line);
    margin-top: 42px
}

.case-section .case-lead {
    max-width: 960px
}

.case-section h3 {
    font-family: Manrope, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -.025em
}

.case-section h3 {
    font-size: 1.15rem;
    margin-top: 32px
}

.case-lead {
    font-size: 1.2rem;
    color: #555;
    max-width: 820px
}

.case-stat {
    border-top: 1px solid var(--line);
    padding-top: 16px
}

.case-stat .num {
    font-size: 2.5rem;
    letter-spacing: -.05em
}

.case-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px
}

.case-table th,
.case-table td {
    border-top: 1px solid var(--line);
    padding: 15px 10px;
    text-align: left;
    vertical-align: top
}

.case-table th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em
}

.case-list {
    padding-left: 1.2rem;
    color: #555
}

.case-list li {
    margin: .45rem 0
}

.case-callout {
    background: #eae7df;
    padding: 30px;
    margin-top: 28px
}

.case-image {
    min-height: 360px;
    background: #dfdcd4;
    display: grid;
    place-items: center;
    margin: 30px 0
}

@media(max-width:767px) {
    .work-grid {
        grid-template-columns: 1fr
    }

    .case-nav {
        overflow: auto
    }

    .case-nav .container {
        min-width: max-content
    }

    .case-section {
        padding: 65px 0
    }
}

/* Editorial case-study headings + typography */
.serif,
.hero h1,
.page-hero h1,
.project-hero h1,
.section-title,
.about-quote,
.process-title,
.footer-name,
.placeholder {
    font-family: "Instrument Sans", system-ui, sans-serif
}

.btn,
.btn-main,
.btn-ghost,
.tag {
    border-radius: 0 !important
}

body,
input,
textarea,
select,
button,
.nav-link,
.case-section h3,
.case-table,
.case-list {
    font-family: Manrope, system-ui, sans-serif
}


/* Dark interactive UX hero */
.hero-page {
    background: var(--paper)
}

.hero-page .navbar {
    background: rgba(10, 10, 10, .72);
    border-bottom-color: rgba(255, 255, 255, .12)
}

.hero-page .navbar-brand,
.hero-page .nav-link {
    color: #f5f3ee !important
}

.hero-page .nav-link:hover,
.hero-page .nav-link.active {
    color: #fff !important
}

.hero-page .navbar-toggler-icon {
    filter: invert(1)
}

.hero-dark {
    position: relative;
    isolation: isolate;
    min-height: 760px;
    padding: 180px 0 120px;
    background: #0b0b0b;
    color: #f5f3ee;
    overflow: hidden
}

.hero-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(105deg, rgba(255, 255, 255, .025), transparent 48%), radial-gradient(circle at 82% 42%, rgba(255, 255, 255, .08), transparent 26%)
}

.hero-dark::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .16;
    background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 82%, transparent)
}

.hero-dark .eyebrow {
    color: #aaa
}

.hero-dark .hero-copy {
    color: #b7b7b7
}

.hero-dark .btn-main {
    background: #f5f3ee;
    color: #0b0b0b
}

.hero-dark .btn-main:hover {
    background: #fff
}

.hero-dark .btn-ghost {
    border-color: rgba(255, 255, 255, .45);
    color: #f5f3ee
}

.hero-dark .btn-ghost:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .08)
}

.hero-dark h1 {
    position: relative;
    z-index: 2;
    max-width: 1050px
}

.hero-dark .hero-copy,
.hero-dark .hero-actions {
    position: relative;
    z-index: 2
}

.hero-ux-canvas {
    position: absolute;
    z-index: -1;
    width: 650px;
    height: 520px;
    right: 2.5%;
    top: 51%;
    transform: translateY(-45%);
    pointer-events: none;
    transition: transform .18s ease-out
}

.ux-grid {
    position: absolute;
    inset: 5% 2%;
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    opacity: .8
}

.ux-flow-label {
    position: absolute;
    top: 0;
    right: 2%;
    font-size: .58rem;
    letter-spacing: .17em;
    color: #707070;
    text-transform: uppercase
}

.ux-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .5), rgba(255, 255, 255, .08));
    transform-origin: left center;
    opacity: .7;
    overflow: hidden
}

.ux-line::after {
    content: "";
    position: absolute;
    left: -25%;
    top: 0;
    width: 25%;
    height: 1px;
    background: #fff;
    animation: uxLineTravel 3.8s linear infinite
}

.ux-line-a {
    width: 155px;
    left: 19%;
    top: 33%;
    transform: rotate(18deg)
}

.ux-line-b {
    width: 155px;
    left: 48%;
    top: 42%;
    transform: rotate(-17deg)
}

.ux-line-c {
    width: 180px;
    left: 53%;
    top: 66%;
    transform: rotate(18deg)
}

.ux-node {
    position: absolute;
    width: 138px;
    height: 92px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(12, 12, 12, .72);
    backdrop-filter: blur(7px);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .3s ease, border-color .3s ease, background .3s ease
}

.ux-node::after {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(255, 255, 255, .05);
    pointer-events: none
}

.ux-node-no {
    font-size: .56rem;
    letter-spacing: .12em;
    color: #777
}

.ux-node strong {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: -.02em
}

.ux-node small {
    font-size: .58rem;
    color: #777
}

.ux-node-research {
    left: 4%;
    top: 22%
}

.ux-node-flow {
    left: 31%;
    top: 35%
}

.ux-node-prototype {
    right: 8%;
    top: 27%
}

.ux-node-test {
    right: 18%;
    top: 64%
}

.ux-node:hover {
    border-color: rgba(255, 255, 255, .72);
    background: rgba(28, 28, 28, .9)
}

.ux-screen {
    position: absolute;
    left: 29%;
    top: 49%;
    width: 245px;
    height: 184px;
    border: 1px solid rgba(255, 255, 255, .48);
    background: #111;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    transform: translate(-50%, -50%) rotate(-3deg);
    transition: transform .25s ease
}

.ux-screen-top {
    height: 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 4px
}

.ux-screen-top span {
    width: 4px;
    height: 4px;
    border: 1px solid #777
}

.ux-screen-top em {
    font-style: normal;
    font-size: 5px;
    letter-spacing: .08em;
    color: #666;
    margin-left: auto;
    text-transform: uppercase
}

.ux-screen-body {
    display: flex;
    height: calc(100% - 26px)
}

.ux-screen-sidebar {
    width: 28px;
    border-right: 1px solid rgba(255, 255, 255, .1);
    padding: 10px 7px
}

.ux-screen-sidebar i {
    display: block;
    height: 3px;
    background: #333;
    margin-bottom: 8px
}

.ux-screen-sidebar i:first-child {
    background: #aaa
}

.ux-screen-main {
    padding: 18px 17px;
    flex: 1
}

.ux-wire-title {
    width: 58%;
    height: 8px;
    background: #d7d7d7;
    margin-bottom: 9px
}

.ux-wire-copy {
    width: 84%;
    height: 4px;
    background: #4c4c4c;
    margin-bottom: 5px
}

.ux-wire-copy.short {
    width: 58%
}

.ux-wire-row {
    display: flex;
    gap: 6px;
    margin: 18px 0
}

.ux-wire-row b {
    display: block;
    height: 35px;
    flex: 1;
    border: 1px solid #333;
    background: #171717
}

.ux-wire-button {
    display: inline-block;
    border: 1px solid #aaa;
    padding: 5px 8px;
    font-size: 5px;
    letter-spacing: .12em;
    color: #ddd
}

.ux-cursor {
    position: absolute;
    right: 8%;
    bottom: 10%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: .54rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition: transform .2s ease
}

.ux-cursor span {
    width: 13px;
    height: 13px;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    transform: rotate(-45deg);
    display: block
}

.ux-cursor b {
    font-weight: 600
}

.hero-corner {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #777
}

.hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #777;
    z-index: 2
}

.hero-scroll span {
    display: block;
    width: 1px;
    height: 42px;
    background: #777;
    margin: 10px auto 0;
    animation: scrollLine 2s ease-in-out infinite
}

@keyframes uxLineTravel {
    0% {
        transform: translateX(-120%);
        opacity: 0
    }

    15% {
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        transform: translateX(500%);
        opacity: 0
    }
}

@keyframes scrollLine {

    0%,
    100% {
        transform: scaleY(.4);
        transform-origin: top
    }

    50% {
        transform: scaleY(1);
        transform-origin: top
    }
}

@media(max-width:1100px) {
    .hero-ux-canvas {
        right: -115px;
        opacity: .65
    }

    .hero-dark {
        min-height: 720px
    }
}

@media(max-width:767px) {
    .hero-dark {
        padding: 145px 0 110px;
        min-height: 790px
    }

    .hero-dark h1 {
        font-size: clamp(3.5rem, 17vw, 6rem)
    }

    .hero-ux-canvas {
        width: 440px;
        height: 390px;
        right: -125px;
        top: 60%;
        opacity: .32
    }

    .ux-screen {
        left: 30%;
        width: 210px;
        height: 158px
    }

    .ux-node {
        width: 112px;
        height: 78px
    }

    .ux-node-research {
        left: 2%
    }

    .ux-node-flow {
        left: 26%
    }

    .ux-node-prototype {
        right: 1%
    }

    .ux-node-test {
        right: 8%;
        top: 68%
    }

    .hero-scroll {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .ux-line::after,
    .hero-scroll span {
        animation: none !important
    }

    .hero-ux-canvas,
    .ux-screen,
    .ux-cursor {
        transition: none !important
    }
}


/* =========================================================
   SHARED SITE FINISH
   One global foundation used by every page.
   ========================================================= */

img {
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select {
  font: inherit;
}

::selection {
  background: #111;
  color: #f5f3ee;
}

main {
  overflow: clip;
}

.section + .section {
  border-top: 1px solid var(--line);
}

@media (max-width: 767px) {
  .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .navbar .container {
    padding-left: 18px;
    padding-right: 18px;
  }
}




/* =========================================================
   Portfolio — premium editorial color stack
   ========================================================= */
.stack-portfolio {
  display:block;
  position:relative;
  padding-bottom:18vh;
  perspective:1800px;
}

.stack-portfolio .work-card {
  --card-bg:#EFE7D8;
  --card-ink:#161513;
  --card-muted:rgba(22,21,19,.62);
  --card-line:rgba(22,21,19,.16);
  position:sticky;
  top:92px;
  z-index:var(--card-z,1);
  min-height:clamp(560px,67vh,720px);
  margin:0 0 17vh;
  padding:0;
  border:0;
  background:transparent;
  transform:translate3d(0,var(--card-y,0px),0) rotateZ(var(--card-rotate,0deg)) scale(var(--card-scale,1));
  transform-origin:50% 0;
  will-change:transform;
  isolation:isolate;
}

.stack-card-inner {
  position:relative;
  min-height:clamp(560px,67vh,720px);
  overflow:hidden;
  border-radius:26px;
  background:var(--card-bg);
  color:var(--card-ink);
  padding:clamp(30px,4vw,58px);
  box-shadow:0 26px 70px rgba(25,22,18,var(--card-shadow,.08));
  border:1px solid rgba(255,255,255,.48);
}

/* Exact reference colors supplied by the user, alternated through the stack. */
.stack-card-01 .stack-card-inner,
.stack-card-03 .stack-card-inner,
.stack-card-05 .stack-card-inner { --card-bg:#EFE7D8; }
.stack-card-02 .stack-card-inner,
.stack-card-04 .stack-card-inner,
.stack-card-06 .stack-card-inner { --card-bg:#F6E3E7; }

.stack-card-top {
  position:relative;
  z-index:4;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.68rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:700;
}

.stack-card-top span:last-child { opacity:.58; }

.stack-portfolio .work-info {
  position:relative;
  z-index:4;
  width:min(61%,760px);
  padding-top:clamp(90px,11vh,125px);
}

.stack-portfolio .work-eyebrow {
  color:var(--card-muted);
  font-size:.68rem;
  letter-spacing:.14em;
  font-weight:700;
  margin-bottom:20px;
}

.stack-portfolio .work-title {
  max-width:760px;
  margin:0;
  font-size:clamp(3.5rem,6.3vw,7.2rem);
  line-height:.84;
  letter-spacing:-.058em;
  color:var(--card-ink);
}

.stack-portfolio .work-desc {
  max-width:650px;
  margin:28px 0 0 !important;
  color:var(--card-muted);
  font-size:.98rem;
  line-height:1.65;
}

.stack-portfolio .tags {
  margin-top:22px;
  gap:7px;
}

.stack-portfolio .tag {
  border:1px solid var(--card-line);
  color:var(--card-ink);
  background:rgba(255,255,255,.22);
  border-radius:999px;
  padding:7px 11px;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.01em;
}

.stack-portfolio .work-actions {
  position:relative;
  z-index:6;
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:30px;
}

.stack-portfolio .work-actions .btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:.78rem 1.08rem;
  font-size:.73rem;
  letter-spacing:.01em;
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease;
}

.stack-portfolio .work-actions .btn:hover { transform:translateY(-3px); }
.stack-portfolio .work-actions .btn-main { background:#161513; color:#fff; }
.stack-portfolio .work-actions .btn-main:hover { background:#2c2a27; }
.stack-portfolio .work-actions .btn-ghost { border:1px solid rgba(22,21,19,.35); color:#161513; background:rgba(255,255,255,.12); }
.stack-portfolio .work-actions .btn-ghost:hover { background:rgba(255,255,255,.35); }

.stack-card-visual {
  position:absolute;
  z-index:2;
  right:clamp(28px,4vw,58px);
  top:50%;
  width:min(39%,500px);
  height:62%;
  transform:translate3d(var(--visual-x,0),-50%,0) rotate(5deg) scale(var(--visual-scale,1));
  border-radius:24px;
  background:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 32px 70px rgba(30,25,25,.12);
  overflow:hidden;
  transition:transform .9s cubic-bezier(.16,1,.3,1);
}

.stack-card-visual::before,
.stack-card-visual::after {
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
}
.stack-card-visual::before { width:230px;height:230px;right:-90px;top:-80px;background:rgba(255,255,255,.5); }
.stack-card-visual::after { width:190px;height:190px;left:-90px;bottom:-80px;background:rgba(0,0,0,.05); }

.stack-card-02 .stack-card-visual { transform:translate3d(var(--visual-x,0),-50%,0) rotate(-5deg); }
.stack-card-04 .stack-card-visual { transform:translate3d(var(--visual-x,0),-50%,0) rotate(4deg); }
.stack-card-06 .stack-card-visual { transform:translate3d(var(--visual-x,0),-50%,0) rotate(-4deg); }

.visual-window {
  position:absolute;
  left:9%; right:9%; top:10%; bottom:10%;
  background:rgba(255,255,255,.72);
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(22,21,19,.09);
  box-shadow:0 18px 40px rgba(20,18,15,.08);
}

.vw-top {
  height:46px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 15px;
  border-bottom:1px solid rgba(22,21,19,.08);
}
.vw-top i { width:7px;height:7px;border-radius:50%;background:rgba(22,21,19,.24); }
.vw-top em { margin-left:auto;font-style:normal;font-size:8px;letter-spacing:.1em;opacity:.42; }
.vw-body { padding:26px; }
.vw-body b { display:block;height:13px;width:64%;border-radius:20px;background:rgba(22,21,19,.12);margin-bottom:13px; }
.vw-body b:nth-child(2){width:42%;height:8px;opacity:.65;}
.vw-body b:nth-child(3){width:28%;height:8px;opacity:.45;}
.vw-body span { display:block;height:48%;margin-top:30px;border-radius:14px;background:rgba(22,21,19,.06); }

.visual-label {
  position:absolute;
  right:20px;
  bottom:18px;
  z-index:3;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  opacity:.58;
}

.stack-card-visual:hover { --visual-scale:1.025; }

@media (min-width:768px) {
  .stack-portfolio .work-card:nth-child(2n) .stack-card-inner { transform:translateX(0); }
  .stack-card-01 .stack-card-inner { --card-shadow:.10; }
  .stack-card-02 .stack-card-inner { --card-shadow:.10; }
  .stack-card-03 .stack-card-inner { --card-shadow:.11; }
  .stack-card-04 .stack-card-inner { --card-shadow:.10; }
  .stack-card-05 .stack-card-inner { --card-shadow:.11; }
  .stack-card-06 .stack-card-inner { --card-shadow:.12; }
}

@media (max-width:767px) {
  .stack-portfolio { padding-bottom:8vh; }
  .stack-portfolio .work-card { top:74px; min-height:650px; margin-bottom:13vh; }
  .stack-card-inner { min-height:650px; border-radius:20px; padding:24px; }
  .stack-portfolio .work-info { width:100%; padding-top:76px; }
  .stack-portfolio .work-title { font-size:clamp(3rem,13vw,4.8rem); }
  .stack-portfolio .work-desc { font-size:.9rem; max-width:92%; }
  .stack-card-visual { opacity:.26; width:72%; height:42%; right:-12%; top:auto; bottom:8%; transform:rotate(5deg) !important; }
  .stack-card-02 .stack-card-visual,.stack-card-04 .stack-card-visual,.stack-card-06 .stack-card-visual { transform:rotate(-5deg) !important; }
  .stack-portfolio .work-actions { margin-top:24px; }
  .stack-portfolio .work-actions .btn { padding:.72rem .9rem; }
}

@media (prefers-reduced-motion:reduce) {
  .stack-portfolio .work-card { position:relative; top:auto; transform:none !important; margin-bottom:50px; }
  .stack-card-visual,.stack-portfolio .work-actions .btn { transition:none !important; }
}


/* =========================================================
   Real project thumbnails — refined stack presentation
   ========================================================= */

.stack-portfolio .stack-card-inner {
  display:block;
  min-height:clamp(620px, 72vh, 780px);
  padding:clamp(30px,3.5vw,54px);
}

.stack-portfolio .work-info {
  width:min(53%, 700px);
  padding-top:clamp(86px, 9vh, 118px);
}

.stack-portfolio .work-title {
  /* font-size:clamp(3.15rem, 4.65vw, 5.6rem); */
  font-size: 50px;
  line-height: 1.1em;
  letter-spacing:-.055em;
}

.stack-portfolio .work-desc {
  max-width:590px;
  font-size:.95rem;
  line-height:1.62;
  margin-top:25px !important;
}

.stack-portfolio .tags {
  max-width:610px;
}

.stack-portfolio .work-actions {
  margin-top:27px;
}

.stack-card-visual {
  right:clamp(26px,3.6vw,54px);
  top:50%;
  width:min(43%, 590px);
  height:68%;
  padding:0;
  border-radius:26px;
  overflow:hidden;
  background:#f3f1ed;
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 32px 80px rgba(20,18,15,.16);
  transform:translate3d(var(--visual-x,0),-50%,0) rotate(var(--visual-rotate,5deg)) scale(var(--visual-scale,1));
  transition:transform .75s cubic-bezier(.16,1,.3,1),box-shadow .75s cubic-bezier(.16,1,.3,1);
}

.stack-card-02 .stack-card-visual,
.stack-card-04 .stack-card-visual,
.stack-card-06 .stack-card-visual {
  --visual-rotate:-5deg;
}

.stack-card-visual::before,
.stack-card-visual::after {
  display:none;
}

.stack-card-visual img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.015);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1), filter .75s ease;
}

.stack-card-visual::after {
  content:"";
  display:block;
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.03) 45%, rgba(10,10,10,.22) 100%);
  opacity:.55;
  pointer-events:none;
}

.visual-overlay {
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.92;
}

.visual-overlay b {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#161513;
  font-size:1rem;
  letter-spacing:0;
}

.stack-card-visual:hover {
  --visual-scale:1.018;
  box-shadow:0 38px 95px rgba(20,18,15,.21);
}

.stack-card-visual:hover img {
  transform:scale(1.045);
}

.stack-card-01 .stack-card-visual { --visual-rotate:4deg; }
.stack-card-03 .stack-card-visual { --visual-rotate:3.5deg; }
.stack-card-05 .stack-card-visual { --visual-rotate:4.5deg; }

.stack-card-02 .stack-card-visual { --visual-rotate:-4deg; }
.stack-card-04 .stack-card-visual { --visual-rotate:-3.5deg; }
.stack-card-06 .stack-card-visual { --visual-rotate:-4.5deg; }

@media (max-width: 991px) {
  .stack-portfolio .work-info { width:55%; }
  .stack-card-visual { width:40%; height:62%; }
}

@media (max-width:767px) {
  .stack-portfolio .stack-card-inner {
    min-height:690px;
    padding:24px;
  }

  .stack-portfolio .work-info {
    width:100%;
    padding-top:68px;
  }

  .stack-portfolio .work-title {
    font-size:clamp(2.75rem,12vw,4.5rem);
    max-width:95%;
  }

  .stack-portfolio .work-desc {
    max-width:90%;
    font-size:.88rem;
  }

  .stack-card-visual {
    width:76%;
    height:39%;
    right:-8%;
    top:auto;
    bottom:7%;
    opacity:1;
    transform:rotate(var(--visual-rotate,4deg)) !important;
  }

  .stack-card-visual img {
    transform:scale(1.01);
  }

  .visual-overlay {
    left:13px;
    right:13px;
    bottom:12px;
  }
}


/* Case-study thumbnail canvas — soft cool white */
.stack-portfolio .stack-card-visual {
    background: #F5F7F8 !important;
    border-color: rgba(22, 21, 19, 0.08);
    box-shadow: 0 28px 72px rgba(20, 18, 15, 0.12);
}

.stack-portfolio .stack-card-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: clamp(10px, 1.25vw, 18px);
    background: #F5F7F8;
    transform: scale(1);
}

/* Keep the project artwork clean and free of the previous dark wash. */
.stack-portfolio .stack-card-visual::after {
    background: none !important;
    opacity: 0 !important;
}

.stack-portfolio .stack-card-visual:hover img {
    transform: scale(1.025);
}


/* NOVA stack-card visual — follows the unified neutral case-study system. */
.stack-card-08 .stack-card-visual.visual-nova{background:#0b0d12;}
.stack-card-08 .stack-card-visual.visual-nova img{width:100%;height:100%;object-fit:cover;object-position:center;}
.stack-card-08 .stack-card-visual.visual-nova:after{background:linear-gradient(135deg,rgba(11,13,18,.02),rgba(11,13,18,.22));}