/* =========================================================
   DEVSID.IN — LYNKTOWN CASE STUDY / REDESIGN
   ========================================================= */
:root {
    --cs-black: #090909;
    --cs-dark: #111111;
    --cs-paper: #f3f3ef;
    --cs-white: #fff;
    --cs-orange: #ff914d;
    --cs-red: #a02d37;
    --cs-hot: #ff4d19;
    --cs-muted: #74746e;
    --cs-line: rgba(9,9,9,.14);
    --cs-line-dark: rgba(243,243,239,.16);
    --cs-ease: cubic-bezier(.22,1,.36,1);
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body.case-study-page {
    margin: 0;
    background: var(--cs-paper);
    color: var(--cs-black);
    font-family: "Manrope",sans-serif;
    overflow-x: hidden;
}

body.case-study-page a {
    color: inherit;
    text-decoration: none
}

body.case-study-page::selection {
    background: var(--cs-orange);
    color: #090909
}

.cs-container {
    width: min(1380px,calc(100% - 70px));
    margin: 0 auto
}

.cs-progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 10000;
    pointer-events: none
}

.cs-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#ff914d,#ff4d19,#a02d37);
    box-shadow: 0 0 18px rgba(255,77,25,.45)
}

.cs-kicker,.cs-section-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 27px 0;
    border-top: 1px solid var(--cs-line);
    font: 500 10px/1 "DM Mono",monospace;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.cs-kicker b,.cs-section-head b {
    color: var(--cs-orange)
}

.cs-kicker span:last-child {
    justify-self: end;
    color: #777
}

.cs-section-head p {
    justify-self: end;
    max-width: 430px;
    margin: 0;
    font: 600 16px/1.45 "Manrope",sans-serif;
    letter-spacing: -.02em;
    text-transform: none
}

.cs-section-head.dark {
    border-color: var(--cs-line-dark);
    color: #b5b5ad
}

.cs-section-head.dark p {
    color: #fff
}

.eyebrow {
    margin: 0 0 24px;
    font: 500 11px/1 "DM Mono",monospace;
    letter-spacing: .06em;
    color: #777;
    text-transform: uppercase
}

.cs-hero {
    padding: 150px 0 0;
    position: relative
}

.cs-hero-main {
    display: grid;
    grid-template-columns: minmax(0,1.5fr) minmax(280px,.5fr);
    gap: 60px;
    padding: 82px 0 100px
}

.cs-hero-title h1 {
    margin: 0;
    font-size: clamp(72px,9.2vw,150px);
    line-height: .88;
    letter-spacing: -.075em;
    font-weight: 800;
}

.cs-hero-title h1 em,.story-big h2 em,.solution-intro h2 em,.closing-grid h2 em {
    font-style: normal;
    background: linear-gradient(120deg,#ff914d 0%,#ff4d19 40%,#a02d37 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.cs-hero-side {
    padding-top: 88px;
    max-width: 330px;
    justify-self: end
}

.cs-hero-side p {
    margin: 0 0 36px;
    font-size: 14px;
    line-height: 1.7;
    color: #66665f
}

.cs-circle-link {
    width: 112px;
    height: 112px;
    border: 1px solid #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    font: 500 9px/1.35 "DM Mono",monospace;
    text-transform: uppercase;
    transition: transform .5s var(--cs-ease),background .4s,color .4s;
}

.cs-circle-link i {
    font-style: normal;
    font-size: 16px
}

.cs-circle-link:hover {
    background: #090909;
    color: #fff;
    transform: rotate(8deg) scale(1.06)
}

.cs-hero-art {
    position: relative;
    height: min(72vw,760px);
    min-height: 470px;
    overflow: hidden;
    background: radial-gradient(circle at 78% 30%,rgba(255,77,25,.55),transparent 20%), radial-gradient(circle at 20% 80%,rgba(160,45,55,.25),transparent 26%), linear-gradient(135deg,#1b1b1b,#090909 62%,#252525);
}

.art-grid {
    position: absolute;
    inset: 0;
    opacity: .25;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
}

.art-glow {
    position: absolute;
    width: 38vw;
    height: 38vw;
    max-width: 540px;
    max-height: 540px;
    right: -8%;
    top: -20%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,145,77,.28),rgba(160,45,55,.08) 42%,transparent 70%);
    filter: blur(12px);
    animation: orbFloat 9s ease-in-out infinite alternate;
}

.art-window {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 9%;
    bottom: 8%;
    background: #e9e9e5;
    box-shadow: 0 45px 110px rgba(0,0,0,.5);
    transform: rotate(-2.4deg);
    transition: transform .8s var(--cs-ease);
    display: none;
}

.cs-hero-art:hover .art-window {
    transform: rotate(-.5deg) scale(1.012)
}

.window-top {
    height: 36px;
    background: #111;
    color: #777;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font: 400 8px "DM Mono",monospace
}

.window-dots {
    display: flex;
    gap: 5px;
    margin-right: 18px
}

.window-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #666
}

.window-top b {
    margin-left: auto;
    color: #ff914d;
    font-weight: 500
}

.window-body {
    position: relative;
    height: calc(100% - 36px);
    overflow: hidden;
    background: linear-gradient(135deg,#efefeb,#dcdcd7)
}

.window-nav {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.window-nav strong {
    font-size: 19px;
    letter-spacing: -.05em
}

.window-nav strong span {
    font-weight: 400;
    color: #ff4d19
}

.window-nav div {
    display: flex;
    gap: 7px
}

.window-nav i {
    width: 20px;
    height: 1px;
    background: #111
}

.window-copy {
    position: absolute;
    left: 8%;
    top: 23%;
    z-index: 2
}

.window-copy small {
    font: 500 8px "DM Mono",monospace;
    letter-spacing: .08em
}

.window-copy h2 {
    font-size: clamp(55px,8vw,125px);
    line-height: .8;
    letter-spacing: -.08em;
    margin: 20px 0 32px;
    font-weight: 800
}

.window-copy h2 em {
    font-style: normal;
    color: #ff4d19
}

.fake-button {
    display: inline-flex;
    padding: 12px 15px;
    background: #111;
    color: #fff;
    font: 500 8px "DM Mono",monospace;
    gap: 35px
}

.fake-button b {
    font-size: 13px
}

.window-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(0);
    mix-blend-mode: multiply
}

.orb-a {
    width: 38%;
    aspect-ratio: 1;
    right: 7%;
    top: 17%;
    background: radial-gradient(circle at 35% 30%,#ff914d,#a02d37 45%,transparent 70%);
    animation: orbFloat 7s ease-in-out infinite
}

.orb-b {
    width: 23%;
    aspect-ratio: 1;
    right: 23%;
    bottom: 11%;
    background: radial-gradient(circle,#fff,#bbb 55%,transparent 72%);
    opacity: .65;
    animation: orbFloat 6s ease-in-out -2s infinite alternate
}

.window-foot {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 5%;
    display: flex;
    justify-content: space-between;
    font: 500 7px "DM Mono",monospace
}

.art-chip {
    position: absolute;
    padding: 10px 12px;
    background: rgba(9,9,9,.75);
    backdrop-filter: blur(12px);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    font: 500 8px "DM Mono",monospace;
    letter-spacing: .05em;
    box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

.chip-one {
    left: 3%;
    top: 20%;
    animation: chipFloat 5s ease-in-out infinite
}

.chip-two {
    right: 4%;
    top: 43%;
    animation: chipFloat 6s ease-in-out -2s infinite
}

.chip-three {
    left: 14%;
    bottom: 7%;
    animation: chipFloat 7s ease-in-out -1s infinite
}

.cs-facts {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-bottom: 1px solid var(--cs-line)
}

.cs-facts>div {
    padding: 24px 20px 25px 0;
    border-right: 1px solid var(--cs-line);
    display: flex;
    flex-direction: column;
    gap: 10px
}

.cs-facts>div:not(:first-child) {
    padding-left: 20px
}

.cs-facts>div:last-child {
    border-right: 0
}

.cs-facts span {
    font: 500 8px "DM Mono",monospace;
    color: #888;
    text-transform: uppercase
}

.cs-facts strong {
    font-size: 13px;
    font-weight: 600
}

.cs-story {
    padding: 145px 0 170px
}

.story-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 10vw;
    padding-top: 85px
}

.story-big h2 {
    margin: 0;
    font-size: clamp(48px,6.5vw,100px);
    line-height: .94;
    letter-spacing: -.065em
}

.story-copy {
    max-width: 500px;
    padding-top: 15px
}

.story-copy p {
    font-size: 14px;
    line-height: 1.8;
    color: #686861;
    margin: 0 0 30px
}

.story-copy .lead {
    font-size: 20px;
    line-height: 1.5;
    color: #171717;
    letter-spacing: -.02em
}

.cs-problem {
    padding: 0 0 150px
}

.problem-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid var(--cs-line);
    margin-top: 70px
}

.problem-card {
    position: relative;
    min-height: 390px;
    padding: 30px 35px 40px 0;
    border-right: 1px solid var(--cs-line);
    overflow: hidden
}

.problem-card:not(:first-child) {
    padding-left: 35px
}

.problem-card:last-child {
    border-right: 0
}

.problem-card>span {
    font: 500 10px "DM Mono",monospace;
    color: #ff4d19
}

.problem-card h3 {
    font-size: 36px;
    line-height: 1;
    letter-spacing: -.055em;
    margin: 85px 0 20px
}

.problem-card p {
    max-width: 330px;
    font-size: 13px;
    line-height: 1.7;
    color: #70706a
}

.problem-line {
    position: absolute;
    left: 0;
    right: 35px;
    bottom: 40px;
    height: 1px;
    background: #ddd
}

.problem-line i {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,#ff914d,#a02d37);
    transition: width 1s var(--cs-ease)
}

.problem-card.is-visible .problem-line i {
    width: 100%
}

.signal {
    margin-top: 45px;
    padding: 30px 0;
    border-top: 1px solid var(--cs-line);
    border-bottom: 1px solid var(--cs-line);
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    gap: 35px;
    align-items: center
}

.signal-label {
    font: 500 9px "DM Mono",monospace;
    color: #888
}

.signal-number {
    display: flex;
    align-items: baseline;
    gap: 14px
}

.signal-number strong {
    font-size: 54px;
    letter-spacing: -.07em
}

.signal-number small {
    font: 500 9px "DM Mono",monospace;
    color: #777;
    max-width: 120px;
    line-height: 1.4
}

.signal>p {
    font-size: 13px;
    line-height: 1.7;
    color: #666
}

.cs-solution {
    padding: 140px 0 170px;
    background: #111;
    color: #f3f3ef
}

.solution-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-bottom: 80px
}

.solution-intro>div:first-child {
    font: 500 10px "DM Mono",monospace;
    color: #aaa
}

.solution-intro b {
    color: #ff914d
}

.solution-kicker {
    margin: 0 0 20px;
    font: 500 10px "DM Mono",monospace;
    color: #ff914d;
    letter-spacing: .05em
}

.solution-intro h2 {
    margin: 0;
    font-size: clamp(62px,7vw,108px);
    line-height: .88;
    letter-spacing: -.075em
}

.solution-row {
    position: relative;
    display: grid;
    grid-template-columns: 65px 1fr 1fr 30px;
    gap: 25px;
    padding: 48px 0;
    border-top: 1px solid var(--cs-line-dark);
    transition: padding .5s var(--cs-ease)
}

.solution-row:last-child {
    border-bottom: 1px solid var(--cs-line-dark)
}

.solution-row:hover {
    padding-left: 18px;
    padding-right: 18px;
    background: rgba(255,255,255,.025)
}

.solution-index {
    font: 500 10px "DM Mono",monospace;
    color: #ff914d
}

.solution-title span {
    font: 500 8px "DM Mono",monospace;
    color: #777
}

.solution-title h3 {
    margin: 20px 0 0;
    font-size: 42px;
    line-height: .95;
    letter-spacing: -.055em
}

.solution-copy {
    max-width: 480px;
    padding-top: 20px
}

.solution-copy p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: #aaa
}

.solution-arrow {
    align-self: center;
    font-size: 18px;
    color: #777;
    transition: transform .4s,color .4s
}

.solution-row:hover .solution-arrow {
    transform: translate(5px,-5px);
    color: #ff914d
}

.mini-ui {
    margin-top: 32px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.12);
    position: relative;
    overflow: hidden;
    background: #0a0a0a
}

.fidelity-ui {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 10px
}

