:root{
    --paper:#f5f2eb;
    --paper-soft:#ebe5d8;
    --text:#111111;
    --muted:#67645f;
    --line:rgba(17,17,17,.14);
    --max:1180px;
    --gutter:clamp(1.35rem,4vw,4rem);
    --section:clamp(7rem,14vw,15rem);
    --ease:cubic-bezier(.22,1,.36,1);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    background:var(--paper);
}

body{
    min-height:100vh;
    background:
        linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0) 42rem),
        var(--paper);
    color:var(--text);
    font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    font-size:16px;
    line-height:1.5;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

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

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

/* -------------------------------- */
/* TEXTURE */
/* -------------------------------- */

.grain{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:.018;
    background-image:
        radial-gradient(circle at 20% 20%, #000 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, #000 1px, transparent 1px);
    background-position:0 0, 4px 5px;
    background-size:9px 9px, 13px 13px;
}

/* -------------------------------- */
/* PROGRESS BAR */
/* -------------------------------- */

.progress{
    position:fixed;
    top:0;
    left:0;
    width:0;
    height:2px;
    background:#111;
    z-index:10000;
}

/* -------------------------------- */
/* HERO */
/* -------------------------------- */

.hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(1.5rem,3.2vw,3.5rem) var(--gutter) clamp(2rem,4vw,4.5rem);
}

.brand{
    width:max-content;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.38em;
    cursor:pointer;
    user-select:none;
}

.brand::after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    margin-top:.9rem;
    background:currentColor;
    transform:scaleX(.22);
    transform-origin:left;
    opacity:.5;
    transition:transform .6s var(--ease), opacity .6s var(--ease);
}

.brand:hover::after{
    transform:scaleX(1);
    opacity:1;
}

.hero-content{
    width:min(100%,var(--max));
}

.hero h1{
    max-width:11ch;
    font-size:clamp(4.25rem,11vw,11rem);
    line-height:.86;
    font-weight:800;
    letter-spacing:0;
}

.subtitle{
    max-width:12ch;
    margin-top:clamp(1rem,2vw,1.75rem);
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(2.75rem,6.4vw,6rem);
    font-style:italic;
    line-height:.96;
    letter-spacing:0;
}

.hero-cta,
.closing-cta{
    display:inline-flex;
    align-items:center;
    width:max-content;
    margin-top:clamp(2rem,4vw,3.5rem);
    padding:.95rem 1.15rem;
    border:1px solid currentColor;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.14em;
    text-transform:uppercase;
    transition:
        background .35s var(--ease),
        color .35s var(--ease),
        transform .35s var(--ease);
}

.hero-cta:hover,
.closing-cta:hover{
    background:var(--text);
    color:var(--paper);
    transform:translateY(-2px);
}

/* -------------------------------- */
/* MANIFEST */
/* -------------------------------- */

.manifest{
    padding:var(--section) var(--gutter);
}

.manifest-inner{
    width:min(100%,var(--max));
}

.manifest h2{
    max-width:16ch;
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(2.55rem,5.8vw,6.2rem);
    font-weight:400;
    line-height:1.02;
    letter-spacing:0;
}

/* -------------------------------- */
/* PHILOSOPHY */
/* -------------------------------- */

.philosophy{
    padding:0 var(--gutter) var(--section);
}

.philosophy-inner{
    width:min(100%,920px);
    margin-left:auto;
}

.philosophy h2{
    max-width:13ch;
    margin-bottom:clamp(1.4rem,3vw,2.4rem);
    font-size:clamp(2.25rem,4.5vw,4.8rem);
    line-height:.98;
    font-weight:800;
    letter-spacing:0;
}

.philosophy p{
    max-width:33ch;
    font-size:clamp(1.2rem,2.1vw,1.85rem);
    line-height:1.42;
    color:var(--muted);
}

/* -------------------------------- */
/* ANTI PITCH */
/* -------------------------------- */

.anti-pitch{
    padding:0 var(--gutter) var(--section);
}

.anti-pitch-inner{
    width:min(100%,980px);
}

.section-label,
.work-intro span,
.project-label{
    display:block;
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.24em;
    opacity:.55;
}

.section-label{
    margin-bottom:clamp(2rem,4vw,3.5rem);
}

.anti-pitch ul{
    list-style:none;
    border-top:1px solid var(--line);
}

.anti-pitch li{
    padding:clamp(1.15rem,2vw,1.75rem) 0;
    border-bottom:1px solid var(--line);
    font-size:clamp(2rem,4.2vw,4.4rem);
    line-height:1;
    font-weight:800;
    letter-spacing:0;
}

/* -------------------------------- */
/* PROCESS */
/* -------------------------------- */

.process{
    padding:0 0 var(--section);
}

.process-inner{
    width:100%;
}

