/* Design tokens: palette, typography, and reusable values. */
:root {
    --ink: #111332;
    --paper: #fff9fd;
    --lime: #fddd32;
    --purple: #552ec9;
    --orange: #f61b9a;
    --blue: #207cfc;
    --pink: #f9b9e0;
    --muted: #777486;
    --line: rgba(25,23,45,.18);
    --display: 'Space Grotesk',sans-serif;
    --body: 'Manrope',sans-serif
}
* {
    box-sizing: border-box
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    overflow-x: hidden
}
a {
    color: inherit;
    text-decoration: none
}
img,video {
    display: block;
    max-width: 100%
}
button {
    font: inherit
}
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    opacity: .045;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")
}
.container {
    width: min(1240px,calc(100% - 72px));
    margin-inline: auto
}
/* Header and primary navigation. */
.nav-wrap {
    height: 84px;
    padding: 0 max(36px,calc((100vw - 1240px)/2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255,249,253,.96);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .3s,border .3s
}
.nav-wrap.scrolled {
    border-color: var(--line);
    box-shadow: 0 8px 32px #19172d0b
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 23px var(--display);
    letter-spacing: -1.3px
}
.brand img {
    width: 38px;
    height: 38px;
    object-fit: contain
}
.brand-dot {
    color: #f61b9a
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 12px;
    font-weight: 800
}
.nav-links>a:not(.nav-cta) {
    position: relative;
    padding: 10px 0
}
.nav-links>a:not(.nav-cta):after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--ink);
    transition: width .25s
}
.nav-links>a:hover:after {
    width: 100%
}
.nav-cta {
    background: var(--ink);
    color: white;
    padding: 13px 18px;
    border-radius: 4px
}
.nav-cta span {
    margin-left: 15px;
    color: var(--lime)
}
.menu-toggle {
    display: none;
    background: none;
    border: 0
}
/* Home page hero and opening sections. */
.hero {
    padding-top: 36px
}
.hero-meta,.hero-bottom,.section-head,.service-kicker,.footer-bottom,.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between
}
.eyebrow {
    font: 500 10px 'DM Mono',monospace;
    letter-spacing: 1.6px;
    text-transform: uppercase
}
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #207cfc;
    border-radius: 50%;
    margin-right: 9px;
    box-shadow: 0 0 0 4px #207cfc20
}
.hero-index,.hero-bottom {
    font: 10px 'DM Mono',monospace;
    letter-spacing: 1px
}
.hero-title-wrap {
    display: grid;
    grid-template-columns: 1fr 210px;
    align-items: end;
    gap: 40px;
    padding: 52px 0 42px
}
.hero-title {
    font: 600 clamp(68px,10vw,142px)/.86 var(--display);
    letter-spacing: -.095em;
    margin: 0;
    max-width: 980px
}
.hero-title .outlined {
    -webkit-text-stroke: 2px var(--ink);
    color: transparent;
    font-style: italic;
    letter-spacing: -.09em
}
.hero-star {
    color: var(--orange);
    font-size: .48em;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 12px;
    animation: spin 14s linear infinite
}
.hero-side {
    padding-bottom: 5px
}
.hero-side p {
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 22px;
    color: #5e5b6e
}
.circle-link {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--lime);
    font-size: 24px;
    transition: transform .3s
}
.circle-link:hover {
    transform: rotate(-45deg) scale(1.08)
}
.hero-art {
    height: 340px;
    position: relative;
    overflow: hidden;
    background: #d9c9ff;
    border-radius: 5px;
    isolation: isolate
}
.hero-art:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,transparent 25%,#f61b9a30 25.2%,transparent 55%),radial-gradient(ellipse at 65% 40%,#f7f0e7 0 13%,transparent 13.3%),linear-gradient(110deg,#d9c9ff,#8e75f5 58%,#f9b9e0)
}
.art-orbit {
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px solid #19172d65;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-30deg)
}
.orbit-two {
    width: 580px;
    height: 280px;
    transform: translate(-50%,-50%) rotate(32deg);
    border-color: #19172d45
}
.art-sun {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--lime);
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 0 16px #fddd3230;
    animation: breathe 5s ease-in-out infinite
}
.art-type {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-7deg);
    font: 700 clamp(30px,5vw,64px)/.78 var(--display);
    letter-spacing: -.08em;
    text-align: center;
    white-space: nowrap
}
.art-type span {
    color: var(--orange);
    font-size: .5em;
    vertical-align: top
}
.art-note {
    position: absolute;
    font: 10px 'DM Mono';
    letter-spacing: 1.2px
}
.note-a {
    left: 7%;
    top: 17%;
    transform: rotate(-90deg);
    transform-origin: left
}
.note-b {
    right: 8%;
    bottom: 18%;
    transform: rotate(90deg)
}
.art-sticker {
    position: absolute;
    right: 15%;
    top: 13%;
    background: var(--orange);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: grid;
    place-content: center;
    text-align: center;
    font: 700 12px/.95 var(--display);
    transform: rotate(12deg);
    animation: float 4s ease-in-out infinite
}
.art-caption {
    position: absolute;
    left: 25px;
    bottom: 22px;
    font: 10px 'DM Mono';
    letter-spacing: 1.4px
}
.hero-bottom {
    padding: 17px 0 25px;
    color: #696679
}
.marquee {
    background: var(--lime);
    overflow: hidden;
    transform: rotate(-1deg) scale(1.02);
    margin: 30px 0 0;
    padding: 15px 0
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 26s linear infinite
}
.marquee-track span {
    font: 700 18px var(--display);
    letter-spacing: .5px;
    white-space: nowrap
}
.intro-band {
    background: var(--ink);
    color: var(--paper);
    padding-bottom: 100px
}
.intro-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    padding-top: 100px
}
.intro-grid>.eyebrow {
    color: var(--lime)
}
.intro-copy h2,.section-head h2 {
    font: 600 clamp(42px,6vw,74px)/.98 var(--display);
    letter-spacing: -.07em;
    margin: 0 0 26px
}
.intro-copy h2 em,.section-head h2 em,.page-hero h1 em,.service-copy h2 em,.service-cta h2 em,.contact-hero h1 em,.about-content h2 em {
    color: var(--purple);
    font-style: normal
}
.intro-copy p {
    font-size: 14px;
    line-height: 1.9;
    color: #c6c3d3;
    max-width: 600px
}
.text-link {
    display: inline-flex;
    gap: 28px;
    align-items: center;
    border-bottom: 1px solid currentColor;
    padding: 12px 0;
    font-size: 12px;
    font-weight: 800;
    margin-top: 16px
}
.text-link span {
    font-size: 18px;
    transition: transform .25s
}
.text-link:hover span {
    transform: translate(4px,-4px)
}
.discipline-section {
    padding-top: 100px;
    padding-bottom: 115px
}
.section-head {
    align-items: end;
    margin-bottom: 42px
}
.section-head .eyebrow {
    margin-bottom: 20px
}
.section-head h2 {
    margin: 0
}
.discipline-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px
}
.discipline-card {
    position: relative;
    min-height: 310px;
    padding: 23px;
    overflow: hidden;
    border-radius: 4px;
    transition: transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s
}
.discipline-card:hover {
    transform: translateY(-7px) rotate(-.4deg);
    box-shadow: 0 18px 38px #19172d12
}
.card-purple {
    background: #d9c9ff
}
.card-orange {
    background: #ffb39f
}
.card-lime {
    background: var(--lime)
}
.card-cream {
    background: #e8e0d2
}
.card-blue {
    background: var(--blue)
}
.card-pink {
    background: var(--pink)
}
.card-no {
    font: 10px 'DM Mono';
    letter-spacing: 1px
}
.mini-symbol {
    position: absolute;
    right: 24px;
    top: 42px;
    width: 90px;
    height: 90px;
    border: 1px solid #19172d70;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font: 600 28px var(--display);
    transition: transform .5s
}
.discipline-card:hover .mini-symbol {
    transform: rotate(12deg) scale(1.08)
}
.symbol-video {
    border-radius: 24px;
    transform: rotate(-10deg)
}
.symbol-game {
    font-size: 54px
}
.symbol-dkv {
    font-size: 38px;
    letter-spacing: -4px
}
.symbol-anim {
    font-size: 45px
}
.discipline-card h3 {
    font: 600 32px/.96 var(--display);
    letter-spacing: -1.5px;
    margin: 83px 0 12px
}
.discipline-card p {
    font-size: 12px;
    line-height: 1.7;
    max-width: 260px;
    margin: 0;
    color: #454253
}
.card-arrow {
    position: absolute;
    right: 22px;
    bottom: 20px;
    font-size: 22px;
    transition: transform .2s
}
.discipline-card:hover .card-arrow {
    transform: translate(3px,-3px)
}
.manifesto {
    background: var(--orange);
    overflow: hidden
}
.manifesto-inner {
    position: relative;
    padding-top: 90px;
    padding-bottom: 90px
}
.manifesto h2 {
    font: 600 clamp(50px,8vw,100px)/.88 var(--display);
    letter-spacing: -.085em;
    margin: 32px 0
}
.manifesto h2 span {
    color: var(--paper)
}
.manifesto-inner>p:not(.eyebrow) {
    font-size: 13px;
    max-width: 380px;
    line-height: 1.8
}
.button {
    display: inline-flex;
    align-items: center;
    gap: 45px;
    padding: 17px 20px;
    font-size: 12px;
    font-weight: 800;
    margin-top: 22px;
    transition: transform .25s
}
.button:hover {
    transform: translateY(-3px)
}
.button-dark {
    background: var(--ink);
    color: white
}
.button span {
    color: var(--lime);
    font-size: 17px
}
.manifesto-doodle {
    position: absolute;
    right: 8%;
    top: 12%;
    font-size: 220px;
    color: #19172d15;
    animation: spin 35s linear infinite
}
/* Shared footer used across all pages. */
.footer {
    background: var(--ink);
    color: var(--paper);
    padding: 48px max(36px,calc((100vw - 1240px)/2)) 20px
}
.footer-top {
    padding-bottom: 50px;
    align-items: start
}
.footer-brand {
    font-size: 22px
}
.footer-brand img {
    background: white;
    border-radius: 50%;
    padding: 3px
}
.footer-top>p {
    font-size: 12px;
    line-height: 1.9;
    color: #c6c3d3;
    margin: 0
}
.back-top {
    font-size: 11px;
    border-bottom: 1px solid #c6c3d3;
    padding-bottom: 7px
}
.footer-bottom {
    border-top: 1px solid #ffffff2b;
    padding-top: 20px;
    gap: 20px;
    font: 10px 'DM Mono';
    color: #b5b1c5
}
.socials {
    display: flex;
    gap: 18px;
    flex-wrap: wrap
}
.socials a:hover {
    color: var(--lime)
}
.page-hero {
    padding: 80px 0 35px
}
.page-hero h1,.contact-hero h1 {
    font: 600 clamp(64px,10vw,126px)/.88 var(--display);
    letter-spacing: -.09em;
    margin: 38px 0 34px
}
.page-hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 40px;
    padding-bottom: 38px;
    border-bottom: 1px solid var(--line)
}
.page-hero-bottom p {
    font-size: 14px;
    line-height: 1.85;
    max-width: 530px;
    margin: 0;
    color: #656174
}
.page-hero-bottom>span {
    font: 10px 'DM Mono';
    letter-spacing: 1px;
    white-space: nowrap
}
.service-index {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-bottom: 1px solid var(--line);
    padding: 24px 0 55px;
    gap: 0 24px
}
.service-index a {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding: 16px 0;
    font-size: 13px;
    font-weight: 800
}
.service-index a span {
    font: 10px 'DM Mono';
    color: var(--muted)
}
.service-index a b {
    margin-left: auto;
    font-size: 18px;
    transition: transform .2s
}
.service-index a:hover b {
    transform: translate(3px,3px)
}
.service-detail {
    padding: 76px 0 86px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: 95px
}
.service-kicker {
    font: 10px 'DM Mono';
    letter-spacing: 1.2px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 42px
}
.service-kicker span:last-child {
    color: var(--muted)
}
.service-layout {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 8%;
    align-items: start
}
.service-copy {
    position: sticky;
    top: 115px
}
.service-copy>.eyebrow {
    color: #777486
}
.service-copy h2 {
    font: 600 clamp(42px,5.2vw,68px)/.95 var(--display);
    letter-spacing: -.075em;
    margin: 18px 0 24px
}
.service-copy p:not(.eyebrow) {
    font-size: 13px;
    line-height: 1.9;
    color: #5f5c70
}
.service-copy p b {
    color: var(--ink)
}
.service-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 22px 0
}
.service-tags span {
    border: 1px solid var(--line);
    border-radius: 50px;
    padding: 8px 11px;
    font: 10px 'DM Mono'
}
.price-row {
    border-top: 1px solid var(--line);
    margin-top: 28px;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 11px
}
.price-row>span {
    color: var(--muted)
}
.price-row strong {
    font-size: 14px
}
.price-row small {
    display: block;
    font-size: 9px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 4px
}
.project-feature {
    background: #e9e2d7;
    padding: 12px;
    border-radius: 4px;
    min-width: 0
}
.web-preview {
    background: #f1e7d2;
    min-height: 360px;
    overflow: hidden;
    position: relative
}
.browser-bar {
    height: 33px;
    background: #e3d8c2;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px
}
.browser-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #aaa08f
}
.browser-bar span {
    font: 9px 'DM Mono';
    margin-left: 10px;
    color: #777
}
.coffee-preview {
    position: relative;
    min-height: 327px;
    padding: 35px 27px;
    background: linear-gradient(130deg,#f3e8cf,#c4d2a3)
}
.coffee-preview>span {
    font: 10px 'DM Mono';
    letter-spacing: 2px
}
.coffee-preview>b {
    display: block;
    font: 600 clamp(32px,4vw,55px)/.9 var(--display);
    letter-spacing: -.07em;
    margin-top: 30px;
    position: relative;
    z-index: 1
}
.coffee-preview small {
    display: inline-block;
    margin-top: 28px;
    font: 9px 'DM Mono';
    letter-spacing: 1px;
    border-bottom: 1px solid;
    padding-bottom: 6px
}
.coffee-circle {
    position: absolute;
    right: 8%;
    top: 18%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: #8e5b36;
    color: #f6e8c8;
    display: grid;
    place-items: center;
    font: 600 45px var(--display);
    box-shadow: inset 0 0 0 12px #8e5b3624;
    transform: rotate(13deg)
}
.project-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 19px 9px 10px
}
.project-meta .eyebrow {
    font-size: 9px;
    color: #777486
}
.project-meta h3 {
    font: 600 23px var(--display);
    letter-spacing: -.8px;
    margin: 7px 0
}
.project-meta p {
    font-size: 11px;
    line-height: 1.7;
    color: #656174;
    margin: 0
}
.project-open {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--lime);
    border-radius: 50%;
    font-size: 20px
}
.project-visit {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #19172d26;
    margin: 10px 9px 0;
    padding: 13px 0;
    font-size: 11px;
    font-weight: 800
}
.project-visit span {
    font-size: 17px
}
.video-frame {
    position: relative;
    background: #19172d;
    overflow: hidden
}
.video-frame video {
    width: 100%;
    max-height: 520px;
    aspect-ratio: 16/10;
    object-fit: contain
}
.media-label {
    display: block;
    background: var(--lime);
    font: 9px 'DM Mono';
    letter-spacing: 1.3px;
    padding: 10px 14px
}
.project-type {
    font: 10px 'DM Mono';
    background: var(--lime);
    padding: 9px 11px;
    white-space: nowrap
}
.project-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}
.gallery-card {
    position: relative;
    background: #d9c9ff;
    overflow: hidden;
    min-width: 0
}
.gallery-large {
    grid-column: span 2
}
.gallery-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .6s
}
.gallery-large img {
    height: 330px
}
.gallery-card:hover img,.dkv-tile:hover img,.tkj-image:hover img {
    transform: scale(1.04)
}
.gallery-card>div {
    padding: 12px 14px
}
.gallery-card span,.dkv-tile span,.tkj-image span {
    font: 9px 'DM Mono';
    letter-spacing: 1px
}
.gallery-card h3 {
    font: 600 18px var(--display);
    margin: 6px 0
}
.gallery-note {
    grid-column: span 2;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.7
}
.tkj-projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}
.tkj-image {
    background: #e8e0d2;
    overflow: hidden
}
.tkj-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .6s
}
.tkj-image span {
    display: block;
    padding: 12px
}
.tkj-packages {
    grid-column: span 2;
    border-top: 1px solid var(--line);
    margin-top: 5px
}
.tkj-packages div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    padding: 15px 0;
    font-size: 12px
}
.tkj-packages b {
    font: 10px 'DM Mono';
    background: var(--lime);
    padding: 5px 8px
}
.tkj-packages small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 12px
}
.dkv-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}
.dkv-tile {
    background: #d9c9ff;
    overflow: hidden
}
.dkv-tile img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .6s
}
.dkv-tile-tall {
    grid-row: span 2
}
.dkv-tile-tall img {
    height: 460px
}
.dkv-tile span {
    display: block;
    padding: 11px
}
.anim-project>img {
    width: 100%;
    max-height: 530px;
    object-fit: cover;
    object-position: top
}
.service-last {
    border-bottom: 0
}
.service-cta {
    background: var(--purple);
    padding: 65px 8%;
    margin: 10px 0 100px;
    position: relative;
    overflow: hidden
}
.service-cta:after {
    content: '✳';
    position: absolute;
    right: 8%;
    top: 5%;
    font-size: 150px;
    color: #19172d12;
    animation: spin 28s linear infinite
}
.service-cta h2 {
    font: 600 clamp(45px,7vw,80px)/.9 var(--display);
    letter-spacing: -.08em;
    margin: 25px 0
}
.simple-page {
    min-height: 70vh
}
.about-content {
    display: grid;
    grid-template-columns: .6fr 1.4fr;
    gap: 40px;
    padding: 70px 0 100px;
    border-top: 1px solid var(--line)
}
.about-content h2 {
    font: 600 clamp(40px,5vw,65px)/.95 var(--display);
    letter-spacing: -.07em;
    margin: 0
}
.about-content>div p {
    font-size: 14px;
    line-height: 1.9;
    color: #625f72;
    margin-top: 0
}
.expertise-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px
}
.expertise-list span {
    background: var(--lime);
    padding: 10px 12px;
    font: 10px 'DM Mono'
}
.about-quote {
    background: var(--ink);
    color: var(--paper);
    padding: 60px;
    position: relative;
    margin-bottom: 100px
}
.about-quote>span {
    font-size: 40px;
    color: var(--orange)
}
.about-quote blockquote {
    font: 500 clamp(25px,4vw,45px)/1.1 var(--display);
    letter-spacing: -.04em;
    max-width: 850px;
    margin: 25px 0 0
}
.contact-hero {
    padding: 90px 0 75px;
    max-width: 900px
}
.contact-hero h1 {
    margin: 35px 0
}
.contact-hero h1 em {
    color: var(--orange)
}
.contact-hero>p:last-child {
    font-size: 14px;
    line-height: 1.9;
    color: #625f72;
    max-width: 500px
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    padding: 50px 0 90px;
    border-top: 1px solid var(--line)
}
.contact-note h2 {
    font: 600 36px/.98 var(--display);
    letter-spacing: -.06em
}
.contact-note p {
    font-size: 13px;
    line-height: 1.8;
    color: #625f72;
    max-width: 350px
}
.contact-links a {
    display: grid;
    grid-template-columns: .7fr 1.5fr 25px;
    gap: 12px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--line)
}
.contact-links a:first-child {
    border-top: 1px solid var(--line)
}
.contact-links span {
    font: 10px 'DM Mono';
    color: var(--muted)
}
.contact-links b {
    font-size: 12px
}
.contact-links i {
    font-style: normal;
    font-size: 18px
}
.contact-links a:hover b {
    color: #7362c8
}
.contact-placeholder {
    display: flex;
    justify-content: space-between;
    background: #e7e0d5;
    padding: 18px;
    font: 11px 'DM Mono';
    margin-bottom: 80px
}
.contact-placeholder span {
    color: var(--muted)
}
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}
.discipline-card:nth-child(2),.gallery-card:nth-child(2) {
    transition-delay: .07s
}
.discipline-card:nth-child(3),.gallery-card:nth-child(3) {
    transition-delay: .14s
}
.discipline-card:nth-child(4) {
    transition-delay: .05s
}
.discipline-card:nth-child(5) {
    transition-delay: .1s
}
.discipline-card:nth-child(6) {
    transition-delay: .15s
}
@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}
@keyframes float {
    0%,100% {
        translate: 0 0
    }
    50% {
        translate: 0 -9px
    }
}
@keyframes breathe {
    0%,100% {
        transform: translate(-50%,-50%) scale(1)
    }
    50% {
        transform: translate(-50%,-50%) scale(1.07)
    }
}
@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}
/* Responsive adjustments for smaller screens. */
@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        scroll-behavior: auto!important;
        transition-duration: .01ms!important
    }
    .reveal {
        opacity: 1;
        transform: none
    }
}
/* Responsive adjustments for smaller screens. */
@media(max-width:850px) {
    .container {
        width: calc(100% - 40px)
    }
    .nav-wrap {
        height: 72px;
        padding: 0 20px
    }
    .menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        padding: 10px
    }
    .menu-toggle i {
        width: 24px;
        height: 2px;
        background: var(--ink)
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        padding: 22px 20px 26px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        flex-direction: column;
        align-items: stretch;
        gap: 12px
    }
    .nav-links.open {
        display: flex
    }
    .nav-links>a {
        padding: 12px!important
    }
    .nav-cta {
        text-align: center
    }
    .hero-title-wrap {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 45px 0 30px
    }
    .hero-title {
        font-size: clamp(62px,12vw,100px)
    }
    .hero-side {
        display: flex;
        align-items: center;
        gap: 22px
    }
    .hero-side p {
        max-width: 390px;
        margin: 0
    }
    .hero-art {
        height: 280px
    }
    .art-sun {
        width: 140px;
        height: 140px
    }
    .art-orbit {
        width: 330px;
        height: 330px
    }
    .orbit-two {
        width: 440px;
        height: 230px
    }
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding-top: 65px
    }
    .intro-band {
        padding-bottom: 70px
    }
    .discipline-section {
        padding: 70px 0
    }
    .discipline-grid {
        grid-template-columns: repeat(2,1fr)
    }
    .discipline-card {
        min-height: 280px
    }
    .manifesto-inner {
        padding-top: 65px;
        padding-bottom: 65px
    }
    .footer {
        padding: 40px 20px 20px
    }
    .page-hero {
        padding-top: 55px
    }
    .page-hero-bottom {
        align-items: start;
        flex-direction: column;
        gap: 18px
    }
    .service-index {
        grid-template-columns: 1fr 1fr
    }
    .service-detail {
        padding: 55px 0
    }
    .service-layout {
        grid-template-columns: 1fr;
        gap: 35px
    }
    .service-copy {
        position: static
    }
    .project-gallery,.tkj-projects,.dkv-gallery {
        max-width: 680px
    }
    .service-cta {
        margin-bottom: 65px
    }
    .about-content {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 50px 0 70px
    }
    .about-quote {
        padding: 35px;
        margin-bottom: 65px
    }
    .contact-hero {
        padding: 65px 0 55px
    }
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 35px 0 65px
    }
}
/* Responsive adjustments for smaller screens. */
@media(max-width:520px) {
    .container {
        width: calc(100% - 32px)
    }
    .brand {
        font-size: 20px
    }
    .hero-meta .hero-index {
        display: none
    }
    .hero-title {
        font-size: clamp(55px,15vw,78px)
    }
    .hero-title .outlined {
        -webkit-text-stroke-width: 1px
    }
    .hero-art {
        height: 245px
    }
    .art-type {
        font-size: 36px
    }
    .art-sun {
        width: 115px;
        height: 115px
    }
    .art-orbit {
        width: 280px;
        height: 280px
    }
    .orbit-two {
        width: 350px;
        height: 200px
    }
    .art-sticker {
        width: 65px;
        height: 65px;
        font-size: 10px;
        right: 8%
    }
    .art-caption {
        font-size: 7px;
        left: 12px;
        bottom: 13px
    }
    .hero-bottom {
        font-size: 8px;
        gap: 15px
    }
    .hero-bottom span:last-child {
        max-width: 150px;
        text-align: right
    }
    .marquee-track span {
        font-size: 15px
    }
    .intro-copy h2,.section-head h2 {
        font-size: 46px
    }
    .section-head {
        align-items: start;
        flex-direction: column;
        gap: 12px
    }
    .discipline-grid {
        gap: 9px
    }
    .discipline-card {
        padding: 14px;
        min-height: 245px
    }
    .card-no {
        font-size: 8px
    }
    .mini-symbol {
        width: 57px;
        height: 57px;
        right: 13px;
        top: 39px;
        font-size: 20px
    }
    .symbol-game,.symbol-anim {
        font-size: 30px
    }
    .symbol-dkv {
        font-size: 28px
    }
    .discipline-card h3 {
        font-size: 25px;
        margin-top: 77px
    }
    .discipline-card p {
        font-size: 10px
    }
    .card-arrow {
        right: 12px;
        bottom: 12px
    }
    .manifesto h2 {
        font-size: 53px
    }
    .manifesto-doodle {
        font-size: 120px;
        right: -2%;
        top: 18%
    }
    .footer-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px
    }
    .footer-top>p {
        grid-column: 1
    }
    .back-top {
        grid-column: 2;
        grid-row: 2;
        justify-self: start
    }
    .footer-bottom {
        align-items: start;
        flex-direction: column
    }
    .socials {
        gap: 12px
    }
    .page-hero h1,.contact-hero h1 {
        font-size: clamp(56px,14vw,80px)
    }
    .service-index {
        grid-template-columns: 1fr;
        padding-bottom: 35px
    }
    .service-copy h2 {
        font-size: 47px
    }
    .web-preview {
        min-height: 300px
    }
    .coffee-preview {
        min-height: 267px;
        padding: 25px 18px
    }
    .coffee-circle {
        width: 125px;
        height: 125px;
        right: 5%;
        top: 28%;
        font-size: 32px
    }
    .coffee-preview>b {
        font-size: 38px
    }
    .gallery-large img {
        height: 230px
    }
    .gallery-card img {
        height: 150px
    }
    .tkj-image img {
        height: 160px
    }
    .dkv-tile img {
        height: 160px
    }
    .dkv-tile-tall img {
        height: 335px
    }
    .project-meta h3 {
        font-size: 20px
    }
    .service-cta {
        padding: 40px 22px
    }
    .contact-links a {
        grid-template-columns: .65fr 1.5fr 20px
    }
    .contact-links b {
        font-size: 10px
    }
    .contact-placeholder {
        font-size: 9px;
        gap: 12px
    }
}
/* CRAFTIVA polish: expressive navigation, prominent wordmark, richer footer */
.nav-wrap {
    height: 92px;
    padding: 0 max(36px,calc((100vw - 1240px)/2));
    background: rgba(24,22,45,.94);
    color: #fff;
    border-bottom: 1px solid rgba(216,255,88,.18);
    backdrop-filter: blur(22px);
    transition: background .35s,box-shadow .35s,border-color .35s
}
.nav-wrap:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,#ff3f9b,#9a64ff,#207cfc,#fddd32,#f61b9a);
    background-size: 220% 100%;
    animation: navSpectrum 9s linear infinite;
    opacity: .85
}
@keyframes navSpectrum {
    to {
        background-position: 220% 0
    }
}
.nav-wrap.scrolled {
    background: rgba(24,22,45,.98);
    border-color: rgba(216,255,88,.24);
    box-shadow: 0 12px 38px #17152b24
}
.brand {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 0 auto
}
.brand img {
    width: clamp(185px,20vw,248px);
    height: auto;
    max-height: 64px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 3px 16px rgba(166,113,255,.12));
    transition: transform .3s,filter .3s
}
.brand:hover img {
    transform: translateY(-2px);
    filter: drop-shadow(0 5px 18px rgba(255,63,155,.3))
}
.nav-links {
    gap: 8px;
    font-size: 12px;
    letter-spacing: .15px
}
.nav-links>a:not(.nav-cta) {
    padding: 13px 17px;
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    transition: color .25s,background .25s,transform .25s
}
.nav-links>a:not(.nav-cta):after {
    display: none
}
.nav-links>a:not(.nav-cta):hover,.nav-links>a:not(.nav-cta).active {
    color: #17152b;
    background: var(--lime);
    transform: translateY(-2px)
}
.nav-cta {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-left: 8px;
    padding: 14px 18px;
    border-radius: 999px;
    background: linear-gradient(110deg,#ff4b9b,#a99bff);
    color: #19172d;
    font-weight: 800;
    box-shadow: 0 5px 20px #ff4b9b22;
    transition: transform .25s,box-shadow .25s
}
.nav-cta:hover {
    transform: translateY(-3px) rotate(-1deg);
    box-shadow: 0 9px 26px #ff4b9b45
}
.nav-cta span {
    margin: 0;
    color: #19172d;
    font-size: 16px;
    transition: transform .25s
}
.nav-cta:hover span {
    transform: translate(3px,-3px)
}
.menu-toggle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-direction: column;
    cursor: pointer;
    transition: transform .25s
}
.menu-toggle:hover {
    transform: rotate(-8deg) scale(1.04)
}
.menu-toggle i {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--ink);
    transition: transform .25s
}
.footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 100px;
    padding: 0 max(36px,calc((100vw - 1240px)/2));
    background: #19172d;
    color: #f5f1e9
}
.footer:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(ellipse at 10% 100%,rgba(169,155,255,.16),transparent 40%),radial-gradient(ellipse at 90% 0%,rgba(255,63,155,.13),transparent 36%)
}
.footer-cta {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    min-height: 270px;
    padding: 62px 0 52px;
    border-bottom: 1px solid rgba(245,241,233,.16);
    overflow: hidden
}
.footer-eyebrow,.footer-heading {
    font: 500 10px 'DM Mono',monospace;
    letter-spacing: 1.7px;
    color: var(--lime)
}
.footer-cta h2 {
    position: relative;
    z-index: 1;
    margin: 19px 0 0;
    font: 600 clamp(46px,6.5vw,84px)/.92 var(--display);
    letter-spacing: -.075em
}
.footer-cta h2 em {
    color: #b8aaff;
    font-weight: 500
}
.footer-talk {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 38px;
    padding: 17px 21px;
    border-radius: 999px;
    background: var(--lime);
    color: #19172d;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: transform .25s,box-shadow .25s
}
.footer-talk:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px #fddd3230
}
.footer-talk span {
    font-size: 18px
}
.footer-orbit {
    position: absolute;
    right: 26%;
    top: 8px;
    font-size: 150px;
    line-height: 1;
    color: #fff;
    opacity: .035;
    animation: spin 35s linear infinite;
    pointer-events: none
}
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr .8fr 1fr 1fr;
    gap: 42px;
    padding: 48px 0 55px
}
.footer-brand img {
    width: min(100%,260px);
    max-height: none;
    filter: brightness(0) invert(1);
    opacity: .96
}
.footer-identity p {
    margin: 23px 0 22px;
    color: rgba(245,241,233,.65);
    font-size: 12px;
    line-height: 1.9;
    max-width: 270px
}
.footer-status {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 10px 'DM Mono',monospace;
    color: rgba(245,241,233,.5)
}
.footer-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 5px #fddd3218
}
.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px
}
.footer-heading {
    margin-bottom: 8px;
    color: rgba(245,241,233,.45)
}
.footer-column>a {
    font-size: 12px;
    color: rgba(245,241,233,.76);
    transition: color .2s,transform .2s
}
.footer-column>a:hover {
    color: var(--lime);
    transform: translateX(4px)
}
.footer-social-column a span {
    color: #b8aaff;
    margin-left: 5px
}
.footer-bottom {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    min-height: 70px;
    border-top: 1px solid rgba(245,241,233,.16);
    font: 10px 'DM Mono',monospace;
    color: rgba(245,241,233,.48)
}
.footer-bottom .back-top {
    color: var(--lime);
    transition: transform .2s
}
.footer-bottom .back-top:hover {
    transform: translateY(-2px)
}
/* Responsive adjustments for smaller screens. */
@media(max-width:900px) {
    .footer-main {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 32px
    }
    .footer-identity {
        grid-column: 1/-1
    }
    .footer-identity p {
        max-width: 440px
    }
    .footer-brand img {
        width: 230px
    }
}
/* Responsive adjustments for smaller screens. */
@media(max-width:720px) {
    .nav-wrap {
        height: 78px;
        padding: 0 20px
    }
    .brand img {
        width: 190px;
        max-height: 55px
    }
    .menu-toggle {
        display: flex
    }
    .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 16px;
        right: 16px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 7px;
        padding: 14px;
        border: 1px solid rgba(216,255,88,.2);
        border-radius: 20px;
        background: rgba(25,23,45,.98);
        box-shadow: 0 18px 45px #17152b35;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(.98);
        transform-origin: top;
        transition: opacity .22s,visibility .22s,transform .22s
    }
    .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1)
    }
    .nav-links>a:not(.nav-cta) {
        padding: 15px 16px;
        color: #fff;
        border-radius: 12px
    }
    .nav-links>a:not(.nav-cta):hover,.nav-links>a:not(.nav-cta).active {
        color: #19172d
    }
    .nav-cta {
        justify-content: space-between;
        margin: 5px 0 0;
        padding: 15px 17px
    }
    .footer {
        margin-top: 72px;
        padding: 0 22px
    }
    .footer-cta {
        min-height: 260px;
        align-items: flex-start;
        flex-direction: column;
        padding: 48px 0 38px
    }
    .footer-cta h2 {
        font-size: clamp(48px,12vw,70px)
    }
    .footer-talk {
        align-self: flex-start
    }
    .footer-orbit {
        right: 0;
        top: 22px;
        font-size: 100px
    }
    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 32px 22px;
        padding: 36px 0
    }
    .footer-identity {
        grid-column: 1/-1
    }
    .footer-brand img {
        width: min(100%,235px)
    }
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 20px 0
    }
    .footer-bottom span:nth-child(2) {
        order: 3
    }
}
/* Responsive adjustments for smaller screens. */
@media(prefers-reduced-motion:reduce) {
    .nav-wrap:before,.footer-orbit {
        animation: none
    }
    .nav-wrap,.nav-links,.nav-cta,.brand img {
        transition: none
    }
}
/* CRAFTIVA v4 — editorial service system + a more immersive About page */
.services-intro-note {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0 0;
    font: 10px 'DM Mono',monospace;
    letter-spacing: 1.3px;
    color: #7c7889
}
.services-page .page-hero {
    padding-top: 55px;
    position: relative
}
.services-page .page-hero h1 {
    max-width: 900px;
    font-size: clamp(64px,9vw,118px);
    line-height: .89;
    letter-spacing: -.085em
}
.services-page .page-hero h1 em,.about-page .page-hero h1 em {
    color: #7d5be7
}
.services-page .page-hero-bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    padding: 30px 0 34px;
    gap: 30px
}
.services-page .page-hero-bottom p {
    max-width: 540px
}
.services-page .page-hero-bottom>span {
    white-space: nowrap;
    font: 10px 'DM Mono',monospace;
    letter-spacing: 1px;
    color: #7b7889
}
.services-page .page-hero-bottom>span b {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--lime);
    color: var(--ink);
    margin-left: 7px;
    font-size: 15px
}
.service-index {
    gap: 0 18px;
    padding: 25px 0 45px
}
.service-index a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 800;
    transition: padding .25s,color .25s
}
.service-index a span {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font: 10px 'DM Mono',monospace;
    color: #7d5be7;
    transition: background .25s,color .25s,transform .25s
}
.service-index a b {
    margin-left: auto;
    font-size: 18px;
    font-weight: 500;
    transition: transform .25s
}
.service-index a:hover {
    padding-left: 16px;
    color: #7755d8
}
.service-index a:hover span {
    background: var(--lime);
    color: var(--ink);
    transform: rotate(-10deg)
}
.service-index a:hover b {
    transform: translate(3px,3px)
}
.service-detail {
    position: relative;
    padding: 88px 0 96px
}
.service-detail:before {
    content: "";
    position: absolute;
    left: calc((min(1240px,100vw - 72px) - 100vw)/2);
    right: calc((min(1240px,100vw - 72px) - 100vw)/2);
    top: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .4s;
    background: radial-gradient(ellipse at 90% 20%,rgba(169,155,255,.13),transparent 42%)
}
.service-detail:nth-of-type(even):before {
    opacity: 1
}
.service-kicker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #777486;
    font-size: 10px;
    letter-spacing: 1.5px;
    padding-bottom: 17px;
    margin-bottom: 40px
}
.service-kicker span:first-child {
    color: #7d5be7;
    font-weight: 500
}
.service-layout {
    grid-template-columns: minmax(280px,.78fr) minmax(0,1.22fr);
    gap: 7%;
    align-items: start
}
.service-copy {
    padding: 6px 0 0
}
.service-copy h2 {
    font-size: clamp(38px,4.4vw,58px);
    line-height: .98;
    letter-spacing: -.07em;
    margin: 17px 0 24px
}
.service-copy h2 em {
    color: #7d5be7
}
.service-copy>p:not(.eyebrow) {
    font-size: 14px;
    line-height: 1.9;
    color: #686576;
    margin: 0 0 15px;
    max-width: 460px
}
.service-copy>p b {
    color: var(--ink)
}
.service-tags {
    gap: 8px
}
.service-tags span {
    border: 1px solid rgba(25,23,45,.16);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 10px;
    background: rgba(255,255,255,.3)
}
.price-row {
    margin-top: 28px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: space-between
}
.price-row>span {
    font-size: 11px;
    color: #777486
}
.price-row strong {
    font: 500 12px 'DM Mono',monospace;
    color: #7d5be7
}
.price-row small {
    font: 10px var(--body);
    color: #777486
}
.project-feature,.project-gallery,.tkj-projects,.dkv-gallery {
    border-radius: 8px;
    overflow: hidden
}
.project-feature {
    padding: 12px;
    background: #e8e1d8;
    border: 1px solid rgba(25,23,45,.08);
    box-shadow: 0 18px 45px rgba(25,23,45,.06);
    transition: transform .35s,box-shadow .35s
}
.project-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 55px rgba(25,23,45,.11)
}
.project-image {
    border-radius: 4px;
    overflow: hidden
}
.web-preview {
    min-height: 360px
}
.coffee-preview {
    min-height: 320px
}
.project-meta {
    padding: 23px 12px 12px;
    gap: 18px
}
.project-meta h3 {
    font-size: clamp(20px,2.2vw,27px);
    letter-spacing: -.05em
}
.project-meta p {
    max-width: 420px;
    line-height: 1.7
}
.project-visit {
    margin: 0 12px 10px;
    border-radius: 999px;
    padding: 13px 15px;
    background: var(--ink);
    color: white
}
.project-visit span {
    color: var(--lime)
}
.video-frame {
    border-radius: 4px;
    overflow: hidden;
    background: #17152b;
    position: relative
}
.video-frame video {
    width: 100%;
    max-height: 490px;
    aspect-ratio: 16/10;
    object-fit: cover
}
.media-label {
    font: 10px 'DM Mono',monospace;
    letter-spacing: 1px
}
.project-type {
    background: var(--lime);
    color: var(--ink);
    padding: 9px 12px;
    border-radius: 999px;
    font: 10px 'DM Mono',monospace;
    white-space: nowrap
}
.project-gallery {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 12px;
    overflow: visible
}
.gallery-card {
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(25,23,45,.08);
    transition: transform .3s
}
.gallery-card:hover {
    transform: translateY(-5px) rotate(-.4deg)
}
.gallery-large {
    grid-row: span 2
}
.gallery-card img {
    width: 100%;
    height: 220px;
    object-fit: cover
}
.gallery-large img {
    height: 100%;
    min-height: 450px
}
.gallery-card>div {
    padding: 15px
}
.gallery-card>div span,.tkj-image>span,.dkv-tile>span {
    font: 9px 'DM Mono',monospace;
    letter-spacing: 1px
}
.gallery-card h3 {
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: -.04em;
    margin: 10px 0 0
}
.gallery-note {
    grid-column: 1/-1;
    font-size: 11px;
    color: #777486;
    line-height: 1.7;
    margin: 2px 0
}
.tkj-projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    overflow: visible
}
.tkj-image {
    position: relative;
    background: #dfe6e8;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(25,23,45,.06)
}
.tkj-image img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 3px
}
.tkj-image>span {
    display: block;
    padding: 12px 2px 4px
}
.tkj-packages {
    grid-column: 1/-1;
    background: #19172d;
    color: #f5f1e9;
    border-radius: 6px;
    padding: 22px
}
.tkj-packages>div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid #ffffff20;
    font-size: 12px
}
.tkj-packages b {
    color: var(--lime);
    font: 11px 'DM Mono',monospace
}
.tkj-packages small {
    display: block;
    color: #aaa7ba;
    font-size: 10px;
    margin-top: 15px
}
.dkv-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    overflow: visible
}
.dkv-tile {
    padding: 9px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 12px 30px rgba(25,23,45,.07);
    transition: transform .3s
}
.dkv-tile:hover {
    transform: translateY(-4px) rotate(.4deg)
}
.dkv-tile img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 2px
}
.dkv-tile-tall img {
    height: 350px
}
.dkv-tile>span {
    display: block;
    padding: 11px 3px 4px;
    color: #777486
}
.dkv-gallery .gallery-note {
    padding: 2px
}
.anim-project>img {
    width: 100%;
    max-height: 540px;
    object-fit: cover;
    object-position: center 25%;
    border-radius: 4px
}
.service-cta {
    border-radius: 8px;
    background: linear-gradient(115deg,#fddd32 0%,#fddd32 42%,#b9aaff 100%);
    box-shadow: 0 22px 55px rgba(25,23,45,.08)
}
.service-cta h2 {
    font-size: clamp(44px,6vw,76px);
    letter-spacing: -.075em
}
/* About page as a brand story, not a text-only information page */
.about-page .page-hero {
    padding-top: 56px;
    position: relative
}
.about-page .page-hero h1 {
    position: relative;
    z-index: 2;
    font-size: clamp(65px,9vw,116px);
    line-height: .87;
    letter-spacing: -.09em;
    max-width: 950px
}
.about-hero .page-hero-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 30px;
    padding: 30px 0 35px
}
.about-hero .page-hero-bottom p {
    max-width: 520px
}
.about-hero .page-hero-bottom>span {
    font: 10px 'DM Mono',monospace;
    letter-spacing: 1px;
    white-space: nowrap;
    color: #7d5be7
}
.about-hero-art {
    height: 230px;
    position: relative;
    overflow: hidden;
    border-radius: 7px;
    background: #19172d;
    color: #f5f1e9;
    margin: 0 0 30px;
    isolation: isolate
}
.about-hero-art:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 70% 50%,rgba(169,155,255,.42),transparent 26%),radial-gradient(circle at 90% 15%,rgba(255,63,155,.25),transparent 24%),linear-gradient(110deg,transparent 20%,rgba(216,255,88,.06) 50%,transparent 80%)
}
.about-hero-art:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: 17%;
    top: -18px;
    border: 1px solid #ffffff25;
    border-radius: 50%;
    box-shadow: 0 0 0 28px #ffffff08,0 0 0 58px #ffffff06,0 0 0 90px #ffffff04;
    z-index: -1
}
.art-word {
    position: absolute;
    left: 6%;
    top: 50%;
    transform: translateY(-50%);
    font: 700 clamp(45px,7vw,86px)/.78 var(--display);
    letter-spacing: -.09em;
    color: var(--lime)
}
.art-orbit {
    position: absolute;
    right: 23%;
    top: 35%;
    font-size: 76px;
    color: #ff79b7;
    animation: spin 26s linear infinite
}
.orbit-two {
    right: 16%;
    top: 20%;
    font-size: 24px;
    color: #b8aaff;
    animation-direction: reverse
}
.art-label {
    position: absolute;
    right: 4%;
    bottom: 23px;
    font: 9px/1.7 'DM Mono',monospace;
    letter-spacing: 1.4px;
    text-align: right;
    color: #ffffff80
}
.about-manifesto,.about-process {
    padding: 32px 0 90px;
    border-top: 1px solid var(--line)
}
.manifesto-index {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font: 10px 'DM Mono',monospace;
    letter-spacing: 1.2px;
    color: #7d5be7
}
.manifesto-index span:last-child {
    color: #8a8797
}
.manifesto-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7%;
    padding-top: 48px
}
.manifesto-body>.eyebrow {
    grid-column: 1/-1;
    margin-bottom: -20px
}
.manifesto-body h2,.discipline-heading h2,.process-heading h2 {
    font: 600 clamp(38px,5.2vw,68px)/.98 var(--display);
    letter-spacing: -.075em;
    margin: 0
}
.manifesto-body h2 em,.discipline-heading h2 em,.process-heading h2 em {
    color: #7d5be7
}
.manifesto-copy {
    padding-top: 8px;
    max-width: 470px
}
.manifesto-copy p,.discipline-heading>p,.process-heading>p {
    font-size: 13px;
    line-height: 1.95;
    color: #6d6a7a;
    margin: 0 0 16px
}
.about-disciplines {
    padding: 70px 0 95px;
    border-top: 1px solid var(--line)
}
.discipline-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 34px
}
.discipline-heading .eyebrow {
    margin-bottom: 18px
}
.discipline-heading>p {
    max-width: 300px;
    margin-bottom: 5px
}
.discipline-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px
}
.discipline-card {
    min-height: 285px;
    padding: 23px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform .3s,box-shadow .3s
}
.discipline-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(25,23,45,.12)
}
.discipline-card>span:first-child {
    font: 9px 'DM Mono',monospace;
    letter-spacing: 1px;
    opacity: .72
}
.discipline-symbol {
    position: absolute;
    right: 21px;
    top: 14px;
    font: 50px var(--display);
    font-weight: 400;
    opacity: .55;
    transition: transform .4s
}
.discipline-card:hover .discipline-symbol {
    transform: rotate(18deg) scale(1.12)
}
.discipline-card h3 {
    font: 600 30px/.98 var(--display);
    letter-spacing: -.06em;
    margin: auto 0 12px
}
.discipline-card p {
    font-size: 11px;
    line-height: 1.7;
    max-width: 220px;
    margin: 0 0 22px
}
.discipline-link {
    font: 9px 'DM Mono',monospace;
    letter-spacing: .5px;
    border-top: 1px solid #19172d30;
    padding-top: 12px;
    width: 100%
}
.discipline-lime {
    background: #fddd32
}
.discipline-pink {
    background: #ffc6d5
}
.discipline-purple {
    background: #c5baff
}
.discipline-blue {
    background: #b6d8ff
}
.discipline-orange {
    background: #ffb89d
}
.discipline-cream {
    background: #e8e1d8
}
.about-process {
    padding-bottom: 85px
}
.process-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    padding: 48px 0 38px
}
.process-heading>p {
    max-width: 330px;
    margin-bottom: 4px
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}
.process-steps article {
    padding: 24px 22px 28px 0;
    position: relative
}
.process-steps article+article {
    border-left: 1px solid var(--line);
    padding-left: 24px
}
.process-steps article>span {
    font: 10px 'DM Mono',monospace;
    color: #7d5be7
}
.process-steps h3 {
    font: 600 26px var(--display);
    letter-spacing: -.05em;
    margin: 28px 0 8px
}
.process-steps p {
    font-size: 12px;
    line-height: 1.8;
    color: #6d6a7a;
    max-width: 270px;
    margin: 0
}
.about-quote {
    padding: 60px 7%;
    border-radius: 7px;
    margin-bottom: 60px;
    background: #19172d;
    overflow: hidden
}
.about-quote>span {
    color: var(--lime);
    font-size: 38px
}
.about-quote blockquote {
    max-width: 850px;
    font: 500 clamp(25px,3.5vw,43px)/1.2 var(--display);
    letter-spacing: -.045em;
    margin: 30px 0 25px
}
.about-quote>p {
    font: 9px 'DM Mono',monospace;
    letter-spacing: 1.5px;
    color: #b8aaff
}
.about-endcap {
    position: relative;
    overflow: hidden;
    padding: 55px 6%;
    margin: 0 0 90px;
    background: #ffc6d5;
    border-radius: 7px
}
.about-endcap .eyebrow {
    font: 10px 'DM Mono',monospace;
    letter-spacing: 1.4px
}
.about-endcap h2 {
    position: relative;
    z-index: 1;
    font: 600 clamp(45px,6.5vw,78px)/.92 var(--display);
    letter-spacing: -.08em;
    margin: 24px 0 30px
}
.about-endcap h2 em {
    color: #7d5be7
}
.endcap-mark {
    position: absolute;
    right: 8%;
    top: -42px;
    font: 700 300px/.9 var(--display);
    letter-spacing: -.1em;
    color: #19172d0b;
    pointer-events: none
}
.button-dark {
    position: relative;
    z-index: 1
}
/* Responsive adjustments for smaller screens. */
@media(max-width:900px) {
    .service-layout {
        grid-template-columns: 1fr;
        gap: 28px
    }
    .service-copy {
        position: static
    }
    .service-detail {
        padding: 60px 0
    }
    .service-copy h2 {
        font-size: clamp(40px,8vw,58px)
    }
    .about-hero-art {
        height: 200px
    }
    .manifesto-body {
        gap: 24px
    }
    .discipline-grid {
        grid-template-columns: repeat(2,1fr)
    }
    .discipline-card {
        min-height: 250px
    }
}
/* Responsive adjustments for smaller screens. */
@media(max-width:720px) {
    .services-intro-note {
        font-size: 8px;
        letter-spacing: .7px
    }
    .services-page .page-hero,.about-page .page-hero {
        padding-top: 35px
    }
    .services-page .page-hero h1,.about-page .page-hero h1 {
        font-size: clamp(54px,15vw,82px)
    }
    .services-page .page-hero-bottom,.about-hero .page-hero-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }
    .service-index {
        grid-template-columns: 1fr 1fr;
        gap: 0 10px;
        padding-bottom: 30px
    }
    .service-index a {
        font-size: 11px;
        gap: 8px;
        min-height: 58px
    }
    .service-index a span {
        width: 27px;
        height: 27px;
        font-size: 9px
    }
    .service-detail {
        padding: 48px 0
    }
    .service-kicker {
        font-size: 8px;
        letter-spacing: .7px;
        margin-bottom: 25px
    }
    .service-copy h2 {
        font-size: 43px
    }
    .project-gallery {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }
    .gallery-card img {
        height: 145px
    }
    .gallery-large img {
        min-height: 315px
    }
    .gallery-card h3 {
        font-size: 14px
    }
    .project-meta {
        padding: 16px 8px 8px
    }
    .project-meta h3 {
        font-size: 20px
    }
    .project-meta p {
        font-size: 11px
    }
    .tkj-projects {
        gap: 8px
    }
    .tkj-image {
        padding: 7px
    }
    .tkj-image img {
        height: 150px
    }
    .tkj-image>span {
        font-size: 8px;
        line-height: 1.5
    }
    .dkv-gallery {
        gap: 8px
    }
    .dkv-tile {
        padding: 6px
    }
    .dkv-tile img {
        height: 155px
    }
    .dkv-tile-tall img {
        height: 260px
    }
    .about-hero-art {
        height: 170px
    }
    .art-word {
        font-size: 49px;
        left: 5%
    }
    .art-orbit {
        right: 20%;
        font-size: 55px
    }
    .art-label {
        font-size: 7px;
        right: 4%;
        bottom: 12px
    }
    .about-manifesto,.about-disciplines,.about-process {
        padding: 30px 0 55px
    }
    .manifesto-body {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-top: 32px
    }
    .manifesto-body>.eyebrow {
        margin-bottom: 0
    }
    .manifesto-body h2,.discipline-heading h2,.process-heading h2 {
        font-size: 43px
    }
    .manifesto-copy {
        padding: 0
    }
    .discipline-heading,.process-heading {
        display: block
    }
    .discipline-heading>p,.process-heading>p {
        margin-top: 20px
    }
    .discipline-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }
    .discipline-card {
        min-height: 230px;
        padding: 15px
    }
    .discipline-card h3 {
        font-size: 24px
    }
    .discipline-card p {
        font-size: 10px
    }
    .discipline-symbol {
        font-size: 38px;
        right: 12px;
        top: 9px
    }
    .discipline-link {
        font-size: 7px;
        letter-spacing: 0
    }
    .process-heading {
        padding: 32px 0 25px
    }
    .process-steps {
        grid-template-columns: 1fr
    }
    .process-steps article,.process-steps article+article {
        padding: 20px 0;
        border-left: 0
    }
    .process-steps article+article {
        border-top: 1px solid var(--line)
    }
    .process-steps h3 {
        margin: 15px 0 6px
    }
    .about-quote {
        padding: 30px 24px;
        margin-bottom: 35px
    }
    .about-quote blockquote {
        font-size: 27px;
        margin: 22px 0
    }
    .about-endcap {
        padding: 38px 24px;
        margin-bottom: 60px
    }
    .about-endcap h2 {
        font-size: 50px
    }
    .endcap-mark {
        font-size: 190px;
        right: 0;
        top: 5px
    }
}
/* Responsive adjustments for smaller screens. */
@media(prefers-reduced-motion:reduce) {
    .discipline-card,.discipline-symbol,.project-feature,.gallery-card,.dkv-tile {
        transition: none
    }
}
/* Service directory + individual discipline pages */
.discipline-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 22px;
    margin: 34px 0 110px
}
.discipline-card {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--paper,#f2eee7);
    border: 1px solid rgba(23,21,43,.12);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .35s ease,border-color .35s ease,box-shadow .35s ease
}
.discipline-card:hover {
    transform: translateY(-7px);
    border-color: rgba(23,21,43,.38);
    box-shadow: 0 24px 60px rgba(23,21,43,.12)
}
.discipline-image {
    height: 250px;
    position: relative;
    overflow: hidden;
    background: #ded9d0
}
.discipline-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(20,18,35,.04),rgba(20,18,35,.52))
}
.discipline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.2,.7,.2,1)
}
.discipline-card:hover .discipline-image img {
    transform: scale(1.055)
}
.discipline-image>span {
    position: absolute;
    z-index: 1;
    left: 20px;
    bottom: 18px;
    color: #fff;
    font: 11px 'DM Mono',monospace;
    letter-spacing: .08em
}
.discipline-image>b {
    position: absolute;
    z-index: 1;
    right: 18px;
    top: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fddd32;
    color: #17152b;
    font-size: 21px;
    transition: transform .3s ease
}
.discipline-card:hover .discipline-image>b {
    transform: rotate(45deg)
}
.discipline-content {
    padding: 25px 26px 24px
}
.discipline-content h2 {
    font: 600 clamp(25px,3vw,36px)/1.08 'Space Grotesk',sans-serif;
    letter-spacing: -.045em;
    margin: 10px 0 12px
}
.discipline-content p {
    font-size: 14px;
    line-height: 1.8;
    max-width: 490px;
    opacity: .78;
    margin: 0 0 24px
}
.discipline-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(23,21,43,.16);
    padding-top: 15px;
    font-size: 12px;
    font-weight: 800
}
.discipline-link b {
    font-size: 18px;
    transition: transform .25s
}
.discipline-card:hover .discipline-link b {
    transform: translate(3px,-3px)
}
.department-page {
    padding-bottom: 10px
}
.department-hero {
    padding: 20px 0 75px
}
.back-services {
    display: inline-block;
    margin: 0 0 38px;
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    opacity: .7
}
.back-services:hover {
    opacity: 1
}
.department-hero h1 {
    font: 600 clamp(52px,9vw,116px)/.92 'Space Grotesk',sans-serif;
    letter-spacing: -.075em;
    margin: 26px 0 34px
}
.department-hero h1 em,.department-process h2 em,.department-price h2 em {
    font-style: normal;
    color: #7763d8
}
.department-intro {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 8vw;
    align-items: start;
    border-top: 1px solid rgba(23,21,43,.18);
    padding-top: 24px
}
.department-intro>p {
    font-size: clamp(16px,1.7vw,21px);
    line-height: 1.7;
    max-width: 650px;
    margin: 0
}
.department-quick>span,.price-card>span {
    font: 11px 'DM Mono',monospace;
    letter-spacing: .1em;
    opacity: .65
}
.department-quick .service-tags {
    margin-top: 14px
}
.department-showcase {
    padding: 54px 0 85px;
    border-top: 1px solid rgba(23,21,43,.16)
}
.showcase-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 34px
}
.showcase-heading h2 {
    font: 600 clamp(36px,5vw,62px)/1 'Space Grotesk',sans-serif;
    letter-spacing: -.06em;
    margin: 12px 0 0
}
.showcase-heading h2 span {
    color: #7763d8
}
.showcase-heading>p {
    max-width: 360px;
    font-size: 13px;
    line-height: 1.8;
    opacity: .7;
    margin: 0
}
.department-project .project-feature,.department-project .project-gallery,.department-project .dkv-gallery,.department-project .tkj-projects {
    width: 100%
}
.department-project .project-feature {
    max-width: 100%
}
.department-project .project-gallery-detail {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px
}
.department-project .project-gallery-detail .gallery-large {
    grid-row: span 2
}
.department-project .dkv-gallery-detail {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-auto-rows: 220px;
    gap: 14px
}
.department-project .dkv-gallery-detail .dkv-tile-tall {
    grid-row: span 2
}
.department-project .dkv-gallery-detail .dkv-tile img {
    height: 100%;
    object-fit: cover
}
.department-project .tkj-projects-detail {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 20px
}
.department-project .tkj-packages {
    grid-column: 1/-1
}
.department-process {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 9vw;
    padding: 64px 0 90px;
    border-top: 1px solid rgba(23,21,43,.16)
}
.department-process h2,.department-price h2 {
    font: 600 clamp(38px,5vw,64px)/1 'Space Grotesk',sans-serif;
    letter-spacing: -.065em;
    margin: 14px 0
}
.process-points {
    display: grid;
    gap: 0
}
.process-points article {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(23,21,43,.16)
}
.process-points article:first-child {
    padding-top: 0
}
.process-points article>span {
    font: 12px 'DM Mono',monospace;
    color: #7763d8;
    padding-top: 4px
}
.process-points h3 {
    font: 700 17px 'Manrope',sans-serif;
    margin: 0 0 8px
}
.process-points p {
    font-size: 13px;
    line-height: 1.8;
    opacity: .72;
    margin: 0;
    max-width: 500px
}
.department-price {
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: 9vw;
    align-items: center;
    padding: 60px 0 80px;
    background: rgba(119,99,216,.07);
    border-radius: 24px;
    margin-bottom: 70px;
    padding-left: clamp(20px,5vw,60px);
    padding-right: clamp(20px,5vw,60px)
}
.price-card {
    background: #17152b;
    color: #f7f3eb;
    padding: 28px;
    border-radius: 18px
}
.price-card>span {
    color: #fddd32
}
.price-card strong {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: 600 27px 'Space Grotesk',sans-serif;
    margin: 18px 0
}
.price-card strong span {
    color: #fddd32
}
.price-card p {
    font-size: 13px;
    line-height: 1.8;
    opacity: .72;
    margin: 0 0 22px
}
.price-card .button {
    background: #fddd32;
    color: #17152b
}
.department-pagination {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0 0 55px
}
.department-pagination a {
    color: inherit;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    border-bottom: 1px solid rgba(23,21,43,.3);
    padding-bottom: 10px
}
.department-pagination a:hover {
    color: #7763d8
}
/* Responsive adjustments for smaller screens. */
@media(max-width:760px) {
    .discipline-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 70px
    }
    .discipline-image {
        height: 220px
    }
    .discipline-content {
        padding: 21px
    }
    .department-hero {
        padding-bottom: 52px
    }
    .department-hero h1 {
        font-size: clamp(49px,13vw,78px)
    }
    .department-intro {
        grid-template-columns: 1fr;
        gap: 25px
    }
    .showcase-heading {
        display: block
    }
    .showcase-heading>p {
        margin-top: 18px
    }
    .department-project .project-gallery-detail {
        grid-template-columns: 1fr
    }
    .department-project .project-gallery-detail .gallery-large {
        grid-row: auto
    }
    .department-project .dkv-gallery-detail {
        grid-template-columns: repeat(2,minmax(0,1fr));
        grid-auto-rows: 180px
    }
    .department-project .tkj-projects-detail {
        grid-template-columns: 1fr
    }
    .department-process,.department-price {
        grid-template-columns: 1fr;
        gap: 25px
    }
    .department-price {
        padding-top: 30px;
        padding-bottom: 30px
    }
    .department-pagination {
        padding-bottom: 40px
    }
    .department-pagination a {
        max-width: 48%
    }
}