.fidelity-ui i {
    display: block;
    flex: 1;
    background: linear-gradient(#ff914d,#a02d37);
    height: 25%;
    animation: bars 2s ease-in-out infinite alternate
}

.fidelity-ui i:nth-child(2) {
    height: 50%
}

.fidelity-ui i:nth-child(3) {
    height: 80%
}

.fidelity-ui i:nth-child(4) {
    height: 45%
}

.fidelity-ui i:nth-child(5) {
    height: 68%
}

.device-ui {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    padding: 7px
}

.device-ui i {
    display: block;
    border: 1px solid #555;
    border-radius: 4px
}

.phone {
    height: 36px;
    width: 18px
}

.tablet {
    height: 36px;
    width: 31px
}

.desktop {
    height: 30px;
    width: 58px
}

.speed-ui {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    font: 500 8px "DM Mono",monospace
}

.speed-ui b {
    height: 3px;
    flex: 1;
    background: #333
}

.speed-ui b i {
    display: block;
    height: 100%;
    width: 68%;
    background: linear-gradient(90deg,#ff914d,#a02d37);
    animation: speed 2s var(--cs-ease) infinite alternate
}

.speed-ui strong {
    font-size: 20px;
    color: #ff914d
}

.qa-ui {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px
}

.qa-ui span,.qa-ui b {
    font-size: 20px;
    color: #fff
}

.qa-ui small {
    font: 500 7px "DM Mono",monospace;
    color: #666
}

.qa-ui b {
    color: #ff914d;
    margin-left: auto
}

.cs-transformation {
    padding: 150px 0
}

.transform-stage {
    height: 600px;
    position: relative;
    margin-top: 70px;
    background: linear-gradient(135deg,#deded8,#f5f5f1);
    overflow: hidden;
    border: 1px solid var(--cs-line)
}

.transform-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(9,9,9,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(9,9,9,.07) 1px,transparent 1px);
    background-size: 50px 50px;
    opacity: .45
}

.transform-label {
    position: absolute;
    top: 30px;
    z-index: 3;
    font: 500 8px "DM Mono",monospace;
    color: #777
}

.before-label {
    left: 30px
}

.after-label {
    right: 30px
}

.transform-card {
    position: absolute;
    top: 150px;
    width: 34%;
    height: 290px;
    background: #111;
    color: #fff;
    padding: 28px;
    box-shadow: 0 35px 70px rgba(0,0,0,.2);
    transition: transform .8s var(--cs-ease)
}

.before-card {
    left: 8%;
    transform: rotate(-5deg)
}

.after-card {
    right: 8%;
    transform: rotate(5deg);
    background: linear-gradient(145deg,#1a1a1a,#090909)
}

.transform-stage:hover .before-card {
    transform: rotate(-8deg) translate(-18px,8px)
}

.transform-stage:hover .after-card {
    transform: rotate(8deg) translate(18px,-8px)
}

.transform-card>span {
    font: 500 9px "DM Mono",monospace;
    color: #ff914d
}

.transform-card h3 {
    font-size: 42px;
    line-height: .9;
    letter-spacing: -.06em;
    margin: 60px 0 10px
}

.transform-card p {
    margin: 0;
    color: #999;
    font: 500 9px "DM Mono",monospace
}

.fake-layout {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 25px;
    height: 70px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px
}

.fake-layout i {
    display: block;
    background: #303030
}

.fake-layout i:nth-child(1) {
    grid-row: 1/3
}

.fake-layout i:nth-child(2) {
    background: #4a4a4a
}

.fake-layout.live i {
    background: linear-gradient(135deg,#ff914d,#a02d37)
}

.fake-layout.live i:nth-child(2) {
    opacity: .45
}

.fake-layout.live i:nth-child(3) {
    opacity: .75
}

.fake-layout.live i:nth-child(4) {
    opacity: .3
}

.transform-arrow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--cs-line);
    z-index: 5;
    font-size: 25px;
    box-shadow: 0 20px 40px rgba(0,0,0,.12)
}

.transform-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(9,9,9,.14);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    animation: spin 15s linear infinite
}

.transform-copy {
    max-width: 620px;
    margin: 50px 0 0 auto
}

.transform-copy p {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -.02em
}

.cs-results {
    background: #090909;
    color: #f3f3ef;
    padding: 150px 0 135px
}

.results-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3,1fr);
    border-top: 1px solid var(--cs-line-dark);
    border-bottom: 1px solid var(--cs-line-dark);
    margin-top: 70px
}

.result-hero,.result-item {
    min-height: 360px;
    padding: 30px;
    border-right: 1px solid var(--cs-line-dark);
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.result-item:last-child {
    border-right: 0
}

.result-hero small,.result-item small {
    font: 500 8px "DM Mono",monospace;
    color: #777;
    margin-bottom: auto
}

.result-hero strong,.result-item strong {
    font-size: clamp(65px,7vw,105px);
    line-height: .8;
    letter-spacing: -.08em;
    font-weight: 700
}

.result-hero p,.result-item p {
    margin: 18px 0 0;
    font: 500 9px "DM Mono",monospace;
    color: #aaa;
    text-transform: uppercase
}

.result-meter {
    height: 3px;
    background: #333;
    margin-top: 28px
}

.result-meter i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#ff914d,#a02d37);
    transition: width 1.8s var(--cs-ease)
}

.result-hero.is-visible .result-meter i {
    width: 68%
}

.results-note {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-top: 50px
}

.results-note span {
    font: 500 9px "DM Mono",monospace;
    color: #ff914d
}

.results-note p {
    margin: 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.7;
    color: #aaa
}

.cs-testimonial {
    padding: 160px 0;
    background: #ff914d;
    color: #fff;
}

.quote-mark {
    font-size: 100px;
    line-height: .5;
    font-family: Georgia,serif
}

.cs-testimonial blockquote {
    max-width: 1120px;
    margin: 50px 0 75px;
    font-size: clamp(42px,5.7vw,86px);
    line-height: .98;
    letter-spacing: -.065em;
    font-weight: 700
}

.quote-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 25px;
    border-top: 1px solid rgba(9,9,9,.3)
}

.avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #090909;
    color: #fff;
    font: 500 9px "DM Mono",monospace
}

.quote-person div:not(.avatar) {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.quote-person strong {
    font-size: 12px
}

.quote-person span {
    font: 500 8px "DM Mono",monospace
}

.quote-project {
    margin-left: auto
}

.cs-closing {
    padding: 150px 0 80px
}

.closing-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 10vw;
    padding: 85px 0 120px
}

.closing-grid h2 {
    font-size: clamp(55px,7vw,105px);
    line-height: .9;
    letter-spacing: -.07em;
    margin: 0
}

.closing-grid p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    max-width: 460px;
    margin: 0 0 40px
}

.cs-text-link {
    display: inline-flex;
    gap: 50px;
    padding: 15px 0;
    border-bottom: 1px solid #111;
    font: 500 9px "DM Mono",monospace;
    text-transform: uppercase;
    transition: gap .4s var(--cs-ease)
}

.cs-text-link:hover {
    gap: 70px
}

.next-project {
    border-top: 1px solid var(--cs-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 27px 0
}

.next-project>span {
    font: 500 9px "DM Mono",monospace;
    color: #777
}

.next-project a {
    display: flex;
    align-items: center;
    gap: 50px;
    font-size: 20px;
    letter-spacing: -.03em
}

.next-project i {
    font-style: normal;
    font-size: 17px;
    transition: transform .3s
}

.next-project a:hover i {
    transform: translate(5px,-5px)
}

.reveal {
    opacity: 0;
    transform: translateY(45px);
    transition: opacity .9s var(--cs-ease),transform .9s var(--cs-ease)
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0)
}

.solution-row.reveal:nth-child(2) {
    transition-delay: .08s
}

.solution-row.reveal:nth-child(3) {
    transition-delay: .16s
}

.solution-row.reveal:nth-child(4) {
    transition-delay: .24s
}

@keyframes orbFloat {
    0% {
        transform: translate3d(0,0,0) scale(1)
    }

    100% {
        transform: translate3d(-25px,20px,0) scale(1.08)
    }
}

@keyframes chipFloat {
    0%,100% {
        transform: translateY(0) rotate(0)
    }

    50% {
        transform: translateY(-12px) rotate(1deg)
    }
}

@keyframes bars {
    0% {
        transform: scaleY(.65);
        transform-origin: bottom
    }

    100% {
        transform: scaleY(1);
        transform-origin: bottom
    }
}

@keyframes speed {
    0% {
        width: 50%
    }

    100% {
        width: 82%
    }
}