.process .section-label{
    margin-left:var(--gutter);
    margin-right:var(--gutter);
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:calc(100% - (var(--gutter) * 2));
    margin:clamp(2rem,4vw,3.5rem) var(--gutter) 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.process-item{
    min-height:clamp(19rem,27vw,28rem);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(1.5rem,3vw,3.3rem);
    border-left:1px solid var(--line);
    background:transparent;
}

.process-item:last-child{
    border-right:1px solid var(--line);
}

.process-number{
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.18em;
    opacity:.42;
}

.process-item h3{
    margin-top:auto;
    font-size:clamp(3.1rem,5.2vw,6.2rem);
    line-height:.88;
    font-weight:800;
}

.process-item p{
    max-width:26ch;
    margin-top:clamp(1rem,2vw,1.6rem);
    color:var(--muted);
    font-size:clamp(1.05rem,1.45vw,1.35rem);
    line-height:1.42;
}

/* -------------------------------- */
/* WORK INTRO */
/* -------------------------------- */

.work-intro{
    padding:0 var(--gutter) clamp(2rem,4vw,4rem);
}

/* -------------------------------- */
/* PROJECTS */
/* -------------------------------- */

.project{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:76svh;
    display:flex;
    align-items:center;
    padding:clamp(2rem,8vw,8rem) var(--gutter);
    opacity:1;
    transform:translateY(0);
    transition:
        opacity .9s var(--ease),
        transform .9s var(--ease);
}

.project::before{
    content:"";
    position:absolute;
    inset:-18%;
    z-index:-2;
    pointer-events:none;
    opacity:.62;
    background:
        radial-gradient(circle at 74% 18%, rgba(255,255,255,.34), transparent 18rem),
        radial-gradient(circle at 18% 78%, rgba(255,255,255,.16), transparent 22rem),
        radial-gradient(circle at 58% 76%, rgba(0,0,0,.18), transparent 24rem);
    filter:blur(34px);
    transform:rotate(-5deg);
}

.project-0::before{
    opacity:.72;
    background:
        radial-gradient(circle at 76% 18%, rgba(255,255,255,.38), transparent 17rem),
        radial-gradient(circle at 22% 78%, rgba(255,240,216,.24), transparent 22rem),
        radial-gradient(circle at 60% 70%, rgba(94,22,4,.2), transparent 24rem);
    transform:rotate(-8deg) scale(1.04);
}

.project-1::before{
    opacity:.58;
    background:
        linear-gradient(135deg, rgba(255,255,255,.24), transparent 34%),
        radial-gradient(circle at 78% 30%, rgba(255,255,255,.22), transparent 20rem),
        radial-gradient(circle at 16% 82%, rgba(246,91,18,.24), transparent 18rem),
        radial-gradient(circle at 60% 60%, rgba(0,0,0,.24), transparent 26rem);
    transform:rotate(3deg) scale(1.08);
}

.project-2::before{
    opacity:.68;
    background:
        radial-gradient(ellipse at 70% 24%, rgba(255,255,255,.28), transparent 19rem),
        radial-gradient(circle at 18% 32%, rgba(210,168,96,.22), transparent 18rem),
        radial-gradient(ellipse at 64% 82%, rgba(0,0,0,.34), transparent 30rem);
    transform:rotate(9deg) scale(1.06);
}

.project-3::before{
    opacity:.74;
    background:
        radial-gradient(circle at 76% 18%, rgba(255,255,255,.32), transparent 16rem),
        radial-gradient(circle at 18% 72%, rgba(122,86,255,.32), transparent 20rem),
        radial-gradient(circle at 58% 68%, rgba(37,223,188,.18), transparent 22rem),
        radial-gradient(circle at 70% 86%, rgba(0,0,0,.26), transparent 24rem);
    transform:rotate(-14deg) scale(1.08);
}

.project::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.34;
    background-image:
        url("data:image/svg+xml,%3Csvg width='1200' height='900' viewBox='0 0 1200 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='.42'%3E%3Cpath d='M-80 704C118 494 247 812 464 603C681 394 747 133 1039 219C1331 305 1085 618 1264 742'/%3E%3Cpath d='M-36 158C167 260 273 91 438 198C603 305 648 481 837 402C1026 323 1015 81 1258 149'/%3E%3Cpath d='M122 848C301 658 425 754 568 636C711 518 742 316 924 322C1106 328 1110 534 1280 501'/%3E%3Ccircle cx='952' cy='214' r='172'/%3E%3Ccircle cx='226' cy='690' r='116'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
    background-position:center, 0 0, 0 0;
    background-size:110% auto, 4.8rem 4.8rem, 4.8rem 4.8rem;
    mix-blend-mode:soft-light;
}

.project-0::after{
    opacity:.38;
    background-image:
        url("data:image/svg+xml,%3Csvg width='1200' height='900' viewBox='0 0 1200 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='.42'%3E%3Ccircle cx='880' cy='260' r='210'/%3E%3Ccircle cx='244' cy='690' r='132'/%3E%3Cpath d='M-40 692C134 498 288 778 482 592C676 406 752 176 1018 242C1284 308 1112 610 1260 748'/%3E%3Cpath d='M74 164C242 260 346 114 510 218C674 322 708 448 918 374C1128 300 1084 118 1260 172'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
}

.project-1::after{
    opacity:.3;
    background-image:
        url("data:image/svg+xml,%3Csvg width='1200' height='900' viewBox='0 0 1200 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-opacity='.44'%3E%3Cpath d='M80 120H1120V780H80z'/%3E%3Cpath d='M80 340H1120M80 560H1120M340 120V780M600 120V780M860 120V780'/%3E%3Cpath d='M-60 808C206 622 308 780 520 612C732 444 740 284 956 298C1172 312 1124 526 1280 494'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
}

.project-2::after{
    opacity:.36;
    background-image:
        url("data:image/svg+xml,%3Csvg width='1200' height='900' viewBox='0 0 1200 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-opacity='.4'%3E%3Cpath d='M-120 586C64 472 184 532 310 414C436 296 502 124 712 178C922 232 838 496 1048 438C1258 380 1194 206 1340 178'/%3E%3Cpath d='M-80 742C118 648 232 786 394 650C556 514 636 358 812 438C988 518 990 726 1288 612'/%3E%3Cpath d='M196 182C288 132 372 152 446 220C520 288 616 284 700 220'/%3E%3Ccircle cx='894' cy='300' r='96'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
}

.project-3::after{
    opacity:.42;
    background-image:
        url("data:image/svg+xml,%3Csvg width='1200' height='900' viewBox='0 0 1200 900' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.2' stroke-opacity='.44'%3E%3Cpath d='M140 760L392 122L604 760L812 122L1074 760'/%3E%3Cpath d='M-40 264L220 174L430 300L650 198L910 322L1250 190'/%3E%3Ccircle cx='262' cy='270' r='72'/%3E%3Ccircle cx='866' cy='610' r='126'/%3E%3Cpath d='M74 628C220 522 384 602 522 514C660 426 696 286 850 342C1004 398 1048 562 1240 508'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
}

.project:first-of-type{
    min-height:100svh;
}

body.js-ready .project{ opacity:.18; transform:translateY(54px); }

.project.visible,
body.js-ready .project.visible{
    opacity:1;
    transform:translateY(0);
}

.project-inner{
    position:relative;
    z-index:1;
    width:min(100%,var(--max));
    display:grid;
    grid-template-columns:minmax(0, .92fr) minmax(320px, .78fr);
    align-items:end;
    gap:clamp(3rem,7vw,7rem);
}

.project-copy{
    max-width:760px;
}

.project-label{
    margin-bottom:clamp(1.4rem,2.8vw,2.5rem);
}

.project h2{
    max-width:10ch;
    margin-bottom:clamp(1.4rem,3vw,2.4rem);
    font-size:clamp(3.7rem,9.5vw,9rem);
    line-height:.84;
    font-weight:800;
    letter-spacing:0;
}

.project-headline{
    max-width:26ch;
    margin-bottom:clamp(1.7rem,3vw,2.6rem);
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.85rem,3.6vw,3.45rem);
    line-height:1.04;
    letter-spacing:0;
}

.project-details{
    display:grid;
    gap:.45rem;
    max-width:620px;
    margin-bottom:clamp(1.7rem,3vw,2.5rem);
}

.project-details div{
    font-size:clamp(.98rem,1.25vw,1.15rem);
    line-height:1.5;
    opacity:.82;
}

.case-study{
    display:grid;
    gap:1px;
    max-width:680px;
    margin-bottom:clamp(1.8rem,3vw,2.8rem);
    background:rgba(255,255,255,.24);
    border:1px solid rgba(255,255,255,.28);
}

.case-study-row{
    display:grid;
    grid-template-columns:7rem minmax(0,1fr);
    gap:1.2rem;
    padding:1rem 0;
    background:rgba(255,255,255,.08);
}

.case-study-row span{
    padding-left:1rem;
    font-size:.66rem;
    font-weight:800;
    line-height:1.4;
    letter-spacing:.16em;
    text-transform:uppercase;
    opacity:.62;
}

.case-study-row p{
    padding-right:1rem;
    font-size:clamp(.98rem,1.2vw,1.08rem);
    line-height:1.45;
    opacity:.88;
}

.project a{
    display:inline-flex;
    align-items:center;
    gap:.65rem;
    padding-bottom:.35rem;
    border-bottom:1px solid currentColor;
    font-size:.86rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.9;
    transition:gap .35s var(--ease), opacity .35s var(--ease);
}

.project a:hover{
    gap:1rem;
    opacity:1;
}

.project-media{
    position:relative;
    align-self:center;
    perspective:1400px;
}

.project-media::before{
    content:"";
    position:absolute;
    inset:10% -8% -12% 6%;
    border-radius:50%;
    background:
        radial-gradient(circle, rgba(255,255,255,.36), rgba(255,255,255,0) 58%);
    filter:blur(42px);
    opacity:.52;
    transform:rotate(-12deg);
}

.device-frame{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.38);
    border-radius:1.2rem;
    background:rgba(255,255,255,.12);
    box-shadow:
        0 2.5rem 5rem rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.22);
    transform:rotateX(4deg) rotateY(-8deg);
    transform-origin:center;
    z-index:1;
}

.device-frame::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.32), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 82% 12%, rgba(255,255,255,.24), transparent 24rem);
    z-index:2;
}

