#developer{container:developer / inline-size;--taupe:var(--accent);--hair:var(--line);--edge:var(--line);--ivory:var(--paper);--smoke:var(--surface);--sand:var(--surface);--deep:var(--ink);font-family:var(--font-body)}
#developer .nfblock{background: var(--paper); color: var(--ink); font-size: 14px; overflow: hidden;}
#developer .kicker{font-size: 10px; letter-spacing: 0.19em; text-transform: uppercase; font-weight: 700; color: var(--taupe);}
#developer .display{font: 400 clamp(35px, 4cqw, 62px) / 1.16 var(--font-display); letter-spacing: -0.028em; margin: 19px 0px;}
#developer .bodycopy{color: var(--taupe); font-size: 13px; line-height: 1.95; max-width: 460px;}
#developer .small-label{font: 600 10px / 1.4 Manrope, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--taupe);}
#developer .fine-rule{height: 1px; background: var(--edge);}
#developer .textlink{display: inline-flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-top: 26px;}
#developer .disclaimer{font-size: 9px; color: rgb(136, 128, 119); letter-spacing: 0.03em;}
#developer .metric-grid{display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);}
#developer .metric{padding: 22px 18px 25px; min-width: 0px;}
#developer .metric + .metric{border-left: 1px solid var(--edge);}
#developer .metric b{display: block; font: 400 clamp(28px, 3.1cqw, 48px) var(--font-display); letter-spacing: -0.04em; margin: 0px 0px 7px;}
#developer .metric span{display: block; font-size: 11px; color: var(--taupe);}
#developer .metric small{display: block; font-size: 10px; color: rgb(138, 130, 122); margin-top: 6px;}
#developer .project-visual{position: relative; min-height: 205px; background: linear-gradient(rgb(237, 232, 225) 0%, rgb(217, 210, 200) 100%); overflow: hidden;}
#developer .project-visual.dark{background: linear-gradient(rgb(216, 212, 206) 0%, rgb(198, 190, 179) 100%);}
#developer .project-visual .sky{position: absolute; inset: 0px; background: linear-gradient(rgb(246, 244, 239) 0%, rgb(232, 227, 219) 60%, rgb(216, 209, 199) 100%);}
#developer .project-visual .ground{position: absolute; left: 0px; right: 0px; bottom: 0px; height: 24%; background: linear-gradient(rgb(200, 193, 182), rgb(183, 173, 158));}
#developer .project-visual .blk{position: absolute; bottom: 18%; background: linear-gradient(rgb(248, 246, 242), rgb(219, 211, 199)); box-shadow: rgba(82, 74, 64, 0.08) 0px 0px 0px 1px inset;}
#developer .project-visual .blk::before{content: ""; position: absolute; inset: 0px; background: repeating-linear-gradient(90deg, rgba(120, 111, 99, 0.11) 0px, rgba(120, 111, 99, 0.11) 1px, transparent 1px, transparent 17px), repeating-linear-gradient(rgba(120, 111, 99, 0.1) 0px, rgba(120, 111, 99, 0.1) 1px, transparent 1px, transparent 14px);}
#developer .project-visual .water{position: absolute; left: -2%; right: -2%; bottom: 10%; height: 13%; background: linear-gradient(rgb(219, 224, 221), rgb(188, 201, 197)); transform: skewX(-8deg);}
#developer .pv-a .b1{left: 10%; width: 18%; height: 38%;}
#developer .pv-a .b2{left: 28%; width: 14%; height: 58%;}
#developer .pv-a .b3{left: 46%; width: 16%; height: 74%;}
#developer .pv-a .b4{left: 67%; width: 17%; height: 48%;}
#developer .pv-b .b1{left: 12%; width: 20%; height: 54%;}
#developer .pv-b .b2{left: 36%; width: 23%; height: 74%;}
#developer .pv-b .b3{left: 63%; width: 16%; height: 40%;}
#developer .pv-b .b4{left: 80%; width: 10%; height: 64%;}
#developer .pv-c .b1{left: 7%; width: 22%; height: 44%;}
#developer .pv-c .b2{left: 33%; width: 16%; height: 62%;}
#developer .pv-c .b3{left: 53%; width: 13%; height: 54%;}
#developer .pv-c .b4{left: 70%; width: 21%; height: 76%;}
#developer .pv-d .b1{left: 12%; width: 14%; height: 45%;}
#developer .pv-d .b2{left: 30%; width: 18%; height: 79%;}
#developer .pv-d .b3{left: 54%; width: 22%; height: 58%;}
#developer .pv-d .b4{left: 80%; width: 8%; height: 35%;}
#developer .pv-e .b1{left: 8%; width: 15%; height: 48%;}
#developer .pv-e .b2{left: 27%; width: 18%; height: 66%;}
#developer .pv-e .b3{left: 49%; width: 12%; height: 57%;}
#developer .pv-e .b4{left: 64%; width: 24%; height: 72%;}
#developer .tag{display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); padding: 7px 10px; color: rgb(91, 82, 74); background: var(--paper);}
#developer .btn-chip{display: inline-flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--line); padding: 10px 14px; color: rgb(91, 82, 74); background: transparent;}
#developer .btn-chip.active{background: var(--ink); color: rgb(255, 255, 255); border-color: var(--ink);}
#developer .portfolio-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;}
#developer .project-card{background: var(--paper); border: 1px solid var(--line);}
#developer .project-card .copy{padding: 18px;}
#developer .project-card h3{font: 400 22px / 1.18 var(--font-display); margin: 0px 0px 7px;}
#developer .project-card p{font-size: 11px; line-height: 1.7; color: rgb(108, 98, 88); margin: 0px 0px 14px;}
#developer .meta-line{display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--edge); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(123, 114, 105);}
#developer .v01{display: grid; grid-template-columns: 41% 59%; min-height: 645px;}
#developer .v01 .left{padding: 64px clamp(30px, 5cqw, 82px) 42px;}
#developer .v01 .bodycopy{max-width: 420px;}
#developer .v01 .metric-grid{margin-top: 32px; grid-template-columns: repeat(2, 1fr);}
#developer .v01 .metric{padding: 18px 0px;}
#developer .v01 .metric:nth-child(2n){padding-left: 24px; border-left: 1px solid var(--edge);}
#developer .v01 .metric:nth-child(n+3){border-top: 1px solid var(--edge);}
#developer .v01 .metric + .metric{border-left: 0px;}
#developer .v01 .textlink{margin-top: 18px;}
#developer .v01 .right{padding: 40px 42px 42px 0px; display: flex; flex-direction: column; gap: 18px;}
#developer .v01 .hero-project{display: grid; grid-template-columns: 54% 46%; border: 1px solid var(--edge); background: var(--paper); min-height: 295px;}
#developer .v01 .hero-project .copy{padding: 28px 28px 24px;}
#developer .v01 .hero-project h2{font: 400 clamp(29px, 3.2cqw, 42px) / 1.08 var(--font-display); margin: 12px 0px 10px;}
#developer .v01 .hero-project p{font-size: 12px; line-height: 1.8; color: rgb(108, 98, 88);}
#developer .v01 .mini-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
#developer .v01 .mini-card{border: 1px solid var(--edge); background: var(--paper);}
#developer .v01 .mini-card .project-visual{min-height: 128px;}
#developer .v01 .mini-card .copy{padding: 14px;}
#developer .v01 .mini-card h3{font: 400 16px var(--font-display); margin: 2px 0px 7px;}
#developer .v01 .mini-card p{font-size: 10px; line-height: 1.7; color: rgb(117, 107, 99); margin: 0px;}
#developer .v02{padding: 62px clamp(28px, 5cqw, 78px) 54px;}
#developer .v02 .top{display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start;}
#developer .v02 .top h2{font: 400 clamp(36px, 4.2cqw, 60px) / 1.12 var(--font-display); margin: 16px 0px 18px;}
#developer .v02 .aside{border-left: 1px solid var(--edge); padding-left: 28px;}
#developer .v02 .aside .service-list{display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 12px;}
#developer .v02 .aside .service-item{font-size: 11px; color: rgb(100, 91, 83); padding-bottom: 12px; border-bottom: 1px solid var(--edge);}
#developer .v02 .metric-grid{margin-top: 34px;}
#developer .v02 .cases{display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px;}
#developer .v02 .case{border: 1px solid var(--edge); background: var(--paper);}
#developer .v02 .case .project-visual{min-height: 156px;}
#developer .v02 .case .copy{padding: 16px;}
#developer .v02 .case strong{display: block; font: 400 18px var(--font-display); margin-bottom: 4px;}
#developer .v02 .case span{display: block; font-size: 10px; color: rgb(117, 107, 99); letter-spacing: 0.12em; text-transform: uppercase;}
#developer .v03{display: grid; grid-template-columns: 39% 61%; min-height: 670px;}
#developer .v03 .manifesto{background: var(--deep); color: rgb(247, 245, 241); padding: 62px clamp(30px, 5cqw, 78px) 52px; position: relative;}
#developer .v03 .manifesto .kicker{color: rgb(207, 200, 191);}
#developer .v03 .manifesto h2{font: 400 clamp(38px, 4.1cqw, 62px) / 1.08 var(--font-display); margin: 18px 0px 24px;}
#developer .v03 .manifesto p{font-size: 13px; line-height: 1.95; color: rgb(212, 205, 197); max-width: 420px;}
#developer .v03 .manifesto .quote{margin-top: 34px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); font: 400 24px / 1.5 Marcellus, serif; color: rgb(240, 236, 228);}
#developer .v03 .manifesto .sign{margin-top: 18px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(188, 180, 170);}
#developer .v03 .right{padding: 42px 42px 46px 32px;}
#developer .v03 .header{display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 20px;}
#developer .v03 .header .legend{font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(129, 120, 111);}
#developer .v03 .portfolio-grid{grid-template-columns: repeat(2, 1fr);}
#developer .v03 .services-box{display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 1px solid var(--edge); background: var(--paper);}
#developer .v03 .services-box div{padding: 18px; border-right: 1px solid var(--edge);}
#developer .v03 .services-box div:last-child{border-right: 0px;}
#developer .v03 .services-box b{display: block; font-size: 11px; margin-bottom: 7px;}
#developer .v03 .services-box span{font-size: 10px; color: rgb(125, 116, 107); line-height: 1.6;}
#developer .v04{padding: 60px clamp(28px, 5cqw, 78px) 52px;}
#developer .v04 .heading{display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px;}
#developer .v04 .heading h2{font: 400 clamp(39px, 4.7cqw, 68px) / 1.08 var(--font-display); margin: 14px 0px 0px;}
#developer .v04 .years{display: flex; gap: 10px; flex-wrap: wrap;}
#developer .v04 .years span{padding: 10px 12px; border: 1px solid var(--edge); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(109, 100, 92);}
#developer .v04 .timeline{display: grid; grid-template-columns: repeat(5, 1fr); gap: 0px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); margin-top: 30px;}
#developer .v04 .step{padding: 26px 18px 24px; position: relative;}
#developer .v04 .step + .step{border-left: 1px solid var(--edge);}
#developer .v04 .step b{display: block; font: 400 27px var(--font-display); margin-bottom: 7px;}
#developer .v04 .step strong{display: block; font-size: 11px; margin-bottom: 6px;}
#developer .v04 .step p{margin: 0px; font-size: 10px; color: rgb(123, 115, 107); line-height: 1.7;}
#developer .v04 .projects{display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr; gap: 18px; margin-top: 28px;}
#developer .v04 .lead-card{border: 1px solid var(--edge); background: var(--paper);}
#developer .v04 .lead-card .project-visual{min-height: 260px;}
#developer .v04 .lead-card .copy{padding: 22px;}
#developer .v04 .lead-card h3{font: 400 26px var(--font-display); margin: 0px 0px 8px;}
#developer .v04 .lead-card p{font-size: 12px; line-height: 1.8; color: rgb(108, 98, 88); margin: 0px 0px 14px;}
#developer .v05{display: grid; grid-template-columns: 57% 43%; min-height: 650px;}
#developer .v05 .left{padding: 60px clamp(28px, 5cqw, 78px) 46px;}
#developer .v05 h2{font: 400 clamp(36px, 4.2cqw, 60px) / 1.1 var(--font-display); margin: 16px 0px 18px;}
#developer .v05 .filters{display: flex; gap: 10px; flex-wrap: wrap; margin: 0px 0px 24px;}
#developer .v05 .portfolio-stage{border: 1px solid var(--edge); background: var(--paper);}
#developer .v05 .portfolio-stage .project-visual{min-height: 280px;}
#developer .v05 .portfolio-copy{padding: 24px;}
#developer .v05 .portfolio-copy h3{font: 400 28px var(--font-display); margin: 0px 0px 8px;}
#developer .v05 .portfolio-copy p{font-size: 12px; line-height: 1.8; color: rgb(108, 98, 88); margin: 0px 0px 16px;}
#developer .v05 .portfolio-meta{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0px; border-top: 1px solid var(--edge);}
#developer .v05 .portfolio-meta div{padding: 14px 16px;}
#developer .v05 .portfolio-meta div + div{border-left: 1px solid var(--edge);}
#developer .v05 .portfolio-meta b{display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(123, 114, 105); margin-bottom: 8px;}
#developer .v05 .portfolio-meta span{font: 400 18px var(--font-display);}
#developer .v05 .right{background: var(--ink); color: rgb(247, 245, 241); padding: 62px 38px 44px;}
#developer .v05 .right .kicker{color: rgb(207, 200, 191);}
#developer .v05 .right p{font-size: 12px; line-height: 1.92; color: rgb(214, 206, 197); margin: 0px 0px 24px;}
#developer .v05 .statcol{display: grid; grid-template-columns: 1fr 1fr; gap: 0px; border-top: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14);}
#developer .v05 .statcol .cell{padding: 18px 0px;}
#developer .v05 .statcol .cell:nth-child(2n){padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, 0.14);}
#developer .v05 .statcol .cell:nth-child(n+3){border-top: 1px solid rgba(255, 255, 255, 0.14);}
#developer .v05 .statcol b{display: block; font: 400 30px var(--font-display); margin-bottom: 6px;}
#developer .v05 .right .service-list{margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14);}
#developer .v05 .right .service-row{display: flex; justify-content: space-between; gap: 14px; padding: 14px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); font-size: 11px; color: rgb(236, 231, 225);}
#developer .v05 .right .service-row span:last-child{color: rgb(191, 183, 173);}
@container developer (max-width:750px){
#developer .v01,#developer .v03,#developer .v05{grid-template-columns: 1fr;}
#developer .v01 .left,#developer .v05 .left,#developer .v05 .right,#developer .v03 .manifesto,#developer .v03 .right{padding: 34px 22px;}
#developer .v01 .right{padding: 0px 22px 34px;}
#developer .v01 .hero-project{grid-template-columns: 1fr;}
#developer .v01 .mini-grid,#developer .v02 .cases,#developer .v04 .projects,#developer .v03 .portfolio-grid,#developer .v03 .services-box,#developer .portfolio-grid{grid-template-columns: 1fr;}
#developer .v02,#developer .v04{padding: 34px 22px;}
#developer .v02 .top,#developer .v04 .heading{grid-template-columns: 1fr;}
#developer .v02 .aside{padding-left: 0px; border-left: 0px; border-top: 1px solid var(--edge); padding-top: 20px;}
#developer .v02 .aside .service-list{grid-template-columns: 1fr;}
#developer .metric-grid{grid-template-columns: 1fr 1fr;}
#developer .metric{padding: 16px 14px;}
#developer .metric:nth-child(2n){border-left: 1px solid var(--edge);}
#developer .v03 .services-box{grid-template-columns: 1fr;}
#developer .v03 .services-box div{border-right: 0px; border-bottom: 1px solid var(--edge);}
#developer .v03 .services-box div:last-child{border-bottom: 0px;}
#developer .v04 .timeline{grid-template-columns: 1fr;}
#developer .v04 .step + .step{border-left: 0px; border-top: 1px solid var(--edge);}
#developer .v05 .portfolio-meta{grid-template-columns: 1fr;}
#developer .v05 .portfolio-meta div + div{border-left: 0px; border-top: 1px solid var(--edge);}
#developer .v05 .statcol{grid-template-columns: 1fr 1fr;}
#developer .v05 .right{padding-top: 34px;}
#developer .project-visual{min-height: 180px !important;}
}
/* Approved Nightfall tokens and reusable responsive behavior. */
#developer .nfblock{font-family:var(--font-body)}
#developer h2,#developer h3,#developer .case strong{font-weight:400}
#developer .v01 .hero-project h3{font:400 clamp(27px,3.2cqw,42px)/1.12 var(--font-display);margin:12px 0 10px}
#developer .bodycopy,#developer .metric span,#developer .metric small,#developer .project-card p,#developer .v01 .mini-card p,#developer .v01 .hero-project p,#developer .v02 .service-item,#developer .v02 .case span,#developer .v03 .services-box span,#developer .v04 .step p,#developer .v04 .lead-card p,#developer .v05 .portfolio-copy p{color:var(--muted);font-size:12px;line-height:1.8}
#developer .bodycopy{font-size:13px}
#developer .v03 .manifesto p{color:#d4cdc5}
#developer .v03 .manifesto .quote{font-family:var(--font-display)}
#developer .v03 .header{flex-wrap:wrap}
#developer .textlink,#developer .btn-chip{min-height:44px;align-items:center;touch-action:manipulation}
#developer button{border-radius:0}
#developer button:focus-visible,#developer a:focus-visible,#developer [role=tabpanel]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#developer .tag{max-width:100%;font-size:9px;letter-spacing:.08em;flex-wrap:wrap}
#developer .meta-line{flex-wrap:wrap;font-size:10px;letter-spacing:.06em}
#developer .v01{grid-template-columns:minmax(0,.41fr) minmax(0,.59fr)}
#developer .v01 .hero-project{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
#developer .v01 .metric b,#developer .v05 .statcol b{font-size:clamp(27px,3cqw,43px)}
#developer .v04 .heading{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
#developer .v05 .portfolio-meta div{padding:14px 10px;min-width:0}
#developer .v05 .portfolio-meta span{font-size:16px;overflow-wrap:anywhere}
#developer .v05 .right .cell span{font-size:12px}
#developer .demo-note{font:400 11px/1.7 var(--font-body);padding:14px 22px;color:var(--muted);background:var(--paper);border-top:1px solid var(--line)}
@container developer (max-width:750px){
 #developer .display,#developer .v02 .top h2,#developer .v03 .manifesto h2,#developer .v04 .heading h2,#developer .v05 h2{font-size:35px;overflow-wrap:anywhere}
 #developer .v01,#developer .v01 .hero-project,#developer .v04 .heading{grid-template-columns:1fr}
 #developer .metric:nth-child(n+3){border-top:1px solid var(--line)}
 #developer .metric:nth-child(odd){border-left:0}
 #developer .v05 .service-row{flex-wrap:wrap}
 #developer .v01 .metric b,#developer .v05 .statcol b{font-size:30px}
 #developer .v03 .manifesto .quote{font-size:21px}
}
@media(prefers-reduced-motion:reduce){#developer *{transition:none!important;scroll-behavior:auto!important}}
#developer .tag{border-radius:0}
/* Variant 01 shares one bottom edge for the metrics and project cards. */
@container developer (min-width:751px){
 #developer .v01 .left{display:flex;flex-direction:column}
 #developer .v01 .bodycopy{margin-bottom:32px}
 #developer .v01 .metric-grid{margin-top:auto}
 #developer .v01 .hero-project{flex:1}
}
@container developer (min-width:751px){
 #developer .v01 .hero-project>.copy{display:flex;flex-direction:column}
 #developer .v01 .hero-project .meta-line{margin-top:auto}
}