/* ==========================================================
   CRAFTIVA VISUAL REWORK v2 — moodboard-led Y2K / retro UI
   Palette: blue, yellow, purple, pink. Light canvas + dark ink.
   ========================================================== */
:root {
  --ink: #10132f;
  --paper: #f8f7ff;
  --lime: #fddd32;
  --purple: #552ec9;
  --orange: #f61b9a;
  --blue: #207cfc;
  --pink: #ffd5ef;
  --muted: #625f7b;
  --line: rgba(16,19,47,.22);
  --display: 'Space Grotesk', sans-serif;
  --body: 'Manrope', sans-serif;
}
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--orange); color: white; }
.grain { opacity: .025; }
.container { width: min(1240px, calc(100% - 64px)); }

/* Navigation becomes a clear, branded control bar. */
.nav-wrap {
  min-height: 82px; height: auto;
  background: #fff;
  border-bottom: 3px solid var(--ink);
  box-shadow: 0 5px 0 rgba(85,46,201,.10);
  padding-inline: max(32px, calc((100vw - 1240px)/2));
}
.nav-wrap.scrolled { border-color: var(--ink); box-shadow: 0 8px 0 rgba(32,124,252,.10); }
.brand { gap: 0; min-width: 190px; }
.brand img { width: 174px; height: 52px; object-fit: contain; object-position: left center; }
.nav-links { gap: clamp(16px, 2.4vw, 34px); color: var(--ink); }
.nav-links>a:not(.nav-cta) { font-size: 12px; letter-spacing: .02em; }
.nav-links>a:not(.nav-cta):after { height: 4px; bottom: 0; background: var(--orange); }
.nav-cta { background: var(--blue); color: white; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink); padding: 13px 17px; transition: transform .2s, box-shadow .2s; }
.nav-cta:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.nav-cta span { color: var(--lime); }
.menu-toggle { color: var(--ink); }