.device-bar{
    height:2.1rem;
    display:flex;
    align-items:center;
    gap:.42rem;
    padding:0 .8rem;
    background:rgba(0,0,0,.26);
    border-bottom:1px solid rgba(255,255,255,.18);
}

.device-bar span{
    width:.46rem;
    height:.46rem;
    border-radius:50%;
    background:rgba(255,255,255,.72);
}

.device-screen{
    aspect-ratio:16 / 10;
    min-height:270px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        rgba(0,0,0,.18);
}

.device-screen img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:top center;
}

.device-screen.has-image .screen-placeholder{
    display:none;
}

.device-screen.has-image.image-missing .screen-placeholder{
    display:flex;
}

.screen-placeholder{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(1.2rem,2.4vw,2rem);
    background:
        linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
    background-size:3.2rem 3.2rem;
}

.screen-placeholder span{
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.68;
}

.screen-placeholder strong{
    max-width:8ch;
    font-size:clamp(2.6rem,5.4vw,5.4rem);
    line-height:.9;
    font-weight:800;
}

/* -------------------------------- */
/* EXPERIENCE */
/* -------------------------------- */

.number-block{
    padding:clamp(8rem,16vw,16rem) var(--gutter);
    text-align:center;
}

.number{
    font-size:clamp(8rem,19vw,20rem);
    line-height:.78;
    font-weight:800;
    letter-spacing:0;
}

.number-label{
    max-width:24ch;
    margin:clamp(1rem,2vw,1.5rem) auto 0;
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.6rem,3vw,2.9rem);
    line-height:1.05;
    color:var(--muted);
}

/* -------------------------------- */
/* CLOSING */
/* -------------------------------- */

.closing{
    padding:clamp(7rem,13vw,13rem) var(--gutter);
    background:var(--text);
    color:var(--paper);
}

.closing-inner{
    width:min(100%,var(--max));
}

.closing h2{
    max-width:11ch;
    margin-bottom:clamp(1.3rem,3vw,2.3rem);
    font-size:clamp(3.25rem,7.8vw,8rem);
    line-height:.88;
    font-weight:800;
    letter-spacing:0;
}

.closing p{
    max-width:28ch;
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.8rem,3.5vw,3.3rem);
    line-height:1.04;
    color:rgba(245,242,235,.72);
}

.closing-cta:hover{
    background:var(--paper);
    color:var(--text);
}

/* -------------------------------- */
/* FOOTER */
/* -------------------------------- */

footer{
    padding:clamp(7rem,12vw,12rem) var(--gutter) clamp(2.5rem,5vw,5rem);
}

footer p{
    margin-bottom:clamp(1.6rem,3vw,2.4rem);
    font-size:.86rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.18em;
    text-transform:uppercase;
    opacity:.48;
}

footer a{
    display:block;
    width:max-content;
    max-width:100%;
    font-size:clamp(2.05rem,5.8vw,6rem);
    line-height:1;
    letter-spacing:0;
    font-weight:800;
    word-break:normal;
    overflow-wrap:anywhere;
    text-decoration-thickness:.08em;
    text-underline-offset:.16em;
    transition:opacity .3s var(--ease), text-decoration-color .3s var(--ease);
}

footer a:hover{
    opacity:.62;
    text-decoration:underline;
    text-decoration-color:currentColor;
}

.footer-note{
    margin-top:clamp(4rem,8vw,7rem);
    font-size:.92rem;
    color:var(--muted);
    opacity:.52;
}

/* -------------------------------- */
/* SLOW RAIN */
/* -------------------------------- */

.rain{
    position:fixed;
    top:-300px;
    width:1px;
    background:#111;
    opacity:.05;
    pointer-events:none;
    animation:fall linear forwards;
}

@keyframes fall{
    to{
        transform:translateY(130vh);
    }
}

/* -------------------------------- */
/* MOTION PREFERENCES */
/* -------------------------------- */

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

    .project,
    .brand::after,
    .project a{
        transition:none;
    }
}

/* -------------------------------- */
/* MOBILE */
/* -------------------------------- */

@media (max-width:900px){
    :root{
        --gutter:1.35rem;
        --section:6.8rem;
    }

    .hero{
        min-height:92svh;
    }

    .brand{
        font-size:.66rem;
        letter-spacing:.3em;
    }

    .hero h1{
        max-width:8ch;
        font-size:clamp(4rem,18vw,6.6rem);
        letter-spacing:0;
    }

    .subtitle{
        max-width:10ch;
        font-size:clamp(2.8rem,12vw,4.4rem);
    }

    .manifest h2{
        max-width:12ch;
        font-size:clamp(2.55rem,12vw,4.8rem);
    }

    .philosophy-inner{
        margin-left:0;
    }

    .philosophy h2,
    .anti-pitch li{
        letter-spacing:0;
    }

    .section-label,
    .work-intro span,
    .project-label{
        font-size:.66rem;
        letter-spacing:.2em;
    }

    .anti-pitch li{
        font-size:clamp(1.9rem,9vw,3.2rem);
        line-height:1.04;
    }

    .hero-cta,
    .closing-cta{
        white-space:normal;
        max-width:100%;
        line-height:1.25;
    }

    .process-grid{
        grid-template-columns:1fr;
        width:calc(100% - (var(--gutter) * 2));
    }

    .process-item{
        min-height:15rem;
        border-right:1px solid var(--line);
        border-bottom:1px solid var(--line);
    }

    .process-item:first-child{
        border-top:0;
    }

    .project{
        min-height:82svh;
        padding-top:4.5rem;
        padding-bottom:2rem;
    }

    .project:first-of-type{
        min-height:92svh;
    }

    .project h2{
        font-size:clamp(3.25rem,15vw,5.6rem);
        letter-spacing:0;
    }

    .project-inner{
        grid-template-columns:1fr;
        gap:2.8rem;
    }

    .project-headline{
        font-size:clamp(1.75rem,8vw,2.85rem);
    }

    .case-study-row{
        grid-template-columns:1fr;
        gap:.45rem;
    }

    .case-study-row span,
    .case-study-row p{
        padding-right:1rem;
        padding-left:1rem;
    }

    .device-frame{
        transform:none;
    }

    .device-screen{
        min-height:210px;
    }

    .number{
        font-size:clamp(7rem,34vw,10rem);
    }

    .closing h2{
        font-size:clamp(3.1rem,14vw,5.4rem);
    }

    footer a{
        width:auto;
        font-size:clamp(1.8rem,9vw,3.7rem);
    }
}

@media (max-width:420px){
    .hero{
        min-height:88svh;
    }

    .hero h1{
        font-size:clamp(3.55rem,17vw,4.7rem);
    }

    .subtitle{
        font-size:clamp(2.45rem,11vw,3.45rem);
    }

    .project h2{
        font-size:clamp(2.95rem,14vw,4.4rem);
    }
}


