:root{--black:#111;--paper:#f5f0e7;--yellow:#ffd523;--blue:#5e7cff;--red:#ff5b45;--lime:#baf23a;--pink:#ff77b7;--border:3px solid var(--black);--shadow:7px 7px 0 var(--black)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--black);font-family:'Space Grotesk',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}.ticker{overflow:hidden;background:var(--yellow);border-bottom:var(--border);font:700 13px/1 'Space Grotesk';letter-spacing:2px;padding:9px 0;white-space:nowrap}.ticker__track{width:max-content;animation:ticker 18s linear infinite}@keyframes ticker{to{transform:translateX(-50%)}}.nav{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:var(--border)}.brand{display:flex;align-items:center;gap:10px;font-family:'Archivo Black';font-size:20px}.brand__mark{display:grid;place-items:center;width:42px;height:42px;background:var(--red);border:var(--border);box-shadow:3px 3px 0 var(--black);font-size:14px}.nav__links{display:flex;gap:30px;font-weight:700}.nav__links a:hover{text-decoration:underline;text-decoration-thickness:3px}.nav__actions{display:flex;gap:12px;align-items:center}.lang{background:transparent;border:0;font-weight:800;cursor:pointer;padding:10px}.button{display:inline-block;background:var(--yellow);border:var(--border);box-shadow:var(--shadow);padding:17px 22px;font-weight:800;transition:.15s}.button:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--black)}.button--small{padding:11px 16px;box-shadow:4px 4px 0 var(--black)}.hero{min-height:680px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:50px;padding-block:70px}.eyebrow{font-size:13px;font-weight:800;letter-spacing:2px;margin:0 0 18px}.hero h1,.section h2,.contact h2{font-family:'Archivo Black';font-weight:400;letter-spacing:-4px;line-height:.9;margin:0}.hero__copy{container-type:inline-size}.hero h1{font-size:clamp(1rem,12.5cqw,110px);letter-spacing:-.045em}.highlight{position:relative;display:inline-block;z-index:0}.highlight:after{content:"";position:absolute;left:-6px;right:-8px;bottom:4px;height:25%;background:var(--yellow);border:2px solid var(--black);z-index:-1;transform:rotate(-1deg)}.hero__text{font-size:20px;line-height:1.5;max-width:620px;margin:30px 0}.hero__buttons{display:flex;align-items:center;gap:28px}.text-link{font-weight:800;border-bottom:2px solid}.hero__visual{position:relative;display:grid;place-items:center}.logo-card{background:#fff;border:var(--border);box-shadow:12px 12px 0 var(--black);transform:rotate(2deg);padding:22px}.logo-card img{display:block;width:100%;max-width:430px;filter:contrast(1.2)}.sticker{position:absolute;z-index:2;display:grid;place-items:center;text-align:center;font-family:'Archivo Black';border:var(--border);box-shadow:4px 4px 0 var(--black)}.sticker--one{width:88px;height:88px;border-radius:50%;background:var(--blue);top:-20px;right:-12px;transform:rotate(12deg)}.sticker--two{background:var(--red);padding:12px;bottom:-25px;left:-15px;transform:rotate(-8deg)}.statement{background:var(--black);color:#fff;border-block:var(--border);border-color:var(--black)}.statement__inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px}.statement p{font-family:'Archivo Black';font-size:clamp(18px,3vw,30px);text-align:center;margin:0}.statement span{color:var(--yellow);font-size:30px}.section{padding-block:110px}.section-heading{display:grid;grid-template-columns:90px 1fr;margin-bottom:55px}.number{font-family:'Archivo Black';font-size:20px}.section h2{font-size:clamp(48px,7vw,82px)}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-card{border:var(--border);padding:28px;min-height:330px;position:relative}.service-card--yellow{background:var(--yellow)}.service-card--blue{background:var(--blue)}.service-card--red{background:var(--red)}.service-card__icon{font-size:54px}.service-card__number{position:absolute;right:25px;top:25px;font-weight:800}.service-card h3{font-family:'Archivo Black';font-size:27px;margin:42px 0 15px}.service-card p{font-size:17px;line-height:1.45}.tags{position:absolute;bottom:24px;font-size:12px;font-weight:800}.section--black{background:var(--black);color:#fff;border-block:var(--border)}.section-heading--light .number{color:var(--yellow)}.projects{display:grid;grid-template-columns:1fr 1fr;gap:28px}.project{color:var(--black);border:3px solid #fff;box-shadow:8px 8px 0 #fff}.project--lime{background:var(--lime)}.project--pink{background:var(--pink)}.project__mock{margin:24px;background:var(--paper);border:var(--border);height:330px;padding:25px;position:relative;overflow:hidden}.browser{display:flex;gap:7px;border-bottom:3px solid;padding-bottom:14px;margin-bottom:38px}.browser span{width:13px;height:13px;border:2px solid;border-radius:50%}.project__mock strong{font-family:'Archivo Black';font-size:45px;line-height:.9}.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:35px}.mock-grid i,.mock-buttons i{display:block;border:3px solid;height:65px;background:var(--yellow)}.mock-buttons{display:grid;gap:9px;margin-top:32px}.mock-buttons i{height:35px;background:var(--blue)}.project__meta{display:flex;justify-content:space-between;padding:0 24px 24px;font-weight:800}.steps{display:grid;grid-template-columns:repeat(4,1fr);border:var(--border)}.steps article{padding:28px;min-height:250px;border-right:var(--border)}.steps article:last-child{border:0}.steps span{display:grid;place-items:center;width:44px;height:44px;border:var(--border);background:var(--yellow);font-family:'Archivo Black';box-shadow:3px 3px 0}.steps h3{font-family:'Archivo Black';font-size:22px;margin-top:50px}.steps p{line-height:1.45}.contact{padding-block:50px 110px;display:grid;grid-template-columns:1fr 200px;align-items:center}.contact__box{background:var(--blue);border:var(--border);box-shadow:12px 12px 0 var(--black);padding:55px}.contact h2{font-size:clamp(60px,9vw,110px)}.contact h2 span{color:var(--yellow);-webkit-text-stroke:3px var(--black)}.contact__box>p:not(.eyebrow){font-size:20px;max-width:600px}.button--white{background:#fff;margin-top:20px}.contact__badge{width:190px;height:190px;margin-left:-30px;border-radius:50%;background:var(--yellow);border:var(--border);box-shadow:6px 6px 0;text-align:center;display:grid;place-items:center;font-family:'Archivo Black';font-size:27px;line-height:.9;transform:rotate(8deg)}.footer{border-top:var(--border);min-height:120px;display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px}.footer .brand{font-size:17px}@media(max-width:850px){.nav__links{display:none}.hero{grid-template-columns:1fr;padding-top:50px}.hero__visual{margin:35px auto 20px;max-width:500px}.services-grid,.projects{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.steps article:nth-child(2){border-right:0}.steps article:nth-child(-n+2){border-bottom:var(--border)}.contact{grid-template-columns:1fr}.contact__badge{margin:-30px 30px 0 auto}.section-heading{grid-template-columns:55px 1fr}}@media(max-width:560px){.wrap{width:min(100% - 24px,1180px)}.nav{height:74px}.nav .brand>span:last-child{display:none}.button--small{display:none}.hero{min-height:auto;padding-block:45px}.hero__text{font-size:17px}.hero__buttons{align-items:flex-start;flex-direction:column}.sticker--one{right:-5px}.services-grid{gap:18px}.section{padding-block:75px}.section h2{font-size:13vw;letter-spacing:-3px}.steps{grid-template-columns:1fr}.steps article{border-right:0!important;border-bottom:var(--border)!important;min-height:210px}.steps article:last-child{border-bottom:0!important}.contact{padding-bottom:80px}.contact__box{padding:35px 22px}.contact h2{font-size:15vw;letter-spacing:-3px}.contact__badge{width:130px;height:130px;font-size:20px}.footer{padding-block:30px;gap:20px;flex-wrap:wrap}.footer .brand{width:100%}.project__mock{height:270px;margin:14px}.project__mock strong{font-size:35px}}

/* Project cards: both faces share a grid cell so longer copy sets the height. */
.project{display:block;width:100%;padding:0;text-align:left;cursor:pointer;font:inherit;perspective:1400px;background:transparent}
.project--lime{--project-color:var(--lime)}
.project--pink{--project-color:var(--pink)}
.project--blue{--project-color:var(--blue)}
.project--yellow{--project-color:var(--yellow)}
.project__inner{display:grid;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.project.is-flipped .project__inner{transform:rotateY(180deg)}
.project__front,.project__back{grid-area:1/1;background:var(--project-color);backface-visibility:hidden;-webkit-backface-visibility:hidden;min-width:0}
.project__front{display:flex;flex-direction:column}
.project__mock{display:block;flex:1;min-height:330px}
.project__meta{gap:14px;flex-wrap:wrap;font-size:13px;margin-top:auto}
.project__back{display:flex;flex-direction:column;justify-content:center;padding:32px;transform:rotateY(180deg)}
.project__back strong{font-family:'Archivo Black';font-size:clamp(28px,3.4vw,44px);line-height:1.05;overflow-wrap:anywhere}
.project__description{display:block;font-size:19px;line-height:1.55;margin:24px 0 30px}
.project__return{margin-top:auto;font-size:13px}
.project:focus-visible{outline:4px solid var(--yellow);outline-offset:12px}
.project:hover .project__meta b{text-decoration:underline;text-underline-offset:4px}
.mock-flow{display:flex;align-items:center;gap:12px;margin-top:35px}
.mock-flow i{display:block;width:60px;height:60px;border:var(--border);background:var(--blue)}
.mock-flow i:nth-of-type(2){background:var(--pink)}
.mock-flow>span{font-size:26px;font-weight:700}
@media(max-width:560px){.project__mock{min-height:270px;padding:20px}.project__mock strong{font-size:clamp(25px,7.5vw,35px)}.project__back{padding:24px}.project__description{font-size:17px}.project__meta{padding:0 14px 20px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.project__inner{transition:none}}

/* Let grid content shrink within the viewport, including long headings. */
.contact__badge{cursor:pointer;touch-action:manipulation;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
@media(hover:hover) and (pointer:fine){
  .contact__badge:hover{transform:translate(-3px,-3px) rotate(3deg);box-shadow:9px 9px 0 var(--black);background:var(--red)}
}
.contact__badge:focus-visible{outline:4px solid var(--black);outline-offset:6px}
.contact__badge:active{transform:translate(4px,4px) rotate(8deg) scale(.97);box-shadow:2px 2px 0 var(--black);background:var(--red)}
@media(prefers-reduced-motion:reduce){.contact__badge{transition:none}}

/* Keep content within narrow layouts. */
.hero__copy,.hero__visual,.section-heading>div,.contact__box{min-width:0}
@media(max-width:850px){
  .hero__visual{width:min(500px,calc(100% - 40px))}
}
@media(max-width:560px){
  .section-heading{grid-template-columns:40px minmax(0,1fr)}
  .section h2{font-size:10vw;letter-spacing:-2px}
  .contact h2{font-size:13vw}
  .contact .button{max-width:100%;padding-inline:14px;overflow-wrap:anywhere}
}

/* Flat panels convey information; raised controls invite interaction. */
.brand__mark{flex-shrink:0}
.brand__mark img{display:block;width:28px;height:30px;object-fit:contain}
.project__meta b,.project__return{display:inline-block;align-self:flex-start;border:2px solid var(--black);background:var(--paper);padding:8px 10px;box-shadow:3px 3px 0 var(--black)}
.project__meta{align-items:center}
a:focus-visible,button:focus-visible{outline:3px solid var(--black);outline-offset:5px}
.section--black a:focus-visible,.section--black button:focus-visible{outline-color:var(--yellow)}
@media(hover:hover) and (pointer:fine){
  .brand:hover .brand__mark{background:var(--yellow)}
  .lang:hover{background:var(--yellow)}
  .footer>a:last-child:hover{text-decoration:underline;text-underline-offset:4px}
  .project:hover .project__meta b,.project:hover .project__return{background:var(--yellow)}
}