/* Headings: editorial display meets nostalgic web interface. */
.eyebrow { color: var(--purple); font-weight: 700; letter-spacing: 1.8px; }
.hero { padding-top: 30px; }
.hero-meta { padding: 10px 0; }
.hero-title-wrap { padding: 56px 0 38px; grid-template-columns: minmax(0,1fr) 230px; }
.hero-title { font-size: clamp(64px, 9.5vw, 132px); line-height: .88; letter-spacing: -.085em; }
.hero-title .outlined { -webkit-text-stroke: 2px var(--purple); color: var(--blue); text-shadow: 4px 4px 0 var(--pink); }
.hero-star { color: var(--orange); text-shadow: 3px 3px 0 var(--lime); }
.hero-side p { color: #4f4d68; }
.circle-link { background: var(--lime); border: 2px solid var(--ink); border-radius: 5px; box-shadow: 4px 4px 0 var(--ink); }
.circle-link:hover { transform: translate(2px,2px) rotate(-45deg); box-shadow: 2px 2px 0 var(--ink); }
.hero-art { height: clamp(300px, 37vw, 470px); border: 3px solid var(--ink); border-radius: 8px; background: #dbe9ff; box-shadow: 9px 9px 0 var(--purple); }
.hero-art:before {
  background: radial-gradient(circle at 15% 22%, #fff 0 2px, transparent 3px), radial-gradient(circle at 78% 18%, #fff 0 2px, transparent 3px), radial-gradient(circle at 85% 70%, #fff 0 2px, transparent 3px), linear-gradient(135deg, rgba(32,124,252,.05), rgba(246,27,154,.24)), repeating-linear-gradient(0deg, transparent 0 27px, rgba(85,46,201,.08) 28px 29px), linear-gradient(120deg,#e8f4ff,#d9c9ff 54%,#ffd5ef);
}
.art-orbit { border: 2px dotted rgba(16,19,47,.48); }
.orbit-two { border-color: rgba(32,124,252,.55); }
.art-sun { background: linear-gradient(135deg,var(--orange),var(--purple) 45%,var(--blue) 78%,#40caff); border: 3px solid white; box-shadow: 0 0 0 10px rgba(246,27,154,.15), 8px 8px 0 var(--ink); }
.art-type { color: var(--ink); text-shadow: 3px 3px 0 white; }
.art-type span { color: var(--orange); }
.art-note,.art-sticker { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 3px; }
.art-note { background: var(--lime); }
.note-b { background: var(--blue); color: white; }
.art-sticker { background: var(--orange); color: white; transform: rotate(8deg); }
.art-caption { background: var(--ink); color: white; padding: 10px 14px; }
.hero-bottom { padding: 20px 0 30px; }

/* Bands, cards, and service panels have a tactile, retro interface feel. */
.intro-band { background: var(--ink); color: white; border-block: 3px solid var(--ink); }
.marquee { background: var(--lime); color: var(--ink); border-bottom: 2px solid var(--ink); }
.marquee-track { font-weight: 800; }
.intro-copy h2 em, .section-head h2 em { color: var(--orange); }
.text-link { font-weight: 800; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.text-link span { color: var(--orange); }
.discipline-section { padding-top: 90px; padding-bottom: 90px; }
.section-head { align-items: end; margin-bottom: 38px; }
.section-head h2 { letter-spacing: -.06em; }
.discipline-grid { gap: 24px; }
.discipline-card,.discipline-item,.service-card,.price-card,.project-card,.contact-card {
  border: 2px solid var(--ink); border-radius: 6px; box-shadow: 6px 6px 0 var(--ink); background: white;
}
.discipline-card:hover,.service-card:hover,.project-card:hover { transform: translateY(-4px); box-shadow: 8px 10px 0 var(--purple); }
.discipline-image { border-bottom: 2px solid var(--ink); }
.discipline-content { background: white; }
.discipline-content h3 { letter-spacing: -.04em; }
.discipline-content .number,.service-kicker { color: var(--purple); }
.button,.btn,button[type="submit"] { border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink); transition: transform .2s,box-shadow .2s; }
.button:hover,.btn:hover,button[type="submit"]:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.button-primary,.btn-primary { background: var(--blue); color: white; }
.button-secondary,.btn-secondary { background: var(--lime); color: var(--ink); }

/* Inner pages: vivid section labels and readable light surfaces. */
.department-hero { background: linear-gradient(125deg,#e9f2ff 0%,#f7e8ff 54%,#ffe2f4 100%); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 8px 8px 0 var(--purple); padding: clamp(28px,5vw,64px); margin-top: 34px; }
.department-hero h1 { color: var(--ink); letter-spacing: -.075em; }
.department-hero .eyebrow { color: var(--purple); }
.department-intro { padding-block: 48px; }
.showcase-heading { border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
.department-project { margin-block: 42px; }
.department-project h2,.department-project h3 { letter-spacing: -.045em; }
.project-gallery-detail img,.dkv-gallery-detail img,.tkj-projects-detail img { border: 2px solid var(--ink); border-radius: 5px; }
.department-process { background: #e9e2ff; border: 2px solid var(--ink); border-radius: 6px; padding: 28px; }
.department-price { background: var(--ink); color: white; border-radius: 8px; padding: clamp(24px,4vw,48px); }
.price-card { background: white; color: var(--ink); padding: 26px; }
.price-card>span,.price-card strong span { color: var(--purple); }
.price-card .button { background: var(--lime); color: var(--ink); }
.department-pagination a { border-bottom: 2px solid var(--orange); }
footer { background: var(--ink); color: white; border-top: 5px solid var(--orange); }
input,textarea,select { border: 2px solid var(--ink) !important; border-radius: 4px !important; background: white !important; color: var(--ink) !important; }

@media (max-width:760px) {
  .container { width: min(100% - 36px, 1240px); }
  .nav-wrap { min-height: 72px; padding-inline: 18px; }
  .brand { min-width: 0; }
  .brand img { width: 148px; height: 46px; }
  .hero-title-wrap { grid-template-columns: 1fr; gap: 24px; padding: 42px 0 30px; }
  .hero-title { font-size: clamp(58px, 15vw, 94px); }
  .hero-side { max-width: 340px; }
  .hero-art { height: 300px; margin-right: 6px; }
  .hero-bottom { gap: 16px; align-items: flex-start; font-size: 9px; }
  .discipline-section { padding-block: 62px; }
  .department-hero { margin-top: 20px; box-shadow: 5px 5px 0 var(--purple); }
}

/* CRAFTIVA VISUAL REFINEMENT v3 — flatter 2D UI, stronger logo contrast */
:root {
  --flat-ink: #17152f;
  --flat-blue: #207cfc;
  --flat-pink: #f61b9a;
  --flat-yellow: #fddd32;
  --flat-purple: #552ec9;
}
/* Keep the navigation surface light on scroll so the brand mark never blends in. */
.nav-wrap,
.nav-wrap.scrolled {
  background: #fff !important;
  color: var(--flat-ink);
  border-bottom: 2px solid var(--flat-ink);
  box-shadow: none;
  backdrop-filter: none;
}
.nav-wrap:before { height: 3px; opacity: 1; }
.brand img {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal;
}
.nav-links>a:not(.nav-cta) { color: var(--flat-ink) !important; }
.nav-links>a:not(.nav-cta):hover,
.nav-links>a:not(.nav-cta).active { background: #f0eaff; color: var(--flat-purple) !important; }
.nav-cta { box-shadow: 3px 3px 0 var(--flat-ink); }

/* Flatter 2D-ish style: retain bold outlines, reduce heavy offset shadows. */
.discipline-card,.discipline-item,.service-card,.price-card,.project-card,.contact-card,
.department-hero,.hero-art,.button,.btn,button[type="submit"],.circle-link {
  box-shadow: 3px 3px 0 var(--flat-ink);
}
.discipline-card:hover,.service-card:hover,.project-card:hover {
  box-shadow: 4px 4px 0 var(--flat-purple);
  transform: translateY(-2px);
}
.hero-art { border-radius: 4px; }
.discipline-card,.discipline-item,.service-card,.price-card,.project-card,.contact-card,
.department-hero { border-radius: 4px; }
.button,.btn,button[type="submit"],.nav-cta,.circle-link { border-radius: 3px; }
.art-sun { box-shadow: 0 0 0 6px rgba(246,27,154,.12), 4px 4px 0 var(--flat-ink); }

/* Footer brand should remain visible without hover; use a high-contrast logo treatment. */
.footer .footer-brand { display: inline-flex; opacity: 1 !important; visibility: visible !important; }
.footer .footer-brand img {
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(0) invert(1) !important;
  mix-blend-mode: normal;
  transition: none;
}
.footer .footer-brand:hover img { opacity: 1 !important; filter: brightness(0) invert(1) !important; transform: none; }
.footer .footer-identity { opacity: 1 !important; visibility: visible !important; }
.footer .footer-identity p { color: rgba(255,255,255,.82); }

@media (max-width:760px) {
  .nav-wrap,.nav-wrap.scrolled { background: #fff !important; }
  .nav-links>a:not(.nav-cta) { color: var(--flat-ink) !important; }
  .footer .footer-brand img { max-width: 175px; }
}


/* CRAFTIVA VISUAL EXPLORATION v4 — flatter pixel/Y2K treatment + logo fixes */
:root {
  --pixel-ink: #17152f;
  --pixel-blue: #207cfc;
  --pixel-pink: #f61b9a;
  --pixel-yellow: #fddd32;
  --pixel-purple: #552ec9;
}
html { scroll-behavior: smooth; }
/* Header: distinct light surface and a small pixel-like brand plate. */
.nav-wrap, .nav-wrap.scrolled {
  background: #fffdf7 !important;
  border-bottom: 3px solid var(--pixel-ink) !important;
  box-shadow: 0 4px 0 rgba(23,21,47,.08) !important;
}
.nav-wrap:before { background: var(--pixel-pink) !important; height: 4px !important; }
.brand { position: relative; z-index: 1; }
.nav-wrap .brand {
  padding: 5px 10px;
  background: #fff;
  border: 2px solid var(--pixel-ink);
  box-shadow: 3px 3px 0 var(--pixel-yellow);
}
.nav-wrap .brand img {
  display: block; width: 174px; height: 48px; object-fit: contain;
  opacity: 1 !important; visibility: visible !important; filter: none !important;
  mix-blend-mode: normal !important;
}
.nav-links { gap: 22px; }
.nav-links > a:not(.nav-cta) { color: var(--pixel-ink) !important; font-weight: 700; }
.nav-links > a:not(.nav-cta):hover, .nav-links > a:not(.nav-cta).active {
  background: var(--pixel-yellow) !important; color: var(--pixel-ink) !important;
  outline: 2px solid var(--pixel-ink); outline-offset: 1px;
}
.nav-cta { border: 2px solid var(--pixel-ink) !important; border-radius: 2px !important;
  background: var(--pixel-pink) !important; color: #fff !important; box-shadow: 3px 3px 0 var(--pixel-ink) !important; }
/* Make the overall interface feel more like crisp 2D pixel-art packaging. */
.discipline-card, .discipline-item, .service-card, .price-card, .project-card, .contact-card,
.department-hero, .hero-art, .button, .btn, button[type=submit], .circle-link {
  border-radius: 3px !important; box-shadow: 4px 4px 0 var(--pixel-ink) !important;
}
.discipline-card:hover, .service-card:hover, .project-card:hover, .price-card:hover {
  transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--pixel-pink) !important;
}
.hero-art, .department-hero { border: 2px solid var(--pixel-ink) !important; }
.art-sun { border-radius: 4px !important; box-shadow: 0 0 0 5px var(--pixel-yellow), 4px 4px 0 var(--pixel-ink) !important; }
/* Footer logo fix: original logo lettering is dark, so do not invert it to white.
   Give it a solid light plate so it is visible immediately, without hover. */
.footer .footer-brand {
  display: inline-flex !important; width: fit-content; max-width: 100%;
  padding: 8px 10px; background: #fffdf7; border: 2px solid var(--pixel-yellow);
  box-shadow: 4px 4px 0 var(--pixel-pink); opacity: 1 !important; visibility: visible !important;
}
.footer .footer-brand img {
  display: block !important; width: min(100%, 250px) !important; height: auto !important;
  max-height: none !important; object-fit: contain; padding: 0 !important; border-radius: 0 !important;
  background: transparent !important; filter: none !important; mix-blend-mode: normal !important;
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}
.footer .footer-brand:hover img { filter: none !important; opacity: 1 !important; transform: none !important; }
.footer .footer-identity, .footer .footer-identity p { opacity: 1 !important; visibility: visible !important; }
@media (max-width:760px) {
  .nav-wrap .brand { padding: 4px 7px; }
  .nav-wrap .brand img { width: 142px; height: 42px; }
  .nav-links { gap: 12px; }
  .footer .footer-brand img { width: min(100%, 205px) !important; }
}

/* CRAFTIVA VISUAL EXPLORATION V5 — bolder arcade/Y2K direction */
:root {
  --pixel-ink: #17152f;
  --pixel-blue: #207cfc;
  --pixel-pink: #f61b9a;
  --pixel-yellow: #fddd32;
  --pixel-purple: #552ec9;
}
body {
  background-color: #fff9ef;
  background-image: radial-gradient(#207cfc24 1.25px, transparent 1.25px);
  background-size: 16px 16px;
}
.nav-wrap, .nav-wrap.scrolled { background:#fffdf7 !important; border-bottom:3px solid var(--pixel-ink) !important; }
.nav-wrap:before { background:var(--pixel-pink) !important; }
.nav-wrap .brand { border-radius: 999px !important; box-shadow: 4px 4px 0 var(--pixel-yellow) !important; }
.hero-title { text-transform: uppercase; letter-spacing: -.055em; text-shadow: 3px 3px 0 #fddd32; }
.hero-title .outlined { color:var(--pixel-pink) !important; -webkit-text-stroke:1px var(--pixel-ink); text-shadow:4px 4px 0 var(--pixel-blue) !important; }
.hero-art {
  position:relative; overflow:hidden; border:4px solid var(--pixel-ink) !important; border-radius:18px !important;
  background-color:#ffcae7 !important;
  background-image: linear-gradient(45deg,#f61b9a 25%,transparent 25%,transparent 75%,#f61b9a 75%),linear-gradient(45deg,#fddd32 25%,transparent 25%,transparent 75%,#fddd32 75%) !important;
  background-position:0 0, 8px 8px !important; background-size:16px 16px !important;
  box-shadow:10px 10px 0 var(--pixel-purple), 14px 14px 0 var(--pixel-ink) !important;
}
.hero-art:before { background:linear-gradient(135deg,#fffdf7 0%,#fffdf7 68%,#dce9ff 68%) !important; border:4px solid var(--pixel-ink); border-radius:16px !important; inset:7% !important; }
.art-type {
  z-index:2; padding: .2em .55em .28em; color:var(--pixel-pink) !important;
  background:#fffdf7; border:4px solid var(--pixel-ink); border-radius:999px !important;
  box-shadow:5px 5px 0 var(--pixel-blue), 8px 8px 0 var(--pixel-ink) !important;
  text-shadow:2px 2px 0 #fddd32 !important; transform:rotate(-3deg);
}
.art-type span { color:var(--pixel-blue) !important; }
.art-note, .art-sticker { border:3px solid var(--pixel-ink) !important; border-radius:999px !important; box-shadow:4px 4px 0 var(--pixel-ink) !important; font-weight:900; }
.art-sticker { background:var(--pixel-yellow) !important; color:var(--pixel-ink) !important; }
.discipline-card, .discipline-item, .service-card, .price-card, .project-card, .contact-card, .department-hero {
  border:3px solid var(--pixel-ink) !important; border-radius:10px !important;
  box-shadow:6px 6px 0 var(--pixel-blue) !important;
}
.discipline-card:nth-child(odd), .service-card:nth-child(odd), .project-card:nth-child(odd) { box-shadow:6px 6px 0 var(--pixel-pink) !important; }
.button, .btn, button[type=submit], .nav-cta { border:3px solid var(--pixel-ink) !important; border-radius:999px !important; box-shadow:4px 4px 0 var(--pixel-ink) !important; font-weight:900 !important; }
.button:hover, .btn:hover, button[type=submit]:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--pixel-ink) !important; }
.footer { border-top:4px solid var(--pixel-ink) !important; background:#211b4a !important; }
.footer .footer-brand { border-radius:999px !important; }
@media(max-width:760px) {
 body { background-size:12px 12px; }
 .hero-art { box-shadow:6px 6px 0 var(--pixel-purple),9px 9px 0 var(--pixel-ink) !important; }
 .art-type { border-width:3px; box-shadow:3px 3px 0 var(--pixel-blue),5px 5px 0 var(--pixel-ink) !important; }
}

/* V6 — poster/feed-inspired arcade collage, applied site-wide */
:root { --pixel-cream:#fff8dc; --pixel-lilac:#c9c5ff; }
body { background-color:#fff8dc; background-image:radial-gradient(#552ec928 1.2px,transparent 1.2px),linear-gradient(135deg,#fff8dc 0%,#fff8dc 72%,#ffe0f2 72%,#ffe0f2 100%); background-size:15px 15px,100% 100%; }
section { position:relative; }
section:nth-of-type(even) { background-color:#e9f1ff; }
section:nth-of-type(odd) { background-color:transparent; }
section h2, .section-title, .department-title { text-transform:uppercase; letter-spacing:-.035em; text-shadow:2px 2px 0 var(--pixel-yellow); }
.nav-wrap, .nav-wrap.scrolled { background:#fffdf7 !important; }
.nav-links a { font-weight:800; text-shadow:1px 1px 0 #fddd32; }
.nav-wrap .brand { border:2px solid var(--pixel-ink) !important; background:#fff !important; box-shadow:4px 4px 0 var(--pixel-pink),7px 7px 0 var(--pixel-yellow) !important; }
/* Keep the central “ideas in motion” badge round/pill-shaped, not a box. */
.art-type { border-radius:999px !important; padding:.24em .7em .3em !important; }
.hero-art { border-radius:46% 46% 24px 24px !important; background-color:#ffcae7 !important; }
.hero-art:before { border-radius:44% 44% 14px 14px !important; }
.discipline-card, .discipline-item, .service-card, .price-card, .project-card, .contact-card, .department-hero { border-radius:5px !important; background:#fffdf7 !important; }
.discipline-card:nth-child(3n), .service-card:nth-child(3n), .project-card:nth-child(3n) { background:#fff0f8 !important; box-shadow:6px 6px 0 var(--pixel-yellow) !important; }
.price-card { background:#fffdf7 !important; }
.price-card h3, .price-card .price { color:var(--pixel-purple) !important; }
img { image-rendering:auto; }
/* Small pixel corner accents without affecting click targets */
.discipline-card, .service-card, .project-card, .price-card, .contact-card { outline:1px solid #17152f12; }
.footer { background-color:#211b4a !important; background-image:radial-gradient(#fddd3240 1.2px,transparent 1.2px) !important; background-size:14px 14px !important; }
.footer .footer-brand { background:#fffdf7 !important; border:3px solid var(--pixel-ink) !important; box-shadow:5px 5px 0 var(--pixel-pink),9px 9px 0 var(--pixel-yellow) !important; }
.footer a:hover { color:var(--pixel-yellow) !important; }
@media(max-width:760px) {
 body { background-size:12px 12px,100% 100%; }
 section:nth-of-type(even) { background-color:#e9f1ff; }
 .hero-art { border-radius:40% 40% 18px 18px !important; }
 .hero-art:before { border-radius:38% 38% 12px 12px !important; }
}

/* V7 — visual balance pass: preserve bold arcade art, improve contrast and rhythm */
:root {
  --pixel-ink:#17152f;
  --pixel-blue:#207cfc;
  --pixel-pink:#f61b9a;
  --pixel-yellow:#fddd32;
  --pixel-purple:#552ec9;
  --pixel-paper:#fff9ed;
  --pixel-pale-blue:#e8f0ff;
  --pixel-pale-pink:#ffe7f4;
}
body { color:var(--pixel-ink); background-color:var(--pixel-paper); }
/* Alternate section surfaces more deliberately instead of stacking loud colors. */
main > section { color:var(--pixel-ink); }
main > section:nth-of-type(even) { background-color:var(--pixel-pale-blue); }
main > section:nth-of-type(odd) { background-color:transparent; }
main > section h1, main > section h2, main > section h3 { color:var(--pixel-ink); }
main > section p { color:#39364f; }
.eyebrow { color:var(--pixel-purple) !important; }
/* Round badge remains centered WITH its label; keep the central panel occupied. */
.hero-art { border-radius:46% 46% 24px 24px !important; }
.hero-art:before { border-radius:44% 44% 14px 14px !important; }
.art-type {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-3deg) !important;
  display:block; width:max-content; max-width:74%; text-align:center;
  border-radius:999px !important; padding:.28em .72em .34em !important;
  color:var(--pixel-pink) !important; background:var(--pixel-paper) !important;
  border:4px solid var(--pixel-ink) !important;
  box-shadow:5px 5px 0 var(--pixel-blue),8px 8px 0 var(--pixel-ink) !important;
  z-index:3;
}
.art-type span { color:var(--pixel-blue) !important; }
/* ABOUT: strong visual panels, but body copy always on light, high-contrast surfaces. */
.about-page .about-hero { background:transparent !important; }
.about-page .about-hero h1 { color:var(--pixel-ink) !important; text-shadow:3px 3px 0 var(--pixel-yellow); }
.about-page .about-hero h1 em { color:var(--pixel-pink) !important; -webkit-text-stroke:0 !important; text-shadow:2px 2px 0 var(--pixel-blue) !important; }
.about-hero .page-hero-bottom p { color:#39364f !important; }
.about-hero .page-hero-bottom>span { color:var(--pixel-purple) !important; }
.about-hero-art { background:var(--pixel-blue) !important; border:4px solid var(--pixel-ink); border-radius:8px !important; box-shadow:8px 8px 0 var(--pixel-pink) !important; }
.about-hero-art:before { background:radial-gradient(circle at 80% 30%,#fddd32 0 8%,transparent 8.5%),linear-gradient(135deg,#207cfc 0 48%,#552ec9 48% 70%,#f61b9a 70%) !important; opacity:1; }
.about-hero-art:after { border-color:#fff9ed66; box-shadow:0 0 0 28px #fff9ed22,0 0 0 58px #fff9ed16,0 0 0 90px #fff9ed0c; }
.art-word { color:var(--pixel-paper) !important; text-shadow:4px 4px 0 var(--pixel-ink),7px 7px 0 var(--pixel-pink) !important; }
.art-label { color:var(--pixel-ink) !important; background:var(--pixel-yellow) !important; border:3px solid var(--pixel-ink); padding:8px 10px; }
.about-manifesto { background:var(--pixel-yellow) !important; border:3px solid var(--pixel-ink); box-shadow:7px 7px 0 var(--pixel-ink); padding:clamp(24px,4vw,56px) !important; }
.about-manifesto .eyebrow,.about-manifesto h2,.about-manifesto p,.about-manifesto .manifesto-index { color:var(--pixel-ink) !important; }
.about-manifesto h2 em { color:var(--pixel-purple) !important; }
.about-manifesto .manifesto-copy p { color:#29253d !important; }
.about-disciplines { background:var(--pixel-pale-blue) !important; padding:clamp(24px,4vw,48px) !important; border:3px solid var(--pixel-ink); box-shadow:7px 7px 0 var(--pixel-blue); }
.about-disciplines .discipline-heading > p { color:#39364f !important; }
.about-disciplines .discipline-card { background:var(--pixel-paper) !important; }
.about-process,.about-quote { background:var(--pixel-pale-pink) !important; padding:clamp(24px,4vw,48px) !important; border:3px solid var(--pixel-ink); }
.about-process p,.about-quote p,.about-quote blockquote { color:#29253d !important; }
.about-endcap { background:var(--pixel-purple) !important; padding:clamp(24px,4vw,48px) !important; border:3px solid var(--pixel-ink); box-shadow:7px 7px 0 var(--pixel-yellow); }
.about-endcap h2,.about-endcap p,.about-endcap a { color:#fff !important; }
/* CONTACT / DISKUSI PROYEK: avoid neon-on-neon and ensure readable text. */
.contact-page,.contact-main { color:var(--pixel-ink); }
.contact-hero { background:var(--pixel-pale-blue) !important; border:3px solid var(--pixel-ink); box-shadow:7px 7px 0 var(--pixel-blue); padding:clamp(24px,4vw,52px) !important; }
.contact-hero h1 { color:var(--pixel-ink) !important; text-shadow:2px 2px 0 var(--pixel-yellow); }
.contact-hero h1 em { color:var(--pixel-pink) !important; -webkit-text-stroke:0 !important; text-shadow:2px 2px 0 var(--pixel-blue) !important; }
.contact-hero > p:last-child,.contact-hero p { color:#39364f !important; }
.contact-grid { gap:clamp(20px,4vw,42px) !important; align-items:stretch; }
.contact-note { background:var(--pixel-yellow) !important; color:var(--pixel-ink) !important; border:3px solid var(--pixel-ink); box-shadow:6px 6px 0 var(--pixel-pink); padding:clamp(22px,3vw,38px) !important; }
.contact-note .eyebrow,.contact-note h2,.contact-note p { color:var(--pixel-ink) !important; }
.contact-note h2 { text-shadow:none !important; }
.contact-note p { line-height:1.7; }
.contact-links { background:var(--pixel-paper) !important; border:3px solid var(--pixel-ink); box-shadow:6px 6px 0 var(--pixel-blue); padding:12px !important; }
.contact-links a,.contact-links a:first-child { background:var(--pixel-paper) !important; color:var(--pixel-ink) !important; border-bottom:2px solid #17152f20 !important; }
.contact-links a span,.contact-links a b,.contact-links a i { color:var(--pixel-ink) !important; }
.contact-links a:hover { background:var(--pixel-pale-pink) !important; }
.contact-placeholder { background:var(--pixel-pale-blue) !important; border:2px dashed var(--pixel-blue); color:var(--pixel-ink) !important; padding:16px 20px !important; }
.contact-placeholder span { color:var(--pixel-purple) !important; }
/* Other site-wide cards: reduce color clashes, keep the arcade outline/shadow signature. */
.discipline-card,.discipline-item,.service-card,.price-card,.project-card,.contact-card { color:var(--pixel-ink) !important; }
.discipline-card p,.discipline-item p,.service-card p,.price-card p,.project-card p,.contact-card p { color:#39364f !important; }
.price-card .price,.price-card h3 { color:var(--pixel-purple) !important; }
.department-hero { background:var(--pixel-pale-blue) !important; }
.department-hero h1,.department-hero p { color:var(--pixel-ink) !important; }
.footer { color:#fff9ed !important; }
.footer p,.footer a,.footer .footer-heading { color:#fff9ed; }
@media(max-width:720px) {
 .about-manifesto,.about-disciplines,.about-process,.about-quote,.about-endcap { padding:22px !important; }
 .about-hero-art { min-height:190px; }
 .contact-note,.contact-links { padding:20px !important; }
 .art-type { max-width:68%; font-size:clamp(14px,4vw,22px); }
}

/* PRICELIST & COMPANY PROFILE CONTENT UPDATE */
.primary-services{padding:clamp(54px,8vw,110px) 0;border-top:1px solid rgba(23,21,43,.18)}
.primary-services-head{max-width:720px;margin-bottom:30px}.primary-services-head h2,.core-values h2,.vision-mission h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,4.5vw,4.3rem);line-height:.98;letter-spacing:-.055em;margin:14px 0}.primary-services-head h2 em,.vision-mission h2 em,.core-values h2 em{font-style:normal;color:#552ec9}.primary-services-head>p:last-child{max-width:610px;line-height:1.7;color:#4d4a60}
.primary-services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.primary-service-card{position:relative;min-height:330px;padding:clamp(22px,4vw,42px);border:2px solid #17152b;box-shadow:7px 7px 0 #17152b;text-decoration:none;color:#17152b;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;transition:transform .2s,box-shadow .2s}.primary-service-card:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #17152b}.primary-game{background:#f61b9a}.primary-web{background:#fddd32}.primary-label,.price-feature article>span{font:500 .72rem 'DM Mono',monospace;letter-spacing:.08em}.primary-icon{align-self:flex-end;font:800 clamp(1.6rem,4vw,3rem) 'Space Grotesk',sans-serif;text-align:center;line-height:.9;border:2px solid #17152b;border-radius:50%;width:104px;height:104px;display:grid;place-content:center;transform:rotate(8deg);margin:14px 0}.primary-service-card h2{font:700 clamp(1.7rem,3vw,2.7rem) 'Space Grotesk',sans-serif;letter-spacing:-.04em;margin:10px 0}.primary-service-card p{max-width:430px;line-height:1.65;margin:0 0 22px}.primary-service-card strong{margin-top:auto;font:700 1rem 'DM Mono',monospace}.primary-service-card strong i{font-style:normal;margin-left:12px}.primary-footnote{font-size:.9rem;line-height:1.6;margin-top:28px;color:#565267}
.price-page{padding-bottom:70px}.price-feature{padding:34px 0 48px}.price-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.price-feature article{padding:28px;border:2px solid #17152b;background:#fddd32;box-shadow:6px 6px 0 #17152b}.price-feature article+article{background:#b9a8ff}.price-feature h2{font:700 clamp(1.5rem,3vw,2.3rem) 'Space Grotesk',sans-serif;margin:18px 0 10px}.price-feature strong{font:700 1.05rem 'DM Mono',monospace}.price-feature p{line-height:1.65}.price-feature article a{font-weight:800;color:#17152b}.price-note{font-size:.88rem;line-height:1.7;color:#5b5769;background:#f2efff;padding:16px 18px;border-left:4px solid #552ec9}.price-jump{position:sticky;top:78px;z-index:5;display:flex;flex-wrap:wrap;gap:8px;padding:12px;margin:8px 0 42px;background:rgba(255,255,255,.94);border:1px solid #dedbe8;backdrop-filter:blur(12px)}.price-jump a{padding:9px 13px;background:#fddd32;border:1px solid #17152b;color:#17152b;text-decoration:none;font:500 .78rem 'DM Mono',monospace}.price-jump a:hover{background:#f61b9a}.price-dept{padding:clamp(36px,6vw,72px) 0;border-top:2px solid #17152b;scroll-margin-top:150px}.price-dept>header{max-width:780px;margin-bottom:32px}.price-dept>header h2{font:700 clamp(2rem,4.5vw,4rem)/1 'Space Grotesk',sans-serif;letter-spacing:-.055em;margin:14px 0}.price-dept>header h2 em{font-style:normal;color:#552ec9}.price-dept>header>p:last-child{line-height:1.75;color:#514e62}.price-subgroup{margin:36px 0}.price-subgroup>h3{font:700 clamp(1.3rem,2.5vw,2rem) 'Space Grotesk',sans-serif;margin:0 0 18px}.price-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}.price-cards-four{grid-template-columns:repeat(4,minmax(0,1fr))}.price-package{border:2px solid #17152b;padding:22px;background:#fff;box-shadow:4px 4px 0 #17152b;display:flex;flex-direction:column;min-width:0}.price-package:nth-child(3n+2){background:#f7f3ff}.price-package.recommended{background:#fddd32}.price-package>span{font:500 .68rem 'DM Mono',monospace;letter-spacing:.09em;color:#514b67}.price-package h4{font:700 1.2rem 'Space Grotesk',sans-serif;margin:12px 0}.price-package>strong{font:700 clamp(1rem,1.6vw,1.35rem) 'DM Mono',monospace;line-height:1.4;overflow-wrap:anywhere}.price-package ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}.price-package li{font-size:.88rem;line-height:1.5;padding-left:18px;position:relative}.price-package li:before{content:'▸';position:absolute;left:0;color:#552ec9;font-weight:800}.price-table-wrap{overflow-x:auto;border:2px solid #17152b;box-shadow:5px 5px 0 #17152b}.price-table{width:100%;border-collapse:collapse;background:white;min-width:680px}.price-table th,.price-table td{text-align:left;padding:16px;border-bottom:1px solid #dedbe8;vertical-align:top;line-height:1.55}.price-table th{background:#17152b;color:#fff;font:500 .75rem 'DM Mono',monospace;letter-spacing:.05em}.price-table td:first-child{font-weight:800}.price-table td:nth-child(3){font-weight:800;white-space:nowrap}.price-table tr:nth-child(even) td{background:#f7f3ff}.price-bottom-cta{padding:clamp(28px,5vw,55px);margin:48px 0;background:#f61b9a;border:2px solid #17152b;box-shadow:7px 7px 0 #17152b}.price-bottom-cta h2{font:700 clamp(2rem,4.5vw,4rem)/1 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:16px 0}.price-bottom-cta h2 em{font-style:normal}.price-bottom-cta p{max-width:620px;line-height:1.7}.contact-direct{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:30px 0}.contact-direct>div{padding:20px;border:1px solid #d9d5e4;background:#fff;display:flex;flex-direction:column;gap:10px;overflow-wrap:anywhere}.contact-direct span{font:500 .7rem 'DM Mono',monospace;letter-spacing:.06em}.contact-direct strong,.contact-direct a{font-size:.95rem;color:#17152b}
.vision-mission{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0 60px}.vision-mission>div{padding:clamp(24px,4vw,42px);border:2px solid #17152b;box-shadow:5px 5px 0 #17152b}.vision-card{background:#fddd32}.mission-card{background:#fff}.vision-mission p,.vision-mission li{line-height:1.7}.mission-card ul{padding-left:20px;display:grid;gap:10px}.core-values{padding:40px 0 70px}.values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}.values-grid article{padding:22px;border:1px solid #d7d2e4;background:#fff}.values-grid article>b{display:grid;place-items:center;width:44px;height:44px;background:#f61b9a;border:2px solid #17152b;border-radius:50%;font:800 1.3rem 'Space Grotesk',sans-serif}.values-grid article h3{margin:15px 0 8px;font:700 1.05rem 'Space Grotesk',sans-serif}.values-grid article p{line-height:1.6;font-size:.9rem;margin-bottom:0}
@media(max-width:850px){.price-cards-four{grid-template-columns:repeat(2,minmax(0,1fr))}.price-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.price-jump{top:68px}}
@media(max-width:600px){.primary-services-grid,.price-feature-grid,.vision-mission,.contact-direct{grid-template-columns:1fr}.price-cards,.price-cards-four{grid-template-columns:1fr}.primary-service-card{min-height:300px}.price-jump{position:static}.price-jump a{flex:1;text-align:center}.price-package{padding:20px}.price-table th,.price-table td{padding:12px}}
.dkv-service-categories{padding:26px 0 42px}.dkv-category-intro{max-width:720px;margin-bottom:24px}.dkv-category-intro h2,.organization-note h2{font:700 clamp(2rem,4.3vw,3.8rem)/1 'Space Grotesk',sans-serif;letter-spacing:-.05em;margin:14px 0}.dkv-category-intro h2 em,.organization-note h2 em{font-style:normal;color:#552ec9}.dkv-category-intro p:last-child,.organization-note>p:not(.eyebrow){line-height:1.7;max-width:680px}.dkv-category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.dkv-category-grid a{display:flex;flex-direction:column;align-items:flex-start;padding:24px;min-height:230px;background:#fddd32;color:#17152b;text-decoration:none;border:2px solid #17152b;box-shadow:5px 5px 0 #17152b}.dkv-category-grid a:nth-child(2){background:#f61b9a}.dkv-category-grid a:nth-child(3){background:#c5b7ff}.dkv-category-grid a span,.organization-grid b{font:500 .7rem 'DM Mono',monospace;letter-spacing:.06em}.dkv-category-grid h3{font:700 1.35rem 'Space Grotesk',sans-serif;margin:22px 0 8px}.dkv-category-grid p{line-height:1.6;font-size:.9rem}.dkv-category-grid strong{margin-top:auto}.organization-note{padding:44px 0;border-top:2px solid #17152b}.organization-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px}.organization-grid article{padding:18px;background:#fff;border:1px solid #d9d5e4;display:flex;flex-direction:column;gap:12px}.organization-grid span{font-size:.9rem;line-height:1.5}@media(max-width:700px){.dkv-category-grid{grid-template-columns:1fr}.organization-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* In-page service pricing cards */
.package-description{font-size:.88rem;line-height:1.55;opacity:.82;margin:.55rem 0 1rem;max-width:38ch}
.price-dept{scroll-margin-top:110px}
.price-dept .price-subgroup{margin-top:2rem}
.price-dept .price-package{height:100%}
@media(max-width:720px){.price-dept .price-cards{grid-template-columns:1fr}.price-dept .price-table-wrap{overflow-x:auto}}


/* Service-page visual refinement: stronger hierarchy, consistent rhythm, and richer project presentation. */
.department-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(42px,7vw,92px) clamp(22px,5vw,64px);margin:22px 0 64px;background:linear-gradient(125deg,#f8f4ff 0%,#fff 52%,#ffe4f2 100%);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);}
.department-hero:after{content:"✳";position:absolute;z-index:-1;right:clamp(12px,5vw,72px);top:8px;font-size:clamp(100px,20vw,250px);line-height:1;color:rgba(246,27,154,.10);transform:rotate(-12deg);pointer-events:none;}
.department-hero h1{max-width:900px;font-size:clamp(3rem,8vw,7.2rem);line-height:.92;letter-spacing:-.075em;text-wrap:balance;}
.department-intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:clamp(24px,5vw,70px);align-items:end;margin-top:28px;}
.department-intro>p{max-width:650px;font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.85;}
.department-quick{padding:22px;background:#fddd32;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);}
.department-quick>span{display:block;margin-bottom:14px;font:600 .72rem 'DM Mono',monospace;letter-spacing:.12em;}
.service-tags{display:flex;flex-wrap:wrap;gap:8px;}
.service-tags span{padding:8px 11px;background:#fff;border:1px solid var(--ink);font-size:.85rem;font-weight:700;}
.department-showcase{margin:70px 0 78px;}
.showcase-heading{display:grid;grid-template-columns:minmax(0,.85fr) minmax(260px,.65fr);gap:32px;align-items:end;margin-bottom:28px;}
.showcase-heading h2{font-size:clamp(2.4rem,5vw,4.7rem);line-height:.98;letter-spacing:-.065em;}
.showcase-heading>p{max-width:510px;line-height:1.8;padding:18px 20px;border-left:4px solid #f61b9a;background:#f7f3ff;}
.department-project{padding:clamp(12px,2vw,24px);background:#f4f0ff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);}
.department-project img{transition:transform .35s ease,filter .35s ease;}
.department-project article{overflow:hidden;}
.department-project article:hover img{transform:scale(1.025);filter:saturate(1.08);}
.department-process{margin:74px 0;padding:clamp(26px,5vw,54px);background:#17152b;color:#fff;border:2px solid #17152b;box-shadow:7px 7px 0 #b9a8ff;}
.department-process h2{font-size:clamp(2.5rem,5vw,4.5rem);line-height:.98;letter-spacing:-.065em;}
.department-process .process-points article{border-color:rgba(255,255,255,.25);}
.department-process .process-points p{color:#e4e0f1;line-height:1.75;}
.department-process .process-points article>span{color:#fddd32;}
.price-dept{margin-top:72px;padding:clamp(28px,5vw,60px);background:#fbf9ff;border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);}
.price-dept>header{max-width:860px;}
.price-dept>header .eyebrow{display:inline-block;padding:7px 10px;background:#fddd32;border:1px solid var(--ink);}
.price-package{transition:transform .2s ease,box-shadow .2s ease;}
.price-package:hover{transform:translate(-2px,-3px);box-shadow:7px 7px 0 var(--ink);}
.price-package .package-description{min-height:3.2em;}
.price-bottom-cta,.service-cta{margin-top:70px;box-shadow:7px 7px 0 var(--ink);}
@media(max-width:760px){.department-intro,.showcase-heading{grid-template-columns:1fr}.department-hero{margin:14px 0 48px;padding:32px 22px;box-shadow:5px 5px 0 var(--ink)}.department-showcase{margin:48px 0 56px}.department-process{margin:52px 0}.price-dept{margin-top:48px;padding:24px 18px;box-shadow:5px 5px 0 var(--ink)}.price-package .package-description{min-height:0}}
@media(prefers-reduced-motion:reduce){.department-project img,.price-package{transition:none}.department-project article:hover img,.price-package:hover{transform:none}}
/* Contact details now flow cleanly after the repeated Instagram row was removed. */
.contact-direct{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:600px){.contact-direct{grid-template-columns:1fr}}


/* Per-service art direction: each service has its own visual accent while keeping Craftiva's shared identity. */
body.service-web { --service-accent:#fddd32; --service-accent-soft:#fff8d7; --service-ink:#17152b; }
body.service-game { --service-accent:#f61b9a; --service-accent-soft:#ffe3f3; --service-ink:#17152b; }
body.service-design { --service-accent:#b9a8ff; --service-accent-soft:#f0ebff; --service-ink:#17152b; }
body.service-video { --service-accent:#ff8b5e; --service-accent-soft:#fff0e9; --service-ink:#17152b; }
body.service-animation { --service-accent:#80e2cf; --service-accent-soft:#e6fbf6; --service-ink:#17152b; }
body.service-network { --service-accent:#8bc8ff; --service-accent-soft:#eaf5ff; --service-ink:#17152b; }

body[class*="service-"] .department-hero {
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--service-accent-soft) !important;
  border:2px solid var(--service-ink); box-shadow:9px 9px 0 var(--service-accent) !important;
}
body[class*="service-"] .department-hero::after {
  content:""; position:absolute; z-index:-1; width:clamp(110px,19vw,230px); aspect-ratio:1;
  right:-4%; top:12%; border:2px solid var(--service-ink); border-radius:50%;
  background:var(--service-accent); opacity:.65; pointer-events:none;
}
body.service-game .department-hero::after { border-radius:18%; transform:rotate(18deg); }
body.service-design .department-hero::after { border-radius:0; transform:rotate(45deg) scale(.78); }
body.service-video .department-hero::after { width:clamp(150px,24vw,280px); aspect-ratio:16/10; border-radius:18px; transform:rotate(-9deg); }
body.service-animation .department-hero::after { width:clamp(100px,16vw,190px); border-radius:30% 70% 65% 35%; }
body.service-network .department-hero::after { border-radius:0; background:repeating-linear-gradient(90deg,var(--service-accent) 0 12px,transparent 12px 22px); }
body[class*="service-"] .department-hero .eyebrow,
body[class*="service-"] .department-showcase .eyebrow,
body[class*="service-"] .department-process .eyebrow { color:var(--service-ink) !important; }
body[class*="service-"] .department-hero h1 { max-width:900px; position:relative; z-index:1; }
body[class*="service-"] .department-hero h1 em { text-decoration:underline; text-decoration-color:var(--service-accent); text-decoration-thickness:.12em; text-underline-offset:.12em; }
body[class*="service-"] .department-showcase { padding:clamp(22px,4vw,42px); background:var(--service-accent-soft); border:2px solid var(--service-ink); box-shadow:7px 7px 0 var(--service-accent); }
body[class*="service-"] .showcase-heading { align-items:end; gap:24px; }
body[class*="service-"] .project-feature,
body[class*="service-"] .project-card { border:2px solid var(--service-ink); box-shadow:5px 5px 0 var(--service-accent) !important; }
body[class*="service-"] .project-meta { border-top:2px solid var(--service-ink); }
body[class*="service-"] .department-process { padding:clamp(22px,4vw,42px); border:2px dashed var(--service-ink); background:var(--service-accent-soft); }
body[class*="service-"] .department-process .process-step,
body[class*="service-"] .department-process article { border-top:4px solid var(--service-accent); }
body[class*="service-"] .price-dept { background:var(--service-accent-soft) !important; border:2px solid var(--service-ink); box-shadow:8px 8px 0 var(--service-accent) !important; }
body[class*="service-"] .price-dept>header .eyebrow { background:var(--service-accent) !important; color:var(--service-ink) !important; }
body[class*="service-"] .price-package { border:2px solid var(--service-ink); box-shadow:4px 4px 0 var(--service-accent) !important; }
body[class*="service-"] .price-package.recommended { background:var(--service-accent) !important; }
body[class*="service-"] .price-package li:before { color:var(--service-ink); }
body[class*="service-"] .department-hero,
body[class*="service-"] .department-showcase,
body[class*="service-"] .department-process,
body[class*="service-"] .price-dept { border-radius:4px !important; }
@media(max-width:760px) {
 body[class*="service-"] .department-hero::after { right:-12%; top:22%; opacity:.25; }
 body[class*="service-"] .department-showcase { padding:22px 16px; }
 body[class*="service-"] .department-process { padding:22px 16px; }
}


/* Craftiva service pages: contrast, spacing and distinctive motion */
body[class*="service-"] {
  color: #17152b;
}
body[class*="service-"] .department-hero,
body[class*="service-"] .department-showcase,
body[class*="service-"] .department-process,
body[class*="service-"] .price-dept {
  color: #17152b !important;
}
body[class*="service-"] .department-hero p,
body[class*="service-"] .department-showcase p,
body[class*="service-"] .department-process p,
body[class*="service-"] .price-dept p,
body[class*="service-"] .department-intro p,
body[class*="service-"] .department-quick,
body[class*="service-"] .department-process li {
  color: #39364d !important;
  opacity: 1 !important;
}
body[class*="service-"] .department-hero .eyebrow,
body[class*="service-"] .department-showcase .eyebrow,
body[class*="service-"] .department-process .eyebrow,
body[class*="service-"] .price-dept .eyebrow {
  color: #17152b !important;
  opacity: 1 !important;
}
body[class*="service-"] .department-process {
  display: grid;
  grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr);
  gap: clamp(28px,5vw,76px);
  align-items: start;
  margin: 32px 0 64px;
  padding: clamp(24px,4vw,46px) !important;
  background: #fff !important;
  border: 2px solid #17152b !important;
  box-shadow: 8px 8px 0 var(--service-accent);
}
body[class*="service-"] .department-process h2 {
  color: #17152b !important;
  line-height: 1.02;
  margin-top: 8px;
}
body[class*="service-"] .department-process h2 em {
  color: #39364d !important;
  text-decoration: underline;
  text-decoration-color: var(--service-accent);
  text-decoration-thickness: .12em;
  text-underline-offset: .14em;
}
body[class*="service-"] .process-points {
  min-width: 0;
}
body[class*="service-"] .process-points article {
  grid-template-columns: 42px minmax(0,1fr);
  gap: 14px;
  padding: 22px 0 !important;
  border-top: 0 !important;
  border-bottom: 1px solid #d8d5e1;
  position: relative;
}
body[class*="service-"] .process-points article:first-child { padding-top: 0 !important; }
body[class*="service-"] .process-points article:last-child { border-bottom: 0; padding-bottom: 0 !important; }
body[class*="service-"] .process-points article > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--service-accent);
  color: #17152b !important;
  border: 2px solid #17152b;
  font-weight: 700;
  opacity: 1;
}
body[class*="service-"] .process-points h3 {
  color: #17152b !important;
  font-size: clamp(16px,1.5vw,19px);
  line-height: 1.35;
  margin: 2px 0 8px;
}
body[class*="service-"] .process-points p {
  color: #514e62 !important;
  opacity: 1 !important;
  font-size: 14px;
  line-height: 1.75;
  max-width: 54ch;
}
/* A different non-emoji geometric mark for each service */
body[class*="service-"] .department-process h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 8px;
  margin-bottom: 18px;
  background: var(--service-accent);
  border: 2px solid #17152b;
}
body.service-web .department-process h2::before { width: 44px; height: 24px; background: repeating-linear-gradient(90deg,var(--service-accent) 0 8px,#fff 8px 12px); }
body.service-game .department-process h2::before { width: 28px; height: 28px; transform: rotate(45deg); margin: 0 0 18px 7px; }
body.service-design .department-process h2::before { width: 30px; height: 30px; border-radius: 50%; box-shadow: 12px 0 0 -3px var(--service-accent), 12px 0 0 -1px #17152b; }
body.service-video .department-process h2::before { width: 34px; height: 24px; border-radius: 4px; background: linear-gradient(135deg,var(--service-accent) 0 45%,#fff 45% 55%,var(--service-accent) 55%); }
body.service-animation .department-process h2::before { width: 28px; height: 28px; border-radius: 35% 65% 60% 40%; }
body.service-network .department-process h2::before { width: 34px; height: 28px; background: repeating-linear-gradient(0deg,var(--service-accent) 0 5px,#fff 5px 8px); }
body[class*="service-"] .department-hero::after {
  animation: service-float 7s ease-in-out infinite;
}
body.service-game .department-hero::after { animation-duration: 5s; }
body.service-design .department-hero::after { animation-duration: 8s; }
body[class*="service-"] .price-package,
body[class*="service-"] .project-card,
body[class*="service-"] .project-feature {
  transition: transform .22s ease, box-shadow .22s ease;
}
body[class*="service-"] .price-package:hover,
body[class*="service-"] .project-card:hover,
body[class*="service-"] .project-feature:hover {
  transform: translate(-2px,-3px);
  box-shadow: 7px 7px 0 var(--service-accent) !important;
}
@keyframes service-float {
  0%,100% { translate: 0 0; }
  50% { translate: -8px 10px; }
}
@media (max-width:760px) {
  body[class*="service-"] .department-process {
    grid-template-columns: 1fr;
    gap: 26px;
    margin: 26px 0 48px;
    box-shadow: 5px 5px 0 var(--service-accent);
  }
  body[class*="service-"] .department-process h2 { font-size: clamp(32px,8vw,54px); }
  body[class*="service-"] .process-points p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body[class*="service-"] .department-hero::after { animation: none !important; }
  body[class*="service-"] .price-package,
  body[class*="service-"] .project-card,
  body[class*="service-"] .project-feature { transition: none !important; }
}


/* Final spacing fix: keep service pagination clear of the pricing panel shadow.
   The panel's pixel-style shadow extends below its border; reserve real space
   before the previous/next links on every service detail page. */
body[class*="service-"] .price-dept {
  margin-bottom: 76px !important;
  position: relative;
  z-index: 1;
}
body[class*="service-"] .department-pagination {
  position: relative;
  z-index: 2;
  clear: both;
  margin-top: 18px !important;
  padding-top: 8px !important;
}
@media (max-width: 760px) {
  body[class*="service-"] .price-dept { margin-bottom: 52px !important; }
  body[class*="service-"] .department-pagination { margin-top: 12px !important; }
}


/* Distinctive service identity: each hero gets a small visual world tied to its actual craft. */
body[class*="service-"] .department-hero {
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(260px,.92fr);
  column-gap:clamp(26px,4.5vw,72px);
  align-items:center;
}
body[class*="service-"] .department-hero > .back-services { grid-column:1 / -1; }
body[class*="service-"] .department-hero > .eyebrow,
body[class*="service-"] .department-hero > h1,
body[class*="service-"] .department-hero > .department-intro { grid-column:1; }
body[class*="service-"] .department-hero > .service-artwork {
  grid-column:2; grid-row:2 / span 3; align-self:center; justify-self:stretch;
  min-width:0; width:100%; min-height:300px; position:relative; isolation:isolate;
  display:grid; place-items:center; margin:4px 0 0; color:#17152b;
}
body[class*="service-"] .department-hero::after { content:none !important; }
.service-artwork * { box-sizing:border-box; }
.service-artwork::before { content:""; position:absolute; inset:9% 5%; border:1px dashed currentColor; opacity:.3; transform:rotate(-4deg); pointer-events:none; }
.service-artwork::after { content:""; position:absolute; width:12px;height:12px;right:5%;top:7%;background:var(--service-accent);border:2px solid #17152b;animation:craftiva-art-bob 4.5s ease-in-out infinite; }

/* Website: browser mock-up and real page hierarchy. */
.web-art .art-window { width:91%; background:#fffdf7; border:2px solid #17152b; box-shadow:8px 8px 0 #fddd32; transform:rotate(-2deg); animation:craftiva-art-float 6s ease-in-out infinite; }
.art-window-bar { height:32px; display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:2px solid #17152b;background:#fddd32; }
.art-window-bar i { width:7px;height:7px;border:1.5px solid #17152b;border-radius:50%; }
.art-window-bar span { margin-left:auto;font:500 9px 'DM Mono',monospace; }
.web-art-layout { display:grid;grid-template-columns:35% 65%;min-height:215px; }
.web-art-nav { padding:13px 9px;background:#e7f0ff;border-right:1px solid #17152b;display:flex;flex-direction:column;gap:13px; }
.web-art-nav b { font:800 10px 'Space Grotesk',sans-serif; }
.web-art-nav span { width:72%;height:4px;background:#c3cbe0; }
.web-art-nav small { margin-top:auto;font:700 7px 'DM Mono',monospace;background:#f61b9a;padding:6px 4px; }
.web-art-content { padding:17px 12px 10px;position:relative;overflow:hidden; }
.web-art-content>small { font:500 7px 'DM Mono',monospace;letter-spacing:.08em; }
.web-art-content>b { display:block;font:800 clamp(23px,3vw,37px)/.9 'Space Grotesk',sans-serif;letter-spacing:-.08em;margin:10px 0; }
.web-art-content>b em { color:#f61b9a;font-style:normal; }
.web-art-button { display:block;width:55px;height:13px;background:#fddd32;border:1.5px solid #17152b; }
.web-art-image { position:absolute;width:38%;height:44%;right:9px;bottom:9px;background:#b9a8ff;border:1.5px solid #17152b; }
.web-art-image i { position:absolute;display:block;background:#fffdf7;border:1px solid #17152b; }
.web-art-image i:nth-child(1){width:50%;height:35%;top:15%;left:13%;}.web-art-image i:nth-child(2){width:35%;height:35%;right:10%;top:36%;background:#80e2cf;}.web-art-image i:nth-child(3){width:58%;height:5px;left:12%;bottom:13%;}
.art-sticker { position:absolute;right:0;top:13%;padding:10px 12px;background:#f61b9a;border:2px solid #17152b;font:500 9px 'DM Mono',monospace;transform:rotate(7deg);box-shadow:3px 3px 0 #17152b; }
.art-sticker strong { font-size:13px; }.art-cross { position:absolute;left:1%;bottom:10%;font:700 34px 'Space Grotesk';color:#f61b9a; }

/* Game: pixel scene, player, HUD and controller buttons. */
.game-screen { width:88%;padding:10px;background:#211d43;border:3px solid #17152b;box-shadow:8px 8px 0 #f61b9a;transform:rotate(2deg);animation:craftiva-art-float 5s ease-in-out infinite; }
.game-topline,.game-hud { display:flex;justify-content:space-between;align-items:center;color:#fffdf7;font:8px 'DM Mono',monospace;padding:3px 2px 8px; }
.game-topline span:last-child { color:#fddd32;letter-spacing:3px; }
.game-scene { position:relative;height:180px;overflow:hidden;background:linear-gradient(#8bc8ff 0 62%,#fddd32 62% 100%);border:2px solid #fffdf7;image-rendering:pixelated; }
.game-sun { position:absolute;width:40px;height:40px;right:17%;top:12%;background:#fddd32;box-shadow:0 0 0 5px #fddd3240; }
.game-platform { position:absolute;height:12px;background:#4b338c;border-top:4px solid #80e2cf; }.platform-a{width:43%;left:0;bottom:28%;}.platform-b{width:37%;right:0;bottom:12%;}
.pixel-player { position:absolute;width:30px;height:42px;left:32%;bottom:28%;animation:craftiva-pixel-hop 2.8s ease-in-out infinite; }
.pixel-player i { position:absolute;width:22px;height:22px;left:4px;top:0;background:#f61b9a;border:3px solid #17152b;box-shadow:0 -5px 0 -1px #17152b; }
.pixel-player b { position:absolute;left:7px;top:9px;width:4px;height:4px;background:#fffdf7;box-shadow:8px 0 #fffdf7; }
.pixel-player span { position:absolute;bottom:0;left:1px;width:28px;height:17px;background:#fddd32;border:3px solid #17152b; }
.pixel-gem { position:absolute;width:18px;height:18px;right:24%;top:35%;background:#f61b9a;border:2px solid #17152b;transform:rotate(45deg);box-shadow:0 0 0 4px #fffdf755; }
.game-pixels { position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 49%,#ffffff17 50%),linear-gradient(transparent 49%,#ffffff17 50%);background-size:18px 18px;pointer-events:none; }
.game-hud { padding:9px 2px 0;color:#fddd32; }.game-dpad { position:absolute;left:2%;bottom:4%;width:54px;height:54px; }.game-dpad i,.game-dpad b,.game-dpad span { position:absolute;background:#fffdf7;border:2px solid #17152b; }.game-dpad i{width:18px;height:54px;left:18px;}.game-dpad b{width:54px;height:18px;top:18px;}.game-button { position:absolute;display:grid;place-items:center;width:37px;height:37px;border:2px solid #17152b;border-radius:50%;font:800 13px 'Space Grotesk';box-shadow:3px 3px 0 #17152b; }.game-button-a{right:5%;bottom:12%;background:#80e2cf;}.game-button-b{right:17%;bottom:4%;background:#fddd32;}.game-caption { position:absolute;right:3%;top:6%;font:700 9px 'DM Mono',monospace;letter-spacing:.08em; }

/* Video: monitor, playback frame and editing timeline. */
.video-monitor { width:92%;background:#fffdf7;border:3px solid #17152b;box-shadow:8px 8px 0 #ff8b5e;transform:rotate(-2deg);animation:craftiva-art-float 6.8s ease-in-out infinite; }
.video-monitor-top { height:31px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#17152b;color:#fffdf7;font:8px 'DM Mono',monospace;letter-spacing:.05em; }.video-monitor-top span:last-child{color:#ff8b5e}.video-monitor-top i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f61b9a;margin-left:3px;}
.video-frame { height:190px;margin:10px;position:relative;overflow:hidden;border:2px solid #17152b;background:linear-gradient(135deg,#fddd32 0 30%,#ffb49a 30% 52%,#8bc8ff 52% 100%); }
.video-sun { position:absolute;width:52px;height:52px;border-radius:50%;background:#fff4b1;top:15%;right:16%; }
.video-hill { position:absolute;bottom:-12%;width:85%;height:65%;border:2px solid #17152b;border-radius:50% 50% 0 0; }.hill-one{left:-13%;background:#80e2cf;transform:rotate(-10deg)}.hill-two{right:-27%;bottom:-22%;background:#b9a8ff;transform:rotate(15deg)}
.video-play { position:absolute;z-index:1;left:50%;top:48%;transform:translate(-50%,-50%);width:0;height:0;border-top:18px solid transparent;border-bottom:18px solid transparent;border-left:27px solid #fffdf7;filter:drop-shadow(2px 2px 0 #17152b); }
.video-timecode { position:absolute;bottom:8px;left:8px;color:#fffdf7;font:8px 'DM Mono',monospace;text-shadow:1px 1px #17152b; }
.video-timeline { display:grid;grid-template-columns:22px 1fr 1.3fr 1fr 22px 1.6fr;gap:4px;align-items:center;padding:0 10px 10px;font:8px 'DM Mono',monospace; }.video-timeline i,.video-timeline b{height:10px;border:1px solid #17152b;background:#ff8b5e}.video-timeline b{background:#b9a8ff}.video-floating-tag{position:absolute;right:-1%;top:4%;padding:9px 12px;background:#fddd32;border:2px solid #17152b;font:8px 'DM Mono',monospace;transform:rotate(8deg);box-shadow:3px 3px #17152b}.video-floating-tag strong{font-size:11px}.video-spark{position:absolute;left:0;bottom:5%;font-size:32px;color:#f61b9a;animation:craftiva-art-bob 3s ease-in-out infinite;}

/* Network: diagram with connected, labeled endpoints instead of a generic floating shape. */
.network-board { position:relative;width:100%;max-width:390px;aspect-ratio:1.25;background:#fffdf7;border:2px solid #17152b;box-shadow:8px 8px 0 #8bc8ff;transform:rotate(1deg);animation:craftiva-art-float 7s ease-in-out infinite;overflow:hidden; }
.network-board-head {height:32px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:#17152b;color:#fffdf7;font:8px 'DM Mono',monospace}.network-board-head b{color:#80e2cf;font-weight:500}
.network-lines {position:absolute;inset:10% 0 0;width:100%;height:90%;fill:none;stroke:#8bc8ff;stroke-width:3;stroke-dasharray:6 4;}
.network-node {position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:66px;height:58px;background:#eaf5ff;border:2px solid #17152b;box-shadow:3px 3px 0 #8bc8ff;gap:2px}.network-node>span{font-size:20px;line-height:1}.network-node small{font:7px 'DM Mono',monospace;white-space:nowrap}.node-router{left:calc(50% - 33px);top:39%;width:74px;height:66px;background:#fddd32}.node-cloud{left:calc(50% - 33px);top:9%;background:#fff0e9}.node-pc{left:4%;top:23%}.node-wifi{right:4%;top:23%;background:#e6fbf6}.node-server{left:calc(50% - 33px);bottom:5%;background:#f0ebff}.network-pulse{position:absolute;left:calc(50% - 4px);top:53%;width:8px;height:8px;border-radius:50%;background:#f61b9a;box-shadow:0 0 0 5px #f61b9a33;animation:craftiva-network-pulse 1.8s ease-out infinite;z-index:3}.network-tag{position:absolute;right:-1%;bottom:0;padding:9px 11px;background:#8bc8ff;border:2px solid #17152b;font:8px 'DM Mono',monospace;transform:rotate(-5deg);box-shadow:3px 3px #17152b}.network-tag strong{font-size:12px}

/* Design: identity board, typography, color chips and a packaging mockup. */
.brand-sheet { position:relative;z-index:1;width:72%;min-height:285px;padding:12px;background:#fffdf7;border:2px solid #17152b;box-shadow:7px 7px 0 #b9a8ff;transform:rotate(-4deg);animation:craftiva-art-float 6.2s ease-in-out infinite; }
.brand-sheet-top,.brand-sheet-foot {display:flex;justify-content:space-between;font:7px 'DM Mono',monospace;letter-spacing:.04em}.brand-sheet-top{padding-bottom:9px;border-bottom:1px solid #17152b}.brand-logo-mark{margin:13px 0 8px;position:relative;width:38px;height:38px;display:grid;place-items:center;background:#fddd32;border:2px solid #17152b}.brand-logo-mark b{font:800 26px 'Space Grotesk';}.brand-logo-mark span{position:absolute;width:12px;height:12px;right:-7px;top:-7px;background:#f61b9a;border:2px solid #17152b;border-radius:50%;}
.brand-name{font:800 clamp(23px,3vw,35px)/.86 'Space Grotesk',sans-serif;letter-spacing:-.09em}.brand-name em{font-style:normal;color:#f61b9a}.brand-palette{display:flex;gap:4px;margin:14px 0 12px}.brand-palette i{height:22px;flex:1;border:1.5px solid #17152b;background:#fddd32}.brand-palette i:nth-child(2){background:#f61b9a}.brand-palette i:nth-child(3){background:#b9a8ff}.brand-palette i:nth-child(4){background:#80e2cf}.brand-palette i:nth-child(5){background:#17152b}.brand-sheet-foot{padding-top:8px;border-top:1px solid #17152b;font-size:6px}
.design-pack {position:absolute;z-index:0;width:35%;height:46%;right:2%;bottom:12%;border:2px solid #17152b;box-shadow:4px 4px #17152b}.design-pack-back{background:#f61b9a;transform:rotate(12deg) translateY(-12px)}.design-pack-front{display:flex;flex-direction:column;justify-content:space-between;padding:12px 8px;background:#fddd32;transform:rotate(7deg)}.design-pack-front span{font:800 17px/.85 'Space Grotesk';letter-spacing:-.07em}.design-pack-front i{align-self:flex-end;width:28px;height:28px;border:2px solid #17152b;border-radius:50%;background:#80e2cf}.design-type-tag{position:absolute;right:0;top:4%;font:8px 'DM Mono',monospace;padding:8px;background:#b9a8ff;border:2px solid #17152b;transform:rotate(6deg)}

/* Animation: character turnaround cues, face, orbit and keyframe marker. */
.character-stage {position:relative;width:100%;max-width:330px;height:285px;display:grid;place-items:center;}
.character-orbit{position:absolute;width:245px;height:245px;border:1.5px dashed #17152b;border-radius:50%;}.orbit-one{transform:scaleX(.65) rotate(25deg);border-color:#80e2cf}.orbit-two{width:205px;height:205px;border-style:solid;transform:rotate(-28deg);opacity:.75}
.character-shadow{position:absolute;width:120px;height:20px;bottom:25px;background:#17152b22;border-radius:50%;filter:blur(2px)}
.character-body{position:relative;width:130px;height:205px;animation:craftiva-character-bob 3.8s ease-in-out infinite;}
.character-hair{position:absolute;z-index:2;left:28px;top:4px;width:76px;height:72px;background:#17152b;border:3px solid #17152b;border-radius:45% 45% 28% 30%;transform:rotate(-4deg)}
.character-face{position:absolute;z-index:3;left:34px;top:19px;width:66px;height:68px;background:#ffd2b8;border:3px solid #17152b;border-radius:43% 44% 45% 45%;}
.character-face:before{content:"";position:absolute;left:-5px;top:18px;width:12px;height:25px;background:#ffd2b8;border:2px solid #17152b;border-radius:50%}.character-face:after{content:"";position:absolute;right:-5px;top:18px;width:12px;height:25px;background:#ffd2b8;border:2px solid #17152b;border-radius:50%}
.eye{position:absolute;top:28px;width:5px;height:8px;background:#17152b;border-radius:50%}.eye-left{left:16px}.eye-right{right:16px}.character-blush{position:absolute;top:41px;width:10px;height:5px;border-radius:50%;background:#f61b9a66}.blush-left{left:7px}.blush-right{right:7px}.character-mouth{position:absolute;bottom:10px;left:28px;width:9px;height:5px;border-bottom:2px solid #17152b;border-radius:50%}
.character-neck{position:absolute;left:55px;top:80px;width:24px;height:20px;background:#ffd2b8;border:3px solid #17152b}.character-shirt{position:absolute;left:19px;top:94px;width:94px;height:91px;background:#80e2cf;border:3px solid #17152b;border-radius:35% 35% 12% 12%;}.character-shirt:after{content:"✦";position:absolute;left:37px;top:21px;font:20px 'Space Grotesk';color:#f61b9a}.character-arm{position:absolute;top:107px;width:24px;height:67px;background:#ffd2b8;border:3px solid #17152b;border-radius:12px}.arm-left{left:5px;transform:rotate(20deg)}.arm-right{right:0;transform:rotate(-26deg)}
.character-star{position:absolute;font-size:24px;color:#f61b9a;animation:craftiva-art-bob 3s ease-in-out infinite}.star-one{right:12%;top:22%}.star-two{left:7%;top:42%;color:#17152b;animation-delay:-1.2s}.character-motion{position:absolute;width:27px;height:10px;border-top:2px solid #17152b;border-radius:50%;transform:rotate(-25deg)}.motion-one{right:4%;bottom:34%}.motion-two{left:2%;bottom:25%;width:18px}.character-label{position:absolute;bottom:2%;left:2%;display:flex;flex-direction:column;gap:4px;padding:8px 10px;background:#fffdf7;border:2px solid #17152b;font:7px 'DM Mono',monospace;box-shadow:3px 3px #80e2cf}.character-label strong{font-size:8px}.animation-frame{position:absolute;right:0;top:4%;padding:8px;background:#80e2cf;border:2px solid #17152b;font:8px 'DM Mono',monospace;transform:rotate(6deg)}.animation-frame b{font-size:13px}

@keyframes craftiva-art-float {0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes craftiva-art-bob {0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:6deg}}
@keyframes craftiva-pixel-hop {0%,100%{translate:0 0}50%{translate:0 -18px}}
@keyframes craftiva-character-bob {0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -7px;rotate:1deg}}
@keyframes craftiva-network-pulse {0%{box-shadow:0 0 0 0 #f61b9a55}100%{box-shadow:0 0 0 13px #f61b9a00}}
@media(max-width:900px){body[class*="service-"] .department-hero{grid-template-columns:minmax(0,1fr) minmax(220px,.75fr);column-gap:24px}body[class*="service-"] .department-hero h1{font-size:clamp(2.8rem,6.4vw,5.2rem)}body[class*="service-"] .department-hero > .service-artwork{min-height:260px}.game-scene,.video-frame{height:160px}.brand-sheet{min-height:260px}}
@media(max-width:700px){body[class*="service-"] .department-hero{display:flex;flex-direction:column;align-items:stretch;gap:0}body[class*="service-"] .department-hero>.back-services{align-self:flex-start;margin-bottom:18px}body[class*="service-"] .department-hero>.service-artwork{align-self:center;width:min(100%,410px);min-height:280px;margin:28px 0 4px}body[class*="service-"] .department-hero::after{content:none!important}.web-art .art-window{width:82%}.network-board{max-width:350px}.character-stage{height:265px}}
@media(prefers-reduced-motion:reduce){.service-artwork *{animation:none!important;transition:none!important}}


/* Home: make the What We Do area a real visual composition, not an empty column. */
.intro-band { background:#17152b !important; color:#fffdf7 !important; }
.intro-band .intro-grid {
  display:grid !important;
  grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr) !important;
  grid-template-rows:auto 1fr;
  align-items:start;
  column-gap:clamp(36px,6vw,92px) !important;
  row-gap:24px !important;
  padding-top:clamp(60px,7vw,100px) !important;
  padding-bottom:clamp(55px,7vw,95px) !important;
}
.intro-band .intro-grid>.eyebrow { grid-column:1; grid-row:1; color:#fddd32 !important; margin:0; }
.intro-band .what-we-do-art { grid-column:1; grid-row:2; align-self:center; width:100%; max-width:440px; margin-top:8px; color:#17152b; background:#fffdf7; border:2px solid #fffdf7; box-shadow:8px 8px 0 #f61b9a; padding:12px; transform:rotate(-1.2deg); }
.intro-band .intro-copy { grid-column:2; grid-row:1 / span 2; align-self:center; min-width:0; }
.intro-band .intro-copy h2 { color:#fffdf7 !important; }
.intro-band .intro-copy h2 em { color:#ff4bb4 !important; }
.intro-band .intro-copy p { color:#f0edf9 !important; opacity:1 !important; max-width:620px; }
.intro-band .text-link { color:#fffdf7 !important; }
.what-art-head,.what-art-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; font:700 8px 'DM Mono',monospace; letter-spacing:.05em; }
.what-art-head { padding:1px 2px 10px; border-bottom:1px solid #17152b35; }
.what-art-head b { color:#552ec9; font-weight:700; }
.what-art-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:10px 0; }
.what-art-tile { min-width:0; min-height:93px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:9px; border:1.5px solid #17152b; box-shadow:3px 3px 0 #17152b; transition:transform .25s,box-shadow .25s; }
.what-art-tile:hover { transform:translateY(-4px) rotate(-1deg); box-shadow:5px 6px 0 #17152b; }
.what-art-tile small { font:700 8px 'DM Mono',monospace; letter-spacing:.05em; color:#17152b; }
.tile-web { background:#e4edff; }.tile-video { background:#ffe4d8; }.tile-game { background:#fddd32; }.tile-network { background:#d9f8ef; }.tile-design { background:#f5e5ff; }.tile-animation { background:#ffd9ef; }
.what-icon { position:relative; display:block; width:40px; height:38px; color:#17152b; }
.icon-browser { border:2px solid #17152b; background:#fffdf7; height:29px; margin-top:3px; }
.icon-browser:before { content:''; position:absolute; inset:0 0 auto; height:7px; background:#fddd32; border-bottom:1.5px solid #17152b; }
.icon-browser i,.icon-browser b,.icon-browser em { position:absolute; display:block; height:3px; background:#552ec9; top:13px; left:5px; width:15px; }.icon-browser b { top:19px; width:23px; background:#f61b9a; }.icon-browser em { top:25px; width:11px; background:#80e2cf; }
.icon-video { height:27px; border:2px solid #17152b; background:#f61b9a; box-shadow:4px 4px 0 #17152b; }
.icon-video:before,.icon-video:after { content:''; position:absolute; top:5px; width:5px; height:13px; background:#fddd32; border:1.5px solid #17152b; }.icon-video:before { left:-8px; }.icon-video:after { right:-8px; }
.icon-video i { position:absolute; left:16px; top:6px; width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fffdf7; }
.icon-game { border:2px solid #17152b; border-radius:11px; background:#80e2cf; height:25px; margin-top:4px; transform:rotate(-5deg); }
.icon-game:before { content:'+'; position:absolute; left:5px; top:0; font:700 15px 'Space Grotesk'; }.icon-game i { position:absolute; right:6px; top:7px; width:4px;height:4px;background:#f61b9a;border-radius:50%; }.icon-game b { position:absolute;right:12px;top:12px;width:4px;height:4px;background:#552ec9;border-radius:50%; }
.icon-network { height:35px; background:radial-gradient(circle at 50% 15%,#fddd32 0 5px,transparent 6px),radial-gradient(circle at 15% 75%,#8bc8ff 0 5px,transparent 6px),radial-gradient(circle at 85% 75%,#f61b9a 0 5px,transparent 6px); }
.icon-network:before,.icon-network:after { content:''; position:absolute; height:2px; width:20px; background:#17152b; top:19px; left:2px; transform:rotate(28deg); }.icon-network:after { left:18px; transform:rotate(-28deg); }
.icon-design { width:34px;height:34px; border:2px solid #17152b; background:#fddd32; transform:rotate(-8deg); box-shadow:5px 4px 0 #f61b9a; }
.icon-design:before { content:'A'; position:absolute; inset:0; display:grid; place-items:center; font:800 23px 'Space Grotesk'; }
.icon-animation { width:32px;height:34px; border:2px solid #17152b; border-radius:45% 45% 40% 40%; background:#80e2cf; }
.icon-animation:before { content:''; position:absolute; width:6px;height:6px;left:6px;top:10px;background:#17152b;border-radius:50%;box-shadow:12px 0 #17152b; }.icon-animation:after { content:''; position:absolute;left:10px;top:22px;width:9px;height:4px;border-bottom:2px solid #17152b;border-radius:50%; }
.what-art-foot { border-top:1px solid #17152b35; padding:9px 2px 0; color:#514c68; }
.what-art-cross { color:#f61b9a; font-size:18px; animation:craftiva-art-bob 3.5s ease-in-out infinite; }

/* Video showcase: keep the actual reel wide and full-width. The fixed 190px
   monitor frame belongs only to the decorative hero mock-up, never the player. */
.service-video .service-artwork .video-frame { height:190px; margin:10px; }
.service-video .department-showcase .department-project { width:100%; max-width:none; }
.service-video .department-showcase .project-feature { width:100%; max-width:none; padding:clamp(10px,1.5vw,18px); }
.service-video .department-showcase .video-frame { width:100%; height:auto !important; aspect-ratio:16/9; margin:0; border:2px solid #17152b; background:#17152b; }
.service-video .department-showcase .video-frame video { display:block; width:100%; height:auto; max-height:none; aspect-ratio:16/9; object-fit:contain; background:#17152b; }
.service-video .department-showcase .media-label { width:100%; }
@media(max-width:900px) {
 .intro-band .intro-grid { grid-template-columns:minmax(190px,.75fr) minmax(0,1.25fr) !important; column-gap:28px !important; }
 .what-art-grid { gap:6px; }.what-art-tile { min-height:82px; padding:7px; }
}
@media(max-width:700px) {
 .intro-band .intro-grid { grid-template-columns:minmax(0,1fr) !important; grid-template-rows:auto auto auto; gap:22px !important; padding-top:54px !important; }
 .intro-band .intro-grid>.eyebrow { grid-column:1;grid-row:1; }
 .intro-band .what-we-do-art { grid-column:1;grid-row:2; max-width:480px; width:calc(100% - 8px); margin:2px 0 8px; }
 .intro-band .intro-copy { grid-column:1;grid-row:3; }
 .intro-band .intro-copy h2 { font-size:clamp(38px,10vw,58px); }
 .what-art-tile { min-height:78px; }.what-icon { transform:scale(.9);transform-origin:left top; }
 .service-video .department-showcase .video-frame { aspect-ratio:16/9; }
}
@media(prefers-reduced-motion:reduce) { .what-art-cross,.what-art-tile { animation:none !important; transition:none !important; } }


/* About page: vision, mission, CREATE values and USP */
.about-direction,.about-values,.about-usp{margin:clamp(34px,5vw,76px) 0;position:relative}
.about-direction{padding:clamp(24px,4vw,52px);background:#fff8d7;border:3px solid #17152b;box-shadow:8px 8px 0 #f61b9a}
.direction-heading,.values-heading{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;align-items:end;margin-bottom:28px}
.direction-heading .eyebrow,.values-heading .eyebrow{grid-column:1/-1}
.direction-heading h2,.values-heading h2,.usp-content h2{font:700 clamp(2rem,4vw,3.7rem)/1.02 'Space Grotesk',sans-serif;letter-spacing:-.055em;color:#17152b;margin:0}
.direction-heading h2 em,.values-heading h2 em{color:#552ec9;font-style:normal}
.direction-heading>p:last-child,.values-heading>p:last-child{color:#302d43;max-width:420px;line-height:1.7;margin:0}
.direction-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px}
.direction-panel{position:relative;padding:clamp(22px,3vw,36px);border:2px solid #17152b;min-width:0}
.vision-panel{background:#b9e1ff}.mission-panel{background:#f9c9e6}
.direction-label{font:500 .72rem 'DM Mono',monospace;letter-spacing:.08em;color:#25213a}
.direction-symbol{position:absolute;right:22px;top:14px;font-size:3rem;color:#17152b;opacity:.8}
.direction-panel h3{font:700 1.65rem 'Space Grotesk',sans-serif;color:#17152b;margin:32px 0 12px}
.direction-panel p,.direction-panel li{color:#29253d;line-height:1.7}.direction-panel p{max-width:520px;margin:0}
.direction-panel ol{padding-left:1.3rem;margin:0}.direction-panel li{padding:0 0 10px 5px}.direction-panel li::marker{font-weight:800;color:#552ec9}
.about-values{padding:clamp(24px,4vw,52px);background:#e9e4ff;border:3px solid #17152b;box-shadow:8px 8px 0 #207cfc}
.values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.value-card{display:flex;gap:15px;align-items:flex-start;padding:20px;background:#fffdf7;border:2px solid #17152b;min-width:0}
.value-card>span{display:grid;place-items:center;flex:0 0 48px;height:48px;background:#fddd32;border:2px solid #17152b;box-shadow:3px 3px 0 #17152b;font:800 1.6rem 'Space Grotesk',sans-serif;color:#17152b}
.value-card h3{font:700 1.08rem 'Space Grotesk',sans-serif;color:#17152b;margin:1px 0 7px}.value-card p{font-size:.91rem;line-height:1.6;color:#39364f;margin:0}
.about-usp{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;padding:clamp(26px,4vw,54px);background:#17152b;border:3px solid #17152b;box-shadow:8px 8px 0 #fddd32;overflow:hidden}
.usp-stamp{display:grid;place-items:center;width:clamp(76px,11vw,132px);aspect-ratio:1;background:#f61b9a;border:3px solid #fff8ed;color:#17152b;font:800 clamp(2.5rem,6vw,5rem) 'Space Grotesk',sans-serif;transform:rotate(-8deg);box-shadow:7px 7px 0 #207cfc}
.usp-content .eyebrow{color:#fddd32}.usp-content h2{color:#fff8ed}.usp-content h2 em{color:#f61b9a;font-style:normal}
.usp-content>p:last-child{max-width:780px;color:#f1edf9;line-height:1.8;margin:18px 0 0}
.usp-foot{grid-column:1/-1;padding-top:16px;border-top:1px solid #ffffff44;color:#b9e1ff;font:500 .7rem 'DM Mono',monospace;letter-spacing:.1em}
@media(max-width:760px){.direction-heading,.values-heading{grid-template-columns:1fr}.direction-grid{grid-template-columns:1fr}.values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.about-usp{grid-template-columns:1fr}.usp-stamp{width:76px}.usp-foot{grid-column:1}}
@media(max-width:480px){.values-grid{grid-template-columns:1fr}.value-card{padding:16px}.direction-panel{padding:20px}}


/* About hero hierarchy: tagline first, headline second */
.about-hero-kicker{position:relative;z-index:2;display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:34px 0 0;padding:10px 14px;background:#fddd32;border:2px solid #17152b;box-shadow:4px 4px 0 #f61b9a;color:#17152b;font:700 .72rem 'DM Mono',monospace;letter-spacing:.09em}
.about-page .page-hero h1{margin:24px 0 28px}
.about-hero .page-hero-bottom{padding-top:8px}

/* USP contrast and readable body copy */
.about-usp{background:#111022;border-color:#111022;box-shadow:8px 8px 0 #fddd32}
.usp-content .eyebrow{color:#ffe45c;font-weight:700}
.usp-content h2{color:#fff;font-size:clamp(2rem,4.2vw,3.9rem);line-height:1.08}
.usp-content h2 em{color:#ff70c4}
.usp-content>p:last-child{max-width:780px;color:#fff;font-size:clamp(1rem,1.2vw,1.1rem);font-weight:500;line-height:1.9;margin:20px 0 0}
.usp-foot{color:#d7e9ff;border-top-color:#ffffff66;line-height:1.7}
@media(max-width:720px){.about-hero-kicker{margin-top:22px;font-size:.65rem}.about-page .page-hero h1{margin:20px 0 24px}.about-usp{gap:20px;padding:24px}.usp-content>p:last-child{font-size:1rem;line-height:1.8}.usp-foot{font-size:.64rem;letter-spacing:.06em}}

/* Final About-page correction: swap the hero hierarchy and guarantee USP contrast. */
.about-page .about-hero-kicker{
  display:block !important; width:auto !important; max-width:100% !important;
  margin:34px 0 12px !important; padding:0 !important;
  border:0 !important; background:transparent !important; box-shadow:none !important;
  color:#17152b !important; font:800 clamp(2.7rem,7.2vw,6.8rem)/.98 'Space Grotesk',sans-serif !important;
  letter-spacing:-.065em !important; text-transform:none !important;
}
.about-page .about-hero-kicker span{color:#f61b9a !important; white-space:nowrap}
.about-page .about-hero h1{
  width:max-content !important; max-width:100% !important; margin:10px 0 30px auto !important;
  padding:9px 14px !important; border:2px solid #17152b !important;
  background:#fddd32 !important; box-shadow:4px 4px 0 #f61b9a !important;
  color:#17152b !important; text-shadow:none !important;
  font:700 clamp(.72rem,1.25vw,1rem)/1.35 'DM Mono',monospace !important;
  letter-spacing:.06em !important; text-align:right !important;
}
.about-page .about-hero h1 em{color:#17152b !important;text-shadow:none !important;font-style:normal !important;-webkit-text-stroke:0 !important}
.about-page .about-usp{
  background:#fff8ed !important; background-image:none !important;
  border:3px solid #17152b !important; box-shadow:8px 8px 0 #fddd32 !important;
}
.about-page .usp-content .eyebrow{color:#552ec9 !important;font-weight:800 !important}
.about-page .usp-content h2{color:#17152b !important;text-shadow:none !important}
.about-page .usp-content h2 em{color:#e91689 !important}
.about-page .usp-content>p:last-child{
  display:block !important; max-width:780px !important; padding:0 !important; margin:20px 0 0 !important;
  background:transparent !important; background-image:none !important;
  color:#242137 !important; -webkit-text-fill-color:#242137 !important;
  font-size:clamp(1.02rem,1.25vw,1.16rem) !important; font-weight:600 !important;
  line-height:1.85 !important; text-shadow:none !important;
}
.about-page .usp-foot{color:#34304b !important;border-top-color:#17152b55 !important}
@media(max-width:720px){
 .about-page .about-hero-kicker{font-size:clamp(2.25rem,10vw,4rem) !important;margin-top:22px !important}
 .about-page .about-hero h1{margin:12px 0 24px auto !important;font-size:.7rem !important}
 .about-page .about-usp{padding:24px !important}
}


/* Craftiva About hero: stronger headline treatment and more breathing room below it. */
.about-page .about-hero-kicker{
  color:#f61b9a !important;
  -webkit-text-stroke:1px #17152b;
  text-shadow:3px 3px 0 #fddd32,6px 6px 0 #207cfc !important;
  letter-spacing:-.07em !important;
}
.about-page .about-hero h1{
  margin-top:30px !important;
}
@media(max-width:720px){
  .about-page .about-hero h1{margin-top:24px !important}
}

/* Animation portfolio: two distinct samples, with the comic shown in full. */
.service-animation .department-project{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.service-animation .department-project .project-feature{
  min-width:0;
  overflow:hidden;
}
.service-animation .department-project .project-feature img{
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
  background:#fff;
}
.service-animation .department-project .comic-project img{
  height:560px;
  object-fit:contain;
  padding:14px;
  background:#fff;
}
.service-animation .department-project .project-meta{
  min-height:150px;
}
.service-animation .price-dept .price-subgroup{margin-top:42px}
.service-animation .price-dept .price-package{height:100%}
.service-animation .price-dept .price-package ul{padding-left:20px}
.service-animation .price-dept .price-package li{line-height:1.65;margin:0 0 9px}
.service-animation .price-dept .package-description{line-height:1.7}
.service-animation .price-dept .price-note{line-height:1.8}
@media(max-width:760px){
  .service-animation .department-project{grid-template-columns:1fr}
  .service-animation .department-project .project-feature img,
  .service-animation .department-project .comic-project img{height:auto;max-height:620px;min-height:240px}
  .service-animation .department-project .comic-project img{object-fit:contain}
  .service-animation .price-dept .price-subgroup{margin-top:30px}
}


/* MUSE online-catalogue portfolio preview */
.muse-preview { background: #17152d; padding: 0; overflow: hidden; }
.muse-preview .browser-bar { background: #e9e6df; color: #24213a; }
.muse-catalog-preview { min-height: 330px; height: 100%; padding: clamp(22px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; color: #fff9e8; background: radial-gradient(circle at 82% 25%, rgba(255,54,159,.42), transparent 32%), radial-gradient(circle at 18% 78%, rgba(66,126,255,.42), transparent 34%), #17152d; }
.muse-preview-top, .muse-preview-bottom { display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:inherit; }
.muse-preview-top span { font-size: clamp(22px, 3vw, 34px); font-weight:900; letter-spacing:.12em; }
.muse-preview-top small, .muse-preview-bottom { font-size:10px; letter-spacing:.13em; opacity:.78; }
.muse-preview-center { align-self:center; text-align:center; padding:24px 12px; }
.muse-preview-center>span:first-child { color:#ff4ca8; font-size:10px; letter-spacing:.2em; font-weight:800; }
.muse-preview-center b { display:block; font-size:clamp(42px, 7vw, 76px); line-height:.88; letter-spacing:-.06em; margin:12px 0; }
.muse-preview-center b em { color:#ff4ca8; font-style:normal; }
.muse-preview-center p { margin:12px 0 18px; color:#e6e1f3; font-size:14px; }
.muse-preview-link { display:inline-block; border:1px solid #ffdf42; color:#ffdf42; padding:9px 14px; font-size:10px; letter-spacing:.1em; font-weight:800; }
@media (max-width:600px) { .muse-catalog-preview { min-height:260px; padding:20px; } .muse-preview-top small { max-width:110px; text-align:right; } .muse-preview-bottom { font-size:8px; } }