/* -------------------------------- */
/* PORTFOLIO WALL */
/* -------------------------------- */

.portfolio-showcase{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:clamp(1rem,1.8vw,1.5rem);
    padding:0 var(--gutter) clamp(5rem,9vw,9rem);
}

.portfolio-showcase .project{
    grid-column:span 4;
    min-height:auto;
    align-items:stretch;
    border-radius:clamp(1.15rem,2vw,2rem);
    padding:clamp(1.35rem,2.5vw,2.5rem);
    box-shadow:0 1.2rem 3rem rgba(20,18,15,.12);
}

.portfolio-showcase .project:first-of-type,
.portfolio-showcase .project-featured{
    grid-column:1 / -1;
    min-height:min(80svh,760px);
    padding:clamp(2.2rem,6vw,6rem);
}

.portfolio-showcase .project-inner{
    width:100%;
}

.project-compact .project-inner{
    display:flex;
    flex-direction:column;
    gap:clamp(1.1rem,1.8vw,1.5rem);
    height:100%;
}

.project-compact .project-copy{
    display:flex;
    flex:1;
    flex-direction:column;
    max-width:none;
}

.project-compact .project-label{
    margin-bottom:.8rem;
    font-size:.62rem;
    letter-spacing:.18em;
}

.project-compact h2{
    max-width:9ch;
    margin-bottom:.85rem;
    font-size:clamp(2.05rem,3vw,3.45rem);
    line-height:.88;
}

.project-compact .project-headline{
    max-width:18ch;
    margin-bottom:1.1rem;
    font-size:clamp(1.22rem,1.65vw,1.68rem);
    line-height:1.08;
}

.project-compact .case-study,
.project-compact .project-details{
    display:none;
}

.project-compact .project a{
    width:max-content;
    margin-top:auto;
    font-size:.72rem;
    letter-spacing:.1em;
}

.project-compact .project-media{
    order:-1;
    width:100%;
    perspective:none;
}

.project-compact .project-media::before{
    inset:18% 4% -16%;
    opacity:.32;
    filter:blur(30px);
}

.project-compact .device-frame{
    border-radius:1rem;
    transform:none;
    box-shadow:0 1rem 2.6rem rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.2);
}

.project-compact .device-bar{
    height:1.45rem;
    padding:0 .58rem;
    gap:.3rem;
}

.project-compact .device-bar span{
    width:.34rem;
    height:.34rem;
}

.project-compact .device-screen{
    min-height:150px;
    aspect-ratio:4 / 3;
}

.project-compact .screen-placeholder{
    padding:1rem;
}

.project-compact .screen-placeholder strong{
    font-size:clamp(1.85rem,3vw,2.85rem);
}

@media (max-width:1080px){
    .portfolio-showcase .project{
        grid-column:span 6;
    }

    .portfolio-showcase .project-featured{
        grid-column:1 / -1;
    }
}

@media (max-width:760px){
    .portfolio-showcase{
        grid-template-columns:1fr;
        padding-bottom:clamp(4rem,10vw,6rem);
    }

    .portfolio-showcase .project,
    .portfolio-showcase .project-featured,
    .portfolio-showcase .project:first-of-type{
        grid-column:1 / -1;
        min-height:auto;
        padding:clamp(1.45rem,6vw,2.4rem);
    }

    .portfolio-showcase .project-featured .project-inner{
        grid-template-columns:1fr;
        gap:2.8rem;
    }

    .project-compact h2{
        font-size:clamp(2.55rem,12vw,4rem);
    }

    .project-compact .project-headline{
        font-size:clamp(1.45rem,7vw,2.25rem);
    }

    .project-compact .device-screen{
        min-height:210px;
        aspect-ratio:16 / 10;
    }
}
/* -------------------------------- */
/* WEBSITE DEPTH SECTIONS */
/* -------------------------------- */

.signal-test{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(220px,.58fr) minmax(0,1fr);
    gap:clamp(2rem,6vw,7rem);
    padding:clamp(5rem,10vw,10rem) var(--gutter);
    background:#10100f;
    color:var(--paper);
}

.signal-test::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(circle at 18% 18%, rgba(245,242,235,.2), transparent 18rem),
        radial-gradient(circle at 74% 70%, rgba(227,93,64,.18), transparent 24rem),
        linear-gradient(90deg, rgba(245,242,235,.055) 1px, transparent 1px),
        linear-gradient(rgba(245,242,235,.045) 1px, transparent 1px);
    background-size:auto, auto, 4rem 4rem, 4rem 4rem;
}

.signal-test::after{
    content:"";
    position:absolute;
    inset:12% auto auto 46%;
    width:42vw;
    aspect-ratio:1;
    z-index:-1;
    border:1px solid rgba(245,242,235,.12);
    border-radius:50%;
    transform:translate(-50%,-20%);
}

.signal-meter{
    position:sticky;
    top:clamp(2rem,8vw,6rem);
    align-self:start;
    display:grid;
    gap:clamp(1rem,2vw,1.6rem);
}

.signal-meter span{
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(245,242,235,.55);
}

.signal-meter strong{
    font-size:clamp(8rem,20vw,22rem);
    line-height:.72;
    font-weight:800;
    letter-spacing:0;
    color:rgba(245,242,235,.96);
}

.signal-copy{
    width:min(100%,820px);
}

.signal-copy .section-label{
    color:rgba(245,242,235,.54);
}

.signal-copy h2{
    max-width:10ch;
    margin:clamp(1rem,2vw,1.5rem) 0 clamp(1.2rem,2.8vw,2.5rem);
    font-size:clamp(3.4rem,8vw,8.8rem);
    line-height:.86;
    font-weight:800;
    letter-spacing:0;
}

.signal-intro{
    max-width:38ch;
    margin:0 0 clamp(2rem,4vw,3.5rem);
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.55rem,2.7vw,2.65rem);
    line-height:1.08;
    color:rgba(245,242,235,.7);
}

.signal-questions{
    display:grid;
    border-top:1px solid rgba(245,242,235,.16);
}

.signal-question{
    display:grid;
    grid-template-columns:4rem minmax(0,.55fr) minmax(0,1fr);
    gap:clamp(1rem,2.2vw,2rem);
    align-items:start;
    width:100%;
    padding:clamp(1.1rem,2vw,1.7rem) 0;
    border:0;
    border-bottom:1px solid rgba(245,242,235,.16);
    background:transparent;
    color:inherit;
    text-align:left;
    cursor:pointer;
}

.signal-question span{
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.18em;
    color:rgba(245,242,235,.42);
}

.signal-question strong{
    font-size:clamp(1.15rem,1.75vw,1.7rem);
    line-height:1.05;
    font-weight:800;
    letter-spacing:0;
}

.signal-question em{
    max-height:0;
    overflow:hidden;
    font-style:normal;
    font-size:clamp(.98rem,1.15vw,1.08rem);
    line-height:1.55;
    color:rgba(245,242,235,.68);
    opacity:0;
    transition:max-height .45s var(--ease), opacity .45s var(--ease);
}

.signal-question.active em,
.signal-question:hover em,
.signal-question:focus-visible em{
    max-height:9rem;
    opacity:1;
}

.signal-question.active strong,
.signal-question:hover strong,
.signal-question:focus-visible strong{
    color:#fff;
}