@keyframes spin {
    to {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

@media(max-width: 1000px) {
    .cs-container {
        width:min(100% - 40px,1380px)
    }

    .cs-hero-main,.story-grid,.closing-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .cs-hero-side {
        justify-self: start;
        padding-top: 0
    }

    .cs-hero-art {
        height: 75vw
    }

    .cs-facts {
        grid-template-columns: 1fr 1fr
    }

    .cs-facts>div:nth-child(2) {
        border-right: 0
    }

    .cs-facts>div:nth-child(n+3) {
        border-top: 1px solid var(--cs-line)
    }

    .problem-grid {
        grid-template-columns: 1fr
    }

    .problem-card,.problem-card:not(:first-child) {
        padding: 30px 0;
        border-right: 0;
        border-bottom: 1px solid var(--cs-line);
        min-height: 300px
    }

    .problem-card h3 {
        margin: 55px 0 15px
    }

    .signal {
        grid-template-columns: 1fr 1fr
    }

    .signal>p {
        grid-column: 1/-1
    }

    .solution-intro {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .solution-row {
        grid-template-columns: 45px 1fr
    }

    .solution-copy {
        grid-column: 2
    }

    .solution-arrow {
        position: absolute;
        right: 10px;
        top: 48px
    }

    .results-grid {
        grid-template-columns: 1fr 1fr
    }

    .result-hero,.result-item {
        min-height: 280px
    }

    .result-item:nth-child(2) {
        border-right: 0
    }

    .result-item:nth-child(n+3) {
        border-top: 1px solid var(--cs-line-dark)
    }

    .transform-stage {
        height: 500px
    }

    .transform-card {
        width: 40%;
        top: 125px
    }

    .before-card {
        left: 5%
    }

    .after-card {
        right: 5%
    }
}

@media(max-width: 700px) {
    .cs-container {
        width:calc(100% - 30px)
    }

    .cs-hero {
        padding-top: 115px
    }

    .cs-kicker,.cs-section-head {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .cs-kicker span:last-child,.cs-section-head p {
        justify-self: start
    }

    .cs-hero-main {
        padding: 55px 0 65px
    }

    .cs-hero-title h1 {
        font-size: clamp(55px,15vw,90px)
    }

    .cs-hero-art {
        height: 92vw;
        min-height: 340px
    }

    .art-window {
        left: 6%;
        right: 6%;
        top: 10%;
        bottom: 10%
    }

    .window-copy {
        left: 8%;
        top: 24%
    }

    .window-copy h2 {
        font-size: clamp(38px,11vw,65px)
    }

    .art-chip {
        font-size: 7px;
        padding: 8px
    }

    .chip-one {
        top: 13%
    }

    .chip-two {
        right: 1%;
        top: 58%
    }

    .chip-three {
        left: 5%;
        bottom: 4%
    }

    .cs-facts {
        grid-template-columns: 1fr
    }

    .cs-facts>div,.cs-facts>div:not(:first-child) {
        padding: 18px 0;
        border-right: 0;
        border-top: 1px solid var(--cs-line)
    }

    .cs-story,.cs-transformation {
        padding: 100px 0
    }

    .cs-problem {
        padding-bottom: 100px
    }

    .cs-solution {
        padding: 100px 0
    }

    .cs-results {
        padding: 100px 0
    }

    .cs-testimonial {
        padding: 105px 0
    }

    .cs-closing {
        padding: 100px 0 50px
    }

    .story-grid,.closing-grid {
        padding-top: 55px
    }

    .story-big h2,.closing-grid h2 {
        font-size: clamp(46px,13vw,70px)
    }

    .signal {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .signal>p {
        grid-column: auto
    }

    .solution-intro h2 {
        font-size: clamp(52px,14vw,72px)
    }

    .solution-row {
        grid-template-columns: 32px 1fr;
        gap: 15px;
        padding: 38px 0
    }

    .solution-title h3 {
        font-size: 34px
    }

    .solution-copy {
        grid-column: 2;
        padding-top: 15px
    }

    .solution-arrow {
        top: 38px
    }

    .transform-stage {
        height: 620px
    }

    .transform-card {
        width: 74%;
        height: 220px
    }

    .before-card {
        left: 4%;
        top: 115px
    }

    .after-card {
        right: 4%;
        top: 305px
    }

    .transform-arrow {
        top: 275px;
        width: 55px;
        height: 55px;
        font-size: 18px
    }

    .transform-orbit {
        width: 160px;
        height: 160px
    }

    .results-grid {
        grid-template-columns: 1fr
    }

    .result-hero,.result-item {
        min-height: 220px;
        border-right: 0;
        border-bottom: 1px solid var(--cs-line-dark)
    }

    .result-item:nth-child(n+3) {
        border-top: 0
    }

    .results-note {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .cs-testimonial blockquote {
        font-size: clamp(38px,10vw,58px);
        margin: 35px 0 55px
    }

    .quote-project {
        display: none
    }

    .next-project {
        align-items: flex-start;
        gap: 20px;
        flex-direction: column
    }

    .next-project a {
        gap: 25px
    }
}

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

    .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }

    .art-glow,.window-orb,.art-chip,.fidelity-ui i,.speed-ui b i,.transform-orbit {
        animation: none
    }

    .cs-hero-art:hover .art-window,.transform-stage:hover .before-card,.transform-stage:hover .after-card {
        transform: none
    }
}

/* Shared additions for all case studies */
.case-study-page .cs-progress,.case-study-page .case-progress {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: transparent;
    z-index: 10000;
    pointer-events: none
}

.case-study-page .cs-progress span,.case-study-page .case-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg,#ff914d,#ff4d19,#a02d37);
    box-shadow: 0 0 18px rgba(255,77,25,.45)
}

.cs-section-spaced {
    margin-top: 100px
}

/* Project-specific visual treatments are centralized here so the PHP pages stay presentation-free. */
/* aureka-case-study.php project artwork */
body.aureka-case {
    --au-orange: #ff914d;
    --au-red: #a02d37;
    --au-teal: #b7d7c9;
    --au-paper: #f5f3ed;
    --au-line: #383838;
    --au-ink: #111
}

body.aureka-case .cs-hero,body.aureka-case .cs-story,body.aureka-case .cs-problem,body.aureka-case .cs-solution,body.aureka-case .au-gallery,body.aureka-case .cs-results,body.aureka-case .cs-testimonial,body.aureka-case .cs-closing {
    position: relative;
    overflow: hidden
}

body.aureka-case .cs-hero-title h1 em,body.aureka-case .story-big em,body.aureka-case .solution-intro h2 em,body.aureka-case .closing-grid h2 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(100deg,#ff914d,#a02d37);
    -webkit-background-clip: text;
    background-clip: text
}

body.aureka-case .cs-kicker b,body.aureka-case .cs-section-head b,body.aureka-case .solution-intro b {
    color: #ff914d
}

body.aureka-case .cs-facts {
    border-color: #383838
}

body.aureka-case .cs-facts span {
    color: #999
}

body.aureka-case .cs-facts strong {
    color: #f5f3ed
}

.au-hero-art {
    height: clamp(390px,52vw,650px);
    margin: 42px 0 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #111;
    isolation: isolate
}

.au-grid {
    position: absolute;
    inset: 0;
    opacity: .65;
    background-image: linear-gradient(#383838 1px,transparent 1px),linear-gradient(90deg,#383838 1px,transparent 1px);
    background-size: 8.33% 16.66%;
    mask-image: linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent)
}

.au-glow {
    position: absolute;
    width: 68%;
    aspect-ratio: 1;
    left: 15%;
    top: -18%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(183,215,201,.2),rgba(255,145,77,.12) 42%,transparent 70%);
    filter: blur(8px)
}

.au-label {
    position: absolute;
    z-index: 3;
    font: 10px 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #aaa
}

.au-label.a {
    left: 4%;
    top: 6%
}

.au-label.b {
    right: 4%;
    bottom: 6%
}

.au-system {
    position: absolute;
    left: 12%;
    top: 13%;
    width: 76%;
    height: 74%;
    border: 1px solid #4a5551;
    background: #171b19;
    box-shadow: 0 28px 90px #0008;
    transform: rotate(-1deg);
    overflow: hidden
}

.au-system-top {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #383838;
    color: #aaa;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em
}

.au-system-top b {
    color: #b7d7c9;
    font-weight: 400
}

.au-system-body {
    position: absolute;
    inset: 38px 0 0;
    background: linear-gradient(120deg,#202a26,#111614 70%);
    color: #f5f3ed;
    padding: clamp(18px,4vw,48px);
    overflow: hidden
}

.au-system-body:before {
    content: '';
    position: absolute;
    width: 48%;
    aspect-ratio: 1;
    border: 1px solid #60786d;
    border-radius: 50%;
    right: -4%;
    top: 4%;
    box-shadow: 0 0 0 25px #b7d7c908,0 0 0 60px #b7d7c905
}

.au-wordmark {
    position: relative;
    z-index: 2;
    font-size: clamp(20px,3vw,38px);
    font-weight: 800;
    letter-spacing: -.07em
}

.au-wordmark span {
    color: #b7d7c9
}

.au-kicker {
    position: relative;
    z-index: 2;
    margin-top: clamp(18px,4vw,42px);
    font: 9px 'DM Mono',monospace;
    letter-spacing: .16em;
    color: #b7d7c9
}

.au-headline {
    position: relative;
    z-index: 2;
    font-size: clamp(30px,6vw,76px);
    line-height: .9;
    letter-spacing: -.08em;
    font-weight: 800;
    margin: 14px 0;
    max-width: 70%
}

.au-headline em {
    font-style: normal;
    color: #b7d7c9
}

.au-description {
    position: relative;
    z-index: 2;
    max-width: 270px;
    color: #b4bcb7;
    font-size: clamp(8px,.9vw,12px);
    line-height: 1.7
}

.au-system-foot {
    position: absolute;
    left: clamp(18px,4vw,48px);
    right: clamp(18px,4vw,48px);
    bottom: 18px;
    border-top: 1px solid #4a5551;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    color: #9da7a1;
    font: 8px 'DM Mono',monospace;
    letter-spacing: .1em
}

.au-chip {
    position: absolute;
    z-index: 4;
    border: 1px solid #65796f;
    background: #111;
    padding: 11px 13px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #eee;
    box-shadow: 0 12px 30px #0005
}

.au-chip b {
    color: #b7d7c9;
    margin-right: 6px
}

.au-chip.c1 {
    left: 4%;
    top: 30%
}

.au-chip.c2 {
    right: 3%;
    top: 23%
}

.au-chip.c3 {
    right: 6%;
    bottom: 12%
}

.au-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px
}

.au-pill-list span {
    border: 1px solid #383838;
    padding: 8px 10px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #ddd
}

.au-statement {
    display: grid;
    grid-template-columns: .7fr 1.1fr 1fr;
    gap: 26px;
    align-items: center;
    border: 1px solid #383838;
    padding: clamp(22px,4vw,48px);
    margin-top: 30px;
    background: linear-gradient(120deg,#18201c,#111)
}

.au-statement>span {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #b7d7c9
}

.au-statement strong {
    font-size: clamp(26px,4vw,52px);
    line-height: .98;
    letter-spacing: -.06em
}

.au-statement p {
    font-size: 13px;
    line-height: 1.8;
    color: #b8b8b8;
    margin: 0
}

.au-gallery {
    padding: clamp(70px,10vw,130px) 0;
    background: #0d0d0d;
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838
}

.au-gallery-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-template-rows: 250px 250px;
    gap: 12px;
    margin-top: 38px
}

.au-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #191d1b
}

.au-tile small {
    position: absolute;
    left: 17px;
    top: 15px;
    z-index: 2;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #eee
}

.au-tile.main {
    grid-row: span 2;
    background: #c4d9cf;
    color: #18221d;
    display: flex;
    align-items: flex-end;
    padding: clamp(22px,4vw,48px)
}

.au-tile.main:before {
    content: '';
    position: absolute;
    right: 5%;
    top: 17%;
    width: 54%;
    height: 70%;
    border: 1px solid #506d60;
    background: linear-gradient(145deg,#203c30,#111b16);
    clip-path: polygon(0 0,100% 12%,100% 100%,0 88%);
    box-shadow: 0 20px 50px #0005
}

.au-tile.main:after {
    content: 'AUREKA';
    position: absolute;
    right: 10%;
    top: 39%;
    font-size: clamp(20px,3vw,40px);
    font-weight: 800;
    letter-spacing: -.08em;
    color: #d8e8df;
    transform: rotate(5deg)
}

.au-tile.main h3 {
    position: relative;
    z-index: 2;
    font-size: clamp(32px,5vw,64px);
    line-height: .92;
    letter-spacing: -.07em;
    max-width: 52%
}

.au-tile.main h3 em {
    font-style: normal;
    color: #a02d37
}

.au-tile.service {
    padding: 30px;
    background: linear-gradient(135deg,#b7d7c9,#769b89);
    color: #17221d;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.au-rings {
    position: absolute;
    right: 12%;
    top: 20%;
    width: 100px;
    height: 100px;
    border: 1px solid #416555;
    border-radius: 50%;
    box-shadow: 0 0 0 12px #41655520,0 0 0 24px #41655512
}

.au-rings:after {
    content: '360°';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 16px 'DM Mono',monospace
}

.au-tile.service strong {
    font-size: clamp(24px,3vw,38px);
    line-height: 1;
    letter-spacing: -.06em
}

.au-tile.service p {
    font-size: 12px;
    max-width: 240px;
    line-height: 1.7
}

.au-tile.dark {
    padding: 30px;
    background: #171b19;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.au-type {
    font-size: clamp(36px,6vw,76px);
    font-weight: 800;
    letter-spacing: -.09em;
    line-height: .9;
    color: #f5f3ed
}

.au-type em {
    font-style: normal;
    color: #b7d7c9
}

.au-tile.dark p {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #aaa;
    margin: 15px 0 0
}

body.aureka-case .problem-line i,body.aureka-case .result-meter i {
    background: linear-gradient(90deg,#b7d7c9,#ff914d)
}

body.aureka-case .result-hero strong {
    color: #b7d7c9
}

body.aureka-case .cs-testimonial {
    background: #171b19
}

body.aureka-case .quote-mark {
    color: #ff914d
}

body.aureka-case .avatar {
    background: linear-gradient(135deg,#b7d7c9,#557d69);
    color: #111
}

body.aureka-case .quote-project {
    color: #b7d7c9
}

body.aureka-case .cs-closing .cs-section-head p {
    color: #f5f3ed
}

@media(max-width: 760px) {
    .au-hero-art {
        height:430px;
        margin-top: 30px
    }

    .au-system {
        width: 82%;
        left: 8%;
        height: 68%;
        top: 15%
    }

    .au-chip {
        padding: 8px;
        font-size: 7px
    }

    .au-chip.c1 {
        left: 2%;
        top: 9%
    }

    .au-chip.c2 {
        right: 2%;
        top: 7%
    }

    .au-chip.c3 {
        right: 4%;
        bottom: 5%
    }

    .au-statement {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .au-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 270px 220px
    }

    .au-tile.main {
        grid-row: span 2
    }

    .au-tile.main h3 {
        max-width: 72%
    }
}

@media(max-width: 480px) {
    .au-hero-art {
        height:360px
    }

    .au-label {
        font-size: 7px
    }

    .au-system {
        width: 86%;
        left: 5%;
        height: 65%;
        top: 16%
    }

    .au-headline {
        max-width: 82%
    }

    .au-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 310px 220px 220px
    }

    .au-tile.main {
        grid-row: auto
    }

    .au-rings {
        width: 70px;
        height: 70px
    }
}

/* dr-hitasha-clinic-case-study.php project artwork */
/* Clinic-specific art direction, layered over devsid.in's shared case-study system. */
body.hitasha-case {
    --hc-peach: #e9c3b4;
    --hc-clay: #bd8c7a;
    --hc-rose: #a65b52;
    --hc-ink: #111;
    --hc-line: #383838;
    --hc-paper: #f5f3ed
}

body.hitasha-case .cs-hero,body.hitasha-case .cs-story,body.hitasha-case .cs-problem,body.hitasha-case .cs-solution,body.hitasha-case .hc-gallery,body.hitasha-case .cs-results,body.hitasha-case .cs-testimonial,body.hitasha-case .cs-closing {
    position: relative;
    overflow: hidden
}

body.hitasha-case .cs-hero-title h1 em,body.hitasha-case .story-big em,body.hitasha-case .solution-intro h2 em,body.hitasha-case .hc-statement em,body.hitasha-case .closing-grid h2 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(100deg,#ff914d,#a02d37);
    -webkit-background-clip: text;
    background-clip: text
}

body.hitasha-case .cs-kicker b,body.hitasha-case .cs-section-head b,body.hitasha-case .solution-intro b {
    color: #ff914d
}

body.hitasha-case .cs-facts {
    border-color: #383838
}

body.hitasha-case .cs-facts span {
    color: #999
}

body.hitasha-case .cs-facts strong {
    color: #f5f3ed
}

.hc-hero-art {
    height: clamp(400px,53vw,660px);
    margin: 42px 0 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #111;
    isolation: isolate
}

.hc-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: linear-gradient(#383838 1px,transparent 1px),linear-gradient(90deg,#383838 1px,transparent 1px);
    background-size: 8.33% 16.66%;
    mask-image: linear-gradient(90deg,transparent,#000 15%,#000 88%,transparent)
}

.hc-glow {
    position: absolute;
    width: 68%;
    aspect-ratio: 1;
    left: 17%;
    top: -12%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(233,195,180,.26),rgba(166,91,82,.12) 42%,transparent 70%);
    filter: blur(7px)
}

.hc-orbit {
    position: absolute;
    border: 1px solid rgba(233,195,180,.4);
    border-radius: 50%;
    transform: rotate(-17deg)
}

.hc-orbit.one {
    width: 56%;
    height: 72%;
    left: 21%;
    top: 12%
}

.hc-orbit.two {
    width: 68%;
    height: 88%;
    left: 16%;
    top: 3%;
    border-color: rgba(255,145,77,.23)
}

.hc-label {
    position: absolute;
    z-index: 3;
    font: 10px/1.4 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #aaa
}

.hc-label.a {
    left: 4%;
    top: 7%
}

.hc-label.b {
    right: 4%;
    bottom: 7%
}

.hc-browser {
    position: absolute;
    z-index: 2;
    width: 64%;
    height: 72%;
    left: 17%;
    top: 13%;
    border: 1px solid #5b514e;
    background: #1b1918;
    box-shadow: 0 28px 90px #0009;
    transform: rotate(-2deg);
    overflow: hidden
}

.hc-browser-top {
    height: 34px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #49403d;
    color: #bbb;
    font: 8px 'DM Mono',monospace;
    letter-spacing: .08em
}

.hc-dots {
    display: flex;
    gap: 4px
}

.hc-dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7d716d
}

.hc-site {
    position: absolute;
    inset: 34px 0 0;
    background: #f1ded4;
    color: #302622;
    overflow: hidden
}

.hc-site-nav {
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    font-size: clamp(8px,.8vw,12px);
    border-bottom: 1px solid #d6b9ad
}

.hc-site-nav strong {
    letter-spacing: .08em;
    font-size: clamp(10px,1.2vw,17px)
}

.hc-site-nav span {
    font-size: clamp(6px,.65vw,9px);
    letter-spacing: .07em
}

.hc-site-hero {
    position: absolute;
    inset: 43px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 7% 5%;
    gap: 3%;
    background: linear-gradient(120deg,#f1ded4 0%,#e8c5b7 100%)
}

.hc-site-copy {
    position: relative;
    z-index: 2
}

.hc-site-copy small {
    font: 8px 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #8d5f54
}

.hc-site-copy h2 {
    font-size: clamp(22px,4vw,58px);
    line-height: .92;
    letter-spacing: -.075em;
    margin: 15px 0 12px;
    font-weight: 700
}

.hc-site-copy h2 em {
    font-style: normal;
    color: #a65b52
}

.hc-site-copy p {
    max-width: 230px;
    font-size: clamp(7px,.8vw,11px);
    line-height: 1.65;
    color: #6b5149
}

.hc-book {
    display: inline-block;
    margin-top: 9px;
    padding: 10px 12px;
    background: #4a302b;
    color: #fff4ee;
    font: 8px 'DM Mono',monospace;
    letter-spacing: .05em
}

.hc-portrait {
    position: absolute;
    right: 5%;
    bottom: 0;
    width: 42%;
    height: 84%;
    background: linear-gradient(145deg,#d4a391,#ba8879 55%,#7e5d53);
    border-radius: 48% 48% 0 0;
    overflow: hidden
}

.hc-portrait:before {
    content: '';
    position: absolute;
    width: 42%;
    height: 37%;
    left: 29%;
    top: 10%;
    border-radius: 48% 48% 42% 42%;
    background: linear-gradient(90deg,#5d3c32,#bb8c78 45%,#d8ad99 65%,#68473d);
    box-shadow: 0 -18px 0 8px #34241f
}

.hc-portrait:after {
    content: '';
    position: absolute;
    width: 76%;
    height: 48%;
    left: 12%;
    bottom: -12%;
    border-radius: 45% 45% 0 0;
    background: linear-gradient(90deg,#f3e8e0,#fff6f0 50%,#d9b5a8)
}

.hc-phone {
    position: absolute;
    z-index: 4;
    width: 17%;
    height: 50%;
    right: 7%;
    bottom: 7%;
    border: 4px solid #252323;
    border-radius: 22px;
    background: #f1ded4;
    box-shadow: 0 18px 50px #0008;
    overflow: hidden;
    transform: rotate(5deg)
}

.hc-phone-top {
    height: 22px;
    background: #252323;
    color: #eee;
    text-align: center;
    font: 7px 'DM Mono',monospace;
    padding-top: 6px
}

.hc-phone-image {
    height: 42%;
    margin: 9px;
    background: linear-gradient(145deg,#d9b2a3,#a96d60);
    border-radius: 50% 50% 8px 8px;
    position: relative;
    overflow: hidden
}

.hc-phone-image:after {
    content: '';
    position: absolute;
    left: 22%;
    top: 13%;
    width: 56%;
    height: 58%;
    border-radius: 50% 50% 42% 42%;
    background: linear-gradient(90deg,#5c3e35,#c99b86,#604137)
}

.hc-phone-lines {
    padding: 0 10px
}

.hc-phone-lines i {
    display: block;
    height: 4px;
    background: #c49c8d;
    margin: 6px 0
}

.hc-phone-lines i:first-child {
    width: 80%;
    background: #4a302b
}

.hc-float {
    position: absolute;
    z-index: 5;
    border: 1px solid rgba(255,145,77,.65);
    background: #111;
    padding: 11px 13px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #eee;
    box-shadow: 0 12px 30px #0005
}

.hc-float b {
    color: #ff914d;
    margin-right: 6px
}

.hc-float.f1 {
    left: 7%;
    top: 28%
}

.hc-float.f2 {
    right: 4%;
    top: 20%
}

.hc-float.f3 {
    left: 15%;
    bottom: 10%;
    color: #ff914d
}

.hc-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px
}

.hc-pill-list span {
    border: 1px solid #383838;
    padding: 8px 10px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #ddd
}

.hc-statement {
    display: grid;
    grid-template-columns: .7fr 1.1fr 1fr;
    gap: 26px;
    align-items: center;
    border: 1px solid #383838;
    padding: clamp(22px,4vw,48px);
    margin-top: 30px;
    background: linear-gradient(120deg,#191716,#111)
}

.hc-statement>span {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #ff914d
}

.hc-statement strong {
    font-size: clamp(26px,4vw,52px);
    line-height: .98;
    letter-spacing: -.06em
}

.hc-statement p {
    font-size: 13px;
    line-height: 1.8;
    color: #b8b8b8;
    margin: 0
}

.hc-gallery {
    padding: clamp(70px,10vw,130px) 0;
    background: #0d0d0d;
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838
}

.hc-gallery-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-template-rows: 250px 250px;
    gap: 12px;
    margin-top: 38px
}

.hc-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #191716
}

.hc-tile small {
    position: absolute;
    left: 17px;
    top: 15px;
    z-index: 2;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #eee
}

.hc-tile.hero-tile {
    grid-row: span 2;
    background: #ead0c4;
    color: #302622;
    display: flex;
    align-items: flex-end;
    padding: clamp(22px,4vw,48px)
}

.hc-tile.hero-tile:before {
    content: '';
    position: absolute;
    right: -5%;
    top: 7%;
    width: 65%;
    height: 90%;
    border-radius: 48% 48% 0 0;
    background: linear-gradient(145deg,#d9ad9b,#b67c6e 55%,#79554b)
}

.hc-tile.hero-tile:after {
    content: '';
    position: absolute;
    right: 17%;
    top: 17%;
    width: 26%;
    height: 33%;
    border-radius: 48% 48% 42% 42%;
    background: linear-gradient(90deg,#4b312a,#bd8a77,#56382e);
    box-shadow: 0 -15px 0 7px #33231f
}

.hc-tile.hero-tile h3 {
    position: relative;
    z-index: 2;
    font-size: clamp(32px,5vw,64px);
    line-height: .92;
    letter-spacing: -.07em;
    max-width: 50%
}

.hc-tile.hero-tile h3 em {
    font-style: normal;
    color: #a65b52
}

.hc-tile.service-tile {
    background: linear-gradient(135deg,#e9c3b4,#d8a99a);
    color: #3a2823;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.hc-service-icon {
    position: absolute;
    right: 12%;
    top: 20%;
    width: 90px;
    height: 90px;
    border: 1px solid #a87869;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: #a65b52
}

.hc-tile.service-tile strong {
    font-size: clamp(24px,3vw,38px);
    line-height: 1;
    letter-spacing: -.06em
}

.hc-tile.service-tile p {
    font-size: 12px;
    max-width: 240px;
    line-height: 1.7
}

.hc-tile.dark-tile {
    padding: 30px;
    background: #171615;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.hc-typemark {
    font-size: clamp(36px,6vw,76px);
    font-weight: 800;
    letter-spacing: -.09em;
    line-height: .9;
    color: #f5e6df
}

.hc-typemark em {
    font-style: normal;
    color: #ff914d
}

.hc-tile.dark-tile p {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #aaa;
    margin: 15px 0 0
}

.hc-service-list {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 12px;
    margin-top: 30px
}

.hc-service {
    padding: 22px;
    border: 1px solid #383838;
    min-height: 170px
}

.hc-service small {
    font: 10px 'DM Mono',monospace;
    color: #ff914d
}

.hc-service strong {
    display: block;
    font-size: clamp(17px,2vw,24px);
    line-height: 1.15;
    margin-top: 24px
}

.hc-service p {
    font-size: 12px;
    line-height: 1.7;
    color: #aaa;
    margin: 10px 0 0
}

body.hitasha-case .problem-line i,body.hitasha-case .result-meter i {
    background: linear-gradient(90deg,#ff914d,#a02d37)
}

body.hitasha-case .result-hero strong {
    color: #e9c3b4
}

body.hitasha-case .cs-testimonial {
    background: #171514
}

body.hitasha-case .quote-mark {
    color: #ff914d
}

body.hitasha-case .avatar {
    background: linear-gradient(135deg,#e9c3b4,#a65b52);
    color: #111
}

body.hitasha-case .quote-project {
    color: #ff914d
}

body.hitasha-case .cs-closing .cs-section-head p {
    color: #f5f3ed
}

@media(max-width: 760px) {
    .hc-hero-art {
        height:430px;
        margin-top: 30px
    }

    .hc-browser {
        width: 78%;
        left: 8%;
        height: 65%;
        top: 15%
    }

    .hc-phone {
        width: 22%;
        height: 43%;
        right: 4%;
        bottom: 5%
    }

    .hc-float {
        padding: 8px;
        font-size: 7px
    }

    .hc-float.f1 {
        left: 2%;
        top: 10%
    }

    .hc-float.f2 {
        right: 2%;
        top: 9%
    }

    .hc-float.f3 {
        left: 6%;
        bottom: 5%
    }

    .hc-statement {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .hc-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 270px 220px
    }

    .hc-tile.hero-tile {
        grid-row: span 2
    }

    .hc-service-list {
        grid-template-columns: 1fr
    }

    .hc-tile.hero-tile h3 {
        max-width: 75%
    }
}

@media(max-width: 480px) {
    .hc-hero-art {
        height:360px
    }

    .hc-label {
        font-size: 7px
    }

    .hc-browser {
        width: 83%;
        left: 4%;
        height: 61%
    }

    .hc-phone {
        width: 25%;
        height: 39%
    }

    .hc-gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 330px 230px 230px
    }

    .hc-tile.hero-tile {
        grid-row: auto
    }

    .hc-service-icon {
        width: 65px;
        height: 65px;
        right: 9%;
        top: 17%
    }
}

@media(prefers-reduced-motion:reduce) {
    .hc-browser,.hc-phone {
        transform: none
    }
}

/* gavrano-case-study.php project artwork */
/* Gavrano-specific art direction. Uses devsid.in's shared case-study system. */
body.gavrano-case {
    --gv-orange: #ff914d;
    --gv-red: #a02d37;
    --gv-ink: #111111;
    --gv-line: #383838;
    --gv-paper: #f5f3ed;
}

body.gavrano-case .cs-hero, body.gavrano-case .cs-story, body.gavrano-case .cs-problem, body.gavrano-case .cs-solution, body.gavrano-case .gv-gallery, body.gavrano-case .cs-results, body.gavrano-case .cs-testimonial, body.gavrano-case .cs-closing {
    position: relative;
    overflow: hidden;
}

body.gavrano-case .cs-hero-title h1 em, body.gavrano-case .story-big em, body.gavrano-case .solution-intro h2 em, body.gavrano-case .gv-statement em, body.gavrano-case .cs-closing .cs-section-head p em, body.gavrano-case .closing-grid h2 em {
    color: transparent;
    background: linear-gradient(100deg,var(--gv-orange),var(--gv-red));
    -webkit-background-clip: text;
    background-clip: text;
    font-style: normal;
}

body.gavrano-case .cs-kicker b, body.gavrano-case .cs-section-head b, body.gavrano-case .solution-intro b {
    color: var(--gv-orange);
}

.gv-hero-art {
    height: clamp(410px,54vw,690px);
    margin: 42px 0 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #111;
    isolation: isolate;
}

.gv-grid {
    position: absolute;
    inset: 0;
    opacity: .52;
    background-image: linear-gradient(#383838 1px,transparent 1px),linear-gradient(90deg,#383838 1px,transparent 1px);
    background-size: 8.33% 16.66%;
    mask-image: linear-gradient(90deg,transparent,#000 18%,#000 85%,transparent);
}

.gv-radial {
    position: absolute;
    width: 56%;
    aspect-ratio: 1;
    left: 27%;
    top: 5%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,145,77,.23),rgba(160,45,55,.13) 43%,transparent 70%);
    filter: blur(7px);
}

.gv-orbit {
    position: absolute;
    border: 1px solid rgba(255,145,77,.45);
    border-radius: 50%;
    transform: rotate(-18deg);
}

.gv-orbit.orbit-one {
    width: 47%;
    height: 64%;
    left: 24%;
    top: 15%;
}

.gv-orbit.orbit-two {
    width: 60%;
    height: 80%;
    left: 19%;
    top: 6%;
    border-color: rgba(160,45,55,.35);
}

.gv-hero-label {
    position: absolute;
    z-index: 2;
    font: 10px/1.4 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #a8a8a8;
}

.gv-hero-label.label-a {
    left: 4%;
    top: 7%;
}

.gv-hero-label.label-b {
    right: 4%;
    bottom: 7%;
}

.gv-pack {
    position: absolute;
    z-index: 3;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    overflow: hidden;
    font-family: 'Manrope',sans-serif;
}

.gv-pack-main {
    width: 31%;
    height: 65%;
    left: 31%;
    top: 17%;
    background: linear-gradient(145deg,#ff914d 0%,#f16c3e 52%,#a02d37 100%);
    color: #111;
    padding: 20px;
    transform: rotate(-5deg);
}

.gv-pack-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em;
    border-bottom: 1px solid rgba(17,17,17,.35);
    padding-bottom: 12px;
}

.gv-pack-top span {
    opacity: .65;
}

.gv-pack-mark {
    font-size: clamp(70px,10vw,150px);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.1em;
    margin: 17% 0 0 -5px;
}

.gv-pack-mark span, .gv-gallery-mark span, .gv-bag b span {
    color: #f5f3ed;
}

.gv-pack-word {
    font-size: clamp(17px,2.5vw,36px);
    font-weight: 800;
    letter-spacing: .09em;
}

.gv-pack-tag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    font: 11px/1.35 'DM Mono',monospace;
    letter-spacing: .08em;
}

.gv-pack-stripe {
    position: absolute;
    right: -12%;
    top: 48%;
    width: 110%;
    height: 14%;
    background: #111;
    transform: rotate(-24deg);
    opacity: .92;
}

.gv-pack-side {
    width: 23%;
    height: 51%;
    left: 60%;
    top: 26%;
    padding: 16px;
    background: #f5f3ed;
    color: #111;
    transform: rotate(8deg);
}

.gv-side-symbol {
    font-size: clamp(48px,7vw,90px);
    line-height: 1;
    margin-top: 22%;
    color: #a02d37;
}

.gv-side-copy {
    font-size: clamp(16px,2vw,28px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -.06em;
    margin-top: 10%;
}

.gv-pack-side-foot {
    position: absolute;
    bottom: 15px;
    left: 16px;
    right: 16px;
    font: 8px 'DM Mono',monospace;
    border-top: 1px solid #bbb;
    padding-top: 8px;
}

.gv-pack-small {
    width: 18%;
    height: 22%;
    left: 17%;
    top: 57%;
    background: #252525;
    color: #f5f3ed;
    padding: 14px;
    transform: rotate(7deg);
    border: 1px solid #555;
}

.gv-small-stamp {
    font-size: clamp(30px,4vw,54px);
    font-weight: 800;
    color: #ff914d;
    line-height: 1;
}

.gv-pack-small strong {
    display: block;
    font-size: clamp(9px,1vw,13px);
    letter-spacing: .08em;
    margin-top: 10px;
}

.gv-pack-small small {
    display: block;
    font: 8px 'DM Mono',monospace;
    color: #ff914d;
    margin-top: 7px;
}

.gv-float-chip {
    position: absolute;
    z-index: 5;
    border: 1px solid rgba(255,145,77,.65);
    background: #111;
    padding: 11px 14px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #eee;
    box-shadow: 0 12px 30px #0005;
}

.gv-float-chip b {
    color: #ff914d;
    margin-right: 7px;
}

.gv-chip-one {
    left: 8%;
    top: 27%;
}

.gv-chip-two {
    right: 6%;
    top: 19%;
}

.gv-chip-three {
    right: 13%;
    bottom: 14%;
    color: #ff914d;
}

body.gavrano-case .cs-facts {
    border-color: #383838;
}

body.gavrano-case .cs-facts span {
    color: #9a9a9a;
}

body.gavrano-case .cs-facts strong {
    color: #f5f3ed;
}

.gv-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
}

.gv-pill-list span {
    border: 1px solid #383838;
    padding: 8px 10px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #383838;
}

body.gavrano-case .problem-line i, body.gavrano-case .result-meter i {
    background: linear-gradient(90deg,#ff914d,#a02d37);
}

.gv-statement {
    display: grid;
    grid-template-columns: .7fr 1.2fr 1fr;
    gap: 28px;
    align-items: center;
    border: 1px solid #383838;
    padding: clamp(22px,4vw,48px);
    margin-top: 30px;
    background: linear-gradient(120deg,#171717,#111);
}

.gv-statement>span {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #ff914d;
}

.gv-statement strong {
    font-size: clamp(26px,4vw,52px);
    line-height: .98;
    letter-spacing: -.06em;
}

.gv-statement p {
    font-size: 13px;
    line-height: 1.8;
    color: #b8b8b8;
    margin: 0;
}

.gv-wordmark-sample {
    position: relative;
    margin-top: 25px;
    padding: 18px 16px 14px;
    border: 1px solid #383838;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: #171717;
}

.gv-wordmark-sample span {
    font-size: clamp(17px,2.2vw,30px);
    font-weight: 800;
    letter-spacing: .1em;
    color: #f5f3ed;
}

.gv-wordmark-sample i {
    font-size: clamp(35px,5vw,65px);
    font-style: normal;
    font-weight: 800;
    color: #ff914d;
}

.gv-wordmark-sample small {
    position: absolute;
    bottom: 4px;
    left: 16px;
    font: 7px 'DM Mono',monospace;
    color: #888;
    letter-spacing: .1em;
}

.gv-colour-system {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    height: 78px;
    margin-top: 22px;
    position: relative;
    border: 1px solid #383838;
}

.gv-colour-system i:nth-child(1) {
    background: #ff914d;
}

.gv-colour-system i:nth-child(2) {
    background: #a02d37;
}

.gv-colour-system i:nth-child(3) {
    background: #f5f3ed;
}

.gv-colour-system i:nth-child(4) {
    background: #383838;
}

.gv-colour-system span {
    position: absolute;
    left: 10px;
    bottom: 8px;
    color: #111;
    font: 8px 'DM Mono',monospace;
    letter-spacing: .06em;
    mix-blend-mode: difference;
}

.gv-mini-pack-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 22px;
    min-height: 140px;
}

.gv-mini-pack {
    width: 29%;
    min-height: 125px;
    background: linear-gradient(145deg,#ff914d,#e9683e);
    color: #111;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 24px #0004;
    transform: rotate(-3deg);
}

.gv-mini-pack.alt {
    min-height: 108px;
    background: #f5f3ed;
    transform: rotate(3deg);
}

.gv-mini-pack.dark {
    min-height: 136px;
    background: #252525;
    color: #f5f3ed;
    border: 1px solid #555;
    transform: rotate(-1deg);
}

.gv-mini-pack b {
    font-size: 35px;
    line-height: 1;
}

.gv-mini-pack span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.gv-mini-pack small {
    font: 7px 'DM Mono',monospace;
    opacity: .65;
}

.gv-touchpoints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
}

.gv-touchpoints span {
    border: 1px solid #383838;
    padding: 10px;
}

.gv-touchpoints b {
    color: #ff914d;
}

.gv-gallery {
    padding: clamp(70px,10vw,130px) 0;
    background: #0d0d0d;
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838;
}

.gv-gallery-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-rows: 260px 260px;
    gap: 14px;
    margin-top: 34px;
}

.gv-gallery-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #151515;
    min-height: 220px;
}

.gv-gallery-meta {
    position: absolute;
    top: 15px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #aaa;
    font: 8px 'DM Mono',monospace;
    letter-spacing: .1em;
    z-index: 2;
}

.gv-gallery-large {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 45%,#29201d,#111 62%);
}

.gv-gallery-mark {
    font-size: clamp(140px,24vw,300px);
    line-height: .75;
    font-weight: 800;
    letter-spacing: -.13em;
    color: #ff914d;
    text-shadow: 15px 15px 0 #a02d3733;
}

.gv-gallery-large>strong {
    font-size: clamp(24px,4vw,48px);
    letter-spacing: .16em;
    margin-top: 22px;
}

.gv-gallery-large>small {
    margin-top: 12px;
    font: 9px 'DM Mono',monospace;
    color: #999;
    letter-spacing: .12em;
}

.gv-gallery-pack {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 55%,#2c211d,#111 70%);
}

.gv-bag {
    width: 45%;
    height: 68%;
    background: linear-gradient(145deg,#ff914d,#a02d37);
    color: #111;
    position: relative;
    padding: 15px;
    box-shadow: 0 25px 50px #0008;
    transform: rotate(-5deg);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.gv-bag-handle {
    position: absolute;
    width: 35%;
    height: 20px;
    border: 4px solid #ff914d;
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    top: -19px;
    left: 32%;
}

.gv-bag b {
    font-size: clamp(45px,7vw,85px);
    line-height: .8;
}

.gv-bag strong {
    font-size: clamp(10px,1.5vw,17px);
    letter-spacing: .1em;
    margin-top: 13px;
}

.gv-bag small {
    font: 8px/1.4 'DM Mono',monospace;
    margin-top: 15px;
}

.gv-bag i {
    position: absolute;
    width: 120%;
    height: 22%;
    background: #111;
    transform: rotate(-24deg);
    right: -10%;
    bottom: 16%;
}

.gv-gallery-flatlay {
    background: #171717;
}

.gv-flat-shape {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    box-shadow: 0 18px 40px #0007;
}

.gv-flat-shape.shape-a {
    width: 36%;
    height: 58%;
    left: 8%;
    top: 26%;
    background: #ff914d;
    color: #111;
    font-size: clamp(35px,5vw,68px);
    transform: rotate(-8deg);
}

.gv-flat-shape.shape-b {
    width: 27%;
    height: 65%;
    left: 42%;
    top: 23%;
    background: #a02d37;
    color: #f5f3ed;
    font-size: clamp(15px,2vw,25px);
    line-height: .95;
    transform: rotate(5deg);
}

.gv-flat-shape.shape-c {
    width: 24%;
    height: 45%;
    right: 7%;
    top: 34%;
    background: #f5f3ed;
    color: #111;
    font: 8px/1.5 'DM Mono',monospace;
    text-align: center;
    transform: rotate(2deg);
}

.gv-gallery-note {
    color: #8d8d8d;
    font: 10px/1.7 'DM Mono',monospace;
    margin-top: 15px;
}

body.gavrano-case .result-hero strong {
    color: #ff914d;
}

body.gavrano-case .cs-testimonial {
    background: #151515;
}

body.gavrano-case .cs-testimonial blockquote {
    max-width: 900px;
}

body.gavrano-case .quote-mark {
    color: #ff914d;
}

body.gavrano-case .avatar {
    background: linear-gradient(135deg,#ff914d,#a02d37);
    color: #111;
}

body.gavrano-case .quote-project {
    color: #ff914d;
}

body.gavrano-case .cs-closing .cs-section-head p {
    color: #f5f3ed;
}

@media(max-width: 760px) {
    .gv-hero-art {
        height:430px;
        margin-top: 30px;
    }

    .gv-pack-main {
        width: 44%;
        height: 60%;
        left: 22%;
        top: 19%;
        padding: 12px;
    }

    .gv-pack-side {
        width: 31%;
        height: 45%;
        left: 57%;
        top: 31%;
        padding: 10px;
    }

    .gv-pack-small {
        width: 26%;
        height: 19%;
        left: 7%;
        top: 62%;
        padding: 9px;
    }

    .gv-pack-top {
        font-size: 7px;
        padding-bottom: 8px;
    }

    .gv-pack-tag {
        left: 12px;
        bottom: 12px;
        font-size: 8px;
    }

    .gv-chip-one {
        left: 3%;
        top: 15%;
    }

    .gv-chip-two {
        right: 2%;
        top: 12%;
    }

    .gv-chip-three {
        right: 3%;
        bottom: 7%;
    }

    .gv-float-chip {
        padding: 8px;
        font-size: 7px;
    }

    .gv-statement {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gv-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 280px 230px;
    }

    .gv-gallery-large {
        grid-column: span 2;
        grid-row: auto;
    }

    .gv-gallery-mark {
        font-size: clamp(130px,35vw,220px);
    }

    .gv-gallery-large>strong {
        font-size: 28px;
    }

    .gv-bag {
        width: 47%;
        height: 58%;
    }
}

@media(max-width: 480px) {
    .gv-hero-art {
        height:360px;
    }

    .gv-hero-label {
        font-size: 7px;
    }

    .gv-pack-main {
        width: 48%;
        left: 18%;
    }

    .gv-pack-side {
        width: 33%;
        left: 55%;
    }

    .gv-pack-small {
        left: 4%;
        width: 25%;
    }

    .gv-gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 300px 240px 240px;
    }

    .gv-gallery-large {
        grid-column: auto;
    }

    .gv-gallery-meta {
        font-size: 7px;
    }

    .gv-mini-pack-row {
        gap: 7px;
    }

    .gv-mini-pack {
        padding: 8px;
    }

    .gv-touchpoints {
        gap: 6px;
    }

    .gv-touchpoints span {
        padding: 8px;
    }
}

/* icor-riding-community-case-study.php project artwork */
body.icor-case {
    --ic-orange: #ff5a24;
    --ic-red: #a02d37;
    --ic-paper: #f5f3ed;
    --ic-line: #383838;
    --ic-ink: #111;
    --ic-ash: #a8aaa6
}

body.icor-case .cs-hero,body.icor-case .cs-story,body.icor-case .cs-problem,body.icor-case .cs-solution,body.icor-case .ic-gallery,body.icor-case .cs-results,body.icor-case .cs-testimonial,body.icor-case .cs-closing {
    position: relative;
    overflow: hidden
}

body.icor-case .cs-hero-title h1 em,body.icor-case .story-big em,body.icor-case .solution-intro h2 em,body.icor-case .closing-grid h2 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(100deg,#ff5a24,#e5c7a5);
    -webkit-background-clip: text;
    background-clip: text
}

body.icor-case .cs-kicker b,body.icor-case .cs-section-head b,body.icor-case .solution-intro b {
    color: var(--ic-orange)
}

body.icor-case .cs-facts {
    border-color: var(--ic-line)
}

body.icor-case .cs-facts span {
    color: #999
}

body.icor-case .cs-facts strong {
    color: var(--ic-paper)
}

.ic-hero-art {
    height: clamp(390px,53vw,660px);
    margin: 42px 0 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #0b0c0c;
    isolation: isolate
}

.ic-road-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: linear-gradient(#303333 1px,transparent 1px),linear-gradient(90deg,#303333 1px,transparent 1px);
    background-size: 8.33% 16.66%;
    mask-image: linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent)
}

.ic-glow {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    right: -4%;
    top: -28%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(255,90,36,.24),rgba(160,45,55,.1) 45%,transparent 70%);
    filter: blur(10px)
}

.ic-label {
    position: absolute;
    z-index: 3;
    font: 10px 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #a8aaa6
}

.ic-label.a {
    left: 4%;
    top: 6%
}

.ic-label.b {
    right: 4%;
    bottom: 5%;
    text-align: right
}

.ic-crest {
    position: absolute;
    left: 50%;
    top: 48%;
    transform: translate(-50%,-50%) rotate(-5deg);
    width: min(43%,340px);
    aspect-ratio: 1;
    background: #171918;
    border: 1px solid #4b4d4b;
    clip-path: polygon(50% 0,94% 17%,87% 69%,50% 100%,13% 69%,6% 17%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 20px 80px #0009;
    display: none;
}

.ic-crest:before {
    content: '';
    position: absolute;
    inset: 8%;
    border: 1px solid #ff5a24;
    clip-path: polygon(50% 0,94% 17%,87% 69%,50% 100%,13% 69%,6% 17%)
}

.ic-crest small {
    position: relative;
    color: #d0d0ca;
    font: clamp(8px,.9vw,11px) 'DM Mono',monospace;
    letter-spacing: .34em;
    margin-left: .34em
}

.ic-crest strong {
    position: relative;
    color: #f5f3ed;
    font-size: clamp(44px,9vw,100px);
    line-height: .9;
    letter-spacing: -.1em;
    font-weight: 800
}

.ic-crest em {
    position: relative;
    margin-top: 12px;
    color: #ff5a24;
    font: clamp(8px,1vw,12px) 'DM Mono',monospace;
    letter-spacing: .2em;
    font-style: normal
}

.ic-orbit {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(65%,620px);
    aspect-ratio: 1.4;
    border: 1px solid #ff5a2455;
    border-radius: 50%;
    transform: translate(-50%,-50%) rotate(-25deg)
}

.ic-orbit:before,.ic-orbit:after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ff5a24;
    border-radius: 50%;
    box-shadow: 0 0 20px #ff5a24
}

.ic-orbit:before {
    left: 12%;
    top: 21%
}

.ic-orbit:after {
    right: 7%;
    bottom: 18%
}

.ic-hero-note {
    position: absolute;
    left: 5%;
    bottom: 12%;
    font: clamp(12px,2vw,20px) 'DM Mono',monospace;
    letter-spacing: .07em;
    color: #f5f3ed;
    line-height: 1.7
}

.ic-hero-note span {
    color: #ff5a24
}

.ic-stamp {
    position: absolute;
    right: 5%;
    top: 14%;
    width: 86px;
    height: 86px;
    border: 1px solid #64615c;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    color: #d4d0c9;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .12em;
    transform: rotate(12deg)
}

.ic-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px
}

.ic-pill-list span {
    border: 1px solid #383838;
    padding: 8px 10px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #ddd
}

.ic-statement {
    display: grid;
    grid-template-columns: .7fr 1.1fr 1fr;
    gap: 26px;
    align-items: center;
    border: 1px solid #383838;
    padding: clamp(22px,4vw,48px);
    margin-top: 30px;
    background: linear-gradient(120deg,#1a1b1a,#111)
}

.ic-statement>span {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #ff5a24
}

.ic-statement strong {
    font-size: clamp(26px,4vw,52px);
    line-height: .98;
    letter-spacing: -.06em
}

.ic-statement p {
    font-size: 13px;
    line-height: 1.8;
    color: #b8b8b8;
    margin: 0
}

.ic-gallery {
    padding: clamp(70px,10vw,130px) 0;
    background: #0d0e0e;
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838
}

.ic-gallery-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    grid-template-rows: 250px 250px;
    gap: 12px;
    margin-top: 38px
}

.ic-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #191b1a
}

.ic-tile small {
    position: absolute;
    left: 17px;
    top: 15px;
    z-index: 2;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #d7d7d1
}

.ic-tile.main {
    grid-row: span 2;
    background: #e9e3d8;
    color: #111;
    display: flex;
    align-items: flex-end;
    padding: clamp(22px,4vw,48px)
}

.ic-tile.main:before {
    content: 'ICOR';
    position: absolute;
    right: -3%;
    top: 14%;
    font-size: clamp(100px,18vw,240px);
    font-weight: 800;
    letter-spacing: -.12em;
    color: #171918;
    line-height: 1;
    transform: rotate(-8deg)
}

.ic-tile.main:after {
    content: 'RIDE / CONNECT / REPEAT';
    position: absolute;
    right: 6%;
    top: 43%;
    font: 10px 'DM Mono',monospace;
    letter-spacing: .14em;
    color: #ff5a24;
    transform: rotate(-8deg)
}

.ic-tile.main h3 {
    position: relative;
    z-index: 2;
    font-size: clamp(32px,5vw,64px);
    line-height: .92;
    letter-spacing: -.07em;
    max-width: 58%
}

.ic-tile.main h3 em {
    font-style: normal;
    color: #a02d37
}

.ic-tile.gear {
    padding: 30px;
    background: linear-gradient(140deg,#262a28,#111312);
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.ic-shirt {
    position: absolute;
    right: 12%;
    top: 18%;
    width: 42%;
    height: 55%;
    background: #111;
    border: 1px solid #515551;
    clip-path: polygon(25% 0,39% 0,45% 8%,55% 8%,61% 0,75% 0,100% 22%,81% 39%,72% 31%,72% 100%,28% 100%,28% 31%,19% 39%,0 22%);
    filter: drop-shadow(0 15px 15px #0008)
}

.ic-shirt:after {
    content: 'ICOR';
    position: absolute;
    left: 27%;
    top: 35%;
    font-size: clamp(13px,2vw,22px);
    font-weight: 800;
    letter-spacing: -.08em;
    color: #f5f3ed
}

.ic-tile.gear strong {
    font-size: clamp(24px,3vw,38px);
    line-height: 1;
    letter-spacing: -.06em;
    color: #f5f3ed
}

.ic-tile.gear p {
    font-size: 12px;
    max-width: 240px;
    line-height: 1.7;
    color: #b8b8b8
}

.ic-tile.community {
    padding: 30px;
    background: linear-gradient(135deg,#ff5a24,#a02d37);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff
}

.ic-route {
    position: absolute;
    right: 8%;
    top: 18%;
    width: 90px;
    height: 90px;
    border: 1px solid #ffffff88;
    border-radius: 50%;
    box-shadow: 0 0 0 13px #ffffff10,0 0 0 27px #ffffff0a
}

.ic-route:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%,-50%);
    box-shadow: 0 -31px 0 -2px #fff,27px 15px 0 -2px #fff,-27px 15px 0 -2px #fff
}

.ic-tile.community strong {
    font-size: clamp(25px,3vw,40px);
    line-height: .98;
    letter-spacing: -.06em
}

.ic-tile.community p {
    font-size: 12px;
    max-width: 230px;
    line-height: 1.7;
    color: #fff
}

body.icor-case .problem-line i,body.icor-case .result-meter i {
    background: linear-gradient(90deg,#ff5a24,#e5c7a5)
}

body.icor-case .result-hero strong {
    color: #ff5a24
}

body.icor-case .cs-testimonial {
    background: #171918
}

body.icor-case .quote-mark {
    color: #ff5a24
}

body.icor-case .avatar {
    background: linear-gradient(135deg,#ff5a24,#a02d37);
    color: #fff
}

body.icor-case .quote-project {
    color: #ff5a24
}

body.icor-case .cs-closing .cs-section-head p {
    color: #f5f3ed
}

@media(max-width: 760px) {
    .ic-hero-art {
        height:430px;
        margin-top: 30px
    }

    .ic-crest {
        width: 54%
    }

    .ic-orbit {
        width: 83%
    }

    .ic-stamp {
        width: 65px;
        height: 65px;
        font-size: 7px;
        right: 3%;
        top: 11%
    }

    .ic-hero-note {
        bottom: 8%;
        left: 4%;
        font-size: 12px
    }

    .ic-statement {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .ic-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 270px 220px
    }

    .ic-tile.main {
        grid-row: span 2
    }

    .ic-tile.main h3 {
        max-width: 75%
    }
}

@media(max-width: 480px) {
    .ic-hero-art {
        height:360px
    }

    .ic-label {
        font-size: 7px
    }

    .ic-crest {
        width: 62%;
        top: 45%
    }

    .ic-orbit {
        width: 92%;
        top: 45%
    }

    .ic-hero-note {
        bottom: 6%;
        font-size: 10px
    }

    .ic-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 310px 220px 220px
    }

    .ic-tile.main {
        grid-row: auto
    }

    .ic-route {
        width: 70px;
        height: 70px
    }

    .ic-shirt {
        width: 34%;
        height: 47%;
        right: 10%;
        top: 16%
    }
}

/* luven-case-study.php project artwork */
/* Luven-specific art direction layered over the existing case-study system. */
body.luven-case .cs-hero-art {
    --luven-sage: #dce5d6;
    --luven-ink: #1b211b;
}

body.luven-case .art-glow {
    background: radial-gradient(ellipse at 56% 45%, rgba(177, 199, 164, .25), transparent 62%);
}

body.luven-case .window-body {
    background: #dce5d6;
    color: #1b211b;
}

body.luven-case .window-nav strong {
    color: #1b211b;
    letter-spacing: .08em;
}

body.luven-case .window-nav strong span {
    color: #6e8667;
}

body.luven-case .window-copy h2 {
    color: #1b211b;
}

body.luven-case .window-copy h2 em {
    color: #72876b;
}

body.luven-case .fake-button {
    background: #1b211b;
    color: #f4f3ec;
}

body.luven-case .window-orb.orb-a {
    background: #a9bea0;
}

body.luven-case .window-orb.orb-b {
    background: #f0eee5;
    border: 1px solid rgba(27, 33, 27, .12);
}

body.luven-case .art-chip {
    border-color: rgba(174, 198, 160, .55);
}

body.luven-case .signal-number strong, body.luven-case .result-hero strong {
    color: #b7cdaa;
}

body.luven-case .problem-line i, body.luven-case .result-meter i {
    background: linear-gradient(90deg, #b7cdaa, #788f70);
}

body.luven-case .mini-ui.fidelity-ui i:nth-child(odd) {
    background: #b7cdaa;
}

body.luven-case .mini-ui.fidelity-ui i:nth-child(even) {
    background: #73896c;
}

body.luven-case .transform-card.after-card {
    border-color: rgba(183, 205, 170, .55);
}

body.luven-case .transform-card.after-card .fake-layout i:first-child {
    background: #b7cdaa;
}

body.luven-case .luven-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

body.luven-case .luven-category-list span {
    display: inline-flex;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid rgba(27, 33, 27, .18);
    font: 10px/1.1 'DM Mono', monospace;
    letter-spacing: .08em;
}

body.luven-case .luven-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}

body.luven-case .luven-principle {
    border: 1px solid var(--line, rgba(255,255,255,.15));
    padding: 20px;
}

body.luven-case .luven-principle small {
    display: block;
    margin-bottom: 18px;
    font: 10px/1.4 'DM Mono', monospace;
    letter-spacing: .11em;
    opacity: .65;
}

body.luven-case .luven-principle strong {
    display: block;
    font-size: clamp(17px, 2vw, 24px);
    line-height: 1.15;
}

body.luven-case .luven-principle p {
    margin: 11px 0 0;
    opacity: .72;
    font-size: 13px;
    line-height: 1.7;
}

body.luven-case .cs-testimonial .quote-project {
    letter-spacing: .1em;
}

@media (max-width: 700px) {
    body.luven-case .luven-principles {
        grid-template-columns: 1fr;
    }
}

/* raswala-case-study.php project artwork */
body.raswala-case {
    --rw-green: #9ebd45;
    --rw-lime: #d8ec76;
    --rw-cream: #f5f0df;
    --rw-ink: #142019;
    --rw-orange: #ff914d;
    --rw-red: #a02d37
}

body.raswala-case .cs-hero,body.raswala-case .cs-story,body.raswala-case .cs-problem,body.raswala-case .cs-solution,body.raswala-case .rw-gallery,body.raswala-case .cs-results,body.raswala-case .cs-testimonial,body.raswala-case .cs-closing {
    position: relative;
    overflow: hidden
}

body.raswala-case .cs-hero-title h1 em,body.raswala-case .story-big em,body.raswala-case .solution-intro h2 em,body.raswala-case .closing-grid h2 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(100deg,#d8ec76,#9ebd45);
    -webkit-background-clip: text;
    background-clip: text
}

body.raswala-case .cs-kicker b,body.raswala-case .cs-section-head b,body.raswala-case .solution-intro b {
    color: #b9d95b
}

body.raswala-case .cs-facts {
    border-color: #383838
}

body.raswala-case .cs-facts span {
    color: #999
}

body.raswala-case .cs-facts strong {
    color: #f5f3ed
}

.rw-hero-art {
    height: clamp(400px,54vw,660px);
    margin: 42px 0 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #121a12;
    isolation: isolate
}

.rw-sun {
    opacity: .1;
    position: absolute;
    width: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    right: -10%;
    top: -42%;
    background: radial-gradient(circle,#d8ec7655,#9ebd451c 42%,transparent 70%);
    filter: blur(5px)
}

.rw-stripes {
    position: absolute;
    inset: 0;
    opacity: .3;
    background: repeating-linear-gradient(135deg,transparent 0 30px,#9ebd451c 31px 32px)
}

.rw-label {
    position: absolute;
    z-index: 4;
    font: 10px 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #fff;
}

.rw-label.a {
    left: 4%;
    top: 5%
}

.rw-label.b {
    right: 4%;
    bottom: 5%
}

.rw-cup-scene {
    position: absolute;
    inset: 10% 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5%;
    perspective: 900px;
    display: none;
}

.rw-cup {
    position: relative;
    width: clamp(130px,22vw,245px);
    height: clamp(210px,34vw,360px);
    background: linear-gradient(90deg,#d8ec76,#c4db62 48%,#91b33b);
    clip-path: polygon(0 0,100% 0,84% 100%,16% 100%);
    transform: rotate(-8deg);
    box-shadow: 0 30px 70px #0007
}

.rw-cup:before {
    content: '';
    position: absolute;
    top: 0;
    left: -3%;
    width: 106%;
    height: 18px;
    border-radius: 5px;
    background: #f5f0df;
    box-shadow: 0 5px 0 #1115
}

.rw-cup:after {
    content: 'RASWALA';
    position: absolute;
    left: 7%;
    right: 7%;
    top: 34%;
    font-size: clamp(17px,3vw,32px);
    font-weight: 800;
    letter-spacing: -.08em;
    color: #17251a;
    text-align: center;
    transform: rotate(-2deg)
}

.rw-cup small {
    position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    text-align: center;
    font: 8px 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #243322
}

.rw-cup.two {
    height: clamp(170px,27vw,290px);
    width: clamp(110px,18vw,200px);
    transform: rotate(9deg) translateY(16%);
    background: linear-gradient(90deg,#f5f0df,#e6dfc8 50%,#c9c2a9)
}

.rw-cup.two:after {
    content: 'FRESH\A PRESSED';
    white-space: pre;
    line-height: 1.1;
    top: 34%;
    color: #263522
}

.rw-sticker {
    position: absolute;
    right: 7%;
    top: 22%;
    width: clamp(95px,14vw,150px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #a02d37;
    color: #f5f0df;
    display: grid;
    place-items: center;
    text-align: center;
    font-weight: 800;
    font-size: clamp(15px,2vw,23px);
    line-height: .9;
    letter-spacing: -.06em;
    transform: rotate(11deg);
    box-shadow: 0 15px 35px #0005;
    border: 1px solid #ffffff44
}

.rw-sticker span {
    font: 8px 'DM Mono',monospace;
    letter-spacing: .1em;
    display: block;
    margin-top: 8px
}

.rw-orbit {
    position: absolute;
    left: 8%;
    bottom: 12%;
    width: 130px;
    height: 130px;
    border: 1px solid #9ebd4570;
    border-radius: 50%;
    box-shadow: 0 0 0 15px #9ebd4510,0 0 0 30px #9ebd4508
}

.rw-orbit:after {
    content: '100%\A SUGARCANE';
    white-space: pre;
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    font: 9px 'DM Mono',monospace;
    line-height: 1.6;
    color: #d8ec76;
    letter-spacing: .1em
}

.rw-statement {
    display: grid;
    grid-template-columns: .7fr 1.1fr 1fr;
    gap: 26px;
    align-items: center;
    border: 1px solid #383838;
    padding: clamp(22px,4vw,48px);
    margin-top: 30px;
    background: linear-gradient(120deg,#20291a,#111)
}

.rw-statement>span {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #d8ec76
}

.rw-statement strong {
    font-size: clamp(26px,4vw,52px);
    line-height: .98;
    letter-spacing: -.06em
}

.rw-statement strong em {
    font-style: normal;
    color: #b9d95b
}

.rw-statement p {
    font-size: 13px;
    line-height: 1.8;
    color: #b8b8b8;
    margin: 0
}

.rw-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px
}

.rw-pill-list span {
    border: 1px solid #383838;
    padding: 8px 10px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #ddd
}

.rw-gallery {
    padding: clamp(70px,10vw,130px) 0;
    background: #0d0f0c;
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838
}

.rw-gallery-grid {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    grid-template-rows: 250px 250px;
    gap: 12px;
    margin-top: 38px
}

.rw-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid #383838
}

.rw-tile small {
    position: absolute;
    left: 17px;
    top: 15px;
    z-index: 3;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em
}

.rw-tile.brand {
    grid-row: span 2;
    background: #d8ec76;
    color: #17231a;
    display: flex;
    align-items: flex-end;
    padding: clamp(22px,4vw,48px)
}

.rw-tile.brand:before {
    content: '';
    position: absolute;
    top: 16%;
    right: 8%;
    width: 58%;
    height: 56%;
    border: 1px solid #536e32;
    border-radius: 50%;
    box-shadow: 0 0 0 18px #536e3215,0 0 0 38px #536e3210
}

.rw-tile.brand:after {
    content: 'R';
    position: absolute;
    right: 18%;
    top: 15%;
    font-size: clamp(150px,24vw,280px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.14em;
    color: #243b20;
    transform: rotate(-8deg)
}

.rw-tile.brand h3 {
    position: relative;
    z-index: 2;
    font-size: clamp(38px,6vw,76px);
    line-height: .86;
    letter-spacing: -.09em;
    max-width: 75%
}

.rw-tile.brand h3 em {
    font-style: normal;
    color: #a02d37
}

.rw-tile.pack {
    background: #f5f0df;
    color: #17231a;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.rw-pack-mini {
    position: absolute;
    right: 12%;
    top: 22%;
    width: 100px;
    height: 135px;
    background: #d8ec76;
    clip-path: polygon(0 0,100% 0,86% 100%,14% 100%);
    box-shadow: 0 15px 30px #0002
}

.rw-pack-mini:after {
    content: 'RASWALA';
    position: absolute;
    top: 43%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.07em
}

.rw-tile.pack strong {
    font-size: clamp(24px,3vw,38px);
    line-height: 1;
    letter-spacing: -.06em;
    max-width: 55%
}

.rw-tile.pack p {
    font-size: 12px;
    max-width: 230px;
    line-height: 1.7
}

.rw-tile.outlet {
    background: linear-gradient(145deg,#263a21,#10170f);
    color: #f5f0df;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.rw-sign {
    position: absolute;
    top: 25%;
    left: 10%;
    right: 10%;
    height: 68px;
    background: #d8ec76;
    color: #18251a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(23px,4vw,43px);
    font-weight: 800;
    letter-spacing: -.09em;
    box-shadow: 0 12px 30px #0005;
    transform: rotate(-2deg)
}

.rw-counter {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 55%;
    height: 22%;
    background: linear-gradient(#e9dfc8,#bfb49a);
    border-top: 8px solid #a02d37;
    clip-path: polygon(5% 0,95% 0,100% 100%,0 100%)
}

.rw-tile.outlet strong {
    font-size: clamp(24px,3vw,38px);
    line-height: 1;
    letter-spacing: -.06em
}

.rw-tile.outlet p {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #b7c2ad;
    margin: 15px 0 0
}

body.raswala-case .problem-line i,body.raswala-case .result-meter i {
    background: linear-gradient(90deg,#d8ec76,#9ebd45)
}

body.raswala-case .result-hero strong {
    color: #b9d95b
}

body.raswala-case .cs-testimonial {
    background: #171d14
}

body.raswala-case .quote-mark {
    color: #d8ec76
}

body.raswala-case .avatar {
    background: linear-gradient(135deg,#d8ec76,#7d9b39);
    color: #111
}

body.raswala-case .quote-project {
    color: #d8ec76
}

body.raswala-case .cs-closing .cs-section-head p {
    color: #f5f3ed
}

@media(max-width: 760px) {
    .rw-hero-art {
        height:430px;
        margin-top: 30px
    }

    .rw-cup-scene {
        inset: 13% 7%
    }

    .rw-cup {
        height: 280px;
        width: 165px
    }

    .rw-cup.two {
        height: 220px;
        width: 130px
    }

    .rw-sticker {
        right: 3%;
        top: 16%
    }

    .rw-orbit {
        width: 90px;
        height: 90px;
        left: 3%;
        bottom: 8%
    }

    .rw-statement {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .rw-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 270px 220px
    }

    .rw-tile.brand {
        grid-row: span 2
    }

    .rw-tile.brand h3 {
        max-width: 90%
    }
}

@media(max-width: 480px) {
    .rw-hero-art {
        height:360px
    }

    .rw-label {
        font-size: 7px
    }

    .rw-cup-scene {
        inset: 20% 3%
    }

    .rw-cup {
        height: 225px;
        width: 130px
    }

    .rw-cup.two {
        height: 175px;
        width: 105px
    }

    .rw-sticker {
        width: 85px;
        top: 10%;
        right: 4%;
        font-size: 14px
    }

    .rw-orbit {
        width: 70px;
        height: 70px;
        bottom: 5%
    }

    .rw-orbit:after {
        font-size: 7px
    }

    .rw-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 310px 220px 260px
    }

    .rw-tile.brand {
        grid-row: auto
    }
}

/* safehub360-case-study.php project artwork */
body.aureka-case {
    --au-orange: #ff914d;
    --au-red: #a02d37;
    --au-teal: #b7d7c9;
    --au-paper: #f5f3ed;
    --au-line: #383838;
    --au-ink: #111
}

body.safehub360-case .cs-hero-title h1 em,body.safehub360-case .story-big em,body.safehub360-case .solution-intro h2 em,body.safehub360-case .closing-grid h2 em {
    background: linear-gradient(100deg,#78e3cf,#6f9cff);
    -webkit-background-clip: text;
    background-clip: text
}

body.safehub360-case .au-glow {
    background: radial-gradient(circle,rgba(120,227,207,.22),rgba(111,156,255,.15) 42%,transparent 70%)
}

body.safehub360-case .au-system-top b,body.safehub360-case .au-wordmark span,body.safehub360-case .au-kicker,body.safehub360-case .au-headline em,body.safehub360-case .au-chip b {
    color: #78e3cf
}

body.safehub360-case .au-system {
    border-color: #3d5b68;
    background: #10191d
}

body.safehub360-case .au-system-body {
    background: linear-gradient(120deg,#17282e,#101619 70%)
}

body.safehub360-case .au-tile.main {
    background: #c5f0e7
}

body.safehub360-case .au-tile.main:after {
    content: 'SAFEHUB360';
    color: #d7fff6
}

body.safehub360-case .au-tile.service {
    background: linear-gradient(135deg,#b8f0e4,#78aee8)
}

body.safehub360-case .au-type em {
    color: #78e3cf
}

body.safehub360-case .problem-line i,body.safehub360-case .result-meter i {
    background: linear-gradient(90deg,#78e3cf,#6f9cff)
}

body.safehub360-case .result-hero strong,body.safehub360-case .quote-project {
    color: #78e3cf
}

body.safehub360-case .quote-mark {
    color: #6f9cff
}

body.safehub360-case .avatar {
    background: linear-gradient(135deg,#78e3cf,#6f9cff);
    color: #111
}

body.aureka-case .cs-hero,body.aureka-case .cs-story,body.aureka-case .cs-problem,body.aureka-case .cs-solution,body.aureka-case .au-gallery,body.aureka-case .cs-results,body.aureka-case .cs-testimonial,body.aureka-case .cs-closing {
    position: relative;
    overflow: hidden
}

body.aureka-case .cs-hero-title h1 em,body.aureka-case .story-big em,body.aureka-case .solution-intro h2 em,body.aureka-case .closing-grid h2 em {
    font-style: normal;
    color: transparent;
    background: linear-gradient(100deg,#ff914d,#a02d37);
    -webkit-background-clip: text;
    background-clip: text
}

body.aureka-case .cs-kicker b,body.aureka-case .cs-section-head b,body.aureka-case .solution-intro b {
    color: #ff914d
}

body.aureka-case .cs-facts {
    border-color: #383838
}

body.aureka-case .cs-facts span {
    color: #999
}

body.aureka-case .cs-facts strong {
    color: #f5f3ed
}

.au-hero-art {
    height: clamp(390px,52vw,650px);
    margin: 42px 0 28px;
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #111;
    isolation: isolate
}

.au-grid {
    position: absolute;
    inset: 0;
    opacity: .65;
    background-image: linear-gradient(#383838 1px,transparent 1px),linear-gradient(90deg,#383838 1px,transparent 1px);
    background-size: 8.33% 16.66%;
    mask-image: linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent)
}

.au-glow {
    display: none;
    position: absolute;
    width: 68%;
    aspect-ratio: 1;
    left: 15%;
    top: -18%;
    border-radius: 50%;
    background: radial-gradient(circle,rgba(183,215,201,.2),rgba(255,145,77,.12) 42%,transparent 70%);
    filter: blur(8px)
}

.au-label {
    position: absolute;
    z-index: 3;
    font: 10px 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #fff;
}

.au-label.a {
    left: 4%;
    top: 6%
}

.au-label.b {
    right: 4%;
    bottom: 6%
}

.au-system {
    display: none;
    position: absolute;
    left: 12%;
    top: 13%;
    width: 76%;
    height: 74%;
    border: 1px solid #4a5551;
    background: #171b19;
    box-shadow: 0 28px 90px #0008;
    transform: rotate(-1deg);
    overflow: hidden
}

.au-system-top {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #383838;
    color: #aaa;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em
}

.au-system-top b {
    color: #b7d7c9;
    font-weight: 400
}

.au-system-body {
    position: absolute;
    inset: 38px 0 0;
    background: linear-gradient(120deg,#202a26,#111614 70%);
    color: #f5f3ed;
    padding: clamp(18px,4vw,48px);
    overflow: hidden
}

.au-system-body:before {
    content: '';
    position: absolute;
    width: 48%;
    aspect-ratio: 1;
    border: 1px solid #60786d;
    border-radius: 50%;
    right: -4%;
    top: 4%;
    box-shadow: 0 0 0 25px #b7d7c908,0 0 0 60px #b7d7c905
}

.au-wordmark {
    position: relative;
    z-index: 2;
    font-size: clamp(20px,3vw,38px);
    font-weight: 800;
    letter-spacing: -.07em
}

.au-wordmark span {
    color: #b7d7c9
}

.au-kicker {
    position: relative;
    z-index: 2;
    margin-top: clamp(18px,4vw,42px);
    font: 9px 'DM Mono',monospace;
    letter-spacing: .16em;
    color: #b7d7c9
}

.au-headline {
    position: relative;
    z-index: 2;
    font-size: clamp(30px,6vw,76px);
    line-height: .9;
    letter-spacing: -.08em;
    font-weight: 800;
    margin: 14px 0;
    max-width: 70%
}

.au-headline em {
    font-style: normal;
    color: #b7d7c9
}

.au-description {
    position: relative;
    z-index: 2;
    max-width: 270px;
    color: #b4bcb7;
    font-size: clamp(8px,.9vw,12px);
    line-height: 1.7
}

.au-system-foot {
    position: absolute;
    left: clamp(18px,4vw,48px);
    right: clamp(18px,4vw,48px);
    bottom: 18px;
    border-top: 1px solid #4a5551;
    padding-top: 12px;
    display: flex;
    justify-content: space-between;
    color: #9da7a1;
    font: 8px 'DM Mono',monospace;
    letter-spacing: .1em
}

.au-chip {
    position: absolute;
    z-index: 4;
    border: 1px solid #65796f;
    background: #111;
    padding: 11px 13px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #eee;
    box-shadow: 0 12px 30px #0005
}

.au-chip b {
    color: #b7d7c9;
    margin-right: 6px
}

.au-chip.c1 {
    left: 4%;
    top: 30%
}

.au-chip.c2 {
    right: 3%;
    top: 23%
}

.au-chip.c3 {
    right: 6%;
    bottom: 12%
}

.au-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px
}

.au-pill-list span {
    border: 1px solid #383838;
    padding: 8px 10px;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #ddd
}

.au-statement {
    display: grid;
    grid-template-columns: .7fr 1.1fr 1fr;
    gap: 26px;
    align-items: center;
    border: 1px solid #383838;
    padding: clamp(22px,4vw,48px);
    margin-top: 30px;
    background: linear-gradient(120deg,#18201c,#111)
}

.au-statement>span {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #b7d7c9
}

.au-statement strong {
    font-size: clamp(26px,4vw,52px);
    line-height: .98;
    letter-spacing: -.06em;
    color: #fff;
}

.au-statement p {
    font-size: 13px;
    line-height: 1.8;
    color: #b8b8b8;
    margin: 0
}

.au-gallery {
    padding: clamp(70px,10vw,130px) 0;
    background: #0d0d0d;
    border-top: 1px solid #383838;
    border-bottom: 1px solid #383838
}

.au-gallery-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-template-rows: 250px 250px;
    gap: 12px;
    margin-top: 38px
}

.au-tile {
    position: relative;
    overflow: hidden;
    border: 1px solid #383838;
    background: #191d1b
}

.au-tile small {
    position: absolute;
    left: 17px;
    top: 15px;
    z-index: 2;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .1em;
    color: #eee
}

.au-tile.main {
    grid-row: span 2;
    background: #c4d9cf;
    color: #18221d;
    display: flex;
    align-items: flex-end;
    padding: clamp(22px,4vw,48px)
}

.au-tile.main:before {
    content: '';
    position: absolute;
    right: 5%;
    top: 17%;
    width: 54%;
    height: 70%;
    border: 1px solid #506d60;
    background: linear-gradient(145deg,#203c30,#111b16);
    clip-path: polygon(0 0,100% 12%,100% 100%,0 88%);
    box-shadow: 0 20px 50px #0005
}

.au-tile.main:after {
    content: 'AUREKA';
    position: absolute;
    right: 10%;
    top: 39%;
    font-size: clamp(20px,3vw,40px);
    font-weight: 800;
    letter-spacing: -.08em;
    color: #d8e8df;
    transform: rotate(5deg)
}

.au-tile.main h3 {
    position: relative;
    z-index: 2;
    font-size: clamp(32px,5vw,64px);
    line-height: .92;
    letter-spacing: -.07em;
    max-width: 52%
}

.au-tile.main h3 em {
    font-style: normal;
    color: #a02d37
}

.au-tile.service {
    padding: 30px;
    background: linear-gradient(135deg,#b7d7c9,#769b89);
    color: #17221d;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.au-rings {
    position: absolute;
    right: 12%;
    top: 20%;
    width: 100px;
    height: 100px;
    border: 1px solid #416555;
    border-radius: 50%;
    box-shadow: 0 0 0 12px #41655520,0 0 0 24px #41655512
}

.au-rings:after {
    content: '360°';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font: 16px 'DM Mono',monospace
}

.au-tile.service strong {
    font-size: clamp(24px,3vw,38px);
    line-height: 1;
    letter-spacing: -.06em
}

.au-tile.service p {
    font-size: 12px;
    max-width: 240px;
    line-height: 1.7
}

.au-tile.dark {
    padding: 30px;
    background: #171b19;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.au-type {
    font-size: clamp(36px,6vw,76px);
    font-weight: 800;
    letter-spacing: -.09em;
    line-height: .9;
    color: #f5f3ed
}

.au-type em {
    font-style: normal;
    color: #b7d7c9
}

.au-tile.dark p {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .08em;
    color: #aaa;
    margin: 15px 0 0
}

body.aureka-case .problem-line i,body.aureka-case .result-meter i {
    background: linear-gradient(90deg,#b7d7c9,#ff914d)
}

body.aureka-case .result-hero strong {
    color: #b7d7c9
}

body.aureka-case .cs-testimonial {
    background: #171b19;
    color: #fff;
}

body.aureka-case .quote-mark {
    color: #ff914d
}

body.aureka-case .avatar {
    background: linear-gradient(135deg,#b7d7c9,#557d69);
    color: #111
}

body.aureka-case .quote-project {
    color: #b7d7c9
}

body.aureka-case .cs-closing .cs-section-head p {
    color: #f5f3ed
}

@media(max-width: 760px) {
    .au-hero-art {
        height:430px;
        margin-top: 30px
    }

    .au-system {
        width: 82%;
        left: 8%;
        height: 68%;
        top: 15%
    }

    .au-chip {
        padding: 8px;
        font-size: 7px
    }

    .au-chip.c1 {
        left: 2%;
        top: 9%
    }

    .au-chip.c2 {
        right: 2%;
        top: 7%
    }

    .au-chip.c3 {
        right: 4%;
        bottom: 5%
    }

    .au-statement {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .au-gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 270px 220px
    }

    .au-tile.main {
        grid-row: span 2
    }

    .au-tile.main h3 {
        max-width: 72%
    }
}

@media(max-width: 480px) {
    .au-hero-art {
        height:360px
    }

    .au-label {
        font-size: 7px
    }

    .au-system {
        width: 86%;
        left: 5%;
        height: 65%;
        top: 16%
    }

    .au-headline {
        max-width: 82%
    }

    .au-gallery-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 310px 220px 220px
    }

    .au-tile.main {
        grid-row: auto
    }

    .au-rings {
        width: 70px;
        height: 70px
    }
}

/* trueoats-case-study.php project artwork */
body.trueoats-case {
    --toats-cream: #F4EBDD;
    --toats-oat: #D9C39C;
    --toats-green: #52664A;
    --toats-ink: #20251D;
}

body.trueoats-case .cs-hero-art {
    min-height: 540px;
    background: #e9e1d2;
    overflow: hidden;
    position: relative;
}

body.trueoats-case .toats-grid {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(rgba(32,37,29,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(32,37,29,.12) 1px,transparent 1px);
    background-size: 48px 48px;
}

body.trueoats-case .toats-halo {
    position: absolute;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: #d5c19b;
    filter: blur(2px);
    left: 50%;
    top: 49%;
    transform: translate(-50%,-50%);
    opacity: .8;
}

body.trueoats-case .toats-stage {
    position: absolute;
    left: 50%;
    top: 53%;
    width: min(760px,92%);
    height: 400px;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
}

body.trueoats-case .toats-pack {
    position: relative;
    box-shadow: 18px 24px 32px rgba(41,35,25,.17);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--toats-ink);
}

body.trueoats-case .toats-pack-main {
    width: 225px;
    height: 330px;
    border-radius: 7px 7px 12px 12px;
    background: var(--toats-cream);
    padding: 22px 15px 16px;
    transform: rotate(-3deg);
    z-index: 2;
    border: 1px solid rgba(32,37,29,.16);
}

body.trueoats-case .toats-pack-side {
    width: 188px;
    height: 275px;
    border-radius: 6px 6px 10px 10px;
    background: var(--toats-green);
    color: #f5eedf;
    padding: 20px 13px 15px;
    transform: rotate(5deg) translateY(20px);
}

body.trueoats-case .toats-seal {
    width: 100%;
    height: 9px;
    position: absolute;
    top: 0;
    left: 0;
    background: repeating-linear-gradient(90deg,rgba(32,37,29,.16) 0 2px,transparent 2px 5px);
}

body.trueoats-case .toats-wordmark {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1;
    margin-top: 15px;
}

body.trueoats-case .toats-wordmark span {
    color: #72815d;
}

body.trueoats-case .toats-sub {
    font: 10px 'DM Mono',monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: 8px;
}

body.trueoats-case .toats-bowl {
    width: 122px;
    height: 96px;
    margin: 22px auto 13px;
    position: relative;
}

body.trueoats-case .toats-bowl:before {
    content: "";
    position: absolute;
    left: 10px;
    top: 20px;
    width: 102px;
    height: 60px;
    border-radius: 0 0 55px 55px;
    background: #b6a078;
    border: 5px solid #f8f1e5;
    box-shadow: 0 7px 0 #d2c2a4;
}

body.trueoats-case .toats-bowl:after {
    content: "";
    position: absolute;
    left: 14px;
    top: 15px;
    width: 94px;
    height: 22px;
    border-radius: 50%;
    background: #e9d6ad;
    border: 4px solid #f8f1e5;
}

body.trueoats-case .toats-oat {
    position: absolute;
    width: 8px;
    height: 14px;
    border-radius: 60%;
    background: #8c754d;
    transform: rotate(30deg);
    z-index: 1;
}

body.trueoats-case .toats-oat.o1 {
    left: 38px;
    top: 20px;
}

body.trueoats-case .toats-oat.o2 {
    left: 58px;
    top: 17px;
    transform: rotate(-20deg);
}

body.trueoats-case .toats-oat.o3 {
    left: 73px;
    top: 24px;
    transform: rotate(55deg);
}

body.trueoats-case .toats-pack h3 {
    font-size: 18px;
    letter-spacing: -.7px;
    line-height: 1.15;
    margin: 0;
}

body.trueoats-case .toats-pack p {
    font-size: 9px;
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 150px;
}

body.trueoats-case .toats-band {
    width: calc(100% + 30px);
    margin-top: auto;
    padding: 10px 5px;
    background: #d5c19b;
    color: #20251d;
    font: 9px 'DM Mono',monospace;
    letter-spacing: .08em;
}

body.trueoats-case .toats-pack-side .toats-wordmark {
    font-size: 24px;
    margin-top: 13px;
}

body.trueoats-case .toats-pack-side .toats-wordmark span {
    color: #d8c49d;
}

body.trueoats-case .toats-pack-side .toats-bowl {
    transform: scale(.78);
    margin: 13px auto 6px;
}

body.trueoats-case .toats-pack-side .toats-bowl:before {
    border-color: #e9e1d2;
}

body.trueoats-case .toats-pack-side .toats-bowl:after {
    border-color: #e9e1d2;
}

body.trueoats-case .toats-pack-side h3 {
    font-size: 15px;
}

body.trueoats-case .toats-pack-side .toats-band {
    background: #d8c49d;
}

body.trueoats-case .toats-stamp {
    position: absolute;
    right: 6%;
    top: 9%;
    border: 1px solid rgba(32,37,29,.45);
    border-radius: 50%;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    text-align: center;
    font: 9px/1.5 'DM Mono',monospace;
    color: #394632;
    transform: rotate(12deg);
}

body.trueoats-case .toats-note {
    position: absolute;
    bottom: 24px;
    left: 28px;
    font: 10px 'DM Mono',monospace;
    letter-spacing: .12em;
    color: #394632;
}

body.trueoats-case .toats-tag {
    position: absolute;
    right: 26px;
    bottom: 23px;
    padding: 10px 12px;
    border: 1px solid rgba(32,37,29,.3);
    color: #394632;
    font: 10px 'DM Mono',monospace;
}

body.trueoats-case .toats-principles {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px;
    margin-top: 32px;
}

body.trueoats-case .toats-principle {
    padding: 22px;
    border: 1px solid rgba(245,243,237,.18);
    min-height: 150px;
}

body.trueoats-case .toats-principle small {
    font: 11px 'DM Mono',monospace;
    color: #d5c19b;
}

body.trueoats-case .toats-principle h3 {
    margin: 20px 0 8px;
    font-size: 19px;
}

body.trueoats-case .toats-principle p {
    margin: 0;
    opacity: .72;
    font-size: 13px;
    line-height: 1.7;
}

body.trueoats-case .toats-disclaimer {
    font-size: 11px;
    line-height: 1.6;
    opacity: .62;
    margin: 18px 0 0;
}

@media(max-width: 700px) {
    body.trueoats-case .cs-hero-art {
        min-height:430px;
    }

    body.trueoats-case .toats-stage {
        gap: 8px;
        transform: translate(-50%,-50%) scale(.82);
        width: 120%;
    }

    body.trueoats-case .toats-pack-main {
        width: 205px;
    }

    body.trueoats-case .toats-pack-side {
        width: 165px;
    }

    body.trueoats-case .toats-stamp {
        width: 62px;
        height: 62px;
        font-size: 7px;
    }

    body.trueoats-case .toats-principles {
        grid-template-columns: 1fr;
    }
}

/* Shared editorial refinements for all case study pages */
body.case-study-page {
    --cs-paper: #f4f4f0;
    --cs-orange: #ff8950;
    --cs-line: rgba(9,9,9,.12);
    background: var(--cs-paper);
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
}

body.case-study-page a:focus-visible {
    outline: 2px solid var(--cs-orange);
    outline-offset: 5px;
}

body.case-study-page .cs-container {
    width: min(1240px, calc(100% - 88px));
}

body.case-study-page .cs-hero {
    padding-top: clamp(105px, 12vw, 155px);
}

body.case-study-page .cs-hero-main {
    grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr);
    gap: clamp(36px, 6vw, 90px);
    padding: clamp(56px, 7vw, 88px) 0 clamp(70px, 8vw, 105px);
}

body.case-study-page .cs-hero-title h1 {
    font-size: clamp(64px, 8.4vw, 132px);
    line-height: .91;
    letter-spacing: -.078em;
    text-wrap: balance;
}

body.case-study-page .eyebrow, body.case-study-page .cs-kicker, body.case-study-page .cs-section-head {
    letter-spacing: .08em;
}

body.case-study-page .cs-hero-side p, body.case-study-page .story-copy p, body.case-study-page .solution-copy p, body.case-study-page .closing-grid p {
    line-height: 1.8;
}

body.case-study-page .cs-hero-art {
    border: 1px solid rgba(9,9,9,.1);
    box-shadow: 0 24px 70px rgba(9,9,9,.08);
}

body.case-study-page .cs-facts > div {
    padding-top: 27px;
    padding-bottom: 28px;
}

body.case-study-page .cs-story, body.case-study-page .cs-solution, body.case-study-page .cs-transformation, body.case-study-page .cs-results, body.case-study-page .cs-closing {
    scroll-margin-top: 40px;
}

body.case-study-page .problem-card {
    transition: background-color .35s ease, padding .35s var(--cs-ease);
}

body.case-study-page .problem-card:hover {
    background-color: rgba(255,255,255,.48);
}

body.case-study-page .solution-row {
    border-color: rgba(243,243,239,.14);
}

body.case-study-page .transform-stage {
    border-color: rgba(9,9,9,.1);
    box-shadow: 0 24px 65px rgba(9,9,9,.07);
}

body.case-study-page .result-hero, body.case-study-page .result-item {
    transition: background-color .35s ease;
}

body.case-study-page .result-item:hover {
    background-color: rgba(255,255,255,.035);
}

body.case-study-page .cs-testimonial {
    position: relative;
}

body.case-study-page .cs-testimonial blockquote {
    text-wrap: balance;
}

body.case-study-page .cs-text-link {
    min-height: 44px;
    align-items: center;
}

body.case-study-page .next-project a {
    transition: color .25s ease;
}

body.case-study-page .next-project a:hover {
    color: var(--cs-hot);
}

@media (max-width: 1000px) {
    body.case-study-page .cs-container {
        width: min(100% - 48px, 1240px);
    }

    body.case-study-page .cs-hero-main {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    body.case-study-page .cs-hero-side {
        max-width: 520px;
    }
}

@media (max-width: 600px) {
    body.case-study-page .cs-container {
        width: calc(100% - 36px);
    }

    body.case-study-page .cs-hero {
        padding-top: 92px;
    }

    body.case-study-page .cs-hero-main {
        padding: 50px 0 56px;
    }

    body.case-study-page .cs-hero-title h1 {
        font-size: clamp(54px, 15vw, 84px);
    }

    body.case-study-page .cs-kicker, body.case-study-page .cs-section-head {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px 0;
    }

    body.case-study-page .cs-kicker span:last-child, body.case-study-page .cs-section-head p {
        justify-self: start;
    }

    body.case-study-page .cs-section-head p {
        font-size: 14px;
    }

    body.case-study-page .cs-hero-art {
        min-height: 360px;
    }

    body.case-study-page .cs-facts > div {
        padding: 18px 12px 19px 0;
    }

    body.case-study-page .cs-facts > div:not(:first-child) {
        padding-left: 12px;
    }

    body.case-study-page .cs-facts strong {
        font-size: 12px;
    }

    body.case-study-page .cs-testimonial {
        padding-top: 105px;
        padding-bottom: 105px;
    }

    body.case-study-page .cs-testimonial blockquote {
        margin: 36px 0 52px;
        font-size: clamp(34px, 10vw, 56px);
    }

    body.case-study-page .next-project a {
        gap: 18px;
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.case-study-page *, body.case-study-page *::before, body.case-study-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}