.signal-outcome{
    max-width:35ch;
    margin:clamp(2rem,4vw,3.2rem) 0 0;
    font-size:clamp(1.2rem,1.8vw,1.8rem);
    line-height:1.18;
    font-weight:800;
    letter-spacing:0;
    color:rgba(245,242,235,.94);
}

.signal-cta{
    display:inline-flex;
    width:max-content;
    margin-top:clamp(1.4rem,2.8vw,2.4rem);
    padding:.95rem 1.15rem;
    border:1px solid rgba(245,242,235,.7);
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--paper);
    transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.signal-cta:hover{
    background:var(--paper);
    color:var(--text);
    transform:translateY(-2px);
}

.trust-line{
    width:min(calc(100% - (var(--gutter) * 2)),var(--max));
    display:grid;
    grid-template-columns:minmax(160px,.25fr) minmax(0,1fr);
    gap:clamp(1rem,3vw,3rem);
    align-items:center;
    margin:clamp(2rem,4vw,4rem) auto clamp(4rem,7vw,7rem);
    padding:clamp(1.2rem,2vw,1.8rem) 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.trust-line span{
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--muted);
}

.trust-line p{
    margin:0;
    font-size:clamp(1.4rem,2.4vw,2.5rem);
    line-height:1.05;
    font-weight:800;
    letter-spacing:0;
}

.faq{
    padding:clamp(5rem,10vw,10rem) var(--gutter);
}

.faq-inner{
    width:min(100%,var(--max));
    display:grid;
    grid-template-columns:minmax(180px,.34fr) minmax(0,1fr);
    gap:clamp(2rem,6vw,7rem);
    align-items:start;
}

.faq-list{
    border-top:1px solid var(--line);
}

.faq details{
    border-bottom:1px solid var(--line);
}

.faq summary{
    display:flex;
    justify-content:space-between;
    gap:2rem;
    padding:clamp(1.2rem,2.2vw,2rem) 0;
    cursor:pointer;
    list-style:none;
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.65rem,3vw,3rem);
    line-height:1.05;
}

.faq summary::-webkit-details-marker{
    display:none;
}

.faq summary::after{
    content:"+";
    flex:0 0 auto;
    font-family:'Manrope',Arial,sans-serif;
    font-size:1.4rem;
    font-weight:700;
    line-height:1;
    color:var(--muted);
}

.faq details[open] summary::after{
    content:"-";
}

.faq details p{
    max-width:54ch;
    margin:0;
    padding:0 0 clamp(1.4rem,2.6vw,2.4rem);
    font-size:clamp(1rem,1.25vw,1.16rem);
    line-height:1.65;
    color:var(--muted);
}

@media (max-width:980px){
    .signal-test{
        grid-template-columns:1fr;
    }

    .signal-meter{
        position:relative;
        top:auto;
        grid-template-columns:auto 1fr;
        align-items:end;
    }

    .signal-meter strong{
        font-size:clamp(5rem,24vw,10rem);
    }

    .signal-question{
        grid-template-columns:3rem minmax(0,1fr);
    }

    .signal-question em{
        grid-column:2;
    }

    .faq-inner,
    .trust-line{
        grid-template-columns:1fr;
    }
}

@media (max-width:620px){
    .signal-copy h2{
        font-size:clamp(3rem,14vw,5.2rem);
    }

    .signal-question{
        grid-template-columns:1fr;
        gap:.6rem;
    }

    .signal-question em{
        grid-column:auto;
    }

    .faq summary{
        gap:1.2rem;
    }
}
/* -------------------------------- */
/* FINAL POLISH */
/* -------------------------------- */

.signal-question{
    cursor:default;
}

.signal-question em,
.signal-question.active em,
.signal-question:hover em,
.signal-question:focus-visible em{
    max-height:none;
    opacity:1;
}

.signal-question:hover strong,
.signal-question:focus-visible strong{
    color:inherit;
}

.signal-cta{
    text-decoration:none;
}

.portfolio-showcase .case-study,
.portfolio-showcase .project-details{
    display:none;
}

.portfolio-showcase .project-featured{
    min-height:min(62svh,620px);
    padding:clamp(1.8rem,4.5vw,4.5rem);
}

.project-featured .project-inner{
    grid-template-columns:minmax(0,.72fr) minmax(300px,.78fr);
    gap:clamp(2rem,5vw,5rem);
    align-items:center;
}

.project-featured h2{
    margin-bottom:clamp(1rem,2vw,1.6rem);
    font-size:clamp(3.2rem,7vw,7rem);
}

.project-featured .project-headline{
    margin-bottom:clamp(1.3rem,2.5vw,2rem);
    font-size:clamp(1.6rem,2.8vw,2.8rem);
}

.project-featured .device-screen{
    min-height:230px;
}

.project-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:.9rem 1.2rem;
}

.project-case-button{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:0 0 .35rem;
    border:0;
    border-bottom:1px solid currentColor;
    background:transparent;
    color:inherit;
    font:inherit;
    font-size:.86rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
    cursor:pointer;
    opacity:.9;
    transition:opacity .3s var(--ease);
}

.project-case-button:hover,
.project-case-button:focus-visible{
    opacity:1;
}

.project-compact .project-actions{
    margin-top:auto;
}

.project-compact .project-case-button,
.project-compact .project a{
    font-size:.72rem;
    letter-spacing:.1em;
}

.project-modal{
    position:fixed;
    inset:0;
    z-index:9998;
    display:grid;
    place-items:center;
    padding:var(--gutter);
    opacity:0;
    pointer-events:none;
    transition:opacity .28s var(--ease);
}

.project-modal.open{
    opacity:1;
    pointer-events:auto;
}

.project-modal-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(17,17,16,.72);
    cursor:pointer;
}

.project-modal-panel{
    position:relative;
    width:min(100%,920px);
    max-height:min(84svh,760px);
    overflow:auto;
    padding:clamp(1.5rem,4vw,3rem);
    background:var(--paper);
    color:var(--text);
    border:1px solid rgba(17,17,16,.14);
    box-shadow:0 2rem 7rem rgba(0,0,0,.34);
}

.project-modal-close{
    position:absolute;
    top:1rem;
    right:1rem;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
    cursor:pointer;
}

.project-modal-label{
    display:block;
    margin-bottom:clamp(1.2rem,2vw,1.8rem);
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--muted);
}

.project-modal h3{
    max-width:9ch;
    margin-bottom:clamp(1rem,2vw,1.5rem);
    font-size:clamp(3rem,7vw,6.8rem);
    line-height:.86;
    font-weight:800;
    letter-spacing:0;
}

.project-modal-headline{
    max-width:24ch;
    margin-bottom:clamp(1.8rem,3vw,2.8rem);
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.7rem,3vw,3rem);
    line-height:1.06;
    color:var(--muted);
}

.project-modal-case{
    display:grid;
    gap:1px;
    margin-bottom:clamp(1.6rem,3vw,2.6rem);
    border:1px solid var(--line);
    background:var(--line);
}

.project-modal-case div{
    display:grid;
    grid-template-columns:8rem minmax(0,1fr);
    gap:1.2rem;
    padding:1rem;
    background:var(--paper);
}

.project-modal-case span{
    font-size:.66rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--muted);
}

.project-modal-case p{
    margin:0;
    font-size:clamp(1rem,1.2vw,1.12rem);
    line-height:1.5;
}

.project-modal-details{
    display:grid;
    gap:.55rem;
    margin:0 0 clamp(1.4rem,2.4vw,2rem);
    padding-left:1.1rem;
    color:var(--muted);
}

.project-modal-link{
    display:inline-flex;
    padding-bottom:.35rem;
    border-bottom:1px solid currentColor;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

body.modal-open{
    overflow:hidden;
}

@media (max-width:760px){
    .project-featured .project-inner{
        grid-template-columns:1fr;
    }

    .project-modal-panel{
        max-height:88svh;
    }

    .project-modal-case div{
        grid-template-columns:1fr;
        gap:.5rem;
    }
}
/* -------------------------------- */
/* FINAL ADJUSTMENTS */
/* -------------------------------- */

.signal-test + .anti-pitch{
    padding-top:clamp(5rem,10vw,9rem);
}

.project-modal[hidden]{
    display:none;
}

.project-actions{
    margin-top:clamp(1.2rem,2vw,1.8rem);
}

.project-case-button,
.project a{
    min-height:2.65rem;
}

.project-case-button{
    justify-content:center;
    padding:.82rem 1.05rem;
    border:1px solid currentColor;
    border-radius:999px;
    background:rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.project-case-button:hover,
.project-case-button:focus-visible{
    background:rgba(255,255,255,.18);
    transform:translateY(-1px);
}

.project-compact .project-actions{
    margin-top:.25rem;
}

.project-compact .project-case-button,
.project-compact .project a{
    font-size:.68rem;
}

.project-compact .project-case-button{
    position:absolute;
    right:1rem;
    bottom:1rem;
    z-index:4;
    background:rgba(255,255,255,.18);
}

.project-compact .project a{
    position:absolute;
    left:1rem;
    bottom:1.12rem;
    z-index:4;
    margin-top:0;
}

.project-compact{
    padding-bottom:4.9rem;
}

.project-compact .project-copy{
    min-height:0;
}

body.js-ready .project.visible{
    will-change:auto;
}

@media (max-width:760px){
    .signal-test + .anti-pitch{
        padding-top:clamp(4rem,14vw,6rem);
    }

    .project-compact .project-case-button,
    .project-compact .project a{
        position:static;
    }

    .project-compact{
        padding-bottom:clamp(1.45rem,6vw,2.4rem);
    }
}
/* -------------------------------- */
/* PROJECTS AS SIGNAL SYSTEM */
/* -------------------------------- */

.portfolio-showcase{
    gap:clamp(1rem,1.6vw,1.35rem);
    padding-top:clamp(1rem,2vw,2rem);
}

.portfolio-showcase .project{
    --project-ink:var(--project-text, #f5f2eb);
    position:relative;
    overflow:hidden;
    border:1px solid rgba(245,242,235,.15);
    border-radius:0;
    background:
        radial-gradient(circle at 78% 14%, rgba(245,242,235,.22), transparent 17rem),
        radial-gradient(circle at 18% 84%, rgba(245,242,235,.1), transparent 20rem),
        linear-gradient(90deg, rgba(245,242,235,.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(245,242,235,.055) 1px, transparent 1px),
        color-mix(in srgb, var(--project-bg) 78%, #111110 22%) !important;
    background-size:auto, auto, 4rem 4rem, 4rem 4rem, auto;
    color:var(--project-ink);
    box-shadow:none;
}

.portfolio-showcase .project::before{
    inset:0;
    z-index:0;
    opacity:1;
    background:
        linear-gradient(135deg, rgba(17,17,16,.08), rgba(17,17,16,.34)),
        radial-gradient(circle at 50% -10%, rgba(245,242,235,.16), transparent 26rem);
}

.portfolio-showcase .project::after{
    inset:8% auto auto 48%;
    width:min(42rem,46vw);
    aspect-ratio:1;
    z-index:0;
    border:1px solid rgba(245,242,235,.11);
    border-radius:50%;
    background:none;
    opacity:1;
    transform:translate(-50%,-26%);
}

.portfolio-showcase .project-inner{
    position:relative;
    z-index:1;
}

.project-label,
.project-modal-label{
    color:rgba(245,242,235,.55);
}

.project h2{
    max-width:10ch;
    font-size:clamp(3.2rem,8vw,8.8rem);
    line-height:.86;
    font-weight:800;
    letter-spacing:0;
    color:rgba(245,242,235,.96);
}

.project-headline{
    max-width:34ch;
    font-size:clamp(1.45rem,2.5vw,2.65rem);
    line-height:1.08;
    color:rgba(245,242,235,.72);
}

.project-actions{
    gap:.75rem;
}

.project-case-button,
.project a,
.project-modal-link{
    border-color:rgba(245,242,235,.72);
    color:var(--paper);
    transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}

.project-case-button{
    background:transparent;
    box-shadow:none;
}

.project a{
    padding:.82rem 1.05rem;
    border:1px solid rgba(245,242,235,.42);
    border-radius:999px;
    text-decoration:none;
}

.project-case-button:hover,
.project-case-button:focus-visible,
.project a:hover,
.project a:focus-visible,
.project-modal-link:hover,
.project-modal-link:focus-visible{
    background:var(--paper);
    border-color:var(--paper);
    color:var(--text);
    transform:translateY(-2px);
}

.project-media::before{
    background:rgba(245,242,235,.2);
    opacity:.4;
}

.device-frame{
    border:1px solid rgba(245,242,235,.2);
    border-radius:0;
    background:rgba(245,242,235,.11);
    box-shadow:0 2rem 6rem rgba(0,0,0,.28), inset 0 1px 0 rgba(245,242,235,.2);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.device-bar{
    background:rgba(245,242,235,.14);
    border-bottom:1px solid rgba(245,242,235,.16);
}

.device-bar span{
    background:rgba(245,242,235,.82);
}

.device-screen{
    background:rgba(17,17,16,.16);
}

.device-screen img{
    filter:saturate(.94) contrast(.98);
}

.project-compact{
    min-height:clamp(520px,48vw,620px);
}

.project-compact .project-inner{
    gap:clamp(1rem,1.5vw,1.35rem);
}

.project-compact .project-label{
    color:rgba(245,242,235,.52);
}

.project-compact h2{
    max-width:9ch;
    font-size:clamp(2.6rem,4.4vw,4.8rem);
    line-height:.86;
}

.project-compact .project-headline{
    max-width:22ch;
    color:rgba(245,242,235,.68);
}

.project-compact .device-frame{
    border-radius:0;
    box-shadow:0 1.3rem 3.6rem rgba(0,0,0,.22), inset 0 1px 0 rgba(245,242,235,.18);
}

.project-compact .project-case-button,
.project-compact .project a{
    background:rgba(17,17,16,.08);
    color:var(--paper);
}

.project-modal-panel{
    border-radius:0;
    background:#111110;
    color:var(--paper);
    border-color:rgba(245,242,235,.16);
    background-image:
        radial-gradient(circle at 82% 10%, rgba(245,242,235,.12), transparent 18rem),
        linear-gradient(90deg, rgba(245,242,235,.045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(245,242,235,.045) 1px, transparent 1px);
    background-size:auto, 4rem 4rem, 4rem 4rem;
}

.project-modal h3{
    color:rgba(245,242,235,.96);
}

.project-modal-headline,
.project-modal-details{
    color:rgba(245,242,235,.7);
}

.project-modal-case{
    border-color:rgba(245,242,235,.16);
    background:rgba(245,242,235,.16);
}

.project-modal-case div{
    background:#111110;
}

.project-modal-case span,
.project-modal-close{
    color:rgba(245,242,235,.55);
}

@media (max-width:760px){
    .portfolio-showcase .project{
        border-right:0;
        border-left:0;
    }

    .project h2{
        font-size:clamp(3rem,13vw,5rem);
    }

    .project-compact{
        min-height:auto;
    }
}
/* -------------------------------- */
/* PROJECT SIGNAL TUNING */
/* -------------------------------- */

.portfolio-showcase .project{
    background-color:var(--project-bg) !important;
}

.project-featured .project-inner{
    grid-template-columns:minmax(0,.9fr) minmax(340px,.76fr);
}

.project-featured h2{
    max-width:8.8ch;
    font-size:clamp(3.1rem,6.4vw,7.3rem);
}

.project-featured .project-headline{
    max-width:28ch;
}

.project-featured .project-media{
    justify-self:end;
    width:min(100%,720px);
}

.project-featured .device-frame{
    transform:none;
}

@media (max-width:980px){
    .project-featured .project-inner{
        grid-template-columns:1fr;
    }

    .project-featured .project-media{
        justify-self:stretch;
        width:100%;
    }
}
/* -------------------------------- */
/* PROJECT FINAL COMPOSITION */
/* -------------------------------- */

.project-0{
    background:
        radial-gradient(circle at 78% 12%, rgba(255,248,236,.44), transparent 19rem),
        radial-gradient(circle at 20% 86%, rgba(255,210,184,.28), transparent 22rem),
        radial-gradient(circle at 68% 76%, rgba(255,128,88,.3), transparent 25rem),
        linear-gradient(90deg, rgba(245,242,235,.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(245,242,235,.06) 1px, transparent 1px),
        color-mix(in srgb, var(--project-bg) 88%, #f7c3ad 12%) !important;
    background-size:auto, auto, auto, 4rem 4rem, 4rem 4rem, auto;
}

.project-0::before{
    background:
        linear-gradient(135deg, rgba(17,17,16,.02), rgba(17,17,16,.2)),
        radial-gradient(circle at 50% -10%, rgba(245,242,235,.2), transparent 26rem);
}

.project-1,
.project-2,
.project-3{
    background:
        radial-gradient(circle at 76% 14%, rgba(255,255,255,.3), transparent 18rem),
        radial-gradient(circle at 18% 86%, rgba(245,242,235,.18), transparent 22rem),
        radial-gradient(circle at 62% 72%, color-mix(in srgb, var(--project-bg) 32%, #ffffff 68%), transparent 24rem),
        linear-gradient(90deg, rgba(245,242,235,.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(245,242,235,.06) 1px, transparent 1px),
        color-mix(in srgb, var(--project-bg) 82%, #111110 18%) !important;
    background-size:auto, auto, auto, 4rem 4rem, 4rem 4rem, auto;
}

.project-1::before,
.project-2::before,
.project-3::before{
    background:
        linear-gradient(135deg, rgba(17,17,16,.04), rgba(17,17,16,.28)),
        radial-gradient(circle at 50% -10%, rgba(245,242,235,.18), transparent 26rem);
}

.project-featured .device-frame{
    transform:rotate(1.4deg) translateY(.25rem);
    transform-origin:center;
}

.project-compact .device-frame{
    transform:rotate(-1.1deg);
    transform-origin:center;
}

.project-2 .device-frame{
    transform:rotate(.9deg);
}

.project-3 .device-frame{
    transform:rotate(-.8deg);
}

.project-actions,
.project-compact .project-actions{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:.75rem;
    margin-top:clamp(1.2rem,2vw,1.8rem);
}

.project-case-button,
.project a{
    position:static !important;
    inset:auto !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:max-content;
    min-height:2.7rem;
    margin:0 !important;
    padding:.86rem 1.08rem;
    border-radius:999px;
    font-size:.74rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
}

.project-case-button,
.project-compact .project-case-button{
    border:1px solid rgba(245,242,235,.72);
    background:transparent;
    color:var(--paper);
    box-shadow:none;
}

.project-actions a,
.project-compact .project-actions a{
    border:1px solid var(--paper);
    background:var(--paper);
    color:var(--text);
    text-decoration:none;
}

.project-case-button:hover,
.project-case-button:focus-visible{
    background:rgba(245,242,235,.14);
    color:var(--paper);
    transform:translateY(-2px);
}

.project-actions a:hover,
.project-actions a:focus-visible{
    gap:.65rem;
    background:rgba(245,242,235,.14);
    color:var(--paper);
    transform:translateY(-2px);
}

.project-compact{
    padding-bottom:clamp(1.35rem,2.5vw,2.5rem);
}

@media (max-width:520px){
    .project-actions,
    .project-compact .project-actions{
        flex-wrap:wrap;
    }
}
/* -------------------------------- */
/* SELECTED WORK INDEX */
/* -------------------------------- */

.work-index{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:block;
    width:100%;
    padding:clamp(4rem,8vw,7rem) var(--gutter);
    background:
        radial-gradient(circle at 16% 18%, rgba(245,242,235,.16), transparent 18rem),
        radial-gradient(circle at 82% 70%, rgba(227,93,64,.14), transparent 24rem),
        linear-gradient(90deg, rgba(245,242,235,.055) 1px, transparent 1px),
        linear-gradient(0deg, rgba(245,242,235,.055) 1px, transparent 1px),
        #111110;
    background-size:auto, auto, 4rem 4rem, 4rem 4rem, auto;
    color:var(--paper);
}

.work-index::after{
    content:"";
    position:absolute;
    inset:10% auto auto 34%;
    width:min(44rem,52vw);
    aspect-ratio:1;
    z-index:-1;
    border:1px solid rgba(245,242,235,.1);
    border-radius:50%;
    transform:translate(-50%,-20%);
}

.work-index-shell{
    width:min(100%,var(--max));
    display:grid;
    grid-template-columns:minmax(220px,.32fr) minmax(0,1fr);
    gap:clamp(2rem,5vw,5rem);
}

.work-index-rail{
    position:sticky;
    top:clamp(2rem,8vw,6rem);
    align-self:start;
    display:grid;
    gap:clamp(1rem,2vw,1.6rem);
}

.work-index-rail .section-label{
    color:rgba(245,242,235,.55);
}

.work-index-rail strong{
    font-size:clamp(7rem,16vw,18rem);
    line-height:.72;
    font-weight:800;
    letter-spacing:0;
    color:rgba(245,242,235,.95);
}

.work-index-rail h2{
    max-width:12ch;
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.8rem,3vw,3.1rem);
    line-height:1.02;
    font-weight:400;
    color:rgba(245,242,235,.68);
}

.work-list{
    display:grid;
    border-top:1px solid rgba(245,242,235,.16);
}

.work-case{
    position:relative;
    display:grid;
    grid-template-columns:4rem minmax(0,1fr) minmax(180px,.32fr) minmax(220px,.34fr);
    gap:clamp(1rem,2vw,2rem);
    align-items:center;
    min-height:clamp(11rem,17vw,15rem);
    padding:clamp(1.1rem,2vw,1.6rem) 0;
    border-bottom:1px solid rgba(245,242,235,.16);
    color:var(--paper);
    opacity:1;
    transform:none;
}

.work-case::before{
    content:"";
    position:absolute;
    inset:.65rem auto .65rem -1rem;
    width:.28rem;
    background:var(--project-bg);
    opacity:.85;
    transition:width .35s var(--ease), opacity .35s var(--ease);
}

.work-case::after{
    content:"";
    position:absolute;
    inset:.65rem -1rem .65rem -1rem;
    z-index:-1;
    background:
        radial-gradient(circle at 82% 36%, color-mix(in srgb, var(--project-bg) 34%, #ffffff 66%), transparent 16rem),
        linear-gradient(90deg, color-mix(in srgb, var(--project-bg) 18%, transparent), transparent 48%);
    opacity:0;
    transition:opacity .35s var(--ease);
}

body.js-ready .work-case{
    opacity:.18;
    transform:translateY(34px);
    transition:opacity .7s var(--ease), transform .7s var(--ease), background .35s var(--ease);
}

.work-case.visible,
body.js-ready .work-case.visible{
    opacity:1;
    transform:translateY(0);
}

.work-case:hover::before,
.work-case:focus-within::before{
    width:.55rem;
    opacity:1;
}

.work-case:hover::after,
.work-case:focus-within::after{
    opacity:.55;
}

.work-case-number{
    align-self:start;
    padding-top:.35rem;
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.18em;
    color:rgba(245,242,235,.42);
}

.work-case-copy h3{
    max-width:10ch;
    margin:0 0 .75rem;
    font-size:clamp(2.3rem,5vw,5.8rem);
    line-height:.86;
    font-weight:800;
    letter-spacing:0;
    color:rgba(245,242,235,.96);
}

.work-case-copy p{
    max-width:27ch;
    margin:0;
    font-family:'Instrument Serif',Georgia,serif;
    font-size:clamp(1.25rem,2vw,2.2rem);
    line-height:1.08;
    color:rgba(245,242,235,.68);
}

.work-case-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    gap:.7rem;
}

.work-case-button,
.work-case-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:2.65rem;
    width:max-content;
    padding:.85rem 1.05rem;
    border-radius:999px;
    font-size:.72rem;
    font-weight:800;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}

.work-case-button{
    border:1px solid rgba(245,242,235,.72);
    background:transparent;
    color:var(--paper);
    cursor:pointer;
}

.work-case-link{
    border:1px solid var(--paper);
    background:var(--paper);
    color:var(--text);
    text-decoration:none;
}

.work-case-button:hover,
.work-case-button:focus-visible{
    background:rgba(245,242,235,.13);
    transform:translateY(-2px);
}

.work-case-link:hover,
.work-case-link:focus-visible{
    background:var(--project-bg);
    border-color:var(--project-bg);
    color:var(--paper);
    transform:translateY(-2px);
}

.work-case-preview{
    position:relative;
    min-width:0;
}

.work-device{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(245,242,235,.2);
    background:rgba(245,242,235,.1);
    box-shadow:0 1.2rem 3.4rem rgba(0,0,0,.28), inset 0 1px 0 rgba(245,242,235,.18);
    transform:rotate(-1.4deg);
    transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.work-case:nth-of-type(even) .work-device{
    transform:rotate(1.1deg);
}

.work-case:hover .work-device,
.work-case:focus-within .work-device{
    border-color:rgba(245,242,235,.34);
    box-shadow:0 1.6rem 4.2rem rgba(0,0,0,.34), inset 0 1px 0 rgba(245,242,235,.2);
    transform:rotate(0deg) translateY(-.25rem);
}

.work-device-bar{
    height:1.45rem;
    display:flex;
    align-items:center;
    gap:.3rem;
    padding:0 .58rem;
    background:rgba(245,242,235,.14);
    border-bottom:1px solid rgba(245,242,235,.14);
}

.work-device-bar span{
    width:.34rem;
    height:.34rem;
    border-radius:999px;
    background:rgba(245,242,235,.82);
}

.work-device-screen{
    position:relative;
    aspect-ratio:16 / 10;
    min-height:130px;
    background:rgba(17,17,16,.16);
}

.work-device-screen img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    filter:saturate(.94) contrast(.98);
}

.work-device-screen.has-image .screen-placeholder{
    opacity:0;
}

@media (max-width:1120px){
    .work-index-shell{
        grid-template-columns:1fr;
    }

    .work-index-rail{
        position:relative;
        top:auto;
    }

    .work-index-rail strong{
        font-size:clamp(6rem,22vw,12rem);
    }
}

@media (max-width:900px){
    .work-case{
        grid-template-columns:3rem minmax(0,1fr);
    }

    .work-case-actions,
    .work-case-preview{
        grid-column:2;
    }

    .work-case-preview{
        max-width:32rem;
    }
}

@media (max-width:560px){
    .work-index{
        padding-top:clamp(3.5rem,12vw,5rem);
        padding-bottom:clamp(3.5rem,12vw,5rem);
    }

    .work-case{
        grid-template-columns:1fr;
        gap:1rem;
    }

    .work-case-number,
    .work-case-actions,
    .work-case-preview{
        grid-column:auto;
    }

    .work-case-copy h3{
        font-size:clamp(2.8rem,14vw,4.4rem);
    }
}
/* -------------------------------- */
/* WORK INDEX LAYOUT TUNING */
/* -------------------------------- */

.work-case{
    grid-template-columns:4rem minmax(0,1fr) minmax(260px,.34fr);
    grid-template-rows:auto auto;
    column-gap:clamp(1rem,2.4vw,2.4rem);
    row-gap:clamp(1rem,1.8vw,1.35rem);
    min-height:clamp(12rem,18vw,16rem);
}

.work-case-number{
    grid-column:1;
    grid-row:1 / 3;
}

.work-case-copy{
    grid-column:2;
    grid-row:1;
    min-width:0;
}

.work-case-copy h3{
    max-width:11.5ch;
    font-size:clamp(2.4rem,4.25vw,5rem);
}

.work-case-actions{
    grid-column:2;
    grid-row:2;
    flex-wrap:nowrap;
}

.work-case-preview{
    grid-column:3;
    grid-row:1 / 3;
    align-self:center;
}

.work-device-screen{
    min-height:155px;
}

@media (max-width:900px){
    .work-case{
        grid-template-columns:3rem minmax(0,1fr);
        grid-template-rows:auto;
    }

    .work-case-number{
        grid-column:1;
        grid-row:auto;
    }

    .work-case-copy,
    .work-case-actions,
    .work-case-preview{
        grid-column:2;
        grid-row:auto;
    }

    .work-case-actions{
        flex-wrap:wrap;
    }
}

@media (max-width:560px){
    .work-case-number,
    .work-case-copy,
    .work-case-actions,
    .work-case-preview{
        grid-column:auto;
    }
}
/* -------------------------------- */
/* WORK INDEX READABILITY FIX */
/* -------------------------------- */

body.js-ready .work-case,
body.js-ready .work-case.visible,
.work-case.visible{
    opacity:1;
    transform:none;
}
/* -------------------------------- */
/* LAUNCH PERFORMANCE POLISH */
/* -------------------------------- */

.work-device-screen img{
    z-index:1;
    opacity:1;
    filter:none;
}

.work-device-screen.has-image .screen-placeholder{
    display:none;
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
    }
}